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

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":"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","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-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

package/dist/chunk-ITUQC4FW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/choice-chips/choice-chips.tsx"],"names":[],"mappings":"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","file":"chunk-ITUQC4FW.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\n\nexport type ChoiceChipsSize = 'default' | 'compact';\n\n/**\n * `chips` (default) are labeled pills; `icons` are square 36px icon-only\n * choices (an icon picker), each named by its hidden label, which is also\n * its hover title.\n */\nexport type ChoiceChipsPresentation = 'chips' | 'icons';\n\n/**\n * A leading color dot: a {@link CssColor} from `uiColor()`, `colorVar()`, or\n * `fillColor()`, or `'transparent'` for the no-color swatch (an outlined\n * dot struck through by a diagonal line).\n */\nexport type ChoiceChipsSwatch = CssColor | 'transparent';\n\nexport interface ChoiceChipsChoice<Value extends string = string> {\n  value: Value;\n  /** Visible label; it is also the radio's accessible name. */\n  label: string;\n  /** Leading color dot. Mutually exclusive with `icon`. */\n  swatch?: ChoiceChipsSwatch;\n  /** Decorative leading icon, normally an unsized LucideIcon. */\n  icon?: SafeHtml;\n  /** Supplementary tooltip; never the only place a choice is described. */\n  title?: string;\n  disabled?: boolean;\n}\n\ninterface ChoiceChipsCommonProps<Value extends string> {\n  /**\n   * Form field name: the selected value (or, with `multiple`, every selected\n   * value) submits under it.\n   */\n  name: string;\n  choices: readonly ChoiceChipsChoice<Value>[];\n  /**\n   * Delegated `data-action`; listen for `change`. It sits on every native\n   * input, or for `multiple: true` on the group, which `wireChoiceChips`\n   * fires `change` on.\n   */\n  action?: string;\n  size?: ChoiceChipsSize;\n  presentation?: ChoiceChipsPresentation;\n  /**\n   * Cap the group's height; past it the group scrolls (a long icon grid).\n   */\n  maxHeight?: CssLength;\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** Associate the inputs with a form outside their ancestor chain. */\n  form?: string;\n  id?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One exclusive value (the default), backed by native radios. */\nexport interface ChoiceChipsSingleProps<Value extends string = string> {\n  multiple?: false;\n  /** The selected value. Omit (or pass `undefined`) for no selection. */\n  value?: NoInfer<Value>;\n  /** Require a selection for native form validation. */\n  required?: boolean;\n}\n\n/**\n * Any number of values, backed by native checkboxes: each pill is its own Tab\n * stop, a click or Space toggles it alone, and every checked value submits\n * under `name`.\n */\nexport interface ChoiceChipsToggleProps<Value extends string = string> {\n  multiple: 'toggle';\n  /** The checked values. Omit (or pass `[]`) for none. */\n  value?: readonly NoInfer<Value>[];\n  /**\n   * Native `required` on a checkbox demands that one box, so a toggle group\n   * has no \"at least one\" requirement; validate the checked set in the app.\n   */\n  required?: never;\n}\n\n/**\n * Any number of values with the conventional desktop selection model, as an\n * ARIA multi-select listbox: a click selects one chip, Cmd (Apple) or Ctrl\n * (elsewhere) toggles one, and Shift extends a range. The group is one Tab\n * stop; arrows move the selection, Shift+arrows extend it, Cmd/Ctrl+arrows\n * move focus alone, Space toggles, and Cmd/Ctrl+A selects all. Hidden inputs\n * submit every selected value under `name`. Requires `wireChoiceChips`.\n */\nexport interface ChoiceChipsMultipleProps<Value extends string = string> {\n  multiple: true;\n  /** The selected values. Omit (or pass `[]`) for none. */\n  value?: readonly NoInfer<Value>[];\n  /** Validate the selected set in the app; a listbox has no native `required`. */\n  required?: never;\n}\n\n/** A group is named either by a string or by a visible heading's id. */\nexport type ChoiceChipsNaming =\n  { label: string; labelledBy?: never } | { labelledBy: string; label?: never };\n\nexport type ChoiceChipsProps<Value extends string = string> =\n  ChoiceChipsCommonProps<Value> &\n    (\n      | ChoiceChipsSingleProps<Value>\n      | ChoiceChipsToggleProps<Value>\n      | ChoiceChipsMultipleProps<Value>\n    ) &\n    ChoiceChipsNaming;\n\nconst unsafeSwatch = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction swatchStyle(swatch: ChoiceChipsSwatch): string | undefined {\n  if (swatch === 'transparent') return undefined;\n  const color = swatch.trim();\n  if (!color || unsafeSwatch.test(color))\n    throw new TypeError('ChoiceChips swatch requires one CSS color value.');\n  return `--_kui-choice-chips-swatch: ${color}`;\n}\n\n/** Which selection model a ChoiceChips group renders. */\nexport type ChoiceChipsSelectionMode = 'single' | 'toggle' | 'multiple';\n\n/**\n * A wrapping set of pill chips. By default it is an exclusive radio group:\n * one Tab stop, arrow-key selection, and a real form value. With\n * `multiple: 'toggle'` it is a checkbox group: each pill toggles on its own.\n * With `multiple: true` it is a multi-select listbox with modifier-key\n * selection (wire it with `wireChoiceChips`). Each choice may lead with a\n * color swatch (including a struck-through transparent swatch) or an icon.\n */\nexport function ChoiceChips<Value extends string>(\n  props: ChoiceChipsProps<Value>,\n) {\n  const {\n    name,\n    choices,\n    action,\n    size = 'default',\n    presentation = 'chips',\n    maxHeight,\n    disabled = false,\n    form,\n    id,\n    className = '',\n    slot,\n    label,\n    labelledBy,\n  } = props;\n  const icons = presentation === 'icons';\n  if (icons && choices.some((choice) => choice.icon === undefined))\n    throw new TypeError('An icons ChoiceChips choice needs an icon.');\n  const shape = {\n    'data-presentation': icons ? 'icons' : undefined,\n    'data-scrollable': maxHeight === undefined ? undefined : '',\n    style:\n      maxHeight === undefined\n        ? undefined\n        : `--_kui-choice-chips-max-height:${maxHeight}`,\n  };\n  const titleOf = (choice: ChoiceChipsChoice<Value>) =>\n    choice.title ?? (icons ? choice.label : undefined);\n  if (choices.some((choice) => choice.swatch !== undefined && choice.icon))\n    throw new TypeError('A ChoiceChips choice takes a swatch or an icon.');\n  const mode: ChoiceChipsSelectionMode =\n    props.multiple === true\n      ? 'multiple'\n      : props.multiple === 'toggle'\n        ? 'toggle'\n        : 'single';\n  const required = mode === 'single' && props.required === true;\n  const checked: readonly Value[] =\n    props.multiple === true || props.multiple === 'toggle'\n      ? (props.value ?? [])\n      : props.value === undefined\n        ? []\n        : [props.value];\n  const content = (choice: ChoiceChipsChoice<Value>) => (\n    <>\n      {choice.swatch === undefined ? null : (\n        <span\n          class=\"kui-choice-chips__swatch\"\n          data-swatch={\n            choice.swatch === 'transparent' ? 'transparent' : 'color'\n          }\n          style={swatchStyle(choice.swatch)}\n          aria-hidden=\"true\"\n        />\n      )}\n      {choice.icon === undefined ? null : (\n        <span class=\"kui-choice-chips__icon\" aria-hidden=\"true\">\n          {choice.icon}\n        </span>\n      )}\n      <span class=\"kui-choice-chips__label\">{choice.label}</span>\n    </>\n  );\n  if (mode === 'multiple') {\n    // One Tab stop: the first selected enabled chip, else the first enabled.\n    const enabled = disabled\n      ? []\n      : choices.filter((choice) => choice.disabled !== true);\n    const tabStop =\n      enabled.find((choice) => checked.includes(choice.value)) ?? enabled[0];\n    return (\n      <div\n        id={id}\n        class={`kui-choice-chips ${className}`.trim()}\n        data-component=\"choice-chips\"\n        data-selection-mode=\"multiple\"\n        data-size={size}\n        {...shape}\n        data-disabled={disabled ? '' : undefined}\n        data-action={action}\n        data-name={name}\n        data-form={form}\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        aria-orientation=\"horizontal\"\n        aria-label={label}\n        aria-labelledby={labelledBy}\n        aria-disabled={disabled ? 'true' : undefined}\n        slot={slot}\n      >\n        {choices.map((choice) => {\n          const unavailable = disabled || choice.disabled === true;\n          return (\n            <span\n              class=\"kui-choice-chips__chip\"\n              role=\"option\"\n              tabindex={choice === tabStop ? '0' : '-1'}\n              aria-selected={checked.includes(choice.value) ? 'true' : 'false'}\n              aria-disabled={unavailable ? 'true' : undefined}\n              data-choice-value={choice.value}\n              data-disabled={unavailable ? '' : undefined}\n              title={titleOf(choice)}\n            >\n              {content(choice)}\n            </span>\n          );\n        })}\n        {choices\n          .filter((choice) => checked.includes(choice.value))\n          .map((choice) => (\n            <input\n              class=\"kui-choice-chips__value\"\n              type=\"hidden\"\n              name={name}\n              value={choice.value}\n              form={form}\n              disabled={disabled}\n            />\n          ))}\n      </div>\n    );\n  }\n  const multiple = mode === 'toggle';\n  return (\n    <div\n      id={id}\n      class={`kui-choice-chips ${className}`.trim()}\n      data-component=\"choice-chips\"\n      data-selection-mode={mode}\n      data-size={size}\n      {...shape}\n      data-disabled={disabled ? '' : undefined}\n      role={multiple ? 'group' : 'radiogroup'}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-required={required ? 'true' : undefined}\n      aria-disabled={disabled ? 'true' : undefined}\n      slot={slot}\n    >\n      {choices.map((choice) => {\n        const unavailable = disabled || choice.disabled === true;\n        return (\n          <label\n            class=\"kui-choice-chips__chip\"\n            data-choice-value={choice.value}\n            data-disabled={unavailable ? '' : undefined}\n            title={titleOf(choice)}\n          >\n            <input\n              class=\"kui-choice-chips__input\"\n              type={multiple ? 'checkbox' : 'radio'}\n              name={name}\n              value={choice.value}\n              checked={checked.includes(choice.value)}\n              disabled={unavailable}\n              required={required}\n              form={form}\n              data-action={action}\n            />\n            {content(choice)}\n          </label>\n        );\n      })}\n    </div>\n  );\n}\n"]}