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

package/dist/chunk-FDZNYD4C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/combobox/wiring/wire-comboboxes.ts"],"names":[],"mappings":"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","file":"chunk-FDZNYD4C.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst INPUT = '.kui-combobox__input';\n\n/** A committed combobox value. */\nexport interface ComboboxCommit {\n  id: string;\n  value: string;\n  /** True when the value matched no suggestion (the person created it). */\n  created: boolean;\n  /** The field's input; clear or keep its text after applying the commit. */\n  input: HTMLInputElement;\n}\n\nexport interface WireComboboxesOptions {\n  onCommit: (commit: ComboboxCommit) => void;\n  /** Characters that commit the typed text besides Enter. Default `[',']`. */\n  commitKeys?: readonly string[];\n}\n\ninterface Parts {\n  field: HTMLElement;\n  input: HTMLInputElement;\n  listbox: HTMLElement;\n  create: HTMLElement | null;\n}\n\n// `Combobox` renders the input inside its field with its listbox, and every\n// suggestion option with `data-value`, so the lookups below cannot miss.\nfunction partsOf(input: HTMLInputElement): Parts {\n  const field = input.closest<HTMLElement>('[data-component=\"combobox\"]')!;\n  const listbox = field.querySelector<HTMLElement>('[role=\"listbox\"]')!;\n  return {\n    field,\n    input,\n    listbox,\n    create: listbox.querySelector<HTMLElement>('[data-create]'),\n  };\n}\n\nconst visibleOptions = (parts: Parts) =>\n  [...parts.listbox.querySelectorAll<HTMLElement>('[role=\"option\"]')].filter(\n    (option) => !option.hidden,\n  );\n\nconst matches = (option: HTMLElement, text: string) =>\n  option.textContent!.toLowerCase().includes(text) ||\n  option.dataset.value!.toLowerCase().includes(text);\n\nfunction setActive(parts: Parts, option: HTMLElement | null) {\n  for (const item of parts.listbox.querySelectorAll('[role=\"option\"]'))\n    item.setAttribute('aria-selected', String(item === option));\n  if (option) {\n    parts.input.setAttribute('aria-activedescendant', option.id);\n    option.scrollIntoView?.({ block: 'nearest' });\n  } else parts.input.removeAttribute('aria-activedescendant');\n}\n\nfunction activeOption(parts: Parts): HTMLElement | null {\n  const id = parts.input.getAttribute('aria-activedescendant');\n  return id\n    ? parts.listbox.querySelector<HTMLElement>(`#${CSS.escape(id)}`)\n    : null;\n}\n\nfunction close(parts: Parts) {\n  parts.listbox.hidden = true;\n  parts.input.setAttribute('aria-expanded', 'false');\n  setActive(parts, null);\n}\n\n/** Filter the suggestions to the typed text and show the create option. */\nfunction update(parts: Parts) {\n  const typed = parts.input.value.trim();\n  const text = typed.toLowerCase();\n  let exact = false;\n  for (const option of parts.listbox.querySelectorAll<HTMLElement>(\n    '[role=\"option\"]:not([data-create])',\n  )) {\n    option.hidden = text !== '' && !matches(option, text);\n    if (option.dataset.value!.toLowerCase() === text) exact = true;\n  }\n  if (parts.create) {\n    parts.create.hidden = typed === '' || exact;\n    parts.create.dataset.value = typed;\n    // A create option exists only when the field has a create label.\n    parts.create.textContent = parts.field.dataset.createLabel!.replaceAll(\n      '{value}',\n      typed,\n    );\n  }\n  const options = visibleOptions(parts);\n  parts.listbox.hidden = options.length === 0;\n  parts.input.setAttribute('aria-expanded', String(options.length > 0));\n  if (!options.includes(activeOption(parts)!)) setActive(parts, null);\n}\n\n/**\n * Wire every `Combobox` below root: typing filters the suggestions (and offers\n * to create the typed text), ArrowDown/ArrowUp move the active option, Enter or\n * a commit key (comma by default) commits the active option or the typed text,\n * a click commits an option, and Escape or leaving the field closes the list.\n * Typed text that matches no suggestion commits only when the field offers\n * creation; otherwise Enter commits the first matching suggestion. Dispose with the owning application.\n */\nexport function wireComboboxes(\n  root: Root,\n  { onCommit, commitKeys = [','] }: WireComboboxesOptions,\n): () => void {\n  const commit = (parts: Parts, active: HTMLElement | null) => {\n    // Without a create option, Enter on partial text takes the first match.\n    const option =\n      active ?? (parts.create ? null : (visibleOptions(parts)[0] ?? null));\n    const typed = parts.input.value.trim();\n    // Callers commit only with an option or non-empty typed text.\n    const value = option ? option.dataset.value! : typed;\n    const suggestion = [\n      ...parts.listbox.querySelectorAll<HTMLElement>(\n        '[role=\"option\"]:not([data-create])',\n      ),\n    ].find((item) => item.dataset.value!.toLowerCase() === value.toLowerCase());\n    const created = !suggestion;\n    if (created && !parts.create) return;\n    close(parts);\n    onCommit({\n      id: parts.field.dataset.comboboxId!,\n      value: suggestion?.dataset.value ?? value,\n      created,\n      input: parts.input,\n    });\n  };\n  const inputOf = (event: Event) =>\n    event.target instanceof HTMLInputElement && event.target.matches(INPUT)\n      ? event.target\n      : null;\n  const onInput = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) update(parts);\n  };\n  const onFocus = onInput;\n  const onKeyDown = (event: Event) => {\n    const keyboard = event as KeyboardEvent;\n    const input = inputOf(keyboard);\n    const parts = input && partsOf(input);\n    if (!parts || keyboard.isComposing) return;\n    const options = visibleOptions(parts);\n    const current = activeOption(parts);\n    const index = current ? options.indexOf(current) : -1;\n    if (keyboard.key === 'ArrowDown' || keyboard.key === 'ArrowUp') {\n      keyboard.preventDefault();\n      if (parts.listbox.hidden) update(parts);\n      const open = visibleOptions(parts);\n      if (open.length === 0) return;\n      const step = keyboard.key === 'ArrowDown' ? 1 : -1;\n      const next =\n        index < 0\n          ? step > 0\n            ? 0\n            : open.length - 1\n          : (index + step + open.length) % open.length;\n      setActive(parts, open[next]!);\n    } else if (keyboard.key === 'Enter' || commitKeys.includes(keyboard.key)) {\n      if (!parts.input.value.trim() && !current) return;\n      keyboard.preventDefault();\n      commit(parts, current);\n    } else if (keyboard.key === 'Escape' && !parts.listbox.hidden) {\n      keyboard.preventDefault();\n      close(parts);\n    }\n  };\n  const onPointerDown = (event: Event) => {\n    const option =\n      event.target instanceof Element\n        ? event.target.closest<HTMLElement>('.kui-combobox__option')\n        : null;\n    const input = option\n      ?.closest('[data-component=\"combobox\"]')\n      ?.querySelector<HTMLInputElement>(INPUT);\n    const parts = input && partsOf(input);\n    if (!option || !parts) return;\n    // Keep focus in the field; commit on the press itself.\n    event.preventDefault();\n    commit(parts, option);\n  };\n  const onFocusOut = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) close(parts);\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('focusin', onFocus);\n  root.addEventListener('keydown', onKeyDown);\n  root.addEventListener('pointerdown', onPointerDown);\n  root.addEventListener('focusout', onFocusOut);\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('focusin', onFocus);\n    root.removeEventListener('keydown', onKeyDown);\n    root.removeEventListener('pointerdown', onPointerDown);\n    root.removeEventListener('focusout', onFocusOut);\n  };\n}\n"]}

