@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.57

package/dist/styles/select.css

@@ -23,6 +23,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* A multiple Select summarizes its choices in the display text (installed by
+   select/register) instead of drawing a removable tag per choice. */
+.kui-select[multiple]::part(tags) {
+  display: none;
+}
 .kui-select[data-size="compact"]::part(combobox) {
   min-height: 2rem;
 }
@@ -44,10 +49,10 @@
    caret wa-button): symmetric 8px inline padding, 12px from the icon to the
    caret's 20px box, the caret glyph size, and the control height, so the icon
    sits left of center to balance the caret. Inside a ToolbarControlGroup the
-   trigger takes the group's control-slot height, overlap, and radius
-   (`--_kui-toolbar-slot-*`) so it is inset evenly on every side, the group
-   sizes to the trigger (wider than tall), and the group-owned focus ring
-   stays concentric with it. */
+   trigger takes the control-slot height, overlap, and radius the group
+   provides (`--_kui-toolbar-control-group-slot-*`) so it is inset evenly on
+   every side, the group sizes to the trigger (wider than tall), and the
+   group-owned focus ring stays concentric with it. */
 .kui-select[data-selected-presentation="icon-only"] {
   --_kui-select-height: 2.75rem;
   width: max-content;
@@ -56,7 +61,10 @@
   --_kui-select-height: 2rem;
 }
 .kui-select[data-selected-presentation="icon-only"]::part(combobox) {
-  min-height: var(--_kui-toolbar-slot-height, var(--_kui-select-height));
+  min-height: var(
+    --_kui-toolbar-control-group-slot-height,
+    var(--_kui-select-height)
+  );
   padding-inline: 0.5rem;
   border-radius: var(
     --kui-toolbar-item-radius,
@@ -67,14 +75,32 @@
    sibling controls it keeps the group's gap, end insets, and item radius, as
    they do. */
 .kui-select[data-selected-presentation="icon-only"]:only-child {
-  margin-inline: calc(var(--_kui-toolbar-slot-overlap, 0px) * -1);
+  margin-inline: calc(var(--_kui-toolbar-control-group-slot-overlap, 0px) * -1);
 }
 .kui-select[data-selected-presentation="icon-only"]:only-child::part(combobox) {
   border-radius: var(
-    --_kui-toolbar-slot-radius,
+    --_kui-toolbar-control-group-slot-radius,
     var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
   );
 }
+/* In a ToolbarControlGroup, a Select beside other controls highlights its own
+   pill on hover, like its button and dropdown siblings; a lone Select instead
+   lifts the whole group (toolbar-control-group.css). */
+.kui-toolbar-control-group:not([data-single="true"])
+  > .kui-select:not(:only-child):hover::part(combobox) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+/* With the group's per-control rings, a composed Select paints its own ring
+   even when it was told the group owns it: nothing else would show focus. It
+   matches the sibling controls' ring and offset. While its listbox is open the
+   popup shows focus instead, so the trigger ring stays off, as a PopupMenu
+   trigger's does. */
+.kui-toolbar-control-group[data-focus-ring="control"]
+  > .kui-select:not([open]):focus-within::part(combobox) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
 /* The popup-menu wa-button draws the same chevron glyph at 0.875em inside a
    20px box; match its box, spacing, and glyph size rather than the smaller
    form-field disclosure scale. */
@@ -102,7 +128,21 @@
 .kui-select::part(expand-icon) {
   transform: scale(var(--kui-disclosure-icon-scale, 0.5));
 }
+.kui-select::part(expand-icon) {
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-select[open]::part(expand-icon) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+/* The open listbox already shows where focus is (its current option), so the
+   trigger drops its focus ring while the popup is visible, as a PopupMenu
+   trigger does; the ring returns when the popup closes with focus still on
+   the control. */
+.kui-select[open]::part(combobox) {
+  outline-color: transparent;
+}
 .kui-select::part(listbox) {
+  padding: var(--_kui-popup-inset);
   width: max-content;
   min-width: 100%;
   max-width: min(20rem, calc(100vw - 1.25rem));
@@ -114,28 +154,29 @@
   align-items: center;
 }
 .kui-select wa-option {
-  --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
-  /* Current option text sits on the activated brand fill; use the darker on-fill
-     accent so it clears WCAG AA (brand-on-quiet is 4.26:1 over that fill). */
-  --current-text-color: var(--kui-color-brand-on-fill);
+  --wa-form-control-activated-color: var(--_kui-popup-row-current-background);
+  --current-text-color: var(--_kui-popup-row-current-color);
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-start);
 }
 .kui-select wa-option::part(start) {
   align-self: center;
-  margin-inline-end: 0.5rem;
+  margin-inline-end: var(--_kui-popup-row-icon-gap);
   margin-top: 0;
 }
 .kui-select wa-option::part(label) {
   min-width: 0;
-  padding-block: 0.35rem;
-  line-height: 1.25;
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
   overflow-wrap: normal;
   word-break: normal;
   white-space: normal;
 }
 .kui-select__icon {
   display: inline-flex;
-  width: 1rem;
-  height: 1rem;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
   flex: none;
 }
 .kui-select > .kui-select__icon[slot="start"] {
@@ -173,10 +214,10 @@
   border-block-start: 1px solid var(--kui-color-neutral-border-quiet);
 }
 .kui-select__group-title {
-  padding: 0.2rem 0.75rem 0.3rem;
+  padding: var(--_kui-popup-group-title-padding);
   color: var(--kui-color-neutral-on-quiet);
   font-size: var(--kui-font-2xs);
-  font-weight: 750;
+  font-weight: var(--_kui-popup-group-title-font-weight);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
@@ -208,7 +249,7 @@
   justify-content: space-between;
   gap: 0.5rem;
   padding-inline: var(--kui-layout-item-padding, 0.5rem);
-  border: 1px solid var(--kui-color-border);
+  border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
   background: var(--kui-color-surface);
 }

package/dist/styles/skeleton.css

@@ -7,9 +7,10 @@
   height: 1em;
   border-radius: var(--kui-skeleton-radius);
   /* Deliberately unanimated: a flat, subtle fill that reads as "not yet loaded"
-     without drawing the eye or implying progress. A host with its own solid
-     fill (a solid Badge) supplies `--_kui-skeleton-fill` derived from its
-     foreground, since a text-color tint vanishes on a saturated fill. */
+     without drawing the eye or implying progress. On a host with its own
+     solid fill (a solid Badge) the skeleton derives `--_kui-skeleton-fill`
+     from the host's foreground, since a text-color tint vanishes on a
+     saturated fill. */
   background: var(
     --_kui-skeleton-fill,
     color-mix(in srgb, var(--kui-color-text) 12%, transparent)
@@ -17,6 +18,19 @@
   vertical-align: middle;
 }
 
+/* A placeholder's skeleton inside a solid badge: the generic text-color tint is
+   nearly invisible on the saturated fill, so derive it from the on-solid
+   foreground the badge provides, which contrasts with the fill in every tone
+   and color scheme. Quiet and outline badges sit on a pale fill and keep the
+   generic tint. */
+.kui-badge[data-appearance="solid"] .kui-skeleton {
+  --_kui-skeleton-fill: color-mix(
+    in srgb,
+    var(--_kui-badge-on-solid) 45%,
+    transparent
+  );
+}
+
 .kui-skeleton[data-block="true"] {
   display: block;
 }
@@ -63,3 +77,16 @@
     background: GrayText;
   }
 }
