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

package/dist/chunk-MXNIVEVL.js

@@ -0,0 +1,48 @@
+// src/shared/layout/flex-alignment.ts
+function horizontalAlignment(value) {
+  switch (value) {
+    case "left":
+    case "l":
+    case "flex-start":
+      return "left";
+    case "center":
+    case "c":
+    case "space-around":
+      return "center";
+    case "right":
+    case "r":
+    case "flex-end":
+      return "right";
+    case "full":
+    case "f":
+    case "space-between":
+      return "full";
+  }
+}
+function verticalAlignment(value) {
+  switch (value) {
+    case "top":
+    case "t":
+    case "flex-start":
+      return "top";
+    case "middle":
+    case "m":
+    case "c":
+    case "space-around":
+      return "middle";
+    case "bottom":
+    case "b":
+    case "flex-end":
+      return "bottom";
+    case "full":
+    case "f":
+    case "space-between":
+      return "full";
+    case "baseline":
+      return "baseline";
+  }
+}
+
+export { horizontalAlignment, verticalAlignment };
+
+//# sourceMappingURL=chunk-MXNIVEVL.js.map

package/dist/chunk-MXNIVEVL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/layout/flex-alignment.ts"],"names":[],"mappings":";AAoCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,UAAA;AAAA;AAEb","file":"chunk-MXNIVEVL.js","sourcesContent":["export type HorizontalAlignment =\n  | 'left'\n  | 'l'\n  | 'flex-start'\n  | 'center'\n  | 'c'\n  | 'space-around'\n  | 'right'\n  | 'r'\n  | 'flex-end'\n  | 'full'\n  | 'f'\n  | 'space-between';\n\nexport type VerticalAlignment =\n  | 'top'\n  | 't'\n  | 'flex-start'\n  | 'middle'\n  | 'm'\n  | 'c'\n  | 'space-around'\n  | 'bottom'\n  | 'b'\n  | 'flex-end'\n  | 'full'\n  | 'f'\n  | 'space-between'\n  | 'baseline';\n\nexport type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment =\n  'top' | 'middle' | 'bottom' | 'full' | 'baseline';\n\nexport function horizontalAlignment(\n  value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n  switch (value) {\n    case 'left':\n    case 'l':\n    case 'flex-start':\n      return 'left';\n    case 'center':\n    case 'c':\n    case 'space-around':\n      return 'center';\n    case 'right':\n    case 'r':\n    case 'flex-end':\n      return 'right';\n    case 'full':\n    case 'f':\n    case 'space-between':\n      return 'full';\n  }\n}\n\nexport function verticalAlignment(\n  value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n  switch (value) {\n    case 'top':\n    case 't':\n    case 'flex-start':\n      return 'top';\n    case 'middle':\n    case 'm':\n    case 'c':\n    case 'space-around':\n      return 'middle';\n    case 'bottom':\n    case 'b':\n    case 'flex-end':\n      return 'bottom';\n    case 'full':\n    case 'f':\n    case 'space-between':\n      return 'full';\n    case 'baseline':\n      return 'baseline';\n  }\n}\n"]}

package/dist/chunk-NJZMR7HM.js

