@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.91

package/dist/chunk-6L3WBDNW.js

@@ -0,0 +1,75 @@
+import { remify } from './chunk-U657IHFB.js';
+import { raw } from 'kerfjs';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var lucideIconSizePixels = {
+  xs: 12,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 32
+};
+var childMarkup = /* @__PURE__ */ new WeakMap();
+function renderChildren(icon) {
+  const cached = childMarkup.get(icon);
+  if (cached) return cached;
+  let cacheable = true;
+  const markup = raw(
+    icon.map(([tag, attrs]) => {
+      for (const value of Object.values(attrs))
+        if (typeof value !== "string" && typeof value !== "number")
+          cacheable = false;
+      return String(jsx(tag, attrs));
+    }).join("")
+  );
+  if (cacheable) childMarkup.set(icon, markup);
+  return markup;
+}
+function LucideIcon({
+  icon,
+  name,
+  appearance = "outline",
+  className,
+  color,
+  inline = false,
+  label,
+  size,
+  slot
+}) {
+  if (typeof size === "number" && (!Number.isFinite(size) || size <= 0))
+    throw new RangeError(
+      "LucideIcon size must be a positive finite pixel value"
+    );
+  if (typeof size === "string" && !Object.hasOwn(lucideIconSizePixels, size))
+    throw new RangeError("LucideIcon size must use a named icon step");
+  const pixels = typeof size === "number" ? size : size && lucideIconSizePixels[size];
+  const slotAttribute = { slot };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...slotAttribute,
+      class: className,
+      "data-lucide": name,
+      "data-inline": inline ? "true" : void 0,
+      "data-size": size === void 0 ? void 0 : String(size),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : "true",
+      viewBox: "0 0 24 24",
+      fill: appearance === "solid" ? "currentColor" : "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      style: [
+        pixels === void 0 ? void 0 : `--_kui-lucide-size:${remify(pixels)}`,
+        color === void 0 ? void 0 : `color:${color}`
+      ].filter(Boolean).join(";") || void 0,
+      children: renderChildren(icon)
+    }
+  );
+}
+
+export { LucideIcon };
+
+//# sourceMappingURL=chunk-6L3WBDNW.js.map

