@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.112

package/dist/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelBody,\n  groupSizeFor,\n  type PanelBottomToolbar,\n  type PanelChromePlacement,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while the panel is expanded. */\n  outlined?: boolean;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * marked groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Fixed content below a toolbar panel's top toolbar. */\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: CollapsiblePanelChromePlacement;\n  /** Fixed content above a toolbar panel's bottom toolbar. */\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: CollapsiblePanelBottomToolbar;\n  footerPlacement?: CollapsiblePanelChromePlacement;\n  /**\n   * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n   * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n   * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n   * without a `toolbar`, where `children` renders as given.\n   */\n  pane?: PaneConfig;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  tabIndex,\n  outlined = false,\n  children,\n  toolbar,\n  header,\n  headerList,\n  headerPlacement,\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement,\n  pane,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-outlined={\n          !collapsed && presentation !== 'hidden' && outlined\n            ? 'true'\n            : undefined\n        }\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        tabindex={\n          collapsed || presentation === 'hidden'\n            ? tabIndex === undefined\n              ? undefined\n              : -1\n            : tabIndex\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar\n            ? composedPanelBody({\n                toolbar,\n                side,\n                collapsed,\n                attributes: toggleAttributes(id),\n                pane,\n                header,\n                headerList,\n                headerPlacement,\n                footer,\n                footerList,\n                bottomToolbar,\n                footerPlacement,\n                content: children,\n              })\n            : children}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n  /**\n   * Density of the toolbar the groups are placed in, so the standard toggle\n   * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n   * `default`.\n   */\n  density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n  density,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n        groupSizeFor(density),\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelBody,\n  groupSizeFor,\n  type PanelBottomToolbar,\n  type PanelChromePlacement,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while the panel is expanded. */\n  outlined?: boolean;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * marked groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Fixed content below a toolbar panel's top toolbar. */\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: CollapsiblePanelChromePlacement;\n  /** Fixed content above a toolbar panel's bottom toolbar. */\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: CollapsiblePanelBottomToolbar;\n  footerPlacement?: CollapsiblePanelChromePlacement;\n  /**\n   * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n   * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n   * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n   * without a `toolbar`, where `children` renders as given.\n   */\n  pane?: PaneConfig;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  tabIndex,\n  outlined = false,\n  children,\n  toolbar,\n  header,\n  headerList,\n  headerPlacement,\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement,\n  pane,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-outlined={\n          !collapsed && presentation !== 'hidden' && outlined\n            ? 'true'\n            : undefined\n        }\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        tabindex={\n          collapsed || presentation === 'hidden'\n            ? tabIndex === undefined\n              ? undefined\n              : -1\n            : tabIndex\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar\n            ? composedPanelBody({\n                toolbar,\n                side,\n                collapsed,\n                attributes: toggleAttributes(id),\n                pane,\n                header,\n                headerList,\n                headerPlacement,\n                footer,\n                footerList,\n                bottomToolbar,\n                footerPlacement,\n                content: children,\n              })\n            : children}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n  /**\n   * Density of the toolbar the groups are placed in, so the standard toggle\n   * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n   * `default`.\n   */\n  density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n  density,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n        groupSizeFor(density),\n      )}\n    </>\n  );\n}\n"]}

package/dist/content-item.d.ts

@@ -1,6 +1,10 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssColor } from './css-values.js';
 import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+import { BackdropImagePosition, BackdropImageParallax, BackdropImageBlur, BackdropImageScrim } from './backdrop-image.js';
+import './extension-attributes-mu8MFUl0.js';
 
 /**
  * Base surface treatment, semantic status colors, or `brand-loud`: the solid
@@ -19,12 +23,43 @@ type ContentItemFrame = 'none' | 'framed';
 type ContentItemShape = 'rounded' | 'pill';
 /** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */
 type ContentItemSelectionMode = 'none' | 'single' | 'multiple' | 'toggle';