@@ -0,0 +1,135 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/actions/popup-menu/popup-menu.tsx
+function contentKey(parts) {
+  let hash = 2166136261;
+  for (const character of parts.join("\0")) {
+    hash ^= character.codePointAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function entryKey(entry) {
+  if (entry.kind === "divider") return "-";
+  if (entry.kind === "heading") return `#${entry.label}`;
+  return [
+    entry.label,
+    entry.action ?? "",
+    entry.value ?? "",
+    entry.disabled ? "1" : "0",
+    entry.checked === void 0 ? "-" : entry.checked ? "1" : "0",
+    entry.tone ?? "",
+    entry.disabledReason ?? "",
+    String(entry.icon ?? ""),
+    String(entry.details ?? ""),
+    JSON.stringify(entry.attributes ?? {}),
+    ...(entry.submenu ?? []).map(entryKey)
+  ].join("
");
+}
+function renderEntry(entry, nested = false) {
+  if (entry.kind === "divider")
+    return /* @__PURE__ */ jsx("wa-divider", { slot: nested ? "submenu" : void 0 });
+  if (entry.kind === "heading")
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: "kui-popup-menu__heading",
+        slot: nested ? "submenu" : void 0,
+        children: entry.label
+      }
+    );
+  return /* @__PURE__ */ jsxs(
+    "wa-dropdown-item",
+    {
+      ...entry.attributes ?? {},
+      slot: nested ? "submenu" : void 0,
+      "data-action": entry.action,
+      value: entry.value,
+      type: entry.checked === void 0 ? void 0 : "checkbox",
+      checked: entry.checked,
+      variant: entry.tone === "danger" ? "danger" : void 0,
+      disabled: entry.disabled,
+      title: entry.disabled ? entry.disabledReason : void 0,
+      children: [
+        entry.icon ? /* @__PURE__ */ jsx("span", { slot: "icon", class: "kui-popup-menu__icon", children: entry.icon }) : null,
+        entry.label,
+        entry.details ? /* @__PURE__ */ jsx("span", { slot: "details", class: "kui-popup-menu__details", children: entry.details }) : entry.submenu ? /* @__PURE__ */ jsx("span", { slot: "details" }) : null,
+        entry.submenu?.map((child) => renderEntry(child, true))
+      ]
+    }
+  );
+}
+function openPopupMenuAt(menu, x, y) {
+  menu.style.setProperty("--kui-popup-menu-context-x", `${x}px`);
+  menu.style.setProperty("--kui-popup-menu-context-y", `${y}px`);
+  menu.open = true;
+}
+function closePopupMenu(menu) {
+  menu.open = false;
+}
+function PopupMenu({
+  text,
+  label,
+  icon,
+  items,
+  placement = "bottom-start",
+  caret = true,
+  disabled = false,
+  rootAttributes = {},
+  slot,
+  context = false
+}) {
+  const key = `kui-popup-menu-${contentKey([
+    text ?? "",
+    label ?? "",
+    String(icon ?? ""),
+    String(caret),
+    String(disabled),
+    String(context),
+    ...items.map(entryKey)
+  ])}`;
+  return /* @__PURE__ */ jsxs(
+    "wa-dropdown",
+    {
+      size: "m",
+      ...rootAttributes,
+      class: "kui-popup-menu",
+      "data-component": "popup-menu",
+      "data-key": key,
+      "data-morph-skip-children": true,
+      "data-trigger": context ? "context" : "button",
+      placement,
+      slot,
+      children: [
+        context ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            slot: "trigger",
+            class: "kui-popup-menu__context-anchor",
+            "aria-label": label,
+            "aria-hidden": "true",
+            tabindex: -1
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "wa-button",
+          {
+            slot: "trigger",
+            appearance: "plain",
+            "with-caret": caret,
+            disabled,
+            children: [
+              icon,
+              text ? /* @__PURE__ */ jsx("span", { children: text }) : /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__label", children: label })
+            ]
+          }
+        ),
+        items.map((entry) => renderEntry(entry))
+      ]
+    }
+  );
+}
+
+export { PopupMenu, closePopupMenu, openPopupMenuAt };
+
+//# sourceMappingURL=chunk-NJZMR7HM.js.map

