@kerfjs/ui 5.0.0-beta.94 → 5.0.0-beta.96

package/dist/split-view.d.ts

@@ -3,6 +3,7 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { N as NavStackProps, a as NavStackView } from './nav-stack-BvSKY448.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import './list.js';
+import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
 import './sides-BPSWde0A.js';
 import './css-values.js';
@@ -38,6 +39,17 @@ interface SplitViewCompactStack extends Pick<NavStackProps, 'toolbarConfig' | 'b
     /** Toolbar content for the pushed detail view. */
     detail?: SplitViewCompactViewToolbars;
 }
+/**
+ * The fixed list column's width: a size in CSS pixels, or that size capped
+ * at a fraction of the SplitView's own width so a narrow container (a
+ * dialog, a small window) always leaves the detail in view.
+ */
+type SplitViewListWidth = number | {
+    /** Preferred width in CSS pixels. */
+    size: number;
+    /** Largest share of the SplitView's width, greater than 0 and at most 1. */
+    maxFraction?: number;
+};
 interface SplitViewProps {
     id: string;
     label: string;
@@ -63,6 +75,12 @@ interface SplitViewProps {
     compactStack?: SplitViewCompactStack;
     /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
     resizable?: SplitViewResizable;
+    /**
+     * The fixed split's list column width (default 320px). A number is CSS
+     * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's
+     * width. A resizable split sizes its list with `resizable` instead.
+     */
+    listWidth?: SplitViewListWidth;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -74,6 +92,6 @@ interface SplitViewProps {
  * resizable wiring with `wireResizableRegions` and the compact back with
  * `wireNavStack`.
  */
-declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, compactStack, resizable, className, slot, }: SplitViewProps): kerfjs.SafeHtml;
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, compactStack, resizable, listWidth, className, slot, }: SplitViewProps): kerfjs.SafeHtml;
 
