@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/chunk-3WYREXW4.js

@@ -0,0 +1,120 @@
+import { popover } from 'kerfjs/overlay';
+
+// src/components/feedback/anchored-surface/anchored-surface.tsx
+function usedColorScheme(element) {
+  const keywords = window.getComputedStyle(element).colorScheme.split(/\s+/);
+  const light = keywords.includes("light");
+  const dark = keywords.includes("dark");
+  if (light && dark)
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return dark ? "dark" : "light";
+}
+function inverseScheme(element) {
+  return usedColorScheme(element) === "dark" ? "light" : "dark";
+}
+function composedParent(node) {
+  const root = node.getRootNode();
+  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+}
+function followScheme(surface, source, initial, closed) {
+  let current = initial;
+  const sync = () => {
+    if (!source.isConnected) return;
+    const next = inverseScheme(source);
+    if (next === current) return;
+    surface.classList.replace(
+      `kui-anchored-surface--scheme-${current}`,
+      `kui-anchored-surface--scheme-${next}`
+    );
+    current = next;
+  };
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener?.("change", sync);
+  const observer = new MutationObserver(sync);
+  for (let node = source; node; node = composedParent(node))
+    observer.observe(node, { attributes: true });
+  void closed.then(() => {
+    media.removeEventListener?.("change", sync);
+    observer.disconnect();
+  });
+}
+function modalScope(context) {
+  let child;
+  for (let node = context ?? null; node !== null; ) {
+    if (node.localName === "dialog") return node;
+    if (child?.assignedSlot?.closest("dialog")) return node;
+    child = node;
+    const root = node.getRootNode();
+    node = node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+  }
+  return document.body;
+}
+function openAnchoredSurface(anchor, content, options) {
+  return openWithSchemeSource(anchor, content, options, anchor);
+}
+function openWithSchemeSource(anchor, content, options, schemeSource) {
+  const {
+    label,
+    initialFocus = true,
+    dismiss = ["escape", "outside"],
+    viewportMargin = 8,
+    tone = "default",
+    ...rest
+  } = options;
+  if (!label.trim())
+    throw new TypeError("openAnchoredSurface() requires a nonempty label");
+  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();
+  const scheme = tone === "dark" ? inverseScheme(schemeSource) : void 0;
+  const handle = popover(anchor, content, {
+    ...rest,
+    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ""}`,
+    native: true,
+    initialFocus,
+    dismiss,
+    viewportMargin,
+    // The surface scrolls: fit it to the room beside the anchor, on the
+    // roomier side when neither fits, refreshed on every reposition.
+    fitHeight: true
+  });
+  handle.el.setAttribute("role", "dialog");
+  handle.el.setAttribute("aria-label", label);
+  handle.el.dataset.component = "anchored-surface";
+  if (scheme) {
+    handle.el.dataset.tone = "dark";
+    followScheme(handle.el, schemeSource, scheme, handle.result);
+  }
+  const dialog = anchor.closest("dialog");
+  if (dialog?.open) {
+    const onClose = () => handle.close();
+    dialog.addEventListener("close", onClose);
+    void handle.result.then(() => dialog.removeEventListener("close", onClose));
+  }
+  return handle;
+}
+function openAnchoredSurfaceAt(point, content, options) {
+  const { x, y, context } = point;
+  if (!Number.isFinite(x) || !Number.isFinite(y))
+    throw new TypeError("openAnchoredSurfaceAt() requires finite coordinates");
+  const anchor = document.createElement("span");
+  anchor.setAttribute("aria-hidden", "true");
+  anchor.style.cssText = "position:fixed;width:0;height:0;pointer-events:none;visibility:hidden";
+  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);
+  modalScope(context).append(anchor);
+  try {
+    const handle = openWithSchemeSource(
+      anchor,
+      content,
+      options,
+      context?.isConnected ? context : anchor
+    );
+    void handle.result.then(() => anchor.remove());
+    return handle;
+  } catch (error) {
+    anchor.remove();
+    throw error;
+  }
+}
+
+export { openAnchoredSurface, openAnchoredSurfaceAt };
+
+//# sourceMappingURL=chunk-3WYREXW4.js.map

package/dist/chunk-3WYREXW4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/anchored-surface/anchored-surface.tsx"],"names":[],"mappings":"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","file":"chunk-3WYREXW4.js","sourcesContent":["import type { OverlayContent, OverlayHandle } from 'kerfjs/overlay';\nimport { popover, type PopoverOptions } from 'kerfjs/overlay';\n\n/** App-facing options for a non-modal, arbitrary-content help surface. */\nexport interface AnchoredSurfaceOptions extends Pick<\n  PopoverOptions,\n  | 'placement'\n  | 'align'\n  | 'gap'\n  | 'dismiss'\n  | 'initialFocus'\n  | 'onDismiss'\n  | 'outsideIgnore'\n  | 'container'\n> {\n  /** Accessible name for the non-modal dialog. */\n  label: string;\n  /**\n   * Gutter in px kept between the surface and the viewport edges when it is\n   * clamped horizontally and fitted vertically. Default `8`, the same gutter as\n   * the surface's maximum size.\n   */\n  viewportMargin?: number;\n  /**\n   * Where to append the surface. Default: inside the anchor's open modal\n   * dialog — a native `<dialog>`'s host slot, or a slot kerf creates in a\n   * `wa-dialog` / `wa-drawer` — so the surface stays interactive there;\n   * otherwise `document.body`. Pass an element only for a modal context kerf\n   * cannot resolve; an element inside an open modal closes the surface with it.\n   */\n  container?: Element;\n  /**\n   * Surface tone. `'default'` follows the anchor's color scheme. `'dark'` is\n   * the loud, inverse tone of a `ToolbarControlGroup` / `ToolbarText`\n   * `tone=\"dark\"`, for a popup anchored to dark media chrome (a volume popup\n   * over a video preview): dark beside a light page and light beside a dark\n   * one, so the popup matches the control group that opened it. The surface\n   * takes the opposite of the anchor's color scheme, so it and every Kerf UI\n   * or Web Awesome component inside it resolve the same semantic\n   * `light-dark()` tokens to the other side: no new colors, no child\n   * overrides. While open it follows a live switch of that scheme (the OS\n   * preference, or an app theme class or attribute on an ancestor). Default\n   * `'default'`.\n   */\n  tone?: AnchoredSurfaceTone;\n}\n\n/** {@link AnchoredSurfaceOptions.tone}: follow the anchor's scheme, or invert it. */\nexport type AnchoredSurfaceTone = 'default' | 'dark';\n\n// The color scheme `light-dark()` resolves to at `element`: an explicit single\n// scheme wins; `light dark` follows the user's preference, like the browser.\nfunction usedColorScheme(element: Element): 'light' | 'dark' {\n  const keywords = window.getComputedStyle(element).colorScheme.split(/\\s+/);\n  const light = keywords.includes('light');\n  const dark = keywords.includes('dark');\n  if (light && dark)\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  return dark ? 'dark' : 'light';\n}\n\n/** The dark tone's surface scheme: the opposite of `element`'s used scheme. */\nfunction inverseScheme(element: Element): 'light' | 'dark' {\n  return usedColorScheme(element) === 'dark' ? 'light' : 'dark';\n}\n\n/** The flat-tree parent: the parent element, or a shadow root's host. */\nfunction composedParent(node: Element): Element | null {\n  const root = node.getRootNode();\n  return node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n}\n\n/**\n * Keep an open dark-tone surface's scheme class the inverse of `source`'s\n * used scheme while the scheme switches live: the OS preference changes, or\n * an app theme class, attribute, or inline `color-scheme` changes on\n * `source` or one of its ancestors (the only places an inherited\n * `color-scheme` comes from). Stops when `closed` settles.\n */\nfunction followScheme(\n  surface: HTMLElement,\n  source: Element,\n  initial: 'light' | 'dark',\n  closed: Promise<unknown>,\n): void {\n  let current = initial;\n  const sync = () => {\n    if (!source.isConnected) return;\n    const next = inverseScheme(source);\n    if (next === current) return;\n    surface.classList.replace(\n      `kui-anchored-surface--scheme-${current}`,\n      `kui-anchored-surface--scheme-${next}`,\n    );\n    current = next;\n  };\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  media.addEventListener?.('change', sync);\n  const observer = new MutationObserver(sync);\n  for (let node: Element | null = source; node; node = composedParent(node))\n    observer.observe(node, { attributes: true });\n  void closed.then(() => {\n    media.removeEventListener?.('change', sync);\n    observer.disconnect();\n  });\n}\n\n/** A viewport pointer location; `context` is the element under the pointer. */\nexport interface AnchoredSurfacePoint {\n  x: number;\n  y: number;\n  /**\n   * Pass the event target when opening from inside a modal dialog, native or\n   * Web Awesome (`wa-dialog`, `wa-drawer`). The dark tone also reads its\n   * color scheme from `context`, so a region with its own `color-scheme` is\n   * honored; without it the scheme is the modal scope's (or the page's).\n   */\n  context?: Element;\n}\n\n// The element a temporary pointer anchor joins so the overlay core resolves\n// the same modal context as `context`: the nearest `<dialog>`, or a shadow host\n// (`wa-dialog`, `wa-drawer`) whose slot renders `context` inside a `<dialog>`\n// in its shadow root. Light-DOM children of that host are slotted inside it.\nfunction modalScope(context: Element | undefined): Element {\n  let child: Element | undefined;\n  for (let node = context ?? null; node !== null;) {\n    if (node.localName === 'dialog') return node;\n    if (child?.assignedSlot?.closest('dialog')) return node;\n    child = node;\n    const root = node.getRootNode();\n    node =\n      node.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n  }\n  return document.body;\n}\n\n/**\n * Open app-owned content beside an element. The surface owns its Kerf UI chrome;\n * kerfjs/overlay owns positioning, top-layer/modal hosting, focus, and dismissal.\n * The surface stays `viewportMargin` inside the viewport edges and fits its\n * height to the room beside the anchor (the roomier side when neither holds it),\n * scrolling its content; `--kui-anchored-surface-available-height` exposes that\n * room to the content, updated as the page scrolls or resizes.\n * The caller owns content, action policy, and calling `close()` when an action\n * completes. `initialFocus` defaults to the first focusable descendant; set it\n * to `false` for read-only help that should leave focus on its trigger.\n */\nexport function openAnchoredSurface(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  return openWithSchemeSource(anchor, content, options, anchor);\n}\n\n/** `openAnchoredSurface`, with the element the dark tone reads its scheme from. */\nfunction openWithSchemeSource(\n  anchor: Element,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n  schemeSource: Element,\n): OverlayHandle {\n  const {\n    label,\n    initialFocus = true,\n    dismiss = ['escape', 'outside'],\n    viewportMargin = 8,\n    tone = 'default',\n    ...rest\n  } = options;\n  if (!label.trim())\n    throw new TypeError('openAnchoredSurface() requires a nonempty label');\n  // Safari does not focus buttons on pointer press. Make a focusable trigger\n  // the overlay's restore target consistently, including that engine.\n  if (anchor instanceof HTMLElement && anchor.tabIndex >= 0) anchor.focus();\n  // The dark tone's scheme is a class from creation, so the surface's first\n  // style resolution already has it: flipping it after the content mounts\n  // would run the content's own color transitions on open.\n  const scheme = tone === 'dark' ? inverseScheme(schemeSource) : undefined;\n  const handle = popover(anchor, content, {\n    ...rest,\n    className: `kui-anchored-surface${scheme ? ` kui-anchored-surface--scheme-${scheme}` : ''}`,\n    native: true,\n    initialFocus,\n    dismiss,\n    viewportMargin,\n    // The surface scrolls: fit it to the room beside the anchor, on the\n    // roomier side when neither fits, refreshed on every reposition.\n    fitHeight: true,\n  });\n  handle.el.setAttribute('role', 'dialog');\n  handle.el.setAttribute('aria-label', label);\n  handle.el.dataset.component = 'anchored-surface';\n  if (scheme) {\n    handle.el.dataset.tone = 'dark';\n    followScheme(handle.el, schemeSource, scheme, handle.result);\n  }\n  const dialog = anchor.closest('dialog');\n  if (dialog?.open) {\n    const onClose = () => handle.close();\n    dialog.addEventListener('close', onClose);\n    void handle.result.then(() => dialog.removeEventListener('close', onClose));\n  }\n  return handle;\n}\n\n/**\n * Open the same surface at pointer coordinates. The temporary anchor has no\n * layout or hit target. `context` keeps a surface opened inside a modal dialog\n * in that dialog's interactive host slot; it is removed on close or failure.\n */\nexport function openAnchoredSurfaceAt(\n  point: AnchoredSurfacePoint,\n  content: OverlayContent,\n  options: AnchoredSurfaceOptions,\n): OverlayHandle {\n  const { x, y, context } = point;\n  if (!Number.isFinite(x) || !Number.isFinite(y))\n    throw new TypeError('openAnchoredSurfaceAt() requires finite coordinates');\n  const anchor = document.createElement('span');\n  anchor.setAttribute('aria-hidden', 'true');\n  anchor.style.cssText =\n    'position:fixed;width:0;height:0;pointer-events:none;visibility:hidden';\n  // The positioning core reads the anchor's viewport rect. A virtual rect\n  // avoids coordinate conversion when `context` sits in a transformed dialog.\n  anchor.getBoundingClientRect = () => new DOMRect(x, y, 0, 0);\n  // Only modal membership matters for host selection. Keep the temporary node\n  // out of the event target itself (which may be an input or a custom element).\n  modalScope(context).append(anchor);\n  try {\n    const handle = openWithSchemeSource(\n      anchor,\n      content,\n      options,\n      context?.isConnected ? context : anchor,\n    );\n    void handle.result.then(() => anchor.remove());\n    return handle;\n  } catch (error) {\n    anchor.remove();\n    throw error;\n  }\n}\n"]}

