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

package/dist/collapsible-panel.d.ts

@@ -1,20 +1,33 @@
 import { SafeHtml } from 'kerfjs';
-import { LucideIcon } from './lucide-icon.js';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { P as PanelSide, a as PanelToolbar, b as PanelChromePlacement, c as PanelBottomToolbar, d as PanelToggle } from './panel-toolbar-vg6Ir5Dy.js';
+export { e as collapsiblePanelToggleIcon } from './panel-toolbar-vg6Ir5Dy.js';
+import { ToolbarConfig } from './toolbar.js';
+import { ListConfig } from './list.js';
+import { PaneConfig } from './pane.js';
+import { ResizableRegionSeparator, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionPresentation, ResizableRegionRestorePosition } from './resizable-region.js';
+import './lucide-icon.js';
 import 'lucide';
+import './css-values.js';
+import './sides-BPSWde0A.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 
 /** Which edge a {@link CollapsiblePanel} docks to. */
-type CollapsiblePanelSide = 'left' | 'right' | 'bottom';
+type CollapsiblePanelSide = PanelSide;
+/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */
+type CollapsiblePanelToolbarToggle = PanelToggle;
 /**
- * The standard collapse/expand icon for a panel `side` and `collapsed` state,
- * so every app's sidebars and drawers use one recognizable convention:
- * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`
- * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while
- * collapsed. Exposed so an app can render its own toggle affordance.
+ * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and
+ * `trailing` while open; groups marked `relocateOnCollapse` and the standard
+ * toggle move to the work-area toolbar through
+ * {@link CollapsiblePanelRelocated} while it is collapsed.
  */
