@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

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/color-field.d.ts

@@ -0,0 +1,51 @@
+import * as kerfjs from 'kerfjs';
+import { ColorPickerMode } from './color-picker.js';
+import './color-swatches.js';
+import './css-values.js';
+
+/** `default` matches TextField's box; `compact` its compact size. */
+type ColorFieldSize = 'default' | 'compact';
+/** Application `data-*` metadata; the field's own markers stay protected. */
+type ColorFieldRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorFieldProps = {
+    /** The trigger's id; it also prefixes the hint and error ids. */
+    id: string;
+    /** CSS color text; invalid text shows black. */
+    value: string;
+    /** The picker's model when it opens (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity in the picker (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /** Supporting text below the field, also its description. */
+    hint?: string;
+    /** An error below the field that marks it invalid. */
+    error?: string;
+    size?: ColorFieldSize;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    rootAttributes?: ColorFieldRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A form field for a color: a label above a trigger that shows the current
+ * color as a swatch and its hex value. Pressing it opens a ColorPicker in an
+ * AnchoredSurface anchored to the field; Escape or a press outside closes it
+ * and focus returns to the trigger. Wire `wireColorFields` from
+ * `@kerfjs/ui/wire-color-fields`; it previews edits on the trigger, reports
+ * them, and the app re-renders with the new value.
+ */
+declare function ColorField({ id, value, mode, alpha, name, form, label, ariaLabel, hint, error, size, disabled, required, className, rootAttributes, slot, }: ColorFieldProps): kerfjs.SafeHtml;
+
+export { ColorField, type ColorFieldProps, type ColorFieldRootAttributes, type ColorFieldSize };

package/dist/color-field.js

@@ -0,0 +1,92 @@
+import { parseColor, formatHex } from './chunk-TNJLNLVE.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { ChevronDown } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COLOR_FIELD_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-value",
+  "data-mode",
+  "data-alpha",
+  "data-invalid",
+  "data-color-field-id"
+]);
+function ColorField({
+  id,
+  value,
+  mode = "rgb",
+  alpha = true,
+  name,
+  form,
+  label,
+  ariaLabel,
+  hint,
+  error,
+  size = "default",
+  disabled = false,
+  required = false,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };
+  const hex = formatHex(alpha ? parsed : { ...parsed, a: 1 });
+  const describedBy = [hint === void 0 ? "" : `${id}-hint`, error ? `${id}-error` : ""].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COLOR_FIELD_PROTECTED),
+      class: `kui-color-field ${className}`.trim(),
+      "data-component": "color-field",
+      "data-color-field-id": id,
+      "data-size": size,
+      "data-value": hex,
+      "data-mode": mode,
+      "data-alpha": alpha ? "" : void 0,
+      "data-invalid": error ? "" : void 0,
+      slot,
+      children: [
+        label === void 0 ? /* @__PURE__ */ jsx("span", { id: `${id}-label`, hidden: true, children: ariaLabel }) : /* @__PURE__ */ jsxs("label", { class: "kui-color-field__label", id: `${id}-label`, for: id, children: [
+          label,
+          required ? /* @__PURE__ */ jsx("span", { class: "kui-color-field__required", "aria-hidden": "true", children: "*" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id,
+            class: "kui-color-field__trigger",
+            "aria-labelledby": `${id}-label ${id}-value`,
+            "aria-haspopup": "dialog",
+            "aria-expanded": "false",
+            "aria-describedby": describedBy,
+            "aria-invalid": error ? "true" : void 0,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-color-field__swatch",
+                  style: `--_kui-color-field-color:${hex}`,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { class: "kui-color-field__hex", id: `${id}-value`, children: hex.slice(1).toUpperCase() }),
+              /* @__PURE__ */ jsx("span", { class: "kui-color-field__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down", size: "s" }) })
+            ]
+          }
+        ),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-color-field__hint", id: `${id}-hint`, children: hint }),
+        error ? /* @__PURE__ */ jsx("span", { class: "kui-color-field__error", id: `${id}-error`, children: error }) : null,
+        name === void 0 ? null : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hex, form })
+      ]
+    }
+  );
+}
+
+export { ColorField };
+
+//# sourceMappingURL=color-field.js.map