package/dist/chunk-6L3WBDNW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media/lucide-icon/lucide-icon.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-6L3WBDNW.js","sourcesContent":["import { raw, type SafeHtml } from 'kerfjs';\nimport { jsx } from 'kerfjs/jsx-runtime';\nimport type { IconNode } from 'lucide';\n\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\n\nexport type LucideNode = IconNode;\nexport type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;\n\nconst lucideIconSizePixels = {\n  xs: 12,\n  s: 16,\n  m: 20,\n  l: 24,\n  xl: 32,\n} as const satisfies Record<Exclude<LucideIconSize, number>, number>;\n\nexport interface LucideIconProps {\n  icon: LucideNode;\n  name: string;\n  /** Outline by default; solid fills compatible glyphs with the current text color. */\n  appearance?: 'outline' | 'solid';\n  className?: string;\n  /** Foreground color; omit to inherit the surrounding text color. */\n  color?: CssForegroundColor;\n  /** Flow with surrounding text instead of occupying a block. */\n  inline?: boolean;\n  label?: string;\n  /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */\n  size?: LucideIconSize;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Each icon node's rendered child markup. Lucide icon nodes are module-level\n * constants, so a list that re-renders the same glyph in every row serializes\n * (validates, screens, and escapes) its path data once instead of per render.\n * Keyed by node identity and held weakly, so an app-built node is collected\n * with it; treat a node as immutable once rendered. A node carrying anything\n * but string or number attribute values (outside the `IconNode` type) is\n * rendered fresh every time.\n */\nconst childMarkup = new WeakMap<LucideNode, SafeHtml>();\n\nfunction renderChildren(icon: LucideNode): SafeHtml {\n  const cached = childMarkup.get(icon);\n  if (cached) return cached;\n  let cacheable = true;\n  const markup = raw(\n    icon\n      .map(([tag, attrs]) => {\n        for (const value of Object.values(attrs))\n          if (typeof value !== 'string' && typeof value !== 'number')\n            cacheable = false;\n        return String(jsx(tag, attrs));\n      })\n      .join(''),\n  );\n  if (cacheable) childMarkup.set(icon, markup);\n  return markup;\n}\n\n/** Render a Lucide-compatible icon node without copying icon SVG strings. */\nexport function LucideIcon({\n  icon,\n  name,\n  appearance = 'outline',\n  className,\n  color,\n  inline = false,\n  label,\n  size,\n  slot,\n}: LucideIconProps) {\n  if (typeof size === 'number' && (!Number.isFinite(size) || size <= 0))\n    throw new RangeError(\n      'LucideIcon size must be a positive finite pixel value',\n    );\n  if (typeof size === 'string' && !Object.hasOwn(lucideIconSizePixels, size))\n    throw new RangeError('LucideIcon size must use a named icon step');\n  const pixels =\n    typeof size === 'number' ? size : size && lucideIconSizePixels[size];\n  const slotAttribute = { slot };\n  return (\n    <svg\n      {...slotAttribute}\n      class={className}\n      data-lucide={name}\n      data-inline={inline ? 'true' : undefined}\n      data-size={size === undefined ? undefined : String(size)}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : 'true'}\n      viewBox=\"0 0 24 24\"\n      fill={appearance === 'solid' ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      style={\n        [\n          pixels === undefined\n            ? undefined\n            : `--_kui-lucide-size:${remify(pixels)}`,\n          color === undefined ? undefined : `color:${color}`,\n        ]\n          .filter(Boolean)\n          .join(';') || undefined\n      }\n    >\n      {renderChildren(icon)}\n    </svg>\n  );\n}\n"]}

package/dist/chunk-7QQ3HE47.js

@@ -0,0 +1,17 @@
+import { jsx, Fragment, jsxs } from 'kerfjs/jsx-runtime';
+
+// src/shared/text/word-breaks.tsx
+var CAMEL_BOUNDARY = /(?<=[\p{Ll}\p{N}])(?=\p{Lu})|(?<=\p{Lu})(?=\p{Lu}\p{Ll})/u;
+function withWordBreaks(label) {
+  if (typeof label !== "string") return label;
+  const parts = label.split(CAMEL_BOUNDARY);
+  if (parts.length < 2) return label;
+  return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 ? /* @__PURE__ */ jsx("wbr", {}) : null,
+    part
+  ] })) });
+}
+
+export { withWordBreaks };
+
+//# sourceMappingURL=chunk-7QQ3HE47.js.map

package/dist/chunk-7QQ3HE47.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/text/word-breaks.tsx"],"names":[],"mappings":";;;AAIA,IAAM,cAAA,GACJ,2DAAA;AAQK,SAAS,eAAe,KAAA,EAA6C;AAC1E,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,KAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,cAAc,CAAA;AACxC,EAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,OAAO,KAAA;AAC7B,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,GAAQ,CAAA,mBAAI,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA,GAAK,IAAA;AAAA,IACtB;AAAA,GAAA,EACH,CACD,CAAA,EACH,CAAA;AAEJ","file":"chunk-7QQ3HE47.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\n// A lowercase letter or digit followed by an uppercase letter (\"ticketBoard\"),\n// or an acronym followed by a capitalized word (\"HTMLParser\" → \"HTML|Parser\").\nconst CAMEL_BOUNDARY =\n  /(?<=[\\p{Ll}\\p{N}])(?=\\p{Lu})|(?<=\\p{Lu})(?=\\p{Lu}\\p{Ll})/u;\n\n/**\n * A label with line-break opportunities (`<wbr>`) at camelCase boundaries, so a\n * wrapping row breaks a long identifier-like name (`QuickTicketComposer`) at a\n * word boundary instead of mid-word. The text, and so the accessible name, is\n * unchanged; a `SafeHtml` label is returned as given.\n */\nexport function withWordBreaks(label: string | SafeHtml): string | SafeHtml {\n  if (typeof label !== 'string') return label;\n  const parts = label.split(CAMEL_BOUNDARY);\n  if (parts.length < 2) return label;\n  return (\n    <>\n      {parts.map((part, index) => (\n        <>\n          {index > 0 ? <wbr /> : null}\n          {part}\n        </>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/chunk-A7DYEERU.js

