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

package/dist/index.js

@@ -1,25 +1,25 @@
 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 { 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';
@@ -28,58 +28,59 @@ export { SegmentedControl } from './chunk-NS2TBYM4.js';
 export { Select } from './chunk-ZX2QQJXD.js';
 
 export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
-export { RadioGroup } from './chunk-OHPYT2BH.js';
 export { MessageComposer } from './chunk-23PPPNH6.js';
+export { RadioGroup } from './chunk-OHPYT2BH.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-G4DRH4A5.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-N7MBGONH.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-TXRKCGT3.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 { Toolbar } from './chunk-CMLPFIC5.js';
 export { Pane } from './chunk-HQZG3OFL.js';
 
 export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
 export { List } from './chunk-OY2MXIBB.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-AZ3WT77F.js';
+import { DialogSurface } from './chunk-G4DRH4A5.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 { Toolbar } from './chunk-CMLPFIC5.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/nav-stack.js

@@ -1,4 +1,4 @@
-export { NavStack } from './chunk-ZXZAECHZ.js';
+export { NavStack } from './chunk-Z4DS77U2.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/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';
 
 
 

package/dist/split-view.js

@@ -1,4 +1,4 @@
-export { SplitView } from './chunk-FKKJHGN5.js';
+export { SplitView } from './chunk-AZ3WT77F.js';
 
 
 

package/dist/styles/anchored-surface.css

@@ -20,6 +20,9 @@
   border: 1px solid var(--kui-color-neutral-border-normal);
   border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
   color: var(--kui-color-text, inherit);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
   font: inherit;

package/dist/styles/button.css

@@ -75,6 +75,18 @@
   flex-shrink: 0;
   padding: 0;
 }
+/* fill: the button spans its parent's available inline width, as a filled
+   SplitButton does. The label stays centered and ellipsizes once it no longer
+   fits; an icon-only button that fills spans too. */
+.kui-button[data-fill="true"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.kui-button[data-fill="true"] > .kui-button__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 /* A pill: fully round ends (a circle when icon-only). */
 .kui-button[data-shape="pill"] {
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
@@ -197,6 +209,23 @@
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
+/* focusRingInset: inside an ancestor that clips overflow, the ring moves
+   inside the box. On a loud fill the ring can share the fill's hue (brand),
+   so a surface-colored line runs inside it: the ring then meets the surface
+   on both edges, as the outside ring does, whatever the fill. The line is an
+   inset shadow from the padding edge (inside the 1px border) to 3px past the
+   ring, wide enough to stay solid at a fractional position; a pressed
+   toggle's inset ring lies under the focus ring meanwhile. The line paints
+   the surface the button sits on: the surface context's opaque color with
+   its translucent tint (a sunken or quiet fill) layered over it
+   (foundation.css), so it reads as a cut through the fill, not a halo. */
+.kui-button[data-focus-ring-inset="true"]:focus-visible {
+  outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 5px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current, var(--kui-color-surface));
+}
 .kui-button:is(:disabled, [aria-disabled="true"]) {
   cursor: not-allowed;
   opacity: 0.5;

package/dist/styles/catalog/components/catalog-example.css

@@ -182,32 +182,69 @@
   }
 }
 