+/** One card-owned lead image in the containing feed's shared scrollport. */
+interface ContentItemMedia {
+    src: string;
+    alt: string;
+    srcset?: string;
+    sizes?: string;
+    /** Width divided by height; reserves the image block before it loads. Default 16/9. */
+    aspectRatio?: number;
+    position?: BackdropImagePosition;
+    /** Default subtle (35% lag); set none for a static lead image. */
+    parallax?: BackdropImageParallax;
+    /** App-supplied soft copy; its opacity changes, never its blur filter. */
+    blurredSrc?: string;
+    /** Shared BackdropImage blur behavior; use instead of `blurredSrc`. */
+    blur?: BackdropImageBlur;
+    /** Skip offscreen media painting in long feeds while retaining card geometry. */
+    deferOffscreen?: boolean;
+    /** Color the image dissolves into and the card body continues on. */
+    fadeTo?: CssColor;
+    /** Content layered over the image, including native controls. */
+    overlay?: KerfUiContent;
+    /** Dim the image behind overlay content. */
+    scrim?: BackdropImageScrim;
+    /** Extend the image to the card's top, left, and right inner edges. */
+    edgeToEdge?: boolean;
+}
 type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
     'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
 }>;
 type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
@@ -32,6 +67,11 @@ type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, st
     'data-outlined'?: never;
     'data-bubble'?: never;
     'data-grid-row'?: never;
+    'data-media-state'?: never;
+    'data-media-edge'?: never;
+    'data-media-fade'?: never;
+    'data-kui-tint'?: never;
+    'data-kui-tint-accent'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-interactive'?: never;
@@ -47,6 +87,10 @@ interface ContentItemBaseProps {
      * semantic values match StateBanner. Defaults to `transparent`.
      */
     appearance?: ContentItemAppearance;
+    /** Reserved lead image with a per-image scroll timeline. Wire the containing root with `wireContentItems`. */
+    media?: ContentItemMedia;
+    /** App-sampled image color, scoped to this card once its image loads. */
+    tint?: SurfaceTint;
     /** Item content; a plain string is allowed for bare copy. */
     children?: KerfUiContent | string;
     /**
@@ -123,6 +167,6 @@ type ContentItemProps = ContentItemBaseProps & ({
  * border (transparent unless `framed`), 8px padding, and a rounded or pill
  * radius. It owns that whole geometry, so wrappers must not add more.
  */
-declare function ContentItem({ appearance, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+declare function ContentItem({ appearance, media, tint, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, gridRow, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
 
-export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };
+export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemMedia, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };

package/dist/content-item.js

@@ -1,4 +1,7 @@
-export { ContentItem } from './chunk-5USKCWGL.js';
+export { ContentItem } from './chunk-3KFMLOTH.js';
+
+
+
 
 
 //# sourceMappingURL=content-item.js.map

package/dist/editor-frame.d.ts

@@ -0,0 +1,41 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+
+type EditorFrameMode = 'source' | 'preview';
+type EditorFrameAppearance = 'framed' | 'embedded';
+type EditorFrameInset = 'padded' | 'flush';
+interface EditorFrameProps {
+    /** A Toolbar or other fixed controls above the writing surface. */
+    toolbar?: KerfUiContent;
+    /** A native textarea in source mode, or rendered content in preview mode. */
+    children: KerfUiContent;
+    mode: EditorFrameMode;
+    /** Framed fixed-height card (default) or unframed content within a host. */
+    appearance?: EditorFrameAppearance;
+    /** Remove the writing surface inset when the host owns the text column. */
+    inset?: EditorFrameInset;
+    /** Fill the viewport inset as a raised editor overlay. */
+    expanded?: boolean;
+    /** Framed block size; defaults to 320px. Ignored while expanded or embedded. */
+    height?: CssLength;
+    /** Maximum framed inline size; defaults to 672px. */
+    maxWidth?: CssLength;
+    /** Embedded source height restored by the app. */
+    sourceHeight?: CssLength;
+    /** Let an embedded native textarea grow with its content. */
+    sourceAutosize?: boolean;
+    /** Name a distinct editor region for assistive technology. */
+    label?: string;
+    /** App-owned root identity for delegation or a stable morph key. */
+    rootAttributes?: Readonly<Record<`data-${string}`, string | undefined>>;
+    slot?: string;
+}
+/**
+ * A fixed toolbar over one writing surface. Source mode gives a native
+ * textarea the scrollport; preview mode scrolls the surface around rendered
+ * content. The app owns editing, draft restoration, and preview actions.
+ */
+declare function EditorFrame({ toolbar, children, mode, appearance, inset, expanded, height, maxWidth, sourceHeight, sourceAutosize, label, rootAttributes, slot, }: EditorFrameProps): kerfjs.SafeHtml;
+
+export { EditorFrame, type EditorFrameAppearance, type EditorFrameInset, type EditorFrameMode, type EditorFrameProps };

package/dist/editor-frame.js

@@ -0,0 +1,3 @@
+export { EditorFrame } from './chunk-V6N3YLTM.js';
+
+//# sourceMappingURL=editor-frame.js.map

package/dist/editor-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"editor-frame.js"}

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js
 export { ListInsetText, ListInsetTextProps } from './list-inset-text.js';
 export { ListItem, ListItemLink, ListItemLinkProps, ListItemProps } from './list-item.js';
 export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps } from './summary-row.js';
+export { ValuePreview, ValuePreviewProps } from './value-preview.js';
 export { ValueTable, ValueTablePresentation, ValueTableProps, ValueTableRow, ValueTableRowProps, ValueTableStackBelow } from './value-table.js';
 export { AnchoredSurfaceOptions, AnchoredSurfacePoint, openAnchoredSurface, openAnchoredSurfaceAt } from './anchored-surface.js';
 export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
@@ -48,7 +49,7 @@ export { wireTextFields } from './wire-text-fields.js';
 export { ColumnTrack, ColumnTrackLayout, ColumnTrackProps } from './column-track.js';
 export { ContentSwap, ContentSwapDirection, ContentSwapProps, ContentSwapSide, ContentSwapTransition } from './content-swap.js';
 export { Grid, GridProps } from './grid.js';
-export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneHeaderPresentation, PaneProps, PaneSeparatorSide, ScrollEdge, SurfaceTint, SurfaceTintScheme } from './pane.js';
+export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneHeaderPresentation, PaneProps, PaneSeparatorSide, ScrollEdge } from './pane.js';
 export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
 export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
 export { Row, RowProps } from './row.js';