@@ -0,0 +1,59 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/surfaces/surface-scaffold/surface-scaffold.tsx
+function DialogSurface({
+  children,
+  size = "medium",
+  presentation = "modal",
+  preferredWidth,
+  bodyInset = "compact",
+  footerInset = "comfortable",
+  viewportGutter,
+  maxHeight,
+  className = "",
+  slot
+}) {
+  const style = [
+    preferredWidth === void 0 ? "" : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,
+    viewportGutter === void 0 ? "" : `--_kui-dialog-surface-gutter:${viewportGutter}`,
+    maxHeight === void 0 || maxHeight === "viewport" ? "" : `--_kui-dialog-surface-max-height:${maxHeight}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-dialog-surface ${className}`.trim(),
+      "data-component": "dialog-surface",
+      "data-size": size,
+      "data-presentation": presentation,
+      "data-preferred-width": preferredWidth === void 0 ? void 0 : "",
+      "data-body-inset": bodyInset,
+      "data-footer-inset": footerInset,
+      "data-viewport-gutter": viewportGutter === void 0 ? void 0 : "",
+      "data-max-height": maxHeight === void 0 ? void 0 : "",
+      style: style || void 0,
+      slot,
+      children
+    }
+  );
+}
+function PopupSurface({
+  children,
+  inset = "standard",
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-popup-surface ${className}`.trim(),
+      "data-component": "popup-surface",
+      "data-inset": inset,
+      slot,
+      children
+    }
+  );
+}
+
+export { DialogSurface, PopupSurface };
+
+//# sourceMappingURL=chunk-A7DYEERU.js.map

package/dist/chunk-A7DYEERU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":";;;AA0BO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,YAAA,GAAe,OAAA;AAAA,EACf,cAAA;AAAA,EACA,SAAA,GAAY,SAAA;AAAA,EACZ,WAAA,GAAc,aAAA;AAAA,EACd,cAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,sCAAA,EAAyC,cAAc,CAAA,CAAA;AAAA,IAC3D,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,6BAAA,EAAgC,cAAc,CAAA,CAAA;AAAA,IAClD,cAAc,MAAA,IAAa,SAAA,KAAc,UAAA,GACrC,EAAA,GACA,oCAAoC,SAAS,CAAA;AAAA,GACnD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,mBAAA,EAAmB,YAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA;AAAA,MACjB,mBAAA,EAAmB,WAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA,KAAc,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACvD,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAaO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,KAAA,GAAQ,UAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC7C,gBAAA,EAAe,eAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-A7DYEERU.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\nexport type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n\nexport interface DialogSurfaceProps {\n  children: KerfUiContent;\n  size?: DialogSurfaceSize;\n  presentation?: DialogSurfacePresentation;\n  /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n  preferredWidth?: CssLength;\n  bodyInset?: SurfaceInset;\n  footerInset?: SurfaceInset;\n  /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n  viewportGutter?: CssLength;\n  /** Modal height cap, bounded by the dynamic viewport minus both gutters. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */\nexport function DialogSurface({\n  children,\n  size = 'medium',\n  presentation = 'modal',\n  preferredWidth,\n  bodyInset = 'compact',\n  footerInset = 'comfortable',\n  viewportGutter,\n  maxHeight,\n  className = '',\n  slot,\n}: DialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-max-height:${maxHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <div\n      class={`kui-dialog-surface ${className}`.trim()}\n      data-component=\"dialog-surface\"\n      data-size={size}\n      data-presentation={presentation}\n      data-preferred-width={preferredWidth === undefined ? undefined : ''}\n      data-body-inset={bodyInset}\n      data-footer-inset={footerInset}\n      data-viewport-gutter={viewportGutter === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n  children: KerfUiContent;\n  inset?: PopupSurfaceInset;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n  children,\n  inset = 'standard',\n  className = '',\n  slot,\n}: PopupSurfaceProps) {\n  return (\n    <span\n      class={`kui-popup-surface ${className}`.trim()}\n      data-component=\"popup-surface\"\n      data-inset={inset}\n      slot={slot}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/chunk-AN5IWMTM.js

@@ -0,0 +1,24 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/collections/list-inset-control/list-inset-control.tsx
+function ListInsetControl({
+  children,
+  sides = "trbl",
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-list-inset-control ${className}`.trim(),
+      "data-component": "list-inset-control",
+      "data-sides": sides,
+      slot,
+      children
+    }
+  );
+}
+
+export { ListInsetControl };
+
+//# sourceMappingURL=chunk-AN5IWMTM.js.map

