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

package/dist/chunk-IIQ2XIMU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-IIQ2XIMU.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  type ScrollEdge,\n  scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n  joinStyles,\n  type SurfaceTint,\n  surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n  type HeadingLevel,\n  ToolbarText,\n  type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n  NavStackViewToolbar,\n  PanelBottomToolbar\n> {\n  /** Stable identity for keyed reconcile and transition direction. */\n  key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n  title?: string;\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n  /** Accessible name of the top toolbar (default: none). */\n  label?: string;\n  /**\n   * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n   * where the title is the page heading, and `large` once a back control\n   * shares the bar.\n   */\n  titleSize?: ToolbarTextSize;\n  /** Expose the view title as a heading at this level (default: a plain span). */\n  headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's 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 NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * 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\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n  id: string;\n  /** Accessible name for the stack region. */\n  label: string;\n  /** The stack, root first; the last entry is the active top view. */\n  views: NavStackView[];\n  /** Accessible label for the icon-only back control (default \"Back\"). */\n  backLabel?: string;\n  /** The back control's icon (default a chevron-left `LucideIcon`). */\n  backIcon?: KerfUiContent;\n  /**\n   * Visible text beside the back icon, such as the previous view's title\n   * (default: icon only). When set, the text names the control and\n   * `backLabel` is not used.\n   */\n  backText?: string;\n  /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n  toolbarConfig?: NavStackToolbarConfig;\n  /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n  panelToggle?: KerfUiContent;\n  /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n  hideToolbar?: boolean;\n  /** Optional persistent bottom toolbar used when the active view does not provide one. */\n  bottomToolbar?: NavStackViewBottomToolbar;\n  /**\n   * Stack chrome separator. `auto` (default) draws both available edges\n   * against a sunken active Pane and otherwise follows `chromeDividers`;\n   * `hidden` suppresses the stack-owned edges.\n   */\n  separator?: 'auto' | 'hidden';\n  /**\n   * The line under the top chrome and over the bottom toolbar, where they\n   * meet the active view. `scroll` (default) shows the chrome's line only\n   * while the view's content is scrolled beneath it, and the bottom\n   * toolbar's only while more content lies below — never when the content\n   * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n   * wired above the stack; unwired, neither shows. `always` shows both\n   * without the wiring; `none` neither, even when wired. The line is drawn\n   * inside the chrome, so no state moves the chrome or the content. A\n   * A sunken active Pane still draws the separator unless\n   * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n   * own and is unaffected.\n   */\n  chromeDividers?: 'scroll' | 'always' | 'none';\n  /**\n   * `docked` (default) gives the top chrome its own band above the active\n   * view. `overlay` lays the chrome over the view's top edge on the\n   * translucent chrome material (`--kui-chrome-material`, opaque under\n   * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n   * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n   * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n   * hands its height (top safe area included) to the viewport as the\n   * block-start `--kui-edge-inset-*` context, so every view clears it with no\n   * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n   * layout all pad and `scroll-padding` by it, so the first item, and anything\n   * focused or scrolled into view, rests clear of the bar. Until then, and\n   * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n   * the chrome lifts its title and description to AA over the content passing\n   * beneath it; keep any other quiet copy in the view. With `clear`, the\n   * stack's own back control sits in a glass control group\n   * (`material=\"glass\"`), so it stays legible over imagery.\n   */\n  chromePresentation?: NavStackChromePresentation;\n  /**\n   * `docked` (default) gives the bottom toolbar its own band below the\n   * active view. `overlay` lays it over the view's bottom edge on the\n   * translucent chrome material (opaque under the same preferences as\n   * `chromePresentation`), so content scrolls visibly beneath it, as under\n   * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n   * cross-fading copy) and hands its height (bottom safe area included) to\n   * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n   * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n   * last item, and anything focused or scrolled into view, clear of it. Until\n   * then, and while no bottom toolbar is shown, it stays docked. Independent\n   * of `chromePresentation`, which governs only the top chrome. An untoned\n   * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n   */\n  bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n  /**\n   * For `clear` chrome or bottom toolbar, `material` fades the chrome\n   * material in while the active view's content lies beneath it (default\n   * `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  /**\n   * Paint the stack, its docked chrome and bottom toolbar, and every view in\n   * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n   * the surface. Overlay chrome keeps the chrome material; one view's own\n   * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n   */\n  background?: CssColor;\n  /**\n   * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n   * descendant re-derive their surface and text tokens from the app's color\n   * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n   */\n  tint?: SurfaceTint;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n  'block-start',\n  'inline-start',\n  'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n  'block-end',\n  'inline-start',\n  'inline-end',\n] as const;\n\nfunction chromeList(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/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n  id,\n  label,\n  views,\n  backLabel = 'Back',\n  backIcon,\n  backText,\n  toolbarConfig = {},\n  panelToggle,\n  hideToolbar = false,\n  bottomToolbar,\n  separator = 'auto',\n  chromeDividers = 'scroll',\n  chromePresentation = 'docked',\n  bottomToolbarPresentation = 'docked',\n  scrollEdge = 'none',\n  scrollEdgeDistance,\n  background,\n  tint,\n  className = '',\n  slot,\n}: NavStackProps) {\n  const tinted = surfaceTintAttributes(tint);\n  const topIndex = views.length - 1;\n  const top = views[topIndex];\n  const topToolbar = top?.toolbar;\n  const bottom = top?.bottomToolbar ?? bottomToolbar;\n  const canPop = views.length > 1;\n  const topDensity = topToolbar?.density ?? toolbarConfig.density;\n  // With a back control, the title centers on the bar (iOS-style) unless the\n  // view owns the center zone; at the root it leads and fills, left-aligned.\n  const centerTitle = canPop && topToolbar?.center === undefined;\n  const title = (\n    <ToolbarText\n      text={topToolbar?.title ?? ''}\n      size={\n        topToolbar?.titleSize ??\n        toolbarConfig.titleSize ??\n        (canPop ? 'large' : 'xlarge')\n      }\n      headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n      fill={!centerTitle}\n    />\n  );\n  return (\n    <section\n      class={`kui-nav-stack ${tinted.className} ${className}`\n        .replace(/\\s+/g, ' ')\n        .trim()}\n      id={id}\n      data-component=\"nav-stack\"\n      data-nav-stack-id={id}\n      data-depth={String(views.length)}\n      data-separator={separator}\n      data-chrome-dividers={\n        chromeDividers === 'always' || chromeDividers === 'none'\n          ? chromeDividers\n          : undefined\n      }\n      data-chrome-presentation={\n        chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n      }\n      data-chrome-material={\n        chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n      }\n      data-bottom-toolbar-presentation={\n        bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n      }\n      data-bottom-toolbar-material={\n        bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n      }\n      {...scrollEdgeAttributes(\n        scrollEdge,\n        scrollEdgeDistance,\n        (chromePresentation === 'clear' && !hideToolbar) ||\n          bottomToolbarPresentation === 'clear',\n      )}\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-nav-stack-background:${background}`,\n        tinted.style,\n      )}\n      aria-label={label}\n      slot={slot}\n    >\n      {!hideToolbar && (\n        <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n          <Toolbar\n            label={topToolbar?.label ?? toolbarConfig.label}\n            density={topDensity}\n            dividerSides={\n              topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n            }\n            centerAlign={\n              centerTitle\n                ? 'balanced'\n                : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n            }\n            responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n            responsiveAt={\n              topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n            }\n            safeAreaEdges={\n              topToolbar?.safeAreaEdges ??\n              toolbarConfig.safeAreaEdges ??\n              DEFAULT_SAFE_AREA_EDGES\n            }\n            leading={\n              <>\n                {canPop && (\n                  <ToolbarControlGroup\n                    content={backText ? 'mixed' : 'icon'}\n                    size={topDensity === 'compact' ? 'compact' : 'default'}\n                    material={\n                      chromePresentation === 'clear' ? 'glass' : undefined\n                    }\n                    single\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"kui-nav-stack__back\"\n                      data-nav-back\n                      aria-label={backText ? undefined : backLabel}\n                    >\n                      {backIcon ?? (\n                        <LucideIcon\n                          icon={ChevronLeft}\n                          name=\"chevron-left\"\n                          className=\"kui-nav-stack__back-icon\"\n                        />\n                      )}\n                      {backText ? <span>{backText}</span> : null}\n                    </button>\n                  </ToolbarControlGroup>\n                )}\n                {topToolbar?.leading}\n                {centerTitle ? null : title}\n              </>\n            }\n            center={centerTitle ? title : topToolbar?.center}\n            trailing={\n              <>\n                {topToolbar?.trailing}\n                {panelToggle}\n              </>\n            }\n          />\n        </div>\n      )}\n      <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n        {views.map((view, index) => (\n          <article\n            class=\"kui-nav-stack__view\"\n            data-key={view.key}\n            data-nav-key={view.key}\n            data-nav-active={String(index === topIndex)}\n            aria-hidden={String(index !== topIndex)}\n          >\n            {view.pane ||\n            view.header !== undefined ||\n            view.footer !== undefined ? (\n              <Pane\n                {...paneConfigProps(view.pane)}\n                header={\n                  view.header === undefined ? undefined : (\n                    <div data-nav-stack-header>\n                      {chromeList(view.header, view.headerList)}\n                    </div>\n                  )\n                }\n                footer={\n                  view.footer === undefined ? undefined : (\n                    <div data-nav-stack-footer>\n                      {chromeList(view.footer, view.footerList)}\n                    </div>\n                  )\n                }\n              >\n                {view.content}\n              </Pane>\n            ) : (\n              view.content\n            )}\n          </article>\n        ))}\n      </div>\n      {bottom && (\n        <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n          <Toolbar\n            position=\"footer\"\n            label={bottom.label}\n            density={bottom.density}\n            dividerSides={bottom.dividerSides}\n            centerAlign={bottom.centerAlign}\n            responsive={bottom.responsive}\n            responsiveAt={bottom.responsiveAt}\n            safeAreaEdges={\n              bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n            }\n            leading={bottom.leading}\n            center={bottom.center}\n            trailing={bottom.trailing}\n          />\n        </footer>\n      )}\n    </section>\n  );\n}\n"]}

package/dist/chunk-IKS72C6P.js

@@ -0,0 +1,53 @@
+// src/shared/styles/sunken-texture.ts
+var SUNKEN_TEXTURE_PROPERTY = "--_kui-sunken-texture-generated";
+var TILE = 100;
+var MAX_OPACITY = 0.04;
+var SEED = 7;
+function random(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let value = state;
+    value = Math.imul(value ^ value >>> 15, value | 1);
+    value ^= value + Math.imul(value ^ value >>> 7, value | 61);
+    return ((value ^ value >>> 14) >>> 0) / 4294967296;
+  };
+}
+function sunkenTexturePixels() {
+  const next = random(SEED);
+  const pixels = new Uint8ClampedArray(TILE * TILE * 4);
+  for (let index = 0; index < TILE * TILE; index += 1) {
+    const u = 1 - next();
+    const v = next();
+    const gaussian = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+    const strength = Math.max(-1, Math.min(1, gaussian / 2.5));
+    const channel = strength < 0 ? 0 : 255;
+    const offset = index * 4;
+    pixels[offset] = channel;
+    pixels[offset + 1] = channel;
+    pixels[offset + 2] = channel;
+    pixels[offset + 3] = Math.round(Math.abs(strength) * MAX_OPACITY * 255);
+  }
+  return pixels;
+}
+function sunkenTextureDataUrl(doc = globalThis.document) {
+  const canvas = doc?.createElement("canvas");
+  const context = canvas?.getContext("2d");
+  if (!canvas || !context) return void 0;
+  canvas.width = TILE;
+  canvas.height = TILE;
+  const image = context.createImageData(TILE, TILE);
+  image.data.set(sunkenTexturePixels());
+  context.putImageData(image, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+function ensureSunkenTexture(doc = globalThis.document) {
+  const root = doc?.documentElement;
+  if (!root || root.style.getPropertyValue(SUNKEN_TEXTURE_PROPERTY)) return;
+  const url = sunkenTextureDataUrl(doc);
+  if (url) root.style.setProperty(SUNKEN_TEXTURE_PROPERTY, `url("${url}")`);
+}
+
+export { ensureSunkenTexture };
+
+//# sourceMappingURL=chunk-IKS72C6P.js.map

package/dist/chunk-IKS72C6P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles/sunken-texture.ts"],"names":[],"mappings":";AAOO,IAAM,uBAAA,GAA0B,iCAAA;AAGvC,IAAM,IAAA,GAAO,GAAA;AAEb,IAAM,WAAA,GAAc,IAAA;AACpB,IAAM,IAAA,GAAO,CAAA;AAGb,SAAS,OAAO,IAAA,EAA4B;AAC1C,EAAA,IAAI,QAAQ,IAAA,KAAS,CAAA;AACrB,EAAA,OAAO,MAAM;AACX,IAAA,KAAA,GAAS,QAAQ,UAAA,KAAgB,CAAA;AACjC,IAAA,IAAI,KAAA,GAAQ,KAAA;AACZ,IAAA,KAAA,GAAQ,KAAK,IAAA,CAAK,KAAA,GAAS,KAAA,KAAU,EAAA,EAAK,QAAQ,CAAC,CAAA;AACnD,IAAA,KAAA,IAAS,QAAQ,IAAA,CAAK,IAAA,CAAK,QAAS,KAAA,KAAU,CAAA,EAAI,QAAQ,EAAE,CAAA;AAC5D,IAAA,OAAA,CAAA,CAAS,KAAA,GAAS,KAAA,KAAU,EAAA,MAAS,CAAA,IAAK,UAAA;AAAA,EAC5C,CAAA;AACF;AAMO,SAAS,mBAAA,GAAyC;AACvD,EAAA,MAAM,IAAA,GAAO,OAAO,IAAI,CAAA;AACxB,EAAA,MAAM,MAAA,GAAS,IAAI,iBAAA,CAAkB,IAAA,GAAO,OAAO,CAAC,CAAA;AACpD,EAAA,KAAA,IAAS,QAAQ,CAAA,EAAG,KAAA,GAAQ,IAAA,GAAO,IAAA,EAAM,SAAS,CAAA,EAAG;AAEnD,IAAA,MAAM,CAAA,GAAI,IAAI,IAAA,EAAK;AACnB,IAAA,MAAM,IAAI,IAAA,EAAK;AACf,IAAA,MAAM,QAAA,GAAW,IAAA,CAAK,IAAA,CAAK,EAAA,GAAK,KAAK,GAAA,CAAI,CAAC,CAAC,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,CAAA,GAAI,IAAA,CAAK,KAAK,CAAC,CAAA;AACvE,IAAA,MAAM,QAAA,GAAW,KAAK,GAAA,CAAI,EAAA,EAAI,KAAK,GAAA,CAAI,CAAA,EAAG,QAAA,GAAW,GAAG,CAAC,CAAA;AACzD,IAAA,MAAM,OAAA,GAAU,QAAA,GAAW,CAAA,GAAI,CAAA,GAAI,GAAA;AACnC,IAAA,MAAM,SAAS,KAAA,GAAQ,CAAA;AACvB,IAAA,MAAA,CAAO,MAAM,CAAA,GAAI,OAAA;AACjB,IAAA,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,GAAI,OAAA;AACrB,IAAA,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,GAAI,OAAA;AACrB,IAAA,MAAA,CAAO,MAAA,GAAS,CAAC,CAAA,GAAI,IAAA,CAAK,KAAA,CAAM,KAAK,GAAA,CAAI,QAAQ,CAAA,GAAI,WAAA,GAAc,GAAG,CAAA;AAAA,EACxE;AACA,EAAA,OAAO,MAAA;AACT;AAGO,SAAS,oBAAA,CACd,GAAA,GAAgB,UAAA,CAAW,QAAA,EACP;AACpB,EAAA,MAAM,MAAA,GAAS,GAAA,EAAK,aAAA,CAAc,QAAQ,CAAA;AAC1C,EAAA,MAAM,OAAA,GAAU,MAAA,EAAQ,UAAA,CAAW,IAAI,CAAA;AACvC,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,EAAS,OAAO,MAAA;AAChC,EAAA,MAAA,CAAO,KAAA,GAAQ,IAAA;AACf,EAAA,MAAA,CAAO,MAAA,GAAS,IAAA;AAChB,EAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,eAAA,CAAgB,IAAA,EAAM,IAAI,CAAA;AAChD,EAAA,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,mBAAA,EAAqB,CAAA;AACpC,EAAA,OAAA,CAAQ,YAAA,CAAa,KAAA,EAAO,CAAA,EAAG,CAAC,CAAA;AAChC,EAAA,OAAO,MAAA,CAAO,UAAU,WAAW,CAAA;AACrC;AAOO,SAAS,mBAAA,CACd,GAAA,GAA4B,UAAA,CAAW,QAAA,EACjC;AACN,EAAA,MAAM,OAAO,GAAA,EAAK,eAAA;AAClB,EAAA,IAAI,CAAC,IAAA,IAAQ,IAAA,CAAK,KAAA,CAAM,gBAAA,CAAiB,uBAAuB,CAAA,EAAG;AACnE,EAAA,MAAM,GAAA,GAAM,qBAAqB,GAAG,CAAA;AACpC,EAAA,IAAI,KAAK,IAAA,CAAK,KAAA,CAAM,YAAY,uBAAA,EAAyB,CAAA,KAAA,EAAQ,GAAG,CAAA,EAAA,CAAI,CAAA;AAC1E","file":"chunk-IKS72C6P.js","sourcesContent":["/**\n * The sunken-surface noise texture: a seeded 100×100 Gaussian grain tile,\n * drawn once per document at runtime and layered over the lowered surface by\n * `--kui-sunken-surface` (foundation.css). Nothing ships as an asset.\n */\n\n/** The private property the generated tile is stored in on `<html>`. */\nexport const SUNKEN_TEXTURE_PROPERTY = '--_kui-sunken-texture-generated';\n\n/** Tile edge in pixels; foundation.css repeats it at the same CSS size. */\nconst TILE = 100;\n/** Strongest grain opacity: the reviewed \"Gaussian 4%\" treatment. */\nconst MAX_OPACITY = 0.04;\nconst SEED = 7;\n\n/** A small deterministic PRNG (mulberry32), so every page draws the same tile. */\nfunction random(seed: number): () => number {\n  let state = seed >>> 0;\n  return () => {\n    state = (state + 0x6d2b79f5) >>> 0;\n    let value = state;\n    value = Math.imul(value ^ (value >>> 15), value | 1);\n    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);\n    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/**\n * The tile's RGBA pixels: monochrome grains, darker below and lighter above\n * the surface, with Gaussian strength clipped at 2.5σ.\n */\nexport function sunkenTexturePixels(): Uint8ClampedArray {\n  const next = random(SEED);\n  const pixels = new Uint8ClampedArray(TILE * TILE * 4);\n  for (let index = 0; index < TILE * TILE; index += 1) {\n    // Box-Muller; the first uniform is kept off zero for the logarithm.\n    const u = 1 - next();\n    const v = next();\n    const gaussian = Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n    const strength = Math.max(-1, Math.min(1, gaussian / 2.5));\n    const channel = strength < 0 ? 0 : 255;\n    const offset = index * 4;\n    pixels[offset] = channel;\n    pixels[offset + 1] = channel;\n    pixels[offset + 2] = channel;\n    pixels[offset + 3] = Math.round(Math.abs(strength) * MAX_OPACITY * 255);\n  }\n  return pixels;\n}\n\n/** Draw the tile and return it as a PNG data URL, or undefined without a 2D canvas. */\nexport function sunkenTextureDataUrl(\n  doc: Document = globalThis.document,\n): string | undefined {\n  const canvas = doc?.createElement('canvas');\n  const context = canvas?.getContext('2d');\n  if (!canvas || !context) return undefined;\n  canvas.width = TILE;\n  canvas.height = TILE;\n  const image = context.createImageData(TILE, TILE);\n  image.data.set(sunkenTexturePixels());\n  context.putImageData(image, 0, 0);\n  return canvas.toDataURL('image/png');\n}\n\n/**\n * Generate the sunken texture once for a document. Sunken surfaces call this\n * as they render; it is idempotent, and on a server (no document) or without\n * a 2D canvas it does nothing, leaving the flat lowered surface.\n */\nexport function ensureSunkenTexture(\n  doc: Document | undefined = globalThis.document,\n): void {\n  const root = doc?.documentElement;\n  if (!root || root.style.getPropertyValue(SUNKEN_TEXTURE_PROPERTY)) return;\n  const url = sunkenTextureDataUrl(doc);\n  if (url) root.style.setProperty(SUNKEN_TEXTURE_PROPERTY, `url(\"${url}\")`);\n}\n"]}

package/dist/chunk-IO27YTL3.js

@@ -0,0 +1,73 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COLOR_SWATCHES_PROTECTED = /* @__PURE__ */ new Set(["data-component", "data-size"]);
+var unsafeColor = /[;{}<>"'\\]|\p{Cc}/u;
+function swatchStyle(color) {
+  if (color === "transparent") return void 0;
+  const value = color.trim();
+  if (!value || unsafeColor.test(value))
+    throw new TypeError("A ColorSwatches color must be one CSS color value.");
+  return `--_kui-color-swatches-color:${value}`;
+}
+function ColorSwatches({
+  name,
+  swatches,
+  value,
+  label,
+  ariaLabel,
+  size = "default",
+  disabled = false,
+  action,
+  form,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const legend = label === void 0 ? null : /* @__PURE__ */ jsx("legend", { class: "kui-color-swatches__label", children: label });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...filterDataAttributes(rootAttributes, COLOR_SWATCHES_PROTECTED),
+      id,
+      class: `kui-color-swatches ${className}`.trim(),
+      "data-component": "color-swatches",
+      "data-size": size,
+      "aria-label": ariaLabel,
+      disabled,
+      slot,
+      children: [
+        legend,
+        /* @__PURE__ */ jsx("div", { class: "kui-color-swatches__list", children: swatches.map((swatch) => /* @__PURE__ */ jsxs("label", { class: "kui-color-swatches__swatch", title: swatch.label, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              class: "kui-color-swatches__input",
+              type: "radio",
+              name,
+              value: swatch.value,
+              checked: swatch.value === value,
+              form,
+              "data-action": action,
+              "aria-label": swatch.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "kui-color-swatches__dot",
+              "data-swatch": swatch.color === "transparent" ? "transparent" : "color",
+              style: swatchStyle(swatch.color),
+              "aria-hidden": "true"
+            }
+          )
+        ] })) })
+      ]
+    }
+  );
+}
+
+export { ColorSwatches };
+
+//# sourceMappingURL=chunk-IO27YTL3.js.map

package/dist/chunk-IO27YTL3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/color-swatches/color-swatches.tsx"],"names":[],"mappings":";;;AAyBA,IAAM,2CAA2B,IAAI,GAAA,CAAI,CAAC,gBAAA,EAAkB,WAAW,CAAC,CAAA;AAwBxE,IAAM,WAAA,GAAc,qBAAA;AAEpB,SAAS,YAAY,KAAA,EAAiD;AACpE,EAAA,IAAI,KAAA,KAAU,eAAe,OAAO,MAAA;AACpC,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,EAAK;AACzB,EAAA,IAAI,CAAC,KAAA,IAAS,WAAA,CAAY,IAAA,CAAK,KAAK,CAAA;AAClC,IAAA,MAAM,IAAI,UAAU,oDAAoD,CAAA;AAC1E,EAAA,OAAO,+BAA+B,KAAK,CAAA,CAAA;AAC7C;AAUO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,MAAA,GACJ,UAAU,MAAA,GAAY,IAAA,uBACnB,QAAA,EAAA,EAAO,KAAA,EAAM,6BAA6B,QAAA,EAAA,KAAA,EAAM,CAAA;AAErD,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,wBAAwB,CAAA;AAAA,MACjE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,YAAA,EAAY,SAAA;AAAA,MACZ,QAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,MAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACR,mBAAS,GAAA,CAAI,CAAC,MAAA,qBACb,IAAA,CAAC,OAAA,EAAA,EAAM,KAAA,EAAM,4BAAA,EAA6B,KAAA,EAAO,OAAO,KAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,2BAAA;AAAA,cACN,IAAA,EAAK,OAAA;AAAA,cACL,IAAA;AAAA,cACA,OAAO,MAAA,CAAO,KAAA;AAAA,cACd,OAAA,EAAS,OAAO,KAAA,KAAU,KAAA;AAAA,cAC1B,IAAA;AAAA,cACA,aAAA,EAAa,MAAA;AAAA,cACb,cAAY,MAAA,CAAO;AAAA;AAAA,WACrB;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,yBAAA;AAAA,cACN,aAAA,EACE,MAAA,CAAO,KAAA,KAAU,aAAA,GAAgB,aAAA,GAAgB,OAAA;AAAA,cAEnD,KAAA,EAAO,WAAA,CAAY,MAAA,CAAO,KAAK,CAAA;AAAA,cAC/B,aAAA,EAAY;AAAA;AAAA;AACd,SAAA,EACF,CACD,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-IO27YTL3.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\n\n/** `default` is a 24px swatch; `compact` is 20px. */\nexport type ColorSwatchesSize = 'default' | 'compact';\n\n/** One color in the palette. */\nexport interface ColorSwatch {\n  /** The submitted value, such as `#0a84ff` or `blue`. */\n  value: string;\n  /** The color's name: the swatch's accessible name and its hover hint. */\n  label: string;\n  /**\n   * The swatch's paint: a `CssColor` from `uiColor()`, `colorVar()`, or\n   * `fillColor()` (`@kerfjs/ui/css-values`), or `'transparent'` for the\n   * no-color swatch, drawn outlined and struck through.\n   */\n  color: CssColor | 'transparent';\n}\n\n/** Application `data-*` metadata; the group's own markers stay protected. */\nexport type ColorSwatchesRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst COLOR_SWATCHES_PROTECTED = new Set(['data-component', 'data-size']);\n\nexport type ColorSwatchesProps = {\n  /** The radio group name the chosen value submits under. */\n  name: string;\n  swatches: readonly ColorSwatch[];\n  /** The chosen swatch's value. */\n  value?: string;\n  size?: ColorSwatchesSize;\n  disabled?: boolean;\n  /** Delegated `data-action` on each radio; listen for `change`. */\n  action?: string;\n  /** Associate the radios with a form outside their ancestor chain. */\n  form?: string;\n  /** The group's id. */\n  id?: string;\n  className?: string;\n  rootAttributes?: ColorSwatchesRootAttributes;\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\nconst unsafeColor = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction swatchStyle(color: ColorSwatch['color']): string | undefined {\n  if (color === 'transparent') return undefined;\n  const value = color.trim();\n  if (!value || unsafeColor.test(value))\n    throw new TypeError('A ColorSwatches color must be one CSS color value.');\n  return `--_kui-color-swatches-color:${value}`;\n}\n\n/**\n * A fixed palette: a group of round color swatches with no visible text, one\n * of which is chosen. It is a native radio group, so arrow keys move the\n * choice, Tab reaches it once, and the chosen value submits under `name`.\n * Each swatch is named by its color's label (also its hover hint), and the\n * chosen one wears a ring that does not rely on its hue. A `'transparent'`\n * swatch offers \"no color\".\n */\nexport function ColorSwatches({\n  name,\n  swatches,\n  value,\n  label,\n  ariaLabel,\n  size = 'default',\n  disabled = false,\n  action,\n  form,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ColorSwatchesProps) {\n  const legend =\n    label === undefined ? null : (\n      <legend class=\"kui-color-swatches__label\">{label}</legend>\n    );\n  return (\n    <fieldset\n      {...filterDataAttributes(rootAttributes, COLOR_SWATCHES_PROTECTED)}\n      id={id}\n      class={`kui-color-swatches ${className}`.trim()}\n      data-component=\"color-swatches\"\n      data-size={size}\n      aria-label={ariaLabel}\n      disabled={disabled}\n      slot={slot}\n    >\n      {legend}\n      <div class=\"kui-color-swatches__list\">\n        {swatches.map((swatch) => (\n          <label class=\"kui-color-swatches__swatch\" title={swatch.label}>\n            <input\n              class=\"kui-color-swatches__input\"\n              type=\"radio\"\n              name={name}\n              value={swatch.value}\n              checked={swatch.value === value}\n              form={form}\n              data-action={action}\n              aria-label={swatch.label}\n            />\n            <span\n              class=\"kui-color-swatches__dot\"\n              data-swatch={\n                swatch.color === 'transparent' ? 'transparent' : 'color'\n              }\n              style={swatchStyle(swatch.color)}\n              aria-hidden=\"true\"\n            />\n          </label>\n        ))}\n      </div>\n    </fieldset>\n  );\n}\n"]}

package/dist/chunk-IQSRHXZR.js

@@ -0,0 +1,164 @@
+// src/shared/styles/css-values.ts
+var uiColorNames = [
+  "brand-border-loud",
+  "brand-border-normal",
+  "brand-border-quiet",
+  "brand-fill-loud",
+  "brand-fill-normal",
+  "brand-fill-quiet",
+  "brand-on-fill",
+  "brand-on-loud",
+  "brand-on-normal",
+  "brand-on-quiet",
+  "danger-border-loud",
+  "danger-border-normal",
+  "danger-border-quiet",
+  "danger-fill-loud",
+  "danger-fill-normal",
+  "danger-fill-quiet",
+  "danger-on-fill",
+  "danger-on-loud",
+  "danger-on-normal",
+  "danger-on-quiet",
+  "neutral-border-loud",
+  "neutral-border-normal",
+  "neutral-border-quiet",
+  "neutral-fill-loud",
+  "neutral-fill-normal",
+  "neutral-fill-quiet",
+  "neutral-on-loud",
+  "neutral-on-normal",
+  "neutral-on-quiet",
+  "pop-border-loud",
+  "pop-border-normal",
+  "pop-border-quiet",
+  "pop-fill-loud",
+  "pop-fill-normal",
+  "pop-fill-quiet",
+  "pop-on-fill",
+  "pop-on-loud",
+  "pop-on-normal",
+  "pop-on-quiet",
+  "success-border-loud",
+  "success-border-normal",
+  "success-border-quiet",
+  "success-fill-loud",
+  "success-fill-normal",
+  "success-fill-quiet",
+  "success-on-fill",
+  "success-on-loud",
+  "success-on-normal",
+  "success-on-quiet",
+  "surface",
+  "surface-lowered",
+  "surface-raised",
+  "text",
+  "text-link",
+  "text-quiet",
+  "warning-border-loud",
+  "warning-border-normal",
+  "warning-border-quiet",
+  "warning-fill-loud",
+  "warning-fill-normal",
+  "warning-fill-quiet",
+  "warning-on-fill",
+  "warning-on-loud",
+  "warning-on-normal",
+  "warning-on-quiet"
+];
+var spaceVariables = {
+  none: "--kui-space-none",
+  "2xs": "--kui-space-2xs",
+  xs: "--kui-space-xs",
+  s: "--kui-space-s",
+  m: "--kui-space-m",
+  l: "--kui-space-l",
+  xl: "--kui-space-xl"
+};
+function serializeNumber(value, helper) {
+  if (!Number.isFinite(value))
+    throw new RangeError(`${helper}() requires a finite number.`);
+  return String(Object.is(value, -0) ? 0 : value);
+}
+function serializeNonnegativeNumber(value, helper) {
+  const serialized = serializeNumber(value, helper);
+  if (value < 0)
+    throw new RangeError(`${helper}() requires nonnegative flex factors.`);
+  return serialized;
+}
+function validateCustomPropertyName(name, helper, example) {
+  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))
+    throw new TypeError(
+      `${helper}() requires an ASCII custom property name such as ${example}.`
+    );
+}
+function dimension(value, unit, helper) {
+  return `${serializeNumber(value, helper)}${unit}`;
+}
+function px(value) {
+  return dimension(value, "px", "px");
+}
+function rem(value) {
+  return dimension(value, "rem", "rem");
+}
+function remify(value) {
+  return rem(value / 16);
+}
+function em(value) {
+  return dimension(value, "em", "em");
+}
+function pct(value) {
+  return dimension(value, "%", "pct");
+}
+function space(name) {
+  const variable = spaceVariables[name];
+  if (variable === void 0)
+    throw new RangeError(
+      `space() received unknown spacing name ${String(name)}.`
+    );
+  return `var(${variable})`;
+}
+function lengthVar(name, fallback) {
+  validateCustomPropertyName(name, "lengthVar", "--app-gap");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function plus(first, second, ...rest) {
+  return [first, second, ...rest].join(" + ");
+}
+function calc(expression) {
+  return `calc(${expression})`;
+}
+function flex(grow, shrink = 1, basis = "auto") {
+  return `${serializeNonnegativeNumber(grow, "flex")} ${serializeNonnegativeNumber(shrink, "flex")} ${basis}`;
+}
+function uiColor(name) {
+  if (!uiColorNames.includes(name))
+    throw new RangeError(
+      `uiColor() received unknown color name ${String(name)}.`
+    );
+  return `var(--kui-color-${name})`;
+}
+function colorVar(name, fallback) {
+  validateCustomPropertyName(name, "colorVar", "--app-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function foregroundColorVar(name, fallback) {
+  validateCustomPropertyName(name, "foregroundColorVar", "--app-icon-color");
+  return `var(${name}${fallback === void 0 ? "" : `, ${fallback}`})`;
+}
+function colorLiteral(value, helper) {
+  const color = value.trim();
+  if (!color || /[;{}<>]|\p{Cc}/u.test(color))
+    throw new TypeError(`${helper}() requires one CSS color value.`);
+  return color;
+}
+function foregroundColor(value) {
+  return colorLiteral(value, "foregroundColor");
+}
+function fillColor(value) {
+  return colorLiteral(value, "fillColor");
+}
+
+export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
+
+//# sourceMappingURL=chunk-IQSRHXZR.js.map

package/dist/chunk-IQSRHXZR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles/css-values.ts"],"names":[],"mappings":"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","file":"chunk-IQSRHXZR.js","sourcesContent":["declare const cssValueBrand: unique symbol;\ndeclare const cssLengthBrand: unique symbol;\ndeclare const cssLengthExpressionBrand: unique symbol;\ndeclare const cssFlexBrand: unique symbol;\ndeclare const cssColorBrand: unique symbol;\ndeclare const cssForegroundColorBrand: unique symbol;\n\n/**\n * A complete typed CSS value minted by a property-specific Kerf UI builder.\n *\n * This brand is an authoring correctness aid, not a sanitizer or security\n * boundary. Prefer the narrower property grammar, such as {@link CssLength},\n * whenever one is available.\n */\nexport type CssValue = string & {\n  readonly [cssValueBrand]: 'CssValue';\n};\n\n/**\n * A complete CSS length-percentage value suitable for dimension-valued UI\n * props. Despite the concise name, percentages are intentionally included.\n */\nexport type CssLength = CssValue & {\n  readonly [cssLengthBrand]: 'CssLength';\n};\n\n/**\n * An incomplete arithmetic expression. Wrap it with {@link calc} before\n * passing it to a prop that accepts {@link CssLength}.\n */\nexport type CssLengthExpression = string & {\n  readonly [cssLengthExpressionBrand]: 'CssLengthExpression';\n};\n\n/** A complete CSS `flex` shorthand. It is not interchangeable with a length. */\nexport type CssFlex = CssValue & {\n  readonly [cssFlexBrand]: 'CssFlex';\n};\n\n/** A complete CSS color value. It is not interchangeable with a length. */\nexport type CssColor = CssValue & {\n  readonly [cssColorBrand]: 'CssColor';\n};\n\n/**\n * A complete CSS color meant to paint a foreground: text or an icon drawn over\n * a surface. Mint it with {@link uiColor} and a foreground token name\n * ({@link UiForegroundColorName}) or with {@link foregroundColorVar}. It is a\n * {@link CssColor}, but a plain `CssColor` is not a foreground color: fill,\n * border, and surface tokens are pale backgrounds that leave a foreground\n * nearly invisible.\n */\nexport type CssForegroundColor = CssColor & {\n  readonly [cssForegroundColorBrand]: 'CssForegroundColor';\n};\n\nexport type CssFlexKeyword = 'none' | 'auto' | 'initial';\nexport type CssFlexBasis =\n  | CssLength\n  | 'auto'\n  | 'content'\n  | 'min-content'\n  | 'max-content'\n  | 'fit-content';\nexport type CssSizeKeyword =\n  'auto' | 'min-content' | 'max-content' | 'fit-content';\n/** A complete width/height value accepted by dimension-valued UI props. */\nexport type CssSize = CssLength | CssSizeKeyword;\n\nconst uiColorNames = [\n  'brand-border-loud',\n  'brand-border-normal',\n  'brand-border-quiet',\n  'brand-fill-loud',\n  'brand-fill-normal',\n  'brand-fill-quiet',\n  'brand-on-fill',\n  'brand-on-loud',\n  'brand-on-normal',\n  'brand-on-quiet',\n  'danger-border-loud',\n  'danger-border-normal',\n  'danger-border-quiet',\n  'danger-fill-loud',\n  'danger-fill-normal',\n  'danger-fill-quiet',\n  'danger-on-fill',\n  'danger-on-loud',\n  'danger-on-normal',\n  'danger-on-quiet',\n  'neutral-border-loud',\n  'neutral-border-normal',\n  'neutral-border-quiet',\n  'neutral-fill-loud',\n  'neutral-fill-normal',\n  'neutral-fill-quiet',\n  'neutral-on-loud',\n  'neutral-on-normal',\n  'neutral-on-quiet',\n  'pop-border-loud',\n  'pop-border-normal',\n  'pop-border-quiet',\n  'pop-fill-loud',\n  'pop-fill-normal',\n  'pop-fill-quiet',\n  'pop-on-fill',\n  'pop-on-loud',\n  'pop-on-normal',\n  'pop-on-quiet',\n  'success-border-loud',\n  'success-border-normal',\n  'success-border-quiet',\n  'success-fill-loud',\n  'success-fill-normal',\n  'success-fill-quiet',\n  'success-on-fill',\n  'success-on-loud',\n  'success-on-normal',\n  'success-on-quiet',\n  'surface',\n  'surface-lowered',\n  'surface-raised',\n  'text',\n  'text-link',\n  'text-quiet',\n  'warning-border-loud',\n  'warning-border-normal',\n  'warning-border-quiet',\n  'warning-fill-loud',\n  'warning-fill-normal',\n  'warning-fill-quiet',\n  'warning-on-fill',\n  'warning-on-loud',\n  'warning-on-normal',\n  'warning-on-quiet',\n] as const;\n\n/** Names of the public `--kui-color-*` semantic tokens. */\nexport type UiColorName = (typeof uiColorNames)[number];\n\n/** The semantic tokens that paint a foreground: the `*-on-*` and text roles. */\nexport type UiForegroundColorName = Extract<\n  UiColorName,\n  `${string}-on-${string}` | 'text' | 'text-quiet' | 'text-link'\n>;\n\n/** Kerf UI's complete spacing-token vocabulary. `s` and `xl` are exceptions. */\nexport type UiSpaceName = 'none' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n\n/** A token or complete typed length for one gap axis. */\nexport type UiGapValue = UiSpaceName | CssLength;\n\n/** A shared gap or independent column and row gaps. */\nexport type UiGap =\n  UiGapValue | Readonly<{ column: UiGapValue; row: UiGapValue }>;\n\nconst spaceVariables = {\n  none: '--kui-space-none',\n  '2xs': '--kui-space-2xs',\n  xs: '--kui-space-xs',\n  s: '--kui-space-s',\n  m: '--kui-space-m',\n  l: '--kui-space-l',\n  xl: '--kui-space-xl',\n} as const satisfies Record<UiSpaceName, string>;\n\nfunction serializeNumber(value: number, helper: string): string {\n  if (!Number.isFinite(value))\n    throw new RangeError(`${helper}() requires a finite number.`);\n  return String(Object.is(value, -0) ? 0 : value);\n}\n\nfunction serializeNonnegativeNumber(value: number, helper: string): string {\n  const serialized = serializeNumber(value, helper);\n  if (value < 0)\n    throw new RangeError(`${helper}() requires nonnegative flex factors.`);\n  return serialized;\n}\n\nfunction validateCustomPropertyName(\n  name: string,\n  helper: string,\n  example: string,\n): void {\n  if (!/^--[A-Za-z_][A-Za-z0-9_-]*$/.test(name))\n    throw new TypeError(\n      `${helper}() requires an ASCII custom property name such as ${example}.`,\n    );\n}\n\nfunction dimension(value: number, unit: string, helper: string): CssLength {\n  return `${serializeNumber(value, helper)}${unit}` as CssLength;\n}\n\n/** Create a complete pixel length. */\nexport function px(value: number): CssLength {\n  return dimension(value, 'px', 'px');\n}\n\n/** Create a complete root-font-relative length. */\nexport function rem(value: number): CssLength {\n  return dimension(value, 'rem', 'rem');\n}\n\n/** Converts a pixel value into rem units by dividing by 16. */\nexport function remify(value: number): CssLength {\n  return rem(value / 16);\n}\n\n/** Create a complete current-font-relative length. */\nexport function em(value: number): CssLength {\n  return dimension(value, 'em', 'em');\n}\n\n/** Create a complete percentage length. */\nexport function pct(value: number): CssLength {\n  return dimension(value, '%', 'pct');\n}\n\n/** Resolve a Kerf UI spacing step to its public custom property. */\nexport function space(name: UiSpaceName): CssLength {\n  const variable = spaceVariables[name];\n  if (variable === undefined)\n    throw new RangeError(\n      `space() received unknown spacing name ${String(name)}.`,\n    );\n  return `var(${variable})` as CssLength;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a CSS\n * length-percentage. The deliberately narrow name grammar keeps this helper\n * from becoming an arbitrary CSS-string constructor.\n */\nexport function lengthVar(\n  name: `--${string}`,\n  fallback?: CssLength,\n): CssLength {\n  validateCustomPropertyName(name, 'lengthVar', '--app-gap');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssLength;\n}\n\n/** Combine two or more complete lengths into a non-standalone sum. */\nexport function plus(\n  first: CssLength,\n  second: CssLength,\n  ...rest: readonly CssLength[]\n): CssLengthExpression {\n  return [first, second, ...rest].join(' + ') as CssLengthExpression;\n}\n\n/** Turn a typed length expression into a complete CSS `calc()` value. */\nexport function calc(expression: CssLengthExpression): CssLength {\n  return `calc(${expression})` as CssLength;\n}\n\n/** Build a complete, structured CSS flex shorthand. */\nexport function flex(\n  grow: number,\n  shrink = 1,\n  basis: CssFlexBasis = 'auto',\n): CssFlex {\n  return `${serializeNonnegativeNumber(grow, 'flex')} ${serializeNonnegativeNumber(shrink, 'flex')} ${basis}` as CssFlex;\n}\n\n/**\n * The brand {@link uiColor} returns for a token name: a\n * {@link CssForegroundColor} for a foreground token, otherwise a plain\n * {@link CssColor}.\n */\nexport type UiColor<Name extends UiColorName> =\n  Name extends UiForegroundColorName ? CssForegroundColor : CssColor;\n\n/**\n * Resolve a public Kerf UI semantic color token. A foreground token name\n * (`success-on-quiet`, `text-quiet`, …) returns a {@link CssForegroundColor};\n * any other token returns a plain {@link CssColor}.\n */\nexport function uiColor<Name extends UiColorName>(name: Name): UiColor<Name> {\n  if (!(uiColorNames as readonly string[]).includes(name))\n    throw new RangeError(\n      `uiColor() received unknown color name ${String(name)}.`,\n    );\n  return `var(--kui-color-${name})` as UiColor<Name>;\n}\n\n/** Reference an application-owned custom property whose contract is a color. */\nexport function colorVar(name: `--${string}`, fallback?: CssColor): CssColor {\n  validateCustomPropertyName(name, 'colorVar', '--app-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssColor;\n}\n\n/**\n * Reference an application-owned custom property whose contract is a\n * foreground color (text or an icon over a surface). Use it where a prop\n * accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.\n */\nexport function foregroundColorVar(\n  name: `--${string}`,\n  fallback?: CssForegroundColor,\n): CssForegroundColor {\n  validateCustomPropertyName(name, 'foregroundColorVar', '--app-icon-color');\n  return `var(${name}${fallback === undefined ? '' : `, ${fallback}`})` as CssForegroundColor;\n}\n\n/** Trim `value` and check that it is one CSS declaration value. */\nfunction colorLiteral(value: string, helper: string): string {\n  const color = value.trim();\n  if (!color || /[;{}<>]|\\p{Cc}/u.test(color))\n    throw new TypeError(`${helper}() requires one CSS color value.`);\n  return color;\n}\n\n/**\n * Use an application-chosen CSS color for foreground content. The browser\n * resolves the color syntax; this checks only that it is one declaration value.\n */\nexport function foregroundColor(value: string): CssForegroundColor {\n  return colorLiteral(value, 'foregroundColor') as CssForegroundColor;\n}\n\n/**\n * Use an application-chosen CSS color as a fill: a `ChoiceChips` swatch, a list\n * row's `iconTile` color, or any other prop that takes a plain\n * {@link CssColor}. It returns a `CssColor`, not a {@link CssForegroundColor},\n * so a fill literal cannot reach a prop that paints text or an icon. The browser\n * resolves the color syntax; this checks only that it is one declaration value.\n */\nexport function fillColor(value: string): CssColor {\n  return colorLiteral(value, 'fillColor') as CssColor;\n}\n"]}

package/dist/chunk-IRC5N7FA.js

@@ -0,0 +1,16 @@
+// src/shared/layout/scroll-edge.ts
+function scrollEdgeAttributes(edge, distance, enabled) {
+  if (!enabled || edge === "none")
+    return {
+      "data-scroll-edge": void 0,
+      "data-scroll-edge-distance": void 0
+    };
+  return {
+    "data-scroll-edge": edge,
+    "data-scroll-edge-distance": distance === void 0 || !(distance > 0) ? void 0 : String(distance)
+  };
+}
+
+export { scrollEdgeAttributes };
+
+//# sourceMappingURL=chunk-IRC5N7FA.js.map

package/dist/chunk-IRC5N7FA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/layout/scroll-edge.ts"],"names":[],"mappings":";AAaO,SAAS,oBAAA,CACd,IAAA,EACA,QAAA,EACA,OAAA,EAIA;AACA,EAAA,IAAI,CAAC,WAAW,IAAA,KAAS,MAAA;AACvB,IAAA,OAAO;AAAA,MACL,kBAAA,EAAoB,MAAA;AAAA,MACpB,2BAAA,EAA6B;AAAA,KAC/B;AACF,EAAA,OAAO;AAAA,IACL,kBAAA,EAAoB,IAAA;AAAA,IACpB,2BAAA,EACE,aAAa,MAAA,IAAa,EAAE,WAAW,CAAA,CAAA,GAAK,MAAA,GAAY,OAAO,QAAQ;AAAA,GAC3E;AACF","file":"chunk-IRC5N7FA.js","sourcesContent":["/**\n * What clear (fully transparent) chrome fades in as content scrolls beneath\n * it: `none` stays clear; `material` fades in the translucent chrome\n * material; `surface` fades in the opaque surface. The fade tracks the scroll\n * over `scrollEdgeDistance` (opacity only), from the scroll state\n * `wireScrollDividers` reports; unwired, the chrome stays clear.\n */\nexport type ScrollEdge = 'none' | 'material' | 'surface';\n\n/** The default scroll distance, in CSS pixels, a scroll edge fades in over. */\nexport const DEFAULT_SCROLL_EDGE_DISTANCE = 60;\n\n/** The root attributes a component with a scroll edge renders. */\nexport function scrollEdgeAttributes(\n  edge: ScrollEdge,\n  distance: number | undefined,\n  enabled: boolean,\n): {\n  'data-scroll-edge': 'material' | 'surface' | undefined;\n  'data-scroll-edge-distance': string | undefined;\n} {\n  if (!enabled || edge === 'none')\n    return {\n      'data-scroll-edge': undefined,\n      'data-scroll-edge-distance': undefined,\n    };\n  return {\n    'data-scroll-edge': edge,\n    'data-scroll-edge-distance':\n      distance === undefined || !(distance > 0) ? undefined : String(distance),\n  };\n}\n"]}

package/dist/chunk-ITENVZ6Q.js

@@ -0,0 +1,24 @@
+// src/shared/styles/surface-tint.ts
+function surfaceTintAttributes(tint) {
+  if (tint === void 0)
+    return {
+      "data-kui-tint": void 0,
+      "data-kui-tint-accent": void 0,
+      className: "",
+      style: void 0
+    };
+  return {
+    "data-kui-tint": tint.scheme,
+    "data-kui-tint-accent": tint.accent === void 0 ? void 0 : "",
+    className: `wa-${tint.scheme}`,
+    style: tint.accent === void 0 ? `--_kui-tint-color:${tint.color}` : `--_kui-tint-color:${tint.color};--_kui-tint-accent:${tint.accent}`
+  };
+}
+function joinStyles(...declarations) {
+  const present = declarations.filter((value) => value !== void 0);
+  return present.length === 0 ? void 0 : present.join(";");
+}
+
+export { joinStyles, surfaceTintAttributes };
+
+//# sourceMappingURL=chunk-ITENVZ6Q.js.map

package/dist/chunk-ITENVZ6Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles/surface-tint.ts"],"names":[],"mappings":";AA0BO,SAAS,sBAAsB,IAAA,EAOpC;AACA,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO;AAAA,MACL,eAAA,EAAiB,MAAA;AAAA,MACjB,sBAAA,EAAwB,MAAA;AAAA,MACxB,SAAA,EAAW,EAAA;AAAA,MACX,KAAA,EAAO;AAAA,KACT;AACF,EAAA,OAAO;AAAA,IACL,iBAAiB,IAAA,CAAK,MAAA;AAAA,IACtB,sBAAA,EAAwB,IAAA,CAAK,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,IAChE,SAAA,EAAW,CAAA,GAAA,EAAM,IAAA,CAAK,MAAM,CAAA,CAAA;AAAA,IAC5B,KAAA,EACE,IAAA,CAAK,MAAA,KAAW,MAAA,GACZ,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,CAAA,GAC/B,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,oBAAA,EAAuB,KAAK,MAAM,CAAA;AAAA,GACzE;AACF;AAGO,SAAS,cACX,YAAA,EACiB;AACpB,EAAA,MAAM,UAAU,YAAA,CAAa,MAAA,CAAO,CAAC,KAAA,KAAU,UAAU,MAAS,CAAA;AAClE,EAAA,OAAO,QAAQ,MAAA,KAAW,CAAA,GAAI,MAAA,GAAY,OAAA,CAAQ,KAAK,GAAG,CAAA;AAC5D","file":"chunk-ITENVZ6Q.js","sourcesContent":["import type { CssColor } from './css-values.js';\n\n/** The color scheme an app declares for a {@link SurfaceTint}'s color. */\nexport type SurfaceTintScheme = 'light' | 'dark';\n\n/**\n * A scoped tint for a layout surface: the app's color (usually sampled from\n * artwork it already knows) and the scheme that color belongs to. Kerf does no\n * color detection; `scheme` says whether the color reads as a light or a dark\n * surface. Inside the scope the surface, raised surface, text, quiet text, and\n * everything built on them (quiet fills, separators' backdrop, the chrome\n * material) re-derive from the color, with lightness clamped so text keeps\n * WCAG AA over any color.\n */\nexport interface SurfaceTint {\n  color: CssColor;\n  scheme: SurfaceTintScheme;\n  /**\n   * An optional accent (usually the artwork's most vivid color). The scope's\n   * brand ramp re-derives from it: loud fills and their text, brand text and\n   * links, text on brand fills, and the focus ring, each clamped to keep AA.\n   */\n  accent?: CssColor;\n}\n\n/** The root attributes a tinted surface renders. */\nexport function surfaceTintAttributes(tint: SurfaceTint | undefined): {\n  'data-kui-tint': SurfaceTintScheme | undefined;\n  'data-kui-tint-accent': '' | undefined;\n  /** The Web Awesome scheme class, so its theme re-derives in the scope. */\n  className: string;\n  /** The inline declaration carrying the color, or `undefined`. */\n  style: string | undefined;\n} {\n  if (tint === undefined)\n    return {\n      'data-kui-tint': undefined,\n      'data-kui-tint-accent': undefined,\n      className: '',\n      style: undefined,\n    };\n  return {\n    'data-kui-tint': tint.scheme,\n    'data-kui-tint-accent': tint.accent === undefined ? undefined : '',\n    className: `wa-${tint.scheme}`,\n    style:\n      tint.accent === undefined\n        ? `--_kui-tint-color:${tint.color}`\n        : `--_kui-tint-color:${tint.color};--_kui-tint-accent:${tint.accent}`,\n  };\n}\n\n/** Join inline declarations, omitting absent ones. */\nexport function joinStyles(\n  ...declarations: (string | undefined)[]\n): string | undefined {\n  const present = declarations.filter((value) => value !== undefined);\n  return present.length === 0 ? undefined : present.join(';');\n}\n"]}

package/dist/chunk-ITUQC4FW.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/forms/choice-chips/choice-chips.tsx
+var unsafeSwatch = /[;{}<>"'\\]|\p{Cc}/u;
+function swatchStyle(swatch) {
+  if (swatch === "transparent") return void 0;
+  const color = swatch.trim();
+  if (!color || unsafeSwatch.test(color))
+    throw new TypeError("ChoiceChips swatch requires one CSS color value.");
+  return `--_kui-choice-chips-swatch: ${color}`;
+}
+function ChoiceChips(props) {
+  const {
+    name,
+    choices,
+    action,
+    size = "default",
+    presentation = "chips",
+    maxHeight,
+    disabled = false,
+    form,
+    id,
+    className = "",
+    slot,
+    label,
+    labelledBy
+  } = props;
+  const icons = presentation === "icons";
+  if (icons && choices.some((choice) => choice.icon === void 0))
+    throw new TypeError("An icons ChoiceChips choice needs an icon.");
+  const shape = {
+    "data-presentation": icons ? "icons" : void 0,
+    "data-scrollable": maxHeight === void 0 ? void 0 : "",
+    style: maxHeight === void 0 ? void 0 : `--_kui-choice-chips-max-height:${maxHeight}`
+  };
+  const titleOf = (choice) => choice.title ?? (icons ? choice.label : void 0);
+  if (choices.some((choice) => choice.swatch !== void 0 && choice.icon))
+    throw new TypeError("A ChoiceChips choice takes a swatch or an icon.");
+  const mode = props.multiple === true ? "multiple" : props.multiple === "toggle" ? "toggle" : "single";
+  const required = mode === "single" && props.required === true;
+  const checked = props.multiple === true || props.multiple === "toggle" ? props.value ?? [] : props.value === void 0 ? [] : [props.value];
+  const content = (choice) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    choice.swatch === void 0 ? null : /* @__PURE__ */ jsx(
+      "span",
+      {
+        class: "kui-choice-chips__swatch",
+        "data-swatch": choice.swatch === "transparent" ? "transparent" : "color",
+        style: swatchStyle(choice.swatch),
+        "aria-hidden": "true"
+      }
+    ),
+    choice.icon === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-choice-chips__icon", "aria-hidden": "true", children: choice.icon }),
+    /* @__PURE__ */ jsx("span", { class: "kui-choice-chips__label", children: choice.label })
+  ] });
+  if (mode === "multiple") {
+    const enabled = disabled ? [] : choices.filter((choice) => choice.disabled !== true);
+    const tabStop = enabled.find((choice) => checked.includes(choice.value)) ?? enabled[0];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        class: `kui-choice-chips ${className}`.trim(),
+        "data-component": "choice-chips",
+        "data-selection-mode": "multiple",
+        "data-size": size,
+        ...shape,
+        "data-disabled": disabled ? "" : void 0,
+        "data-action": action,
+        "data-name": name,
+        "data-form": form,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-orientation": "horizontal",
+        "aria-label": label,
+        "aria-labelledby": labelledBy,
+        "aria-disabled": disabled ? "true" : void 0,
+        slot,
+        children: [
+          choices.map((choice) => {
+            const unavailable = disabled || choice.disabled === true;
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                class: "kui-choice-chips__chip",
+                role: "option",
+                tabindex: choice === tabStop ? "0" : "-1",
+                "aria-selected": checked.includes(choice.value) ? "true" : "false",
+                "aria-disabled": unavailable ? "true" : void 0,
+                "data-choice-value": choice.value,
+                "data-disabled": unavailable ? "" : void 0,
+                title: titleOf(choice),
+                children: content(choice)
+              }
+            );
+          }),
+          choices.filter((choice) => checked.includes(choice.value)).map((choice) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              class: "kui-choice-chips__value",
+              type: "hidden",
+              name,
+              value: choice.value,
+              form,
+              disabled
+            }
+          ))
+        ]
+      }
+    );
+  }
+  const multiple = mode === "toggle";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      class: `kui-choice-chips ${className}`.trim(),
+      "data-component": "choice-chips",
+      "data-selection-mode": mode,
+      "data-size": size,
+      ...shape,
+      "data-disabled": disabled ? "" : void 0,
+      role: multiple ? "group" : "radiogroup",
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-required": required ? "true" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      slot,
+      children: choices.map((choice) => {
+        const unavailable = disabled || choice.disabled === true;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            class: "kui-choice-chips__chip",
+            "data-choice-value": choice.value,
+            "data-disabled": unavailable ? "" : void 0,
+            title: titleOf(choice),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  class: "kui-choice-chips__input",
+                  type: multiple ? "checkbox" : "radio",
+                  name,
+                  value: choice.value,
+                  checked: checked.includes(choice.value),
+                  disabled: unavailable,
+                  required,
+                  form,
+                  "data-action": action
+                }
+              ),
+              content(choice)
+            ]
+          }
+        );
+      })
+    }
+  );
+}
+
+export { ChoiceChips };
+
+//# sourceMappingURL=chunk-ITUQC4FW.js.map