@kerfjs/ui 5.0.0-beta.98 → 5.0.0-beta.99

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { pct, remify } from '../../../shared/styles/css-values.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, and chrome dividers forward to the\n * stack, and `list` / `detail` give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\n/**\n * The fixed list column's width: a size in CSS pixels, or that size capped\n * at a fraction of the SplitView's own width so a narrow container (a\n * dialog, a small window) always leaves the detail in view.\n */\nexport type SplitViewListWidth =\n  | number\n  | {\n      /** Preferred width in CSS pixels. */\n      size: number;\n      /** Largest share of the SplitView's width, greater than 0 and at most 1. */\n      maxFraction?: number;\n    };\n\n/** The list-width custom property value for a fixed split. */\nfunction listWidthValue(listWidth: SplitViewListWidth): string {\n  const { size, maxFraction } =\n    typeof listWidth === 'number'\n      ? { size: listWidth, maxFraction: undefined }\n      : listWidth;\n  if (!Number.isFinite(size) || size <= 0)\n    throw new RangeError(\n      'SplitView listWidth size must be a positive number of pixels',\n    );\n  if (\n    maxFraction !== undefined &&\n    (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1)\n  )\n    throw new RangeError(\n      'SplitView listWidth maxFraction must be greater than 0 and at most 1',\n    );\n  const preferred = remify(size);\n  return maxFraction === undefined\n    ? preferred\n    : `min(${preferred}, ${pct(maxFraction * 100)})`;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  /**\n   * The fixed split's list column width (default 320px). A number is CSS\n   * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's\n   * width. A resizable split sizes its list with `resizable` instead.\n   */\n  listWidth?: SplitViewListWidth;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  listWidth,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (listWidth !== undefined && resizable)\n    throw new RangeError(\n      'SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max',\n    );\n  const listWidthStyle =\n    listWidth === undefined\n      ? undefined\n      : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      style={listWidthStyle}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/layout/split-view/split-view.tsx"],"names":[],"mappings":"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","file":"split-view.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { pct, remify } from '../../../shared/styles/css-values.js';\nimport {\n  NavStack,\n  type NavStackProps,\n  type NavStackView,\n} from '../../navigation/nav-stack/nav-stack.js';\nimport {\n  ResizableRegion,\n  type ResizableRegionProps,\n} from '../resizable-region/resizable-region.js';\n\n/**\n * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /\n * `max` limits, plus the region configuration that forwards unchanged\n * (`separator`, `handleIcon`, `contentOverflow`, and collapse:\n * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,\n * `restorePosition`). Omitted options keep the region's defaults.\n */\nexport interface SplitViewResizable extends Pick<\n  ResizableRegionProps,\n  | 'separator'\n  | 'handleIcon'\n  | 'contentOverflow'\n  | 'collapsed'\n  | 'transitioning'\n  | 'collapseMotion'\n  | 'restoreControl'\n  | 'restorePosition'\n> {\n  size: number;\n  min: number;\n  max: number;\n}\n\n/** One compact view's top- and bottom-toolbar content (see `NavStackView`). */\nexport type SplitViewCompactViewToolbars = Pick<\n  NavStackView,\n  'toolbar' | 'bottomToolbar'\n>;\n\n/**\n * The compact `NavStack`'s configuration: its toolbar configuration, back\n * control, persistent bottom toolbar, chrome dividers, and chrome and\n * bottom-toolbar presentations forward to the stack, and `list` / `detail`\n * give each view its own toolbar groups.\n */\nexport interface SplitViewCompactStack extends Pick<\n  NavStackProps,\n  | 'toolbarConfig'\n  | 'backIcon'\n  | 'backText'\n  | 'hideToolbar'\n  | 'bottomToolbar'\n  | 'chromeDividers'\n  | 'chromePresentation'\n  | 'bottomToolbarPresentation'\n> {\n  /** Toolbar content for the list (root) view. */\n  list?: SplitViewCompactViewToolbars;\n  /** Toolbar content for the pushed detail view. */\n  detail?: SplitViewCompactViewToolbars;\n}\n\n/**\n * The fixed list column's width: a size in CSS pixels, or that size capped\n * at a fraction of the SplitView's own width so a narrow container (a\n * dialog, a small window) always leaves the detail in view.\n */\nexport type SplitViewListWidth =\n  | number\n  | {\n      /** Preferred width in CSS pixels. */\n      size: number;\n      /** Largest share of the SplitView's width, greater than 0 and at most 1. */\n      maxFraction?: number;\n    };\n\n/** The list-width custom property value for a fixed split. */\nfunction listWidthValue(listWidth: SplitViewListWidth): string {\n  const { size, maxFraction } =\n    typeof listWidth === 'number'\n      ? { size: listWidth, maxFraction: undefined }\n      : listWidth;\n  if (!Number.isFinite(size) || size <= 0)\n    throw new RangeError(\n      'SplitView listWidth size must be a positive number of pixels',\n    );\n  if (\n    maxFraction !== undefined &&\n    (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1)\n  )\n    throw new RangeError(\n      'SplitView listWidth maxFraction must be greater than 0 and at most 1',\n    );\n  const preferred = remify(size);\n  return maxFraction === undefined\n    ? preferred\n    : `min(${preferred}, ${pct(maxFraction * 100)})`;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: KerfUiContent;\n  /** The detail (secondary) pane. */\n  detail: KerfUiContent;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** Compact NavStack configuration and per-view toolbars. */\n  compactStack?: SplitViewCompactStack;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  /**\n   * The fixed split's list column width (default 320px). A number is CSS\n   * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's\n   * width. A resizable split sizes its list with `resizable` instead.\n   */\n  listWidth?: SplitViewListWidth;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  listTitle = '',\n  detailTitle = '',\n  backLabel = 'Back',\n  compactStack = {},\n  resizable,\n  listWidth,\n  className = '',\n  slot,\n}: SplitViewProps) {\n  if (listWidth !== undefined && resizable)\n    throw new RangeError(\n      'SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max',\n    );\n  const listWidthStyle =\n    listWidth === undefined\n      ? undefined\n      : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;\n  if (compact) {\n    const listView: NavStackView = {\n      ...compactStack.list,\n      key: 'list',\n      toolbar: { ...compactStack.list?.toolbar, title: listTitle },\n      content: list,\n    };\n    const views: NavStackView[] = detailActive\n      ? [\n          listView,\n          {\n            ...compactStack.detail,\n            key: 'detail',\n            toolbar: { ...compactStack.detail?.toolbar, title: detailTitle },\n            content: detail,\n          },\n        ]\n      : [listView];\n    return (\n      <div\n        class={`kui-split-view kui-split-view--compact ${className}`.trim()}\n        id={id}\n        data-component=\"split-view\"\n        data-split-mode=\"compact\"\n        slot={slot}\n      >\n        <NavStack\n          id={`${id}-stack`}\n          label={label}\n          views={views}\n          backLabel={backLabel}\n          backIcon={compactStack.backIcon}\n          backText={compactStack.backText}\n          toolbarConfig={compactStack.toolbarConfig}\n          hideToolbar={compactStack.hideToolbar}\n          bottomToolbar={compactStack.bottomToolbar}\n          chromeDividers={compactStack.chromeDividers}\n          chromePresentation={compactStack.chromePresentation}\n          bottomToolbarPresentation={compactStack.bottomToolbarPresentation}\n        />\n      </div>\n    );\n  }\n  const listPane = resizable ? (\n    <ResizableRegion\n      id={`${id}-list`}\n      label={listTitle || 'List'}\n      size={resizable.size}\n      min={resizable.min}\n      max={resizable.max}\n      separator={resizable.separator}\n      handleIcon={resizable.handleIcon}\n      contentOverflow={resizable.contentOverflow}\n      collapsed={resizable.collapsed}\n      transitioning={resizable.transitioning}\n      collapseMotion={resizable.collapseMotion}\n      restoreControl={resizable.restoreControl}\n      restorePosition={resizable.restorePosition}\n    >\n      <div\n        class=\"kui-split-view__list kui-pane\"\n        data-split-list\n        data-resizable=\"true\"\n      >\n        {list}\n      </div>\n    </ResizableRegion>\n  ) : (\n    <div\n      class=\"kui-split-view__list kui-pane\"\n      data-split-list\n      data-resizable=\"false\"\n    >\n      {list}\n    </div>\n  );\n  return (\n    <div\n      class={`kui-split-view ${className}`.trim()}\n      id={id}\n      data-component=\"split-view\"\n      data-split-mode=\"split\"\n      aria-label={label}\n      style={listWidthStyle}\n      slot={slot}\n    >\n      {listPane}\n      <div\n        class=\"kui-split-view__detail kui-pane\"\n        data-split-detail\n        aria-label={detailTitle || undefined}\n      >\n        {detail}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/state-banner.d.ts

@@ -20,7 +20,12 @@ interface StateBannerProps {
     urgency?: StateBannerUrgency;
     /** Keep the detail beside the title, or give it its own line. */
     copyLayout?: StateBannerCopyLayout;
-    /** Place the action beside the copy or on a separate trailing row. */
+    /**
+     * `trailing` (the default) puts the action beside the copy while the copy
+     * keeps its minimum readable width, and otherwise wraps it onto its own
+     * end-aligned trailing row, at any viewport or container width. `below`
+     * always gives the action that separate trailing row.
+     */
     actionPlacement?: StateBannerActionPlacement;
     /**
      * `card` (the default) is an inset, rounded, fully bordered banner beside

package/dist/state-banner.js

@@ -1,4 +1,4 @@
-export { StateBanner } from './chunk-6BRRUPJY.js';
+export { StateBanner } from './chunk-QROYYGWU.js';
 
 
 

package/dist/styles/anchored-surface.css

@@ -1,9 +1,20 @@
 .kui-anchored-surface {
+  /* The room beside the anchor on the side the surface opened, which
+     kerfjs/overlay publishes and refreshes on every reposition. Read-only for
+     content that sizes an inner scroller to it. */
+  --kui-anchored-surface-available-height: var(
+    --kerf-anchor-available-height,
+    calc(100dvh - 2 * var(--kui-space-xs, 8px))
+  );
+
   box-sizing: border-box;
   inset: auto;
   width: max-content;
   max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
-  max-height: calc(100dvh - 2 * var(--kui-space-xs, 8px));
+  max-height: min(
+    calc(100dvh - 2 * var(--kui-space-xs, 8px)),
+    var(--kui-anchored-surface-available-height)
+  );
   overflow: auto;
   padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
   border: 1px solid var(--kui-color-neutral-border-normal);
@@ -13,3 +24,18 @@
   box-shadow: var(--kui-shadow-l);
   font: inherit;
 }
+
+/* Dark tone for a popup anchored to dark media chrome: the loud, inverse tone
+   of a dark ToolbarControlGroup, so the surface takes the opposite of its
+   anchor's color scheme (the script picks the class when it opens). It flips
+   only the color scheme: every semantic token is a light-dark() pair, so the
+   surface fill, border, shadow, and the content's text, borders, and focus
+   rings all resolve to the other side by inheritance. No child is styled from
+   here. */
+.kui-anchored-surface--scheme-dark {
+  color-scheme: dark;
+}
+
+.kui-anchored-surface--scheme-light {
+  color-scheme: light;
+}

package/dist/styles/catalog/components/catalog-example.css

@@ -36,6 +36,11 @@
   width: 100%;
 }
 
+/* A production sidebar rail's width, for sidebar-pane specimens. */
+.kui-catalog-example__viewport[data-width="sidebar"] {
+  width: min(100%, 17rem);
+}
+
 .kui-catalog-example__viewport[data-width="compact"] {
   width: min(100%, 27.5rem);
 }
@@ -95,6 +100,34 @@
   min-height: 20rem;
 }
 
+.kui-catalog-example__viewport[data-min-height="app"] {
+  min-height: 37rem;
+}
+
+/* A content column: each in-flow child fills a capped measure, at the start
+   or centered. Top-layer `[popover]` specimens keep their own geometry (they
+   position against the viewport or a named anchor, not this column). */
+.kui-catalog-example__viewport[data-content-width] > :not([popover]) {
+  width: min(100%, var(--_kui-catalog-example-content-width));
+}
+
+.kui-catalog-example__viewport[data-content-width="compact"] {
+  --_kui-catalog-example-content-width: 27.5rem;
+}
+
+.kui-catalog-example__viewport[data-content-width="medium"] {
+  --_kui-catalog-example-content-width: 40rem;
+}
+
+.kui-catalog-example__viewport[data-content-width="wide"] {
+  --_kui-catalog-example-content-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-content-width][data-content-align="center"]
+  > :not([popover]) {
+  margin-inline: auto;
+}
+
 .kui-catalog-example__viewport[data-frame] {
   border: 1px solid var(--kui-color-neutral-border-normal);
 }

package/dist/styles/catalog/components/catalog-stage.css

@@ -52,3 +52,10 @@
   box-sizing: border-box;
   place-items: start;
 }