@@ -59,7 +60,8 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
 export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
 export { TabBarItem, TabBarItemNameOverflow, TabBarItemPresentation, TabBarItemProps, TabBarItemSize } from './tab-bar-item.js';
 export { BackdropImage, BackdropImageFit, BackdropImageParallax, BackdropImagePosition, BackdropImageProps, BackdropImageRepeat, BackdropImageScrim, BackdropImageSingleProps, BackdropImageTiledProps } from './backdrop-image.js';
-export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
+export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemMedia, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
+export { EditorFrame, EditorFrameAppearance, EditorFrameInset, EditorFrameMode, EditorFrameProps } from './editor-frame.js';
 export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
 export { DialogCloseSource, DialogRequestCloseDetail, DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceName, DialogSurfaceOptions, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSheetMotion, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset, closeDialog, openDialog } from './surface-scaffold.js';
 export { wireOverlaySheets } from './wire-overlay-sheets.js';
@@ -74,6 +76,7 @@ export { L as ListIconTile, a as ListIconTileColor, b as ListIconTileTone } from
 export { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
 export { S as SemanticTone } from './semantic-tone-CdW013KF.js';
 export { S as Sides } from './sides-BPSWde0A.js';
+export { S as SurfaceTint, a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
 import 'kerfjs';
 import './extension-attributes-mu8MFUl0.js';
 import 'kerfjs/overlay';

package/dist/index.js

@@ -1,45 +1,47 @@
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
 export { reorderTabs, wireTabBars } from './chunk-T74YB76U.js';
+export { wireSearchFields } from './chunk-UMNHJSIO.js';
 export { wireTextFields } from './chunk-KC6WUSNS.js';
-export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
+export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
 export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
 export { wireMessageComposers } from './chunk-HTERKONR.js';
 export { wireOverlaySheets } from './chunk-4RECPEHI.js';
 export { wireResizableRegions } from './chunk-GS2QD3N7.js';
-export { wireSearchFields } from './chunk-UMNHJSIO.js';
+export { wireScrollDividers } from './chunk-OZ6X76G5.js';
+
+export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
 export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
 export { wireComboboxes } from './chunk-MVKHSAKE.js';
 export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
-export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
-export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
+export { TextField } from './chunk-36HVQ72F.js';
+export { ValuePreview } from './chunk-F653O57X.js';
 export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
-
-export { wireScrollDividers } from './chunk-OZ6X76G5.js';
-export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
 export { TabBar } from './chunk-7AK5I7U7.js';
-export { TextField } from './chunk-36HVQ72F.js';
+export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
 export { SplitButton } from './chunk-TI2GV36S.js';
 export { StateBanner } from './chunk-2FW7D4IG.js';
-export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
-export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { SummaryRow } from './chunk-K67XBCHG.js';
+export { RadioGroup } from './chunk-OHPYT2BH.js';
 export { createSearchFieldModel } from './chunk-CIAUILRR.js';
 export { SegmentedControl } from './chunk-LZUUUHNH.js';
 export { Select } from './chunk-ZX2QQJXD.js';
 
-export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
 export { MessageComposer } from './chunk-4OV272LF.js';
-export { RadioGroup } from './chunk-OHPYT2BH.js';
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+export { ListActionRow } from './chunk-2J7XKAZX.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-S3DCRI2M.js';
+export { closeDialog, openDialog } from './chunk-3OP66VXU.js';
 
+export { EditorFrame } from './chunk-V6N3YLTM.js';
 export { EmptyState } from './chunk-B53PS2LE.js';
 export { FileDropZone, FilePickerTrigger } from './chunk-KDQZ3E5C.js';
 export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
 export { Grid } from './chunk-KCS6NJ3O.js';
 
-export { ListActionRow } from './chunk-JCCN3U6X.js';
-export { ContentItem } from './chunk-5USKCWGL.js';
+export { ContentItem } from './chunk-3KFMLOTH.js';
 export { ContentSwap } from './chunk-EIET4QLK.js';
 export { CornerStatus } from './chunk-G3J7JDP6.js';
 export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
@@ -48,33 +50,35 @@ export { ChoiceChips } from './chunk-ITUQC4FW.js';
 export { ColumnTrack } from './chunk-QYMJHS4K.js';
 export { Combobox } from './chunk-BKUMG2KB.js';
 export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
-export { BackdropImage } from './chunk-SCDWURBO.js';
-export { Button } from './chunk-KPINJHIC.js';
+export { BackdropImage } from './chunk-5CLMV5YU.js';
+export { Button } from './chunk-PS24PVR6.js';
 export { Switch } from './chunk-LTBVP6VN.js';
 export { Row } from './chunk-AMIHGFLP.js';
 export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
+
+
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
 export { ToolbarText } from './chunk-EKHDLBRP.js';
 export { ListHeader } from './chunk-NR6O74ST.js';
 export { FieldLabel, Text } from './chunk-7K6U6FCN.js';
 export { ListInsetControl } from './chunk-AN5IWMTM.js';
 export { ListInsetText } from './chunk-S4Y3YTAI.js';
-export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
-export { FloatingToolbar } from './chunk-S3ECMF23.js';
-export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
-
+export { ListItem, ListItemLink } from './chunk-3WWX2O4G.js';
 
 
 export { Skeleton } from './chunk-CVD5IZGB.js';
+export { FloatingToolbar } from './chunk-S3ECMF23.js';
 export { DisclosureArrow } from './chunk-TKNVL53O.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 export { Toolbar } from './chunk-ZN7KUMPY.js';
-export { Pane } from './chunk-HQZG3OFL.js';
+export { Pane } from './chunk-XRZSK2WC.js';
 
 export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
 export { List } from './chunk-NB6POCFH.js';
 
 
+
 export { LoadingSpinner } from './chunk-WVS6CUCT.js';
 export { Badge } from './chunk-RMWNO6BA.js';
 export { CheckboxGroup } from './chunk-HU5IHXCI.js';

package/dist/list-action-row.js

@@ -1,4 +1,5 @@
-export { ListActionRow } from './chunk-JCCN3U6X.js';
+export { ListActionRow } from './chunk-2J7XKAZX.js';
+
 
 
 

package/dist/list-detail-dialog.d.ts

@@ -4,9 +4,10 @@ import { CssLength } from './css-values.js';
 import { SplitViewListWidth } from './split-view.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/list-detail-dialog.js

@@ -1,6 +1,6 @@
-import { SplitView } from './chunk-P7EJ4CAD.js';
-import { DialogSurface } from './chunk-6CDILXF4.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+import { SplitView } from './chunk-ETFP7HAR.js';
+import { DialogSurface } from './chunk-S3DCRI2M.js';
+export { closeDialog, openDialog } from './chunk-3OP66VXU.js';
 
 
 
@@ -9,7 +9,8 @@ import { ToolbarText } from './chunk-EKHDLBRP.js';
 
 import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 import { Toolbar } from './chunk-ZN7KUMPY.js';
-import { Pane } from './chunk-HQZG3OFL.js';
+import { Pane } from './chunk-XRZSK2WC.js';
+
 
 
 

package/dist/list-detail-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as app-owned summary copy. The detail's `description` describes the\n   * selection, not the dialog, so it is not wired automatically.\n   */\n  describedBy?: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  describedBy,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={describedBy}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2HA,IAAM,kBAAA,GAAyC,EAAE,IAAA,EAAM,GAAA,EAAK,aAAa,GAAA,EAAI;AAE7E,SAAS,WAAW,UAAA,EAAoB;AACtC,EAAA,uBACE,GAAA,CAAC,uBAAoB,UAAA,EAAW,YAAA,EAAa,QAAM,IAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,cAAY,UAAA,EAAY,mBAAA,EAAkB,IAC9D,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAM,CAAA,EAAG,IAAA,EAAK,GAAA,EAAI,CAAA,EAChC,CAAA,EACF,CAAA;AAEJ;AAaO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,YAAA,GAAe,KAAA;AAAA,EACf,SAAA,GAAY,MAAA;AAAA,EACZ,UAAA,GAAa,OAAA;AAAA,EACb,YAAA,GAAe,KAAA;AAAA,EACf,IAAA,GAAO,OAAA;AAAA,EACP,cAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,KAAA,GAAQ,WAAW,UAAU,CAAA;AACnC,EAAA,MAAM,QAAQ,OAAA,mBACZ,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,MACT,KAAA;AAAA,MACA,OAAA,EAAO,IAAA;AAAA,MACP,YAAA;AAAA,MACA,WAAW,IAAA,CAAK,KAAA;AAAA,MAChB,aAAa,MAAA,CAAO,KAAA;AAAA,MACpB,SAAA;AAAA,MACA,YAAA,EAAc;AAAA,QACZ,IAAA,EAAM;AAAA,UACJ,OAAA,EAAS;AAAA,YACP,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,IAAA,CAAK,OAAA;AAAA,cACL;AAAA,aAAA,EACH;AAAA,WAEJ;AAAA,UACA,QAAQ,IAAA,CAAK;AAAA,SACf;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,OAAA,EAAS;AAAA,YACP,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,MAAA,CAAO,OAAA;AAAA,cACP;AAAA,aAAA,EACH;AAAA,WAEJ;AAAA,UACA,QAAQ,MAAA,CAAO;AAAA;AACjB,OACF;AAAA,MACA,MAAM,IAAA,CAAK,OAAA;AAAA,MACX,QAAQ,MAAA,CAAO;AAAA;AAAA,GACjB,mBAEA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,MACT,KAAA;AAAA,MACA,WAAW,IAAA,CAAK,KAAA;AAAA,MAChB,aAAa,MAAA,CAAO,KAAA;AAAA,MACpB,SAAA,EAAW,KAAK,KAAA,IAAS,kBAAA;AAAA,MACzB,IAAA,kBACE,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAO,IAAA,CAAK,KAAA;AAAA,UACZ,MAAA,kBACE,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,OAAO,IAAA,CAAK,KAAA;AAAA,cACZ,OAAA,kBAAS,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,KAAK,KAAA,EAAO,CAAA;AAAA,cACxC,UAAU,IAAA,CAAK;AAAA;AAAA,WACjB;AAAA,UAEF,QAAQ,IAAA,CAAK,MAAA;AAAA,UAEZ,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,OACR;AAAA,MAEF,MAAA,kBACE,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAO,MAAA,CAAO,KAAA;AAAA,UACd,MAAA,kBACE,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,OAAO,MAAA,CAAO,KAAA;AAAA,cACd,OAAA,kBACE,GAAA;AAAA,gBAAC,WAAA;AAAA,gBAAA;AAAA,kBACC,MAAM,MAAA,CAAO,KAAA;AAAA,kBACb,aAAa,MAAA,CAAO,WAAA;AAAA,kBACpB,IAAA,EAAK,QAAA;AAAA,kBACL,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,kBACT,YAAA,EAAc;AAAA;AAAA,eAChB;AAAA,cAEF,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,gBAAA,MAAA,CAAO,OAAA;AAAA,gBACP;AAAA,eAAA,EACH;AAAA;AAAA,WAEJ;AAAA,UAEF,QAAQ,MAAA,CAAO,MAAA;AAAA,UAEd,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV;AAAA,GAEJ;AAEF,EAAA,uBACE,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA,EAAa,IAAA;AAAA,MACb,YAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,UAAU,YAAA,GAAe,OAAA;AAAA,MACvC,cAAA;AAAA,MACA,MAAA,EACE,UACI,MAAA,GACA,SAAA,KAAc,SACX,MAAA,IAAU,MAAA,CAAO,GAAG,CAAA,GACrB,MAAA;AAAA,MAER,SAAA,EAAW,UAAU,MAAA,GAAY,SAAA;AAAA,MACjC,cAAA,EAAgB,UAAU,MAAA,GAAY,cAAA;AAAA,MACtC,SAAA,EAAU,MAAA;AAAA,MACV,UAAA,EAAW,MAAA;AAAA,MACX,cAAA,EAAgB;AAAA,QACd,GAAG,cAAA;AAAA,QACH,oBAAA,EAAsB;AAAA,OACxB;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as app-owned summary copy. The detail's `description` describes the\n   * selection, not the dialog, so it is not wired automatically.\n   */\n  describedBy?: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  describedBy,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={describedBy}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}

package/dist/list-item.js

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

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

@@ -1,9 +1,10 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { PaneConfig, ScrollEdge, SurfaceTint } from './pane.js';
+import { PaneConfig, ScrollEdge } from './pane.js';
 import { ListConfig } from './list.js';
 import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
 

package/dist/nav-stack.d.ts

@@ -1,9 +1,10 @@
-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';
+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-CrZF95VO.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/nav-stack.js

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

package/dist/pane.d.ts

@@ -2,6 +2,8 @@ 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';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+export { a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
 
 /**
  * What clear (fully transparent) chrome fades in as content scrolls beneath
@@ -12,28 +14,6 @@ import { CssColor } from './css-values.js';
  */
 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
  * compensate for a device safe-area inset.
@@ -255,4 +235,4 @@ type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separator
  */
 declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, 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 PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, SurfaceTint };

package/dist/pane.js

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

package/dist/split-view.d.ts

@@ -1,10 +1,11 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { N as NavStackProps, a as NavStackView } from './nav-stack-CU_0dKtI.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-CrZF95VO.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/split-view.js

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