package/dist/{chunk-XKZPBRU7.js → chunk-FOQK4F3L.js}

@@ -1,8 +1,9 @@
-import { withWordBreaks } from './chunk-7QQ3HE47.js';
+import { PopupMenu } from './chunk-PBT3CPPY.js';
+import { withWordBreaks, nativeDraggable } from './chunk-4LOK4634.js';
 import { Skeleton } from './chunk-Y43B6DS3.js';
 import { LoadingSpinner } from './chunk-YOKEL75M.js';
 import { remify, em } from './chunk-U657IHFB.js';
-import { filterDataAttributes, filterControlAttributes } from './chunk-LAZLBC2Q.js';
+import { filterDataAttributes, filterControlAttributes } from './chunk-KH4KEMSP.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -17,7 +18,9 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-trailing-visibility",
   "data-state",
   "data-selected",
-  "data-pressed"
+  "data-pressed",
+  "data-dragging",
+  "data-drop-position"
 ]);
 var PROTECTED_TRAILING_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-component",
@@ -44,12 +47,16 @@ function ListActionRow({
   disabled = false,
   tabIndex,
   placeholder = false,
+  draggable,
+  dragging = false,
+  dropPosition,
   trailingAction,
   trailingActionLabel,
   trailingActionIcon,
   trailingActionDisabled = false,
   trailingActionTitle,
   trailingActionVisibility = "always",
+  trailingMenu,
   className = "",
   rootAttributes = {},
   trailingActionAttributes = {},
@@ -80,6 +87,9 @@ function ListActionRow({
       "data-selected": String(selected),
       "data-pressed": pressed === void 0 ? void 0 : String(pressed),
       "data-placeholder": placeholder ? "true" : void 0,
+      draggable: nativeDraggable(draggable, placeholder),
+      "data-dragging": dragging ? "true" : void 0,
+      "data-drop-position": dropPosition,
       "aria-busy": placeholder || busy ? "true" : void 0,
       slot,
       children: [
@@ -110,7 +120,17 @@ function ListActionRow({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(
+        trailingMenu ? /* @__PURE__ */ jsx(
+          PopupMenu,
+          {
+            label: trailingMenu.label,
+            icon: trailingMenu.icon,
+            items: trailingMenu.items,
+            placement: trailingMenu.placement ?? "bottom-end",
+            caret: false,
+            disabled: Boolean(trailingMenu.disabled) || placeholder
+          }
+        ) : /* @__PURE__ */ jsx(
           "button",
           {
             ...extensionTrailingAttributes,
@@ -132,4 +152,4 @@ function ListActionRow({
 
 export { ListActionRow };
 
-//# sourceMappingURL=chunk-XKZPBRU7.js.map
+//# sourceMappingURL=chunk-FOQK4F3L.js.map

package/dist/chunk-FOQK4F3L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-action-row/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-FOQK4F3L.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport {\n  PopupMenu,\n  type PopupMenuEntry,\n  type PopupMenuPlacement,\n} from '../../actions/popup-menu/popup-menu.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-trailing-visibility',\n  'data-state',\n  'data-selected',\n  'data-pressed',\n  'data-dragging',\n  'data-drop-position',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-kui-disabled',\n]);\n\ntype ListActionRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-trailing-visibility'?: never;\n    'data-state'?: never;\n    'data-selected'?: never;\n    'data-pressed'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-kui-disabled'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\n/** A trailing overflow `PopupMenu` rendered as the row's sibling trailing control. */\nexport interface ListActionRowTrailingMenu {\n  /** Accessible name of the icon-only menu trigger, such as `Actions for report.json`. */\n  label: string;\n  /** Decorative trigger icon, typically a `MoreHorizontal` `LucideIcon`. */\n  icon: SafeHtml;\n  /** The menu's commands, headings, and dividers; items dispatch their own `data-action`s. */\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-end`. */\n  placement?: PopupMenuPlacement;\n  disabled?: boolean;\n}\n\ninterface ListActionRowTrailingButtonProps {\n  trailingAction: string;\n  trailingActionLabel: string;\n  /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n  trailingActionIcon: SafeHtml;\n  trailingActionDisabled?: boolean;\n  trailingActionTitle?: string;\n  trailingActionAttributes?: ListActionRowTrailingAttributes;\n  trailingMenu?: never;\n}\n\ninterface ListActionRowTrailingMenuProps {\n  /** A trailing overflow menu in place of the trailing button. Import `@kerfjs/ui/popup-menu/register` once. */\n  trailingMenu: ListActionRowTrailingMenu;\n  trailingAction?: never;\n  trailingActionLabel?: never;\n  trailingActionIcon?: never;\n  trailingActionDisabled?: never;\n  trailingActionTitle?: never;\n  trailingActionAttributes?: never;\n}\n\ninterface ListActionRowCommonProps {\n  /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n  label: string | SafeHtml;\n  description?: string | SafeHtml;\n  status?: string | SafeHtml;\n  busy?: boolean;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n  icon?: SafeHtml;\n  action: string;\n  itemId?: string;\n  selected?: boolean;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"` on the row root); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  trailingActionVisibility?: 'always' | 'interaction';\n  className?: string;\n  rootAttributes?: ListActionRowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */\nexport type ListActionRowProps = ListActionRowCommonProps &\n  (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);\n\nexport function ListActionRow({\n  label,\n  description,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  icon,\n  action,\n  itemId,\n  selected = false,\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  trailingAction,\n  trailingActionLabel,\n  trailingActionIcon,\n  trailingActionDisabled = false,\n  trailingActionTitle,\n  trailingActionVisibility = 'always',\n  trailingMenu,\n  className = '',\n  rootAttributes = {},\n  trailingActionAttributes = {},\n  slot,\n}: ListActionRowProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTrailingAttributes = filterControlAttributes(\n    trailingActionAttributes,\n    PROTECTED_TRAILING_DATA_ATTRIBUTES,\n  );\n\n  return (\n    <div\n      {...extensionRootAttributes}\n      class={`kui-list-action-row ${className}`.trim()}\n      data-component=\"list-action-row\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-trailing-visibility={trailingActionVisibility}\n      data-state={state}\n      data-selected={String(selected)}\n      data-pressed={pressed === undefined ? undefined : String(pressed)}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-list-action-row__primary\"\n        title={placeholder ? undefined : title}\n        disabled={disabled || placeholder}\n        tabindex={placeholder ? -1 : tabIndex}\n        data-kui-disabled={disabled ? 'true' : undefined}\n        data-action={placeholder ? undefined : action}\n        data-item-id={itemId}\n        aria-label={accessibleLabel}\n        aria-current={selected ? 'page' : undefined}\n        aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      >\n        {icon && (\n          <span class=\"kui-list-action-row__icon\">\n            {placeholder ? (\n              <Skeleton block width={remify(18)} height={remify(18)} />\n            ) : (\n              icon\n            )}\n          </span>\n        )}\n        <span class=\"kui-list-action-row__label\">\n          <span class=\"kui-list-action-row__primary-label\">\n            {placeholder ? (\n              <Skeleton width={em(9)} />\n            ) : multiline ? (\n              withWordBreaks(label)\n            ) : (\n              label\n            )}\n          </span>\n          {description && (\n            <span class=\"kui-list-action-row__description\">\n              {placeholder ? <Skeleton width={em(11)} /> : description}\n            </span>\n          )}\n          {(busy || status) && (\n            <span class=\"kui-list-action-row__status\">\n              {/* The busy spinner is component-owned chrome drawn from a\n                  known prop, so a placeholder keeps it live; only the status\n                  text is a value and becomes a skeleton. */}\n              {busy && <LoadingSpinner />}\n              {status && (placeholder ? <Skeleton width={em(6)} /> : status)}\n            </span>\n          )}\n        </span>\n      </button>\n      {trailingMenu ? (\n        <PopupMenu\n          label={trailingMenu.label}\n          icon={trailingMenu.icon}\n          items={trailingMenu.items}\n          placement={trailingMenu.placement ?? 'bottom-end'}\n          caret={false}\n          disabled={Boolean(trailingMenu.disabled) || placeholder}\n        />\n      ) : (\n        <button\n          {...extensionTrailingAttributes}\n          type=\"button\"\n          class=\"kui-list-action-row__trailing-action\"\n          data-action={placeholder ? undefined : trailingAction}\n          data-item-id={itemId}\n          aria-label={trailingActionLabel}\n          title={trailingActionTitle ?? trailingActionLabel}\n          disabled={trailingActionDisabled || placeholder || undefined}\n          data-kui-disabled={trailingActionDisabled ? 'true' : undefined}\n        >\n          {trailingActionIcon}\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-FL6J644M.js → chunk-GJYQ27C2.js}

@@ -1,4 +1,5 @@
-import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
 var paneProtectedAttributes = /* @__PURE__ */ new Set([
@@ -69,6 +70,7 @@ function Pane({
     contentLabel
   );
   const resolvedChromeDividers = chromeDividers ?? (appearance === "sunken" ? "always" : "scroll");
+  if (appearance === "sunken") ensureSunkenTexture();
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     header === void 0 ? null : /* @__PURE__ */ jsx(
       "header",
@@ -113,4 +115,4 @@ function Pane({
 
 export { Pane };
 
-//# sourceMappingURL=chunk-FL6J644M.js.map
+//# sourceMappingURL=chunk-GJYQ27C2.js.map

package/dist/chunk-GJYQ27C2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/pane.tsx"],"names":[],"mappings":"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","file":"chunk-GJYQ27C2.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n  'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n  'data-component',\n  'data-chrome-placement',\n  'data-chrome-dividers',\n  'data-appearance',\n  'data-deep-inset',\n  'data-outlined',\n  'data-separator-block-start',\n  'data-separator-block-end',\n  'data-separator-inline-start',\n  'data-separator-inline-end',\n  'data-safe-area-block-start',\n  'data-safe-area-block-end',\n  'data-safe-area-inline-start',\n  'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n  'block-start',\n  'block-end',\n  'inline-start',\n  'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-separator-block-start'?: never;\n    'data-separator-block-end'?: never;\n    'data-separator-inline-start'?: never;\n    'data-separator-inline-end'?: never;\n    'data-safe-area-block-start'?: never;\n    'data-safe-area-block-end'?: never;\n    'data-safe-area-inline-start'?: never;\n    'data-safe-area-inline-end'?: never;\n    'data-chrome-placement'?: never;\n    'data-chrome-dividers'?: never;\n    'data-appearance'?: never;\n    'data-deep-inset'?: never;\n    'data-outlined'?: never;\n  }\n>;\n\n/** How a Pane's header and footer relate to its scrolling content. */\nexport type PaneChromePlacement = 'fixed' | 'auto';\n\n/**\n * When a Pane draws the divider between its pinned header or footer and its\n * scrolling content: `scroll` while content is scrolled away beneath that\n * chrome, as `wireScrollDividers` reports; `always`; or `none`.\n */\nexport type PaneChromeDividers = 'scroll' | 'always' | 'none';\n\n/** Background treatment of the Pane's scrolling work surface. */\nexport type PaneAppearance = 'default' | 'sunken';\n\nexport interface PaneProps {\n  /** Optional fixed chrome above the scrolling content, arranged vertically. */\n  header?: KerfUiContent;\n  /** The pane's primary vertical, scrolling content stack. */\n  children?: KerfUiContent;\n  /** Optional fixed chrome below the scrolling content. */\n  footer?: KerfUiContent;\n  /**\n   * Whether the header and footer stay pinned around the scrolling content.\n   * `fixed` (default) always pins them. `auto` pins them while the pane is\n   * tall enough, and below 480px of height (30rem, so it scales with the text\n   * size) lets the whole pane scroll as one column, so tall chrome can never\n   * squeeze the content to nothing.\n   */\n  chromePlacement?: PaneChromePlacement;\n  /**\n   * The divider under the header and over the footer, where they meet the\n   * scrolling content. Omitted defaults to `scroll` for a plain pane and\n   * `always` for `appearance=\"sunken\"`. `scroll` shows the header's divider only\n   * while the content is scrolled down, and the footer's only while more\n   * content lies below — never when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane; unwired, neither shows. `always` shows both; `none` neither.\n   * The line is drawn inside the chrome, so no state moves the content.\n   */\n  chromeDividers?: PaneChromeDividers;\n  /** Paint the scrolling work surface with the shared lowered-surface color. */\n  appearance?: PaneAppearance;\n  /** Add 8px to every side of scrolling content (default: false). */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  /** Root semantics. Defaults to `div`. */\n  element?: PaneElement;\n  /** Scrolling content semantics. Defaults to `div`. */\n  contentElement?: PaneContentElement;\n  /** Independent logical-edge separator lines. Defaults to none. */\n  separators?: readonly PaneSeparatorSide[];\n  /**\n   * Sides on which the pane may compensate for a device safe-area inset.\n   * Defaults to every side: the pane pads its slots for each side that still\n   * reaches an unsafe screen edge, as its surrounding layout reports, while its\n   * background and separators paint through. List only the sides an app-owned\n   * layout places at a screen edge, or pass `[]` to opt out.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  id?: string;\n  /** Accessible name for a landmark root such as `aside` or `main`. */\n  label?: string;\n  /** Accessible name for a landmark scrolling slot such as `nav`. */\n  contentLabel?: string;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n  rootAttributes?: PaneRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A pane's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `Pane` for the app (a Workbench panel or work area,\n * or a CollapsiblePanel) forwards, so the app configures that pane instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type PaneConfig = Pick<\n  PaneProps,\n  | 'contentElement'\n  | 'contentLabel'\n  | 'separators'\n  | 'safeAreaEdges'\n  | 'chromeDividers'\n  | 'appearance'\n  | 'deepInset'\n  | 'tabIndex'\n  | 'outlined'\n>;\n\nfunction paneContent(\n  element: PaneContentElement,\n  children: KerfUiContent,\n  className: string,\n  label: string | undefined,\n) {\n  const attributes = {\n    class: `kui-pane__content kui-content ${className}`.trim(),\n    'aria-label': label,\n  };\n  if (element === 'main') return <main {...attributes}>{children}</main>;\n  if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n  if (element === 'section')\n    return <section {...attributes}>{children}</section>;\n  return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n  header,\n  children,\n  footer,\n  chromePlacement = 'fixed',\n  chromeDividers,\n  appearance = 'default',\n  deepInset = false,\n  tabIndex,\n  outlined = false,\n  element = 'div',\n  contentElement = 'div',\n  separators = [],\n  safeAreaEdges = allPaneSides,\n  id,\n  label,\n  contentLabel,\n  className = '',\n  headerClassName = '',\n  contentClassName = '',\n  footerClassName = '',\n  rootAttributes = {},\n  slot,\n}: PaneProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    paneProtectedAttributes,\n  );\n  const content = paneContent(\n    contentElement,\n    children,\n    contentClassName,\n    contentLabel,\n  );\n  const resolvedChromeDividers =\n    chromeDividers ?? (appearance === 'sunken' ? 'always' : 'scroll');\n  if (appearance === 'sunken') ensureSunkenTexture();\n  const body = (\n    <>\n      {header === undefined ? null : (\n        <header\n          class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n        >\n          {header}\n        </header>\n      )}\n      {content}\n      {footer === undefined ? null : (\n        <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n          {footer}\n        </footer>\n      )}\n    </>\n  );\n  const attributes = {\n    ...safeRootAttributes,\n    class: `kui-pane ${className}`.trim(),\n    id,\n    'data-component': 'pane',\n    'data-appearance': appearance === 'sunken' ? 'sunken' : undefined,\n    'data-deep-inset': deepInset ? 'true' : undefined,\n    'data-outlined': outlined ? 'true' : undefined,\n    'data-chrome-placement': chromePlacement === 'auto' ? 'auto' : undefined,\n    'data-chrome-dividers':\n      resolvedChromeDividers === 'always' || resolvedChromeDividers === 'none'\n        ? resolvedChromeDividers\n        : undefined,\n    'data-separator-block-start': String(separators.includes('block-start')),\n    'data-separator-block-end': String(separators.includes('block-end')),\n    'data-separator-inline-start': String(separators.includes('inline-start')),\n    'data-separator-inline-end': String(separators.includes('inline-end')),\n    'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n    'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n    'data-safe-area-inline-start': String(\n      safeAreaEdges.includes('inline-start'),\n    ),\n    'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n    'aria-label': label,\n    tabindex: tabIndex,\n    slot,\n  };\n\n  if (element === 'article') return <article {...attributes}>{body}</article>;\n  if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n  if (element === 'main') return <main {...attributes}>{body}</main>;\n  if (element === 'section') return <section {...attributes}>{body}</section>;\n  return <div {...attributes}>{body}</div>;\n}\n"]}

package/dist/{chunk-DL55BSQX.js → chunk-GZE2XVKC.js}

@@ -30,6 +30,9 @@ function ValueTableRow({
 function ValueTable({
   label,
   density = "default",
+  labelWidth,
+  presentation = "columns",
+  stackBelow,
   className = "",
   children,
   slot
@@ -40,6 +43,10 @@ function ValueTable({
       class: `kui-value-table ${className}`.trim(),
       "data-component": "value-table",
       "data-density": density,
+      "data-presentation": presentation,
+      "data-stack-below": stackBelow,
+      "data-label-width": labelWidth === void 0 ? void 0 : "",
+      style: labelWidth === void 0 ? void 0 : `--_kui-value-table-label-min:${labelWidth}`,
       "aria-label": label,
       slot,
       children
@@ -49,4 +56,4 @@ function ValueTable({
 
 export { ValueTable, ValueTableRow };
 
-//# sourceMappingURL=chunk-DL55BSQX.js.map
+//# sourceMappingURL=chunk-GZE2XVKC.js.map

package/dist/chunk-GZE2XVKC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/value-table/internal/value-table-row.tsx","../src/components/data-display/value-table/value-table.tsx"],"names":["jsx"],"mappings":";;;;AAgBO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACzD;AAEJ;ACFO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,UAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,cAAA,EAAc,OAAA;AAAA,MACd,mBAAA,EAAmB,YAAA;AAAA,MACnB,kBAAA,EAAkB,UAAA;AAAA,MAClB,kBAAA,EAAkB,UAAA,KAAe,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACzD,KAAA,EACE,UAAA,KAAe,MAAA,GACX,MAAA,GACA,gCAAgC,UAAU,CAAA,CAAA;AAAA,MAEhD,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-GZE2XVKC.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from '../../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../../feedback/skeleton/skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n  slot,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width={em(10)} /> : value}</dd>\n    </div>\n  );\n}\n","import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\nexport {\n  ValueTableRow,\n  type ValueTableRowProps,\n} from './internal/value-table-row.js';\n\n/** `columns` keeps label and value side by side; `stacked` puts each value under its label. */\nexport type ValueTablePresentation = 'columns' | 'stacked';\n/** Table width below which columns stack: `compact` is 512px, `narrow` 576px. */\nexport type ValueTableStackBelow = 'compact' | 'narrow';\n\nexport interface ValueTableProps {\n  label: string;\n  /** Compact row spacing for metadata-dense surfaces. */\n  density?: 'default' | 'compact';\n  /**\n   * Minimum width of the label column (for example `px(160)`); the value then\n   * takes the rest of the row. Omitted, label and value share the row by\n   * content.\n   */\n  labelWidth?: CssLength;\n  /** Side-by-side columns (default) or values stacked under their labels. */\n  presentation?: ValueTablePresentation;\n  /**\n   * Stack the rows only while the table itself is narrower than the preset,\n   * so one table reads as columns in a wide dialog and stacks on a phone.\n   */\n  stackBelow?: ValueTableStackBelow;\n  className?: string;\n  children: KerfUiContent;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function ValueTable({\n  label,\n  density = 'default',\n  labelWidth,\n  presentation = 'columns',\n  stackBelow,\n  className = '',\n  children,\n  slot,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      data-density={density}\n      data-presentation={presentation}\n      data-stack-below={stackBelow}\n      data-label-width={labelWidth === undefined ? undefined : ''}\n      style={\n        labelWidth === undefined\n          ? undefined\n          : `--_kui-value-table-label-min:${labelWidth}`\n      }\n      aria-label={label}\n      slot={slot}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}

package/dist/{chunk-YP2G67S7.js → chunk-HO6FU3G7.js}

@@ -1,5 +1,5 @@
 import { Skeleton } from './chunk-Y43B6DS3.js';
-import { Badge } from './chunk-J3AWE5I4.js';
+import { Badge } from './chunk-U6QYTMDB.js';
 import { LucideIcon } from './chunk-UKKRPP56.js';
 import { em } from './chunk-U657IHFB.js';
 import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
@@ -219,4 +219,4 @@ function Select(props) {
 
 export { Select };
 
-//# sourceMappingURL=chunk-YP2G67S7.js.map
+//# sourceMappingURL=chunk-HO6FU3G7.js.map

package/dist/{chunk-YP2G67S7.js.map → chunk-HO6FU3G7.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-YP2G67S7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.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';\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 (the native select placeholder). */\n  placeholderText?: string;\n  /** Supporting text shown below the control and associated with its combobox. */\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  /** 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 click, Escape, or focus leaving; the closed\n * control 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 combobox'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// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n  return (\n    <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n      <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n    </svg>\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    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 triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        data-presentation={presentation}\n        data-size={size}\n        data-trigger-width={triggerWidth}\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        aria-busy=\"true\"\n        style={\n          labelMaxWidth === undefined\n            ? undefined\n            : `--kui-select-label-max-width:${labelMaxWidth}px`\n        }\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__placeholder-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          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <SelectChevron />\n          </span>\n        </span>\n        {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n      </div>\n    );\n  }\n  // A multiple Select summarizes its choices in the display text instead of\n  // leading with one selected icon.\n  const selected = multiple\n    ? undefined\n    : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n  const chosenCount = iconTrigger\n    ? choices.filter(\n        (choice) => !choice.disabled && values.includes(choice.value),\n      ).length\n    : 0;\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>, index: number) => (\n    <>\n      {/* Web Awesome sets the divider's role and aria-orientation on its\n          host once, so a template that omits them would lose them to the\n          next kerf re-render's morph for good. Render them explicitly, with\n          the orientation it reflects (see the wa-select note below). */}\n      {choice.separatorBefore && index > 0 && (\n        <wa-divider\n          orientation=\"horizontal\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n        />\n      )}\n      <wa-option\n        value={choice.value}\n        selected={multiple && !choice.disabled && values.includes(choice.value)}\n        disabled={choice.disabled}\n        title={choice.disabled ? choice.disabledReason : undefined}\n      >\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\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  // Web Awesome names its shadow combobox from the label, not the host's\n  // aria-label. Keep ariaLabel-only names available without visible chrome.\n  // A multiple Select's value is its selected options (the value attribute\n  // holds only one string), kept in sync by @kerfjs/ui/select/register.\n  // size/appearance/placement are Web Awesome's defaults, which it reflects\n  // onto the host; rendering them keeps a re-render's morph from stripping\n  // them and forcing a Lit update to put them back.\n  return (\n    <wa-select\n      size=\"m\"\n      appearance=\"outlined\"\n      placement=\"bottom\"\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      data-presentation={presentation}\n      data-size={size}\n      data-trigger-width={triggerWidth}\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      name={name}\n      label={label || ariaLabel}\n      aria-label={ariaLabel}\n      multiple={multiple}\n      value={multiple ? undefined : values[0]}\n      placeholder={placeholderText}\n      hint={hint}\n      disabled={disabled}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-select-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {iconTrigger && (\n        <>\n          {/* The accessible name ends with the chosen labels, which\n              @kerfjs/ui/select/register writes into the summary. */}\n          <span slot=\"label\" data-key={`${name}:trigger-label`}>\n            {label || ariaLabel}\n            <span class=\"kui-select__name-summary\" data-morph-skip />\n          </span>\n          <span\n            data-key={`${name}:trigger-icon`}\n            slot=\"start\"\n            class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n          >\n            {triggerIcon}\n          </span>\n          {chosenCount > 0 && (\n            <Badge slot=\"end\" tone=\"info\" size=\"compact\" ariaHidden>\n              {chosenCount}\n            </Badge>\n          )}\n        </>\n      )}\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${values[0]}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\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\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n      {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n        <div\n          class=\"kui-select__actions\"\n          role=\"group\"\n          aria-label={label || ariaLabel}\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          )}\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          )}\n        </div>\n      )}\n    </wa-select>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-HO6FU3G7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.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';\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 (the native select placeholder). */\n  placeholderText?: string;\n  /** Supporting text shown below the control and associated with its combobox. */\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  /** 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 click, Escape, or focus leaving; the closed\n * control 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 combobox'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// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n  return (\n    <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n      <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n    </svg>\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    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 triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        data-presentation={presentation}\n        data-size={size}\n        data-trigger-width={triggerWidth}\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        aria-busy=\"true\"\n        style={\n          labelMaxWidth === undefined\n            ? undefined\n            : `--kui-select-label-max-width:${labelMaxWidth}px`\n        }\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__placeholder-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          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <SelectChevron />\n          </span>\n        </span>\n        {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n      </div>\n    );\n  }\n  // A multiple Select summarizes its choices in the display text instead of\n  // leading with one selected icon.\n  const selected = multiple\n    ? undefined\n    : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n  const chosenCount = iconTrigger\n    ? choices.filter(\n        (choice) => !choice.disabled && values.includes(choice.value),\n      ).length\n    : 0;\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>, index: number) => (\n    <>\n      {/* Web Awesome sets the divider's role and aria-orientation on its\n          host once, so a template that omits them would lose them to the\n          next kerf re-render's morph for good. Render them explicitly, with\n          the orientation it reflects (see the wa-select note below). */}\n      {choice.separatorBefore && index > 0 && (\n        <wa-divider\n          orientation=\"horizontal\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n        />\n      )}\n      <wa-option\n        value={choice.value}\n        selected={multiple && !choice.disabled && values.includes(choice.value)}\n        disabled={choice.disabled}\n        title={choice.disabled ? choice.disabledReason : undefined}\n      >\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\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  // Web Awesome names its shadow combobox from the label, not the host's\n  // aria-label. Keep ariaLabel-only names available without visible chrome.\n  // A multiple Select's value is its selected options (the value attribute\n  // holds only one string), kept in sync by @kerfjs/ui/select/register.\n  // size/appearance/placement are Web Awesome's defaults, which it reflects\n  // onto the host; rendering them keeps a re-render's morph from stripping\n  // them and forcing a Lit update to put them back.\n  return (\n    <wa-select\n      size=\"m\"\n      appearance=\"outlined\"\n      placement=\"bottom\"\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      data-presentation={presentation}\n      data-size={size}\n      data-trigger-width={triggerWidth}\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      name={name}\n      label={label || ariaLabel}\n      aria-label={ariaLabel}\n      multiple={multiple}\n      value={multiple ? undefined : values[0]}\n      placeholder={placeholderText}\n      hint={hint}\n      disabled={disabled}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-select-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {iconTrigger && (\n        <>\n          {/* The accessible name ends with the chosen labels, which\n              @kerfjs/ui/select/register writes into the summary. */}\n          <span slot=\"label\" data-key={`${name}:trigger-label`}>\n            {label || ariaLabel}\n            <span class=\"kui-select__name-summary\" data-morph-skip />\n          </span>\n          <span\n            data-key={`${name}:trigger-icon`}\n            slot=\"start\"\n            class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n          >\n            {triggerIcon}\n          </span>\n          {chosenCount > 0 && (\n            <Badge slot=\"end\" tone=\"info\" size=\"compact\" ariaHidden>\n              {chosenCount}\n            </Badge>\n          )}\n        </>\n      )}\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${values[0]}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\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\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n      {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n        <div\n          class=\"kui-select__actions\"\n          role=\"group\"\n          aria-label={label || ariaLabel}\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          )}\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          )}\n        </div>\n      )}\n    </wa-select>\n  );\n}\n"]}

package/dist/{chunk-3DXHNLME.js → chunk-IGTWXPTN.js}

@@ -1,6 +1,6 @@
 import { Skeleton } from './chunk-Y43B6DS3.js';
 import { em } from './chunk-U657IHFB.js';
-import { jsx } from 'kerfjs/jsx-runtime';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
 function ToolbarText({
   text,
@@ -17,7 +17,9 @@ function ToolbarText({
   maxLines = null,
   fill = false,
   slot,
-  action
+  action,
+  description,
+  descriptionId
 }) {
   const capped = wrap && maxLines != null && maxLines > 0;
   if (action !== void 0)
@@ -39,7 +41,18 @@ function ToolbarText({
         children: /* @__PURE__ */ jsx("span", { class: "kui-toolbar-text__text", children: text })
       }
     );
-  return /* @__PURE__ */ jsx(
+  const described = description !== void 0 && !placeholder;
+  const title = placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(8) }) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: "kui-toolbar-text__text",
+      id: described ? id : void 0,
+      role: described && headingLevel ? "heading" : void 0,
+      "aria-level": described && headingLevel ? String(headingLevel) : void 0,
+      children: text
+    }
+  );
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       class: `kui-toolbar-text ${className}`.trim(),
@@ -54,16 +67,20 @@ function ToolbarText({
       "data-max-lines": capped ? String(maxLines) : void 0,
       style: capped ? `--kui-toolbar-text-max-lines:${maxLines}` : void 0,
       "data-placeholder": placeholder ? "true" : void 0,
-      id,
-      role: headingLevel ? "heading" : void 0,
-      "aria-level": headingLevel ? String(headingLevel) : void 0,
+      "data-has-description": described ? "true" : void 0,
+      id: described ? void 0 : id,
+      role: headingLevel && !described ? "heading" : void 0,
+      "aria-level": headingLevel && !described ? String(headingLevel) : void 0,
       "aria-busy": placeholder ? "true" : void 0,
       slot,
-      children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(8) }) : /* @__PURE__ */ jsx("span", { class: "kui-toolbar-text__text", children: text })
+      children: [
+        title,
+        described ? /* @__PURE__ */ jsx("span", { class: "kui-toolbar-text__description", id: descriptionId, children: description }) : null
+      ]
     }
   );
 }
 
 export { ToolbarText };
 
-//# sourceMappingURL=chunk-3DXHNLME.js.map
+//# sourceMappingURL=chunk-IGTWXPTN.js.map

package/dist/chunk-IGTWXPTN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/toolbar-text/toolbar-text.tsx"],"names":[],"mappings":"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","file":"chunk-IGTWXPTN.js","sourcesContent":["import { type CssLength, em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type ToolbarTextSize =\n  'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\nexport type ToolbarTextTone = 'default' | 'dark';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n  text: string;\n  size?: ToolbarTextSize;\n  /** Use dark-toolbar foregrounds on a dark or photo-backed toolbar. */\n  tone?: ToolbarTextTone;\n  /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n  hideBelow?: CssLength;\n  /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n  showBelow?: CssLength;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n   * truncating at the space left by its siblings instead of taking only its\n   * text's width. Default false.\n   */\n  fill?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n}\n\ntype ToolbarTextWrappingProps =\n  | {\n      /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n      wrap: true;\n      maxLines?: number | null;\n    }\n  | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps &\n  (\n    | ({\n        action?: never;\n        /** Expose `role=\"heading\"` and `aria-level` on read-only text. */\n        headingLevel?: HeadingLevel;\n        /** Render an unanimated loading skeleton instead of the text. */\n        placeholder?: boolean;\n        /**\n         * Quiet, single-line supporting copy under the title (\"Changes save\n         * automatically.\"), truncating with an ellipsis. Title and description\n         * share the toolbar's control band and the same text start, with or\n         * without a leading icon group. With a description, `id` and\n         * `headingLevel` apply to the title alone, so a dialog's\n         * `aria-labelledby` names only the title.\n         */\n        description?: string;\n        /** Id for the description, for a dialog's `aria-describedby`. */\n        descriptionId?: string;\n      } & ToolbarTextWrappingProps)\n    | {\n        /** Render a native button with this delegated action; the app owns editing. */\n        action: string;\n        headingLevel?: never;\n        placeholder?: never;\n        wrap?: never;\n        maxLines?: never;\n        description?: never;\n        descriptionId?: never;\n      }\n  );\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  tone = 'default',\n  hideBelow,\n  showBelow,\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n  fill = false,\n  slot,\n  action,\n  description,\n  descriptionId,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  if (action !== undefined)\n    return (\n      <button\n        type=\"button\"\n        class={`kui-toolbar-text ${className}`.trim()}\n        data-component=\"toolbar-text\"\n        data-size={size}\n        data-hide-below={hideBelow}\n        data-show-below={showBelow}\n        data-tone={tone === 'default' ? undefined : tone}\n        data-fill={fill ? 'true' : undefined}\n        data-ellipsis={ellipsis ? undefined : 'false'}\n        data-action={action}\n        id={id}\n        slot={slot}\n      >\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      </button>\n    );\n  const described = description !== undefined && !placeholder;\n  const title = placeholder ? (\n    <Skeleton width={em(8)} />\n  ) : (\n    <span\n      class=\"kui-toolbar-text__text\"\n      id={described ? id : undefined}\n      role={described && headingLevel ? 'heading' : undefined}\n      aria-level={described && headingLevel ? String(headingLevel) : undefined}\n    >\n      {text}\n    </span>\n  );\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-hide-below={hideBelow}\n      data-show-below={showBelow}\n      data-tone={tone === 'default' ? undefined : tone}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-has-description={described ? 'true' : undefined}\n      id={described ? undefined : id}\n      role={headingLevel && !described ? 'heading' : undefined}\n      aria-level={headingLevel && !described ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {title}\n      {described ? (\n        <span class=\"kui-toolbar-text__description\" id={descriptionId}>\n          {description}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"]}

package/dist/chunk-IKS72C6P.js

@@ -0,0 +1,53 @@
+// src/shared/styles/sunken-texture.ts
+var SUNKEN_TEXTURE_PROPERTY = "--_kui-sunken-texture-generated";
+var TILE = 100;
+var MAX_OPACITY = 0.04;
+var SEED = 7;
+function random(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let value = state;
+    value = Math.imul(value ^ value >>> 15, value | 1);
+    value ^= value + Math.imul(value ^ value >>> 7, value | 61);
+    return ((value ^ value >>> 14) >>> 0) / 4294967296;
+  };
+}
+function sunkenTexturePixels() {
+  const next = random(SEED);
+  const pixels = new Uint8ClampedArray(TILE * TILE * 4);
+  for (let index = 0; index < TILE * TILE; index += 1) {
+    const u = 1 - next();
+    const v = next();
+    const gaussian = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+    const strength = Math.max(-1, Math.min(1, gaussian / 2.5));
+    const channel = strength < 0 ? 0 : 255;
+    const offset = index * 4;
+    pixels[offset] = channel;
+    pixels[offset + 1] = channel;
+    pixels[offset + 2] = channel;
+    pixels[offset + 3] = Math.round(Math.abs(strength) * MAX_OPACITY * 255);
+  }
+  return pixels;
+}
+function sunkenTextureDataUrl(doc = globalThis.document) {
+  const canvas = doc?.createElement("canvas");
+  const context = canvas?.getContext("2d");
+  if (!canvas || !context) return void 0;
+  canvas.width = TILE;
+  canvas.height = TILE;
+  const image = context.createImageData(TILE, TILE);
+  image.data.set(sunkenTexturePixels());
+  context.putImageData(image, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+function ensureSunkenTexture(doc = globalThis.document) {
+  const root = doc?.documentElement;
+  if (!root || root.style.getPropertyValue(SUNKEN_TEXTURE_PROPERTY)) return;
+  const url = sunkenTextureDataUrl(doc);
+  if (url) root.style.setProperty(SUNKEN_TEXTURE_PROPERTY, `url("${url}")`);
+}
+
+export { ensureSunkenTexture };
+
+//# sourceMappingURL=chunk-IKS72C6P.js.map

package/dist/chunk-IKS72C6P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles/sunken-texture.ts"],"names":[],"mappings":"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","file":"chunk-IKS72C6P.js","sourcesContent":["/**\n * The sunken-surface noise texture: a seeded 100×100 Gaussian grain tile,\n * drawn once per document at runtime and layered over the lowered surface by\n * `--kui-sunken-surface` (foundation.css). Nothing ships as an asset.\n */\n\n/** The private property the generated tile is stored in on `<html>`. */\nexport const SUNKEN_TEXTURE_PROPERTY = '--_kui-sunken-texture-generated';\n\n/** Tile edge in pixels; foundation.css repeats it at the same CSS size. */\nconst TILE = 100;\n/** Strongest grain opacity: the reviewed \"Gaussian 4%\" treatment. */\nconst MAX_OPACITY = 0.04;\nconst SEED = 7;\n\n/** A small deterministic PRNG (mulberry32), so every page draws the same tile. */\nfunction random(seed: number): () => number {\n  let state = seed >>> 0;\n  return () => {\n    state = (state + 0x6d2b79f5) >>> 0;\n    let value = state;\n    value = Math.imul(value ^ (value >>> 15), value | 1);\n    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);\n    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/**\n * The tile's RGBA pixels: monochrome grains, darker below and lighter above\n * the surface, with Gaussian strength clipped at 2.5σ.\n */\nexport function sunkenTexturePixels(): Uint8ClampedArray {\n  const next = random(SEED);\n  const pixels = new Uint8ClampedArray(TILE * TILE * 4);\n  for (let index = 0; index < TILE * TILE; index += 1) {\n    // Box-Muller; the first uniform is kept off zero for the logarithm.\n    const u = 1 - next();\n    const v = next();\n    const gaussian = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n    const strength = Math.max(-1, Math.min(1, gaussian / 2.5));\n    const channel = strength < 0 ? 0 : 255;\n    const offset = index * 4;\n    pixels[offset] = channel;\n    pixels[offset + 1] = channel;\n    pixels[offset + 2] = channel;\n    pixels[offset + 3] = Math.round(Math.abs(strength) * MAX_OPACITY * 255);\n  }\n  return pixels;\n}\n\n/** Draw the tile and return it as a PNG data URL, or undefined without a 2D canvas. */\nexport function sunkenTextureDataUrl(\n  doc: Document = globalThis.document,\n): string | undefined {\n  const canvas = doc?.createElement('canvas');\n  const context = canvas?.getContext('2d');\n  if (!canvas || !context) return undefined;\n  canvas.width = TILE;\n  canvas.height = TILE;\n  const image = context.createImageData(TILE, TILE);\n  image.data.set(sunkenTexturePixels());\n  context.putImageData(image, 0, 0);\n  return canvas.toDataURL('image/png');\n}\n\n/**\n * Generate the sunken texture once for a document. Sunken surfaces call this\n * as they render; it is idempotent, and on a server (no document) or without\n * a 2D canvas it does nothing, leaving the flat lowered surface.\n */\nexport function ensureSunkenTexture(\n  doc: Document | undefined = globalThis.document,\n): void {\n  const root = doc?.documentElement;\n  if (!root || root.style.getPropertyValue(SUNKEN_TEXTURE_PROPERTY)) return;\n  const url = sunkenTextureDataUrl(doc);\n  if (url) root.style.setProperty(SUNKEN_TEXTURE_PROPERTY, `url(\"${url}\")`);\n}\n"]}