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

package/dist/chunk-HDXUHLTQ.js

@@ -0,0 +1,90 @@
+import { computePosition, flip, shift, size, autoUpdate } from '@floating-ui/dom';
+
+// src/shared/popup/position-popup.ts
+var POPUP_AVAILABLE_WIDTH = "--_kui-popup-available-width";
+var POPUP_VIEWPORT_PADDING = 10;
+function pointAnchor(x, y) {
+  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };
+}
+async function positionPopup(anchor, popup, {
+  placement,
+  gap = 0,
+  crossOffset = 0,
+  padding = POPUP_VIEWPORT_PADDING
+}) {
+  const boundary = popup.ownerDocument.documentElement;
+  popup.style.removeProperty("max-height");
+  popup.style.removeProperty(POPUP_AVAILABLE_WIDTH);
+  const {
+    x,
+    y,
+    placement: used
+  } = await computePosition(anchor, popup, {
+    strategy: "fixed",
+    placement,
+    middleware: [
+      {
+        name: "offset",
+        fn: ({ x: ox, y: oy, placement: current }) => {
+          const vertical = current.startsWith("top") || current.startsWith("bottom");
+          const sign = current.startsWith("top") || current.startsWith("left") ? -1 : 1;
+          const cross = current.endsWith("-end") ? -crossOffset : crossOffset;
+          return vertical ? { x: ox + cross, y: oy + sign * gap } : { x: ox + sign * gap, y: oy + cross };
+        }
+      },
+      // When neither side fits, best fit takes the side with more room and
+      // the size cap below scrolls the popup inside it.
+      flip({ fallbackStrategy: "bestFit", padding, boundary }),
+      // Shift only along the anchor's edge, never across the anchor: a
+      // popup shifted over its trigger would hide it, and a second press
+      // meant to close the popup would land on a row instead.
+      shift({ padding, boundary }),
+      size({
+        padding,
+        boundary,
+        apply({ availableHeight, availableWidth }) {
+          popup.style.maxHeight = `${Math.max(0, availableHeight)}px`;
+          popup.style.setProperty(
+            POPUP_AVAILABLE_WIDTH,
+            `${Math.max(0, availableWidth)}px`
+          );
+        }
+      })
+    ]
+  });
+  popup.style.left = `${x}px`;
+  popup.style.top = `${y}px`;
+  popup.setAttribute("data-placement", used);
+}
+function followAnchor(anchor, popup, place) {
+  return autoUpdate(anchor, popup, place);
+}
+var PHONE_SUBMENU_QUERY = "(max-width: 480px)";
+var PHONE_INSET = 8;
+var PHONE_GAP = 4;
+function phoneSubmenuPosition(parent, submenu, viewport, rtl) {
+  const width = Math.min(submenu.width, viewport.width - 2 * PHONE_INSET);
+  const height = submenu.height;
+  const below = Math.max(
+    0,
+    viewport.height - parent.bottom - PHONE_GAP - PHONE_INSET
+  );
+  const above = Math.max(0, parent.top - PHONE_GAP - PHONE_INSET);
+  const useBelow = height <= below || height > above && below >= above;
+  const availableHeight = useBelow ? below : above;
+  const left = rtl ? parent.right - width : parent.left;
+  return {
+    left: Math.max(
+      PHONE_INSET,
+      Math.min(left, viewport.width - PHONE_INSET - width)
+    ),
+    top: useBelow ? parent.bottom + PHONE_GAP : parent.top - PHONE_GAP - Math.min(height, availableHeight),
+    maxHeight: availableHeight,
+    maxWidth: viewport.width - 2 * PHONE_INSET,
+    placement: useBelow ? "bottom-start" : "top-start"
+  };
+}
+
+export { PHONE_SUBMENU_QUERY, followAnchor, phoneSubmenuPosition, pointAnchor, positionPopup };
+
+//# sourceMappingURL=chunk-HDXUHLTQ.js.map

