@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/chunk-ZX2QQJXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-ZX2QQJXD.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport type { KerfCustomElement } from 'kerfjs/jsx-runtime';\nimport { Check } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { PopupCaretGlyph } from '../../../shared/popup/popup-glyphs.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport {\n  type CssForegroundColor,\n  em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\nimport { summarizeSelection } from './model/select-summary.js';\n\ndeclare module 'kerfjs/jsx-runtime' {\n  // Module augmentation requires the namespace form expected by the JSX runtime.\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      /** The Select root: a light-DOM form control defined by `select/register`. */\n      'kui-select': KerfCustomElement & {\n        class?: string;\n        name?: string;\n        value?: string;\n        multiple?: boolean;\n        disabled?: boolean;\n        style?: string;\n        slot?: string;\n      };\n    }\n  }\n}\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control. */\n  placeholderText?: string;\n  /** Supporting text shown below the control and announced as its description. */\n  hint?: string;\n  disabled?: boolean;\n  /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /**\n   * The widest the closed trigger grows, under any presentation; its value\n   * (or `renderSelected` content) ellipsizes inside it and the caret stays.\n   */\n  maxTriggerWidth?: CssLength;\n  /** The narrowest the closed trigger gets. */\n  minTriggerWidth?: CssLength;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside press, Escape, or Tab; the closed control\n * summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the trigger's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n/**\n * A choice's icon, in the listbox or (`selected`) in the closed trigger.\n * Rendered only for a choice that has one.\n */\nfunction ChoiceIcon<Value extends string>({\n  choice,\n  icon,\n  selected = false,\n}: {\n  choice: SelectChoice<Value>;\n  icon: LucideNode;\n  selected?: boolean;\n}) {\n  return (\n    <span\n      class={`kui-select__icon${selected ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n      aria-hidden=\"true\"\n    >\n      <LucideIcon\n        icon={icon}\n        name={\n          choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n        }\n      />\n    </span>\n  );\n}\n\nfunction Caret() {\n  return (\n    <span class=\"kui-select__caret\" aria-hidden=\"true\">\n      <PopupCaretGlyph />\n    </span>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    maxTriggerWidth,\n    minTriggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const accessibleName = label || ariaLabel;\n  const style =\n    [\n      labelMaxWidth === undefined\n        ? undefined\n        : `--kui-select-label-max-width:${labelMaxWidth}px`,\n      maxTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-max:${maxTriggerWidth}`,\n      minTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-min:${minTriggerWidth}`,\n    ]\n      .filter(Boolean)\n      .join(';') || undefined;\n  const rootData = {\n    'data-component': 'select',\n    'data-presentation': presentation,\n    'data-size': size,\n    'data-trigger-width': triggerWidth,\n    'data-trigger-max': maxTriggerWidth === undefined ? undefined : '',\n    'data-trigger-min': minTriggerWidth === undefined ? undefined : '',\n    'data-caret': caret ? undefined : 'false',\n    'data-selected-presentation': selectedPresentation,\n    'data-focus-ring-owner': focusRingOwner,\n    'data-focus-ring-inset': focusRingInset ? 'true' : undefined,\n  } as const;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        {...rootData}\n        data-placeholder=\"true\"\n        aria-busy=\"true\"\n        style={style}\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          {caret ? <Caret /> : null}\n        </span>\n        {hint && <span class=\"kui-select__hint\">{hint}</span>}\n      </div>\n    );\n  }\n  const enabledChosen = choices.filter(\n    (choice) => !choice.disabled && values.includes(choice.value),\n  );\n  const selected = multiple ? undefined : enabledChosen[0];\n  // A multiple Select summarizes its chosen labels, in choice order; an\n  // icon-only trigger (whose value text is hidden) ends its name with them.\n  const summary = multiple\n    ? summarizeSelection(enabledChosen.map((choice) => choice.label))\n    : '';\n  const triggerName =\n    iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;\n  const valueText = multiple\n    ? iconTrigger\n      ? ''\n      : summary\n    : (selected?.label ?? '');\n  const option = (choice: SelectChoice<Value>, index: number) => {\n    const chosen = !choice.disabled && values.includes(choice.value);\n    return (\n      <>\n        {choice.separatorBefore && index > 0 ? (\n          <div class=\"kui-select__separator\" role=\"separator\" />\n        ) : null}\n        <div\n          class=\"kui-select__option\"\n          role=\"option\"\n          tabindex={-1}\n          data-value={choice.value}\n          data-default-selected={chosen ? '' : undefined}\n          aria-selected={String(chosen)}\n          aria-disabled={choice.disabled ? 'true' : undefined}\n          title={choice.disabled ? choice.disabledReason : undefined}\n        >\n          <span class=\"kui-select__check\" aria-hidden=\"true\">\n            <LucideIcon icon={Check} name=\"check\" />\n          </span>\n          {choice.icon ? (\n            <ChoiceIcon choice={choice} icon={choice.icon} />\n          ) : null}\n          <span class=\"kui-select__option-label\">{choice.label}</span>\n        </div>\n      </>\n    );\n  };\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return (\n    <kui-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()}\n      {...rootData}\n      name={name}\n      value={multiple ? undefined : (selected?.value ?? '')}\n      multiple={multiple}\n      disabled={disabled}\n      style={style}\n      slot={slot}\n    >\n      {label ? (\n        <span class=\"kui-select__label\" aria-hidden=\"true\">\n          {label}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        class=\"kui-select__trigger\"\n        role=\"combobox\"\n        // Safari's default Tab order skips buttons; a select stays in it.\n        tabindex={0}\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"false\"\n        aria-label={triggerName}\n        aria-description={hint}\n        disabled={disabled}\n      >\n        {iconTrigger ? (\n          <span class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\">\n            {props.triggerIcon}\n          </span>\n        ) : selected && renderSelected ? (\n          <span class=\"kui-select__custom-selected\">\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected?.icon ? (\n          <ChoiceIcon choice={selected} icon={selected.icon} selected />\n        ) : null}\n        <span\n          class=\"kui-select__value\"\n          data-placeholder={valueText ? undefined : 'true'}\n          data-placeholder-text={placeholderText}\n        >\n          {valueText || placeholderText || ''}\n        </span>\n        {iconTrigger && enabledChosen.length > 0 ? (\n          <Badge tone=\"info\" size=\"compact\" ariaHidden>\n            {enabledChosen.length}\n          </Badge>\n        ) : null}\n        {caret ? <Caret /> : null}\n      </button>\n      {hint ? (\n        <span class=\"kui-select__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      ) : null}\n      <div class=\"kui-select__popup\" popover=\"manual\" tabindex={-1}>\n        <div\n          class=\"kui-select__listbox\"\n          role=\"listbox\"\n          aria-label={accessibleName}\n          aria-multiselectable={multiple ? 'true' : undefined}\n        >\n          {ungrouped.map(option)}\n          {groups.map((group, index) => (\n            <div\n              class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n              role=\"group\"\n              aria-label={group}\n            >\n              <span class=\"kui-select__group-title\" aria-hidden=\"true\">\n                {group}\n              </span>\n              {choices.filter((choice) => choice.group === group).map(option)}\n            </div>\n          ))}\n        </div>\n        {props.multiple && (props.selectAllLabel || props.clearLabel) ? (\n          <div\n            class=\"kui-select__actions\"\n            role=\"group\"\n            aria-label={accessibleName}\n          >\n            {props.selectAllLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"all\"\n              >\n                {props.selectAllLabel}\n              </button>\n            ) : null}\n            {props.clearLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"clear\"\n              >\n                {props.clearLabel}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </kui-select>\n  );\n}\n"]}

package/dist/{chunk-6E2H2E5A.js → chunk-ZXZAECHZ.js}

@@ -1,11 +1,11 @@
 import { ToolbarText } from './chunk-EKHDLBRP.js';
-import { paneConfigProps } from './chunk-LPHU44S3.js';
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
 import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
-import { Toolbar } from './chunk-CMLPFIC5.js';
-import { List } from './chunk-HZPHCSCS.js';
-import { Pane } from './chunk-M5KZ26VV.js';
+import { Pane } from './chunk-HQZG3OFL.js';
 import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
-import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { List } from './chunk-OY2MXIBB.js';
+import { Toolbar } from './chunk-CMLPFIC5.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { ChevronLeft } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -193,4 +193,4 @@ function NavStack({
 
 export { NavStack };
 
-//# sourceMappingURL=chunk-6E2H2E5A.js.map
+//# sourceMappingURL=chunk-ZXZAECHZ.js.map

package/dist/{chunk-6E2H2E5A.js.map → chunk-ZXZAECHZ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-6E2H2E5A.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-ZXZAECHZ.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies beneath it (default\n   * `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /**\n   * Paint the stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === 'clear',\n      )}\n      data-background={background === undefined ? undefined : ''}\n      data-kui-tint={tinted['data-kui-tint']}\n      data-kui-tint-accent={tinted['data-kui-tint-accent']}\n      style={joinStyles(\n        background === undefined\n          ? undefined\n          : `--_kui-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/collapsible-panel.js

@@ -1,5 +1,5 @@
-import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-IXLUZHGT.js';
-export { collapsiblePanelToggleIcon } from './chunk-IXLUZHGT.js';
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-FG6U7KQQ.js';
+export { collapsiblePanelToggleIcon } from './chunk-FG6U7KQQ.js';
 
 
 
@@ -8,9 +8,9 @@ export { collapsiblePanelToggleIcon } from './chunk-IXLUZHGT.js';
 
 
 
-import { LucideIcon } from './chunk-LOSRXZAH.js';
 
 
+import { LucideIcon } from './chunk-HJXVVFBT.js';
 
 
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';

package/dist/color-field.d.ts

@@ -0,0 +1,51 @@
+import * as kerfjs from 'kerfjs';
+import { ColorPickerMode } from './color-picker.js';
+import './color-swatches.js';
+import './css-values.js';
+
+/** `default` matches TextField's box; `compact` its compact size. */
+type ColorFieldSize = 'default' | 'compact';
+/** Application `data-*` metadata; the field's own markers stay protected. */
+type ColorFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorFieldProps = {
+    /** The trigger's id; it also prefixes the hint and error ids. */
+    id: string;
+    /** CSS color text; invalid text shows black. */
+    value: string;
+    /** The picker's model when it opens (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity in the picker (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /** Supporting text below the field, also its description. */
+    hint?: string;
+    /** An error below the field that marks it invalid. */
+    error?: string;
+    size?: ColorFieldSize;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    rootAttributes?: ColorFieldRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A form field for a color: a label above a trigger that shows the current
+ * color as a swatch and its hex value. Pressing it opens a ColorPicker in an
+ * AnchoredSurface anchored to the field; Escape or a press outside closes it
+ * and focus returns to the trigger. Wire `wireColorFields` from
+ * `@kerfjs/ui/wire-color-fields`; it previews edits on the trigger, reports
+ * them, and the app re-renders with the new value.
+ */
+declare function ColorField({ id, value, mode, alpha, name, form, label, ariaLabel, hint, error, size, disabled, required, className, rootAttributes, slot, }: ColorFieldProps): kerfjs.SafeHtml;
+
+export { ColorField, type ColorFieldProps, type ColorFieldRootAttributes, type ColorFieldSize };

package/dist/color-field.js

@@ -0,0 +1,92 @@
+import { parseColor, formatHex } from './chunk-TNJLNLVE.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { ChevronDown } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COLOR_FIELD_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-value",
+  "data-mode",
+  "data-alpha",
+  "data-invalid",
+  "data-color-field-id"
+]);
+function ColorField({
+  id,
+  value,
+  mode = "rgb",
+  alpha = true,
+  name,
+  form,
+  label,
+  ariaLabel,
+  hint,
+  error,
+  size = "default",
+  disabled = false,
+  required = false,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };
+  const hex = formatHex(alpha ? parsed : { ...parsed, a: 1 });
+  const describedBy = [hint === void 0 ? "" : `${id}-hint`, error ? `${id}-error` : ""].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COLOR_FIELD_PROTECTED),
+      class: `kui-color-field ${className}`.trim(),
+      "data-component": "color-field",
+      "data-color-field-id": id,
+      "data-size": size,
+      "data-value": hex,
+      "data-mode": mode,
+      "data-alpha": alpha ? "" : void 0,
+      "data-invalid": error ? "" : void 0,
+      slot,
+      children: [
+        label === void 0 ? /* @__PURE__ */ jsx("span", { id: `${id}-label`, hidden: true, children: ariaLabel }) : /* @__PURE__ */ jsxs("label", { class: "kui-color-field__label", id: `${id}-label`, for: id, children: [
+          label,
+          required ? /* @__PURE__ */ jsx("span", { class: "kui-color-field__required", "aria-hidden": "true", children: "*" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id,
+            class: "kui-color-field__trigger",
+            "aria-labelledby": `${id}-label ${id}-value`,
+            "aria-haspopup": "dialog",
+            "aria-expanded": "false",
+            "aria-describedby": describedBy,
+            "aria-invalid": error ? "true" : void 0,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-color-field__swatch",
+                  style: `--_kui-color-field-color:${hex}`,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { class: "kui-color-field__hex", id: `${id}-value`, children: hex.slice(1).toUpperCase() }),
+              /* @__PURE__ */ jsx("span", { class: "kui-color-field__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down", size: "s" }) })
+            ]
+          }
+        ),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-color-field__hint", id: `${id}-hint`, children: hint }),
+        error ? /* @__PURE__ */ jsx("span", { class: "kui-color-field__error", id: `${id}-error`, children: error }) : null,
+        name === void 0 ? null : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hex, form })
+      ]
+    }
+  );
+}
+
+export { ColorField };
+
+//# sourceMappingURL=color-field.js.map