package/dist/chunk-NJZMR7HM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/actions/popup-menu/popup-menu.tsx"],"names":[],"mappings":"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","file":"chunk-NJZMR7HM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\nexport type PopupMenuPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\ntype PopupMenuDataAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip-children'?: never;\n  }\n>;\n\n/** One command in the menu. */\nexport interface PopupMenuItem {\n  kind?: 'item';\n  label: string;\n  /** Delegated `data-action` the app handles when the item is chosen. */\n  action?: string;\n  /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */\n  value?: string;\n  /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */\n  icon?: SafeHtml;\n  /** A checkbox choice, including nested choices; omit for a plain command. */\n  checked?: boolean;\n  /** Trailing safe content, such as secondary status. */\n  details?: SafeHtml;\n  /** Destructive command styling. */\n  tone?: 'default' | 'danger';\n  disabled?: boolean;\n  /** Native tooltip text for a disabled command. */\n  disabledReason?: string;\n  /** Application `data-*` metadata such as a record id. */\n  attributes?: PopupMenuDataAttributes;\n  /** Child commands, headings, and dividers opened by hover or keyboard navigation. */\n  submenu?: readonly PopupMenuEntry[];\n}\n\n/** A labeled group heading; items that follow it belong to the group. */\nexport interface PopupMenuHeading {\n  kind: 'heading';\n  label: string;\n}\n\n/** A separator between groups of items. */\nexport interface PopupMenuDivider {\n  kind: 'divider';\n}\n\nexport type PopupMenuEntry =\n  PopupMenuItem | PopupMenuHeading | PopupMenuDivider;\n\ntype PopupMenuTriggerName =\n  | {\n      /** Visible trigger text, which is also its accessible name. */\n      text: string;\n      label?: never;\n    }\n  | {\n      text?: never;\n      /**\n       * Accessible name of an icon-only trigger, rendered as visually hidden\n       * slotted text (a Web Awesome button takes its name from its content).\n       */\n      label: string;\n    };\n\ntype PopupMenuTrigger =\n  | (PopupMenuTriggerName & { context?: false })\n  | {\n      context: true;\n      label: string;\n      text?: never;\n      icon?: never;\n      caret?: never;\n      disabled?: never;\n    };\n\nexport type PopupMenuProps = PopupMenuTrigger & {\n  /** Trigger icon, typically a `LucideIcon`, before any visible text. */\n  icon?: KerfUiContent;\n  items: readonly PopupMenuEntry[];\n  /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */\n  placement?: PopupMenuPlacement;\n  /** Show the disclosure caret after the trigger content. Defaults to true. */\n  caret?: boolean;\n  disabled?: boolean;\n  /** Application `data-*` metadata on the menu root. */\n  rootAttributes?: PopupMenuDataAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\n/** A short, stable FNV-1a digest of the trigger and item structure. */\nfunction contentKey(parts: readonly string[]): string {\n  let hash = 0x811c9dc5;\n  for (const character of parts.join('\\u0000')) {\n    hash ^= character.codePointAt(0)!;\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return (hash >>> 0).toString(36);\n}\n\nfunction entryKey(entry: PopupMenuEntry): string {\n  if (entry.kind === 'divider') return '-';\n  if (entry.kind === 'heading') return `#${entry.label}`;\n  return [\n    entry.label,\n    entry.action ?? '',\n    entry.value ?? '',\n    entry.disabled ? '1' : '0',\n    entry.checked === undefined ? '-' : entry.checked ? '1' : '0',\n    entry.tone ?? '',\n    entry.disabledReason ?? '',\n    String(entry.icon ?? ''),\n    String(entry.details ?? ''),\n    JSON.stringify(entry.attributes ?? {}),\n    ...(entry.submenu ?? []).map(entryKey),\n  ].join('\\u0001');\n}\n\nfunction renderEntry(entry: PopupMenuEntry, nested = false) {\n  if (entry.kind === 'divider')\n    return <wa-divider slot={nested ? 'submenu' : undefined} />;\n  // A group title styled like the Select's group title. It is not a slotted\n  // h1-h6, whose Web Awesome group-label metrics are !important.\n  if (entry.kind === 'heading')\n    return (\n      <div\n        class=\"kui-popup-menu__heading\"\n        slot={nested ? 'submenu' : undefined}\n      >\n        {entry.label}\n      </div>\n    );\n  return (\n    <wa-dropdown-item\n      {...(entry.attributes ?? {})}\n      slot={nested ? 'submenu' : undefined}\n      data-action={entry.action}\n      value={entry.value}\n      type={entry.checked === undefined ? undefined : 'checkbox'}\n      checked={entry.checked}\n      variant={entry.tone === 'danger' ? 'danger' : undefined}\n      disabled={entry.disabled}\n      title={entry.disabled ? entry.disabledReason : undefined}\n    >\n      {entry.icon ? (\n        <span slot=\"icon\" class=\"kui-popup-menu__icon\">\n          {entry.icon}\n        </span>\n      ) : null}\n      {entry.label}\n      {entry.details ? (\n        <span slot=\"details\" class=\"kui-popup-menu__details\">\n          {entry.details}\n        </span>\n      ) : entry.submenu ? (\n        <span slot=\"details\" />\n      ) : null}\n      {entry.submenu?.map((child) => renderEntry(child, true))}\n    </wa-dropdown-item>\n  );\n}\n\n/** A rendered context PopupMenu with Web Awesome's controlled open state. */\nexport type PopupMenuElement = HTMLElement & { open: boolean };\n\n/** Open a context PopupMenu at viewport pointer coordinates. */\nexport function openPopupMenuAt(\n  menu: PopupMenuElement,\n  x: number,\n  y: number,\n): void {\n  menu.style.setProperty('--kui-popup-menu-context-x', `${x}px`);\n  menu.style.setProperty('--kui-popup-menu-context-y', `${y}px`);\n  menu.open = true;\n}\n\n/** Close a programmatically opened PopupMenu. */\nexport function closePopupMenu(menu: PopupMenuElement): void {\n  menu.open = false;\n}\n\n/**\n * An action menu: a trigger button that opens a list of commands. Renders the\n * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with\n * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items\n * dispatch through delegated `data-action`s; the app owns the commands and any\n * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register\n * the Web Awesome elements. At viewport widths up to 480px, submenus appear\n * above or below their parent menu so their rows do not cover the parent list.\n */\nexport function PopupMenu({\n  text,\n  label,\n  icon,\n  items,\n  placement = 'bottom-start',\n  caret = true,\n  disabled = false,\n  rootAttributes = {},\n  slot,\n  context = false,\n}: PopupMenuProps) {\n  // Web Awesome owns the trigger and item DOM once upgraded, so the morph\n  // skips the children; the content key rebuilds the menu when they change.\n  const key = `kui-popup-menu-${contentKey([\n    text ?? '',\n    label ?? '',\n    String(icon ?? ''),\n    String(caret),\n    String(disabled),\n    String(context),\n    ...items.map(entryKey),\n  ])}`;\n  // size=\"m\" is Web Awesome's reflected default; rendering it keeps a\n  // re-render's morph from stripping it and forcing a Lit update.\n  return (\n    <wa-dropdown\n      size=\"m\"\n      {...rootAttributes}\n      class=\"kui-popup-menu\"\n      data-component=\"popup-menu\"\n      data-key={key}\n      data-morph-skip-children\n      data-trigger={context ? 'context' : 'button'}\n      placement={placement}\n      slot={slot}\n    >\n      {context ? (\n        <button\n          type=\"button\"\n          slot=\"trigger\"\n          class=\"kui-popup-menu__context-anchor\"\n          aria-label={label}\n          aria-hidden=\"true\"\n          tabindex={-1}\n        />\n      ) : (\n        <wa-button\n          slot=\"trigger\"\n          appearance=\"plain\"\n          with-caret={caret}\n          disabled={disabled}\n        >\n          {icon}\n          {text ? (\n            <span>{text}</span>\n          ) : (\n            <span class=\"kui-popup-menu__label\">{label}</span>\n          )}\n        </wa-button>\n      )}\n      {items.map((entry) => renderEntry(entry))}\n    </wa-dropdown>\n  );\n}\n"]}