+
+/* An application-width example stack spans the whole stage, so the canvas
+   lifts its own width cap for it. The stack is matched by its public
+   `data-catalog-example-stack` marker: the canvas styles only itself. */
+.kui-catalog__canvas:has(> [data-catalog-example-stack][data-width="full"]) {
+  width: 100%;
+}

package/dist/styles/chip.css

@@ -73,6 +73,26 @@
   background: transparent;
 }
 
+/* Follows the surrounding foreground, such as the on-loud text of a
+   brand-loud ContentItem bubble. It paints no fill: any currentColor wash
+   over a loud surface lowers the contrast the surface's own text was tuned
+   to, so the chip draws its shape with a currentColor border instead (soft
+   for quiet, full strength for outline and solid). */
+.kui-chip[data-tone="inherit"] {
+  --_kui-chip-border: color-mix(in srgb, currentColor 40%, transparent);
+
+  border-color: var(--_kui-chip-border);
+  color: inherit;
+  background: transparent;
+}
+
+.kui-chip[data-tone="inherit"]:is(
+    [data-appearance="outline"],
+    [data-appearance="solid"]
+  ) {
+  --_kui-chip-border: currentColor;
+}
+
 .kui-chip[data-shape="rounded"] {
   border-radius: var(--kui-radius-s);
 }