package/dist/chunk-4UB5Z3ZZ.js

@@ -0,0 +1,68 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var summaryRowProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-presentation",
+  "data-list-edge",
+  "data-rail",
+  "data-selected",
+  "data-dimmed"
+]);
+function SummaryRow({
+  title,
+  leading,
+  trailingMeta,
+  metadata,
+  presentation = "row",
+  titleLines,
+  rail,
+  selected = false,
+  dimmed = false,
+  listEdge,
+  deferRendering = false,
+  ariaLabel,
+  id,
+  className = "",
+  rootAttributes = {}
+}) {
+  if (titleLines !== void 0 && (!Number.isInteger(titleLines) || titleLines < 1))
+    throw new RangeError("SummaryRow titleLines must be a positive integer");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, summaryRowProtected),
+      id,
+      class: `kui-summary-row ${className}`.trim(),
+      "data-component": "summary-row",
+      "data-presentation": presentation,
+      "data-list-edge": listEdge,
+      "data-rail": rail,
+      "data-selected": selected ? "true" : void 0,
+      "data-dimmed": dimmed ? "true" : void 0,
+      "data-defer": deferRendering ? "true" : void 0,
+      role: "option",
+      tabindex: "0",
+      "aria-selected": selected ? "true" : "false",
+      "aria-label": ariaLabel,
+      style: titleLines === void 0 ? void 0 : `--_kui-summary-row-title-lines:${titleLines}`,
+      children: [
+        rail && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__rail", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__body", children: [
+          leading && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__leading", children: leading }),
+          /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__content", children: [
+            /* @__PURE__ */ jsxs("div", { class: "kui-summary-row__title", children: [
+              trailingMeta !== void 0 && /* @__PURE__ */ jsx("span", { class: "kui-summary-row__trailing", children: trailingMeta }),
+              title
+            ] }),
+            metadata && /* @__PURE__ */ jsx("div", { class: "kui-summary-row__metadata", children: metadata })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SummaryRow };
+
+//# sourceMappingURL=chunk-4UB5Z3ZZ.js.map

package/dist/chunk-4UB5Z3ZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/summary-row/summary-row.tsx"],"names":[],"mappings":";;;AAWA,IAAM,mBAAA,uBAA0B,GAAA,CAAI;AAAA,EAClC,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AAmDM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,UAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB;AACnB,CAAA,EAAoB;AAClB,EAAA,IACE,eAAe,MAAA,KACd,CAAC,OAAO,SAAA,CAAU,UAAU,KAAK,UAAA,GAAa,CAAA,CAAA;AAE/C,IAAA,MAAM,IAAI,WAAW,kDAAkD,CAAA;AACzE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,mBAAmB,CAAA;AAAA,MAC5D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,mBAAA,EAAmB,YAAA;AAAA,MACnB,gBAAA,EAAgB,QAAA;AAAA,MAChB,WAAA,EAAW,IAAA;AAAA,MACX,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,aAAA,EAAa,SAAS,MAAA,GAAS,MAAA;AAAA,MAC/B,YAAA,EAAY,iBAAiB,MAAA,GAAS,MAAA;AAAA,MACtC,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAS,GAAA;AAAA,MACT,eAAA,EAAe,WAAW,MAAA,GAAS,OAAA;AAAA,MACnC,YAAA,EAAY,SAAA;AAAA,MACZ,KAAA,EACE,UAAA,KAAe,MAAA,GACX,MAAA,GACA,kCAAkC,UAAU,CAAA,CAAA;AAAA,MAGjD,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAwB,eAAY,MAAA,EAAO,CAAA;AAAA,wBAChE,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EACR,QAAA,EAAA;AAAA,UAAA,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EAA4B,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,0BAC5D,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EACT,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACR,QAAA,EAAA;AAAA,cAAA,YAAA,KAAiB,MAAA,oBAChB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,6BAA6B,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,cAEvD;AAAA,aAAA,EACH,CAAA;AAAA,YACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,6BAA6B,QAAA,EAAA,QAAA,EAAS;AAAA,WAAA,EAChE;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-4UB5Z3ZZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport 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\n/** `row` for a list section; `card` for a board column. */\nexport type SummaryRowPresentation = 'row' | 'card';\n/** A row's place in a rounded list section, so its corners match. */\nexport type SummaryRowListEdge = 'start' | 'end' | 'only';\n\nconst summaryRowProtected = new Set([\n  'data-component',\n  'data-presentation',\n  'data-list-edge',\n  'data-rail',\n  'data-selected',\n  'data-dimmed',\n]);\n\ntype SummaryRowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-presentation'?: never;\n    'data-list-edge'?: never;\n    'data-rail'?: never;\n    'data-selected'?: never;\n    'data-dimmed'?: never;\n  }\n>;\n\nexport interface SummaryRowProps {\n  /** The identity line: an identifier, inline status glyphs, and the title. */\n  title: KerfUiContent;\n  /** Optional leading glyph, such as a category icon. */\n  leading?: SafeHtml;\n  /** Quiet text at the end of the title line, such as a relative time. */\n  trailingMeta?: string | SafeHtml;\n  /** A wrapping line of badges, chips, and quiet text below the title. */\n  metadata?: KerfUiContent;\n  /** `row` (default) or `card`. */\n  presentation?: SummaryRowPresentation;\n  /** Title lines before clipping; default 2 for a row and 4 for a card. */\n  titleLines?: number;\n  /** A leading state rail in a semantic tone (Up Next, blocked, …). */\n  rail?: SemanticTone;\n  /** Selected state, exposed as `aria-selected`. */\n  selected?: boolean;\n  /** Dim a finished or cut item; hover and selection restore it. */\n  dimmed?: boolean;\n  /** Round the corners that meet a rounded list section's edge. */\n  listEdge?: SummaryRowListEdge;\n  /** Skip rendering while off screen in long lists (`content-visibility`). */\n  deferRendering?: boolean;\n  /** Accessible name when the visible content is not a good one. */\n  ariaLabel?: string;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` identity (an item id or delegated action) on the option. */\n  rootAttributes?: SummaryRowRootAttributes;\n}\n\n/**\n * A selectable, keyboard-focusable summary of one item, as a list row or a\n * board card: an optional leading glyph and state rail, a clamped identity line\n * with trailing quiet metadata, and a wrapping metadata line. It is a\n * `role=\"option\"`; place rows in a labeled `role=\"listbox\"` and own selection\n * and keyboard movement in the application.\n */\nexport function SummaryRow({\n  title,\n  leading,\n  trailingMeta,\n  metadata,\n  presentation = 'row',\n  titleLines,\n  rail,\n  selected = false,\n  dimmed = false,\n  listEdge,\n  deferRendering = false,\n  ariaLabel,\n  id,\n  className = '',\n  rootAttributes = {},\n}: SummaryRowProps) {\n  if (\n    titleLines !== undefined &&\n    (!Number.isInteger(titleLines) || titleLines < 1)\n  )\n    throw new RangeError('SummaryRow titleLines must be a positive integer');\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, summaryRowProtected)}\n      id={id}\n      class={`kui-summary-row ${className}`.trim()}\n      data-component=\"summary-row\"\n      data-presentation={presentation}\n      data-list-edge={listEdge}\n      data-rail={rail}\n      data-selected={selected ? 'true' : undefined}\n      data-dimmed={dimmed ? 'true' : undefined}\n      data-defer={deferRendering ? 'true' : undefined}\n      role=\"option\"\n      tabindex=\"0\"\n      aria-selected={selected ? 'true' : 'false'}\n      aria-label={ariaLabel}\n      style={\n        titleLines === undefined\n          ? undefined\n          : `--_kui-summary-row-title-lines:${titleLines}`\n      }\n    >\n      {rail && <span class=\"kui-summary-row__rail\" aria-hidden=\"true\" />}\n      <div class=\"kui-summary-row__body\">\n        {leading && <span class=\"kui-summary-row__leading\">{leading}</span>}\n        <div class=\"kui-summary-row__content\">\n          <div class=\"kui-summary-row__title\">\n            {trailingMeta !== undefined && (\n              <span class=\"kui-summary-row__trailing\">{trailingMeta}</span>\n            )}\n            {title}\n          </div>\n          {metadata && <div class=\"kui-summary-row__metadata\">{metadata}</div>}\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-6C6DLP3W.js

@@ -0,0 +1,31 @@
+// src/catalog/ux-review.ts
+var UX_REVIEW_PROJECT_PATH = "__ux-review/project.json";
+function uxReviewCaptureUrl({
+  projectDirectory,
+  title,
+  context
+}) {
+  const url = new URL("uxreview://capture");
+  url.searchParams.set("kind", "screenshot");
+  url.searchParams.set("target", "region");
+  url.searchParams.set("project", projectDirectory);
+  url.searchParams.set("title", title);
+  url.searchParams.set("context", context);
+  return url.href;
+}
+var ABSOLUTE_PATH = /^(?:\/|[A-Za-z]:[\\/])/;
+async function loadUxReviewProject(pageUrl, fetchImpl = globalThis.fetch) {
+  try {
+    const response = await fetchImpl(new URL(UX_REVIEW_PROJECT_PATH, pageUrl));
+    if (!response.ok) return null;
+    const data = await response.json();
+    const directory = typeof data === "object" && data !== null && "projectDirectory" in data ? data.projectDirectory : void 0;
+    return typeof directory === "string" && ABSOLUTE_PATH.test(directory) ? directory : null;
+  } catch {
+    return null;
+  }
+}
+
+export { UX_REVIEW_PROJECT_PATH, loadUxReviewProject, uxReviewCaptureUrl };
+
+//# sourceMappingURL=chunk-6C6DLP3W.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/catalog/ux-review.ts"],"names":[],"mappings":";AAQO,IAAM,sBAAA,GAAyB;AAa/B,SAAS,kBAAA,CAAmB;AAAA,EACjC,gBAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAA4B;AAC1B,EAAA,MAAM,GAAA,GAAM,IAAI,GAAA,CAAI,oBAAoB,CAAA;AACxC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,MAAA,EAAQ,YAAY,CAAA;AACzC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,QAAA,EAAU,QAAQ,CAAA;AACvC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,SAAA,EAAW,gBAAgB,CAAA;AAChD,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,OAAA,EAAS,KAAK,CAAA;AACnC,EAAA,GAAA,CAAI,YAAA,CAAa,GAAA,CAAI,SAAA,EAAW,OAAO,CAAA;AACvC,EAAA,OAAO,GAAA,CAAI,IAAA;AACb;AAGA,IAAM,aAAA,GAAgB,wBAAA;AAOtB,eAAsB,mBAAA,CACpB,OAAA,EACA,SAAA,GAAqC,UAAA,CAAW,KAAA,EACxB;AACxB,EAAA,IAAI;AACF,IAAA,MAAM,WAAW,MAAM,SAAA,CAAU,IAAI,GAAA,CAAI,sBAAA,EAAwB,OAAO,CAAC,CAAA;AACzE,IAAA,IAAI,CAAC,QAAA,CAAS,EAAA,EAAI,OAAO,IAAA;AACzB,IAAA,MAAM,IAAA,GAAgB,MAAM,QAAA,CAAS,IAAA,EAAK;AAC1C,IAAA,MAAM,SAAA,GACJ,OAAO,IAAA,KAAS,QAAA,IAAY,SAAS,IAAA,IAAQ,kBAAA,IAAsB,IAAA,GAC/D,IAAA,CAAK,gBAAA,GACL,KAAA,CAAA;AACN,IAAA,OAAO,OAAO,SAAA,KAAc,QAAA,IAAY,cAAc,IAAA,CAAK,SAAS,IAChE,SAAA,GACA,IAAA;AAAA,EACN,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF","file":"chunk-6C6DLP3W.js","sourcesContent":["/**\n * Browser helpers for UX Review region captures from a catalog. The local\n * project directory comes from `uxReviewPlugin` (`@kerfjs/ui/vite-ux-review`),\n * which serves it to the catalog page on a Vite dev or preview server; static\n * hosting has no such endpoint, so a catalog there shows no capture link.\n */\n\n/** Where `uxReviewPlugin` serves `{ projectDirectory }`, relative to the catalog page. */\nexport const UX_REVIEW_PROJECT_PATH = '__ux-review/project.json';\n\n/** What a UX Review region capture is preset with. */\nexport interface UxReviewCapture {\n  /** The absolute project directory UX Review files the review under. */\n  projectDirectory: string;\n  /** The review title. */\n  title: string;\n  /** Review context: what was selected and where. */\n  context: string;\n}\n\n/** A `uxreview://capture` link that starts a region screenshot for a project. */\nexport function uxReviewCaptureUrl({\n  projectDirectory,\n  title,\n  context,\n}: UxReviewCapture): string {\n  const url = new URL('uxreview://capture');\n  url.searchParams.set('kind', 'screenshot');\n  url.searchParams.set('target', 'region');\n  url.searchParams.set('project', projectDirectory);\n  url.searchParams.set('title', title);\n  url.searchParams.set('context', context);\n  return url.href;\n}\n\n/** POSIX (`/…`) or Windows drive (`C:\\…`, `C:/…`) absolute path. */\nconst ABSOLUTE_PATH = /^(?:\\/|[A-Za-z]:[\\\\/])/;\n\n/**\n * Ask the server that served `pageUrl` for its UX Review project directory.\n * Resolves `null` when there is none (static hosting, a server without the\n * plugin, a malformed answer, or a network failure); never rejects.\n */\nexport async function loadUxReviewProject(\n  pageUrl: string | URL,\n  fetchImpl: typeof globalThis.fetch = globalThis.fetch,\n): Promise<string | null> {\n  try {\n    const response = await fetchImpl(new URL(UX_REVIEW_PROJECT_PATH, pageUrl));\n    if (!response.ok) return null;\n    const data: unknown = await response.json();\n    const directory =\n      typeof data === 'object' && data !== null && 'projectDirectory' in data\n        ? data.projectDirectory\n        : undefined;\n    return typeof directory === 'string' && ABSOLUTE_PATH.test(directory)\n      ? directory\n      : null;\n  } catch {\n    return null;\n  }\n}\n"]}

package/dist/chunk-7IUEBNCO.js

@@ -0,0 +1,108 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.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",
+  "data-bubble"
+]);
+var interactiveProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-appearance",
+  "data-outlined",
+  "data-bubble",
+  "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",
+  bubble,
+  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,
+      "data-bubble": bubble,
+      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-7IUEBNCO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-7IUEBNCO.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/**\n * Base surface treatment, semantic status colors, or `brand-loud`: the solid\n * brand fill with its on-loud foreground (a transcript's own messages).\n */\nexport type ContentItemAppearance =\n  'transparent' | 'surface' | 'brand-loud' | SemanticTone;\n\n/**\n * A chat-bubble layout for transcripts: the item fits its content up to 80%\n * of the row and sits at the `start` (other participants) or `end` (the\n * person's own messages) of the line.\n */\nexport type ContentItemBubble = 'start' | 'end';\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  'data-bubble',\n]);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\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    'data-bubble'?: 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-bubble'?: 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  /**\n   * Lay the item out as a chat bubble: content width up to 80% of the row,\n   * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the\n   * person's own messages. Omit for an ordinary full-width item.\n   */\n  bubble?: ContentItemBubble;\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  bubble,\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      data-bubble={bubble}\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-QO55FN2Y.js → chunk-AN5IWMTM.js}

