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

package/dist/chunk-WSEJ2FDE.js

@@ -0,0 +1,162 @@
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
+import { ToolbarControlGroup, isRelocatableGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { Pane } from './chunk-HQZG3OFL.js';
+import { List } from './chunk-NB6POCFH.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { PanelLeftOpen, PanelLeftClose, PanelRightOpen, PanelRightClose, PanelBottomOpen, PanelBottomClose } from 'lucide';
+import { jsx, jsxs, Fragment } 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 panelChromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function groupSizeFor(density) {
+  return density === "compact" ? "compact" : "default";
+}
+function panelToggleGroup(side, toggle, collapsed, attributes, size = "default") {
+  const glyph = collapsiblePanelToggleIcon(side, collapsed);
+  return /* @__PURE__ */ jsx(
+    ToolbarControlGroup,
+    {
+      label: toggle.name,
+      appearance: "borderless",
+      size,
+      single: true,
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          ...attributes,
+          "data-action": toggle.action,
+          "aria-expanded": String(!collapsed),
+          "aria-label": collapsed ? toggle.showLabel ?? `Show ${toggle.name}` : toggle.hideLabel ?? `Hide ${toggle.name}`,
+          children: /* @__PURE__ */ jsx(LucideIcon, { icon: glyph.icon, name: glyph.name })
+        }
+      )
+    }
+  );
+}
+function composedPanelToolbar(toolbar, side, collapsed, attributes) {
+  return /* @__PURE__ */ jsx(
+    Toolbar,
+    {
+      label: toolbar.label,
+      density: toolbar.density,
+      dividerSides: toolbar.dividerSides,
+      centerAlign: toolbar.centerAlign,
+      responsive: toolbar.responsive,
+      responsiveAt: toolbar.responsiveAt,
+      safeAreaEdges: toolbar.safeAreaEdges,
+      center: toolbar.center,
+      leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar.title,
+        toolbar.leading
+      ] }),
+      trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbar.trailing,
+        toolbar.toggle ? panelToggleGroup(
+          side,
+          toolbar.toggle,
+          collapsed,
+          attributes,
+          groupSizeFor(toolbar.density)
+        ) : null
+      ] })
+    }
+  );
+}
+function composedPanelBody({
+  toolbar,
+  side,
+  collapsed,
+  attributes,
+  pane,
+  header,
+  headerList,
+  headerPlacement = "fixed",
+  footer,
+  footerList,
+  bottomToolbar,
+  footerPlacement = "fixed",
+  content
+}) {
+  const panelHeader = /* @__PURE__ */ jsxs(Fragment, { children: [
+    composedPanelToolbar(toolbar, side, collapsed, attributes),
+    header ? panelChromeList(header, headerList) : null
+  ] });
+  const panelFooter = footer || bottomToolbar ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    footer ? panelChromeList(footer, footerList) : null,
+    bottomToolbar ? /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        position: "footer",
+        label: bottomToolbar.label,
+        density: bottomToolbar.density,
+        dividerSides: bottomToolbar.dividerSides,
+        centerAlign: bottomToolbar.centerAlign,
+        responsive: bottomToolbar.responsive,
+        responsiveAt: bottomToolbar.responsiveAt,
+        safeAreaEdges: bottomToolbar.safeAreaEdges,
+        leading: bottomToolbar.leading,
+        center: bottomToolbar.center,
+        trailing: bottomToolbar.trailing
+      }
+    ) : null
+  ] }) : void 0;
+  const scrollHeader = headerPlacement === "scroll";
+  const scrollFooter = footerPlacement === "scroll";
+  return /* @__PURE__ */ jsxs(
+    Pane,
+    {
+      header: scrollHeader ? void 0 : panelHeader,
+      footer: scrollFooter ? void 0 : panelFooter,
+      chromePlacement: headerPlacement === "auto" || footerPlacement === "auto" ? "auto" : "fixed",
+      ...paneConfigProps(pane),
+      children: [
+        scrollHeader ? panelHeader : null,
+        content,
+        scrollFooter ? panelFooter : null
+      ]
+    }
+  );
+}
+function relocatedPanelGroups(toolbar, side, collapsed, attributes, size = "default") {
+  if (!collapsed || !toolbar) return [];
+  const groups = [];
+  const collect = (content) => {
+    if (Array.isArray(content)) {
+      for (const item of content) collect(item);
+    } else if (isRelocatableGroup(content)) {
+      groups.push(content);
+    }
+  };
+  collect(toolbar.leading);
+  collect(toolbar.center);
+  collect(toolbar.trailing);
+  return [
+    ...groups,
+    toolbar.toggle ? panelToggleGroup(side, toolbar.toggle, true, attributes, size) : null
+  ].filter((group) => group !== void 0 && group !== null && group !== false);
+}
+
+export { collapsiblePanelToggleIcon, composedPanelBody, groupSizeFor, panelToggleGroup, relocatedPanelGroups };
+
+//# sourceMappingURL=chunk-WSEJ2FDE.js.map

