@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.9

package/dist/index.js

@@ -1,25 +1,25 @@
-export { ValueTable, ValueTableRow } from './chunk-PONXLV5U.js';
+export { wireTokenSearchFields } from './chunk-2RJBFNB6.js';
+export { ValueTable, ValueTableRow } from './chunk-37T3VNIZ.js';
 export { wireResizableRegions } from './chunk-AQNKJRFH.js';
 export { reorderTabs, wireTabBars } from './chunk-MQIZAD4A.js';
-export { wireTokenSearchFields } from './chunk-2RJBFNB6.js';
 export { StateBanner } from './chunk-I7INRJO4.js';
 export { TabBar } from './chunk-MBR3TYNL.js';
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
-export { MenuHeader } from './chunk-H6URQGJI.js';
-export { MenuItem } from './chunk-YKUUZPED.js';
-export { PanelHeader } from './chunk-TZNCCM5H.js';
-export { Toolbar } from './chunk-DAFFDO33.js';
-export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
-export { ToolbarText } from './chunk-KJYXOTG3.js';
+export { PanelHeader } from './chunk-2TS7ZSYX.js';
+export { ToolbarText } from './chunk-RUNWEPR4.js';
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
 export { SegmentedControl } from './chunk-YGN7OMLT.js';
-export { Select } from './chunk-LC3YSAZC.js';
 export { AppTab } from './chunk-2Z5TWHKQ.js';
-export { DisclosureArrow } from './chunk-56RJXPHG.js';
+export { Select } from './chunk-LC3YSAZC.js';
+export { ListItem } from './chunk-L4OKFDJY.js';
+export { Toolbar } from './chunk-DAFFDO33.js';
+export { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
 export { EmptyState } from './chunk-WVPYVDXY.js';
 export { LoadingSpinner } from './chunk-55DATV3A.js';
+export { ListActionRow } from './chunk-7JB7VPRI.js';
+export { ListHeader } from './chunk-W5EQ3HYQ.js';
+export { DisclosureArrow } from './chunk-56RJXPHG.js';
 export { LucideIcon } from './chunk-W2FK7ZNY.js';
-export { MenuActionRow } from './chunk-3YD6ZNRA.js';
 
 export { Skeleton } from './chunk-B24C4A6T.js';
 

package/dist/{menu-action-row.d.ts → list-action-row.d.ts}

@@ -1,6 +1,6 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
@@ -10,7 +10,7 @@ type MenuActionRowRootAttributes = Readonly<Record<`data-${string}`, string | un
     'data-selected'?: never;
     'data-pressed'?: never;
 }>;
-type MenuActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
@@ -19,7 +19,7 @@ type MenuActionRowTrailingAttributes = Readonly<Record<`data-${string}`, string
     'aria-controls'?: string;
     'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
 }>;
-interface MenuActionRowProps {
+interface ListActionRowProps {
     /** Visible dormant content for the primary button. Must not contain interactive descendants. */
     label: string | SafeHtml;
     /** Decorative dormant content for the primary button. Must not contain interactive descendants. */
@@ -44,9 +44,9 @@ interface MenuActionRowProps {
     trailingActionTitle?: string;
     className?: string;
     style?: string;
-    rootAttributes?: MenuActionRowRootAttributes;
-    trailingActionAttributes?: MenuActionRowTrailingAttributes;
+    rootAttributes?: ListActionRowRootAttributes;
+    trailingActionAttributes?: ListActionRowTrailingAttributes;
 }
-declare function MenuActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: MenuActionRowProps): SafeHtml;
+declare function ListActionRow({ label, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, className, style, rootAttributes, trailingActionAttributes }: ListActionRowProps): SafeHtml;
 
-export { MenuActionRow, type MenuActionRowProps };
+export { ListActionRow, type ListActionRowProps };

package/dist/list-action-row.js

@@ -0,0 +1,5 @@
+export { ListActionRow } from './chunk-7JB7VPRI.js';
+
+
+
+//# sourceMappingURL=list-action-row.js.map

package/dist/list-action-row.js.map

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

package/dist/{menu-header.d.ts → list-header.d.ts}

@@ -1,20 +1,20 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-has-badge'?: never;
     'data-has-count'?: never;
     'data-toggle'?: never;
 }>;
-type MenuHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-action'?: never;
     popoverTarget?: string;
     popoverTargetAction?: 'toggle' | 'show' | 'hide';
     'aria-controls'?: string;
     'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';
 }>;