@@ -1,15 +1,19 @@
 import { jsx } from 'kerfjs/jsx-runtime';
 
-// src/list-inset-control.tsx
+// src/components/collections/list-inset-control/list-inset-control.tsx
 function ListInsetControl({
   children,
-  className = ""
+  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
     }
   );
@@ -17,4 +21,4 @@ function ListInsetControl({
 
 export { ListInsetControl };
 
-//# sourceMappingURL=chunk-QO55FN2Y.js.map
+//# 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-AV7CPAPT.js

@@ -0,0 +1,82 @@
+import { Text } from './chunk-LL45C7BB.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var COMPOSER_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-disabled",
+  "data-submit-on-enter"
+]);
+function rowCount(value, name) {
+  if (!Number.isInteger(value) || value < 1)
+    throw new RangeError(`Composer ${name} must be a positive integer.`);
+  return value;
+}
+function Composer({
+  label,
+  name,
+  id,
+  value = "",
+  placeholder,
+  minRows = 1,
+  maxRows = 8,
+  hint,
+  actions,
+  disabled = false,
+  submitOnEnter = false,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  const min = rowCount(minRows, "minRows");
+  const max = rowCount(maxRows, "maxRows");
+  if (max < min)
+    throw new RangeError("Composer maxRows must be at least minRows.");
+  const hintId = hint !== void 0 && id !== void 0 ? `${id}-hint` : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED),
+      class: `kui-composer ${className}`.trim(),
+      "data-component": "composer",
+      "data-disabled": disabled ? "true" : void 0,
+      "data-submit-on-enter": submitOnEnter ? "true" : void 0,
+      style: `--_kui-composer-min-rows:${min};--_kui-composer-max-rows:${max}`,
+      slot,
+      children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            class: "kui-composer__field",
+            id,
+            name,
+            rows: min,
+            "aria-label": label,
+            "aria-describedby": hintId || void 0,
+            "aria-keyshortcuts": submitOnEnter ? "Enter" : void 0,
+            placeholder,
+            disabled,
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "kui-composer__actions", children: [
+          /* @__PURE__ */ jsx("span", { class: "kui-composer__hint", children: hint === void 0 ? null : /* @__PURE__ */ jsx(
+            Text,
+            {
+              variant: "span",
+              tone: "quiet",
+              size: "compact",
+              id: hintId || void 0,
+              children: hint
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { class: "kui-composer__trailing", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+export { Composer };
+
+//# sourceMappingURL=chunk-AV7CPAPT.js.map

package/dist/chunk-AV7CPAPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/composer/composer.tsx"],"names":[],"mappings":"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","file":"chunk-AV7CPAPT.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Text } from '../../typography/text/text.js';\n\n/**\n * Application `data-*` identity on the Composer root, such as `data-key`;\n * the composer's own configuration attributes stay protected.\n */\nexport type ComposerRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface ComposerProps {\n  /** The message field's accessible name, in title style (\"Message\"). */\n  label: string;\n  /** Native textarea `name`: the form field the message submits under. */\n  name: string;\n  /**\n   * The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes\n   * the field's accessible description.\n   */\n  id?: string;\n  /** The field's text: a draft to restore, or `''` after sending. */\n  value?: string;\n  /** Sentence-style example of what to write (\"Ask about this build\"). */\n  placeholder?: string;\n  /**\n   * Visible lines while the field is empty or short (default 1). The field\n   * grows with its content from here.\n   */\n  minRows?: number;\n  /**\n   * Lines the field grows to before it scrolls (default 8). At least\n   * `minRows`.\n   */\n  maxRows?: number;\n  /** Quiet, sentence-style supporting copy at the start of the action row. */\n  hint?: string;\n  /** Trailing controls in the action row, normally one brand Send button. */\n  actions: KerfUiContent;\n  /** Disable the field; the app disables its own actions. */\n  disabled?: boolean;\n  /**\n   * Opt in to Enter-to-send: with `wireComposers` running over an ancestor,\n   * Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing\n   * action, Shift+Enter inserts a newline, and an Enter that commits an IME\n   * composition or meets an empty message does not send. The field announces\n   * the shortcut with `aria-keyshortcuts`.\n   */\n  submitOnEnter?: boolean;\n  /** Safe `data-*` identity on the root. */\n  rootAttributes?: ComposerRootAttributes;\n  className?: string;\n  /** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */\n  slot?: string;\n}\n\nconst COMPOSER_PROTECTED = new Set([\n  'data-component',\n  'data-disabled',\n  'data-submit-on-enter',\n]);\n\nfunction rowCount(value: number, name: string): number {\n  if (!Number.isInteger(value) || value < 1)\n    throw new RangeError(`Composer ${name} must be a positive integer.`);\n  return value;\n}\n\n/**\n * A chat or prompt composer: a raised frame whose border turns brand while\n * focus is within, holding a borderless message field that grows with its\n * content between `minRows` and `maxRows` lines, above an action row with an\n * optional hint and trailing actions. The app owns the value and sending;\n * `submitOnEnter` with `wireComposers` adds Enter-to-send.\n */\nexport function Composer({\n  label,\n  name,\n  id,\n  value = '',\n  placeholder,\n  minRows = 1,\n  maxRows = 8,\n  hint,\n  actions,\n  disabled = false,\n  submitOnEnter = false,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: ComposerProps) {\n  const min = rowCount(minRows, 'minRows');\n  const max = rowCount(maxRows, 'maxRows');\n  if (max < min)\n    throw new RangeError('Composer maxRows must be at least minRows.');\n  const hintId = hint !== undefined && id !== undefined ? `${id}-hint` : '';\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, COMPOSER_PROTECTED)}\n      class={`kui-composer ${className}`.trim()}\n      data-component=\"composer\"\n      data-disabled={disabled ? 'true' : undefined}\n      data-submit-on-enter={submitOnEnter ? 'true' : undefined}\n      style={`--_kui-composer-min-rows:${min};--_kui-composer-max-rows:${max}`}\n      slot={slot}\n    >\n      <textarea\n        class=\"kui-composer__field\"\n        id={id}\n        name={name}\n        rows={min}\n        aria-label={label}\n        aria-describedby={hintId || undefined}\n        aria-keyshortcuts={submitOnEnter ? 'Enter' : undefined}\n        placeholder={placeholder}\n        disabled={disabled}\n      >\n        {value}\n      </textarea>\n      <div class=\"kui-composer__actions\">\n        <span class=\"kui-composer__hint\">\n          {hint === undefined ? null : (\n            <Text\n              variant=\"span\"\n              tone=\"quiet\"\n              size=\"compact\"\n              id={hintId || undefined}\n            >\n              {hint}\n            </Text>\n          )}\n        </span>\n        <span class=\"kui-composer__trailing\">{actions}</span>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/{chunk-PX3YSS5C.js → chunk-B53PS2LE.js}

@@ -1,4 +1,4 @@
-import { LoadingSpinner } from './chunk-6WTETUZ6.js';
+import { LoadingSpinner } from './chunk-WVS6CUCT.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function EmptyState({
@@ -7,7 +7,8 @@ function EmptyState({
   icon,
   action,
   busy = false,
-  className = ""
+  className = "",
+  slot
 }) {
   return /* @__PURE__ */ jsxs(
     "section",
@@ -17,6 +18,7 @@ function EmptyState({
       "data-busy": String(busy),
       role: "status",
       "aria-busy": String(busy),
+      slot,
       children: [
         /* @__PURE__ */ jsx("div", { class: "kui-empty-state__icon", children: busy ? /* @__PURE__ */ jsx(LoadingSpinner, {}) : icon }),
         /* @__PURE__ */ jsx("strong", { children: title }),
@@ -29,4 +31,4 @@ function EmptyState({
 
 export { EmptyState };
 
-//# sourceMappingURL=chunk-PX3YSS5C.js.map
+//# sourceMappingURL=chunk-B53PS2LE.js.map

package/dist/chunk-B53PS2LE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/empty-state/empty-state.tsx"],"names":[],"mappings":";;;AAgBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,KAAA,EAAM,uBAAA,EACR,iCAAO,GAAA,CAAC,cAAA,EAAA,EAAe,IAAK,IAAA,EAC/B,CAAA;AAAA,wBACA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACd,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,QACxB,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC1D;AAEJ","file":"chunk-B53PS2LE.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LoadingSpinner } from '../loading-spinner/loading-spinner.js';\n\nexport interface EmptyStateProps {\n  title: string;\n  detail?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  busy?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function EmptyState({\n  title,\n  detail,\n  icon,\n  action,\n  busy = false,\n  className = '',\n  slot,\n}: EmptyStateProps) {\n  return (\n    <section\n      class={`kui-empty-state ${className}`.trim()}\n      data-component=\"empty-state\"\n      data-busy={String(busy)}\n      role=\"status\"\n      aria-busy={String(busy)}\n      slot={slot}\n    >\n      <div class=\"kui-empty-state__icon\">\n        {busy ? <LoadingSpinner /> : icon}\n      </div>\n      <strong>{title}</strong>\n      {detail && <span>{detail}</span>}\n      {action && <div class=\"kui-empty-state__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/chunk-CA7LNX3J.js

@@ -0,0 +1,44 @@
+import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var iconToggleProtected = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-action",
+  "data-shape"
+]);
+function IconToggleButton({
+  icon,
+  iconName,
+  label,
+  pressed,
+  action,
+  shape = "pill",
+  disabled = false,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...filterDataAttributes(rootAttributes, iconToggleProtected),
+      type: "button",
+      id,
+      class: `kui-icon-toggle-button ${className}`.trim(),
+      "data-component": "icon-toggle-button",
+      "data-action": action,
+      "data-shape": shape,
+      "aria-label": label,
+      "aria-pressed": pressed ? "true" : "false",
+      disabled,
+      slot,
+      children: /* @__PURE__ */ jsx("span", { class: "kui-icon-toggle-button__face", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon, name: iconName }) })
+    }
+  );
+}
+
+export { IconToggleButton };
+
+//# sourceMappingURL=chunk-CA7LNX3J.js.map