package/dist/chunk-WSEJ2FDE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/panels/panel-toolbar.tsx"],"names":[],"mappings":"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","file":"chunk-WSEJ2FDE.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n} from 'lucide';\n\nimport {\n  Toolbar,\n  type ToolbarConfig,\n} from '../../components/actions/toolbar/toolbar.js';\nimport {\n  ToolbarControlGroup,\n  type ToolbarControlGroupSize,\n} from '../../components/actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  List,\n  type ListConfig,\n} from '../../components/collections/list/list.js';\nimport { paneConfigProps } from '../../components/layout/pane/internal/pane-config-props.js';\nimport { Pane, type PaneConfig } from '../../components/layout/pane/pane.js';\nimport { LucideIcon } from '../../components/media/lucide-icon/lucide-icon.js';\nimport type { KerfUiContent } from '../content/semantic-content.js';\nimport { isRelocatableGroup } from './panel-toolbar-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = '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(\n  side: PanelSide,\n  collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n  if (side === 'left')\n    return collapsed\n      ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n      : { icon: PanelLeftClose, name: 'panel-left-close' };\n  if (side === 'right')\n    return collapsed\n      ? { icon: PanelRightOpen, name: 'panel-right-open' }\n      : { icon: PanelRightClose, name: 'panel-right-close' };\n  return collapsed\n    ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n    : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n  /** The `data-action` the toggle button carries. */\n  action: string;\n  /**\n   * The panel's short title-style name (\"Navigator\", \"Build Output\"). It is\n   * the toggle group's accessible name and completes the default \"Show …\" /\n   * \"Hide …\" label (\"Show Navigator\"), so it follows the title-style rule in\n   * `docs/writing.md`; it is never recapitalized.\n   */\n  name: string;\n  /** Accessible label while the panel is collapsed. Defaults to `Show {name}`. */\n  showLabel?: string;\n  /** Accessible label while the panel is open. Defaults to `Hide {name}`. */\n  hideLabel?: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` precedes the `leading` zone. Groups may appear in any of the\n *   `leading`, `center`, and `trailing` zones while the panel is open.\n * - Groups marked `relocateOnCollapse` move to the work area's toolbar while\n *   the panel is collapsed, preserving their order across the three zones.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n *   open, and right after the relocated groups in the work area's toolbar\n *   while it is collapsed.\n *\n * Relocated content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s. Pass groups directly or in\n * arrays so their render-time annotation remains available to the panel.\n *\n * The toolbar's configuration (`dividerSides`, `centerAlign`, `responsive`,\n * `responsiveAt`, `safeAreaEdges`) forwards to its `Toolbar`. It draws no\n * divider of its own: the panel's `Pane` draws the line under it while the\n * content is scrolled (its `chromeDividers`, wired by `wireScrollDividers`).\n */\nexport interface PanelToolbar extends ToolbarConfig {\n  /** Accessible name of the panel's toolbar. */\n  label: string;\n  title?: KerfUiContent;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  toggle?: PanelToggle;\n}\n\n/** A panel's fixed bottom toolbar, below its optional footer content. */\nexport interface PanelBottomToolbar extends ToolbarConfig {\n  label: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** Whether panel chrome stays fixed, scrolls, or follows Pane's auto rule. */\nexport type PanelChromePlacement = 'fixed' | 'scroll' | 'auto';\n\nfunction panelChromeList(content: KerfUiContent, config?: ListConfig) {\n  return (\n    <List\n      dividerSides={config?.dividerSides}\n      gap={config?.gap}\n      hAlign={config?.hAlign}\n      vAlign={config?.vAlign}\n      textInsets={config?.textInsets}\n      controlInsets={config?.controlInsets}\n    >\n      {content}\n    </List>\n  );\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The group size that fits a toolbar of this density. */\nexport function groupSizeFor(\n  density: ToolbarConfig['density'],\n): ToolbarControlGroupSize {\n  return density === 'compact' ? 'compact' : 'default';\n}\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n  side: PanelSide,\n  toggle: PanelToggle,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n  size: ToolbarControlGroupSize = 'default',\n): SafeHtml {\n  const glyph = collapsiblePanelToggleIcon(side, collapsed);\n  return (\n    <ToolbarControlGroup\n      label={toggle.name}\n      appearance=\"borderless\"\n      size={size}\n      single\n    >\n      <button\n        type=\"button\"\n        {...attributes}\n        data-action={toggle.action}\n        aria-expanded={String(!collapsed)}\n        aria-label={\n          collapsed\n            ? (toggle.showLabel ?? `Show ${toggle.name}`)\n            : (toggle.hideLabel ?? `Hide ${toggle.name}`)\n        }\n      >\n        <LucideIcon icon={glyph.icon} name={glyph.name} />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * The panel's own toolbar: content keeps its chosen zones and the toggle trails.\n */\nexport function composedPanelToolbar(\n  toolbar: PanelToolbar,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n): SafeHtml {\n  return (\n    <Toolbar\n      label={toolbar.label}\n      density={toolbar.density}\n      dividerSides={toolbar.dividerSides}\n      centerAlign={toolbar.centerAlign}\n      responsive={toolbar.responsive}\n      responsiveAt={toolbar.responsiveAt}\n      safeAreaEdges={toolbar.safeAreaEdges}\n      center={toolbar.center}\n      leading={\n        <>\n          {toolbar.title}\n          {toolbar.leading}\n        </>\n      }\n      trailing={\n        <>\n          {toolbar.trailing}\n          {toolbar.toggle\n            ? panelToggleGroup(\n                side,\n                toolbar.toggle,\n                collapsed,\n                attributes,\n                groupSizeFor(toolbar.density),\n              )\n            : null}\n        </>\n      }\n    />\n  );\n}\n\n/**\n * A toolbar panel's body: its content in a `Pane` under its composed toolbar,\n * with its optional `footer` below. The panel's `pane` configuration forwards\n * to that `Pane`; an omitted or `undefined` field keeps the `Pane` default.\n */\nexport function composedPanelBody({\n  toolbar,\n  side,\n  collapsed,\n  attributes,\n  pane,\n  header,\n  headerList,\n  headerPlacement = 'fixed',\n  footer,\n  footerList,\n  bottomToolbar,\n  footerPlacement = 'fixed',\n  content,\n}: {\n  toolbar: PanelToolbar;\n  side: PanelSide;\n  collapsed: boolean;\n  attributes: PanelToggleAttributes;\n  pane: PaneConfig | undefined;\n  header?: KerfUiContent;\n  headerList?: ListConfig;\n  headerPlacement?: PanelChromePlacement;\n  footer?: KerfUiContent;\n  footerList?: ListConfig;\n  bottomToolbar?: PanelBottomToolbar;\n  footerPlacement?: PanelChromePlacement;\n  content: KerfUiContent;\n}): SafeHtml {\n  const panelHeader = (\n    <>\n      {composedPanelToolbar(toolbar, side, collapsed, attributes)}\n      {header ? panelChromeList(header, headerList) : null}\n    </>\n  );\n  const panelFooter =\n    footer || bottomToolbar ? (\n      <>\n        {footer ? panelChromeList(footer, footerList) : null}\n        {bottomToolbar ? (\n          <Toolbar\n            position=\"footer\"\n            label={bottomToolbar.label}\n            density={bottomToolbar.density}\n            dividerSides={bottomToolbar.dividerSides}\n            centerAlign={bottomToolbar.centerAlign}\n            responsive={bottomToolbar.responsive}\n            responsiveAt={bottomToolbar.responsiveAt}\n            safeAreaEdges={bottomToolbar.safeAreaEdges}\n            leading={bottomToolbar.leading}\n            center={bottomToolbar.center}\n            trailing={bottomToolbar.trailing}\n          />\n        ) : null}\n      </>\n    ) : undefined;\n  const scrollHeader = headerPlacement === 'scroll';\n  const scrollFooter = footerPlacement === 'scroll';\n  return (\n    <Pane\n      header={scrollHeader ? undefined : panelHeader}\n      footer={scrollFooter ? undefined : panelFooter}\n      chromePlacement={\n        headerPlacement === 'auto' || footerPlacement === 'auto'\n          ? 'auto'\n          : 'fixed'\n      }\n      {...paneConfigProps(pane)}\n    >\n      {scrollHeader ? panelHeader : null}\n      {content}\n      {scrollFooter ? panelFooter : null}\n    </Pane>\n  );\n}\n\n/**\n * The groups a collapsed panel hands to the work area, in zone order, then its\n * toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n  toolbar: PanelToolbar | undefined,\n  side: PanelSide,\n  collapsed: boolean,\n  attributes: PanelToggleAttributes,\n  size: ToolbarControlGroupSize = 'default',\n): KerfUiContent[] {\n  if (!collapsed || !toolbar) return [];\n  const groups: KerfUiContent[] = [];\n  const collect = (content: KerfUiContent): void => {\n    if (Array.isArray(content)) {\n      for (const item of content) collect(item);\n    } else if (isRelocatableGroup(content)) {\n      groups.push(content);\n    }\n  };\n  collect(toolbar.leading);\n  collect(toolbar.center);\n  collect(toolbar.trailing);\n  return [\n    ...groups,\n    toolbar.toggle\n      ? panelToggleGroup(side, toolbar.toggle, true, attributes, size)\n      : null,\n  ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}

package/dist/chunk-WVS6CUCT.js

@@ -0,0 +1,48 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var spinnerSizePixels = {
+  xs: 12,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 32
+};
+function LoadingSpinner({
+  className = "",
+  color,
+  label,
+  size,
+  slot
+}) {
+  if (typeof size === "number" && (!Number.isFinite(size) || size <= 0))
+    throw new RangeError(
+      "LoadingSpinner size must be a positive finite pixel value"
+    );
+  if (typeof size === "string" && !Object.hasOwn(spinnerSizePixels, size))
+    throw new RangeError("LoadingSpinner size must use a named icon step");
+  const pixels = typeof size === "number" ? size : size && spinnerSizePixels[size];
+  const slotAttribute = { slot };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...slotAttribute,
+      class: `kui-loading-spinner ${className}`.trim(),
+      "data-component": "loading-spinner",
+      "data-size": size === void 0 ? void 0 : String(size),
+      viewBox: "0 0 24 24",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : "true",
+      style: [
+        pixels === void 0 ? void 0 : `--_kui-loading-spinner-size:${remify(pixels)}`,
+        color === void 0 ? void 0 : `color:${color}`
+      ].filter(Boolean).join(";") || void 0,
+      children: /* @__PURE__ */ jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" })
+    }
+  );
+}
+
+export { LoadingSpinner };
+
+//# sourceMappingURL=chunk-WVS6CUCT.js.map