package/dist/color-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-field/color-field.tsx"],"names":[],"mappings":"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","file":"color-field.js","sourcesContent":["import { ChevronDown } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { ColorPickerMode } from '../color-picker/color-picker.js';\nimport { formatHex, parseColor } from '../color-picker/model/color-model.js';\n\n/** `default` matches TextField's box; `compact` its compact size. */\nexport type ColorFieldSize = 'default' | 'compact';\n\n/** Application `data-*` metadata; the field's own markers stay protected. */\nexport type ColorFieldRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst COLOR_FIELD_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-value',\n  'data-mode',\n  'data-alpha',\n  'data-invalid',\n  'data-color-field-id',\n]);\n\nexport type ColorFieldProps = {\n  /** The trigger's id; it also prefixes the hint and error ids. */\n  id: string;\n  /** CSS color text; invalid text shows black. */\n  value: string;\n  /** The picker's model when it opens (default `rgb`). */\n  mode?: ColorPickerMode;\n  /** Offer opacity in the picker (default true). */\n  alpha?: boolean;\n  /** A form field name the hex value submits under. */\n  name?: string;\n  /** Associate the hidden input with a form outside its ancestor chain. */\n  form?: string;\n  /** Supporting text below the field, also its description. */\n  hint?: string;\n  /** An error below the field that marks it invalid. */\n  error?: string;\n  size?: ColorFieldSize;\n  disabled?: boolean;\n  required?: boolean;\n  className?: string;\n  rootAttributes?: ColorFieldRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n} & (\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string }\n);\n\n/**\n * A form field for a color: a label above a trigger that shows the current\n * color as a swatch and its hex value. Pressing it opens a ColorPicker in an\n * AnchoredSurface anchored to the field; Escape or a press outside closes it\n * and focus returns to the trigger. Wire `wireColorFields` from\n * `@kerfjs/ui/wire-color-fields`; it previews edits on the trigger, reports\n * them, and the app re-renders with the new value.\n */\nexport function ColorField({\n  id,\n  value,\n  mode = 'rgb',\n  alpha = true,\n  name,\n  form,\n  label,\n  ariaLabel,\n  hint,\n  error,\n  size = 'default',\n  disabled = false,\n  required = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColorFieldProps) {\n  const parsed = parseColor(value) ?? { r: 0, g: 0, b: 0, a: 1 };\n  const hex = formatHex(alpha ? parsed : { ...parsed, a: 1 });\n  const describedBy =\n    [hint === undefined ? '' : `${id}-hint`, error ? `${id}-error` : '']\n      .filter(Boolean)\n      .join(' ') || undefined;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COLOR_FIELD_PROTECTED)}\n      class={`kui-color-field ${className}`.trim()}\n      data-component=\"color-field\"\n      data-color-field-id={id}\n      data-size={size}\n      data-value={hex}\n      data-mode={mode}\n      data-alpha={alpha ? '' : undefined}\n      data-invalid={error ? '' : undefined}\n      slot={slot}\n    >\n      {label === undefined ? (\n        <span id={`${id}-label`} hidden>\n          {ariaLabel}\n        </span>\n      ) : (\n        <label class=\"kui-color-field__label\" id={`${id}-label`} for={id}>\n          {label}\n          {required ? (\n            <span class=\"kui-color-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          ) : null}\n        </label>\n      )}\n      <button\n        type=\"button\"\n        id={id}\n        class=\"kui-color-field__trigger\"\n        aria-labelledby={`${id}-label ${id}-value`}\n        aria-haspopup=\"dialog\"\n        aria-expanded=\"false\"\n        aria-describedby={describedBy}\n        aria-invalid={error ? 'true' : undefined}\n        disabled={disabled}\n      >\n        <span\n          class=\"kui-color-field__swatch\"\n          style={`--_kui-color-field-color:${hex}`}\n          aria-hidden=\"true\"\n        />\n        <span class=\"kui-color-field__hex\" id={`${id}-value`}>\n          {hex.slice(1).toUpperCase()}\n        </span>\n        <span class=\"kui-color-field__chevron\" aria-hidden=\"true\">\n          <LucideIcon icon={ChevronDown} name=\"chevron-down\" size=\"s\" />\n        </span>\n      </button>\n      {hint === undefined ? null : (\n        <span class=\"kui-color-field__hint\" id={`${id}-hint`}>\n          {hint}\n        </span>\n      )}\n      {error ? (\n        <span class=\"kui-color-field__error\" id={`${id}-error`}>\n          {error}\n        </span>\n      ) : null}\n      {name === undefined ? null : (\n        <input type=\"hidden\" name={name} value={hex} form={form} />\n      )}\n    </div>\n  );\n}\n"]}