-interface MenuHeaderBaseProps {
+interface ListHeaderBaseProps {
     label: string;
     action?: string;
     actionLabel?: string;
@@ -25,10 +25,10 @@ interface MenuHeaderBaseProps {
     toggle?: boolean;
     /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */
     placeholder?: boolean;
-    rootAttributes?: MenuHeaderRootAttributes;
-    triggerAttributes?: MenuHeaderTriggerAttributes;
+    rootAttributes?: ListHeaderRootAttributes;
+    triggerAttributes?: ListHeaderTriggerAttributes;
 }
-type MenuHeaderIndicatorProps = {
+type ListHeaderIndicatorProps = {
     count: number;
     countLabel: string;
     badge?: never;
@@ -37,7 +37,7 @@ type MenuHeaderIndicatorProps = {
     countLabel?: never;
     badge?: SafeHtml;
 };
-type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;
-declare function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: MenuHeaderProps): SafeHtml;
+type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps;
+declare function ListHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes }: ListHeaderProps): SafeHtml;
 
-export { MenuHeader, type MenuHeaderProps };
+export { ListHeader, type ListHeaderProps };

package/dist/list-header.js

@@ -0,0 +1,7 @@
+export { ListHeader } from './chunk-W5EQ3HYQ.js';
+
+
+
+
+
+//# sourceMappingURL=list-header.js.map

package/dist/list-header.js.map

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

package/dist/{menu-item.d.ts → list-item.d.ts}

@@ -1,6 +1,6 @@
 import { SafeHtml } from 'kerfjs';
 
-type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-action'?: never;
     'data-item-id'?: never;
@@ -8,7 +8,7 @@ type MenuItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
     'data-multiline'?: never;
     'data-state'?: never;
 }>;
-interface MenuItemProps {
+interface ListItemProps {
     label: string | SafeHtml;
     icon?: SafeHtml;
     trailing?: SafeHtml;
@@ -26,8 +26,8 @@ interface MenuItemProps {
     tabIndex?: number;
     /** Render the row as an unanimated loading skeleton, disabling its action. */
     placeholder?: boolean;
-    rootAttributes?: MenuItemRootAttributes;
+    rootAttributes?: ListItemRootAttributes;
 }
-declare function MenuItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: MenuItemProps): SafeHtml;
+declare function ListItem({ label, icon, trailing, selected, action, itemId, className, style, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, rootAttributes }: ListItemProps): SafeHtml;
 
-export { MenuItem, type MenuItemProps };
+export { ListItem, type ListItemProps };

package/dist/list-item.js

@@ -0,0 +1,5 @@
+export { ListItem } from './chunk-L4OKFDJY.js';
+
+
+
+//# sourceMappingURL=list-item.js.map

package/dist/list-item.js.map

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

package/dist/nav-stack.js

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

package/dist/panel-header.d.ts

@@ -1,4 +1,5 @@
 import { SafeHtml } from 'kerfjs';
+import { HeadingLevel } from './toolbar-text.js';
 
 interface PanelHeaderProps {
     title: string;
@@ -8,6 +9,13 @@ interface PanelHeaderProps {
     icon?: SafeHtml;
     iconClassName?: string;
     actions?: SafeHtml;
+    /**
+     * Expose the title as a heading landmark (`role="heading"` + `aria-level`). Set it
+     * for a PAGE or view heading so screen-reader heading navigation works and the view
+     * has a primary heading; omit it (the default) for a dialog title, which is instead
+     * referenced via `aria-labelledby={titleId}` and needs no heading landmark.
+     */
+    headingLevel?: HeadingLevel;
     /** Render the title and summary as unanimated loading skeletons, keeping the icon and actions. */
     placeholder?: boolean;
 }
@@ -23,6 +31,6 @@ interface PanelHeaderProps {
  * is passed straight into the toolbar's trailing zone; the app supplies whatever
  * trailing controls it needs (typically a `ToolbarControlGroup`).
  */
-declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, placeholder }: PanelHeaderProps): SafeHtml;
+declare function PanelHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, headingLevel, placeholder }: PanelHeaderProps): SafeHtml;
 
 export { PanelHeader, type PanelHeaderProps };

package/dist/panel-header.js

@@ -1,4 +1,4 @@
-export { PanelHeader } from './chunk-TZNCCM5H.js';
+export { PanelHeader } from './chunk-2TS7ZSYX.js';
 
 
 

package/dist/split-view.d.ts

@@ -31,7 +31,7 @@ interface SplitViewProps {
     className?: string;
 }
 /**
- * A list-detail (master-detail) split. On roomy classes it shows both panes side
+ * A list-detail split. On roomy classes it shows both panes side
  * by side with an optional resizable separator; on compact classes it collapses
  * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the
  * resizable wiring with `wireResizableRegions` and the compact back with

package/dist/split-view.js

@@ -1,4 +1,4 @@
-import { NavStack } from './chunk-N3SUXLLS.js';
+import { NavStack } from './chunk-BLK3UEEI.js';
 
 import { ResizableRegion } from './chunk-M5JRI6MN.js';
 

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail (master-detail) split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}
+{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}