@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

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

@@ -1,20 +1,47 @@
+.kui-token-search__field {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: var(--wa-space-2xs, 0.25rem);
+}
+
+.kui-token-search__field-label {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+  font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: var(--wa-line-height-condensed, 1.2);
+  text-transform: uppercase;
+}
+
+.kui-token-search__field-required {
+  margin-inline-start: var(--wa-form-control-required-content-offset, 0.1em);
+  color: var(--wa-form-control-required-content-color, inherit);
+}
+
+.kui-token-search__field-hint {
+  padding-inline: 0.5625rem;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  line-height: var(--wa-line-height-normal, 1.6);
+}
+
 .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-line-size: 2.125rem;
 
   display: grid;
+  position: relative;
   width: 100%;
   min-width: 0;
   min-height: 2.75rem;
   padding: 0.25rem 0.5rem;
   box-sizing: border-box;
-  border: 1px solid var(--kui-token-search-border);
+  border: 1px solid
+    var(--kui-token-search-border, var(--kui-color-neutral-border-normal));
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
   color: var(--kui-color-text);
-  background: var(--kui-token-search-background);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: start;
   gap: var(--kui-layout-item-gap, 0.5rem);
@@ -26,6 +53,13 @@
     color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
 }
 
+.kui-token-search[data-presentation="form-field"] {
+  border-radius: var(
+    --wa-form-control-border-radius,
+    var(--wa-border-radius-m)
+  );
+}
+
 .kui-token-search[data-disabled="true"] {
   opacity: 0.55;
 }
@@ -48,12 +82,13 @@
 
 .kui-token-search__editor {
   grid-column: 2;
-  min-width: 5rem;
+  grid-row: 1;
+  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;
@@ -61,10 +96,29 @@
   cursor: text;
 }
 