-export { SplitView, type SplitViewCompactStack, type SplitViewCompactViewToolbars, type SplitViewProps, type SplitViewResizable };
+export { SplitView, type SplitViewCompactStack, type SplitViewCompactViewToolbars, type SplitViewListWidth, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-75YOTZ25.js';
+import { NavStack } from './chunk-AYHC62OZ.js';
 
 import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
@@ -11,9 +11,23 @@ import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
 
 
+import { remify, pct } from './chunk-U657IHFB.js';
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
+function listWidthValue(listWidth) {
+  const { size, maxFraction } = typeof listWidth === "number" ? { size: listWidth, maxFraction: void 0 } : listWidth;
+  if (!Number.isFinite(size) || size <= 0)
+    throw new RangeError(
+      "SplitView listWidth size must be a positive number of pixels"
+    );
+  if (maxFraction !== void 0 && (!Number.isFinite(maxFraction) || maxFraction <= 0 || maxFraction > 1))
+    throw new RangeError(
+      "SplitView listWidth maxFraction must be greater than 0 and at most 1"
+    );
+  const preferred = remify(size);
+  return maxFraction === void 0 ? preferred : `min(${preferred}, ${pct(maxFraction * 100)})`;
+}
 function SplitView({
   id,
   label,
@@ -26,9 +40,15 @@ function SplitView({
   backLabel = "Back",
   compactStack = {},
   resizable,
+  listWidth,
   className = "",
   slot
 }) {
+  if (listWidth !== void 0 && resizable)
+    throw new RangeError(
+      "SplitView listWidth applies to a fixed split; size a resizable list with resizable.size, min, and max"
+    );
+  const listWidthStyle = listWidth === void 0 ? void 0 : `--kui-split-view-list-width:${listWidthValue(listWidth)}`;
   if (compact) {
     const listView = {
       ...compactStack.list,
@@ -114,6 +134,7 @@ function SplitView({
       "data-component": "split-view",
       "data-split-mode": "split",
       "aria-label": label,
+      style: listWidthStyle,
       slot,
       children: [
         listPane,

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 {\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\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  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  className = '',\n  slot,\n}: SplitViewProps) {\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      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, 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"]}

package/dist/state-banner.d.ts

@@ -1,5 +1,6 @@
 import { SafeHtml } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
 import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
 
 /** @deprecated Use SemanticTone. */
@@ -7,6 +8,7 @@ type StateBannerTone = SemanticTone;
 type StateBannerUrgency = 'status' | 'alert';
 type StateBannerCopyLayout = 'inline' | 'stacked';
 type StateBannerActionPlacement = 'trailing' | 'below';
+type StateBannerPresentation = 'card' | 'strip';
 interface StateBannerProps {
     title: string;
     detail?: string;
@@ -20,12 +22,25 @@ interface StateBannerProps {
     copyLayout?: StateBannerCopyLayout;
     /** Place the action beside the copy or on a separate trailing row. */
     actionPlacement?: StateBannerActionPlacement;
+    /**
+     * `card` (the default) is an inset, rounded, fully bordered banner beside
+     * the affected work. `strip` is a full-width band at a layout edge, such as
+     * above a workspace: square corners, no inline margin, inline padding on the
+     * shared content-text column, and only the tone-colored `dividerSides` edges.
+     */
+    presentation?: StateBannerPresentation;
+    /**
+     * Physical tone-colored divider edges of a `strip`, in canonical
+     * top/right/bottom/left order. Defaults to the bottom edge; `''` draws none.
+     * A `card` keeps its full border and ignores this.
+     */
+    dividerSides?: Sides;
     className?: string;
     /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */
     placeholder?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, copyLayout, actionPlacement, className, placeholder, slot, }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, copyLayout, actionPlacement, presentation, dividerSides, className, placeholder, slot, }: StateBannerProps): SafeHtml;
 
-export { SemanticTone, StateBanner, type StateBannerActionPlacement, type StateBannerCopyLayout, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };
+export { SemanticTone, StateBanner, type StateBannerActionPlacement, type StateBannerCopyLayout, type StateBannerPresentation, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

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

package/dist/styles/badge.css

@@ -23,6 +23,33 @@
   white-space: nowrap;
 }
 
+/* A leading icon sits 4px before the text and inherits the badge's color. */
+.kui-badge[data-has-icon="true"] {
+  gap: 0.25rem;
+}
+
+/* maxWidth caps the badge; the label truncates with an ellipsis and the
+   badge may shrink below the cap in a tight flex row. */
+.kui-badge[data-truncate="true"] {
+  max-width: var(--_kui-badge-max-width);
+  flex: 0 1 auto;
+}
+
+.kui-badge__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-badge__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
 .kui-badge[data-tone="info"] {
   --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
   --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);

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

@@ -108,7 +108,7 @@
 }
 
 .kui-catalog-example__viewport[data-surface="lowered"] {
-  background: var(--kui-color-surface-lowered);
+  background: var(--kui-sunken-surface);
 }
 
 .kui-catalog-example__viewport[data-overflow="hidden"] {
@@ -151,13 +151,17 @@
 
 /* Bare specimens use a small inset to align with the surrounding examples. */
 .kui-catalog-example[data-align="glyph"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
+    :popover-open
+  ) {
   --kui-catalog-example-align: 1rem;
   margin-inline-start: var(--kui-catalog-example-align);
 }
 
 .kui-catalog-example[data-align="inline-control"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
+    :popover-open
+  ) {
   --kui-catalog-example-align: 0.5rem;
   margin-inline-start: var(--kui-catalog-example-align);
 }

package/dist/styles/choice-chips.css

@@ -0,0 +1,154 @@
+/* ChoiceChips: separated pills that wrap with the control gap. Each pill is a
+   <label> around a native radio, so the radio owns focus, arrow keys, and the
+   form value; the pill paints the radio's state through :has(). */
+.kui-choice-chips {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+}
+
+.kui-choice-chips__chip {
+  --_kui-choice-chips-border: var(--kui-color-neutral-border-normal);
+
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 2rem;
+  padding-inline: 0.75rem;
+  box-sizing: border-box;
+  border: 1px solid var(--_kui-choice-chips-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  align-items: center;
+  gap: 0.375rem;
+  font-size: var(--kui-font-s);
+  font-weight: var(--kui-font-weight-semibold, 600);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, border-color, box-shadow;
+  transition-duration: 120ms;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__chip {
+  min-height: 1.5rem;
+  padding-inline: 0.5rem;
+  gap: 0.25rem;
+  font-size: var(--kui-font-xs);
+}
+
+/* The native radio covers the pill so a pointer press lands on it directly,
+   but paints nothing: the pill draws its checked and focus state. */
+.kui-choice-chips__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border-radius: inherit;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+
+.kui-choice-chips__chip:hover:not([data-disabled]):not(
+    :has(> .kui-choice-chips__input:checked)
+  ) {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+  --_kui-choice-chips-border: var(--kui-color-brand-border-loud);
+
+  color: var(--kui-color-brand-on-fill);
+  background: var(--kui-color-brand-fill-normal);
+  /* A second pixel of border marks the selection without relying on hue. */
+  box-shadow: inset 0 0 0 1px var(--_kui-choice-chips-border);
+}
+
+.kui-choice-chips__chip:has(> .kui-choice-chips__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-choice-chips__chip[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.kui-choice-chips__swatch {
+  width: 0.75rem;
+  height: 0.75rem;
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--_kui-choice-chips-swatch, transparent);
+  /* An inner edge keeps a pale swatch visible against the pill. */
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--kui-color-text) 20%, transparent);
+  flex: none;
+}
+
+.kui-choice-chips[data-size="compact"] .kui-choice-chips__swatch {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* The no-color swatch: an outlined dot struck through from corner to corner. */
+.kui-choice-chips__swatch[data-swatch="transparent"] {
+  position: relative;
+  box-shadow: inset 0 0 0 1px var(--kui-color-neutral-border-loud);
+}
+
+.kui-choice-chips__swatch[data-swatch="transparent"]::after {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 0.75px);
+  width: 1.5px;
+  height: 100%;
+  border-radius: 1px;
+  background: var(--kui-color-danger-on-quiet);
+  content: "";
+  transform: rotate(45deg);
+}
+
+.kui-choice-chips__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-choice-chips__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (forced-colors: active) {
+  .kui-choice-chips__chip {
+    border-color: ButtonBorder;
+  }
+
+  .kui-choice-chips__chip:has(> .kui-choice-chips__input:checked) {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+
+  .kui-choice-chips__swatch {
+    forced-color-adjust: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-choice-chips__chip {
+    transition: none;
+  }
+}

package/dist/styles/column-track.css

@@ -0,0 +1,57 @@
+/* The track is the sideways scroll owner and fills its parent's height; the
+   columns sit flush in one row and own their insets and vertical scrolling. */
+.kui-column-track {
+  --_kui-column-track-min-width: 15.625rem;
+  --_kui-column-track-peek: 1.5rem;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  overscroll-behavior-x: contain;
+}
+
+/* Equal columns that never shrink below the minimum: a narrow track scrolls
+   instead of crushing them. */
+.kui-column-track__columns {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  grid-auto-columns: minmax(var(--_kui-column-track-min-width), 1fr);
+  grid-auto-flow: column;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/* Paged: each column is nearly the visible width so the next one peeks in,
+   and mandatory snapping settles a swipe or momentum scroll on a column
+   start. Trailing room lets the last column snap to the leading inset. */
+.kui-column-track[data-layout="paged"] {
+  container-type: inline-size;
+  scroll-behavior: smooth;
+  scroll-padding-inline: var(--kui-layout-inline-margin, 0.5rem);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.kui-column-track[data-layout="paged"]::-webkit-scrollbar {
+  display: none;
+}
+
+.kui-column-track[data-layout="paged"] > .kui-column-track__columns {
+  width: max-content;
+  padding-inline-end: var(--_kui-column-track-peek);
+  grid-auto-columns: calc(100cqi - var(--_kui-column-track-peek));
+}
+
+.kui-column-track[data-layout="paged"] > .kui-column-track__columns > * {
+  scroll-snap-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-column-track[data-layout="paged"] {
+    scroll-behavior: auto;
+  }
+}

package/dist/styles/combobox.css

@@ -0,0 +1,113 @@
+/* A field label, the themed input with its listbox, and an optional hint,
+   aligned like a Web Awesome form field: label and hint sit on the value's
+   text column (1px border + 8px padding). */
+.kui-combobox {
+  display: grid;
+  min-width: 0;
+  gap: var(--kui-space-2xs);
+}
+
+.kui-combobox__label,
+.kui-combobox__hint {
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+}
+
+.kui-combobox__label {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.kui-combobox__hint {
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__control {
+  position: relative;
+  min-width: 0;
+}
+
+/* The same chrome as a themed wa-input: 44px, 1px border, 8px inset. */
+.kui-combobox__input {
+  width: 100%;
+  min-width: 0;
+  height: 2.75rem;
+  margin: 0;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface);
+  font: inherit;
+  font-size: var(--kui-font-s);
+}
+
+.kui-combobox__input::placeholder {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-combobox__input:focus-visible {
+  border-color: var(--kui-color-text-link);
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+.kui-combobox[data-disabled="true"] {
+  opacity: 0.55;
+}
+
+/* A touch field below 16px makes iOS magnify the page on focus. */
+@media (hover: none) and (pointer: coarse) {
+  .kui-combobox__input {
+    font-size: max(16px, var(--kui-font-s));
+  }
+}
+
+/* The suggestion list drops below the field over the content that follows. */
+.kui-combobox__listbox {
+  position: absolute;
+  z-index: var(--kui-combobox-z-index, 20);
+  inset: calc(100% + var(--kui-space-2xs)) 0 auto;
+  max-height: 15rem;
+  margin: 0;
+  padding: var(--kui-space-2xs);
+  overflow-y: auto;
+  box-sizing: border-box;
+  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-raised);
+  box-shadow: var(--kui-shadow-l);
+  list-style: none;
+}
+
+.kui-combobox__listbox[hidden] {
+  display: none;
+}
+
+.kui-combobox__option {
+  margin: 0;
+  padding: var(--kui-space-xs);
+  border-radius: max(
+    0px,
+    calc(var(--kui-layout-rounded-radius, 0.75rem) - var(--kui-space-2xs))
+  );
+  color: var(--kui-color-text);
+  cursor: pointer;
+  font-size: var(--kui-font-s);
+  overflow-wrap: anywhere;
+}
+
+.kui-combobox__option:hover,
+.kui-combobox__option[aria-selected="true"] {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-combobox__option[data-create] {
+  color: var(--kui-color-text-link);
+}

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

@@ -0,0 +1,22 @@
+/* Web Awesome's own icon-button geometry, for a lone LucideIcon: a square one
+   form control height on each side with the glyph centered. Web Awesome
+   applies it only to a lone wa-icon. */
+.kui-icon-button::part(base) {
+  width: var(--wa-form-control-height);
+  min-width: var(--wa-form-control-height);
+  padding: 0;
+  aspect-ratio: 1;
+  justify-content: center;
+}
+
+.kui-icon-button::part(label) {
+  display: flex;
+  justify-content: center;
+}
+
+/* Beside a field in a ListInsetControl, the square keeps its size instead of
+   growing to share the row, and lines up with the field below its label. */
+.kui-list-inset-control > .kui-icon-button {
+  flex: none;
+  align-self: flex-end;
+}