package/dist/chunk-HDXUHLTQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/popup/position-popup.ts"],"names":[],"mappings":"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","file":"chunk-HDXUHLTQ.js","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  type Placement,\n  shift,\n  size,\n  type VirtualElement,\n} from '@floating-ui/dom';\n\n/**\n * Placement for Kerf-owned popups (a PopupMenu's menu and submenus, a\n * Select's listbox): a top-layer element positioned `fixed` against an\n * anchor, flipped to the other side when its preferred side is short (to\n * the side with more room when neither fits), shifted along the anchor's\n * edge to stay clear of the viewport edge, and capped to the block size its\n * side has room for, so a tall popup scrolls instead of covering its anchor.\n * No gap, best-fit flip, 10px shift and size padding.\n */\n\n/** Where a popup opens: below or above its anchor, at the start, center, or end. */\nexport type PopupPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\n/**\n * The custom property a placed popup's CSS reads to cap its width at the room\n * its side has; the popup also keeps any width limit of its own.\n */\nexport const POPUP_AVAILABLE_WIDTH = '--_kui-popup-available-width';\n\n/** A popup stays this far from the viewport edge when shifted or capped. */\nexport const POPUP_VIEWPORT_PADDING = 10;\n\n/** An element, or a viewport rectangle such as a context menu's pointer point. */\nexport type PopupAnchor = Element | VirtualElement;\n\n/** A zero-size anchor at a viewport point. */\nexport function pointAnchor(x: number, y: number): VirtualElement {\n  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };\n}\n\nexport interface PositionPopupOptions {\n  placement: Placement;\n  /** Main-axis distance from the anchor. */\n  gap?: number;\n  /** Cross-axis offset (a submenu lifts so its first row meets its item). */\n  crossOffset?: number;\n  /** Viewport padding the flip, shift, and height cap keep. */\n  padding?: number;\n}\n\n/**\n * Position `popup` against `anchor` once. Records the placement used as\n * `data-placement`, so the popup's motion grows from its anchor side.\n */\nexport async function positionPopup(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  {\n    placement,\n    gap = 0,\n    crossOffset = 0,\n    padding = POPUP_VIEWPORT_PADDING,\n  }: PositionPopupOptions,\n): Promise<void> {\n  // The popup is in the top layer, which no ancestor clips: only the\n  // viewport bounds it, not the scroll containers it is rendered inside.\n  const boundary = popup.ownerDocument.documentElement;\n  // Measure the natural size: a cap from an earlier, shorter side would\n  // otherwise steer the flip.\n  popup.style.removeProperty('max-height');\n  popup.style.removeProperty(POPUP_AVAILABLE_WIDTH);\n  const {\n    x,\n    y,\n    placement: used,\n  } = await computePosition(anchor, popup, {\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      {\n        name: 'offset',\n        fn: ({ x: ox, y: oy, placement: current }) => {\n          const vertical =\n            current.startsWith('top') || current.startsWith('bottom');\n          const sign =\n            current.startsWith('top') || current.startsWith('left') ? -1 : 1;\n          // An end alignment (after a flip) shifts the other way, so the\n          // popup's last row meets the anchor as its first row would.\n          const cross = current.endsWith('-end') ? -crossOffset : crossOffset;\n          return vertical\n            ? { x: ox + cross, y: oy + sign * gap }\n            : { x: ox + sign * gap, y: oy + cross };\n        },\n      },\n      // When neither side fits, best fit takes the side with more room and\n      // the size cap below scrolls the popup inside it.\n      flip({ fallbackStrategy: 'bestFit', padding, boundary }),\n      // Shift only along the anchor's edge, never across the anchor: a\n      // popup shifted over its trigger would hide it, and a second press\n      // meant to close the popup would land on a row instead.\n      shift({ padding, boundary }),\n      size({\n        padding,\n        boundary,\n        apply({ availableHeight, availableWidth }) {\n          popup.style.maxHeight = `${Math.max(0, availableHeight)}px`;\n          // The popup's own CSS caps its width by this and its own limit.\n          popup.style.setProperty(\n            POPUP_AVAILABLE_WIDTH,\n            `${Math.max(0, availableWidth)}px`,\n          );\n        },\n      }),\n    ],\n  });\n  popup.style.left = `${x}px`;\n  popup.style.top = `${y}px`;\n  popup.setAttribute('data-placement', used);\n}\n\n/**\n * Keep a shown popup positioned while its anchor or any scroll ancestor\n * moves, the viewport resizes, or either element changes size. Returns the\n * function that stops following.\n */\nexport function followAnchor(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  place: () => void,\n): () => void {\n  return autoUpdate(anchor, popup, place);\n}\n\n/** Phone-width viewports place a submenu above or below its parent menu. */\nexport const PHONE_SUBMENU_QUERY = '(max-width: 480px)';\n\nconst PHONE_INSET = 8;\nconst PHONE_GAP = 4;\n\nexport interface Box {\n  readonly left: number;\n  readonly top: number;\n  readonly right: number;\n  readonly bottom: number;\n}\n\n/**\n * Place a phone-width submenu beside its parent menu in the block axis, so\n * its rows never cover the parent's: below the parent menu when it fits (or\n * when below has more room), otherwise above.\n */\nexport function phoneSubmenuPosition(\n  parent: Box,\n  submenu: { width: number; height: number },\n  viewport: { width: number; height: number },\n  rtl: boolean,\n) {\n  const width = Math.min(submenu.width, viewport.width - 2 * PHONE_INSET);\n  const height = submenu.height;\n  const below = Math.max(\n    0,\n    viewport.height - parent.bottom - PHONE_GAP - PHONE_INSET,\n  );\n  const above = Math.max(0, parent.top - PHONE_GAP - PHONE_INSET);\n  const useBelow = height <= below || (height > above && below >= above);\n  const availableHeight = useBelow ? below : above;\n  const left = rtl ? parent.right - width : parent.left;\n  return {\n    left: Math.max(\n      PHONE_INSET,\n      Math.min(left, viewport.width - PHONE_INSET - width),\n    ),\n    top: useBelow\n      ? parent.bottom + PHONE_GAP\n      : parent.top - PHONE_GAP - Math.min(height, availableHeight),\n    maxHeight: availableHeight,\n    maxWidth: viewport.width - 2 * PHONE_INSET,\n    placement: useBelow ? ('bottom-start' as const) : ('top-start' as const),\n  };\n}\n"]}

package/dist/chunk-HJXVVFBT.js

@@ -0,0 +1,108 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { jsxs, Fragment, 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 = jsx(Fragment, {
+    children: icon.map(([tag, attrs]) => {
+      for (const value of Object.values(attrs))
+        if (typeof value !== "string" && typeof value !== "number")
+          cacheable = false;
+      return jsx(tag, attrs);
+    })
+  });
+  if (cacheable) childMarkup.set(icon, markup);
+  return markup;
+}
+var iconMarkup = /* @__PURE__ */ new WeakMap();
+var LUCIDE_ICON_VARIANT_LIMIT = 64;
+function variantKey(parts) {
+  return parts.map((part) => part === void 0 ? "
" : String(part)).join("\0");
+}
+function LucideIcon({
+  icon,
+  name,
+  appearance = "outline",
+  className,
+  color,
+  inline = false,
+  label,
+  title,
+  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 key = variantKey([
+    name,
+    appearance,
+    className,
+    color,
+    inline,
+    label,
+    title,
+    size,
+    slot
+  ]);
+  const variants = iconMarkup.get(icon);
+  const cached = variants?.get(key);
+  if (cached) return cached;
+  const pixels = typeof size === "number" ? size : size && lucideIconSizePixels[size];
+  const slotAttribute = { slot };
+  const markup = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...slotAttribute,
+      class: className,
+      "data-lucide": name,
+      "data-inline": inline ? "true" : void 0,
+      "data-size": size === void 0 ? void 0 : String(size),
+      role: label || title ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label || title ? 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: [
+        title ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("title", { children: title }),
+          /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "transparent", stroke: "none" })
+        ] }) : null,
+        renderChildren(icon)
+      ]
+    }
+  );
+  if (childMarkup.has(icon)) {
+    const known = variants ?? /* @__PURE__ */ new Map();
+    if (!variants) iconMarkup.set(icon, known);
+    if (known.size >= LUCIDE_ICON_VARIANT_LIMIT)
+      known.delete(known.keys().next().value);
+    known.set(key, markup);
+  }
+  return markup;
+}
+
+export { LucideIcon };
+
+//# sourceMappingURL=chunk-HJXVVFBT.js.map