-.kui-token-search__editor:empty::before {
+/* iOS can magnify a small editor on focus and leave the page magnified after
+   blur. Keep the desktop small-text rhythm, but give touch editors legible text
+   without restricting the user's own page zoom. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-token-search__editor {
+    font-size: max(16px, var(--kui-font-s));
+  }
+}
+
+.kui-token-search[data-placeholder-visible="true"]:has(
+    > .kui-token-search__editor
+  )::before {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
   color: var(--kui-color-text-quiet);
   content: attr(data-placeholder);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  overflow: hidden;
   pointer-events: none;
+  white-space: nowrap;
 }
 
 .kui-token-search__token {
@@ -73,8 +127,14 @@
   margin-inline: 0.125rem;
   padding-inline-start: 0.45rem;
   border-radius: var(--kui-radius-pill);
-  color: var(--kui-token-search-token-foreground);
-  background: var(--kui-token-search-token-background);
+  color: var(
+    --kui-token-search-token-foreground,
+    var(--kui-color-brand-on-quiet)
+  );
+  background: var(
+    --kui-token-search-token-background,
+    var(--kui-color-brand-fill-normal)
+  );
   font-size: var(--kui-font-xs);
   line-height: 1;
   white-space: nowrap;
@@ -84,7 +144,8 @@
 }
 
 .kui-token-search__token button,
-.kui-token-search__clear {
+.kui-token-search__clear,
+.kui-token-search__trailing-action {
   appearance: none;
   display: inline-grid;
   padding: 0;
@@ -109,12 +170,24 @@
 .kui-token-search__token-remove:hover,
 .kui-token-search__token-remove:focus-visible,
 .kui-token-search__clear:hover,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:hover,
+.kui-token-search__trailing-action:focus-visible,
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
   background: color-mix(in srgb, currentColor 12%, transparent);
 }
 
+/* An open disclosure or an on toggle keeps the hover fill and reads at full
+   text strength, so its state stays visible after the pointer leaves. */
+.kui-token-search__trailing-action[aria-expanded="true"],
+.kui-token-search__trailing-action[aria-pressed="true"] {
+  color: var(--kui-color-text);
+}
+
 .kui-token-search__token button:focus-visible,
-.kui-token-search__clear:focus-visible {
+.kui-token-search__clear:focus-visible,
+.kui-token-search__trailing-action:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
@@ -129,7 +202,8 @@
 }
 
 .kui-token-search__clear,
-.kui-token-search__trailing {
+.kui-token-search__trailing,
+.kui-token-search__trailing-action {
   display: inline-grid;
   width: 1.5rem;
   height: var(--kui-token-search-line-size);
@@ -139,24 +213,78 @@
 
 .kui-token-search__clear {
   grid-column: 3;
+  border-radius: var(--kui-radius-pill);
 }
 
 .kui-token-search__trailing {
   grid-column: 4;
 }
 
+.kui-token-search__trailing-action {
+  grid-column: 4;
+  border-radius: var(--kui-radius-pill);
+}
+
+.kui-token-search__suggestions {
+  display: grid;
+  position: absolute;
+  z-index: 20;
+  inset-block-start: calc(100% + 0.25rem);
+  inset-inline-start: 0;
+  width: min(max(100%, 15rem), calc(100vw - 1rem));
+  max-height: 15rem;
+  padding: var(--_kui-popup-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-m);
+  gap: var(--_kui-popup-row-gap);
+  overflow-y: auto;
+}
+
+.kui-token-search__suggestions:has(> :nth-child(2)) {
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+}
+
+.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;
+  justify-content: flex-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;
 }
 
 .kui-token-search__clear svg,
-.kui-token-search__trailing svg {
+.kui-token-search__trailing svg,
+.kui-token-search__trailing-action svg {
   width: 0.85rem;
   height: 0.85rem;
 }
 
 .kui-token-search[data-collapsible="true"] {
-  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  width: min(
+    var(
+      --_kui-toolbar-group-grow-search-width,
+      var(--kui-token-search-expanded-width, 30rem)
+    ),
+    100%
+  );
   max-width: 100%;
   overflow: hidden;
   /* Size the inline axis through `width` only. A `flex-basis` of the expanded
@@ -165,12 +293,52 @@
      no-grow / may-shrink behavior a toolbar row wants without leaking the width
      into the cross axis. */
   flex: 0 1 auto;
+  /* A search toolbar group animates the open/close itself and sets this
+     duration to 0s: the field is the group's width on every frame instead of
+     running a second, lagging width transition that left an empty band beside
+     a wrapped query (KF-50K0JM, KF-CXQB30). */
   transition:
-    width 0.25s ease,
+    width var(--_kui-toolbar-group-search-width-duration, 0.25s) ease,
     background-color 0.2s ease,
     border-color 0.2s ease;
 }
 
+/* While a grow search group is still narrower than its basis, keep the
+   basis-wide layout it provides; the group clips the field and reveals the
+   query instead of re-wrapping it every frame. Elsewhere this is 0px. */
+.kui-token-search[data-collapsible="true"][data-expanded="true"] {
+  min-width: var(--_kui-toolbar-group-grow-search-min-width, 0px);
+}
+
+/* While a search group opens, keep the query on one line: the group's clip
+   reveals it instead of re-wrapping it in the narrow, still-growing field.
+   Wrapping returns when the opening ends. The duration is 0s (no effect)
+   outside a search group and under reduced motion. */
+.kui-token-search[data-collapsible="true"][data-expanded="true"]
+  > .kui-token-search__editor {
+  animation: kui-token-search-reveal
+    var(--_kui-toolbar-group-search-reveal-duration, 0s) linear;
+}
+
+@keyframes kui-token-search-reveal {
+  from,
+  to {
+    overflow-wrap: normal;
+    white-space: pre;
+  }
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"][data-fill="true"] {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"]:has(
+    .kui-token-search__suggestions
+  ) {
+  overflow: visible;
+}
+
 .kui-token-search[data-collapsible="true"][data-expanded="false"] {
   width: 2.75rem;
   min-width: 2.75rem;
@@ -213,47 +381,32 @@
   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;
-  /* Same reason as the field above (KF-EPEM88): drive the inline size through
-     `width`, not `flex-basis`, so a group placed in a flex column is not
-     stretched to the expanded width in its cross axis. */
-  flex: 0 1 auto;
-  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"] .kui-token-search__clear,
+.kui-token-search[data-presentation="toolbar-group"]
+  .kui-token-search__trailing-action {
+  border-radius: var(--kui-control-highlight-radius);
+}
+
+.kui-token-search[data-presentation="toolbar-group"][data-collapsible="true"]:focus-within {
   border-color: var(--kui-color-focus);
-  background: var(--kui-token-search-background);
+  background: var(--kui-token-search-background, var(--kui-color-surface));
 }
 
-.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;
@@ -261,23 +414,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;
   }
 }