package/dist/chunk-NMWDHZVM.js

@@ -0,0 +1,35 @@
+import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var listInsetTextProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-sides"
+]);
+function ListInsetText({
+  children,
+  sides = "trbl",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    listInsetTextProtectedAttributes
+  );
+  const cls = `kui-list-inset-text ${className}`.trim();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: cls,
+      "data-component": "list-inset-text",
+      "data-sides": sides,
+      slot,
+      children
+    }
+  );
+}
+
+export { ListInsetText };
+
+//# sourceMappingURL=chunk-NMWDHZVM.js.map

package/dist/chunk-NMWDHZVM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list-inset-text/list-inset-text.tsx"],"names":[],"mappings":";;;AAIA,IAAM,gCAAA,uBAAuC,GAAA,CAAI;AAAA,EAC/C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BM,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,GAAA,GAAM,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AACpD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,iBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-NMWDHZVM.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\n\nconst listInsetTextProtectedAttributes = new Set([\n  'data-component',\n  'data-sides',\n]);\n\ntype ListInsetTextRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-sides'?: never;\n  }\n>;\n\nexport interface ListInsetTextProps {\n  /** Text (or inline content) that carries no margin, border, or padding of its own. */\n  children: KerfUiContent | string;\n  /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n  sides?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; component-owned structural attributes stay protected. */\n  rootAttributes?: ListInsetTextRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `sides=\"rl\"` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n  children,\n  sides = 'trbl',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ListInsetTextProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    listInsetTextProtectedAttributes,\n  );\n  const cls = `kui-list-inset-text ${className}`.trim();\n  return (\n    <div\n      {...safeRootAttributes}\n      class={cls}\n      data-component=\"list-inset-text\"\n      data-sides={sides}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/chunk-NP3FSLNX.js

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