package/dist/chunk-AN5IWMTM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-inset-control/list-inset-control.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-AN5IWMTM.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\n\nexport interface ListInsetControlProps {\n  /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */\n  children: KerfUiContent;\n  /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n  sides?: Sides;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Insets a control into a pane/list content region: an 8px inline margin (so its\n * edges line up with `.kui-content` items) and a stretch flex row with an 8px gap.\n * Use it for controls that carry their own border and padding but no outer margin\n * — the wrapper adds only the alignment margin and layout, not a second inset.\n */\nexport function ListInsetControl({\n  children,\n  sides = 'trbl',\n  className = '',\n  slot,\n}: ListInsetControlProps) {\n  return (\n    <div\n      class={`kui-list-inset-control ${className}`.trim()}\n      data-component=\"list-inset-control\"\n      data-sides={sides}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-B3TROLC2.js

@@ -0,0 +1,104 @@
+import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+function roleForSelectionMode(mode) {
+  switch (mode) {
+    case "single":
+      return "option";
+    case "multiple":
+      return "row";
+    case "none":
+    case "toggle":
+      return "button";
+  }
+}
+var contentItemProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-outlined"
+]);
+var interactiveProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-outlined",
+  "data-action",
+  "data-item-id",
+  "data-interactive",
+  "data-selected",
+  "data-disabled",
+  "data-selection-mode",
+  "data-kui-pressed"
+]);
+function ContentItem({
+  appearance = "transparent",
+  children,
+  frame = "none",
+  flush = false,
+  shape = "rounded",
+  title,
+  ariaLabel,
+  focusTarget = false,
+  outlined = false,
+  tabIndex,
+  interactive = false,
+  action,
+  itemId,
+  selectionMode = "none",
+  selected = false,
+  disabled = false,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    interactive ? interactiveProtectedAttributes : contentItemProtectedAttributes
+  );
+  if (interactive && !action) {
+    throw new Error("Interactive ContentItem requires an action");
+  }
+  if (interactive && selected && selectionMode === "none") {
+    throw new Error("Selected ContentItem requires a selectionMode");
+  }
+  const cls = [
+    "kui-content-item",
+    shape === "pill" ? "kui-content-item--pill" : "",
+    frame === "framed" ? "kui-content-item--framed" : "",
+    flush ? "kui-content-item--flush" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const interactiveAttributes = interactive ? {
+    "data-interactive": "true",
+    "data-action": disabled ? void 0 : action,
+    "data-item-id": itemId,
+    "data-selection-mode": selectionMode,
+    "data-selected": selectionMode === "none" ? void 0 : String(selected),
+    "data-disabled": disabled ? "true" : void 0
+  } : {};
+  let role = ariaLabel ? "region" : void 0;
+  if (interactive) role = roleForSelectionMode(selectionMode);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      ...interactiveAttributes,
+      class: cls,
+      title,
+      "data-component": "content-item",
+      "data-appearance": appearance,
+      "data-outlined": outlined ? "true" : void 0,
+      role,
+      "aria-label": ariaLabel,
+      "aria-selected": interactive && (selectionMode === "single" || selectionMode === "multiple") ? String(selected) : void 0,
+      "aria-pressed": interactive && selectionMode === "toggle" ? String(selected) : void 0,
+      "aria-disabled": interactive && disabled ? "true" : void 0,
+      tabindex: interactive ? disabled ? "-1" : "0" : tabIndex ?? (focusTarget ? "-1" : void 0),
+      slot,
+      children: interactive && selectionMode === "multiple" ? /* @__PURE__ */ jsx("div", { role: "gridcell", children }) : children
+    }
+  );
+}
+
+export { ContentItem };
+
+//# sourceMappingURL=chunk-B3TROLC2.js.map