package/dist/chunk-HJXVVFBT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media/lucide-icon/lucide-icon.tsx"],"names":["Fragment","jsx"],"mappings":"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","file":"chunk-HJXVVFBT.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Fragment, 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  /** The icon's accessible name; without it the icon is decorative. */\n  label?: string;\n  /**\n   * Hover text, as an SVG `<title>`: a status icon's explanation (\"Session\n   * halted\"). With `label`, the label stays the accessible name; alone, the\n   * title also names the icon. The whole icon box shows it, not just its\n   * strokes.\n   */\n  title?: 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 = jsx(Fragment, {\n    children: icon.map(([tag, attrs]) => {\n      for (const value of Object.values(attrs))\n        if (typeof value !== 'string' && typeof value !== 'number')\n          cacheable = false;\n      return jsx(tag, attrs);\n    }),\n  });\n  if (cacheable) childMarkup.set(icon, markup);\n  return markup;\n}\n\n/**\n * Each icon node's rendered icons, by their props. Rows that re-render the\n * same glyph with the same props get the identical `SafeHtml` back instead of\n * rebuilding the `<svg>` wrapper, and consumers that hash or compare icon\n * markup (PopupMenu's content key) see one string object. Bounded per node,\n * because a per-row `label` would otherwise grow it with the list; past the\n * bound the oldest variant is evicted. Only nodes whose child markup is\n * cacheable are cached.\n */\nconst iconMarkup = new WeakMap<LucideNode, Map<string, SafeHtml>>();\n\n/** Most rendered variants remembered per icon node. */\nconst LUCIDE_ICON_VARIANT_LIMIT = 64;\n\nfunction variantKey(parts: readonly (string | number | boolean | undefined)[]) {\n  // U+0001 marks an omitted prop so it never equals an empty string.\n  return parts\n    .map((part) => (part === undefined ? '\\u0001' : String(part)))\n    .join('\\u0000');\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  title,\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 key = variantKey([\n    name,\n    appearance,\n    className,\n    color,\n    inline,\n    label,\n    title,\n    size,\n    slot,\n  ]);\n  const variants = iconMarkup.get(icon);\n  const cached = variants?.get(key);\n  if (cached) return cached;\n  const pixels =\n    typeof size === 'number' ? size : size && lucideIconSizePixels[size];\n  const slotAttribute = { slot };\n  const markup = (\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 || title ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label || title ? 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      {title ? (\n        <>\n          <title>{title}</title>\n          {/* A transparent box, so hovering between strokes shows the title. */}\n          <rect width=\"24\" height=\"24\" fill=\"transparent\" stroke=\"none\" />\n        </>\n      ) : null}\n      {renderChildren(icon)}\n    </svg>\n  );\n  if (childMarkup.has(icon)) {\n    const known = variants ?? new Map<string, SafeHtml>();\n    if (!variants) iconMarkup.set(icon, known);\n    if (known.size >= LUCIDE_ICON_VARIANT_LIMIT)\n      known.delete(known.keys().next().value!);\n    known.set(key, markup);\n  }\n  return markup;\n}\n"]}

package/dist/chunk-HQZG3OFL.js

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

package/dist/chunk-HQZG3OFL.js.map

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

package/dist/chunk-HTERKONR.js

@@ -0,0 +1,49 @@
+// src/components/forms/message-composer/wiring/wire-message-composers.ts
+var COMPOSER = '[data-component="message-composer"]';
+var ACTION = "wa-button, button, [data-action]";
+var IME_KEY_CODE = 229;
+function composerFieldOf(target) {
+  if (!(target instanceof HTMLTextAreaElement) || !target.classList.contains("kui-message-composer__field"))
+    return null;
+  const composer = target.closest(COMPOSER);
+  return composer?.dataset.submitOnEnter === "true" ? target : null;
+}
+function isUnavailable(action) {
+  return action.hasAttribute("disabled") || action.hasAttribute("loading") || action.getAttribute("aria-busy") === "true" || action.getAttribute("aria-disabled") === "true" || action.disabled === true;
+}
+function wireMessageComposers(root) {
+  const composing = /* @__PURE__ */ new WeakSet();
+  const onCompositionStart = (event) => {
+    const field = composerFieldOf(event.target);
+    if (field) composing.add(field);
+  };
+  const onCompositionEnd = (event) => {
+    const field = composerFieldOf(event.target);
+    if (field) composing.delete(field);
+  };
+  const onKeyDown = (event) => {
+    const key = event;
+    if (key.key !== "Enter" || key.shiftKey || key.altKey) return;
+    const field = composerFieldOf(key.target);
+    if (!field || field.disabled) return;
+    if (key.isComposing || key.keyCode === IME_KEY_CODE || composing.has(field))
+      return;
+    key.preventDefault();
+    if (key.repeat || field.value.trim() === "") return;
+    const action = field.closest(COMPOSER).querySelector(":scope > .kui-toolbar > .kui-toolbar__trailing")?.querySelector(ACTION);
+    if (!action || isUnavailable(action)) return;
+    action.click();
+  };
+  root.addEventListener("compositionstart", onCompositionStart);
+  root.addEventListener("compositionend", onCompositionEnd);
+  root.addEventListener("keydown", onKeyDown);
+  return () => {
+    root.removeEventListener("compositionstart", onCompositionStart);
+    root.removeEventListener("compositionend", onCompositionEnd);
+    root.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+export { wireMessageComposers };
+
+//# sourceMappingURL=chunk-HTERKONR.js.map

package/dist/chunk-HTERKONR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/message-composer/wiring/wire-message-composers.ts"],"names":[],"mappings":";AAEA,IAAM,QAAA,GAAW,qCAAA;AACjB,IAAM,MAAA,GAAS,kCAAA;AAGf,IAAM,YAAA,GAAe,GAAA;AAErB,SAAS,gBACP,MAAA,EAC4B;AAC5B,EAAA,IACE,EAAE,MAAA,YAAkB,mBAAA,CAAA,IACpB,CAAC,MAAA,CAAO,SAAA,CAAU,SAAS,6BAA6B,CAAA;AAExD,IAAA,OAAO,IAAA;AACT,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,OAAA,CAAqB,QAAQ,CAAA;AACrD,EAAA,OAAO,QAAA,EAAU,OAAA,CAAQ,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAS,IAAA;AAC/D;AAEA,SAAS,cAAc,MAAA,EAA0B;AAC/C,EAAA,OACE,OAAO,YAAA,CAAa,UAAU,KAC9B,MAAA,CAAO,YAAA,CAAa,SAAS,CAAA,IAC7B,MAAA,CAAO,aAAa,WAAW,CAAA,KAAM,UACrC,MAAA,CAAO,YAAA,CAAa,eAAe,CAAA,KAAM,MAAA,IACxC,OAA4C,QAAA,KAAa,IAAA;AAE9D;AAeO,SAAS,qBAAqB,IAAA,EAAwB;AAC3D,EAAA,MAAM,SAAA,uBAAgB,OAAA,EAA6B;AACnD,EAAA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAiB;AAC3C,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,KAAA,CAAM,MAAM,CAAA;AAC1C,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,GAAA,CAAI,KAAK,CAAA;AAAA,EAChC,CAAA;AACA,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAiB;AACzC,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,KAAA,CAAM,MAAM,CAAA;AAC1C,IAAA,IAAI,KAAA,EAAO,SAAA,CAAU,MAAA,CAAO,KAAK,CAAA;AAAA,EACnC,CAAA;AACA,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAiB;AAClC,IAAA,MAAM,GAAA,GAAM,KAAA;AACZ,IAAA,IAAI,IAAI,GAAA,KAAQ,OAAA,IAAW,GAAA,CAAI,QAAA,IAAY,IAAI,MAAA,EAAQ;AACvD,IAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,GAAA,CAAI,MAAM,CAAA;AACxC,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,QAAA,EAAU;AAC9B,IAAA,IAAI,IAAI,WAAA,IAAe,GAAA,CAAI,YAAY,YAAA,IAAgB,SAAA,CAAU,IAAI,KAAK,CAAA;AACxE,MAAA;AACF,IAAA,GAAA,CAAI,cAAA,EAAe;AACnB,IAAA,IAAI,IAAI,MAAA,IAAU,KAAA,CAAM,KAAA,CAAM,IAAA,OAAW,EAAA,EAAI;AAE7C,IAAA,MAAM,MAAA,GAAS,MACZ,OAAA,CAAQ,QAAQ,EAChB,aAAA,CAAc,gDAAgD,CAAA,EAC7D,aAAA,CAA2B,MAAM,CAAA;AACrC,IAAA,IAAI,CAAC,MAAA,IAAU,aAAA,CAAc,MAAM,CAAA,EAAG;AACtC,IAAA,MAAA,CAAO,KAAA,EAAM;AAAA,EACf,CAAA;AACA,EAAA,IAAA,CAAK,gBAAA,CAAiB,oBAAoB,kBAAkB,CAAA;AAC5D,EAAA,IAAA,CAAK,gBAAA,CAAiB,kBAAkB,gBAAgB,CAAA;AACxD,EAAA,IAAA,CAAK,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC1C,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,CAAK,mBAAA,CAAoB,oBAAoB,kBAAkB,CAAA;AAC/D,IAAA,IAAA,CAAK,mBAAA,CAAoB,kBAAkB,gBAAgB,CAAA;AAC3D,IAAA,IAAA,CAAK,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,EAC/C,CAAA;AACF","file":"chunk-HTERKONR.js","sourcesContent":["type Root = HTMLElement | Document;\n\nconst COMPOSER = '[data-component=\"message-composer\"]';\nconst ACTION = 'wa-button, button, [data-action]';\n\n/** IME keydowns report keyCode 229 (WebKit sends it after compositionend). */\nconst IME_KEY_CODE = 229;\n\nfunction composerFieldOf(\n  target: EventTarget | null,\n): HTMLTextAreaElement | null {\n  if (\n    !(target instanceof HTMLTextAreaElement) ||\n    !target.classList.contains('kui-message-composer__field')\n  )\n    return null;\n  const composer = target.closest<HTMLElement>(COMPOSER);\n  return composer?.dataset.submitOnEnter === 'true' ? target : null;\n}\n\nfunction isUnavailable(action: Element): boolean {\n  return (\n    action.hasAttribute('disabled') ||\n    action.hasAttribute('loading') ||\n    action.getAttribute('aria-busy') === 'true' ||\n    action.getAttribute('aria-disabled') === 'true' ||\n    (action as Element & { disabled?: unknown }).disabled === true\n  );\n}\n\n/**\n * Enter-to-send for every `MessageComposer` rendered with `submitOnEnter` below\n * root. In its field, Enter (alone or with Cmd or Ctrl) activates the\n * composer's first trailing action, so a keyboard send runs the same\n * delegated handler as a click. Shift+Enter and Alt+Enter insert a newline.\n * Nothing is sent, and no newline is inserted, when the message is empty or\n * whitespace-only, the key is auto-repeating, or the first action is\n * disabled, loading (a busy `Button` reports `aria-busy`), or\n * `aria-disabled`. An Enter that commits an IME\n * composition (`isComposing`, keyCode 229, or between `compositionstart` and\n * `compositionend`) is left to the input method. Dispose with the owning\n * application.\n */\nexport function wireMessageComposers(root: Root): () => void {\n  const composing = new WeakSet<HTMLTextAreaElement>();\n  const onCompositionStart = (event: Event) => {\n    const field = composerFieldOf(event.target);\n    if (field) composing.add(field);\n  };\n  const onCompositionEnd = (event: Event) => {\n    const field = composerFieldOf(event.target);\n    if (field) composing.delete(field);\n  };\n  const onKeyDown = (event: Event) => {\n    const key = event as KeyboardEvent;\n    if (key.key !== 'Enter' || key.shiftKey || key.altKey) return;\n    const field = composerFieldOf(key.target);\n    if (!field || field.disabled) return;\n    if (key.isComposing || key.keyCode === IME_KEY_CODE || composing.has(field))\n      return;\n    key.preventDefault();\n    if (key.repeat || field.value.trim() === '') return;\n    // composerFieldOf found the field inside a composer.\n    const action = field\n      .closest(COMPOSER)!\n      .querySelector(':scope > .kui-toolbar > .kui-toolbar__trailing')\n      ?.querySelector<HTMLElement>(ACTION);\n    if (!action || isUnavailable(action)) return;\n    action.click();\n  };\n  root.addEventListener('compositionstart', onCompositionStart);\n  root.addEventListener('compositionend', onCompositionEnd);\n  root.addEventListener('keydown', onKeyDown);\n  return () => {\n    root.removeEventListener('compositionstart', onCompositionStart);\n    root.removeEventListener('compositionend', onCompositionEnd);\n    root.removeEventListener('keydown', onKeyDown);\n  };\n}\n"]}

package/dist/chunk-HU5IHXCI.js

@@ -0,0 +1,73 @@
+import { Checkbox } from './chunk-C26Q6P4Q.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var CHECKBOX_GROUP_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-orientation",
+  "data-invalid"
+]);
+function CheckboxGroup({
+  label,
+  ariaLabel,
+  labelledBy,
+  name,
+  choices,
+  value = [],
+  hint,
+  error,
+  size = "default",
+  orientation = "vertical",
+  disabled = false,
+  action,
+  form,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const description = [hint, error].filter(Boolean).join(" ") || void 0;
+  const checked = new Set(value);
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...filterDataAttributes(rootAttributes, CHECKBOX_GROUP_PROTECTED),
+      class: `kui-checkbox-group ${className}`.trim(),
+      "data-component": "checkbox-group",
+      "data-size": size,
+      "data-orientation": orientation,
+      "data-invalid": error ? "" : void 0,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "aria-description": description,
+      "aria-invalid": error ? "true" : void 0,
+      disabled,
+      slot,
+      children: [
+        label === void 0 ? null : /* @__PURE__ */ jsx("legend", { class: "kui-checkbox-group__label", children: label }),
+        /* @__PURE__ */ jsx("div", { class: "kui-checkbox-group__choices", children: choices.map((choice) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: choice.label,
+            name,
+            value: choice.value,
+            checked: checked.has(choice.value),
+            hint: choice.hint,
+            size,
+            disabled: choice.disabled,
+            action,
+            form
+          }
+        )) }),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-checkbox-group__hint", "aria-hidden": "true", children: hint }),
+        error === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-checkbox-group__error", "aria-hidden": "true", children: error })
+      ]
+    }
+  );
+}
+
+export { CheckboxGroup };
+
+//# sourceMappingURL=chunk-HU5IHXCI.js.map

