@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

package/dist/color-picker.d.ts

@@ -60,22 +60,47 @@ interface ColorPickerProps {
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-/** The labels, accessible names, and maximum of each channel field per mode. */
+/**
+ * The labels, accessible names, maximum, and spoken unit of each channel per
+ * mode; the mode's sliders and fields both follow it.
+ */
 declare const COLOR_PICKER_CHANNELS: Record<ColorPickerMode, readonly {
     short: string;
     name: string;
     max: number;
+    unit: '' | '%' | '°';
 }[]>;
 /** The rounded channel values a mode shows for an HSV color. */
 declare function colorPickerChannels(mode: ColorPickerMode, hsv: Hsva): number[];
+/** One channel slider's attributes; see {@link colorPickerSlider}. */
+interface ColorPickerSliderState {
+    max: number;
+    value: string;
+    label: string;
+    valueText: string;
+    style: string;
+}
+/**
+ * The attributes of one channel slider for a mode's exact channel values:
+ * its range, value, accessible name and spoken value, and an inline style
+ * with the track gradient of the colors that channel produces while the
+ * others hold (the full rainbow for the HSL and HSB hue) and the color under
+ * the thumb.
+ * `undefined` for a slot the mode does not use.
+ */
+declare function colorPickerSlider(mode: ColorPickerMode, index: number, values: readonly number[]): ColorPickerSliderState | undefined;
 /** 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
+ * A full color picker panel: a saturation and brightness area; a slider for
+ * each channel of the color model (red, green, and blue; hue, saturation, and
+ * lightness or brightness; or one gray level), each track painting the colors
+ * that channel produces while the others hold (the hue track the full
+ * rainbow); 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
@@ -85,4 +110,4 @@ declare function colorPickerStyle(hsv: Hsva): string;
  */
 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 };
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, type ColorPickerSliderState, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle };

package/dist/color-picker.js

@@ -1,4 +1,4 @@
-export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerStyle } from './chunk-EKBMUXFV.js';
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle } from './chunk-3Z7N2NAZ.js';
 
 
 

package/dist/disclosure.d.ts

@@ -3,10 +3,12 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 /**
  * The Disclosure's surface: `plain` (default) on the surrounding surface,
- * `framed` with the standard neutral border, or `sunken` on the lowered,
- * textured work surface with a border.
+ * `framed` with the standard neutral border, `sunken` on the lowered,
+ * textured work surface with a border, or `embedded` inside owner chrome such
+ * as a `ContentItem`: no margin, border, or padding of its own and a compact
+ * summary row, so the arrow sits on the owner's content inset.
  */
-type DisclosureAppearance = 'plain' | 'framed' | 'sunken';
+type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';
 /**
  * Application `data-*` identity on the `<details>` root, such as `data-key`;
  * the Disclosure's own configuration attributes stay protected.
@@ -31,6 +33,11 @@ interface DisclosureProps {
      * where opening one closes the others (the native `<details name>`).
      */
     name?: string;
+    /**
+     * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome
+     * that already owns the content-item inset, such as a `ContentItem`, and
+     * give it content that draws no inset of its own (`Text flush`).
+     */
     appearance?: DisclosureAppearance;
     /**
      * A `data-action` value on the `<details>` root, for a delegated listener of
@@ -48,7 +55,9 @@ interface DisclosureProps {
  * Content a person shows and hides under a summary row: a native `<details>`
  * with a `<summary>` that carries a `DisclosureArrow` and the title, on the
  * shared content-item geometry (8px inline margin, a 1px border, 8px
- * padding, the rounded radius). Keyboard and screen-reader behavior is the
+ * padding, the rounded radius). `appearance="embedded"` drops that geometry
+ * for a Disclosure inside owner chrome (a `ContentItem`) that already insets
+ * it. Keyboard and screen-reader behavior is the
  * platform's: the summary is a button that Enter and Space toggle, and it
  * reports its expanded state. Disclosures sharing a `name` form an accordion.
  */

