@kerfjs/ui 5.0.0-beta.100 → 5.0.0-beta.101

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-T4WJ5VGP.js';
+export { ListHeader } from './chunk-3SKAEPPZ.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,4 @@
-export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
+export { ListItem, ListItemLink } from './chunk-ZYU5WRC3.js';
 
 
 

package/dist/{nav-stack-VXTumzKa.d.ts → nav-stack-CU_0dKtI.d.ts}

@@ -1,8 +1,9 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { PaneConfig, ScrollEdge, SurfaceTint } from './pane.js';
 import { ListConfig } from './list.js';
-import { PaneConfig } from './pane.js';
 import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
+import { CssColor } from './css-values.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
 
@@ -56,15 +57,24 @@ interface NavStackToolbarConfig extends ToolbarConfig {
  * How a {@link NavStack}'s top chrome relates to the active view: `docked`
  * above it, or `overlay` laid over its top edge on the translucent chrome
  * material, so the view's content scrolls visibly beneath it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath it.
  */
-type NavStackChromePresentation = 'docked' | 'overlay';
+type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';
 /**
  * How a {@link NavStack}'s bottom toolbar relates to the active view:
  * `docked` below it, or `overlay` laid over its bottom edge on the
  * translucent chrome material, so the view's content scrolls visibly beneath
  * it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath
+ * it, until the view scrolls to its end.
  */
-type NavStackBottomToolbarPresentation = 'docked' | 'overlay';
+type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';
 interface NavStackProps {
     id: string;
     /** Accessible name for the stack region. */
@@ -123,7 +133,9 @@ interface NavStackProps {
      * focused or scrolled into view, rests clear of the bar. Until then, and
      * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in
      * the chrome lifts its title and description to AA over the content passing
-     * beneath it; keep any other quiet copy in the view.
+     * beneath it; keep any other quiet copy in the view. With `clear`, the
+     * stack's own back control sits in a glass control group
+     * (`material="glass"`), so it stays legible over imagery.
      */
     chromePresentation?: NavStackChromePresentation;
     /**
@@ -141,6 +153,30 @@ interface NavStackProps {
      * `ToolbarText` in the toolbar lifts to AA over the content beneath it.
      */
     bottomToolbarPresentation?: NavStackBottomToolbarPresentation;
+    /**
+     * For `clear` chrome or bottom toolbar, `material` fades the chrome
+     * material in while the active view's content lies beneath it (default
+     * `none`).
+     */
+    scrollEdge?: ScrollEdge;
+    /**
+     * The scroll distance, in CSS pixels, over which the scroll edge fades in
+     * (default 60).
+     */
+    scrollEdgeDistance?: number;
+    /**
+     * Paint the stack, its docked chrome and bottom toolbar, and every view in
+     * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of
+     * the surface. Overlay chrome keeps the chrome material; one view's own
+     * color goes in its `pane: { background }`. Forced colors paint `Canvas`.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every
+     * descendant re-derive their surface and text tokens from the app's color
+     * in the declared scheme, with lightness clamped to keep text at WCAG AA.
+     */
+    tint?: SurfaceTint;
     className?: string;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
@@ -153,6 +189,6 @@ interface NavStackProps {
  * and `toolbarConfig` supplies defaults. A single-pane
  * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
  */
-declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, chromePresentation, bottomToolbarPresentation, className, slot, }: NavStackProps): kerfjs.SafeHtml;
+declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, separator, chromeDividers, chromePresentation, bottomToolbarPresentation, scrollEdge, scrollEdgeDistance, background, tint, className, slot, }: NavStackProps): kerfjs.SafeHtml;
 
 export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackBottomToolbarPresentation as d, type NavStackChromePresentation as e, type NavStackToolbarConfig as f, type NavStackViewBottomToolbar as g, type NavStackViewToolbar as h };

package/dist/nav-stack.d.ts

@@ -1,13 +1,13 @@
-export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-VXTumzKa.js';
+export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CU_0dKtI.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
-import './scroll-clearance-BikHljTc.js';
 import './sides-BPSWde0A.js';
-import './css-values.js';
-import './pane.js';
 import './panel-toolbar-vg6Ir5Dy.js';
 import './toolbar.js';
 import './lucide-icon.js';

