@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/collapsible-panel.js

@@ -1,22 +1,141 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
-import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
-import { jsx } from 'kerfjs/jsx-runtime';
-
-function collapsiblePanelToggleIcon(side, collapsed) {
-  if (side === "left") return collapsed ? { icon: PanelLeftOpen, name: "panel-left-open" } : { icon: PanelLeftClose, name: "panel-left-close" };
-  if (side === "right") return collapsed ? { icon: PanelRightOpen, name: "panel-right-open" } : { icon: PanelRightClose, name: "panel-right-close" };
-  return collapsed ? { icon: PanelBottomOpen, name: "panel-bottom-open" } : { icon: PanelBottomClose, name: "panel-bottom-close" };
-}
-function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className = "" }) {
+import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups, groupSizeFor } from './chunk-IXLUZHGT.js';
+export { collapsiblePanelToggleIcon } from './chunk-IXLUZHGT.js';
+
+
+
+
+
+
+
+
+import { LucideIcon } from './chunk-LOSRXZAH.js';
+
+
+
+
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var toggleAttributes = (panelId) => ({
+  "data-collapsible-target": panelId,
+  // Keyed, so the morph never reuses a (possibly focused) toggle's button for
+  // another control as the toggle moves between toolbars.
+  "data-key": `${panelId}-toggle`
+});
+function CollapsiblePanelToggle({
+  side,
+  collapsed,
+  action,
+  panelId,
+  label,
+  className = "",
+  slot
+}) {
   const glyph = collapsiblePanelToggleIcon(side, collapsed);
   const accessible = label ?? (collapsed ? "Expand" : "Collapse");
-  return /* @__PURE__ */ jsx("button", { type: "button", class: `kui-collapsible-panel__toggle ${className}`.trim(), "data-action": action, "data-collapsible-target": panelId, "aria-expanded": String(!collapsed), "aria-label": accessible, children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name }) });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      class: `kui-collapsible-panel__toggle ${className}`.trim(),
+      "data-action": action,
+      "data-collapsible-target": panelId,
+      "aria-expanded": String(!collapsed),
+      "aria-label": accessible,
+      slot,
+      children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+    }
+  );
 }