package/dist/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/disclosure/disclosure.tsx"],"names":[],"mappings":";;;;;;AAmBA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA2CM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,YAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,aAAA,EAAa,YAAA;AAAA,MACb,IAAA;AAAA,MACA,MAAM,IAAA,IAAQ,MAAA;AAAA,MACd,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,OAAM,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,IAAA,EAAY,CAAA;AAAA,0BAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC1C,WAAW,MAAA,GAAY,IAAA,uBACrB,MAAA,EAAA,EAAK,KAAA,EAAM,0BAA0B,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EAEjD,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAS;AAAA;AAAA;AAAA,GACjD;AAEJ","file":"disclosure.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\n\n/**\n * The Disclosure's surface: `plain` (default) on the surrounding surface,\n * `framed` with the standard neutral border, or `sunken` on the lowered,\n * textured work surface with a border.\n */\nexport type DisclosureAppearance = 'plain' | 'framed' | 'sunken';\n\n/**\n * Application `data-*` identity on the `<details>` root, such as `data-key`;\n * the Disclosure's own configuration attributes stay protected.\n */\nexport type DisclosureRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DISCLOSURE_PROTECTED = new Set([\n  'data-component',\n  'data-appearance',\n  'data-action',\n]);\n\nexport interface DisclosureProps {\n  /** The always-visible summary: a short title for the hidden content. */\n  title: KerfUiContent | string;\n  /** A quiet line after the title in the summary, such as a count. */\n  detail?: KerfUiContent | string;\n  /** The content shown while open. */\n  children: KerfUiContent | string;\n  /**\n   * Render it open. The open state belongs to the native `<details>` once it\n   * is on the page: a person toggles it, a re-render that passes `open` opens\n   * it, and a re-render never closes it (kerf's morph leaves a `<details>`\n   * element's live `open` alone). Close it from code with `element.open = false`.\n   */\n  open?: boolean;\n  /**\n   * An exclusive group: Disclosures sharing a `name` behave as an accordion,\n   * where opening one closes the others (the native `<details name>`).\n   */\n  name?: string;\n  appearance?: DisclosureAppearance;\n  /**\n   * A `data-action` value on the `<details>` root, for a delegated listener of\n   * the native `toggle` event (it does not bubble: listen in the capture phase,\n   * for example with `delegateCapture`). `event.newState` is `open` or `closed`.\n   */\n  toggleAction?: string;\n  id?: string;\n  rootAttributes?: DisclosureRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Content a person shows and hides under a summary row: a native `<details>`\n * with a `<summary>` that carries a `DisclosureArrow` and the title, on the\n * shared content-item geometry (8px inline margin, a 1px border, 8px\n * padding, the rounded radius). Keyboard and screen-reader behavior is the\n * platform's: the summary is a button that Enter and Space toggle, and it\n * reports its expanded state. Disclosures sharing a `name` form an accordion.\n */\nexport function Disclosure({\n  title,\n  detail,\n  children,\n  open = false,\n  name,\n  appearance = 'plain',\n  toggleAction,\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DisclosureProps) {\n  return (\n    <details\n      {...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED)}\n      id={id}\n      class={`kui-disclosure ${className}`.trim()}\n      data-component=\"disclosure\"\n      data-appearance={appearance}\n      data-action={toggleAction}\n      name={name}\n      open={open || undefined}\n      slot={slot}\n    >\n      <summary class=\"kui-disclosure__summary\">\n        <DisclosureArrow open={open} />\n        <span class=\"kui-disclosure__title\">{title}</span>\n        {detail === undefined ? null : (\n          <span class=\"kui-disclosure__detail\">{detail}</span>\n        )}\n      </summary>\n      <div class=\"kui-disclosure__content\">{children}</div>\n    </details>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/disclosure/disclosure.tsx"],"names":[],"mappings":";;;;;;AAqBA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkDM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,YAAA;AAAA,EACA,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC1C,gBAAA,EAAe,YAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,aAAA,EAAa,YAAA;AAAA,MACb,IAAA;AAAA,MACA,MAAM,IAAA,IAAQ,MAAA;AAAA,MACd,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,SAAA,EAAA,EAAQ,OAAM,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,mBAAgB,IAAA,EAAY,CAAA;AAAA,0BAC7B,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC1C,WAAW,MAAA,GAAY,IAAA,uBACrB,MAAA,EAAA,EAAK,KAAA,EAAM,0BAA0B,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EAEjD,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAS;AAAA;AAAA;AAAA,GACjD;AAEJ","file":"disclosure.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\n\n/**\n * The Disclosure's surface: `plain` (default) on the surrounding surface,\n * `framed` with the standard neutral border, `sunken` on the lowered,\n * textured work surface with a border, or `embedded` inside owner chrome such\n * as a `ContentItem`: no margin, border, or padding of its own and a compact\n * summary row, so the arrow sits on the owner's content inset.\n */\nexport type DisclosureAppearance = 'plain' | 'framed' | 'sunken' | 'embedded';\n\n/**\n * Application `data-*` identity on the `<details>` root, such as `data-key`;\n * the Disclosure's own configuration attributes stay protected.\n */\nexport type DisclosureRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DISCLOSURE_PROTECTED = new Set([\n  'data-component',\n  'data-appearance',\n  'data-action',\n]);\n\nexport interface DisclosureProps {\n  /** The always-visible summary: a short title for the hidden content. */\n  title: KerfUiContent | string;\n  /** A quiet line after the title in the summary, such as a count. */\n  detail?: KerfUiContent | string;\n  /** The content shown while open. */\n  children: KerfUiContent | string;\n  /**\n   * Render it open. The open state belongs to the native `<details>` once it\n   * is on the page: a person toggles it, a re-render that passes `open` opens\n   * it, and a re-render never closes it (kerf's morph leaves a `<details>`\n   * element's live `open` alone). Close it from code with `element.open = false`.\n   */\n  open?: boolean;\n  /**\n   * An exclusive group: Disclosures sharing a `name` behave as an accordion,\n   * where opening one closes the others (the native `<details name>`).\n   */\n  name?: string;\n  /**\n   * Surface treatment; defaults to `plain`. Use `embedded` only inside chrome\n   * that already owns the content-item inset, such as a `ContentItem`, and\n   * give it content that draws no inset of its own (`Text flush`).\n   */\n  appearance?: DisclosureAppearance;\n  /**\n   * A `data-action` value on the `<details>` root, for a delegated listener of\n   * the native `toggle` event (it does not bubble: listen in the capture phase,\n   * for example with `delegateCapture`). `event.newState` is `open` or `closed`.\n   */\n  toggleAction?: string;\n  id?: string;\n  rootAttributes?: DisclosureRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Content a person shows and hides under a summary row: a native `<details>`\n * with a `<summary>` that carries a `DisclosureArrow` and the title, on the\n * shared content-item geometry (8px inline margin, a 1px border, 8px\n * padding, the rounded radius). `appearance=\"embedded\"` drops that geometry\n * for a Disclosure inside owner chrome (a `ContentItem`) that already insets\n * it. Keyboard and screen-reader behavior is the\n * platform's: the summary is a button that Enter and Space toggle, and it\n * reports its expanded state. Disclosures sharing a `name` form an accordion.\n */\nexport function Disclosure({\n  title,\n  detail,\n  children,\n  open = false,\n  name,\n  appearance = 'plain',\n  toggleAction,\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DisclosureProps) {\n  return (\n    <details\n      {...filterDataAttributes(rootAttributes, DISCLOSURE_PROTECTED)}\n      id={id}\n      class={`kui-disclosure ${className}`.trim()}\n      data-component=\"disclosure\"\n      data-appearance={appearance}\n      data-action={toggleAction}\n      name={name}\n      open={open || undefined}\n      slot={slot}\n    >\n      <summary class=\"kui-disclosure__summary\">\n        <DisclosureArrow open={open} />\n        <span class=\"kui-disclosure__title\">{title}</span>\n        {detail === undefined ? null : (\n          <span class=\"kui-disclosure__detail\">{detail}</span>\n        )}\n      </summary>\n      <div class=\"kui-disclosure__content\">{children}</div>\n    </details>\n  );\n}\n"]}

package/dist/help-tags-register.js

@@ -1,4 +1,4 @@
-import { installHelpTags } from './chunk-SQ2Q3OQI.js';
+import { installHelpTags } from './chunk-2LM3PYHA.js';
 
 
 // src/wiring/help-tags-register.ts

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { Button, ButtonContent, ButtonEmphasis, ButtonLabel, ButtonOptions, ButtonProps, ButtonRootAttributes, ButtonShape, ButtonSize, ButtonTone, ButtonType } from './button.js';
 export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
 export { PopupMenu, PopupMenuAnchor, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt } from './popup-menu.js';
-export { SplitButton, SplitButtonProps, SplitButtonTone } from './split-button.js';
+export { SplitButton, SplitButtonProps, SplitButtonShape, SplitButtonTone } from './split-button.js';
 export { Toolbar, ToolbarConfig, ToolbarPosition, ToolbarProps } from './toolbar.js';
 export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupExpandedOverflow, ToolbarControlGroupMaterial, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTileTone, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
 export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
@@ -27,6 +27,7 @@ export { Skeleton, SkeletonProps } from './skeleton.js';
 export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } from './state-banner.js';
 export { Checkbox, CheckboxProps, CheckboxRootAttributes, CheckboxSize } from './checkbox.js';
 export { wireCheckboxes } from './wire-checkboxes.js';
+export { CheckboxGroup, CheckboxGroupChoice, CheckboxGroupName, CheckboxGroupOptions, CheckboxGroupOrientation, CheckboxGroupProps, CheckboxGroupRootAttributes, CheckboxGroupSize } from './checkbox-group.js';
 export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSelectionMode, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
 export { readChoiceChips, wireChoiceChips } from './wire-choice-chips.js';
 export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';

package/dist/index.js

@@ -1,85 +1,86 @@
 export { reorderTabs, wireTabBars } from './chunk-T74YB76U.js';
 export { wireTextFields } from './chunk-KC6WUSNS.js';
 export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
 export { wireMessageComposers } from './chunk-HTERKONR.js';
 export { wireOverlaySheets } from './chunk-4RECPEHI.js';
 export { wireResizableRegions } from './chunk-GS2QD3N7.js';
 export { wireSearchFields } from './chunk-UMNHJSIO.js';
-export { wireComboboxes } from './chunk-GCAK23PU.js';
+export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
+export { wireComboboxes } from './chunk-MVKHSAKE.js';
 export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
 export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
 export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
-export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
 export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
 
 export { wireScrollDividers } from './chunk-OZ6X76G5.js';
 export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
-export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
 export { TabBar } from './chunk-RFLW4FPL.js';
-export { TextField } from './chunk-WU57BYYM.js';
+export { TextField } from './chunk-YVZCKXR3.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
-export { SplitButton } from './chunk-WJKHLOP5.js';
+export { SplitButton } from './chunk-TI2GV36S.js';
 export { StateBanner } from './chunk-2FW7D4IG.js';
 export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
 export { SunkenPanel } from './chunk-D5RGM3XA.js';
 export { createSearchFieldModel } from './chunk-CIAUILRR.js';
-export { SegmentedControl } from './chunk-NS2TBYM4.js';
+export { SegmentedControl } from './chunk-LZUUUHNH.js';
 export { Select } from './chunk-ZX2QQJXD.js';
 
 export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
+export { MessageComposer } from './chunk-4OV272LF.js';
 export { RadioGroup } from './chunk-OHPYT2BH.js';
-export { MessageComposer } from './chunk-23PPPNH6.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
+export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+
+export { EmptyState } from './chunk-B53PS2LE.js';
 export { FileDropZone, FilePickerTrigger } from './chunk-KDQZ3E5C.js';
 export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
 export { Grid } from './chunk-KCS6NJ3O.js';
 
-export { ListActionRow } from './chunk-DF2YKGIX.js';
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-TAHR457X.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
-
+export { ListActionRow } from './chunk-JCCN3U6X.js';
+export { ContentItem } from './chunk-5USKCWGL.js';
 export { ContentSwap } from './chunk-EIET4QLK.js';
 export { CornerStatus } from './chunk-G3J7JDP6.js';
 export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
-export { EmptyState } from './chunk-B53PS2LE.js';
+export { Chip } from './chunk-LMHN2TJL.js';
 export { ChoiceChips } from './chunk-ITUQC4FW.js';
 export { ColumnTrack } from './chunk-QYMJHS4K.js';
 export { Combobox } from './chunk-BKUMG2KB.js';
-export { ContentItem } from './chunk-5USKCWGL.js';
 export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
 export { BackdropImage } from './chunk-SCDWURBO.js';
-export { Button } from './chunk-UTCAOOXU.js';
+export { Button } from './chunk-KPINJHIC.js';
 export { Switch } from './chunk-LTBVP6VN.js';
 export { Row } from './chunk-AMIHGFLP.js';
 export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
-export { ListHeader } from './chunk-ECFCAKWE.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
+export { ToolbarText } from './chunk-EKHDLBRP.js';
+export { ListHeader } from './chunk-NR6O74ST.js';
+export { FieldLabel, Text } from './chunk-7K6U6FCN.js';
 export { ListInsetControl } from './chunk-AN5IWMTM.js';
 export { ListInsetText } from './chunk-S4Y3YTAI.js';
 export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
-export { FieldLabel, Text } from './chunk-7K6U6FCN.js';
 export { FloatingToolbar } from './chunk-S3ECMF23.js';
-export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-7W3GKMN4.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
 
 
 
-export { ToolbarText } from './chunk-EKHDLBRP.js';
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
 export { Skeleton } from './chunk-CVD5IZGB.js';
 export { DisclosureArrow } from './chunk-TKNVL53O.js';
-export { ToolbarActionLink, ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+export { Toolbar } from './chunk-ZN7KUMPY.js';
 export { Pane } from './chunk-HQZG3OFL.js';
 
 export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
-export { List } from './chunk-OY2MXIBB.js';
+export { List } from './chunk-NB6POCFH.js';
 
-export { Toolbar } from './chunk-CMLPFIC5.js';
 
 export { LoadingSpinner } from './chunk-WVS6CUCT.js';
 export { Badge } from './chunk-RMWNO6BA.js';
+export { CheckboxGroup } from './chunk-HU5IHXCI.js';
 export { Checkbox } from './chunk-C26Q6P4Q.js';
 export { LucideIcon } from './chunk-HJXVVFBT.js';
 export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
 
-export { Chip } from './chunk-N7MBGONH.js';
 
 //# sourceMappingURL=index.js.map

package/dist/list-action-row.js

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

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

@@ -70,6 +70,12 @@ interface ListDetailDialogProps {
     id: string;
     /** The dialog's accessible name. */
     label: string;
+    /**
+     * Id of the element whose text is the dialog's accessible description,
+     * such as app-owned summary copy. The detail's `description` describes the
+     * selection, not the dialog, so it is not wired automatically.
+     */
+    describedBy?: string;
     list: ListDetailDialogList;
     detail: ListDetailDialogDetail;
     /**
@@ -112,6 +118,6 @@ interface ListDetailDialogProps {
  * stack's back control dispatches `nav-back`). Built from `DialogSurface`,
  * `SplitView`, and `Pane`.
  */
-declare function ListDetailDialog({ id, label, list, detail, compact, detailActive, backLabel, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, rootAttributes, className, slot, }: ListDetailDialogProps): kerfjs.SafeHtml;
+declare function ListDetailDialog({ id, label, describedBy, list, detail, compact, detailActive, backLabel, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, rootAttributes, className, slot, }: ListDetailDialogProps): kerfjs.SafeHtml;
 
 export { ListDetailDialog, type ListDetailDialogDetail, type ListDetailDialogList, type ListDetailDialogProps, type ListDetailDialogRootAttributes };

package/dist/list-detail-dialog.js

@@ -1,19 +1,19 @@
-import { SplitView } from './chunk-FKKJHGN5.js';
-import { DialogSurface } from './chunk-TAHR457X.js';
+import { SplitView } from './chunk-P7EJ4CAD.js';
+import { DialogSurface } from './chunk-6CDILXF4.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 
-import { ToolbarText } from './chunk-EKHDLBRP.js';
 
+import { ToolbarText } from './chunk-EKHDLBRP.js';
 
 
-import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
 import { Pane } from './chunk-HQZG3OFL.js';
 
 
 
 
-import { Toolbar } from './chunk-CMLPFIC5.js';
 
 
 import { LucideIcon } from './chunk-HJXVVFBT.js';
@@ -29,6 +29,7 @@ function closeGroup(closeLabel) {
 function ListDetailDialog({
   id,
   label,
+  describedBy,
   list,
   detail,
   compact = false,
@@ -138,6 +139,7 @@ function ListDetailDialog({
     {
       id,
       label,
+      describedBy,
       withoutHeader: true,
       lightDismiss,
       closeLabel,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as app-owned summary copy. The detail's `description` describes the\n   * selection, not the dialog, so it is not wired automatically.\n   */\n  describedBy?: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  describedBy,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={describedBy}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}

package/dist/list-header.d.ts

@@ -12,6 +12,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
     'data-divider'?: never;
     'data-inline'?: never;
     'data-width'?: never;
+    'data-wrap'?: never;
     'data-indicator-tone'?: never;
     'data-toggle'?: never;
 }>;
@@ -33,6 +34,12 @@ interface ListHeaderBaseProps {
     inline?: boolean;
     /** Fill the available row or shrink-wrap while retaining normal header geometry. */
     width?: 'fill' | 'content';
+    /**
+     * Wrap a long label onto further lines instead of truncating it to one
+     * ellipsized line. Default false. Use it where the whole label must stay
+     * readable in a narrow column, such as a specimen or form-section heading.
+     */
+    wrap?: boolean;
     indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
@@ -93,6 +100,6 @@ type ListHeaderIndicatorProps = {
     status?: SafeHtml | undefined;
 };
 type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
-declare function ListHeader({ label, size, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
+declare function ListHeader({ label, size, headingLevel, count, countLabel, badge, status, density, divider, inline, width, wrap, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
 
 export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -1,4 +1,4 @@
-export { ListHeader } from './chunk-ECFCAKWE.js';
+export { ListHeader } from './chunk-NR6O74ST.js';
 
 
 

package/dist/list.d.ts

@@ -121,6 +121,12 @@ interface ListProps {
     /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
     controlInsets?: Sides;
     className?: string;
+    /**
+     * The list's id, so app code can address it: name it as a
+     * `wireScrollDividers` scroller (with a `Toolbar` above it as its chrome),
+     * or find it in tests.
+     */
+    id?: string;
     /**
      * Safe `data-*`, `aria-*`, and structural `role` metadata (a named drop
      * `region`, `aria-busy`); List-owned structural attributes remain
@@ -138,6 +144,6 @@ interface ListProps {
  */
 type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
 /** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
-declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
+declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, contentWidth, contentAlign, dividerSides, textInsets, controlInsets, className, id, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
 
 export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListContentWidth, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };

package/dist/list.js

@@ -1,4 +1,4 @@
-export { List } from './chunk-OY2MXIBB.js';
+export { List } from './chunk-NB6POCFH.js';
 
 
 

package/dist/message-composer.js

@@ -1,4 +1,4 @@
-export { MessageComposer } from './chunk-23PPPNH6.js';
+export { MessageComposer } from './chunk-4OV272LF.js';
 
 
 

package/dist/nav-stack.js

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

package/dist/popup-menu-register.js

@@ -1,5 +1,5 @@
-import { installPopupMenus } from './chunk-C3RLKKFQ.js';
-import { installHelpTags } from './chunk-SQ2Q3OQI.js';
+import { installPopupMenus } from './chunk-EYDXFOSH.js';
+import { installHelpTags } from './chunk-2LM3PYHA.js';
 
 
 

package/dist/popup-menu.d.ts

@@ -98,7 +98,11 @@ type PopupMenuProps = PopupMenuTrigger & {
     /** Trigger icon, typically a `LucideIcon`, before any visible text. */
     icon?: KerfUiContent;
     items: readonly PopupMenuEntry[];
-    /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */
+    /**
+     * Where the menu opens relative to its trigger, or to its anchor point for
+     * a `context` menu (`top-start` opens above the point). Defaults to
+     * `bottom-start`.
+     */
     placement?: PopupMenuPlacement;
     /** Show the disclosure caret after the trigger content. Defaults to true. */
     caret?: boolean;
@@ -112,13 +116,19 @@ type PopupMenuProps = PopupMenuTrigger & {
 type PopupMenuElement = HTMLElement;
 /**
  * Open a PopupMenu at viewport pointer coordinates. A `context` menu rendered
- * without `anchor` moves its invisible anchor there (a menu rendered with
- * `anchor` opens with `openPopupMenu` instead). A button-triggered menu (such
+ * without `anchor` moves its invisible anchor there and opens at its
+ * `placement` (a menu rendered with `anchor` opens with `openPopupMenu`
+ * instead). A button-triggered menu (such
  * as a `ListActionRow` trailing menu) opens `bottom-start` from the point,
  * like a context menu, for this opening only; its next opening returns to its
- * trigger and placement. Needs the `/register` entry.
+ * trigger and placement. `options.placement` sets the placement at the point
+ * for this opening instead (`top-start` sits above it, say), for either kind
+ * of menu; flipping, shifting, and the height cap still apply. Needs the
+ * `/register` entry.
  */
-declare function openPopupMenuAt(menu: PopupMenuElement, x: number, y: number): void;
+declare function openPopupMenuAt(menu: PopupMenuElement, x: number, y: number, options?: {
+    placement?: PopupMenuPlacement;
+}): void;
 /**
  * Open a PopupMenu from its trigger, or a context PopupMenu at the `anchor`
  * it was rendered with (or the point a previous `openPopupMenuAt` set).

package/dist/popup-menu.js

@@ -1,4 +1,4 @@
-export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-7W3GKMN4.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
 
 
 

package/dist/segmented-control.d.ts

@@ -25,9 +25,11 @@ interface SegmentedControlProps<Value extends string = string> {
     className?: string;
     /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */
     placeholder?: boolean;
+    /** Disable the whole control: every segment is disabled and dimmed, the selection stays visible, and the group reports `aria-disabled`. A choice's own `disabled` still disables just that segment. */
+    disabled?: boolean;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, disabled, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };

package/dist/segmented-control.js

@@ -1,3 +1,3 @@
-export { SegmentedControl } from './chunk-NS2TBYM4.js';
+export { SegmentedControl } from './chunk-LZUUUHNH.js';
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/select-register.js

@@ -1,7 +1,7 @@
-import { installPopupMenus } from './chunk-C3RLKKFQ.js';
-import { installHelpTags } from './chunk-SQ2Q3OQI.js';
+import { installPopupMenus } from './chunk-EYDXFOSH.js';
+import { installHelpTags } from './chunk-2LM3PYHA.js';
 import { summarizeSelection } from './chunk-TUID42UE.js';
-import { followAnchor, positionPopup } from './chunk-PE2KPZDW.js';
+import { followAnchor, positionPopup } from './chunk-HDXUHLTQ.js';
 
 
 // src/components/forms/select/internal/select-element.ts

package/dist/split-button.d.ts

@@ -2,11 +2,15 @@ import { SafeHtml } from 'kerfjs';
 
 /** The loud fill the whole split button paints. */
 type SplitButtonTone = 'brand' | 'neutral' | 'success' | 'warning' | 'danger';
+/** Corner shape: the shared `rounded` control radius (default) or a full `pill`, as on `Button`. */
+type SplitButtonShape = 'rounded' | 'pill';
 type SplitButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-tone'?: never;
     'data-fill'?: never;
     'data-busy'?: never;
+    'data-shape'?: never;
+    'data-focus-ring-inset'?: never;
 }>;
 interface SplitButtonProps {
     /** Visible primary label. */
@@ -31,6 +35,14 @@ interface SplitButtonProps {
     tone?: SplitButtonTone;
     /** Span the full width of the parent instead of sizing to the label. */
     fill?: boolean;
+    /** Corner shape (default `rounded`); `pill` fully rounds both outer ends. */
+    shape?: SplitButtonShape;
+    /**
+     * Keep each half's focus ring inside its box when an ancestor clips
+     * overflow. The inset ring is two-tone, a surface-colored line inside the
+     * ring color, so it stays visible on every loud fill.
+     */
+    focusRingInset?: boolean;
     /** Show work in progress: a spinner replaces the icon and the primary is `aria-busy`. */
     busy?: boolean;
     /** Disable the primary half. */
@@ -52,6 +64,6 @@ interface SplitButtonProps {
  * technology directly; the application opens its own menu from the options
  * action and owns the running state.
  */
-declare function SplitButton({ label, action, icon, accessibleLabel, optionsLabel, optionsAction, optionsExpanded, optionsPopup, optionsControls, tone, fill, busy, disabled, optionsDisabled, title, className, rootAttributes, slot, }: SplitButtonProps): SafeHtml;
+declare function SplitButton({ label, action, icon, accessibleLabel, optionsLabel, optionsAction, optionsExpanded, optionsPopup, optionsControls, tone, fill, shape, focusRingInset, busy, disabled, optionsDisabled, title, className, rootAttributes, slot, }: SplitButtonProps): SafeHtml;
 
-export { SplitButton, type SplitButtonProps, type SplitButtonTone };
+export { SplitButton, type SplitButtonProps, type SplitButtonShape, type SplitButtonTone };

package/dist/split-button.js

@@ -1,4 +1,4 @@
-export { SplitButton } from './chunk-WJKHLOP5.js';
+export { SplitButton } from './chunk-TI2GV36S.js';