package/dist/color-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-field/color-field.tsx"],"names":[],"mappings":"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","file":"color-field.js","sourcesContent":["import { ChevronDown } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { ColorPickerMode } from '../color-picker/color-picker.js';\nimport { formatHex, parseColor } from '../color-picker/model/color-model.js';\n\n/** `default` matches TextField's box; `compact` its compact size. */\nexport type ColorFieldSize = 'default' | 'compact';\n\n/** Application `data-*` metadata; the field's own markers stay protected. */\nexport type ColorFieldRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst COLOR_FIELD_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-value',\n  'data-mode',\n  'data-alpha',\n  'data-invalid',\n  'data-color-field-id',\n]);\n\nexport type ColorFieldProps = {\n  /** The trigger's id; it also prefixes the hint and error ids. */\n  id: string;\n  /** CSS color text; invalid text shows black. */\n  value: string;\n  /** The picker's model when it opens (default `rgb`). */\n  mode?: ColorPickerMode;\n  /** Offer opacity in the picker (default true). */\n  alpha?: boolean;\n  /** A form field name the hex value submits under. */\n  name?: string;\n  /** Associate the hidden input with a form outside its ancestor chain. */\n  form?: string;\n  /** Supporting text below the field, also its description. */\n  hint?: string;\n  /** An error below the field that marks it invalid. */\n  error?: string;\n  size?: ColorFieldSize;\n  disabled?: boolean;\n  required?: boolean;\n  className?: string;\n  rootAttributes?: ColorFieldRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n} & (\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string }\n);\n\n/**\n * A form field for a color: a label above a trigger that shows the current\n * color as a swatch and its hex value. Pressing it opens a ColorPicker in an\n * AnchoredSurface anchored to the field; Escape or a press outside closes it\n * and focus returns to the trigger. Wire `wireColorFields` from\n * `@kerfjs/ui/wire-color-fields`; it previews edits on the trigger, reports\n * them, and the app re-renders with the new value.\n */\nexport function ColorField({\n  id,\n  value,\n  mode = 'rgb',\n  alpha = true,\n  name,\n  form,\n  label,\n  ariaLabel,\n  hint,\n  error,\n  size = 'default',\n  disabled = false,\n  required = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColorFieldProps) {\n  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };\n  const hex = formatHex(alpha ? parsed : { ...parsed, a: 1 });\n  const describedBy =\n    [hint === undefined ? '' : `${id}-hint`, error ? `${id}-error` : '']\n      .filter(Boolean)\n      .join(' ') || undefined;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COLOR_FIELD_PROTECTED)}\n      class={`kui-color-field ${className}`.trim()}\n      data-component=\"color-field\"\n      data-color-field-id={id}\n      data-size={size}\n      data-value={hex}\n      data-mode={mode}\n      data-alpha={alpha ? '' : undefined}\n      data-invalid={error ? '' : undefined}\n      slot={slot}\n    >\n      {label === undefined ? (\n        <span id={`${id}-label`} hidden>\n          {ariaLabel}\n        </span>\n      ) : (\n        <label class=\"kui-color-field__label\" id={`${id}-label`} for={id}>\n          {label}\n          {required ? (\n            <span class=\"kui-color-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          ) : null}\n        </label>\n      )}\n      <button\n        type=\"button\"\n        id={id}\n        class=\"kui-color-field__trigger\"\n        aria-labelledby={`${id}-label ${id}-value`}\n        aria-haspopup=\"dialog\"\n        aria-expanded=\"false\"\n        aria-describedby={describedBy}\n        aria-invalid={error ? 'true' : undefined}\n        disabled={disabled}\n      >\n        <span\n          class=\"kui-color-field__swatch\"\n          style={`--_kui-color-field-color:${hex}`}\n          aria-hidden=\"true\"\n        />\n        <span class=\"kui-color-field__hex\" id={`${id}-value`}>\n          {hex.slice(1).toUpperCase()}\n        </span>\n        <span class=\"kui-color-field__chevron\" aria-hidden=\"true\">\n          <LucideIcon icon={ChevronDown} name=\"chevron-down\" size=\"s\" />\n        </span>\n      </button>\n      {hint === undefined ? null : (\n        <span class=\"kui-color-field__hint\" id={`${id}-hint`}>\n          {hint}\n        </span>\n      )}\n      {error ? (\n        <span class=\"kui-color-field__error\" id={`${id}-error`}>\n          {error}\n        </span>\n      ) : null}\n      {name === undefined ? null : (\n        <input type=\"hidden\" name={name} value={hex} form={form} />\n      )}\n    </div>\n  );\n}\n"]}