package/dist/chunk-WVS6CUCT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/loading-spinner/loading-spinner.tsx"],"names":[],"mappings":";;;AAQA,IAAM,iBAAA,GAAoB;AAAA,EACxB,EAAA,EAAI,EAAA;AAAA,EACJ,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,EAAA;AAAA,EACH,EAAA,EAAI;AACN,CAAA;AAcO,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAwB;AACtB,EAAA,IAAI,OAAO,SAAS,QAAA,KAAa,CAAC,OAAO,QAAA,CAAS,IAAI,KAAK,IAAA,IAAQ,CAAA,CAAA;AACjE,IAAA,MAAM,IAAI,UAAA;AAAA,MACR;AAAA,KACF;AACF,EAAA,IAAI,OAAO,IAAA,KAAS,QAAA,IAAY,CAAC,MAAA,CAAO,MAAA,CAAO,mBAAmB,IAAI,CAAA;AACpE,IAAA,MAAM,IAAI,WAAW,gDAAgD,CAAA;AACvE,EAAA,MAAM,SACJ,OAAO,IAAA,KAAS,WAAW,IAAA,GAAO,IAAA,IAAQ,kBAAkB,IAAI,CAAA;AAClE,EAAA,MAAM,aAAA,GAAgB,EAAE,IAAA,EAAK;AAC7B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACJ,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC/C,gBAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAW,IAAA,KAAS,MAAA,GAAY,MAAA,GAAY,OAAO,IAAI,CAAA;AAAA,MACvD,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,MAAA;AAAA,MACjC,KAAA,EACE;AAAA,QACE,WAAW,MAAA,GACP,MAAA,GACA,CAAA,4BAAA,EAA+B,MAAA,CAAO,MAAM,CAAC,CAAA,CAAA;AAAA,QACjD,KAAA,KAAU,MAAA,GAAY,MAAA,GAAY,CAAA,MAAA,EAAS,KAAK,CAAA;AAAA,QAE/C,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAAA,MAGlB,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kKAAA,EAAmK;AAAA;AAAA,GAC7K;AAEJ","file":"chunk-WVS6CUCT.js","sourcesContent":["import {\n  type CssForegroundColor,\n  remify,\n} from '../../../shared/styles/css-values.js';\nimport type { LucideIconSize } from '../../media/lucide-icon/lucide-icon.js';\n\nexport type LoadingSpinnerSize = LucideIconSize;\n\nconst spinnerSizePixels = {\n  xs: 12,\n  s: 16,\n  m: 20,\n  l: 24,\n  xl: 32,\n} as const satisfies Record<Exclude<LoadingSpinnerSize, number>, number>;\n\nexport interface LoadingSpinnerProps {\n  className?: string;\n  /** Foreground color; omit to inherit the surrounding text color. */\n  color?: CssForegroundColor;\n  label?: string;\n  /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */\n  size?: LoadingSpinnerSize;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */\nexport function LoadingSpinner({\n  className = '',\n  color,\n  label,\n  size,\n  slot,\n}: LoadingSpinnerProps) {\n  if (typeof size === 'number' && (!Number.isFinite(size) || size <= 0))\n    throw new RangeError(\n      'LoadingSpinner size must be a positive finite pixel value',\n    );\n  if (typeof size === 'string' && !Object.hasOwn(spinnerSizePixels, size))\n    throw new RangeError('LoadingSpinner size must use a named icon step');\n  const pixels =\n    typeof size === 'number' ? size : size && spinnerSizePixels[size];\n  const slotAttribute = { slot };\n  return (\n    <svg\n      {...slotAttribute}\n      class={`kui-loading-spinner ${className}`.trim()}\n      data-component=\"loading-spinner\"\n      data-size={size === undefined ? undefined : String(size)}\n      viewBox=\"0 0 24 24\"\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : 'true'}\n      style={\n        [\n          pixels === undefined\n            ? undefined\n            : `--_kui-loading-spinner-size:${remify(pixels)}`,\n          color === undefined ? undefined : `color:${color}`,\n        ]\n          .filter(Boolean)\n          .join(';') || undefined\n      }\n    >\n      <path d=\"M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z\" />\n    </svg>\n  );\n}\n"]}

package/dist/chunk-XWNXGFX3.js

@@ -0,0 +1,381 @@
+import { COLOR_PICKER_SWATCH_ACTION, COLOR_PICKER_CHANNELS, colorPickerStyle, colorPickerAreaText, colorPickerSlider, hsvFromChannels, colorChannelValues } from './chunk-3Z7N2NAZ.js';
+import { hsvForValue, formatHex, hsvToRgb } from './chunk-TNJLNLVE.js';
+
+// src/components/forms/color-picker/wiring/wire-color-pickers.ts
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+var isMode = (value) => value === "rgb" || value === "hsl" || value === "hsb" || value === "gray";
+function wireColorPickers(root, { onInput, onChange } = {}) {
+  const states = /* @__PURE__ */ new WeakMap();
+  const pickerOf = (element) => element?.closest('[data-component="color-picker"]') ?? null;
+  const alphaOn = (picker) => picker.hasAttribute("data-alpha");
+  const stateOf = (picker) => {
+    let state = states.get(picker);
+    if (!state) {
+      const value = picker.dataset.value;
+      state = {
+        hsv: hsvForValue(value),
+        mode: picker.dataset.mode,
+        value
+      };
+      states.set(picker, state);
+    }
+    return state;
+  };
+  const channelValuesOf = (state) => state.memo?.mode === state.mode && state.memo.hsv === state.hsv ? state.memo.values : colorChannelValues(state.mode, state.hsv);
+  const hexOf = (picker, hsv) => formatHex(hsvToRgb(alphaOn(picker) ? hsv : { ...hsv, a: 1 }));
+  const paint = (picker, skipField) => {
+    const state = stateOf(picker);
+    const { hsv, mode } = state;
+    const exact = channelValuesOf(state);
+    const surface = picker.querySelector(
+      ".kui-color-picker__surface"
+    );
+    surface.setAttribute("style", colorPickerStyle(hsv));
+    const area = surface.querySelector(".kui-color-picker__area");
+    area?.setAttribute("aria-valuenow", String(Math.round(hsv.s * 100)));
+    area?.setAttribute("aria-valuetext", colorPickerAreaText(hsv));
+    for (const input of surface.querySelectorAll(
+      ".kui-color-picker__slider"
+    )) {
+      const slider2 = colorPickerSlider(
+        mode,
+        Number(input.dataset.slider),
+        exact
+      );
+      input.hidden = slider2 === void 0;
+      if (slider2 === void 0) continue;
+      input.max = String(slider2.max);
+      if (input !== skipField) input.value = slider2.value;
+      input.setAttribute("aria-label", slider2.label);
+      input.setAttribute("aria-valuetext", slider2.valueText);
+      input.setAttribute("style", slider2.style);
+    }
+    const opacity = `${Math.round(hsv.a * 100)}%`;
+    const slider = surface.querySelector(
+      ".kui-color-picker__opacity"
+    );
+    if (slider && slider !== skipField) {
+      slider.value = String(Math.round(hsv.a * 100));
+      slider.setAttribute("aria-valuetext", opacity);
+    }
+    const channels = COLOR_PICKER_CHANNELS[mode];
+    const values = exact.map(Math.round);
+    surface.querySelector(".kui-color-picker__channels")?.setAttribute("data-count", String(channels.length));
+    for (const field of surface.querySelectorAll(
+      ".kui-color-picker__channel"
+    )) {
+      const index = Number(field.dataset.channel);
+      const channel = channels[index];
+      const label = field.closest("label");
+      label.hidden = channel === void 0;
+      label.querySelector(".kui-color-picker__field-label").textContent = channel === void 0 ? "" : channel.short;
+      if (channel) field.setAttribute("aria-label", channel.name);
+      if (field !== skipField)
+        field.value = channel ? String(values[index]) : "";
+      field.dataset.shown = field.value;
+    }
+    const hex = hexOf(picker, hsv);
+    const hexField = surface.querySelector(
+      ".kui-color-picker__hex"
+    );
+    if (hexField !== skipField) hexField.value = hex.slice(1).toUpperCase();
+    hexField.dataset.shown = hexField.value;
+    const opacityField = surface.querySelector(
+      ".kui-color-picker__opacity-field"
+    );
+    if (opacityField && opacityField !== skipField)
+      opacityField.value = opacity;
+    if (opacityField) opacityField.dataset.shown = opacityField.value;
+    const hidden = surface.querySelector(
+      'input[type="hidden"]'
+    );
+    if (hidden) hidden.value = hex;
+    surface.querySelector(".kui-color-picker__mode").value = mode;
+  };
+  const report = (picker, committed) => {
+    const state = stateOf(picker);
+    const value = hexOf(picker, state.hsv);
+    state.value = value;
+    const change = {
+      id: picker.dataset.colorPickerId,
+      value,
+      mode: state.mode,
+      element: picker
+    };
+    picker.dispatchEvent(
+      new CustomEvent(committed ? "kui-color-change" : "kui-color-input", {
+        bubbles: true,
+        detail: { value, mode: state.mode }
+      })
+    );
+    if (committed) onChange?.(change);
+    else onInput?.(change);
+  };
+  const update = (picker, next, committed, skipField) => {
+    const state = stateOf(picker);
+    const held = state.memo?.hsv === state.hsv ? state.memo : void 0;
+    state.hsv = { ...state.hsv, ...next };
+    if (held && Object.keys(next).join() === "a") held.hsv = state.hsv;
+    paint(picker, skipField);
+    report(picker, committed);
+  };
+  const setChannel = (picker, index, value, committed, skipField) => {
+    const state = stateOf(picker);
+    const values = [...channelValuesOf(state)];
+    values[index] = clamp(
+      value,
+      0,
+      COLOR_PICKER_CHANNELS[state.mode][index].max
+    );
+    state.hsv = hsvFromChannels(state.mode, values, state.hsv);
+    state.memo = { mode: state.mode, hsv: state.hsv, values };
+    paint(picker, skipField);
+    report(picker, committed);
+  };
+  const disabled = (picker) => picker.hasAttribute("data-disabled");
+  let dragging;
+  const fromPointer = (event, area) => {
+    const box = area.getBoundingClientRect();
+    return {
+      s: clamp((event.clientX - box.left) / box.width, 0, 1),
+      v: clamp(1 - (event.clientY - box.top) / box.height, 0, 1)
+    };
+  };
+  const onPointerDown = (event) => {
+    const area = event.target.closest(
+      ".kui-color-picker__area"
+    );
+    const picker = pickerOf(area);
+    if (!area || !picker || disabled(picker) || event.button !== 0) return;
+    event.preventDefault();
+    area.focus();
+    area.setPointerCapture?.(event.pointerId);
+    dragging = { picker, area };
+    update(picker, fromPointer(event, area), false);
+  };
+  const onPointerMove = (event) => {
+    if (!dragging) return;
+    update(dragging.picker, fromPointer(event, dragging.area), false);
+  };
+  const onPointerUp = () => {
+    if (!dragging) return;
+    const { picker } = dragging;
+    dragging = void 0;
+    report(picker, true);
+  };
+  const onKeyDown = (event) => {
+    const area = event.target.closest(
+      ".kui-color-picker__area"
+    );
+    const picker = pickerOf(area);
+    if (!area || !picker || disabled(picker)) {
+      onFieldKey(event);
+      return;
+    }
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const { s, v } = stateOf(picker).hsv;
+    const rtl = globalThis.getComputedStyle(area).direction === "rtl";
+    const moves = {
+      ArrowRight: { s: clamp(s + (rtl ? -step : step), 0, 1) },
+      ArrowLeft: { s: clamp(s - (rtl ? -step : step), 0, 1) },
+      ArrowUp: { v: clamp(v + step, 0, 1) },
+      ArrowDown: { v: clamp(v - step, 0, 1) },
+      PageUp: { v: clamp(v + 0.1, 0, 1) },
+      PageDown: { v: clamp(v - 0.1, 0, 1) },
+      Home: { s: 0 },
+      End: { s: 1 }
+    };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    update(picker, move, false);
+  };
+  const onKeyUp = (event) => {
+    const picker = pickerOf(
+      event.target.closest(".kui-color-picker__area")
+    );
+    if (picker && /^(Arrow|Page|Home$|End$)/.test(event.key) && !disabled(picker))
+      report(picker, true);
+  };
+  const commitField = (field) => {
+    const picker = pickerOf(field);
+    if (!picker) return;
+    if (field.value === (field.dataset.shown ?? field.getAttribute("value")))
+      return;
+    const state = stateOf(picker);
+    if (field.classList.contains("kui-color-picker__hex")) {
+      const raw = field.value.trim().replace(/^#/, "");
+      const next = /^[\da-f]{3,8}$/i.test(raw) ? hsvForValue(`#${raw}`, state.hsv) : void 0;
+      if (next && [3, 4, 6, 8].includes(raw.length)) {
+        update(picker, alphaOn(picker) ? next : { ...next, a: 1 }, true);
+        return;
+      }
+      paint(picker);
+      return;
+    }
+    if (field.classList.contains("kui-color-picker__opacity-field")) {
+      const number2 = Number.parseFloat(field.value);
+      if (Number.isFinite(number2))
+        update(picker, { a: clamp(number2, 0, 100) / 100 }, true);
+      else paint(picker);
+      return;
+    }
+    const index = Number(field.dataset.channel);
+    const channels = COLOR_PICKER_CHANNELS[state.mode];
+    const channel = channels[index];
+    const number = Number.parseFloat(field.value);
+    if (!channel || !Number.isFinite(number)) {
+      paint(picker);
+      return;
+    }
+    setChannel(picker, index, number, true);
+  };
+  const onFieldKey = (event) => {
+    const field = event.target;
+    if (!(field instanceof HTMLInputElement) || !field.matches(
+      ".kui-color-picker__channel, .kui-color-picker__hex, .kui-color-picker__opacity-field"
+    ))
+      return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitField(field);
+    } else if (event.key === "Escape") {
+      const picker = pickerOf(field);
+      if (picker) paint(picker);
+    }
+  };
+  const onFocusOut = (event) => {
+    const field = event.target;
+    if (field instanceof HTMLInputElement && field.matches(
+      ".kui-color-picker__channel, .kui-color-picker__hex, .kui-color-picker__opacity-field"
+    ))
+      commitField(field);
+  };
+  const onInputEvent = (event) => {
+    const input = event.target;
+    if (!(input instanceof HTMLInputElement)) return;
+    const picker = pickerOf(input);
+    if (!picker) return;
+    if (input.classList.contains("kui-color-picker__slider")) {
+      event.stopPropagation();
+      setChannel(
+        picker,
+        Number(input.dataset.slider),
+        Number(input.value),
+        false,
+        input
+      );
+    } else if (input.classList.contains("kui-color-picker__opacity")) {
+      event.stopPropagation();
+      update(picker, { a: Number(input.value) / 100 }, false, input);
+    }
+  };
+  const onChangeEvent = (event) => {
+    const target = event.target;
+    const picker = pickerOf(target);
+    if (!picker) return;
+    if (target instanceof HTMLInputElement && target.matches(".kui-color-picker__slider, .kui-color-picker__opacity")) {
+      event.stopPropagation();
+      report(picker, true);
+      return;
+    }
+    if (target instanceof HTMLSelectElement && target.classList.contains("kui-color-picker__mode") && isMode(target.value)) {
+      event.stopPropagation();
+      stateOf(picker).mode = target.value;
+      paint(picker);
+      report(picker, true);
+      return;
+    }
+    if (target instanceof HTMLInputElement && target.dataset.action === COLOR_PICKER_SWATCH_ACTION) {
+      event.stopPropagation();
+      const state = stateOf(picker);
+      const next = hsvForValue(target.value, state.hsv);
+      if (next) update(picker, next, true);
+    }
+  };
+  const EyeDropperApi = globalThis.EyeDropper;
+  const revealSamplers = () => {
+    if (!EyeDropperApi) return;
+    for (const button of root.querySelectorAll(
+      ".kui-color-picker__eyedropper[hidden]"
+    ))
+      button.hidden = false;
+  };
+  const onClick = (event) => {
+    const button = event.target.closest(
+      ".kui-color-picker__eyedropper"
+    );
+    const picker = pickerOf(button);
+    if (!button || !picker || !EyeDropperApi || disabled(picker)) return;
+    new EyeDropperApi().open().then(
+      ({ sRGBHex }) => {
+        const state = stateOf(picker);
+        const next = hsvForValue(sRGBHex, state.hsv);
+        if (next) update(picker, { ...next, a: state.hsv.a }, true);
+      },
+      () => {
+      }
+    );
+  };
+  const adopt = (picker, attribute) => {
+    const state = stateOf(picker);
+    if (attribute === "data-mode") {
+      const mode = picker.dataset.mode;
+      if (isMode(mode) && mode !== state.mode) {
+        state.mode = mode;
+        paint(picker);
+      }
+      return;
+    }
+    const value = picker.dataset.value;
+    if (value === void 0 || value === state.value) return;
+    const next = hsvForValue(value, state.hsv);
+    if (!next) return;
+    state.hsv = next;
+    state.value = value;
+    paint(picker);
+  };
+  const observer = new MutationObserver((records) => {
+    revealSamplers();
+    for (const record of records) {
+      if (record.type !== "attributes") continue;
+      const picker = record.target;
+      if (picker.matches('[data-component="color-picker"]'))
+        adopt(picker, record.attributeName);
+    }
+  });
+  observer.observe(root, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-value", "data-mode"]
+  });
+  revealSamplers();
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("pointermove", onPointerMove);
+  root.addEventListener("pointerup", onPointerUp);
+  root.addEventListener("pointercancel", onPointerUp);
+  root.addEventListener("keydown", onKeyDown);
+  root.addEventListener("keyup", onKeyUp);
+  root.addEventListener("focusout", onFocusOut);
+  root.addEventListener("input", onInputEvent);
+  root.addEventListener("change", onChangeEvent);
+  root.addEventListener("click", onClick);
+  return () => {
+    observer.disconnect();
+    root.removeEventListener("pointerdown", onPointerDown);
+    root.removeEventListener("pointermove", onPointerMove);
+    root.removeEventListener("pointerup", onPointerUp);
+    root.removeEventListener("pointercancel", onPointerUp);
+    root.removeEventListener("keydown", onKeyDown);
+    root.removeEventListener("keyup", onKeyUp);
+    root.removeEventListener("focusout", onFocusOut);
+    root.removeEventListener("input", onInputEvent);
+    root.removeEventListener("change", onChangeEvent);
+    root.removeEventListener("click", onClick);
+  };
+}
+
+export { wireColorPickers };
+
+//# sourceMappingURL=chunk-XWNXGFX3.js.map