package/dist/color-picker.d.ts

@@ -0,0 +1,113 @@
+import * as kerfjs from 'kerfjs';
+import { ColorSwatch } from './color-swatches.js';
+import './css-values.js';
+
+/** Hue 0–360, saturation and value (brightness) 0–1, and alpha 0–1. */
+interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+
+/** The channel fields the picker shows: RGB, HSL, HSB (HSV), or one gray level. */
+type ColorPickerMode = 'rgb' | 'hsl' | 'hsb' | 'gray';
+/** A titled group of app-owned colors, such as "Document Colors". */
+interface ColorPickerSamples {
+    title: string;
+    swatches: readonly ColorSwatch[];
+}
+/** Application `data-*` metadata; the picker's own markers stay protected. */
+type ColorPickerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+/** The delegated action every preset and sample swatch carries. */
+declare const COLOR_PICKER_SWATCH_ACTION = "kui-color-picker-swatch";
+interface ColorPickerProps {
+    /** The picker's id; it also prefixes its inner ids. */
+    id: string;
+    /** The picker's accessible name. */
+    label: string;
+    /**
+     * The color, as CSS color text (`#rrggbb[aa]`, `rgb()`, `hsl()`); invalid
+     * text shows black. The picker reports `#rrggbb`, or `#rrggbbaa` below
+     * full opacity.
+     */
+    value: string;
+    /** The channel fields shown (default `rgb`). */
+    mode?: ColorPickerMode;
+    /** Offer opacity: an alpha slider and field (default true). */
+    alpha?: boolean;
+    /** A form field name the hex value submits under. */
+    name?: string;
+    /** Associate the hidden input with a form outside its ancestor chain. */
+    form?: string;
+    /**
+     * Offer a button that samples a color from the screen, where the browser
+     * provides the EyeDropper API (default true; hidden elsewhere).
+     */
+    eyedropper?: boolean;
+    /** A preset row of swatches under the controls. */
+    presets?: readonly ColorSwatch[];
+    /** Titled groups of app-owned colors under the presets. */
+    samples?: readonly ColorPickerSamples[];
+    /**
+     * A `data-action` for an "Add to Samples" button in the controls row; the
+     * app reads the picker's current value and adds it to its samples.
+     */
+    addSampleAction?: string;
+    disabled?: boolean;
+    className?: string;
+    rootAttributes?: ColorPickerRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * The labels, accessible names, maximum, and spoken unit of each channel per
+ * mode; the mode's sliders and fields both follow it.
+ */
+declare const COLOR_PICKER_CHANNELS: Record<ColorPickerMode, readonly {
+    short: string;
+    name: string;
+    max: number;
+    unit: '' | '%' | '°';
+}[]>;
+/** The rounded channel values a mode shows for an HSV color. */
+declare function colorPickerChannels(mode: ColorPickerMode, hsv: Hsva): number[];
+/** One channel slider's attributes; see {@link colorPickerSlider}. */
+interface ColorPickerSliderState {
+    max: number;
+    value: string;
+    label: string;
+    valueText: string;
+    style: string;
+}
+/**
+ * The attributes of one channel slider for a mode's exact channel values:
+ * its range, value, accessible name and spoken value, and an inline style
+ * with the track gradient of the colors that channel produces while the
+ * others hold (the full rainbow for the HSL and HSB hue) and the color under
+ * the thumb.
+ * `undefined` for a slot the mode does not use.
+ */
+declare function colorPickerSlider(mode: ColorPickerMode, index: number, values: readonly number[]): ColorPickerSliderState | undefined;
+/** The area's spoken value. */
+declare function colorPickerAreaText(hsv: Hsva): string;
+/** The CSS custom properties that place the thumbs and paint the tracks. */
+declare function colorPickerStyle(hsv: Hsva): string;
+/**
+ * A full color picker panel: a saturation and brightness area; a slider for
+ * each channel of the color model (red, green, and blue; hue, saturation, and
+ * lightness or brightness; or one gray level), each track painting the colors
+ * that channel produces while the others hold (the hue track the full
+ * rainbow); an optional opacity slider on
+ * a checkerboard; a color-model menu (RGB, HSL, HSB, Grayscale) with its
+ * channel fields, a hex field (8 digits below full
+ * opacity) and an opacity field, an optional screen sampler (EyeDropper), and
+ * optional preset and sample swatches. The controlled `value` renders it;
+ * wire `wireColorPickers` from `@kerfjs/ui/wire-color-pickers` to make it
+ * interactive. The interactive surface belongs to that wiring after the first
+ * render, so a drag never fights a re-render; a new `value` from the app
+ * resynchronizes it.
+ */
+declare function ColorPicker({ id, label, value, mode, alpha, name, form, eyedropper, presets, samples, addSampleAction, disabled, className, rootAttributes, slot, }: ColorPickerProps): kerfjs.SafeHtml;
+
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, type ColorPickerMode, type ColorPickerProps, type ColorPickerRootAttributes, type ColorPickerSamples, type ColorPickerSliderState, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle };

package/dist/color-picker.js

@@ -0,0 +1,8 @@
+export { COLOR_PICKER_CHANNELS, COLOR_PICKER_SWATCH_ACTION, ColorPicker, colorPickerAreaText, colorPickerChannels, colorPickerSlider, colorPickerStyle } from './chunk-3Z7N2NAZ.js';
+
+
+
+
+
+
+//# sourceMappingURL=color-picker.js.map

package/dist/color-picker.js.map

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

package/dist/color-swatches.d.ts

@@ -0,0 +1,56 @@
+import * as kerfjs from 'kerfjs';
+import { CssColor } from './css-values.js';
+
+/** `default` is a 24px swatch; `compact` is 20px. */
+type ColorSwatchesSize = 'default' | 'compact';
+/** One color in the palette. */
+interface ColorSwatch {
+    /** The submitted value, such as `#0a84ff` or `blue`. */
+    value: string;
+    /** The color's name: the swatch's accessible name and its hover hint. */
+    label: string;
+    /**
+     * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or
+     * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the
+     * no-color swatch, drawn outlined and struck through.
+     */
+    color: CssColor | 'transparent';
+}
+/** Application `data-*` metadata; the group's own markers stay protected. */
+type ColorSwatchesRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ColorSwatchesProps = {
+    /** The radio group name the chosen value submits under. */
+    name: string;
+    swatches: readonly ColorSwatch[];
+    /** The chosen swatch's value. */
+    value?: string;
+    size?: ColorSwatchesSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on each radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The group's id. */
+    id?: string;
+    className?: string;
+    rootAttributes?: ColorSwatchesRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A fixed palette: a group of round color swatches with no visible text, one
+ * of which is chosen. It is a native radio group, so arrow keys move the
+ * choice, Tab reaches it once, and the chosen value submits under `name`.
+ * Each swatch is named by its color's label (also its hover hint), and the
+ * chosen one wears a ring that does not rely on its hue. A `'transparent'`
+ * swatch offers "no color".
+ */
+declare function ColorSwatches({ name, swatches, value, label, ariaLabel, size, disabled, action, form, id, className, rootAttributes, slot, }: ColorSwatchesProps): kerfjs.SafeHtml;
+
+export { type ColorSwatch, ColorSwatches, type ColorSwatchesProps, type ColorSwatchesRootAttributes, type ColorSwatchesSize };

package/dist/color-swatches.js

@@ -0,0 +1,4 @@
+export { ColorSwatches } from './chunk-IO27YTL3.js';
+
+
+//# sourceMappingURL=color-swatches.js.map

package/dist/color-swatches.js.map

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

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-BKUMG2KB.js';
+
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

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

package/dist/content-item.d.ts

@@ -0,0 +1,128 @@
+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;
+    'data-grid-row'?: never;
+}>;
+type ContentItemInteractiveRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-appearance'?: never;
+    'data-outlined'?: never;
+    'data-bubble'?: never;
+    'data-grid-row'?: 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;
+    /**
+     * A non-selectable row of a multi-select `List` or `Grid`: renders
+     * `role="row"` around a `gridcell`, with no `aria-selected` and no
+     * Tab stop of its own, for content between selectable rows (an
+     * activity group, a "messages skipped" divider). Its controls stay
+     * reachable by Tab; arrow keys skip it.
+     */
+    gridRow?: boolean;
+    /** 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;
+    /** An interactive item is already a row in a multi-select grid. */
+    gridRow?: 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, gridRow, 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-5USKCWGL.js';
+
+
+//# sourceMappingURL=content-item.js.map

package/dist/content-item.js.map

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