package/dist/color-picker.d.ts

@@ -0,0 +1,88 @@
+import * as kerfjs from 'kerfjs';
+import { ColorSwatch } from './color-swatches.js';
+import './css-values.js';
+
+/** Hue 0–360, saturation and value (brightness) 0–1, and alpha 0–1. */
+interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+
+/** The channel fields the picker shows: RGB, HSL, HSB (HSV), or one gray level. */
+type ColorPickerMode = 'rgb' | 'hsl' | 'hsb' | 'gray';
+/** A titled group of app-owned colors, such as "Document Colors". */
+interface ColorPickerSamples {
+    title: string;
+    swatches: readonly ColorSwatch[];
+}
+/** Application `data-*` metadata; the picker's own markers stay protected. */
+type ColorPickerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/** The delegated action every preset and sample swatch carries. */
+declare const COLOR_PICKER_SWATCH_ACTION = "kui-color-picker-swatch";
+interface ColorPickerProps {
+    /** The picker's id; it also prefixes its inner ids. */
+    id: string;
+    /** The picker's accessible name. */
+    label: string;
+    /**
+     * The color, as CSS color text (`#rrggbb[aa]`, `rgb()`, `hsl()`); invalid
+     * text shows black. The picker reports `#rrggbb`, or `#rrggbbaa` below
+     * full opacity.
+     */
+    value: string;
+    /** The channel fields shown (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity: an alpha slider and field (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /**
+     * Offer a button that samples a color from the screen, where the browser
+     * provides the EyeDropper API (default true; hidden elsewhere).
+     */
+    eyedropper?: boolean;
+    /** A preset row of swatches under the controls. */
+    presets?: readonly ColorSwatch[];
+    /** Titled groups of app-owned colors under the presets. */
+    samples?: readonly ColorPickerSamples[];
+    /**
+     * A `data-action` for an "Add to Samples" button in the controls row; the
+     * app reads the picker's current value and adds it to its samples.
+     */
+    addSampleAction?: string;
+    disabled?: boolean;
+    className?: string;
+    rootAttributes?: ColorPickerRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** The labels, accessible names, and maximum of each channel field per mode. */
+declare const COLOR_PICKER_CHANNELS: Record<ColorPickerMode, readonly {
+    short: string;
+    name: string;
+    max: number;
+}[]>;
+/** The rounded channel values a mode shows for an HSV color. */
+declare function colorPickerChannels(mode: ColorPickerMode, hsv: Hsva): number[];
+/** The area's spoken value. */
+declare function colorPickerAreaText(hsv: Hsva): string;
+/** The CSS custom properties that place the thumbs and paint the tracks. */
+declare function colorPickerStyle(hsv: Hsva): string;
+/**
+ * A full color picker panel: a saturation and brightness area, a hue slider,
+ * an optional opacity slider on a checkerboard, a color-model menu (RGB, HSL,
+ * HSB, Grayscale) with its channel fields, a hex field (8 digits below full
+ * opacity) and an opacity field, an optional screen sampler (EyeDropper), and
+ * optional preset and sample swatches. The controlled `value` renders it;
+ * wire `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` to make it
+ * interactive. The interactive surface belongs to that wiring after the first
+ * render, so a drag never fights a re-render; a new `value` from the app
+ * resynchronizes it.
+ */
+declare function ColorPicker({ id, label, value, mode, alpha, name, form, eyedropper, presets, samples, addSampleAction, disabled, className, rootAttributes, slot, }: ColorPickerProps): kerfjs.SafeHtml;
+
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, colorPickerAreaText, colorPickerChannels, colorPickerStyle };