package/dist/chunk-NP3FSLNX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media/lucide-icon/lucide-icon.tsx"],"names":["jsx"],"mappings":";;;AASA,IAAM,oBAAA,GAAuB;AAAA,EAC3B,EAAA,EAAI,EAAA;AAAA,EACJ,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,EAAA;AAAA,EACH,CAAA,EAAG,EAAA;AAAA,EACH,EAAA,EAAI;AACN,CAAA;AAoBO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA,GAAa,SAAA;AAAA,EACb,SAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,KAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,IAAI,OAAO,SAAS,QAAA,KAAa,CAAC,OAAO,QAAA,CAAS,IAAI,KAAK,IAAA,IAAQ,CAAA,CAAA;AACjE,IAAA,MAAM,IAAI,UAAA;AAAA,MACR;AAAA,KACF;AACF,EAAA,IAAI,OAAO,IAAA,KAAS,QAAA,IAAY,CAAC,MAAA,CAAO,MAAA,CAAO,sBAAsB,IAAI,CAAA;AACvE,IAAA,MAAM,IAAI,WAAW,4CAA4C,CAAA;AACnE,EAAA,MAAM,SACJ,OAAO,IAAA,KAAS,WAAW,IAAA,GAAO,IAAA,IAAQ,qBAAqB,IAAI,CAAA;AACrE,EAAA,MAAM,aAAA,GAAgB,EAAE,IAAA,EAAK;AAC7B,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA;AAAA,MACJ,KAAA,EAAO,SAAA;AAAA,MACP,aAAA,EAAa,IAAA;AAAA,MACb,aAAA,EAAa,SAAS,MAAA,GAAS,MAAA;AAAA,MAC/B,WAAA,EAAW,IAAA,KAAS,MAAA,GAAY,MAAA,GAAY,OAAO,IAAI,CAAA;AAAA,MACvD,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,MAAA;AAAA,MACjC,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAM,UAAA,KAAe,OAAA,GAAU,cAAA,GAAiB,MAAA;AAAA,MAChD,MAAA,EAAO,cAAA;AAAA,MACP,cAAA,EAAa,GAAA;AAAA,MACb,gBAAA,EAAe,OAAA;AAAA,MACf,iBAAA,EAAgB,OAAA;AAAA,MAChB,KAAA,EACE;AAAA,QACE,WAAW,MAAA,GACP,MAAA,GACA,CAAA,mBAAA,EAAsB,MAAA,CAAO,MAAM,CAAC,CAAA,CAAA;AAAA,QACxC,KAAA,KAAU,MAAA,GAAY,MAAA,GAAY,CAAA,MAAA,EAAS,KAAK,CAAA;AAAA,QAE/C,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAAA,MAGjB,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM,GAAA,CAAI,GAAA,EAAK,KAAK,CAAC;AAAA;AAAA,GAC7C;AAEJ","file":"chunk-NP3FSLNX.js","sourcesContent":["import { jsx } from 'kerfjs/jsx-runtime';\nimport type { IconNode } from 'lucide';\n\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\n\nexport type LucideNode = IconNode;\nexport type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;\n\nconst lucideIconSizePixels = {\n  xs: 12,\n  s: 16,\n  m: 20,\n  l: 24,\n  xl: 32,\n} as const satisfies Record<Exclude<LucideIconSize, number>, number>;\n\nexport interface LucideIconProps {\n  icon: LucideNode;\n  name: string;\n  /** Outline by default; solid fills compatible glyphs with the current text color. */\n  appearance?: 'outline' | 'solid';\n  className?: string;\n  /** Foreground color; omit to inherit the surrounding text color. */\n  color?: CssForegroundColor;\n  /** Flow with surrounding text instead of occupying a block. */\n  inline?: boolean;\n  label?: string;\n  /** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */\n  size?: LucideIconSize;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Render a Lucide-compatible icon node without copying icon SVG strings. */\nexport function LucideIcon({\n  icon,\n  name,\n  appearance = 'outline',\n  className,\n  color,\n  inline = false,\n  label,\n  size,\n  slot,\n}: LucideIconProps) {\n  if (typeof size === 'number' && (!Number.isFinite(size) || size <= 0))\n    throw new RangeError(\n      'LucideIcon size must be a positive finite pixel value',\n    );\n  if (typeof size === 'string' && !Object.hasOwn(lucideIconSizePixels, size))\n    throw new RangeError('LucideIcon size must use a named icon step');\n  const pixels =\n    typeof size === 'number' ? size : size && lucideIconSizePixels[size];\n  const slotAttribute = { slot };\n  return (\n    <svg\n      {...slotAttribute}\n      class={className}\n      data-lucide={name}\n      data-inline={inline ? 'true' : undefined}\n      data-size={size === undefined ? undefined : String(size)}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : 'true'}\n      viewBox=\"0 0 24 24\"\n      fill={appearance === 'solid' ? 'currentColor' : 'none'}\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      style={\n        [\n          pixels === undefined\n            ? undefined\n            : `--_kui-lucide-size:${remify(pixels)}`,\n          color === undefined ? undefined : `color:${color}`,\n        ]\n          .filter(Boolean)\n          .join(';') || undefined\n      }\n    >\n      {icon.map(([tag, attrs]) => jsx(tag, attrs))}\n    </svg>\n  );\n}\n"]}

