@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/dist/styles/token-search-field.css

@@ -1,8 +1,8 @@
 .kui-token-search {
   --kui-token-search-background: var(--kui-color-surface);
-  --kui-token-search-border: var(--kui-color-border);
-  --kui-token-search-token-background: var(--kui-color-accent);
-  --kui-token-search-token-foreground: var(--kui-color-accent-text);
+  --kui-token-search-border: var(--kui-color-neutral-border-normal);
+  --kui-token-search-token-background: var(--kui-color-brand-fill-normal);
+  --kui-token-search-token-foreground: var(--kui-color-brand-on-quiet);
   --kui-token-search-line-size: 2.125rem;
 
   display: grid;
@@ -48,12 +48,12 @@
 
 .kui-token-search__editor {
   grid-column: 2;
-  min-width: 5rem;
+  min-width: var(--kui-token-search-editor-min-width, 0px);
   min-height: var(--kui-token-search-line-size);
   padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   box-sizing: border-box;
   outline: 0;
-  caret-color: var(--kui-color-accent-text);
+  caret-color: var(--kui-color-brand-on-quiet);
   font-size: var(--kui-font-s);
   line-height: 1.35;
   white-space: pre-wrap;
@@ -145,6 +145,35 @@
   grid-column: 4;
 }
 
+.kui-token-search__suggestions {
+  display: grid;
+  grid-column: 2 / -1;
+  min-width: 0;
+  padding: 0.25rem;
+  border: 1px solid var(--kui-token-search-border);
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-token-search-background);
+  gap: 0.125rem;
+}
+
+.kui-token-search__suggestion {
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.kui-token-search__suggestion:hover,
+.kui-token-search__suggestion:focus-visible {
+  background: var(--kui-color-surface-lowered);
+  outline: var(--kui-focus-ring);
+}
+
 .kui-token-search[data-has-trailing="false"] .kui-token-search__clear {
   grid-column: 4;
 }
@@ -159,7 +188,12 @@
   width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
   max-width: 100%;
   overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
+  /* Size the inline axis through `width` only. A `flex-basis` of the expanded
+     width would drive the MAIN axis, which is the field's HEIGHT inside a flex
+     column — stretching the field tall (KF-EPEM88). `flex: 0 1 auto` keeps the
+     no-grow / may-shrink behavior a toolbar row wants without leaking the width
+     into the cross axis. */
+  flex: 0 1 auto;
   transition:
     width 0.25s ease,
     background-color 0.2s ease,
@@ -208,44 +242,26 @@
   margin-inline-start: 0.375rem;
 }
 
-.kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
-  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
-  max-width: 100%;
-  height: auto;
-  min-width: 0;
-  overflow: hidden;
-  flex: 0 1 var(--kui-token-search-expanded-width, 30rem);
-  transition:
-    width 0.25s ease,
-    background-color 0.2s ease,
-    border-color 0.2s ease;
-}
-
-.kui-toolbar-control-group[data-expanded="false"]:has(
-    > .kui-token-search[data-collapsible="true"]
-  ) {
-  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  flex: 0 0 auto;
-}
-
-.kui-toolbar-control-group > .kui-token-search[data-collapsible="true"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"] {
   --kui-token-search-line-size: 2rem;
 
   min-height: 2.5rem;
   padding: 0.25rem 0.375rem;
   border: 0;
+  /* This field is the group's inset visual layer. Inherit the same concentric
+     radius contract as buttons instead of retaining TokenSearchField's own pill
+     radius when the group switches to `shape="rounded"`. */
+  border-radius: var(--kui-control-highlight-radius);
   background: transparent;
   box-shadow: none;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"]:focus-within {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
   background: var(--kui-token-search-background);
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"] {
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"] {
   width: 2.5rem;
   min-width: 2.5rem;
   height: 2.5rem;
@@ -253,23 +269,13 @@
   padding: 0;
 }
 
-.kui-toolbar-control-group
-  > .kui-token-search[data-collapsible="true"][data-expanded="false"]
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"][data-expanded="false"]
   .kui-token-search__expand {
   padding-inline: 0;
 }
 
-.kui-toolbar-control-group:has(
-    > .kui-token-search[data-collapsible="true"]
-  ):focus-within {
-  border-color: var(--kui-color-text-link);
-  box-shadow: 0 0 0 3px
-    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .kui-token-search[data-collapsible="true"],
-  .kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+  .kui-token-search[data-collapsible="true"] {
     transition-duration: 0s;
   }
 }