Add bundles

build/classic/core.css

@@ -24,25 +24,51 @@
    ========================================================================== */
 .cf-association__bar {
   position: relative;
-  z-index: 1; }
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  border-color: #e2e4e7;
+  border-style: solid;
+  border-width: 1px 1px 0;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); }
+  .cf-association__bar .cf-search-input {
+    flex: 1 1 auto; }
+  .cf-association__bar .cf-search-input__inner {
+    border: 0;
+    box-shadow: none; }
+    .cf-association__bar .cf-search-input__inner:focus {
+      border-color: none;
+      box-shadow: none;
+      outline: none; }
+  .cf-association__bar[focus-within] {
+    border-color: #5b9dd9;
+    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    outline: 2px solid transparent; }
+  .cf-association__bar:focus-within {
+    border-color: #5b9dd9;
+    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    outline: 2px solid transparent; }
 
 .cf-association__counter {
-  position: absolute;
-  top: 50%;
-  right: 8px;
   font-size: 12px;
-  line-height: 1;
   color: #23282d;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  pointer-events: none; }
+  pointer-events: none;
+  margin-right: 5px;
+  margin-left: 5px; }
+
+.cf-association__spinner {
+  float: none;
+  margin: 0;
+  margin-left: 5px; }
 
 .cf-association__cols {
   background: #fff;
   position: relative;
   z-index: 0;
   display: flex;
-  border-width: 0 1px 1px;
+  border-width: 1px;
   border-style: solid;
   border-color: #e2e4e7; }
   .cf-association__cols::before {
@@ -89,15 +115,25 @@
   margin-right: 8px; }
 
 .cf-association__option-title {
-  overflow: hidden;
+  flex: 1;
+  position: relative;
+  margin-right: 4px; }
+  .cf-association__option--selected .cf-association__option-title {
+    color: #82878c; }
+
+.cf-association__option-title-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   font-size: 13px;
   line-height: 1.4;
   color: #32373c;
+  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-right: 4px; }
-  .cf-association__option--selected .cf-association__option-title {
-    color: #82878c; }
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%); }
 
 .cf-association__option-type {
   font-size: 9px;

build/gutenberg/core.css

@@ -24,25 +24,51 @@
    ========================================================================== */
 .cf-association__bar {
   position: relative;
-  z-index: 1; }
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  border-color: #e2e4e7;
+  border-style: solid;
+  border-width: 1px 1px 0;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); }
+  .cf-association__bar .cf-search-input {
+    flex: 1 1 auto; }
+  .cf-association__bar .cf-search-input__inner {
+    border: 0;
+    box-shadow: none; }
+    .cf-association__bar .cf-search-input__inner:focus {
+      border-color: none;
+      box-shadow: none;
+      outline: none; }
+  .cf-association__bar[focus-within] {
+    border-color: #5b9dd9;
+    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    outline: 2px solid transparent; }
+  .cf-association__bar:focus-within {
+    border-color: #5b9dd9;
+    box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    outline: 2px solid transparent; }
 
 .cf-association__counter {
-  position: absolute;
-  top: 50%;
-  right: 8px;
   font-size: 12px;
-  line-height: 1;
   color: #23282d;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  pointer-events: none; }
+  pointer-events: none;
+  margin-right: 5px;
+  margin-left: 5px; }
+
+.cf-association__spinner {
+  float: none;
+  margin: 0;
+  margin-left: 5px; }
 
 .cf-association__cols {
   background: #fff;
   position: relative;
   z-index: 0;
   display: flex;
-  border-width: 0 1px 1px;
+  border-width: 1px;
   border-style: solid;
   border-color: #e2e4e7; }
   .cf-association__cols::before {
@@ -89,15 +115,25 @@
   margin-right: 8px; }
 
 .cf-association__option-title {
-  overflow: hidden;
+  flex: 1;
+  position: relative;
+  margin-right: 4px; }
+  .cf-association__option--selected .cf-association__option-title {
+    color: #82878c; }
+
+.cf-association__option-title-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   font-size: 13px;
   line-height: 1.4;
   color: #32373c;
+  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin-right: 4px; }
-  .cf-association__option--selected .cf-association__option-title {
-    color: #82878c; }
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%); }
 
 .cf-association__option-type {
   font-size: 9px;

languages/carbon-fields-ui.pot

@@ -3,22 +3,30 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "X-Generator: babel-plugin-makepot\n"
 
-#: packages/blocks/components/block-edit/index.js:201
+#: packages/blocks/components/block-edit/index.js:214
 msgid "Show preview"
 msgstr ""
 
-#: packages/blocks/components/block-edit/index.js:202
+#: packages/blocks/components/block-edit/index.js:215
 msgid "Hide preview"
 msgstr ""
 
-#: packages/blocks/components/block-edit/index.js:271
+#: packages/blocks/components/block-edit/index.js:286
 msgid "Fields"
 msgstr ""
 
 #: packages/blocks/components/not-supported-field/index.js:14
 msgid "Field of type '%s' is not supported in Gutenberg."
 msgstr ""
 
+#: packages/blocks/components/server-side-render/index.js:129
+msgid "Error loading block: %s"
+msgstr ""
+
+#: packages/blocks/components/server-side-render/index.js:135
+msgid "No results found."
+msgstr ""
+
 #: packages/blocks/fields/datetime/index.js:59
 #: packages/core/fields/date/index.js:15
 #: packages/metaboxes/fields/datetime/index.js:9
@@ -63,29 +71,29 @@ msgstr ""
 msgid "Search..."
 msgstr ""
 
-#: packages/core/fields/association/index.js:113
+#: packages/core/fields/association/index.js:168
 msgid "Maximum number of items reached (%s items)"
 msgstr ""
 
-#: packages/core/fields/association/index.js:204
+#: packages/core/fields/association/index.js:266
 msgid "Showing %1$d of %2$d results"
 msgstr ""
 
-#: packages/core/fields/association/index.js:380
+#: packages/core/fields/association/index.js:449
 msgid "An error occurred while trying to fetch association options."
 msgstr ""
 
-#: packages/core/fields/association/index.js:430
+#: packages/core/fields/association/index.js:506
 #: packages/core/fields/complex/index.js:428
 #: packages/core/hocs/with-validation/required.js:20
 msgid "This field is required."
 msgstr ""
 
-#: packages/core/fields/association/index.js:434
+#: packages/core/fields/association/index.js:510
 msgid "Minimum number of items not reached (%s items)"
 msgstr ""
 
-#: packages/core/fields/color/index.js:86
+#: packages/core/fields/color/index.js:92
 msgid "Select a color"
 msgstr ""
 
@@ -197,7 +205,7 @@ msgstr ""
 msgid "An error occurred while trying to fetch files data."
 msgstr ""
 
-#: packages/metaboxes/containers/index.js:52
+#: packages/metaboxes/containers/index.js:55
 msgid "Could not find DOM element for container \"%1$s\"."
 msgstr ""