@@ -93,6 +113,56 @@
   overflow: hidden;
 }
 
+/* Link chip: a native anchor with the same geometry. Hover and press layer a
+   currentColor wash over whichever fill the appearance paints; an inherit
+   chip instead strengthens its border and underlines its label, so the
+   surrounding text contrast holds in every state. */
+.kui-chip[data-link] {
+  --_kui-chip-wash: transparent;
+
+  background-image: linear-gradient(
+    var(--_kui-chip-wash),
+    var(--_kui-chip-wash)
+  );
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.kui-chip[data-link]:hover {
+  --_kui-chip-wash: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.kui-chip[data-link]:active {
+  --_kui-chip-wash: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) {
+  --_kui-chip-wash: transparent;
+  --_kui-chip-border: currentColor;
+}
+
+/* The label clips for its ellipsis; a little block room keeps the hover
+   underline inside that clip without changing the chip's height. */
+.kui-chip[data-link] .kui-chip__label {
+  padding-block: 0.2em;
+}
+
+.kui-chip[data-link][data-tone="inherit"]:is(:hover, :active) .kui-chip__label {
+  text-decoration: underline;
+  text-underline-offset: 0.12em;
+}
+
+.kui-chip[data-link]:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+/* The brand focus color can match a brand-loud surface; an inherit chip's
+   ring follows the surrounding foreground instead. */
+.kui-chip[data-link][data-tone="inherit"]:focus-visible {
+  outline: 3px solid currentColor;
+}
+
 .kui-chip__icon {
   display: inline-grid;
   width: 1em;

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -13,7 +13,9 @@
 
 /* PopupMenu shares the Select's caret motion, surface inset, row rhythm,
    current-row fill, and group titles from the popup-choice contract in
-   foundation.css. Only checkbox items reserve a check column. */
+   foundation.css. Checkbox items reserve a check column, and so do the
+   plain items in any level that holds one; a level without a choice keeps the
+   compact start. */
 
 /* The trigger caret turns to face the open menu, like the Select's. */
 .kui-popup-menu > wa-button::part(caret) {
@@ -56,13 +58,21 @@
   );
 }
 /* Web Awesome's nested submenu owns its item host padding. Move its exposed
-   checkmark inside the panel and leave room for the label beside it. */
+   checkmark inside the panel: in flow, the checkmark and its gap advance the
+   row's content by the same check column as at the top level. */
 .kui-popup-menu
   wa-dropdown-item[slot="submenu"][type="checkbox"]::part(checkmark) {
   margin-inline-start: 0;
 }
-.kui-popup-menu wa-dropdown-item[slot="submenu"][type="checkbox"]::part(label) {
-  padding-inline-start: 1em;
+/* A plain item beside checkbox choices holds their check column with an empty
+   icon-slot spacer, at either level. Web Awesome sizes a slotted icon in its
+   smaller font and spaces it 0.75em (!important) from the next item; with
+   that gap, 1em of width equals the 1.25em checkmark plus its 0.5em gap. */
+.kui-popup-menu__check-space {
+  display: block;
+  width: 1em;
+  height: 1px;
+  flex: none;
 }
 .kui-popup-menu wa-dropdown-item::part(label) {
   padding-block: var(--_kui-popup-row-label-padding-block);

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

@@ -139,9 +139,12 @@
   );
   --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
   --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+  /* A 14% surface wash over the loud fill: visible hover feedback that keeps
+     the on-loud icon above 3:1 over a light page (about 3.4:1; a 28% wash
+     measured 2.7:1) and well above it in dark (about 5.8:1). */
   --kui-toolbar-control-hover-background: color-mix(
     in srgb,
-    var(--kui-color-surface) 28%,
+    var(--kui-color-surface) 14%,
     transparent
   );
 }
@@ -384,6 +387,39 @@
   background: transparent;
 }
 
+/* In overlay NavStack chrome (`chromePresentation="overlay"`), an overlay
+   NavStack bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, an overlay Pane header (`headerPresentation="overlay"`), or
+   a DialogSurface floating header's actions (`headerPresentation="floating"`),
+   the group sits on the translucent chrome material with arbitrary content
+   scrolling beneath it. Its quiet control color over its own translucent fill
+   falls below AA there over the worst-case backdrop (about 3.0:1 in light
+   over black, 3.5:1 in dark over white), so an untoned group's controls take
+   the normal text color (well above 4.5:1 in both), as an untoned
+   ToolbarText's title does. A dark-toned group (or an avatar scrim) keeps its
+   own loud colors. */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-control-group[slot="header-actions"]:not(
+    [data-tone="dark"],
+    [data-scrim="true"]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > [slot="header-actions"]
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-control-group:not([data-tone="dark"], [data-scrim="true"]) {
+  --kui-toolbar-control-color: var(--kui-color-text);
+}
+
 /* `selectedChrome="none"`: a pressed control paints like its unpressed
    neighbors, for an icon-state toggle whose glyph already shows the state.
    One button opts out alone with `data-selected-chrome="none"`. After the
@@ -732,6 +768,44 @@
   background: transparent;
 }
 
+/* A lone control's hover replaces the whole group's fill (above). A dark
+   group's hover tint is a translucent surface wash meant to lie OVER its loud
+   fill, as it does on one control of a dark group; replacing the fill with it
+   left a near-white circle behind the dark tone's white icon on a light page
+   (about 1.3:1). So a dark lone group keeps its fill and paints the tint over
+   it as an image layer. Avatar groups paint their image as the background and
+   keep the plain rule. */
+.kui-toolbar-control-group[data-tone="dark"][data-single="true"]:not(
+    [data-content="avatar"]
+  ):has(
+    > :is(
+      button:not(:disabled, [aria-disabled="true"]),
+      wa-button:not([disabled]),
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
+  ):hover,
+.kui-toolbar-control-group[data-tone="dark"]:not(
+    [data-single="true"],
+    [data-content="avatar"]
+  ):has(
+    > :is(
+        button:not(:disabled, [aria-disabled="true"]),
+        wa-button:not([disabled]),
+        .kui-select,
+        .kui-toolbar-action-link
+      ):nth-child(1 of :where(:not([data-toolbar-visibility-state]))):where(
+        :nth-last-child(1 of :not([data-toolbar-visibility-state]))
+      )
+  ):hover {
+  background-color: var(--kui-toolbar-control-background);
+  background-image: linear-gradient(
+    var(--kui-toolbar-control-hover-background) 0 0
+  );
+}
+
 /* A toolbar Select beside other controls highlights its own pill on hover
    (select.css); a lone Select instead lifts the whole group (above). */
 

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

@@ -138,6 +138,72 @@ button.kui-toolbar-text:focus-visible {
   color: var(--kui-color-text);
 }
 
+/* In an overlay Pane header (`headerPresentation="overlay"`), overlay
+   NavStack chrome (`chromePresentation="overlay"`), or an overlay NavStack
+   bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, the title sits on the translucent chrome material with
+   arbitrary content scrolling beneath it. Quiet colors fall below AA there
+   over the worst-case backdrop (the material over black in light, white in
+   dark): the default title color
+   measures about 3.8:1 (light) and the description about 3.2:1 (light) and
+   4.1:1 (dark). The title takes the normal text color (about 10.5:1 and
+   8.3:1), and the description lifts halfway toward it (about 5.9:1 in both
+   themes), so it still reads as secondary but keeps AA. A ToolbarText in a
+   DialogSurface floating header (`headerPresentation="floating"`), slotted
+   as the dialog's label or into its header actions, sits on the raised chrome
+   material and takes the same lift. See docs/accessibility.md "Chrome
+   material". */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  )
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
 .kui-toolbar-text[data-tone="dark"] {
   color: var(--kui-color-neutral-on-loud);
 }

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

@@ -8,10 +8,15 @@
   --_kui-list-column-gap: var(--_kui-list-gap);
   --_kui-list-row-gap: var(--_kui-list-gap);
   --_kui-list-flex: 0 1 auto;
-  --_kui-list-inset-top: 0;
-  --_kui-list-inset-right: 0;
-  --_kui-list-inset-bottom: 0;
-  --_kui-list-inset-left: 0;
+  --_kui-list-inset-top: 0px;
+  --_kui-list-inset-right: 0px;
+  --_kui-list-inset-bottom: 0px;
+  --_kui-list-inset-left: 0px;
+  --_kui-list-clearance-start: 0px;
+  --_kui-list-clearance-end: 0px;
+  --_kui-list-ring-room: 0px;
+  --_kui-list-max-height: none;
+  --_kui-list-min-height: 0px;
   --_kui-list-divider-top: transparent;
   --_kui-list-divider-right: transparent;
   --_kui-list-divider-bottom: transparent;
@@ -19,10 +24,15 @@
 
   display: flex;
   min-width: 0;
-  min-height: 0;
+  min-height: var(--_kui-list-min-height);
+  max-height: var(--_kui-list-max-height);
   box-sizing: border-box;
-  padding: var(--_kui-list-inset-top, 0) var(--_kui-list-inset-right, 0)
-    var(--_kui-list-inset-bottom, 0) var(--_kui-list-inset-left, 0);
+  padding: calc(
+      var(--_kui-list-inset-top, 0px) + var(--_kui-list-clearance-start)
+    )
+    var(--_kui-list-inset-right, 0)
+    calc(var(--_kui-list-inset-bottom, 0px) + var(--_kui-list-clearance-end))
+    var(--_kui-list-inset-left, 0);
   flex: var(--_kui-list-flex, initial);
   flex-direction: column;
   align-items: stretch;
@@ -97,6 +107,21 @@
   }
 }
 