package/dist/chunk-B3TROLC2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-B3TROLC2.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/** Base surface treatment or semantic status colors. */\nexport type ContentItemAppearance = 'transparent' | 'surface' | SemanticTone;\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n  'none' | 'single' | 'multiple' | 'toggle';\n\nfunction roleForSelectionMode(\n  mode: ContentItemSelectionMode,\n): 'option' | 'row' | 'button' {\n  switch (mode) {\n    case 'single':\n      return 'option';\n    case 'multiple':\n      return 'row';\n    case 'none':\n    case 'toggle':\n      return 'button';\n  }\n}\n\nconst contentItemProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n]);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /**\n   * Coordinated background, border, and foreground colors. `transparent`\n   * preserves the surrounding surface; `surface` paints the base surface;\n   * semantic values match StateBanner. Defaults to `transparent`.\n   */\n  appearance?: ContentItemAppearance;\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n        tabIndex?: 0 | -1;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        tabIndex?: never;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  appearance = 'transparent',\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  title,\n  ariaLabel,\n  focusTarget = false,\n  outlined = false,\n  tabIndex,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  let role: 'option' | 'row' | 'button' | 'region' | undefined = ariaLabel\n    ? 'region'\n    : undefined;\n  if (interactive) role = roleForSelectionMode(selectionMode);\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      title={title}\n      data-component=\"content-item\"\n      data-appearance={appearance}\n      data-outlined={outlined ? 'true' : undefined}\n      role={role}\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive &&\n        (selectionMode === 'single' || selectionMode === 'multiple')\n          ? String(selected)\n          : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive\n          ? disabled\n            ? '-1'\n            : '0'\n          : (tabIndex ?? (focusTarget ? '-1' : undefined))\n      }\n      slot={slot}\n    >\n      {interactive && selectionMode === 'multiple' ? (\n        <div role=\"gridcell\">{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-BYHGRKC3.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/components/actions/toolbar/toolbar.tsx
+var claim = (edges, side) => edges?.includes(side) ? "true" : void 0;
+function Toolbar({
+  leading,
+  center,
+  trailing,
+  label,
+  position = "header",
+  dividerSides = "",
+  centerAlign = "center",
+  responsive = "none",
+  responsiveAt = "narrow",
+  safeAreaEdges,
+  className = "",
+  slot
+}) {
+  const attributes = {
+    class: `kui-toolbar ${className}`.trim(),
+    "data-component": "toolbar",
+    "divider-sides": dividerSides || void 0,
+    "data-has-center": String(Boolean(center)),
+    "data-center-align": centerAlign,
+    "data-responsive": responsive,
+    "data-responsive-at": responsiveAt,
+    "data-safe-area-block-start": claim(safeAreaEdges, "block-start"),
+    "data-safe-area-block-end": claim(safeAreaEdges, "block-end"),
+    "data-safe-area-inline-start": claim(safeAreaEdges, "inline-start"),
+    "data-safe-area-inline-end": claim(safeAreaEdges, "inline-end"),
+    "aria-label": label,
+    slot
+  };
+  const zones = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__leading", children: leading }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__center", children: center }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__trailing", children: trailing })
+  ] });
+  return position === "footer" ? /* @__PURE__ */ jsx("footer", { ...attributes, children: zones }) : /* @__PURE__ */ jsx("header", { ...attributes, children: zones });
+}
+
+export { Toolbar };
+
+//# sourceMappingURL=chunk-BYHGRKC3.js.map