package/dist/color-picker.js

@@ -0,0 +1,8 @@
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerStyle } from './chunk-EKBMUXFV.js';
+
+
+
+
+
+
+//# sourceMappingURL=color-picker.js.map

package/dist/color-picker.js.map

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

package/dist/color-swatches.d.ts

@@ -0,0 +1,56 @@
+import * as kerfjs from 'kerfjs';
+import { CssColor } from './css-values.js';
+
+/** `default` is a 24px swatch; `compact` is 20px. */
+type ColorSwatchesSize = 'default' | 'compact';
+/** One color in the palette. */
+interface ColorSwatch {
+    /** The submitted value, such as `#0a84ff` or `blue`. */
+    value: string;
+    /** The color's name: the swatch's accessible name and its hover hint. */
+    label: string;
+    /**
+     * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or
+     * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the
+     * no-color swatch, drawn outlined and struck through.
+     */
+    color: CssColor | 'transparent';
+}
+/** Application `data-*` metadata; the group's own markers stay protected. */
+type ColorSwatchesRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorSwatchesProps = {
+    /** The radio group name the chosen value submits under. */
+    name: string;
+    swatches: readonly ColorSwatch[];
+    /** The chosen swatch's value. */
+    value?: string;
+    size?: ColorSwatchesSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on each radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The group's id. */
+    id?: string;
+    className?: string;
+    rootAttributes?: ColorSwatchesRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A fixed palette: a group of round color swatches with no visible text, one
+ * of which is chosen. It is a native radio group, so arrow keys move the
+ * choice, Tab reaches it once, and the chosen value submits under `name`.
+ * Each swatch is named by its color's label (also its hover hint), and the
+ * chosen one wears a ring that does not rely on its hue. A `'transparent'`
+ * swatch offers "no color".
+ */
+declare function ColorSwatches({ name, swatches, value, label, ariaLabel, size, disabled, action, form, id, className, rootAttributes, slot, }: ColorSwatchesProps): kerfjs.SafeHtml;
+
+export { type ColorSwatch, ColorSwatches, type ColorSwatchesProps, type ColorSwatchesRootAttributes, type ColorSwatchesSize };

package/dist/color-swatches.js

@@ -0,0 +1,4 @@
+export { ColorSwatches } from './chunk-IO27YTL3.js';
+
+
+//# sourceMappingURL=color-swatches.js.map

package/dist/color-swatches.js.map

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

package/dist/combobox.js

@@ -1,3 +1,3 @@
-export { Combobox } from './chunk-ETCWQLJV.js';
+export { Combobox } from './chunk-BKUMG2KB.js';
 
 //# sourceMappingURL=combobox.js.map

package/dist/content-item.d.ts

@@ -24,12 +24,14 @@ type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | unde
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
+    'data-grid-row'?: never;
 }>;
 type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-appearance'?: never;
     'data-outlined'?: never;
     'data-bubble'?: never;