-declare function collapsiblePanelToggleIcon(side: CollapsiblePanelSide, collapsed: boolean): {
-    icon: Parameters<typeof LucideIcon>[0]['icon'];
-    name: string;
-};
+type CollapsiblePanelToolbar = PanelToolbar;
+type CollapsiblePanelBottomToolbar = PanelBottomToolbar;
+type CollapsiblePanelChromePlacement = PanelChromePlacement;
 interface CollapsiblePanelToggleProps {
     /** The panel this toggle controls. */
     side: CollapsiblePanelSide;
@@ -27,6 +40,8 @@ interface CollapsiblePanelToggleProps {
     /** Accessible label; defaults to "Collapse"/"Expand". */
     label?: string;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the
@@ -35,7 +50,7 @@ interface CollapsiblePanelToggleProps {
  * put it in the panel's own header (to collapse) and somewhere always-visible
  * (to expand while collapsed).
  */
-declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className }: CollapsiblePanelToggleProps): SafeHtml;
+declare function CollapsiblePanelToggle({ side, collapsed, action, panelId, label, className, slot, }: CollapsiblePanelToggleProps): SafeHtml;
 interface CollapsiblePanelProps {
     /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */
     id: string;
@@ -47,8 +62,43 @@ interface CollapsiblePanelProps {
     size?: number;
     /** Accessible label for the panel region. */
     label?: string;
+    /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */
+    tabIndex?: 0 | -1;
+    /** Keep the standard focus outline visible while the panel is expanded. */
+    outlined?: boolean;
     /** Panel content. */
-    children?: SafeHtml | readonly SafeHtml[];
+    children?: KerfUiContent;
+    /**
+     * The panel's top toolbar, composed so its groups follow the panel's open
+     * state. With it, `children` renders in a `Pane` below the toolbar; render
+     * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the
+     * marked groups and toggle stay reachable while the panel is collapsed.
+     */
+    toolbar?: CollapsiblePanelToolbar;
+    /** Fixed content below a toolbar panel's top toolbar. */
+    header?: KerfUiContent;
+    headerList?: ListConfig;
+    headerPlacement?: CollapsiblePanelChromePlacement;
+    /** Fixed content above a toolbar panel's bottom toolbar. */
+    footer?: KerfUiContent;
+    footerList?: ListConfig;
+    bottomToolbar?: CollapsiblePanelBottomToolbar;
+    footerPlacement?: CollapsiblePanelChromePlacement;
+    /**
+     * Configuration for a `toolbar` panel's `Pane` (`contentElement`,
+     * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example
+     * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation
+     * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored
+     * without a `toolbar`, where `children` renders as given.
+     */
+    pane?: PaneConfig;
+    separator?: ResizableRegionSeparator;
+    collapseMotion?: ResizableRegionCollapseMotion;
+    contentOverflow?: ResizableRegionContentOverflow;
+    presentation?: ResizableRegionPresentation;
+    /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */
+    restoreControl?: SafeHtml;
+    restorePosition?: ResizableRegionRestorePosition;
     className?: string;
 }
 /**
@@ -56,11 +106,41 @@ interface CollapsiblePanelProps {
  * {@link Workbench} shell. It owns only the presentation: a fixed-size content
  * area that stays laid out while the panel's track snaps to zero and the content
  * slides out via `transform` (one reflow, composited — the same technique
- * `Workbench` and the catalog sidebar use). The app owns the `collapsed` signal;
+ * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored
+ * to the panel's fixed bottom edge, so the track cannot move its layout origin
+ * underneath the transform transition. A collapsed panel renders `inert` (with
+ * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches
+ * content that has slid out of view; its `restoreControl` renders outside the
+ * panel and stays reachable.
+ * The app owns the `collapsed` signal;
  * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,
  * and persistence semantics, and with `CollapsiblePanelToggle` for the standard
- * affordance. See `docs/24-collapsible-panel.md`.
+ * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.
  */
-declare function CollapsiblePanel({ id, side, collapsed, size, label, children, className }: CollapsiblePanelProps): SafeHtml;
+declare function CollapsiblePanel({ id, side, collapsed, size, label, tabIndex, outlined, children, toolbar, header, headerList, headerPlacement, footer, footerList, bottomToolbar, footerPlacement, pane, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, className, }: CollapsiblePanelProps): SafeHtml;
+interface CollapsiblePanelRelocatedProps {
+    /** The panel's `id`. */
+    panelId: string;
+    side: CollapsiblePanelSide;
+    /** The panel's current collapsed state. */
+    collapsed: boolean;
+    /** The same `toolbar` the panel receives. */
+    toolbar: CollapsiblePanelToolbar;
+    /**
+     * Density of the toolbar the groups are placed in, so the standard toggle
+     * fits it (`compact` in a `density="compact"` toolbar). Defaults to
+     * `default`.
+     */
+    density?: ToolbarConfig['density'];
+}
+/**
+ * A collapsed {@link CollapsiblePanel}'s marked groups and standard
+ * toggle, for the app's work-area toolbar — nothing while the panel is open.
+ * Put it first in the leading zone for a left rail, last in the trailing zone
+ * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`
+ * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when
+ * the panel closes from its own toggle.
+ */
+declare function CollapsiblePanelRelocated({ panelId, side, collapsed, toolbar, density, }: CollapsiblePanelRelocatedProps): SafeHtml;
 
-export { CollapsiblePanel, type CollapsiblePanelProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, collapsiblePanelToggleIcon };
+export { CollapsiblePanel, type CollapsiblePanelBottomToolbar, type CollapsiblePanelChromePlacement, type CollapsiblePanelProps, CollapsiblePanelRelocated, type CollapsiblePanelRelocatedProps, type CollapsiblePanelSide, CollapsiblePanelToggle, type CollapsiblePanelToggleProps, type CollapsiblePanelToolbar, type CollapsiblePanelToolbarToggle };

package/dist/collapsible-panel.js

@@ -1,22 +1,142 @@
-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-OUCHU7JB.js';
+export { collapsiblePanelToggleIcon } from './chunk-OUCHU7JB.js';
+
+
+
+
+
+
+
+
+
+
+
+import { LucideIcon } from './chunk-HJXVVFBT.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/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"}