package/dist/{chunk-YGN7OMLT.js → chunk-NS2TBYM4.js}

@@ -1,6 +1,6 @@
-import { Skeleton } from './chunk-B24C4A6T.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
+// src/components/forms/segmented-control/segmented-control.tsx
 function SegmentedControl({
   id,
   label,
@@ -12,7 +12,8 @@ function SegmentedControl({
   size = "default",
   layout = "content",
   className = "",
-  placeholder = false
+  placeholder = false,
+  slot
 }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -29,8 +30,9 @@ function SegmentedControl({
       role: "group",
       "aria-label": label,
       "aria-busy": placeholder ? "true" : void 0,
+      slot,
       children: choices.map((choice) => {
-        const selected = choice.value === value;
+        const selected = !placeholder && choice.value === value;
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -44,7 +46,8 @@ function SegmentedControl({
             title: placeholder ? void 0 : choice.title,
             disabled: choice.disabled || placeholder,
             tabindex: placeholder ? "-1" : "0",
-            children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "4em" }) : choice.content ?? /* @__PURE__ */ jsx("span", { children: choice.label })
+            "data-kui-disabled": choice.disabled ? "true" : void 0,
+            children: choice.content ?? /* @__PURE__ */ jsx("span", { children: choice.label })
           }
         );
       })
@@ -54,4 +57,4 @@ function SegmentedControl({
 
 export { SegmentedControl };
 
-//# sourceMappingURL=chunk-YGN7OMLT.js.map
+//# sourceMappingURL=chunk-NS2TBYM4.js.map

package/dist/chunk-NS2TBYM4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/segmented-control/segmented-control.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,gBAAA,CAAuC;AAAA,EACrD,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAiC;AAC/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AAGvB,QAAA,MAAM,QAAA,GAAW,CAAC,WAAA,IAAe,MAAA,CAAO,KAAA,KAAU,KAAA;AAClD,QAAA,uBACE,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,MAAA,CAAO,KAAA;AAAA,YACxC,QAAA,EAAU,OAAO,QAAA,IAAY,WAAA;AAAA,YAC7B,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAC/B,mBAAA,EAAmB,MAAA,CAAO,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,YAE7C,QAAA,EAAA,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM;AAAA;AAAA,SACzC;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"chunk-NS2TBYM4.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  content?: KerfUiContent;\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends string = string> {\n  id: string;\n  label: string;\n  value: NoInfer<Value>;\n  choices: readonly SegmentedControlChoice<Value>[];\n  action?: string;\n  appearance?: SegmentedControlAppearance;\n  shape?: SegmentedControlShape;\n  size?: SegmentedControlSize;\n  layout?: SegmentedControlLayout;\n  className?: string;\n  /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function SegmentedControl<Value extends string>({\n  id,\n  label,\n  value,\n  choices,\n  action = 'select-segment',\n  appearance = 'filled',\n  shape = 'rounded',\n  size = 'default',\n  layout = 'content',\n  className = '',\n  placeholder = false,\n  slot,\n}: SegmentedControlProps<Value>) {\n  return (\n    <div\n      class={`kui-segmented-control ${className}`.trim()}\n      data-component=\"segmented-control\"\n      data-segmented-control-id={id}\n      data-value={value}\n      data-appearance={appearance}\n      data-shape={shape}\n      data-size={size}\n      data-layout={layout}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {choices.map((choice) => {\n        // The choices are known chrome; only the selection is unknown while\n        // loading, so a placeholder shows every choice and selects none.\n        const selected = !placeholder && choice.value === value;\n        return (\n          <button\n            type=\"button\"\n            class=\"kui-segmented-control__item\"\n            data-action={placeholder ? undefined : action}\n            data-segment-value={choice.value}\n            data-selected={String(selected)}\n            aria-label={choice.label}\n            aria-pressed={String(selected)}\n            title={placeholder ? undefined : choice.title}\n            disabled={choice.disabled || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n            data-kui-disabled={choice.disabled ? 'true' : undefined}\n          >\n            {choice.content ?? <span>{choice.label}</span>}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/chunk-O27D24CA.js

@@ -0,0 +1,250 @@
+// src/integrations/webawesome/help-tags/install-help-tag.ts
+var HELP_TAG_SHOW_DELAY = 500;
+var HELP_TAG_WARM_WINDOW = 400;
+var HELP_TAG_VIEWPORT_MARGIN = 8;
+var LIFECYCLE_EVENTS = [
+  "wa-show",
+  "wa-after-show",
+  "wa-hide",
+  "wa-after-hide"
+];
+var installed = /* @__PURE__ */ new WeakSet();
+function isFocusVisible(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return false;
+  }
+}
+var MENU_LABEL = ':scope > [slot="trigger"] .kui-popup-menu__label';
+var isPlainControl = (host) => host.localName === "button" || host.localName === "a";
+var words = (node) => node.textContent.replace(/\s+/g, " ").trim();
+var ariaLabel = (control) => (control.getAttribute("aria-label") ?? "").replace(/\s+/g, " ").trim();
+function isToolbarIconControl(target) {
+  if (!target.matches("button, a[href]")) return false;
+  if (!ariaLabel(target) || target.hasAttribute("title") || words(target))
+    return false;
+  if (!target.closest(".kui-toolbar-control-group")) return false;
+  return !(target.id && target.ownerDocument.querySelector(
+    `wa-tooltip[for="${CSS.escape(target.id)}"]`
+  ));
+}
+function helpTagHost(path) {
+  for (const target of path) {
+    if (!(target instanceof HTMLElement)) continue;
+    if (isToolbarIconControl(target)) return target;
+    const { component, selectedPresentation } = target.dataset;
+    if (component === "select" && target.localName === "wa-select" && selectedPresentation === "icon-only")
+      return target;
+    if (component === "popup-menu" && target.querySelector(MENU_LABEL))
+      return target;
+  }
+  return null;
+}
+function anchorOf(host) {
+  if (isPlainControl(host)) return host;
+  if (host.dataset.component === "select")
+    return host.shadowRoot?.querySelector('[part~="combobox"]') ?? null;
+  return host.querySelector(':scope > [slot="trigger"]');
+}
+function helpText(host) {
+  if (isPlainControl(host)) return ariaLabel(host);
+  const label = host.querySelector(MENU_LABEL) ?? host.querySelector(':scope > [slot="label"]');
+  if (label) return words(label);
+  const name = host.getAttribute("label") ?? "";
+  const chosen = host.selectedOptions?.[0];
+  const choice = chosen ? chosen.label || words(chosen) : "";
+  return choice && choice !== name ? `${name}: ${choice}` : name;
+}
+function installHelpTags(doc = document, { focusVisible = isFocusVisible } = {}) {
+  if (installed.has(doc)) return;
+  installed.add(doc);
+  const tags = /* @__PURE__ */ new WeakMap();
+  let hovered = null;
+  let focused = null;
+  let shown = null;
+  let dismissed = null;
+  let timer;
+  let warmUntil = 0;
+  let layer = null;
+  const layerRoot = () => {
+    if (!layer) {
+      layer = doc.createElement("div");
+      layer.className = "kui-help-tag-layer";
+      layer.setAttribute("aria-hidden", "true");
+      layer.setAttribute("data-morph-skip", "");
+      Object.assign(layer.style, {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        width: "0",
+        height: "0"
+      });
+    }
+    if (!layer.isConnected) doc.body.append(layer);
+    return layer;
+  };
+  const tagFor = (host) => {
+    const plain = isPlainControl(host);
+    const root = plain ? layerRoot() : host.shadowRoot;
+    if (!root) return null;
+    let tag = tags.get(host);
+    if (!tag) {
+      tag = doc.createElement("wa-tooltip");
+      tag.className = "kui-help-tag";
+      tag.setAttribute("aria-hidden", "true");
+      tag.setAttribute("trigger", "manual");
+      tag.setAttribute("placement", "bottom");
+      tag.style.pointerEvents = "none";
+      for (const type of LIFECYCLE_EVENTS)
+        tag.addEventListener(type, (event) => event.stopPropagation());
+      if (plain) {
+        const created = tag;
+        created.addEventListener("wa-after-hide", () => {
+          if (created.open) return;
+          created.remove();
+          tags.delete(host);
+        });
+      }
+      root.append(tag);
+      tags.set(host, tag);
+    }
+    return tag;
+  };
+  const hide = (host) => {
+    if (shown?.host !== host) return;
+    shown.tag.open = false;
+    shown = null;
+    warmUntil = Date.now() + HELP_TAG_WARM_WINDOW;
+  };
+  const show = (host) => {
+    window.clearTimeout(timer);
+    timer = void 0;
+    if (host.open || dismissed === host || !host.isConnected) return;
+    const anchor = anchorOf(host);
+    const text = helpText(host);
+    if (!anchor || !text) return;
+    const tag = tagFor(host);
+    if (!tag) return;
+    if (shown) hide(shown.host);
+    if (anchor === host)
+      tag.style.colorScheme = window.getComputedStyle(host).colorScheme;
+    tag.anchor = anchor;
+    tag.textContent = text;
+    tag.open = true;
+    shown = { host, tag };
+    void tag.updateComplete.then(() => {
+      if (tag.anchor !== anchor) tag.anchor = anchor;
+      const popup = tag.shadowRoot?.querySelector("wa-popup");
+      if (popup) popup.shiftPadding = HELP_TAG_VIEWPORT_MARGIN;
+    });
+  };
+  const triggerHost = (event) => {
+    const path = event.composedPath();
+    const host = helpTagHost(path);
+    if (!host) return null;
+    const anchor = anchorOf(host);
+    return anchor && path.includes(anchor) ? host : null;
+  };
+  const leave = (host) => {
+    if (hovered !== host) {
+      window.clearTimeout(timer);
+      timer = void 0;
+    }
+    if (hovered !== host && focused !== host) hide(host);
+  };
+  const release = (host) => {
+    if (dismissed && dismissed !== host && !dismissed.open) dismissed = null;
+  };
+  doc.addEventListener(
+    "pointerover",
+    (event) => {
+      if (event.pointerType === "touch") return;
+      const host = triggerHost(event);
+      release(host);
+      if (host === hovered) return;
+      const previous = hovered;
+      hovered = host;
+      if (previous) leave(previous);
+      if (!host || host.open || dismissed === host || shown?.host === host)
+        return;
+      window.clearTimeout(timer);
+      if (Date.now() < warmUntil) show(host);
+      else timer = window.setTimeout(() => show(host), HELP_TAG_SHOW_DELAY);
+    },
+    true
+  );
+  doc.addEventListener(
+    "pointerout",
+    (event) => {
+      if (event.relatedTarget !== null || !hovered) return;
+      const previous = hovered;
+      hovered = null;
+      leave(previous);
+    },
+    true
+  );
+  const dismiss = (host) => {
+    dismissed = host;
+    hide(host);
+  };
+  doc.addEventListener(
+    "pointerdown",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      if (host) dismiss(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "focusin",
+    (event) => {
+      const target = event.composedPath()[0];
+      const host = target instanceof Element && focusVisible(target) ? triggerHost(event) : null;
+      if (host === focused) return;
+      const previous = focused;
+      focused = host;
+      if (previous) leave(previous);
+      if (host && dismissed !== host) show(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "focusout",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      const next = event.relatedTarget;
+      if (!host || next instanceof Node && host.contains(next)) return;
+      if (dismissed === host) dismissed = null;
+      if (host !== focused) return;
+      focused = null;
+      leave(host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape" && shown) dismiss(shown.host);
+    },
+    true
+  );
+  doc.addEventListener(
+    "wa-show",
+    (event) => {
+      const host = helpTagHost(event.composedPath());
+      if (host && event.composedPath()[0] === host) dismiss(host);
+    },
+    true
+  );
+  const refresh = (event) => {
+    const host = helpTagHost(event.composedPath());
+    if (shown && host === shown.host) shown.tag.textContent = helpText(host);
+  };
+  doc.addEventListener("change", refresh, true);
+  doc.addEventListener("input", refresh, true);
+}
+
+export { installHelpTags };
+
+//# sourceMappingURL=chunk-O27D24CA.js.map