+
+/* A placeholder StateBanner's badge holds this skeleton instead of text. With
+   no text, the skeleton's baseline would be synthesized from its bottom edge,
+   sitting the badge higher than the live one by a font-dependent amount. A
+   zero-width character gives it a text baseline in the badge's own font and
+   line height, exactly where the live badge's text baseline falls on every
+   platform. */
+.kui-state-banner[data-placeholder="true"]
+  .kui-state-banner__copy
+  > .kui-badge
+  > .kui-skeleton::before {
+  content: "\200b";
+}

package/dist/styles/split-view.css

@@ -37,7 +37,7 @@
     var(--kui-split-view-list-width, 20rem) +
       var(--_kui-split-view-safe-inline-start)
   );
-  border-inline-end: 1px solid var(--kui-color-border);
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
 }
 
 .kui-split-view__list[data-resizable="true"] {
@@ -51,13 +51,6 @@
   min-height: 0;
 }
 
-/* A resizable list keeps its committed size as content width; its region's
-   track grows by the unsafe inset it reaches. A collapsed region stays shut. */
-.kui-split-view[data-split-mode="split"]
-  > [data-component="resizable-region"]:not([data-collapsed="true"]) {
-  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
-}
-
 .kui-split-view__list,
 .kui-split-view__detail {
   --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
@@ -104,30 +97,26 @@
     var(--kui-edge-inset-inline-end);
 }
 
-.kui-split-view__list:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > *,
-.kui-split-view__detail:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+.kui-split-view__list
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ),
+.kui-split-view__detail
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
@@ -139,3 +128,13 @@
   display: block;
   height: 100%;
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a SplitView fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="split-view"]:only-child {
+  height: 100%;
+}