package/dist/chunk-HU5IHXCI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":";;;;AASA,IAAM,wBAAA,uBAA+B,GAAA,CAAI;AAAA,EACvC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA8DM,SAAS,aAAA,CAAoC;AAAA,EAClD,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAQ,EAAC;AAAA,EACT,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,UAAA;AAAA,EACd,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAA8B;AAC5B,EAAA,MAAM,WAAA,GAAc,CAAC,IAAA,EAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAC/D,EAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAY,KAAK,CAAA;AACrC,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,wBAAwB,CAAA;AAAA,MACjE,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,WAAA;AAAA,MAClB,cAAA,EAAc,QAAQ,EAAA,GAAK,MAAA;AAAA,MAC3B,EAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,kBAAA,EAAkB,WAAA;AAAA,MAClB,cAAA,EAAc,QAAQ,MAAA,GAAS,MAAA;AAAA,MAC/B,QAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,KAAU,SAAY,IAAA,mBACrB,GAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,6BAA6B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,4BAElD,KAAA,EAAA,EAAI,KAAA,EAAM,+BACR,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,IAAA;AAAA,YACA,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,OAAA,EAAS,OAAA,CAAQ,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA;AAAA,YACjC,MAAM,MAAA,CAAO,IAAA;AAAA,YACb,IAAA;AAAA,YACA,UAAU,MAAA,CAAO,QAAA;AAAA,YACjB,MAAA;AAAA,YACA;AAAA;AAAA,SAEH,CAAA,EACH,CAAA;AAAA,QACC,IAAA,KAAS,SAAY,IAAA,mBACpB,GAAA,CAAC,UAAK,KAAA,EAAM,0BAAA,EAA2B,aAAA,EAAY,MAAA,EAChD,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAED,KAAA,KAAU,SAAY,IAAA,mBACrB,GAAA,CAAC,UAAK,KAAA,EAAM,2BAAA,EAA4B,aAAA,EAAY,MAAA,EACjD,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-HU5IHXCI.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Checkbox } from '../checkbox/checkbox.js';\n\n/** `default` is a 20px box beside 16px text; `compact` 18px and 14px. */\nexport type CheckboxGroupSize = 'default' | 'compact';\n\n/** `vertical` stacks the choices; `horizontal` lines them up and wraps. */\nexport type CheckboxGroupOrientation = 'vertical' | 'horizontal';\n\nconst CHECKBOX_GROUP_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-orientation',\n  'data-invalid',\n]);\n\n/** Application `data-*` metadata; the CheckboxGroup's own markers stay protected. */\nexport type CheckboxGroupRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nexport interface CheckboxGroupChoice<Value extends string = string> {\n  value: Value;\n  /** Visible label; it is also the checkbox's accessible name. */\n  label: string;\n  /** Supporting text under this choice's label, also its description. */\n  hint?: string;\n  disabled?: boolean;\n}\n\n/**\n * A group is named by a visible `label` (its legend), by `ariaLabel`, or by\n * `labelledBy`, the id of a visible heading elsewhere that names it.\n */\nexport type CheckboxGroupName =\n  | { label: string; ariaLabel?: never; labelledBy?: never }\n  | { label?: never; ariaLabel: string; labelledBy?: never }\n  | { label?: never; ariaLabel?: never; labelledBy: string };\n\nexport interface CheckboxGroupOptions<Value extends string = string> {\n  /** Native input `name`: the form field every checked value submits under. */\n  name: string;\n  choices: readonly CheckboxGroupChoice<Value>[];\n  /** The checked values. Omit for none. */\n  value?: readonly NoInfer<Value>[];\n  /** Supporting text below the choices, also the group's description. */\n  hint?: string;\n  /** A validation message: shown in the danger color and marking it invalid. */\n  error?: string;\n  size?: CheckboxGroupSize;\n  orientation?: CheckboxGroupOrientation;\n  /** Disable the whole group. */\n  disabled?: boolean;\n  /** Delegated `data-action` on every checkbox; listen for `change`. */\n  action?: string;\n  /** Associate the checkboxes with a form outside their ancestor chain. */\n  form?: string;\n  /** The fieldset's id. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: CheckboxGroupRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type CheckboxGroupProps<Value extends string = string> =\n  CheckboxGroupName & CheckboxGroupOptions<Value>;\n\n/**\n * Any number of related options among a few visible choices: a native\n * fieldset of `Checkbox`es with the group label above and hint and error text\n * below, laid out like a `RadioGroup` so stacked checkboxes and radios share\n * one control column and one 28px pitch. Every checked value submits under\n * `name`.\n */\nexport function CheckboxGroup<Value extends string>({\n  label,\n  ariaLabel,\n  labelledBy,\n  name,\n  choices,\n  value = [],\n  hint,\n  error,\n  size = 'default',\n  orientation = 'vertical',\n  disabled = false,\n  action,\n  form,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: CheckboxGroupProps<Value>) {\n  const description = [hint, error].filter(Boolean).join(' ') || undefined;\n  const checked = new Set<string>(value);\n  return (\n    <fieldset\n      {...filterDataAttributes(rootAttributes, CHECKBOX_GROUP_PROTECTED)}\n      class={`kui-checkbox-group ${className}`.trim()}\n      data-component=\"checkbox-group\"\n      data-size={size}\n      data-orientation={orientation}\n      data-invalid={error ? '' : undefined}\n      id={id}\n      aria-label={ariaLabel}\n      aria-labelledby={labelledBy}\n      aria-description={description}\n      aria-invalid={error ? 'true' : undefined}\n      disabled={disabled}\n      slot={slot}\n    >\n      {label === undefined ? null : (\n        <legend class=\"kui-checkbox-group__label\">{label}</legend>\n      )}\n      <div class=\"kui-checkbox-group__choices\">\n        {choices.map((choice) => (\n          <Checkbox\n            label={choice.label}\n            name={name}\n            value={choice.value}\n            checked={checked.has(choice.value)}\n            hint={choice.hint}\n            size={size}\n            disabled={choice.disabled}\n            action={action}\n            form={form}\n          />\n        ))}\n      </div>\n      {hint === undefined ? null : (\n        <span class=\"kui-checkbox-group__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      )}\n      {error === undefined ? null : (\n        <span class=\"kui-checkbox-group__error\" aria-hidden=\"true\">\n          {error}\n        </span>\n      )}\n    </fieldset>\n  );\n}\n"]}