package/dist/chunk-BYHGRKC3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/toolbar/toolbar.tsx"],"names":[],"mappings":";;;AAwEA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,QAAA;AAAA,EACX,YAAA,GAAe,EAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,IACvC,gBAAA,EAAkB,SAAA;AAAA,IAClB,iBAAiB,YAAA,IAAgB,MAAA;AAAA,IACjC,iBAAA,EAAmB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,IACzC,mBAAA,EAAqB,WAAA;AAAA,IACrB,iBAAA,EAAmB,UAAA;AAAA,IACnB,oBAAA,EAAsB,YAAA;AAAA,IACtB,4BAAA,EAA8B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,IAChE,0BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,IAC5D,6BAAA,EAA+B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,IAClE,2BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,IAC9D,YAAA,EAAc,KAAA;AAAA,IACd;AAAA,GACF;AACA,EAAA,MAAM,wBACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AAEF,EAAA,OAAO,QAAA,KAAa,QAAA,mBAClB,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA,mBAE/B,GAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,UAAA,EAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAEnC","file":"chunk-BYHGRKC3.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { PaneSeparatorSide } from '../../layout/pane/pane.js';\n\nexport type ToolbarPosition = 'header' | 'footer';\n\nexport interface ToolbarProps {\n  leading?: KerfUiContent;\n  center?: KerfUiContent;\n  trailing?: KerfUiContent;\n  label?: string;\n  /** Use footer semantics for a bottom toolbar; defaults to header. */\n  position?: ToolbarPosition;\n  /**\n   * Physical divider edges in canonical top/right/bottom/left order, drawn\n   * always. Defaults to none: a toolbar pinned over or under scrolling content\n   * gets its divider from the scroll state instead — a `Pane` draws the line\n   * between its chrome and content while content is scrolled away beneath it,\n   * and `wireScrollDividers` `targets` can name a toolbar as chrome, which\n   * then draws its facing side the same way.\n   */\n  dividerSides?: Sides;\n  /** `balanced` gives both side zones equal tracks, centering the middle zone on the toolbar even if only one side has controls. */\n  centerAlign?: 'center' | 'stretch' | 'balanced';\n  /**\n   * Component-owned responsive layout; applications choose the policy rather\n   * than restyling toolbar internals. Under every policy the trailing zone\n   * wraps its groups instead of clipping an action, and the center zone keeps\n   * its whole content width: when the zones do not fit one row, the leading\n   * title truncates with an ellipsis rather than the center overlapping it.\n   * - `none` keeps one row; the leading identity truncates first.\n   * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n   *   groups onto further rows.\n   * - `wrap` keeps one row while every zone fits at its natural width, and\n   *   otherwise moves the trailing zone below a whole leading identity.\n   * - `center-priority` gives an expanded center control the full row.\n   * - `trailing-priority` moves an expanded trailing control to a full row\n   *   below the leading identity at `responsiveAt`.\n   */\n  responsive?:\n    'none' | 'stack' | 'wrap' | 'center-priority' | 'trailing-priority';\n  /** Container width at which `stack` or `trailing-priority` activates. */\n  responsiveAt?: 'compact' | 'narrow';\n  /**\n   * Screen edges this toolbar claims for device safe-area compensation, for an\n   * app bar or bottom bar that sits directly at a screen edge rather than in a\n   * Pane header or footer. Each listed side pads by the inset its surrounding\n   * layout reports through `--kui-edge-inset-*`, or the full device inset when\n   * nothing routes that edge, while the toolbar's box and dividers paint\n   * through. Omitted, the toolbar pads only the inline edges an owner such as\n   * a Pane header hands it, and never a block edge.\n   */\n  safeAreaEdges?: readonly PaneSeparatorSide[];\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A toolbar's configuration, apart from its content: the props a composite\n * that renders a `Toolbar` for the app (a Workbench or CollapsiblePanel\n * toolbar) forwards, so the app configures that toolbar instead of styling it.\n */\nexport type ToolbarConfig = Pick<\n  ToolbarProps,\n  | 'dividerSides'\n  | 'centerAlign'\n  | 'responsive'\n  | 'responsiveAt'\n  | 'safeAreaEdges'\n>;\n\nconst claim = (\n  edges: readonly PaneSeparatorSide[] | undefined,\n  side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n  leading,\n  center,\n  trailing,\n  label,\n  position = 'header',\n  dividerSides = '',\n  centerAlign = 'center',\n  responsive = 'none',\n  responsiveAt = 'narrow',\n  safeAreaEdges,\n  className = '',\n  slot,\n}: ToolbarProps) {\n  const attributes = {\n    class: `kui-toolbar ${className}`.trim(),\n    'data-component': 'toolbar',\n    'divider-sides': dividerSides || undefined,\n    'data-has-center': String(Boolean(center)),\n    'data-center-align': centerAlign,\n    'data-responsive': responsive,\n    'data-responsive-at': responsiveAt,\n    'data-safe-area-block-start': claim(safeAreaEdges, 'block-start'),\n    'data-safe-area-block-end': claim(safeAreaEdges, 'block-end'),\n    'data-safe-area-inline-start': claim(safeAreaEdges, 'inline-start'),\n    'data-safe-area-inline-end': claim(safeAreaEdges, 'inline-end'),\n    'aria-label': label,\n    slot,\n  };\n  const zones = (\n    <>\n      <div class=\"kui-toolbar__leading\">{leading}</div>\n      <div class=\"kui-toolbar__center\">{center}</div>\n      <div class=\"kui-toolbar__trailing\">{trailing}</div>\n    </>\n  );\n  return position === 'footer' ? (\n    <footer {...attributes}>{zones}</footer>\n  ) : (\n    <header {...attributes}>{zones}</header>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-CD5TOO22.js

@@ -0,0 +1,82 @@
+import { gapLength } from './chunk-6IVNMC6R.js';
+import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var gridProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-columns",
+  "data-min-column-width",
+  "data-auto-fill",
+  "data-flex",
+  "data-fill",
+  "data-text-insets",
+  "data-control-insets"
+]);
+function Grid({
+  children,
+  selectionMode,
+  ariaLabel,
+  columns,
+  minColumnWidth,
+  autoFill = false,
+  gap = "xs",
+  flex = false,
+  fill = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  if (selectionMode === "multiple" && !ariaLabel) {
+    throw new Error("Multi-select Grid requires an ariaLabel");
+  }
+  if (minColumnWidth !== void 0 && columns !== void 0) {
+    throw new RangeError(
+      "Grid columns and minColumnWidth are mutually exclusive"
+    );
+  }
+  if (autoFill && minColumnWidth === void 0) {
+    throw new RangeError("Grid autoFill requires minColumnWidth");
+  }
+  if (minColumnWidth === void 0 && (columns === void 0 || !Number.isSafeInteger(columns) || columns < 1)) {
+    throw new RangeError("Grid columns must be a positive safe integer");
+  }
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    gridProtectedAttributes
+  );
+  const gapStyle = typeof gap === "string" ? `--_kui-grid-gap:${gapLength(gap)}` : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    columns === void 0 ? "" : `--_kui-grid-columns:${columns}`,
+    minColumnWidth === void 0 ? "" : `--_kui-grid-min-column-width:${minColumnWidth}`,
+    gapStyle,
+    flexValue ? `--_kui-grid-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-grid ${className}`.trim(),
+      "data-component": "grid",
+      role: selectionMode === "multiple" ? "grid" : void 0,
+      "aria-label": selectionMode === "multiple" ? ariaLabel : void 0,
+      "aria-multiselectable": selectionMode === "multiple" ? "true" : void 0,
+      "data-columns": columns === void 0 ? void 0 : String(columns),
+      "data-min-column-width": minColumnWidth === void 0 ? void 0 : "true",
+      "data-auto-fill": autoFill ? "true" : void 0,
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Grid };
+
+//# sourceMappingURL=chunk-CD5TOO22.js.map