package/dist/styles/state-banner.css

@@ -160,25 +160,6 @@
   margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
   font-size: var(--kui-font-xs);
 }
-/* The badge is taller than the title's line. Negative block margins keep it
-   out of the line-height calculation, so a wrapped title's lines stay evenly
-   spaced whichever line the badge lands on. */
-.kui-state-banner__badge {
-  margin-block: -0.5em;
-  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
-  vertical-align: baseline;
-}
-/* A placeholder badge holds a skeleton instead of text. With no text, the
-   skeleton's baseline would be synthesized from its bottom edge, sitting the
-   badge higher than the live one by a font-dependent amount. A zero-width
-   character gives it a text baseline in the badge's own font and line
-   height, exactly where the live badge's text baseline falls on every
-   platform. */
-.kui-state-banner[data-placeholder="true"]
-  .kui-state-banner__badge
-  > *::before {
-  content: "\200b";
-}
 /* The clip lives on an inner span, not on the detail itself. WebKit still
    applies the CSS 2.1 rule that an inline-block whose overflow is not
    `visible` takes its baseline from its bottom margin edge, so a clipped

package/dist/styles/surface-scaffold.css

@@ -40,12 +40,17 @@
 .kui-popup-surface {
   display: inline-flex;
 }
-.kui-popup-surface[data-inset="standard"] > wa-dropdown::part(menu) {
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: var(--kui-wa-surface-inset, 0.5rem);
 }
-.kui-popup-surface[data-inset="compact"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0.25rem;
 }
-.kui-popup-surface[data-inset="list-zero"] > wa-dropdown::part(menu) {
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
   padding: 0;
 }

package/dist/styles/tab-bar.css

@@ -38,32 +38,17 @@
   --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
   --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
 }
-/* A segmented strip's outer ends follow the pill track. The first tab's
-   leading corners, and a filled strip's last tab's trailing corners, are
-   pill-rounded, and a compact tab is inset from the track's ends by the same
-   distance as from its top and bottom, so each end is concentric with the
-   track. Only fill allocation carries the last tab to the track's trailing
-   end; an intrinsic strip's last tab stops short of it and keeps the segment
-   radius, as do the corners between tabs. */
+/* A segmented strip's outer ends follow the pill track: a compact tab is inset
+   from the track's ends by the same distance as from its top and bottom, so
+   each end is concentric with the track. AppTab rounds its own outer corners
+   to match in this context (see app-tab.css); TabBar never styles AppTab. */
 .kui-tab-bar[data-presentation="segmented"]
-  .kui-tab-bar__tabs:has(> [data-component="app-tab"][data-size="compact"]) {
+  .kui-tab-bar__tabs:has(> .kui-app-tab[data-size="compact"]) {
   padding-inline: calc(
     (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
       2 - 1px
   );
 }
-.kui-tab-bar[data-presentation="segmented"]
-  .kui-tab-bar__tabs
-  > [data-component="app-tab"]:first-child {
-  border-start-start-radius: var(--kui-radius-pill);
-  border-end-start-radius: var(--kui-radius-pill);
-}
-.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
-  .kui-tab-bar__tabs
-  > [data-component="app-tab"]:last-child {
-  border-start-end-radius: var(--kui-radius-pill);
-  border-end-end-radius: var(--kui-radius-pill);
-}
 .kui-tab-bar[data-presentation="inspector"] {
   min-height: 2.125rem;
   padding: 0;
@@ -72,14 +57,6 @@
   min-height: 2.125rem;
   border-radius: var(--kui-radius-s);
 }
-.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] {
-  min-width: 0;
-  flex: 1 1 0;
-}
-.kui-tab-bar[data-allocation="fill"] [data-component="app-tab"] > [role="tab"] {
-  width: 100%;
-  justify-content: center;
-}
 .kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
   flex: 0 1 auto;
 }
@@ -100,3 +77,77 @@
 .kui-tab-bar__end {
   margin-inline-start: auto;
 }