+/* `frame`: a bordered, rounded stack (a result picker). Its 4px inset on
+   every side replaces any side-selected or document inset, and is exactly
+   the reach of a row's focus ring (3px ring, 1px offset), so the first and
+   last rows' rings stay inside a scrolling frame's clip at the scroll
+   extremes. (The ring-room scroll padding every scrollable List carries
+   handles a row stopped mid-scroll.) */
+.kui-list[data-frame="true"] {
+  --_kui-list-inset-top: var(--kui-space-2xs);
+  --_kui-list-inset-right: var(--kui-space-2xs);
+  --_kui-list-inset-bottom: var(--kui-space-2xs);
+  --_kui-list-inset-left: var(--kui-space-2xs);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;
@@ -124,11 +149,56 @@
   justify-content: space-between;
 }
 
+/* A scrollable List's scroll padding is a row's focus-ring reach (3px ring,
+   1px offset) plus 2px of slack, so a row focused or scrolled into view stops
+   with its ring inside the clip rather than flush against it: Chromium's
+   focus scroll stops 1px short of the padded target, and a row's fractional
+   position can cost another 0.3px. Scroll padding moves nothing at rest; at
+   the scroll extremes an unframed List's first and last rows still meet the
+   clip, which is what `frame`'s 4px inset is for. */
 .kui-list[data-scrollable="true"] {
+  --_kui-list-ring-room: calc(var(--kui-space-2xs) + 2px);
   overflow-y: auto;
   overscroll-behavior-y: contain;
 }
 