package/dist/chunk-CD5TOO22.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"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","file":"chunk-CD5TOO22.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\nconst gridProtectedAttributes = new Set([\n  'data-component',\n  'data-columns',\n  'data-min-column-width',\n  'data-auto-fill',\n  'data-flex',\n  'data-fill',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype GridRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-columns'?: never;\n    'data-min-column-width'?: never;\n    'data-auto-fill'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\ninterface GridCommonProps {\n  children?: KerfUiContent;\n  /** Make this a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` tiles. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** One spacing value or separate column and row values. Defaults to xs. */\n  gap?: UiGap;\n  /** Allow this grid to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this grid is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Grid-owned structural attributes remain protected. */\n  rootAttributes?: GridRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type GridProps = GridCommonProps &\n  (\n    | {\n        /** Number of equal-width columns. Must be a positive safe integer. */\n        columns: number;\n        minColumnWidth?: never;\n        autoFill?: never;\n      }\n    | {\n        columns?: never;\n        /** Fit equal columns of at least this width; collapse as the container narrows. */\n        minColumnWidth: CssLength;\n        /** Keep empty tracks instead of stretching a sparse row. Defaults to false. */\n        autoFill?: boolean;\n      }\n  );\n\n/** Render equal tracks with a fixed count or a responsive minimum width. */\nexport function Grid({\n  children,\n  selectionMode,\n  ariaLabel,\n  columns,\n  minColumnWidth,\n  autoFill = false,\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: GridProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select Grid requires an ariaLabel');\n  }\n  if (minColumnWidth !== undefined && columns !== undefined) {\n    throw new RangeError(\n      'Grid columns and minColumnWidth are mutually exclusive',\n    );\n  }\n  if (autoFill && minColumnWidth === undefined) {\n    throw new RangeError('Grid autoFill requires minColumnWidth');\n  }\n  if (\n    minColumnWidth === undefined &&\n    (columns === undefined || !Number.isSafeInteger(columns) || columns < 1)\n  ) {\n    throw new RangeError('Grid columns must be a positive safe integer');\n  }\n\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    gridProtectedAttributes,\n  );\n  const gapStyle =\n    typeof gap === 'string'\n      ? `--_kui-grid-gap:${gapLength(gap)}`\n      : `--_kui-grid-column-gap:${gapLength(gap.column)};--_kui-grid-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    columns === undefined ? '' : `--_kui-grid-columns:${columns}`,\n    minColumnWidth === undefined\n      ? ''\n      : `--_kui-grid-min-column-width:${minColumnWidth}`,\n    gapStyle,\n    flexValue ? `--_kui-grid-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-grid ${className}`.trim()}\n      data-component=\"grid\"\n      role={selectionMode === 'multiple' ? 'grid' : undefined}\n      aria-label={selectionMode === 'multiple' ? ariaLabel : undefined}\n      aria-multiselectable={selectionMode === 'multiple' ? 'true' : undefined}\n      data-columns={columns === undefined ? undefined : String(columns)}\n      data-min-column-width={minColumnWidth === undefined ? undefined : 'true'}\n      data-auto-fill={autoFill ? 'true' : undefined}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}