-/* Bare specimens use a small inset to align with the surrounding examples. */
-.kui-catalog-example[data-align="glyph"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open,
-    :modal
-  ) {
+/* An aligned example insets its specimens so their visible edge lines up with
+   the label: 16px for a bare glyph, 8px for a control, and 8px for a text
+   trigger (whose own 8px inset plus 1px border then puts its text on the
+   label's). The inset is a grid column rather than a margin on each specimen:
+   the label and note span the full width while every specimen sits in the
+   inset column, so a percentage width — a full-width field, a fill-width
+   Select, a full-width or control-sized frame — resolves against that column
+   and ends on the example's inline-end edge instead of running past it by the
+   inset. Specimens keep their own width caps, and top-layer popovers and modal
+   dialogs ignore grid placement. */
+.kui-catalog-example:is(
+  [data-align="glyph"],
+  [data-align="inline-control"],
+  [data-align="text-trigger"]
+) {
+  display: grid;
+  grid-template-columns: var(--kui-catalog-example-align) minmax(0, 1fr);
+  align-content: start;
+  align-items: start;
+  justify-items: start;
+  column-gap: 0;
+}
+
+.kui-catalog-example[data-align="glyph"] {
   --kui-catalog-example-align: 1rem;
-  margin-inline-start: var(--kui-catalog-example-align);
 }
 
-.kui-catalog-example[data-align="inline-control"]
-  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
-    :popover-open,
-    :modal
-  ) {
+.kui-catalog-example:is(
+  [data-align="inline-control"],
+  [data-align="text-trigger"]
+) {
   --kui-catalog-example-align: 0.5rem;
-  margin-inline-start: var(--kui-catalog-example-align);
 }
 
-/* A trigger's text lines up with the example label's: the trigger's own
-   inset (8px plus its 1px border) follows this 8px offset. */
-.kui-catalog-example[data-align="text-trigger"]
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
+  > * {
+  grid-column: 2;
+}
+
+/* The column is the whole inset: a specimen's own start margin (a ListItem's
+   8px list inset) does not stack on it. Top-layer surfaces keep their
+   centering margins. */
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
   > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
     :popover-open,
     :modal
   ) {
-  --kui-catalog-example-align: 0.5rem;
-  margin-inline-start: var(--kui-catalog-example-align);
+  margin-inline-start: 0;
+}
+
+.kui-catalog-example:is(
+    [data-align="glyph"],
+    [data-align="inline-control"],
+    [data-align="text-trigger"]
+  )
+  > :is([data-catalog-example-label], [data-catalog-example-note]) {
+  grid-column: 1 / -1;
 }

package/dist/styles/checkbox-group.css

@@ -0,0 +1,63 @@
+/* CheckboxGroup: the group label, the choices (each a Kerf Checkbox, which
+   draws its own box, label, and hint), and hint and error text below. It is
+   laid out exactly like a RadioGroup: each box sits on the group's
+   inline-start edge and stacked choices sit 8px apart, the 28px pitch
+   checkboxes and radios share. */
+.kui-checkbox-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.2;
+}
+.kui-checkbox-group[data-size="compact"] {
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* The label matches every Kerf form control's label (RadioGroup's too). */
+.kui-checkbox-group__label {
+  display: block;
+  float: none;
+  margin-block-end: 0.375rem;
+  padding: 0;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+.kui-checkbox-group__choices {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+}
+.kui-checkbox-group[data-orientation="horizontal"]
+  .kui-checkbox-group__choices {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: 1.5rem;
+}
+.kui-checkbox-group__hint,
+.kui-checkbox-group__error {
+  display: block;
+  margin-block-start: 0.4375rem;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-checkbox-group[data-size="compact"]
+  :is(.kui-checkbox-group__hint, .kui-checkbox-group__error) {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+.kui-checkbox-group__error {
+  color: var(--kui-color-danger-on-quiet);
+}
+.kui-checkbox-group__hint + .kui-checkbox-group__error {
+  margin-block-start: 0;
+}

package/dist/styles/checkbox.css

@@ -1,6 +1,7 @@
-/* Checkbox: a drawn box beside its label, with hint and error text on the
-   label's column. The native input sits invisibly over the box, so pointer,
-   keyboard, touch exploration, and forms all reach the real control. */
+/* Checkbox: a drawn box beside its label, with hint and error text directly
+   under the label on its column, as a grouped choice hint sits. The native
+   input sits invisibly over the box, so pointer, keyboard, touch
+   exploration, and forms all reach the real control. */
 .kui-checkbox {
   --_kui-checkbox-box: 1.25rem;
   --_kui-checkbox-gap: 0.5rem;
@@ -91,7 +92,6 @@
 .kui-checkbox__hint,
 .kui-checkbox__error {
   display: block;
-  margin-block-start: 0.4375rem;
   padding-inline-start: calc(
     var(--_kui-checkbox-box) + var(--_kui-checkbox-gap)
   );
@@ -106,8 +106,9 @@
 .kui-checkbox__error {
   color: var(--kui-color-danger-on-quiet);
 }
-.kui-checkbox__hint + .kui-checkbox__error {
-  margin-block-start: 0;
+/* Inside a CheckboxGroup an invalid group marks every box. */
+.kui-checkbox-group[data-invalid] .kui-checkbox__box {
+  border-color: var(--kui-color-danger-border-loud);
 }
 @media (forced-colors: active) {
   .kui-checkbox__box {