package/dist/nav-stack.js

@@ -1,4 +1,5 @@
-export { NavStack } from './chunk-CMETHPKR.js';
+export { NavStack } from './chunk-6E2H2E5A.js';
+
 
 
 

package/dist/pane.d.ts

@@ -1,6 +1,38 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
+import { CssColor } from './css-values.js';
+
+/**
+ * What clear (fully transparent) chrome fades in as content scrolls beneath
+ * it: `none` stays clear; `material` fades in the translucent chrome
+ * material; `surface` fades in the opaque surface. The fade tracks the scroll
+ * over `scrollEdgeDistance` (opacity only), from the scroll state
+ * `wireScrollDividers` reports; unwired, the chrome stays clear.
+ */
+type ScrollEdge = 'none' | 'material' | 'surface';
+
+/** The color scheme an app declares for a {@link SurfaceTint}'s color. */
+type SurfaceTintScheme = 'light' | 'dark';
+/**
+ * A scoped tint for a layout surface: the app's color (usually sampled from
+ * artwork it already knows) and the scheme that color belongs to. Kerf does no
+ * color detection; `scheme` says whether the color reads as a light or a dark
+ * surface. Inside the scope the surface, raised surface, text, quiet text, and
+ * everything built on them (quiet fills, separators' backdrop, the chrome
+ * material) re-derive from the color, with lightness clamped so text keeps
+ * WCAG AA over any color.
+ */
+interface SurfaceTint {
+    color: CssColor;
+    scheme: SurfaceTintScheme;
+    /**
+     * An optional accent (usually the artwork's most vivid color). The scope's
+     * brand ramp re-derives from it: loud fills and their text, brand text and
+     * links, text on brand fills, and the focus ring, each clamped to keep AA.
+     */
+    accent?: CssColor;
+}
 
 /**
  * Logical pane sides: where a {@link Pane} can show a separator and where it can
@@ -24,10 +56,16 @@ type PaneRootAttributes = Readonly<Record<`data-${string}`, string | undefined>
     'data-chrome-placement'?: never;
     'data-chrome-dividers'?: never;
     'data-appearance'?: never;
+    'data-background'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
     'data-deep-inset'?: never;
     'data-outlined'?: never;
     'data-scroll-clearance'?: never;
     'data-header-presentation'?: never;
+    'data-header-material'?: never;
+    'data-scroll-edge'?: never;
+    'data-scroll-edge-distance'?: never;
     'data-header-overlay'?: never;
 }>;
 /** How a Pane's header and footer relate to its scrolling content. */
@@ -42,8 +80,12 @@ type PaneChromeDividers = 'scroll' | 'always' | 'none';
  * How a Pane's header relates to its scrolling content: `docked` in its own
  * row above the content, or `overlay` laid over the content's top edge on the
  * translucent chrome material, so content scrolls visibly beneath it.
+ * `clear` lays it over
+ * the same edge fully transparent, for chrome over imagery: legibility comes
+ * from glass control groups or a scrim, and with `scrollEdge="material"` the
+ * chrome material fades in once content scrolls beneath it.
  */
