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

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-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"]}

package/dist/chunk-IIQ2XIMU.js

@@ -0,0 +1,197 @@
+import { ToolbarText } from './chunk-EKHDLBRP.js';
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
+import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
+import { Toolbar } from './chunk-ZN7KUMPY.js';
+import { Pane } from './chunk-XRZSK2WC.js';
+import { scrollEdgeAttributes } from './chunk-IRC5N7FA.js';
+import { List } from './chunk-NB6POCFH.js';
+import { surfaceTintAttributes, joinStyles } from './chunk-ITENVZ6Q.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { ChevronLeft } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+var DEFAULT_SAFE_AREA_EDGES = [
+  "block-start",
+  "inline-start",
+  "inline-end"
+];
+var DEFAULT_BOTTOM_SAFE_AREA_EDGES = [
+  "block-end",
+  "inline-start",
+  "inline-end"
+];
+function chromeList(content, config) {
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      dividerSides: config?.dividerSides,
+      gap: config?.gap,
+      hAlign: config?.hAlign,
+      vAlign: config?.vAlign,
+      textInsets: config?.textInsets,
+      controlInsets: config?.controlInsets,
+      children: content
+    }
+  );
+}
+function NavStack({
+  id,
+  label,
+  views,
+  backLabel = "Back",
+  backIcon,
+  backText,
+  toolbarConfig = {},
+  panelToggle,
+  hideToolbar = false,
+  bottomToolbar,
+  separator = "auto",
+  chromeDividers = "scroll",
+  chromePresentation = "docked",
+  bottomToolbarPresentation = "docked",
+  scrollEdge = "none",
+  scrollEdgeDistance,
+  background,
+  tint,
+  className = "",
+  slot
+}) {
+  const tinted = surfaceTintAttributes(tint);
+  const topIndex = views.length - 1;
+  const top = views[topIndex];
+  const topToolbar = top?.toolbar;
+  const bottom = top?.bottomToolbar ?? bottomToolbar;
+  const canPop = views.length > 1;
+  const topDensity = topToolbar?.density ?? toolbarConfig.density;
+  const centerTitle = canPop && topToolbar?.center === void 0;
+  const title = /* @__PURE__ */ jsx(
+    ToolbarText,
+    {
+      text: topToolbar?.title ?? "",
+      size: topToolbar?.titleSize ?? toolbarConfig.titleSize ?? (canPop ? "large" : "xlarge"),
+      headingLevel: topToolbar?.headingLevel ?? toolbarConfig.headingLevel,
+      fill: !centerTitle
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      class: `kui-nav-stack ${tinted.className} ${className}`.replace(/\s+/g, " ").trim(),
+      id,
+      "data-component": "nav-stack",
+      "data-nav-stack-id": id,
+      "data-depth": String(views.length),
+      "data-separator": separator,
+      "data-chrome-dividers": chromeDividers === "always" || chromeDividers === "none" ? chromeDividers : void 0,
+      "data-chrome-presentation": chromePresentation !== "docked" && !hideToolbar ? "overlay" : void 0,
+      "data-chrome-material": chromePresentation === "clear" && !hideToolbar ? "clear" : void 0,
+      "data-bottom-toolbar-presentation": bottomToolbarPresentation !== "docked" ? "overlay" : void 0,
+      "data-bottom-toolbar-material": bottomToolbarPresentation === "clear" ? "clear" : void 0,
+      ...scrollEdgeAttributes(
+        scrollEdge,
+        scrollEdgeDistance,
+        chromePresentation === "clear" && !hideToolbar || bottomToolbarPresentation === "clear"
+      ),
+      "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-nav-stack-background:${background}`,
+        tinted.style
+      ),
+      "aria-label": label,
+      slot,
+      children: [
+        !hideToolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            label: topToolbar?.label ?? toolbarConfig.label,
+            density: topDensity,
+            dividerSides: topToolbar?.dividerSides ?? toolbarConfig.dividerSides,
+            centerAlign: centerTitle ? "balanced" : topToolbar?.centerAlign ?? toolbarConfig.centerAlign,
+            responsive: topToolbar?.responsive ?? toolbarConfig.responsive,
+            responsiveAt: topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt,
+            safeAreaEdges: topToolbar?.safeAreaEdges ?? toolbarConfig.safeAreaEdges ?? DEFAULT_SAFE_AREA_EDGES,
+            leading: /* @__PURE__ */ jsxs(Fragment, { children: [
+              canPop && /* @__PURE__ */ jsx(
+                ToolbarControlGroup,
+                {
+                  content: backText ? "mixed" : "icon",
+                  size: topDensity === "compact" ? "compact" : "default",
+                  material: chromePresentation === "clear" ? "glass" : void 0,
+                  single: true,
+                  children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      class: "kui-nav-stack__back",
+                      "data-nav-back": true,
+                      "aria-label": backText ? void 0 : backLabel,
+                      children: [
+                        backIcon ?? /* @__PURE__ */ jsx(
+                          LucideIcon,
+                          {
+                            icon: ChevronLeft,
+                            name: "chevron-left",
+                            className: "kui-nav-stack__back-icon"
+                          }
+                        ),
+                        backText ? /* @__PURE__ */ jsx("span", { children: backText }) : null
+                      ]
+                    }
+                  )
+                }
+              ),
+              topToolbar?.leading,
+              centerTitle ? null : title
+            ] }),
+            center: centerTitle ? title : topToolbar?.center,
+            trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+              topToolbar?.trailing,
+              panelToggle
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
+          "article",
+          {
+            class: "kui-nav-stack__view",
+            "data-key": view.key,
+            "data-nav-key": view.key,
+            "data-nav-active": String(index === topIndex),
+            "aria-hidden": String(index !== topIndex),
+            children: view.pane || view.header !== void 0 || view.footer !== void 0 ? /* @__PURE__ */ jsx(
+              Pane,
+              {
+                ...paneConfigProps(view.pane),
+                header: view.header === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-header": true, children: chromeList(view.header, view.headerList) }),
+                footer: view.footer === void 0 ? void 0 : /* @__PURE__ */ jsx("div", { "data-nav-stack-footer": true, children: chromeList(view.footer, view.footerList) }),
+                children: view.content
+              }
+            ) : view.content
+          }
+        )) }),
+        bottom && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            position: "footer",
+            label: bottom.label,
+            density: bottom.density,
+            dividerSides: bottom.dividerSides,
+            centerAlign: bottom.centerAlign,
+            responsive: bottom.responsive,
+            responsiveAt: bottom.responsiveAt,
+            safeAreaEdges: bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES,
+            leading: bottom.leading,
+            center: bottom.center,
+            trailing: bottom.trailing
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { NavStack };
+
+//# sourceMappingURL=chunk-IIQ2XIMU.js.map