+/* `scrollClearance`: chrome lying over the List's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The List adds it to its
+   own block padding and scroll padding, so rows scroll visibly beneath the
+   chrome while the first and last rows, and anything focused or scrolled into
+   view, still come to rest clear of it. */
+.kui-list:is(
+  [data-scroll-clearance="block-start"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-start: var(--kui-scroll-clearance-block-start, 0px);
+}
+
+.kui-list:is(
+  [data-scroll-clearance="block-end"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+.kui-list:is([data-scroll-clearance], [data-scrollable="true"]) {
+  scroll-padding-block: calc(
+      var(--_kui-list-clearance-start) + var(--_kui-list-ring-room)
+    )
+    calc(var(--_kui-list-clearance-end) + var(--_kui-list-ring-room));
+}
+
+/* In a Pane's scrolling content, a List that does not scroll itself keeps
+   its full height rather than shrinking to the content box. A shrunken List
+   lets its rows overflow its own box, and the scroller's block-end padding
+   (a bottom safe area, an overlay NavStack bottom toolbar's clearance)
+   follows the List's box, not those rows, so the last row could never
+   scroll clear of the edge. A `flex` basis still grows the List to fill. */
+.kui-pane > .kui-pane__content > .kui-list:not([data-scrollable="true"]) {
+  flex-shrink: 0;
+}
+
 /* A scrollable List owns the overflow, so its rows keep their natural height
    and scroll rather than shrink. Items that clip their own overflow (a
    ListItem) have a zero automatic minimum height, so the default