@kerfjs/ui 5.0.0-beta.107 → 5.0.0-beta.108

package/dist/index.js

@@ -17,20 +17,20 @@ export { wireScrollDividers } from './chunk-OZ6X76G5.js';
 export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
 export { TabBar } from './chunk-RFLW4FPL.js';
-export { TextField } from './chunk-WU57BYYM.js';
+export { TextField } from './chunk-YVZCKXR3.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
 export { SplitButton } from './chunk-TI2GV36S.js';
 export { StateBanner } from './chunk-2FW7D4IG.js';
 export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
 export { SunkenPanel } from './chunk-D5RGM3XA.js';
 export { createSearchFieldModel } from './chunk-CIAUILRR.js';
-export { SegmentedControl } from './chunk-NS2TBYM4.js';
+export { SegmentedControl } from './chunk-LZUUUHNH.js';
 export { Select } from './chunk-ZX2QQJXD.js';
 
 export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
-export { MessageComposer } from './chunk-23PPPNH6.js';
+export { MessageComposer } from './chunk-4OV272LF.js';
 export { RadioGroup } from './chunk-OHPYT2BH.js';
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-G4DRH4A5.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 export { EmptyState } from './chunk-B53PS2LE.js';
@@ -43,13 +43,13 @@ export { ContentItem } from './chunk-5USKCWGL.js';
 export { ContentSwap } from './chunk-EIET4QLK.js';
 export { CornerStatus } from './chunk-G3J7JDP6.js';
 export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
-export { Chip } from './chunk-N7MBGONH.js';
+export { Chip } from './chunk-LMHN2TJL.js';
 export { ChoiceChips } from './chunk-ITUQC4FW.js';
 export { ColumnTrack } from './chunk-QYMJHS4K.js';
 export { Combobox } from './chunk-BKUMG2KB.js';
 export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
 export { BackdropImage } from './chunk-SCDWURBO.js';
-export { Button } from './chunk-TXRKCGT3.js';
+export { Button } from './chunk-KPINJHIC.js';
 export { Switch } from './chunk-LTBVP6VN.js';
 export { Row } from './chunk-AMIHGFLP.js';
 export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
@@ -67,12 +67,12 @@ export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chu
 
 export { Skeleton } from './chunk-CVD5IZGB.js';
 export { DisclosureArrow } from './chunk-TKNVL53O.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-2PXZBFEC.js';
-export { Toolbar } from './chunk-CMLPFIC5.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+export { Toolbar } from './chunk-ZN7KUMPY.js';
 export { Pane } from './chunk-HQZG3OFL.js';
 
 export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
-export { List } from './chunk-OY2MXIBB.js';
+export { List } from './chunk-NB6POCFH.js';
 
 
 export { LoadingSpinner } from './chunk-WVS6CUCT.js';

package/dist/list-detail-dialog.js

@@ -1,5 +1,5 @@
-import { SplitView } from './chunk-AZ3WT77F.js';
-import { DialogSurface } from './chunk-G4DRH4A5.js';
+import { SplitView } from './chunk-P7EJ4CAD.js';
+import { DialogSurface } from './chunk-6CDILXF4.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 
@@ -7,8 +7,8 @@ export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 import { ToolbarText } from './chunk-EKHDLBRP.js';
 
 
-import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
-import { Toolbar } from './chunk-CMLPFIC5.js';
+import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
 import { Pane } from './chunk-HQZG3OFL.js';
 
 

package/dist/list.d.ts