-function CollapsiblePanel({ id, side, collapsed = false, size, label, children, className = "" }) {
+function CollapsiblePanel({
+  id,
+  side,
+  collapsed = false,
+  size,
+  label,
+  tabIndex,
+  outlined = false,
+  children,
+  toolbar,
+  header,
+  headerList,
+  headerPlacement,
+  footer,
+  footerList,
+  bottomToolbar,
+  footerPlacement,
+  pane,
+  separator = "auto",
+  collapseMotion = "slide",
+  contentOverflow = "clip",
+  presentation = "inline",
+  restoreControl,
+  restorePosition = side === "left" ? "bottom-start" : "bottom-end",
+  className = ""
+}) {
   const sizeVar = side === "bottom" ? "--kui-collapsible-panel-height" : "--kui-collapsible-panel-width";
-  return /* @__PURE__ */ jsx("aside", { class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(), "data-component": "collapsible-panel", "data-collapsible-panel": id, "data-side": side, "data-collapsed": String(collapsed), "aria-label": label || void 0, "aria-hidden": collapsed ? "true" : void 0, style: size ? `${sizeVar}: ${size}px` : void 0, children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "aside",
+      {
+        class: `kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim(),
+        "data-component": "collapsible-panel",
+        "data-collapsible-panel": id,
+        "data-side": side,
+        "data-collapsed": String(collapsed),
+        "data-outlined": !collapsed && presentation !== "hidden" && outlined ? "true" : void 0,
+        "data-separator": separator,
+        "data-collapse-motion": collapseMotion,
+        "data-content-overflow": contentOverflow,
+        "data-presentation": presentation,
+        "aria-label": label || void 0,
+        "aria-hidden": collapsed || presentation === "hidden" ? "true" : void 0,
+        tabindex: collapsed || presentation === "hidden" ? tabIndex === void 0 ? void 0 : -1 : tabIndex,
+        inert: collapsed,
+        style: size ? `${sizeVar}: ${size}px` : void 0,
+        children: /* @__PURE__ */ jsx("div", { class: "kui-collapsible-panel__content", children: toolbar ? composedPanelBody({
+          toolbar,
+          side,
+          collapsed,
+          attributes: toggleAttributes(id),
+          pane,
+          header,
+          headerList,
+          headerPlacement,
+          footer,
+          footerList,
+          bottomToolbar,
+          footerPlacement,
+          content: children
+        }) : children })
+      }
+    ),
+    collapsed && restoreControl && presentation !== "hidden" && /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-collapsible-panel__restore",
+        "data-panel-restore": id,
+        "data-position": restorePosition,
+        children: restoreControl
+      }
+    )
+  ] });
+}
+function CollapsiblePanelRelocated({
+  panelId,
+  side,
+  collapsed,
+  toolbar,
+  density
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: relocatedPanelGroups(
+    toolbar,
+    side,
+    collapsed,
+    toggleAttributes(panelId),
+    groupSizeFor(density)
+  ) });
 }
 
-export { CollapsiblePanel, CollapsiblePanelToggle, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, CollapsiblePanelRelocated, CollapsiblePanelToggle };
 
 //# sourceMappingURL=collapsible-panel.js.map

package/dist/collapsible-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-panel.tsx"],"names":[],"mappings":";;;;AAeO,SAAS,0BAAA,CAA2B,MAA4B,SAAA,EAAsF;AAC3J,EAAA,IAAI,IAAA,KAAS,MAAA,EAAQ,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAAI,EAAE,IAAA,EAAM,cAAA,EAAgB,MAAM,kBAAA,EAAmB;AAC5I,EAAA,IAAI,IAAA,KAAS,OAAA,EAAS,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GAAI,EAAE,IAAA,EAAM,eAAA,EAAiB,MAAM,mBAAA,EAAoB;AACjJ,EAAA,OAAO,SAAA,GAAY,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GAAI,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AACjI;AAuBO,SAAS,sBAAA,CAAuB,EAAE,IAAA,EAAM,SAAA,EAAW,QAAQ,OAAA,EAAS,KAAA,EAAO,SAAA,GAAY,EAAA,EAAG,EAAgC;AAC/H,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,MAAM,UAAA,GAAa,KAAA,KAAU,SAAA,GAAY,QAAA,GAAW,UAAA,CAAA;AACpD,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,CAAA,8BAAA,EAAiC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,aAAA,EAAa,MAAA,EAAQ,yBAAA,EAAyB,OAAA,EAAS,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA,EAAG,YAAA,EAAY,UAAA,EAAY,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,KAAA,CAAM,IAAA,EAAM,IAAA,EAAM,KAAA,CAAM,MAAM,CAAA,EAAE,CAAA;AAC/P;AA4BO,SAAS,gBAAA,CAAiB,EAAE,EAAA,EAAI,IAAA,EAAM,SAAA,GAAY,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAA,GAAY,EAAA,EAAG,EAA0B;AAC9H,EAAA,MAAM,OAAA,GAAU,IAAA,KAAS,QAAA,GAAW,gCAAA,GAAmC,+BAAA;AACvE,EAAA,2BAAQ,OAAA,EAAA,EAAM,KAAA,EAAO,gDAAgD,IAAI,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,qBAAoB,wBAAA,EAAwB,EAAA,EAAI,aAAW,IAAA,EAAM,gBAAA,EAAgB,OAAO,SAAS,CAAA,EAAG,YAAA,EAAY,KAAA,IAAS,QAAW,aAAA,EAAa,SAAA,GAAY,SAAS,MAAA,EAAW,KAAA,EAAO,OAAO,CAAA,EAAG,OAAO,CAAA,EAAA,EAAK,IAAI,OAAO,MAAA,EACvU,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,gCAAA,EAAkC,UAAS,CAAA,EACxD,CAAA;AACF","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(side: CollapsiblePanelSide, collapsed: boolean): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left') return collapsed ? { icon: PanelLeftOpen, name: 'panel-left-open' } : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right') return collapsed ? { icon: PanelRightOpen, name: 'panel-right-open' } : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed ? { icon: PanelBottomOpen, name: 'panel-bottom-open' } : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className = '' }: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return <button type=\"button\" class={`kui-collapsible-panel__toggle ${className}`.trim()} data-action={action} data-collapsible-target={panelId} aria-expanded={String(!collapsed)} aria-label={accessible}><LucideIcon icon={glyph.icon} name={glyph.name} /></button>;\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Panel content. */\n  children?: SafeHtml | readonly SafeHtml[];\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `docs/24-collapsible-panel.md`.\n */\nexport function CollapsiblePanel({ id, side, collapsed = false, size, label, children, className = '' }: CollapsiblePanelProps) {\n  const sizeVar = side === 'bottom' ? '--kui-collapsible-panel-height' : '--kui-collapsible-panel-width';\n  return <aside class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()} data-component=\"collapsible-panel\" data-collapsible-panel={id} data-side={side} data-collapsed={String(collapsed)} aria-label={label || undefined} aria-hidden={collapsed ? 'true' : undefined} style={size ? `${sizeVar}: ${size}px` : undefined}>\n    <div class=\"kui-collapsible-panel__content\">{children}</div>\n  </aside>;\n}\n"]}
+{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  collapsiblePanelToggleIcon,\n  composedPanelBody,\n  groupSizeFor,\n  type PanelBottomToolbar,\n  type PanelChromePlacement,\n  type PanelSide,\n  type PanelToggle,\n  type PanelToggleAttributes,\n  type PanelToolbar,\n  relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n  ResizableRegionCollapseMotion,\n  ResizableRegionContentOverflow,\n  ResizableRegionPresentation,\n  ResizableRegionRestorePosition,\n  ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n  'data-collapsible-target': panelId,\n  // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n  // another control as the toggle moves between toolbars.\n  'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n  /** The panel this toggle controls. */\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state (drives the icon direction). */\n  collapsed: boolean;\n  /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n  action: string;\n  /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n  panelId?: string;\n  /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n  label?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n  side,\n  collapsed,\n  action,\n  panelId,\n  label,\n  className = '',\n  slot,\n}: CollapsiblePanelToggleProps) {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n  return (\n    <button\n      type=\"button\"\n      class={`kui-collapsible-panel__toggle ${className}`.trim()}\n      data-action={action}\n      data-collapsible-target={panelId}\n      aria-expanded={String(!collapsed)}\n      aria-label={accessible}\n      slot={slot}\n    >\n      <LucideIcon icon={glyph.icon} name={glyph.name} />\n    </button>\n  );\n}\n\nexport interface CollapsiblePanelProps {\n  /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n  id: string;\n  /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n  side: CollapsiblePanelSide;\n  /** Whether the panel is currently collapsed (the app owns this signal). */\n  collapsed?: boolean;\n  /** Rail width or drawer height in px. Overrides the CSS default. */\n  size?: number;\n  /** Accessible label for the panel region. */\n  label?: string;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible while the panel is expanded. */\n  outlined?: boolean;\n  /** Panel content. */\n  children?: KerfUiContent;\n  /**\n   * The panel's top toolbar, composed so its groups follow the panel's open\n   * state. With it, `children` renders in a `Pane` below the toolbar; render\n   * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n   * marked groups and toggle stay reachable while the panel is collapsed.\n   */\n  toolbar?: CollapsiblePanelToolbar;\n  /** Fixed content below a toolbar panel's top toolbar. */\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: CollapsiblePanelChromePlacement;\n  /** Fixed content above a toolbar panel's bottom toolbar. */\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: CollapsiblePanelBottomToolbar;\n  footerPlacement?: CollapsiblePanelChromePlacement;\n  /**\n   * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n   * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n   * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n   * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n   * without a `toolbar`, where `children` renders as given.\n   */\n  pane?: PaneConfig;\n  separator?: ResizableRegionSeparator;\n  collapseMotion?: ResizableRegionCollapseMotion;\n  contentOverflow?: ResizableRegionContentOverflow;\n  presentation?: ResizableRegionPresentation;\n  /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n  restoreControl?: SafeHtml;\n  restorePosition?: ResizableRegionRestorePosition;\n  className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n  id,\n  side,\n  collapsed = false,\n  size,\n  label,\n  tabIndex,\n  outlined = false,\n  children,\n  toolbar,\n  header,\n  headerList,\n  headerPlacement,\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement,\n  pane,\n  separator = 'auto',\n  collapseMotion = 'slide',\n  contentOverflow = 'clip',\n  presentation = 'inline',\n  restoreControl,\n  restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n  className = '',\n}: CollapsiblePanelProps) {\n  const sizeVar =\n    side === 'bottom'\n      ? '--kui-collapsible-panel-height'\n      : '--kui-collapsible-panel-width';\n  return (\n    <>\n      <aside\n        class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n        data-component=\"collapsible-panel\"\n        data-collapsible-panel={id}\n        data-side={side}\n        data-collapsed={String(collapsed)}\n        data-outlined={\n          !collapsed && presentation !== 'hidden' && outlined\n            ? 'true'\n            : undefined\n        }\n        data-separator={separator}\n        data-collapse-motion={collapseMotion}\n        data-content-overflow={contentOverflow}\n        data-presentation={presentation}\n        aria-label={label || undefined}\n        aria-hidden={\n          collapsed || presentation === 'hidden' ? 'true' : undefined\n        }\n        tabindex={\n          collapsed || presentation === 'hidden'\n            ? tabIndex === undefined\n              ? undefined\n              : -1\n            : tabIndex\n        }\n        inert={collapsed}\n        style={size ? `${sizeVar}: ${size}px` : undefined}\n      >\n        <div class=\"kui-collapsible-panel__content\">\n          {toolbar\n            ? composedPanelBody({\n                toolbar,\n                side,\n                collapsed,\n                attributes: toggleAttributes(id),\n                pane,\n                header,\n                headerList,\n                headerPlacement,\n                footer,\n                footerList,\n                bottomToolbar,\n                footerPlacement,\n                content: children,\n              })\n            : children}\n        </div>\n      </aside>\n      {collapsed && restoreControl && presentation !== 'hidden' && (\n        <div\n          class=\"kui-collapsible-panel__restore\"\n          data-panel-restore={id}\n          data-position={restorePosition}\n        >\n          {restoreControl}\n        </div>\n      )}\n    </>\n  );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n  /** The panel's `id`. */\n  panelId: string;\n  side: CollapsiblePanelSide;\n  /** The panel's current collapsed state. */\n  collapsed: boolean;\n  /** The same `toolbar` the panel receives. */\n  toolbar: CollapsiblePanelToolbar;\n  /**\n   * Density of the toolbar the groups are placed in, so the standard toggle\n   * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n   * `default`.\n   */\n  density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n  panelId,\n  side,\n  collapsed,\n  toolbar,\n  density,\n}: CollapsiblePanelRelocatedProps) {\n  return (\n    <>\n      {relocatedPanelGroups(\n        toolbar,\n        side,\n        collapsed,\n        toggleAttributes(panelId),\n        groupSizeFor(density),\n      )}\n    </>\n  );\n}\n"]}

package/dist/column-track.d.ts

@@ -0,0 +1,41 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
+import { CssLength } from './css-values.js';
+
+/** `scroll` keeps equal min-width columns; `paged` shows one near-full-width column per page. */
+type ColumnTrackLayout = 'scroll' | 'paged';
+type ColumnTrackRootAttributes = StructuralRootAttributes & Readonly<{
+    'data-component'?: never;
+    'data-layout'?: never;
+}>;
+interface ColumnTrackProps {
+    /** The columns, in order; each owns its own inset and scrolling. */
+    children: KerfUiContent;
+    /**
+     * `scroll` (default): equal columns that never shrink below
+     * `minColumnWidth`, so a narrow track scrolls sideways instead of crushing
+     * them. `paged`: each column is nearly the visible width, the next one peeks
+     * in, and scrolling snaps to column starts.
+     */
+    layout?: ColumnTrackLayout;
+    /** Narrowest a `scroll` column gets before the track scrolls; default 250px. */
+    minColumnWidth?: CssLength;
+    /** How much of the next column a `paged` track shows; default 24px. */
+    peek?: CssLength;
+    id?: string;
+    className?: string;
+    /** Safe `data-*`, `aria-*`, and structural `role` metadata on the scroller. */
+    rootAttributes?: ColumnTrackRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A horizontal track of columns (a kanban board): the track is the sideways
+ * scroll owner and fills its parent's height; columns sit flush and own their
+ * insets and vertical scrolling. Kerf owns the overflow, the paged snapping,
+ * and reduced motion.
+ */
+declare function ColumnTrack({ children, layout, minColumnWidth, peek, id, className, rootAttributes, slot, }: ColumnTrackProps): kerfjs.SafeHtml;
+
+export { ColumnTrack, type ColumnTrackLayout, type ColumnTrackProps };

package/dist/column-track.js

@@ -0,0 +1,4 @@
+export { ColumnTrack } from './chunk-QYMJHS4K.js';
+
+
+//# sourceMappingURL=column-track.js.map

package/dist/column-track.js.map

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

package/dist/combobox.d.ts

@@ -0,0 +1,40 @@
+import * as kerfjs from 'kerfjs';
+
+/** A suggestion: a plain string, or a value with a distinct visible label. */
+type ComboboxSuggestion = string | {
+    value: string;
+    label: string;
+};
+interface ComboboxProps {
+    /** Unique id; it also identifies the field in `wireComboboxes` reports. */
+    id: string;
+    /** Visible field label. */
+    label: string;
+    /** Suggestions to filter as the person types. */
+    suggestions: readonly ComboboxSuggestion[];
+    /** Initial text; the field owns its text while the person types. */
+    value?: string;
+    placeholder?: string;
+    /** Optional hint below the field, such as "Press Enter to add". */
+    hint?: string;
+    /** Form field name. */
+    name?: string;
+    /**
+     * Offer to create the typed text when it matches no suggestion; the option
+     * reads `createLabel` with `{value}` replaced. Omit to only allow
+     * suggestions. Default `Create “{value}”`.
+     */
+    createLabel?: string | false;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A free-text field with a filtered suggestion list that can also create a new
+ * value: the ARIA combobox pattern on a native input with the themed Web
+ * Awesome field chrome. `wireComboboxes` filters, moves the active option,
+ * and reports commits (Enter, comma, or a click). Use `Select` when only
+ * existing values are allowed and nothing is typed.
+ */
+declare function Combobox({ id, label, suggestions, value, placeholder, hint, name, createLabel, disabled, className, }: ComboboxProps): kerfjs.SafeHtml;
+
+export { Combobox, type ComboboxProps, type ComboboxSuggestion };

package/dist/combobox.js

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

package/dist/combobox.js.map

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

package/dist/composer.d.ts

@@ -0,0 +1,62 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/**
+ * Application `data-*` identity on the Composer root, such as `data-key`;
+ * the composer's own configuration attributes stay protected.
+ */
+type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface ComposerProps {
+    /** The message field's accessible name, in title style ("Message"). */
+    label: string;
+    /** Native textarea `name`: the form field the message submits under. */
+    name: string;
+    /**
+     * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes
+     * the field's accessible description.
+     */
+    id?: string;
+    /** The field's text: a draft to restore, or `''` after sending. */
+    value?: string;
+    /** Sentence-style example of what to write ("Ask about this build"). */
+    placeholder?: string;
+    /**
+     * Visible lines while the field is empty or short (default 1). The field
+     * grows with its content from here.
+     */
+    minRows?: number;
+    /**
+     * Lines the field grows to before it scrolls (default 8). At least
+     * `minRows`.
+     */
+    maxRows?: number;
+    /** Quiet, sentence-style supporting copy at the start of the action row. */
+    hint?: string;
+    /** Trailing controls in the action row, normally one brand Send button. */
+    actions: KerfUiContent;
+    /** Disable the field; the app disables its own actions. */
+    disabled?: boolean;
+    /**
+     * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
+     * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
+     * action, Shift+Enter inserts a newline, and an Enter that commits an IME
+     * composition or meets an empty message does not send. The field announces
+     * the shortcut with `aria-keyshortcuts`.
+     */
+    submitOnEnter?: boolean;
+    /** Safe `data-*` identity on the root. */
+    rootAttributes?: ComposerRootAttributes;
+    className?: string;
+    /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
+    slot?: string;
+}
+/**
+ * A chat or prompt composer: a raised frame whose border turns brand while
+ * focus is within, holding a borderless message field that grows with its
+ * content between `minRows` and `maxRows` lines, above an action row with an
+ * optional hint and trailing actions. The app owns the value and sending;
+ * `submitOnEnter` with `wireComposers` adds Enter-to-send.
+ */
+declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
+
+export { Composer, type ComposerProps, type ComposerRootAttributes };

package/dist/composer.js

@@ -0,0 +1,5 @@
+export { Composer } from './chunk-AV7CPAPT.js';
+
+
+
+//# sourceMappingURL=composer.js.map

package/dist/composer.js.map

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

package/dist/content-item.d.ts

@@ -0,0 +1,116 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
+
+/**
+ * Base surface treatment, semantic status colors, or `brand-loud`: the solid
+ * brand fill with its on-loud foreground (a transcript's own messages).
+ */
+type ContentItemAppearance = 'transparent' | 'surface' | 'brand-loud' | SemanticTone;
+/**
+ * A chat-bubble layout for transcripts: the item fits its content up to 80%
+ * of the row and sits at the `start` (other participants) or `end` (the
+ * person's own messages) of the line.
+ */
+type ContentItemBubble = 'start' | 'end';
+/** Whether the item's always-reserved 1px border is transparent or visible. */
+type ContentItemFrame = 'none' | 'framed';
+/** Corner shape: the 12px rounded rectangle or the 22px pill. */
+type ContentItemShape = 'rounded' | 'pill';
+/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */
+type ContentItemSelectionMode = 'none' | 'single' | 'multiple' | 'toggle';
+type ContentItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-bubble'?: never;
+}>;
+type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-bubble'?: never;
+    'data-action'?: never;
+    'data-item-id'?: never;
+    'data-interactive'?: never;
+    'data-selected'?: never;
+    'data-disabled'?: never;
+    'data-selection-mode'?: never;
+    'data-kui-pressed'?: never;
+}>;
+interface ContentItemBaseProps {
+    /**
+     * Coordinated background, border, and foreground colors. `transparent`
+     * preserves the surrounding surface; `surface` paints the base surface;
+     * semantic values match StateBanner. Defaults to `transparent`.
+     */
+    appearance?: ContentItemAppearance;
+    /** Item content; a plain string is allowed for bare copy. */
+    children?: KerfUiContent | string;
+    /**
+     * `framed` paints the standard neutral border in the 1px the item always
+     * reserves, so framing never changes geometry. Frame only an item that
+     * marks a real distinction. Defaults to `none` (transparent border).
+     */
+    frame?: ContentItemFrame;
+    /** Remove block padding and block borders while retaining inline geometry. */
+    flush?: boolean;
+    /** Corner shape. Defaults to `rounded`. */
+    shape?: ContentItemShape;
+    /**
+     * Lay the item out as a chat bubble: content width up to 80% of the row,
+     * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the
+     * person's own messages. Omit for an ordinary full-width item.
+     */
+    bubble?: ContentItemBubble;
+    /** Native hover tooltip. */
+    title?: string;
+    /**
+     * Names the item as a distinct region (`role="region"`). Omit it for an
+     * ordinary item, which stays a non-landmark grouping.
+     */
+    ariaLabel?: string;
+    /**
+     * Makes the item a programmatic focus target (`tabindex="-1"`, never a tab
+     * stop), for example the preferred initial focus of a NavStack view when
+     * combined with `data-nav-focus` in `rootAttributes`.
+     */
+    focusTarget?: boolean;
+    /** Keep the standard focus outline visible, such as for a drop target. */
+    outlined?: boolean;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type ContentItemProps = ContentItemBaseProps & ({
+    interactive?: false;
+    action?: never;
+    itemId?: never;
+    selectionMode?: never;
+    selected?: never;
+    disabled?: never;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */
+    tabIndex?: 0 | -1;
+    /** Existing static `data-*` metadata remains available. */
+    rootAttributes?: ContentItemRootAttributes;
+} | {
+    /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */
+    interactive: true;
+    /** Delegated action dispatched by pointer, Enter, or Space. */
+    action: string;
+    itemId?: string;
+    selectionMode?: ContentItemSelectionMode;
+    selected?: boolean;
+    disabled?: boolean;
+    tabIndex?: never;
+    /** Safe app metadata; interaction attributes are component-owned. */
+    rootAttributes?: ContentItemInteractiveRootAttributes;
+});
+/**
+ * One self-contained `.kui-content` child: an 8px inline margin, a real 1px
+ * border (transparent unless `framed`), 8px padding, and a rounded or pill
+ * radius. It owns that whole geometry, so wrappers must not add more.
+ */
+declare function ContentItem({ appearance, children, frame, flush, shape, bubble, title, ariaLabel, focusTarget, outlined, tabIndex, interactive, action, itemId, selectionMode, selected, disabled, className, rootAttributes, slot, }: ContentItemProps): kerfjs.SafeHtml;
+
+export { ContentItem, type ContentItemAppearance, type ContentItemBubble, type ContentItemFrame, type ContentItemProps, type ContentItemSelectionMode, type ContentItemShape, SemanticTone };

package/dist/content-item.js

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

package/dist/content-item.js.map

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

package/dist/content-swap.d.ts

@@ -0,0 +1,34 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type ContentSwapSide = 'a' | 'b';
+type ContentSwapTransition = 'none' | 'crossfade' | 'push';
+/** `forward` pushes the incoming side in from the inline end; `backward` from the start. */
+type ContentSwapDirection = 'forward' | 'backward';
+interface ContentSwapProps {
+    /** Which side is shown. Changing it runs the transition. */
+    active: ContentSwapSide;
+    a: KerfUiContent;
+    b: KerfUiContent;
+    /** `push` (default) slides the sides, `crossfade` fades them, `none` swaps instantly. */
+    transition?: ContentSwapTransition;
+    /** Push direction; mirrors in right-to-left documents. Default `forward`. */
+    direction?: ContentSwapDirection;
+    /** Accessible name; when set, the swap is a named region. */
+    label?: string;
+    /** Span the full width of its slot (a dialog label or footer) instead of its content. */
+    fill?: boolean;
+    className?: string;
+    /** Native named-slot assignment, such as a dialog's `label` or `footer`. */
+    slot?: string;
+}
+/**
+ * Two content sides sharing one cell (a dialog body that steps to a second
+ * page, a footer whose actions change), with the swap animated in place.
+ * Kerf owns the motion, the reduced-motion fallback, and the inactive side's
+ * `inert`/`aria-hidden`. Use `NavStack` for full views with their own
+ * toolbars.
+ */
+declare function ContentSwap({ active, a, b, transition, direction, label, fill, className, slot, }: ContentSwapProps): kerfjs.SafeHtml;
+
+export { ContentSwap, type ContentSwapDirection, type ContentSwapProps, type ContentSwapSide, type ContentSwapTransition };

package/dist/content-swap.js

@@ -0,0 +1,3 @@
+export { ContentSwap } from './chunk-EIET4QLK.js';
+
+//# sourceMappingURL=content-swap.js.map

package/dist/content-swap.js.map

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

package/dist/corner-status.d.ts

@@ -0,0 +1,36 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+/** The viewport corner a CornerStatus occupies, in logical (RTL-aware) terms. */
+type CornerStatusPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+/** Where a CornerStatus appears: the top layer, or in flow. */
+type CornerStatusPresentation = 'overlay' | 'embedded';
+interface CornerStatusProps {
+    /** The root id: what a `popovertarget` control or `getElementById` names. */
+    id?: string;
+    /** One or more `StateBanner`s, typically `urgency="status"`; they stack. */
+    children: KerfUiContent;
+    /** Viewport corner; defaults to `bottom-end`. */
+    placement?: CornerStatusPlacement;
+    /**
+     * `overlay` (default) is a native `popover="manual"` host in the top layer,
+     * opened by `wireCornerStatus`: above fixed and z-indexed page chrome,
+     * never focused, and with no close button, light dismiss, or Escape.
+     * `embedded` renders the same stack in flow for a catalog or inline use.
+     */
+    presentation?: CornerStatusPresentation;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A non-dismissible status surface pinned to a viewport corner — "Loading…",
+ * "Updating Tickets… 3 of 12" — for app-level progress that has no better
+ * home beside the affected work. The application owns its lifetime: render it
+ * while the work runs and remove it when the work ends. It carries no role of
+ * its own; the composed `StateBanner` is the polite live region. Use a toast
+ * for transient, dismissible confirmation instead.
+ */
+declare function CornerStatus({ id, children, placement, presentation, className, slot, }: CornerStatusProps): kerfjs.SafeHtml;
+
+export { CornerStatus, type CornerStatusPlacement, type CornerStatusPresentation, type CornerStatusProps };

package/dist/corner-status.js

@@ -0,0 +1,3 @@
+export { CornerStatus } from './chunk-G3J7JDP6.js';
+
+//# sourceMappingURL=corner-status.js.map

package/dist/corner-status.js.map

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