-type PaneHeaderPresentation = 'docked' | 'overlay';
+type PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';
 /** Background treatment of the Pane's scrolling work surface. */
 type PaneAppearance = 'default' | 'sunken';
 interface PaneProps {
@@ -89,8 +131,38 @@ interface PaneProps {
      * content passing beneath it.
      */
     headerPresentation?: PaneHeaderPresentation;
+    /**
+     * With `headerPresentation="clear"`, `material` fades the chrome material
+     * in behind the header once content scrolls beneath it (default `none`).
+     */
+    scrollEdge?: ScrollEdge;
+    /**
+     * The scroll distance, in CSS pixels, over which the scroll edge fades in
+     * (default 60).
+     */
+    scrollEdgeDistance?: number;
     /** Paint the scrolling work surface with the shared lowered-surface color. */
     appearance?: PaneAppearance;
+    /**
+     * Paint the whole pane, header and footer included, in an app-chosen color
+     * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`
+     * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken
+     * pane drops its lowered color and grain. Omitted, the pane keeps its
+     * default (transparent, or the sunken surface). Forced colors paint
+     * `Canvas`. Keep text at AA over the color; a dark color needs a matching
+     * tint or dark tones for its content.
+     */
+    background?: CssColor;
+    /**
+     * A scoped tint: `{ color, scheme }`, the app's color and the scheme it
+     * belongs to. The pane paints the tinted surface (unless `background` is
+     * set) and its whole subtree, chrome material and quiet fills included,
+     * re-derives its surface and text tokens from the color with lightness
+     * clamped to keep text at WCAG AA. Without relative color syntax, or under
+     * `prefers-contrast: more`, the scope keeps the plain palette in the
+     * declared scheme.
+     */
+    tint?: SurfaceTint;
     /**
      * Clear chrome that lies over the scrolling content's block-start and/or
      * block-end edge, such as a `DialogSurface` floating footer over a filling
@@ -141,13 +213,13 @@ interface PaneProps {
  * or a CollapsiblePanel) forwards, so the app configures that pane instead of
  * styling it. An omitted or `undefined` field keeps the composite's default.
  */
-type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'headerPresentation' | 'appearance' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
+type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separators' | 'safeAreaEdges' | 'chromeDividers' | 'headerPresentation' | 'scrollEdge' | 'scrollEdgeDistance' | 'appearance' | 'background' | 'tint' | 'deepInset' | 'scrollClearance' | 'tabIndex' | 'outlined'>;
 /**
  * An unpadded application column with optional fixed header/footer slots and one
  * scrolling vertical content owner. Separator lines are independently opt-in on
  * each logical edge, so the same component works as a sidebar, main area,
  * inspector, or dialog column.
  */
-declare function Pane({ header, children, footer, chromePlacement, chromeDividers, headerPresentation, appearance, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
+declare function Pane({ header, children, footer, chromePlacement, chromeDividers, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };

package/dist/pane.js

@@ -1,4 +1,5 @@
-export { Pane } from './chunk-INI4WDWC.js';
+export { Pane } from './chunk-M5KZ26VV.js';
+
 
 
 

package/dist/select.js

@@ -1,4 +1,4 @@
-export { Select } from './chunk-TLMMFQWM.js';
+export { Select } from './chunk-NS762OVM.js';
 
 
 

package/dist/split-view.d.ts

@@ -1,14 +1,14 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { N as NavStackProps, a as NavStackView } from './nav-stack-VXTumzKa.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-CU_0dKtI.js';
 import { ResizableRegionProps } from './resizable-region.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';
-import './scroll-clearance-BikHljTc.js';
 import './sides-BPSWde0A.js';
-import './css-values.js';
-import './pane.js';
 import './panel-toolbar-vg6Ir5Dy.js';
 import './toolbar.js';
 import './lucide-icon.js';

package/dist/split-view.js

@@ -1,5 +1,4 @@
-import { NavStack } from './chunk-CMETHPKR.js';
-
+import { NavStack } from './chunk-6E2H2E5A.js';
 import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
 
@@ -12,6 +11,8 @@ import { ResizableRegion } from './chunk-Y6KT7ZTR.js';
 
 
 
+
+
 import { remify, pct } from './chunk-IQSRHXZR.js';
 
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';

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, 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"]}
+{"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.js

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

package/dist/styles/backdrop-image.css

@@ -0,0 +1,241 @@
+/* An image block at the top of a scrolling Pane or NavStack view. The root
+   paints fadeTo, so the image fades into it and the content below sits on the
+   same color. It bleeds to the Pane's resolved inline insets (the safe area)
+   and hands them back to its overlay and content, so their own items keep
+   the ordinary text axis. */
+.kui-backdrop-image {
+  --_kui-backdrop-image-height: 20rem;
+  --_kui-backdrop-image-fade-to: transparent;
+  --_kui-backdrop-image-parallax: 0;
+  --_kui-backdrop-image-position: center;
+  --_kui-backdrop-image-fit: cover;
+  --_kui-backdrop-image-inset-start: var(
+    --kui-pane-content-inset-inline-start,
+    0px
+  );
+  --_kui-backdrop-image-inset-end: var(
+    --kui-pane-content-inset-inline-end,
+    0px
+  );
+  --_kui-backdrop-image-bleed-block-start: 0px;
+  display: flow-root;
+  position: relative;
+  min-width: 0;
+  margin-inline: calc(-1 * var(--_kui-backdrop-image-inset-start))
+    calc(-1 * var(--_kui-backdrop-image-inset-end));
+  background-color: var(--_kui-backdrop-image-fade-to);
+  isolation: isolate;
+}
+
+/* `underChrome`: the block runs up beneath the scroller's block-start inset
+   (overlay or clear chrome clearance plus the top safe area, as the Pane
+   publishes it) and the hero grows by the same amount, so the visible image
+   keeps its height below the chrome and the overlay stays where it was. */
+.kui-backdrop-image[data-under-chrome="true"] {
+  --_kui-backdrop-image-bleed-block-start: var(
+    --kui-pane-content-inset-block-start,
+    0px
+  );
+  margin-block-start: calc(-1 * var(--_kui-backdrop-image-bleed-block-start));
+}
+
+/* The view timeline's inset defaults to the scroller's scroll padding, which
+   is the chrome clearance this image now runs beneath; measured from there,
+   the parallax would start part-way through at rest and shift the image
+   down. Measure from the scroller's real edge instead. */
+.kui-backdrop-image[data-under-chrome="true"] .kui-backdrop-image__hero {
+  view-timeline-inset: 0px;
+}
+
+/* The hero is the scroll-timeline subject: its own block of scroll drives
+   the parallax, whatever sits above it and however tall it is. */
+.kui-backdrop-image__hero {
+  display: grid;
+  position: relative;
+  min-height: calc(
+    var(--_kui-backdrop-image-height) +
+      var(--_kui-backdrop-image-bleed-block-start)
+  );
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  view-timeline: --kui-backdrop-image block;
+}
+
+.kui-backdrop-image__backdrop {
+  position: absolute;
+  inset: 0;
+  overflow: clip;
+  pointer-events: none;
+}
+
+/* The fade is a mask on the backdrop, not a painted gradient, so the image
+   dissolves into whatever fadeTo is without a visible band. */
+.kui-backdrop-image[data-fade="true"] .kui-backdrop-image__backdrop {
+  mask-image: linear-gradient(to bottom, #000 50%, transparent);
+}
+
+/* The moving layer: everything that lags the scroll. */
+.kui-backdrop-image__layers {
+  position: absolute;
+  inset: 0;
+}
+
+.kui-backdrop-image__media,
+.kui-backdrop-image__blurred {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--_kui-backdrop-image-fit);
+  object-position: var(--_kui-backdrop-image-position);
+  background-position: var(--_kui-backdrop-image-position);
+}
+
+/* Progressive blur: a copy over the sharp image, blurred once and hidden
+   until the scroll timeline fades it in. A filtered copy overhangs the block
+   by its radius on every side, so the blur's transparent fringe falls outside
+   the clip instead of letting the sharp edge show through. The dim layer
+   darkens toward its peak opacity with it. */
+.kui-backdrop-image__blurred {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+
+.kui-backdrop-image[data-blur="filter"] .kui-backdrop-image__blurred {
+  inset: calc(-1 * var(--_kui-backdrop-image-blur)) auto auto
+    calc(-1 * var(--_kui-backdrop-image-blur));
+  width: calc(100% + 2 * var(--_kui-backdrop-image-blur));
+  height: calc(100% + 2 * var(--_kui-backdrop-image-blur));
+  filter: blur(var(--_kui-backdrop-image-blur));
+}
+
+.kui-backdrop-image__dim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / var(--_kui-backdrop-image-dim));
+  opacity: 0;
+}
+
+.kui-backdrop-image__scrim {
+  position: absolute;
+  inset: 0;
+}
+
+.kui-backdrop-image[data-scrim="bottom"] .kui-backdrop-image__scrim {
+  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.5));
+}
+
+.kui-backdrop-image[data-scrim="full"] .kui-backdrop-image__scrim {
+  background: rgb(0 0 0 / 0.35);
+}
+
+.kui-backdrop-image__overlay {
+  position: relative;
+  min-width: 0;
+  align-self: end;
+  padding-inline: var(--_kui-backdrop-image-inset-start)
+    var(--_kui-backdrop-image-inset-end);
+}
+
+/* A scrim is dark in both color schemes, so the content laid over it takes
+   the dark scheme: default-tone titles and controls resolve their light
+   foregrounds whatever the page's scheme. */
+.kui-backdrop-image:is([data-scrim="bottom"], [data-scrim="full"])
+  .kui-backdrop-image__overlay {
+  color-scheme: dark;
+  color: var(--kui-color-text);
+}
+
+.kui-backdrop-image__content {
+  min-width: 0;
+  padding-inline: var(--_kui-backdrop-image-inset-start)
+    var(--_kui-backdrop-image-inset-end);
+}
+
+/* Parallax: as the hero scrolls out past the scroller's start edge, the
+   layer slides down by the lag factor of that distance, so the image moves
+   slower than the content. The blurred copy and dim layer fade in over the
+   same range. Only transform and opacity animate, on a scroll-driven
+   timeline the compositor runs; the blur filter is never animated, and there
+   is no scroll listener and no background-attachment: fixed. Without
+   scroll-driven animations (Firefox today) or with reduced motion the image
+   stays static and sharp. */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers {
+      animation: kui-backdrop-image-parallax linear both;
+      animation-timeline: --kui-backdrop-image;
+      animation-range: exit-crossing 0% exit-crossing 100%;
+    }
+
+    /* The blur reaches full strength halfway through the exit, while most
+       of the image is still in view; ramping over the whole exit left it
+       barely visible before the image had scrolled away. */
+    .kui-backdrop-image[data-blur]
+      :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+      animation: kui-backdrop-image-reveal linear both;
+      animation-timeline: --kui-backdrop-image;
+      animation-range: exit-crossing 0% exit-crossing 50%;
+    }
+  }
+}
+
+@keyframes kui-backdrop-image-parallax {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateY(calc(var(--_kui-backdrop-image-parallax) * 100%));
+  }
+}
+
+@keyframes kui-backdrop-image-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* The document-wide static-effects switch and slow-update displays (e-ink,
+   print) get the same static, sharp image as reduced motion. */
+:root[data-kui-effects="static"]
+  .kui-backdrop-image[data-parallax="scroll"]
+  .kui-backdrop-image__layers,
+:root[data-kui-effects="static"]
+  .kui-backdrop-image[data-blur]
+  :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+  animation: none;
+}
+
+@media (update: slow) {
+  .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
+  .kui-backdrop-image[data-blur]
+    :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+    animation: none;
+  }
+}
+
+/* Reduced transparency or increased contrast: no dissolve. The image ends on
+   a hard edge over solid fadeTo, and overlay content sits on a solid fadeTo
+   band instead of the image, so text chosen for the fade color stays
+   legible. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-backdrop-image[data-fade="true"] .kui-backdrop-image__backdrop {
+    mask-image: none;
+  }
+
+  .kui-backdrop-image[data-fade="true"] .kui-backdrop-image__overlay {
+    background-color: var(--_kui-backdrop-image-fade-to);
+  }
+
+  /* Over that solid band the overlay keeps the page's scheme. */
+  .kui-backdrop-image[data-fade="true"]:is(
+      [data-scrim="bottom"],
+      [data-scrim="full"]
+    )
+    .kui-backdrop-image__overlay {
+    color-scheme: inherit;
+    color: inherit;
+  }
+}

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

@@ -217,6 +217,15 @@
   overflow-clip-margin: 4px;
 }
 
+/* A glass control group floats on a soft shadow that reaches well past the
+   ring margin (about 24px below and 18px to the side). While the zone holds
+   one it stops clipping, so the shadow is never cut off flat: a margin would
+   not do, since WebKit has no `overflow-clip-margin`. A title beside it still
+   truncates itself with its own ellipsis. */
+.kui-toolbar__leading:has(> .kui-toolbar-control-group[data-material="glass"]) {
+  overflow: visible;
+}
+
 .kui-toolbar__center {
   /* The center content never compresses below its own width (a group cannot
      shrink or clip its controls). The track above takes this as its minimum, so