+
+/* Overflow dividers: a line on each side of the tab strip beyond which tabs
+   are scrolled out of view, as `wireScrollDividers` reports through the
+   strip's `data-scroll-overflow` (physical sides). A rail strip has no
+   visible track, so the bar draws the line with its own pseudo-elements,
+   ordered onto the strip's edges: `::before` between the leading zone and the
+   strip, `::after` between the strip and the trailing zone. Each is 1px wide
+   and gives back its width and one gap through a negative margin, so it
+   overlaps the strip's edge and never moves a tab or an action; hidden, it is
+   transparent. A segmented or inspector strip already draws a bordered track,
+   so its overflowing side takes the divider color on that border instead of
+   a straight line across its rounded end. */
+.kui-tab-bar > .kui-tab-bar__leading {
+  order: -2;
+}
+
+.kui-tab-bar > :is(.kui-tab-bar__trailing, .kui-tab-bar__end) {
+  order: 1;
+}
+
+.kui-tab-bar::before,
+.kui-tab-bar::after {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  background: transparent;
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+
+.kui-tab-bar::before {
+  order: -1;
+  margin-inline-end: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar::after {
+  margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::before,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::after,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::after {
+  background: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="l"] {
+  border-left-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="r"] {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}

package/dist/styles/tab-scaffold.css

@@ -66,18 +66,16 @@
   scroll-padding-block-start: var(--kui-edge-inset-block-start);
 }
 
-.kui-tab-scaffold__scene:not(
-    :has(
-      > :is(
-          [data-component="pane"],
-          [data-component="nav-stack"],
-          [data-component="split-view"],
-          [data-component="workbench"],
-          [data-component="tab-scaffold"]
-        ):only-child
-    )
-  )
-  > * {
+.kui-tab-scaffold__scene
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
   --kui-edge-inset-block-start: 0px;
   --kui-edge-inset-block-end: 0px;
   --kui-edge-inset-inline-start: 0px;
@@ -98,10 +96,24 @@
   );
   padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
     var(--_kui-tab-scaffold-safe-inline-end);
-  border-block-start: 1px solid var(--kui-color-border);
+  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
+     attribute) the bar's 1px top border shows only while the active scene's
+     content continues below it — never at the scroll end or when the content
+     fits. `wireScrollDividers` reports that state through
+     `data-scroll-divider`; `always` shows it without the wiring, and `none`
+     never. The border is always there and only its color changes, so
+     showing it never moves the bar or a tab. */
+  border-block-start: 1px solid
+    var(--_kui-tab-scaffold-bar-divider, transparent);
   background: var(--kui-color-surface);
 }
 
+.kui-tab-scaffold:not([data-chrome-dividers])
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
+.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+  --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;
@@ -120,7 +132,7 @@
 }
 
 .kui-tab-scaffold__tab[aria-selected="true"] {
-  color: var(--kui-color-accent-text);
+  color: var(--kui-color-brand-on-quiet);
 }
 
 .kui-tab-scaffold__tab:focus-visible {
@@ -129,10 +141,34 @@
 }
 
 .kui-tab-scaffold__tab-icon {
+  position: relative;
   display: grid;
   place-items: center;
 }
 
+/* The iOS tab-bar badge: over the icon's top-trailing corner, its leading
+   edge just past the icon's center line so a longer count grows outward. The
+   Badge keeps its own geometry; only this anchor is positioned. Without an
+   icon the badge stays in flow above the label. */
+.kui-tab-scaffold__tab-badge {
+  display: flex;
+  pointer-events: none;
+}
+
+.kui-tab-scaffold__tab-icon > .kui-tab-scaffold__tab-badge {
+  position: absolute;
+  inset-block-start: -0.4375rem;
+  inset-inline-start: calc(50% + 0.1875rem);
+}
+
+/* The text-free dot never grows, so it centers on the icon's top-trailing
+   corner instead: half over the glyph, half outside it. */
+.kui-tab-scaffold__tab-icon
+  > .kui-tab-scaffold__tab-badge[data-badge-kind="dot"] {
+  inset-block-start: -0.125rem;
+  inset-inline-start: calc(100% - 0.3125rem);
+}
+
 .kui-tab-scaffold__tab-icon svg {
   width: 1.375rem;
   height: 1.375rem;
@@ -146,3 +182,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a TabScaffold fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="tab-scaffold"]:only-child {
+  height: 100%;
+}

package/dist/styles/text.css

@@ -10,7 +10,7 @@
 }
 
 .kui-text[data-tone="danger"] {
-  color: var(--kui-color-danger-text);
+  color: var(--kui-color-danger-on-quiet);
 }
 
 .kui-text[data-size="compact"] {
@@ -30,3 +30,19 @@ span.kui-text {
   border: 0;
   padding: 0;
 }
+
+/* A ListHeader's label: the title's single text child, set as a compact,
+   uppercase, single-line label that truncates with an ellipsis. The title is
+   a div around a heading or, for a toggle header, the toggle button around
+   an inline span. */
+.kui-list-header__title > .kui-text {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}

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;
@@ -53,7 +53,7 @@
   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;