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

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-XRZSK2WC.js

@@ -0,0 +1,159 @@
+import { scrollEdgeAttributes } from './chunk-IRC5N7FA.js';
+import { ensureSunkenTexture } from './chunk-IKS72C6P.js';
+import { surfaceTintAttributes, joinStyles } from './chunk-ITENVZ6Q.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var paneProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-chrome-placement",
+  "data-compact-header",
+  "data-compact-footer",
+  "data-compact-header-open",
+  "data-compact-footer-open",
+  "data-chrome-dividers",
+  "data-appearance",
+  "data-background",
+  "data-kui-tint",
+  "data-kui-tint-accent",
+  "data-deep-inset",
+  "data-outlined",
+  "data-scroll-clearance",
+  "data-header-presentation",
+  "data-header-material",
+  "data-scroll-edge",
+  "data-scroll-edge-distance",
+  "data-header-overlay",
+  "data-separator-block-start",
+  "data-separator-block-end",
+  "data-separator-inline-start",
+  "data-separator-inline-end",
+  "data-safe-area-block-start",
+  "data-safe-area-block-end",
+  "data-safe-area-inline-start",
+  "data-safe-area-inline-end"
+]);
+var allPaneSides = [
+  "block-start",
+  "block-end",
+  "inline-start",
+  "inline-end"
+];
+function paneContent(element, children, className, label) {
+  const attributes = {
+    class: `kui-pane__content kui-content ${className}`.trim(),
+    "aria-label": label
+  };
+  if (element === "main") return /* @__PURE__ */ jsx("main", { ...attributes, children });
+  if (element === "nav") return /* @__PURE__ */ jsx("nav", { ...attributes, children });
+  if (element === "section")
+    return /* @__PURE__ */ jsx("section", { ...attributes, children });
+  return /* @__PURE__ */ jsx("div", { ...attributes, children });
+}
+function Pane({
+  header,
+  children,
+  footer,
+  chromePlacement = "fixed",
+  chromeDividers,
+  compactChrome = {},
+  compactChromeOpen = {},
+  headerPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  appearance = "default",
+  background,
+  tint,
+  deepInset = false,
+  scrollClearance,
+  tabIndex,
+  outlined = false,
+  element = "div",
+  contentElement = "div",
+  separators = [],
+  safeAreaEdges = allPaneSides,
+  id,
+  label,
+  contentLabel,
+  className = "",
+  headerClassName = "",
+  contentClassName = "",
+  footerClassName = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    paneProtectedAttributes
+  );
+  const content = paneContent(
+    contentElement,
+    children,
+    contentClassName,
+    contentLabel
+  );
+  const resolvedChromeDividers = chromeDividers ?? (appearance === "sunken" ? "always" : "scroll");
+  if (appearance === "sunken" && background === void 0)
+    ensureSunkenTexture();
+  const tinted = surfaceTintAttributes(tint);
+  const clearHeader = headerPresentation === "clear" && header !== void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header === void 0 ? null : /* @__PURE__ */ jsx(
+      "header",
+      {
+        class: `kui-pane__header kui-pane__toolbar ${headerClassName}`.trim(),
+        children: header
+      }
+    ),
+    content,
+    footer === void 0 ? null : /* @__PURE__ */ jsx("footer", { class: `kui-pane__footer ${footerClassName}`.trim(), children: footer })
+  ] });
+  const attributes = {
+    ...safeRootAttributes,
+    class: `kui-pane ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
+    id,
+    "data-component": "pane",
+    "data-appearance": appearance === "sunken" ? "sunken" : void 0,
+    "data-background": background === void 0 ? void 0 : "",
+    "data-kui-tint": tinted["data-kui-tint"],
+    "data-kui-tint-accent": tinted["data-kui-tint-accent"],
+    style: joinStyles(
+      background === void 0 ? void 0 : `--_kui-pane-background:${background}`,
+      tinted.style
+    ),
+    "data-deep-inset": deepInset ? "true" : void 0,
+    "data-outlined": outlined ? "true" : void 0,
+    "data-scroll-clearance": scrollClearance,
+    "data-header-presentation": headerPresentation !== "docked" && header !== void 0 ? "overlay" : void 0,
+    "data-header-material": clearHeader ? "clear" : void 0,
+    ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),
+    "data-chrome-placement": chromePlacement === "auto" ? "auto" : void 0,
+    "data-compact-header": header !== void 0 && compactChrome.header !== "fixed" ? compactChrome.header : void 0,
+    "data-compact-footer": footer !== void 0 && compactChrome.footer !== "fixed" ? compactChrome.footer : void 0,
+    "data-compact-header-open": compactChrome.header === "overlay" && compactChromeOpen.header ? "" : void 0,
+    "data-compact-footer-open": compactChrome.footer === "overlay" && compactChromeOpen.footer ? "" : void 0,
+    "data-chrome-dividers": resolvedChromeDividers === "always" || resolvedChromeDividers === "none" ? resolvedChromeDividers : void 0,
+    "data-separator-block-start": String(separators.includes("block-start")),
+    "data-separator-block-end": String(separators.includes("block-end")),
+    "data-separator-inline-start": String(separators.includes("inline-start")),
+    "data-separator-inline-end": String(separators.includes("inline-end")),
+    "data-safe-area-block-start": String(safeAreaEdges.includes("block-start")),
+    "data-safe-area-block-end": String(safeAreaEdges.includes("block-end")),
+    "data-safe-area-inline-start": String(
+      safeAreaEdges.includes("inline-start")
+    ),
+    "data-safe-area-inline-end": String(safeAreaEdges.includes("inline-end")),
+    "aria-label": label,
+    tabindex: tabIndex,
+    slot
+  };
+  if (element === "article") return /* @__PURE__ */ jsx("article", { ...attributes, children: body });
+  if (element === "aside") return /* @__PURE__ */ jsx("aside", { ...attributes, children: body });
+  if (element === "main") return /* @__PURE__ */ jsx("main", { ...attributes, children: body });
+  if (element === "section") return /* @__PURE__ */ jsx("section", { ...attributes, children: body });
+  return /* @__PURE__ */ jsx("div", { ...attributes, children: body });
+}
+
+export { Pane };
+
+//# sourceMappingURL=chunk-XRZSK2WC.js.map

package/dist/chunk-XRZSK2WC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/pane/pane.tsx"],"names":[],"mappings":"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","file":"chunk-XRZSK2WC.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport { ensureSunkenTexture } from '../../../shared/styles/sunken-texture.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n  'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n  'data-component',\n  'data-chrome-placement',\n  'data-compact-header',\n  'data-compact-footer',\n  'data-compact-header-open',\n  'data-compact-footer-open',\n  'data-chrome-dividers',\n  'data-appearance',\n  'data-background',\n  'data-kui-tint',\n  'data-kui-tint-accent',\n  'data-deep-inset',\n  'data-outlined',\n  'data-scroll-clearance',\n  'data-header-presentation',\n  'data-header-material',\n  'data-scroll-edge',\n  'data-scroll-edge-distance',\n  'data-header-overlay',\n  'data-separator-block-start',\n  'data-separator-block-end',\n  'data-separator-inline-start',\n  'data-separator-inline-end',\n  'data-safe-area-block-start',\n  'data-safe-area-block-end',\n  'data-safe-area-inline-start',\n  'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n  'block-start',\n  'block-end',\n  'inline-start',\n  'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-separator-block-start'?: never;\n    'data-separator-block-end'?: never;\n    'data-separator-inline-start'?: never;\n    'data-separator-inline-end'?: never;\n    'data-safe-area-block-start'?: never;\n    'data-safe-area-block-end'?: never;\n    'data-safe-area-inline-start'?: never;\n    'data-safe-area-inline-end'?: never;\n    'data-chrome-placement'?: never;\n    'data-chrome-dividers'?: never;\n    'data-appearance'?: never;\n    'data-background'?: never;\n    'data-kui-tint'?: never;\n    'data-kui-tint-accent'?: never;\n    'data-deep-inset'?: never;\n    'data-outlined'?: never;\n    'data-scroll-clearance'?: never;\n    'data-header-presentation'?: never;\n    'data-header-material'?: never;\n    'data-scroll-edge'?: never;\n    'data-scroll-edge-distance'?: never;\n    'data-header-overlay'?: never;\n    'data-compact-header'?: never;\n    'data-compact-footer'?: never;\n    'data-compact-header-open'?: never;\n    'data-compact-footer-open'?: never;\n  }\n>;\n\n/** How a Pane's header and footer relate to its scrolling content. */\nexport type PaneChromePlacement = 'fixed' | 'auto';\n\n/**\n * How a header or footer behaves when the pane's container presents\n * compactly (a `NavStack` view, a `TabNavigator` scene, a full-screen dialog,\n * or a compact `Workbench`): `fixed` stays docked and shrinks the content\n * area; `scroll` sits inline with the content (a footer settles at the end\n * and scrolls past when the content is longer); `overlay` lies over the\n * content on the chrome material, shown only while the app opens it.\n */\nexport type PaneCompactChrome = 'fixed' | 'scroll' | 'overlay';\n\n/** The compact chrome policy for a Pane's header and footer. */\nexport interface PaneCompactChromePolicy {\n  header?: PaneCompactChrome;\n  footer?: PaneCompactChrome;\n}\n\n/**\n * When a Pane draws the divider between its pinned header or footer and its\n * scrolling content: `scroll` while content is scrolled away beneath that\n * chrome, as `wireScrollDividers` reports; `always`; or `none`.\n */\nexport type PaneChromeDividers = 'scroll' | 'always' | 'none';\n\n/**\n * How a Pane's header relates to its scrolling content: `docked` in its own\n * row above the content, or `overlay` laid over the content's top edge on the\n * translucent chrome material, so content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type PaneHeaderPresentation = 'docked' | 'overlay' | 'clear';\n\n/** Background treatment of the Pane's scrolling work surface. */\nexport type PaneAppearance = 'default' | 'sunken';\n\nexport interface PaneProps {\n  /** Optional fixed chrome above the scrolling content, arranged vertically. */\n  header?: KerfUiContent;\n  /** The pane's primary vertical, scrolling content stack. */\n  children?: KerfUiContent;\n  /** Optional fixed chrome below the scrolling content. */\n  footer?: KerfUiContent;\n  /**\n   * Whether the header and footer stay pinned around the scrolling content.\n   * `fixed` (default) always pins them. `auto` pins them while the pane is\n   * tall enough, and below 480px of height (30rem, so it scales with the text\n   * size) lets the whole pane scroll as one column, so tall chrome can never\n   * squeeze the content to nothing.\n   */\n  chromePlacement?: PaneChromePlacement;\n  /**\n   * The divider under the header and over the footer, where they meet the\n   * scrolling content. Omitted defaults to `scroll` for a plain pane and\n   * `always` for `appearance=\"sunken\"`. `scroll` shows the header's divider only\n   * while the content is scrolled down, and the footer's only while more\n   * content lies below — never when the content fits — once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane; unwired, neither shows. `always` shows both; `none` neither.\n   * The line is drawn inside the chrome, so no state moves the content.\n   */\n  chromeDividers?: PaneChromeDividers;\n  /**\n   * `docked` (default) gives the header its own row above the scrolling\n   * content. `overlay` lays the header over the content's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, forced colors, or without\n   * `backdrop-filter`), so content scrolls visibly beneath it. Once\n   * `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is wired above\n   * the pane it measures the header and publishes its height as the\n   * `--kui-scroll-clearance-block-start` context, which the content adds to\n   * its block-start padding and `scroll-padding` without any\n   * `scrollClearance` prop, so the first item, and anything focused or\n   * scrolled into view, rests clear of the header. Until then, and with\n   * `chromePlacement=\"auto\"`, the header stays docked. Keep overlay header\n   * text in the normal text color: quiet text can fall below AA over the\n   * content passing beneath it.\n   */\n  /**\n   * What the header and footer do when the pane's container presents\n   * compactly (default `fixed`); roomy containers ignore it. The container\n   * interprets it, so set it on panes inside a `NavStack`, `TabNavigator`,\n   * full-screen dialog, or `Workbench`.\n   */\n  compactChrome?: PaneCompactChromePolicy;\n  /**\n   * Which `overlay` compact chrome is showing. The app owns it and flips it\n   * from a control the person can reach while the chrome is hidden.\n   */\n  compactChromeOpen?: { header?: boolean; footer?: boolean };\n  headerPresentation?: PaneHeaderPresentation;\n  /**\n   * With `headerPresentation=\"clear\"`, `material` fades the chrome material\n   * in behind the header once content scrolls beneath it (default `none`).\n   */\n  scrollEdge?: ScrollEdge;\n  /**\n   * The scroll distance, in CSS pixels, over which the scroll edge fades in\n   * (default 60).\n   */\n  scrollEdgeDistance?: number;\n  /** Paint the scrolling work surface with the shared lowered-surface color. */\n  appearance?: PaneAppearance;\n  /**\n   * Paint the whole pane, header and footer included, in an app-chosen color\n   * (`uiColor('surface-raised')`, `fillColor('#1f2a44')`, or `colorVar(…)`\n   * from `@kerfjs/ui/css-values`). It replaces the appearance's fill: a sunken\n   * pane drops its lowered color and grain. Omitted, the pane keeps its\n   * default (transparent, or the sunken surface). Forced colors paint\n   * `Canvas`. Keep text at AA over the color; a dark color needs a matching\n   * tint or dark tones for its content.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint: `{ color, scheme }`, the app's color and the scheme it\n   * belongs to. The pane paints the tinted surface (unless `background` is\n   * set) and its whole subtree, chrome material and quiet fills included,\n   * re-derives its surface and text tokens from the color with lightness\n   * clamped to keep text at WCAG AA. Without relative color syntax, or under\n   * `prefers-contrast: more`, the scope keeps the plain palette in the\n   * declared scheme.\n   */\n  tint?: SurfaceTint;\n  /**\n   * Clear chrome that lies over the scrolling content's block-start and/or\n   * block-end edge, such as a `DialogSurface` floating footer over a filling\n   * Pane. The content scroller adds the inherited\n   * `--kui-scroll-clearance-block-*` context that chrome publishes to its block\n   * padding and `scroll-padding`, so content scrolls visibly beneath the chrome\n   * while its first and last items (and anything focused or scrolled into\n   * view) can still rest clear of it. Defaults to none.\n   */\n  scrollClearance?: ScrollClearance;\n  /** Add 8px to every side of scrolling content (default: false). */\n  deepInset?: boolean;\n  /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the Pane root. */\n  tabIndex?: 0 | -1;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  /** Root semantics. Defaults to `div`. */\n  element?: PaneElement;\n  /** Scrolling content semantics. Defaults to `div`. */\n  contentElement?: PaneContentElement;\n  /** Independent logical-edge separator lines. Defaults to none. */\n  separators?: readonly PaneSeparatorSide[];\n  /**\n   * Sides on which the pane may compensate for a device safe-area inset.\n   * Defaults to every side: the pane pads its slots for each side that still\n   * reaches an unsafe screen edge, as its surrounding layout reports, while its\n   * background and separators paint through. List only the sides an app-owned\n   * layout places at a screen edge, or pass `[]` to opt out.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  id?: string;\n  /** Accessible name for a landmark root such as `aside` or `main`. */\n  label?: string;\n  /** Accessible name for a landmark scrolling slot such as `nav`. */\n  contentLabel?: string;\n  className?: string;\n  headerClassName?: string;\n  contentClassName?: string;\n  footerClassName?: string;\n  /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n  rootAttributes?: PaneRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A pane's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `Pane` for the app (a Workbench panel or work area,\n * or a CollapsiblePanel) forwards, so the app configures that pane instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type PaneConfig = Pick<\n  PaneProps,\n  | 'contentElement'\n  | 'contentLabel'\n  | 'separators'\n  | 'safeAreaEdges'\n  | 'chromeDividers'\n  | 'compactChrome'\n  | 'compactChromeOpen'\n  | 'headerPresentation'\n  | 'scrollEdge'\n  | 'scrollEdgeDistance'\n  | 'appearance'\n  | 'background'\n  | 'tint'\n  | 'deepInset'\n  | 'scrollClearance'\n  | 'tabIndex'\n  | 'outlined'\n>;\n\nfunction paneContent(\n  element: PaneContentElement,\n  children: KerfUiContent,\n  className: string,\n  label: string | undefined,\n) {\n  const attributes = {\n    class: `kui-pane__content kui-content ${className}`.trim(),\n    'aria-label': label,\n  };\n  if (element === 'main') return <main {...attributes}>{children}</main>;\n  if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n  if (element === 'section')\n    return <section {...attributes}>{children}</section>;\n  return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n  header,\n  children,\n  footer,\n  chromePlacement = 'fixed',\n  chromeDividers,\n  compactChrome = {},\n  compactChromeOpen = {},\n  headerPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  appearance = 'default',\n  background,\n  tint,\n  deepInset = false,\n  scrollClearance,\n  tabIndex,\n  outlined = false,\n  element = 'div',\n  contentElement = 'div',\n  separators = [],\n  safeAreaEdges = allPaneSides,\n  id,\n  label,\n  contentLabel,\n  className = '',\n  headerClassName = '',\n  contentClassName = '',\n  footerClassName = '',\n  rootAttributes = {},\n  slot,\n}: PaneProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    paneProtectedAttributes,\n  );\n  const content = paneContent(\n    contentElement,\n    children,\n    contentClassName,\n    contentLabel,\n  );\n  const resolvedChromeDividers =\n    chromeDividers ?? (appearance === 'sunken' ? 'always' : 'scroll');\n  if (appearance === 'sunken' && background === undefined)\n    ensureSunkenTexture();\n  const tinted = surfaceTintAttributes(tint);\n  const clearHeader = headerPresentation === 'clear' && header !== undefined;\n  const body = (\n    <>\n      {header === undefined ? null : (\n        <header\n          class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n        >\n          {header}\n        </header>\n      )}\n      {content}\n      {footer === undefined ? null : (\n        <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n          {footer}\n        </footer>\n      )}\n    </>\n  );\n  const attributes = {\n    ...safeRootAttributes,\n    class: `kui-pane ${tinted.className} ${className}`\n      .replace(/\\s+/g, ' ')\n      .trim(),\n    id,\n    'data-component': 'pane',\n    'data-appearance': appearance === 'sunken' ? 'sunken' : undefined,\n    'data-background': background === undefined ? undefined : '',\n    'data-kui-tint': tinted['data-kui-tint'],\n    'data-kui-tint-accent': tinted['data-kui-tint-accent'],\n    style: joinStyles(\n      background === undefined\n        ? undefined\n        : `--_kui-pane-background:${background}`,\n      tinted.style,\n    ),\n    'data-deep-inset': deepInset ? 'true' : undefined,\n    'data-outlined': outlined ? 'true' : undefined,\n    'data-scroll-clearance': scrollClearance,\n    'data-header-presentation':\n      headerPresentation !== 'docked' && header !== undefined\n        ? 'overlay'\n        : undefined,\n    'data-header-material': clearHeader ? 'clear' : undefined,\n    ...scrollEdgeAttributes(scrollEdge, scrollEdgeDistance, clearHeader),\n    'data-chrome-placement': chromePlacement === 'auto' ? 'auto' : undefined,\n    'data-compact-header':\n      header !== undefined && compactChrome.header !== 'fixed'\n        ? compactChrome.header\n        : undefined,\n    'data-compact-footer':\n      footer !== undefined && compactChrome.footer !== 'fixed'\n        ? compactChrome.footer\n        : undefined,\n    'data-compact-header-open':\n      compactChrome.header === 'overlay' && compactChromeOpen.header\n        ? ''\n        : undefined,\n    'data-compact-footer-open':\n      compactChrome.footer === 'overlay' && compactChromeOpen.footer\n        ? ''\n        : undefined,\n    'data-chrome-dividers':\n      resolvedChromeDividers === 'always' || resolvedChromeDividers === 'none'\n        ? resolvedChromeDividers\n        : undefined,\n    'data-separator-block-start': String(separators.includes('block-start')),\n    'data-separator-block-end': String(separators.includes('block-end')),\n    'data-separator-inline-start': String(separators.includes('inline-start')),\n    'data-separator-inline-end': String(separators.includes('inline-end')),\n    'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n    'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n    'data-safe-area-inline-start': String(\n      safeAreaEdges.includes('inline-start'),\n    ),\n    'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n    'aria-label': label,\n    tabindex: tabIndex,\n    slot,\n  };\n\n  if (element === 'article') return <article {...attributes}>{body}</article>;\n  if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n  if (element === 'main') return <main {...attributes}>{body}</main>;\n  if (element === 'section') return <section {...attributes}>{body}</section>;\n  return <div {...attributes}>{body}</div>;\n}\n\nexport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nexport type { ScrollEdge } from '../../../shared/layout/scroll-edge.js';\nexport type {\n  SurfaceTint,\n  SurfaceTintScheme,\n} from '../../../shared/styles/surface-tint.js';\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