+    'data-grid-row'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
     'data-interactive'?: never;
@@ -91,6 +93,14 @@ type ContentItemProps = ContentItemBaseProps & ({
     disabled?: never;
     /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */
     tabIndex?: 0 | -1;
+    /**
+     * A non-selectable row of a multi-select `List` or `Grid`: renders
+     * `role="row"` around a `gridcell`, with no `aria-selected` and no
+     * Tab stop of its own, for content between selectable rows (an
+     * activity group, a "messages skipped" divider). Its controls stay
+     * reachable by Tab; arrow keys skip it.
+     */
+    gridRow?: boolean;
     /** Existing static `data-*` metadata remains available. */
     rootAttributes?: ContentItemRootAttributes;
 } | {
@@ -103,6 +113,8 @@ type ContentItemProps = ContentItemBaseProps & ({
     selected?: boolean;
     disabled?: boolean;
     tabIndex?: never;
+    /** An interactive item is already a row in a multi-select grid. */
+    gridRow?: never;
     /** Safe app metadata; interaction attributes are component-owned. */
     rootAttributes?: ContentItemInteractiveRootAttributes;
 });
@@ -111,6 +123,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, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+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;
 
 export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };

package/dist/content-item.js

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

package/dist/disclosure-arrow.js

@@ -1,4 +1,4 @@
-export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
+export { DisclosureArrow } from './chunk-TKNVL53O.js';