@@ -121,6 +121,12 @@ interface ListProps {
     /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
     controlInsets?: Sides;
     className?: string;
+    /**
+     * The list's id, so app code can address it: name it as a
+     * `wireScrollDividers` scroller (with a `Toolbar` above it as its chrome),
+     * or find it in tests.
+     */
+    id?: string;
     /**
      * Safe `data-*`, `aria-*`, and structural `role` metadata (a named drop
      * `region`, `aria-busy`); List-owned structural attributes remain
@@ -138,6 +144,6 @@ interface ListProps {
  */
 type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
 /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
-declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, id, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListContentWidth, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-OY2MXIBB.js';
+export { List } from './chunk-NB6POCFH.js';
 
 
 

package/dist/message-composer.js

@@ -1,4 +1,4 @@
-export { MessageComposer } from './chunk-23PPPNH6.js';
+export { MessageComposer } from './chunk-4OV272LF.js';
 
 
 

package/dist/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-Z4DS77U2.js';
+export { NavStack } from './chunk-SOFPUW3O.js';
 
 
 

package/dist/segmented-control.d.ts

@@ -25,9 +25,11 @@ interface SegmentedControlProps<Value extends string = string> {
     className?: string;
     /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */
     placeholder?: boolean;
+    /** Disable the whole control: every segment is disabled and dimmed, the selection stays visible, and the group reports `aria-disabled`. A choice's own `disabled` still disables just that segment. */
+    disabled?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, disabled, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };

package/dist/segmented-control.js

@@ -1,3 +1,3 @@
-export { SegmentedControl } from './chunk-NS2TBYM4.js';
+export { SegmentedControl } from './chunk-LZUUUHNH.js';
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/split-view.js

@@ -1,4 +1,4 @@
-export { SplitView } from './chunk-AZ3WT77F.js';
+export { SplitView } from './chunk-P7EJ4CAD.js';
 
 
 

package/dist/styles/button.css

@@ -47,6 +47,13 @@
   --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
+.kui-button[data-tone="success"] {
+  --_kui-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-button-text: var(--kui-color-success-on-loud);
+  --_kui-button-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-button-outline: var(--kui-color-success-border-loud);
+}
 .kui-button[data-tone="danger"] {
   --_kui-button-fill: var(--kui-color-danger-fill-loud);
   --_kui-button-text: var(--kui-color-danger-on-loud);
@@ -92,9 +99,10 @@
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
 }
 /* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
-   control and a selected chip do; brand and danger keep their own tone. */
+   control and a selected chip do; semantic tones keep their own color. */
 .kui-button[aria-pressed="true"]:not(
     [data-tone="brand"],
+    [data-tone="success"],
     [data-tone="danger"]
   ) {
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
@@ -105,7 +113,7 @@
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
    take the tone's quiet fill with a doubled tone outline; primary keeps its
-   loud fill (darkened for brand and danger) with an inset ring. The second pixel of outline marks
+   loud fill (darkened for semantic tones) with an inset ring. The second pixel of outline marks
    the state without relying on hue. */
 .kui-button[aria-pressed="true"]:is(
     [data-emphasis="secondary"],
@@ -133,6 +141,16 @@
     light-dark(#000, #fff) 18%
   );
 }
+.kui-button[data-tone="success"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-success-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
 .kui-button[data-tone="danger"][aria-pressed="true"]:not(
     [data-emphasis="secondary"],
     [data-emphasis="plain"]
@@ -230,6 +248,14 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
+/* Keep a disabled positive action quiet without fading its label below text
+   contrast. The subdued fill and border mark it unavailable. */
+.kui-button[data-tone="success"]:is(:disabled, [aria-disabled="true"]) {
+  --_kui-button-fill: var(--kui-color-success-fill-quiet);
+  --_kui-button-text: var(--kui-color-success-on-fill);
+  --_kui-button-border: var(--kui-color-success-border-quiet);
+  opacity: 1;
+}
 .kui-button__icon {
   display: inline-flex;
   flex: none;

package/dist/styles/components/actions/button/button.css

@@ -47,6 +47,13 @@
   --_kui-button-on-quiet: var(--kui-color-brand-on-quiet);
   --_kui-button-outline: var(--kui-color-brand-border-loud);
 }
+.kui-button[data-tone="success"] {
+  --_kui-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-button-text: var(--kui-color-success-on-loud);
+  --_kui-button-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-button-outline: var(--kui-color-success-border-loud);
+}
 .kui-button[data-tone="danger"] {
   --_kui-button-fill: var(--kui-color-danger-fill-loud);
   --_kui-button-text: var(--kui-color-danger-on-loud);
@@ -92,9 +99,10 @@
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
 }
 /* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
-   control and a selected chip do; brand and danger keep their own tone. */
+   control and a selected chip do; semantic tones keep their own color. */
 .kui-button[aria-pressed="true"]:not(
     [data-tone="brand"],
+    [data-tone="success"],
     [data-tone="danger"]
   ) {
   --_kui-button-fill: var(--kui-color-brand-fill-loud);
@@ -105,7 +113,7 @@
 }
 /* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
    take the tone's quiet fill with a doubled tone outline; primary keeps its
-   loud fill (darkened for brand and danger) with an inset ring. The second pixel of outline marks
+   loud fill (darkened for semantic tones) with an inset ring. The second pixel of outline marks
    the state without relying on hue. */
 .kui-button[aria-pressed="true"]:is(
     [data-emphasis="secondary"],
@@ -133,6 +141,16 @@
     light-dark(#000, #fff) 18%
   );
 }
+.kui-button[data-tone="success"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-success-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
 .kui-button[data-tone="danger"][aria-pressed="true"]:not(
     [data-emphasis="secondary"],
     [data-emphasis="plain"]
@@ -230,6 +248,14 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
+/* Keep a disabled positive action quiet without fading its label below text
+   contrast. The subdued fill and border mark it unavailable. */
+.kui-button[data-tone="success"]:is(:disabled, [aria-disabled="true"]) {
+  --_kui-button-fill: var(--kui-color-success-fill-quiet);
+  --_kui-button-text: var(--kui-color-success-on-fill);
+  --_kui-button-border: var(--kui-color-success-border-quiet);
+  opacity: 1;
+}
 .kui-button__icon {
   display: inline-flex;
   flex: none;

package/dist/styles/components/actions/toolbar/toolbar.css

@@ -16,6 +16,15 @@
   font-family: var(--kui-font-sans);
 }
 
+/* In a List, a vertical stack, the toolbar is chrome and keeps its whole
+   natural height. Its explicit one-band min-height (below) replaces the flex
+   item's automatic content minimum, so a column shrinking toward a long
+   flex scroller beside it would otherwise squeeze a wrapped or stacked
+   toolbar onto its first row and clip the rest. */
+.kui-list > .kui-toolbar {
+  flex-shrink: 0;
+}
+
 /* Safe areas: a toolbar compensates only for the inline edges its owner hands
    it through `--kui-edge-inset-inline-*` (a Pane header or footer does), so its
    box and dividers keep reaching the edge while its zones clear the unsafe

package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css

@@ -132,6 +132,31 @@
   }
 }
 
+/* A sibling of an expanded trailing control yields to the trailing-priority
+   row the Toolbar moves that control onto: the same container queries and
+   responsiveAt keys as the Toolbar's own row (toolbar.css), so the group
+   hides exactly while the row is active and never wraps onto a third row at
+   a threshold restated with hideBelow. */
+@container kui-toolbar (max-width: 52rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="narrow"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar[data-responsive="trailing-priority"][data-responsive-at="compact"]
+    > .kui-toolbar__trailing:has(> [data-expanded="true"])
+    > .kui-toolbar-control-group[data-visibility="yield-to-priority-row"]:not(
+      [data-expanded="true"]
+    ) {
+    display: none;
+  }
+}
+
 /* `shape="rounded"` swaps the default pill radius for the design system's softer
    rounded rectangle. The shared highlight contract derives every inner hover or
    selected surface from this outer radius and the group's full inset. */
@@ -206,7 +231,10 @@
     border-color 0.2s ease;
 }
 
-.kui-toolbar-control-group[data-content="search"]:has(
+/* A fill search spans a content-sized group's line. A `sizing="grow"` group
+   keeps its own grow basis instead (below): taking the whole line would make
+   it the line's hypothetical size and wrap every sibling group. */
+.kui-toolbar-control-group[data-content="search"]:not([data-sizing="grow"]):has(
     > .kui-search-field[data-expanded="true"][data-fill="true"]
   ) {
   width: 100%;

package/dist/styles/components/collections/framed-list/framed-list.css

@@ -48,4 +48,6 @@
 
 .kui-framed-list__row[data-highlighted="true"] {
   background: var(--kui-color-brand-fill-quiet);
+  /* The row's controls sit on the tint, not the list's lowered fill. */
+  --kui-color-surface-current-tint: var(--kui-color-brand-fill-quiet);
 }

package/dist/styles/components/layout/pane/pane.css

@@ -76,11 +76,16 @@
    surface instead. */
 .kui-pane[data-background] {
   background: var(--_kui-pane-background);
+  --kui-color-surface-current-region: var(--_kui-pane-background);
 }
 
+/* The transparent slots keep the root's surface context. */
 .kui-pane[data-background][data-appearance="sunken"] > .kui-pane__content,
 .kui-pane[data-background][data-appearance="sunken"][data-chrome-placement="auto"]
   > :is(.kui-pane__header, .kui-pane__footer) {
+  --kui-color-surface-current: inherit;
+  --kui-color-surface-current-region: inherit;
+  --kui-color-surface-current-tint: inherit;
   background: transparent;
 }
 
@@ -266,6 +271,16 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material has no single color over scrolling content; the surface
+   context takes it at rest, as a tint over the region it covers. A clear
+   header paints nothing and keeps the inherited context. */
+.kui-pane[data-header-presentation="overlay"]:not(
+    [data-header-material="clear"]
+  )
+  > .kui-pane__header {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-pane[data-header-presentation="overlay"][data-header-overlay="measured"]:not(
     [data-chrome-placement="auto"]
   )

package/dist/styles/components/navigation/nav-stack/nav-stack.css

@@ -224,6 +224,19 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material's surface context at rest (see pane.css); clear chrome keeps
+   the inherited context. */
+.kui-nav-stack[data-chrome-presentation="overlay"]:not(
+    [data-chrome-material="clear"]
+  )
+  > .kui-nav-stack__chrome,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]:not(
+    [data-bottom-toolbar-material="clear"]
+  )
+  > .kui-nav-stack__bottom {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
   > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
   position: absolute;

package/dist/styles/components/navigation/tab-bar/tab-bar.css

@@ -38,6 +38,12 @@
     --kui-tab-bar-strip-background,
     var(--kui-tab-bar-background)
   );
+  /* The surface context (foundation.css): the strip's fill is a tint over
+     whatever the bar sits on. */
+  --kui-color-surface-current-tint: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
   scrollbar-width: none;
   align-items: center;
   flex: var(--kui-tab-bar-strip-flex, 1 1 auto);

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -70,6 +70,13 @@
 
 .kui-tab-scaffold__scene[data-background] {
   background: var(--_kui-tab-scaffold-scene-background);
+  --kui-color-surface-current-region: var(--_kui-tab-scaffold-scene-background);
+}
+
+/* The navigator's color paints its root and a docked bar over whatever holds
+   the navigator: a region in the surface context. */
+.kui-tab-scaffold[data-background] {
+  --kui-color-surface-current-region: var(--_kui-tab-scaffold-background);
 }
 
 @media (forced-colors: active) {
@@ -213,6 +220,15 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material's surface context at rest (see pane.css); a clear bar keeps
+   the inherited context. */
+.kui-tab-scaffold[data-bar-presentation="overlay"]:not(
+    [data-bar-material="clear"]
+  )
+  > .kui-tab-scaffold__bar {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-tab-scaffold[data-bar-presentation="overlay"][data-bar-overlay="measured"] {
   position: relative;
 }

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -337,6 +337,8 @@ h2.kui-dialog-surface__title {
   -webkit-backdrop-filter: var(--kui-chrome-material-filter);
   backdrop-filter: var(--kui-chrome-material-filter);
   background: var(--kui-chrome-material-raised);
+  /* The material's surface context at rest, over the raised panel. */
+  --kui-color-surface-current-tint: var(--kui-chrome-material-raised);
   /* The divider is scroll state: the register publishes it only while
      content is scrolled beneath the header. An inset shadow, so showing it
      never moves the header or the content. */

package/dist/styles/foundation.css

@@ -184,12 +184,15 @@
        --kui-color-surface-current: the opaque surface beneath (default
          --kui-color-surface); an opaque surface (a raised dialog or popup, a
          base or raised List) sets it and clears the tint.
-       --kui-color-surface-current-region: a layout region's translucent
-         fill over it (a sunken Pane, Workbench area, or TabNavigator scene;
-         default transparent).
-       --kui-color-surface-current-tint: a content surface's translucent
-         fill over that (a SunkenPanel, a sunken Disclosure, a lowered
-         FramedList, a quiet ContentItem; default transparent).
+       --kui-color-surface-current-region: a layout region's fill over it
+         (a sunken Pane, Workbench area, or TabNavigator scene; a Pane's or
+         TabNavigator's app `background`; default transparent).
+       --kui-color-surface-current-tint: a content surface's fill over that
+         (a SunkenPanel, a sunken Disclosure, a lowered FramedList or its
+         highlighted row, a quiet ContentItem, a TabBar strip, and glass
+         chrome at rest: a Pane overlay header, NavStack overlay chrome, a
+         TabNavigator overlay bar, a dialog's floating header; default
+         transparent).
      A reader layers the tint over the region over the color, so a content
      surface inside a sunken region (the common nesting) composes exactly;
      custom properties cannot fold an inherited value into a new one, so a
@@ -264,9 +267,11 @@
     var(--kui-color-surface)
   );
 
+  /* Each brand token below falls back to its tuned literal unless the app
+     sets the opt-in --kui-color-brand (see the brand ramp after this block). */
   --kui-color-brand-fill-loud: var(
     --wa-color-brand-fill-loud,
-    light-dark(#0075db, #64d2ff)
+    var(--_kui-brand-fill-loud, light-dark(#0075db, #64d2ff))
   );
   --kui-color-brand-fill-quiet: var(
     --wa-color-brand-fill-quiet,
@@ -312,7 +317,7 @@
      4.65:1 on the page (5.2:1 on white). */
   --kui-color-brand-on-quiet: var(
     --wa-color-brand-on-quiet,
-    light-dark(#0c62f3, #8acbff)
+    var(--_kui-brand-on-quiet, light-dark(#0c62f3, #8acbff))
   );
   --kui-color-brand-on-normal: var(
     --wa-color-brand-on-normal,
@@ -328,7 +333,10 @@
      4.26:1 over brand-fill-normal (#d6ecff), while #1a5dcf (same hue) clears
      ~4.9:1 there and ~5.5:1 over brand-fill-quiet (#ebf6ff). The dark value
      matches brand-on-quiet, which already passes over the dark fills. */
-  --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
+  --kui-color-brand-on-fill: var(
+    --_kui-brand-on-fill,
+    light-dark(#1a5dcf, #8acbff)
+  );
 
   /* Pop is attractive emphasis without status meaning: use it for featured,
      novel, or celebratory content, never as a success/danger substitute. */
@@ -538,7 +546,11 @@
 
   --kui-focus-ring: var(
     --wa-focus-ring,
-    3px solid var(--wa-color-focus, light-dark(#007aff, #64d2ff))
+    3px solid
+      var(
+        --wa-color-focus,
+        var(--_kui-brand-focus, light-dark(#007aff, #64d2ff))
+      )
   );
   /* Elevation mirrors webawesome.css's scheme-aware shadows: dark raises the
      alpha so a raised surface still separates from a near-black page. */
@@ -596,6 +608,37 @@
   --kui-color-surface-current-tint: initial;
 }
 
+/* The opt-in brand, left undeclared so the tuned literals apply:
+     --kui-color-brand: any color an app sets on :root;
+   the whole brand ramp follows it, the way a scoped tint's accent re-derives
+   its ramp: the loud fill (and the quiet/normal fills and borders mixed from
+   it), brand text and links, brand text on brand fills, and the focus ring.
+   Lightness is clamped per scheme so every pair keeps WCAG AA for any hue
+   and chroma (the brand-ramp browser test sweeps them): a light fill stays
+   dark enough for white text and a dark one light enough for near-black
+   text; brand text stays dark enough for the page, the surface, and the
+   brand fills in light, and light enough in dark. Unset, each private
+   derivation references an undefined variable, is invalid, and the tokens
+   above keep their tuned literals exactly. Web Awesome's theme reads the
+   same derivations (webawesome.css). */
+@supports (color: oklch(from red l c h)) {
+  :root {
+    --_kui-brand-fill-loud: light-dark(
+      oklch(from var(--kui-color-brand) min(l, 0.46) c h),
+      oklch(from var(--kui-color-brand) clamp(0.74, l, 0.86) c h)
+    );
+    --_kui-brand-on-quiet: light-dark(
+      oklch(from var(--kui-color-brand) min(l, 0.43) c h),
+      oklch(from var(--kui-color-brand) max(l, 0.86) c h)
+    );
+    --_kui-brand-on-fill: light-dark(
+      oklch(from var(--kui-color-brand) min(l, 0.38) c h),
+      oklch(from var(--kui-color-brand) max(l, 0.9) c h)
+    );
+    --_kui-brand-focus: var(--_kui-brand-fill-loud);
+  }
+}
+
 @supports (color: oklch(from red l c h)) {
   @media not (prefers-contrast: more) {
     [data-kui-tint="light"] {
@@ -646,21 +689,22 @@
        scope: the loud fill (buttons, the current row, checked controls), its
        on-loud text, brand text and links, text on brand fills, and the focus
        ring. Lightness is clamped so each pair keeps WCAG AA for any accent:
-       a light scope's fill stays at or below 50% under white text, a dark
+       a light scope's fill stays at or below 46% under white text, a dark
        scope's between 72% and 85% under near-black text, and brand text at
-       most 45% (light) or at least 80% (dark). */
+       most 36% (light) or at least 94% (dark). Dark on-fill text also caps
+       chroma so a vivid red stays light after gamut clipping. */
     [data-kui-tint="light"][data-kui-tint-accent] {
       --wa-color-brand-fill-loud: oklch(
-        from var(--_kui-tint-accent) min(l, 0.5) c h
+        from var(--_kui-tint-accent) min(l, 0.46) c h
       );
       --wa-color-brand-on-loud: #fff;
       --wa-color-brand-on-quiet: oklch(
-        from var(--_kui-tint-accent) min(l, 0.45) c h
+        from var(--_kui-tint-accent) min(l, 0.36) c h
       );
       --kui-color-brand-on-fill: oklch(
-        from var(--_kui-tint-accent) min(l, 0.38) c h
+        from var(--_kui-tint-accent) min(l, 0.3) c h
       );
-      --wa-color-focus: oklch(from var(--_kui-tint-accent) min(l, 0.5) c h);
+      --wa-color-focus: oklch(from var(--_kui-tint-accent) min(l, 0.46) c h);
     }
 
     [data-kui-tint="dark"][data-kui-tint-accent] {
@@ -669,13 +713,13 @@
       );
       --wa-color-brand-on-loud: #111113;
       --wa-color-brand-on-quiet: oklch(
-        from var(--_kui-tint-accent) max(l, 0.8) c h
+        from var(--_kui-tint-accent) max(l, 0.94) c h
       );
       --kui-color-brand-on-fill: oklch(
-        from var(--_kui-tint-accent) max(l, 0.82) c h
+        from var(--_kui-tint-accent) max(l, 0.95) min(c, 0.12) h
       );
       --wa-color-focus: oklch(
-        from var(--_kui-tint-accent) clamp(0.72, l, 0.85) c h
+        from var(--_kui-tint-accent) clamp(0.78, l, 0.85) c h
       );
     }
   }

package/dist/styles/framed-list.css

@@ -48,4 +48,6 @@
 
 .kui-framed-list__row[data-highlighted="true"] {
   background: var(--kui-color-brand-fill-quiet);
+  /* The row's controls sit on the tint, not the list's lowered fill. */
+  --kui-color-surface-current-tint: var(--kui-color-brand-fill-quiet);
 }

package/dist/styles/nav-stack.css

@@ -224,6 +224,19 @@
   background: var(--kui-chrome-material);
 }
 
+/* The material's surface context at rest (see pane.css); clear chrome keeps
+   the inherited context. */
+.kui-nav-stack[data-chrome-presentation="overlay"]:not(
+    [data-chrome-material="clear"]
+  )
+  > .kui-nav-stack__chrome,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]:not(
+    [data-bottom-toolbar-material="clear"]
+  )
+  > .kui-nav-stack__bottom {
+  --kui-color-surface-current-tint: var(--kui-chrome-material);
+}
+
 .kui-nav-stack[data-chrome-presentation="overlay"][data-chrome-overlay="measured"]
   > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
   position: absolute;