@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.18

package/dist/chunk-QQFJMRIB.js

@@ -0,0 +1,45 @@
+import { Skeleton } from './chunk-PZQVSDLH.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+function ValueTableRow({
+  label,
+  value,
+  icon,
+  className = "",
+  placeholder = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-value-table__row ${className}`.trim(),
+      "data-has-icon": String(Boolean(icon)),
+      "data-placeholder": placeholder ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("dt", { children: [
+          icon && /* @__PURE__ */ jsx("span", { class: "kui-value-table__icon", children: icon }),
+          /* @__PURE__ */ jsx("span", { class: "kui-value-table__label", children: label })
+        ] }),
+        /* @__PURE__ */ jsx("dd", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "10em" }) : value })
+      ]
+    }
+  );
+}
+function ValueTable({
+  label,
+  className = "",
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      class: `kui-value-table ${className}`.trim(),
+      "data-component": "value-table",
+      "aria-label": label,
+      children
+    }
+  );
+}
+
+export { ValueTable, ValueTableRow };
+
+//# sourceMappingURL=chunk-QQFJMRIB.js.map

package/dist/chunk-QQFJMRIB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AAaO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAAuB;AACrB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEzC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,0BACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAC9C,CAAA;AAAA,wBACA,GAAA,CAAC,QAAI,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM;AAAA;AAAA;AAAA,GACvD;AAEJ;ACvBO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAoB;AAClB,EAAA,uBACEA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-QQFJMRIB.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport interface ValueTableRowProps {\n  label: string | SafeHtml;\n  value: string | SafeHtml;\n  icon?: SafeHtml;\n  className?: string;\n  /** Render the value as an unanimated loading skeleton, keeping the field label. */\n  placeholder?: boolean;\n}\n\nexport function ValueTableRow({\n  label,\n  value,\n  icon,\n  className = '',\n  placeholder = false,\n}: ValueTableRowProps) {\n  return (\n    <div\n      class={`kui-value-table__row ${className}`.trim()}\n      data-has-icon={String(Boolean(icon))}\n      data-placeholder={placeholder ? 'true' : undefined}\n    >\n      <dt>\n        {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n        <span class=\"kui-value-table__label\">{label}</span>\n      </dt>\n      <dd>{placeholder ? <Skeleton width=\"10em\" /> : value}</dd>\n    </div>\n  );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n  label: string;\n  className?: string;\n  children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({\n  label,\n  className = '',\n  children,\n}: ValueTableProps) {\n  return (\n    <dl\n      class={`kui-value-table ${className}`.trim()}\n      data-component=\"value-table\"\n      aria-label={label}\n    >\n      {children}\n    </dl>\n  );\n}\n"]}

package/dist/chunk-S3HKPI7I.js

@@ -0,0 +1,218 @@
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { Search, X } from 'lucide';
+import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
+
+function orderedParts(query, tokens) {
+  const ordered = tokens.map((token, index) => ({
+    token,
+    index,
+    offset: Math.max(0, Math.min(query.length, token.offset ?? query.length))
+  })).sort(
+    (left, right) => left.offset - right.offset || left.index - right.index
+  );
+  const parts = [];
+  let cursor = 0;
+  for (const { token, offset } of ordered) {
+    parts.push({ kind: "text", value: query.slice(cursor, offset) });
+    parts.push({ kind: "token", token: { ...token, offset } });
+    cursor = offset;
+  }
+  parts.push({ kind: "text", value: query.slice(cursor) });
+  return parts;
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" });
+}
+function TokenSearchField({
+  id,
+  label,
+  query = "",
+  tokens = [],
+  placeholder = "Search",
+  tokenPlaceholder = "Add search\u2026",
+  disabled = false,
+  autofocus = false,
+  collapsible = false,
+  expanded = false,
+  expandAction = "expand-token-search",
+  expandLabel,
+  leading,
+  trailing,
+  editAction = "edit-search-token",
+  removeAction = "remove-search-token",
+  clearAction = "clear-token-search",
+  clearLabel = "Clear search",
+  className = "",
+  editorAttributes = {}
+}) {
+  const parts = orderedParts(query, tokens);
+  const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
+  const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-token-search ${className}`.trim(),
+      "data-component": "token-search-field",
+      "data-token-search-id": id,
+      "data-disabled": String(disabled),
+      "data-collapsible": String(collapsible),
+      "data-expanded": String(resolvedExpanded),
+      "data-has-trailing": String(Boolean(trailing)),
+      children: !resolvedExpanded ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          class: "kui-token-search__expand",
+          "data-action": expandAction,
+          "aria-label": expandLabel ?? label,
+          title: expandLabel ?? label,
+          disabled,
+          children: /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { class: "kui-token-search__leading", "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...editorAttributes,
+            class: "kui-token-search__editor",
+            "data-key": key,
+            "data-morph-skip": true,
+            "data-token-search-editor": id,
+            "data-token-count": tokens.length,
+            "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+            role: "searchbox",
+            "aria-label": label,
+            "aria-disabled": disabled ? "true" : void 0,
+            contenteditable: disabled ? "false" : "true",
+            spellcheck: "false",
+            autofocus,
+            children: parts.map(
+              (part) => part.kind === "text" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-token-search-text": true,
+                  "data-empty": String(part.value.length === 0),
+                  children: part.value || (tokens.length ? "\u200B" : "")
+                }
+              ) : /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  class: "kui-token-search__token",
+                  contenteditable: "false",
+                  "data-component": "token-search-token",
+                  "data-token-value": part.token.value,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "kui-token-search__token-edit",
+                        "data-action": editAction,
+                        "data-token-value": part.token.value,
+                        "aria-label": `Edit ${part.token.accessibleLabel ?? part.token.label}`,
+                        disabled,
+                        children: part.token.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        class: "kui-token-search__token-remove",
+                        "data-action": removeAction,
+                        "data-token-value": part.token.value,
+                        "aria-label": `Remove ${part.token.accessibleLabel ?? part.token.label}`,
+                        disabled,
+                        children: /* @__PURE__ */ jsx(CloseIcon, {})
+                      }
+                    )
+                  ]
+                }
+              )
+            )
+          }
+        ),
+        (query || tokens.length > 0) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            class: "kui-token-search__clear",
+            "data-action": clearAction,
+            "aria-label": clearLabel,
+            title: clearLabel,
+            disabled,
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing })
+      ] })
+    }
+  );
+}
+function readTokenSearchField(editor, knownTokens = []) {
+  let query = "";
+  const tokens = [];
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      query += (node.textContent ?? "").replaceAll("\xA0", " ").replaceAll("\u200B", "");
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    if (node.matches('[data-component="token-search-token"]')) {
+      const value = node.dataset.tokenValue;
+      const known = knownTokens.find((token) => token.value === value);
+      if (known) tokens.push({ ...known, offset: query.length });
+      else if (value)
+        tokens.push({ value, label: value, offset: query.length });
+      return;
+    }
+    if (node.tagName === "BR") {
+      query += " ";
+      return;
+    }
+    for (const child of node.childNodes) visit(child);
+  };
+  for (const child of editor.childNodes) visit(child);
+  return { query, tokens };
+}
+function placeTokenSearchCaret(editor, offset) {
+  editor.focus({ preventScroll: true });
+  const selection = globalThis.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  if (offset === void 0) {
+    range.selectNodeContents(editor);
+    range.collapse(false);
+  } else {
+    let remaining = Math.max(0, offset);
+    let found = false;
+    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
+      acceptNode: (node) => node.parentElement?.closest('[data-component="token-search-token"]') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+    });
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const source = node.textContent ?? "";
+      const length = source.replaceAll("\u200B", "").length;
+      if (remaining <= length) {
+        range.setStart(
+          node,
+          source === "\u200B" ? 0 : Math.min(remaining, source.length)
+        );
+        range.collapse(true);
+        found = true;
+        break;
+      }
+      remaining -= length;
+    }
+    if (!found) {
+      range.selectNodeContents(editor);
+      range.collapse(false);
+    }
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
+
+//# sourceMappingURL=chunk-S3HKPI7I.js.map

package/dist/chunk-S3HKPI7I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-S3HKPI7I.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\nexport interface TokenSearchFieldProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Allow an empty field to render as one iconic action. */\n  collapsible?: boolean;\n  /** Keep an empty collapsible field open while the application owns focus. */\n  expanded?: boolean;\n  expandAction?: string;\n  expandLabel?: string;\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  className?: string;\n  editorAttributes?: Readonly<Record<`data-${string}`, string>>;\n}\n\nexport interface TokenSearchFieldValue {\n  query: string;\n  tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n  { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n  query: string,\n  tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n  const ordered = tokens\n    .map((token, index) => ({\n      token,\n      index,\n      offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n    }))\n    .sort(\n      (left, right) => left.offset - right.offset || left.index - right.index,\n    );\n  const parts: TokenSearchPart[] = [];\n  let cursor = 0;\n  for (const { token, offset } of ordered) {\n    parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n    parts.push({ kind: 'token', token: { ...token, offset } });\n    cursor = offset;\n  }\n  parts.push({ kind: 'text', value: query.slice(cursor) });\n  return parts;\n}\n\nfunction CloseIcon() {\n  return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n  id,\n  label,\n  query = '',\n  tokens = [],\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear search',\n  className = '',\n  editorAttributes = {},\n}: TokenSearchFieldProps) {\n  const parts = orderedParts(query, tokens);\n  const key = `${id}:${tokens.map((token) => token.value).join('|')}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  return (\n    <div\n      class={`kui-token-search ${className}`.trim()}\n      data-component=\"token-search-field\"\n      data-token-search-id={id}\n      data-disabled={String(disabled)}\n      data-collapsible={String(collapsible)}\n      data-expanded={String(resolvedExpanded)}\n      data-has-trailing={String(Boolean(trailing))}\n    >\n      {!resolvedExpanded ? (\n        <button\n          type=\"button\"\n          class=\"kui-token-search__expand\"\n          data-action={expandAction}\n          aria-label={expandLabel ?? label}\n          title={expandLabel ?? label}\n          disabled={disabled}\n        >\n          <LucideIcon icon={Search} name=\"search\" />\n        </button>\n      ) : (\n        <>\n          <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n            {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n          </span>\n          <div\n            {...editorAttributes}\n            class=\"kui-token-search__editor\"\n            data-key={key}\n            data-morph-skip\n            data-token-search-editor={id}\n            data-token-count={tokens.length}\n            data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n            role=\"searchbox\"\n            aria-label={label}\n            aria-disabled={disabled ? 'true' : undefined}\n            contenteditable={disabled ? 'false' : 'true'}\n            spellcheck=\"false\"\n            autofocus={autofocus}\n          >\n            {parts.map((part) =>\n              part.kind === 'text' ? (\n                <span\n                  data-token-search-text\n                  data-empty={String(part.value.length === 0)}\n                >\n                  {part.value || (tokens.length ? '\\u200b' : '')}\n                </span>\n              ) : (\n                <span\n                  class=\"kui-token-search__token\"\n                  contenteditable=\"false\"\n                  data-component=\"token-search-token\"\n                  data-token-value={part.token.value}\n                >\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-edit\"\n                    data-action={editAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    {part.token.label}\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"kui-token-search__token-remove\"\n                    data-action={removeAction}\n                    data-token-value={part.token.value}\n                    aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n                    disabled={disabled}\n                  >\n                    <CloseIcon />\n                  </button>\n                </span>\n              ),\n            )}\n          </div>\n          {(query || tokens.length > 0) && (\n            <button\n              type=\"button\"\n              class=\"kui-token-search__clear\"\n              data-action={clearAction}\n              aria-label={clearLabel}\n              title={clearLabel}\n              disabled={disabled}\n            >\n              <CloseIcon />\n            </button>\n          )}\n          {trailing && (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n  editor: HTMLElement,\n  knownTokens: readonly TokenSearchToken[] = [],\n): TokenSearchFieldValue {\n  let query = '';\n  const tokens: TokenSearchToken[] = [];\n  const visit = (node: Node): void => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      query += (node.textContent ?? '')\n        .replaceAll('\\u00a0', ' ')\n        .replaceAll('\\u200b', '');\n      return;\n    }\n    if (!(node instanceof HTMLElement)) return;\n    if (node.matches('[data-component=\"token-search-token\"]')) {\n      const value = node.dataset.tokenValue;\n      const known = knownTokens.find((token) => token.value === value);\n      if (known) tokens.push({ ...known, offset: query.length });\n      else if (value)\n        tokens.push({ value, label: value, offset: query.length });\n      return;\n    }\n    if (node.tagName === 'BR') {\n      query += ' ';\n      return;\n    }\n    for (const child of node.childNodes) visit(child);\n  };\n  for (const child of editor.childNodes) visit(child);\n  return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(\n  editor: HTMLElement,\n  offset?: number,\n): void {\n  editor.focus({ preventScroll: true });\n  const selection = globalThis.getSelection();\n  if (!selection) return;\n  const range = document.createRange();\n  if (offset === undefined) {\n    range.selectNodeContents(editor);\n    range.collapse(false);\n  } else {\n    let remaining = Math.max(0, offset);\n    let found = false;\n    const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n      acceptNode: (node) =>\n        node.parentElement?.closest('[data-component=\"token-search-token\"]')\n          ? NodeFilter.FILTER_REJECT\n          : NodeFilter.FILTER_ACCEPT,\n    });\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      const source = node.textContent ?? '';\n      const length = source.replaceAll('\\u200b', '').length;\n      if (remaining <= length) {\n        range.setStart(\n          node,\n          source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n        );\n        range.collapse(true);\n        found = true;\n        break;\n      }\n      remaining -= length;\n    }\n    if (!found) {\n      range.selectNodeContents(editor);\n      range.collapse(false);\n    }\n  }\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n"]}

package/dist/{chunk-WXMGNX2Y.js → chunk-S3PCZ7NV.js}

@@ -1,4 +1,4 @@
-import { Skeleton } from './chunk-B24C4A6T.js';
+import { Skeleton } from './chunk-PZQVSDLH.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 function ToolbarText({
@@ -35,4 +35,4 @@ function ToolbarText({
 
 export { ToolbarText };
 
-//# sourceMappingURL=chunk-WXMGNX2Y.js.map
+//# sourceMappingURL=chunk-S3PCZ7NV.js.map

package/dist/chunk-S3PCZ7NV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAuCO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW;AACb,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,oBAEtB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-S3PCZ7NV.js","sourcesContent":["import { Skeleton } from './skeleton.js';\n\nexport type ToolbarTextSize = 'xlarge' | 'large' | 'default' | 'small';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n  /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n  id?: string;\n  /**\n   * Expose heading semantics (`role=\"heading\"` + `aria-level`) so the text acts as\n   * a heading landmark — e.g. a page's primary title. Omit to keep the plain span\n   * (the default), which suits a dialog title referenced via `aria-labelledby`.\n   */\n  headingLevel?: HeadingLevel;\n  /** Render the text as an unanimated loading skeleton instead of its value. */\n  placeholder?: boolean;\n  /**\n   * Wrap onto multiple lines when the text does not fit, instead of the default\n   * single line. Combine with `maxLines` to cap the number of lines. Default false.\n   */\n  wrap?: boolean;\n  /**\n   * Show a trailing ellipsis (…) where the text is truncated — on the single line\n   * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n   * instead. Default true.\n   */\n  ellipsis?: boolean;\n  /**\n   * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n   * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n   */\n  maxLines?: number | null;\n}\n\nexport function ToolbarText({\n  text,\n  size = 'default',\n  className = '',\n  id,\n  headingLevel,\n  placeholder = false,\n  wrap = false,\n  ellipsis = true,\n  maxLines = null,\n}: ToolbarTextProps) {\n  const capped = wrap && maxLines != null && maxLines > 0;\n  return (\n    <span\n      class={`kui-toolbar-text ${className}`.trim()}\n      data-component=\"toolbar-text\"\n      data-size={size}\n      data-wrap={wrap ? 'true' : undefined}\n      data-ellipsis={ellipsis ? undefined : 'false'}\n      data-max-lines={capped ? String(maxLines) : undefined}\n      style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      id={id}\n      role={headingLevel ? 'heading' : undefined}\n      aria-level={headingLevel ? String(headingLevel) : undefined}\n      aria-busy={placeholder ? 'true' : undefined}\n    >\n      {placeholder ? (\n        <Skeleton width=\"8em\" />\n      ) : (\n        <span class=\"kui-toolbar-text__text\">{text}</span>\n      )}\n    </span>\n  );\n}\n"]}

package/dist/{chunk-7BR3DO2A.js → chunk-SRSJO5QE.js}

@@ -1,7 +1,14 @@
 // src/extension-attributes.ts
 var DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;
 var POPOVER_TARGET_ACTIONS = /* @__PURE__ */ new Set(["toggle", "show", "hide"]);
-var ARIA_HASPOPUP_VALUES = /* @__PURE__ */ new Set(["dialog", "menu", "listbox", "tree", "grid", "true"]);
+var ARIA_HASPOPUP_VALUES = /* @__PURE__ */ new Set([
+  "dialog",
+  "menu",
+  "listbox",
+  "tree",
+  "grid",
+  "true"
+]);
 function filterDataAttributes(attributes, protectedNames) {
   const filtered = {};
   for (const [name, value] of Object.entries(attributes)) {
@@ -15,11 +22,13 @@ function filterDataAttributes(attributes, protectedNames) {
 function filterControlAttributes(attributes, protectedDataNames) {
   const source = attributes;
   const filtered = filterDataAttributes(attributes, protectedDataNames);
-  if (typeof source.popoverTarget === "string") filtered.popoverTarget = source.popoverTarget;
+  if (typeof source.popoverTarget === "string")
+    filtered.popoverTarget = source.popoverTarget;
   if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction)) {
     filtered.popoverTargetAction = source.popoverTargetAction;
   }
-  if (typeof source["aria-controls"] === "string") filtered["aria-controls"] = source["aria-controls"];
+  if (typeof source["aria-controls"] === "string")
+    filtered["aria-controls"] = source["aria-controls"];
   if (ARIA_HASPOPUP_VALUES.has(source["aria-haspopup"])) {
     filtered["aria-haspopup"] = source["aria-haspopup"];
   }
@@ -28,4 +37,4 @@ function filterControlAttributes(attributes, protectedDataNames) {
 
 export { filterControlAttributes, filterDataAttributes };
 
-//# sourceMappingURL=chunk-7BR3DO2A.js.map
+//# sourceMappingURL=chunk-SRSJO5QE.js.map

package/dist/chunk-SRSJO5QE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/extension-attributes.ts"],"names":[],"mappings":";AAEA,IAAM,mBAAA,GAAsB,sBAAA;AAC5B,IAAM,yCAAyB,IAAI,GAAA,CAAI,CAAC,QAAA,EAAU,MAAA,EAAQ,MAAM,CAAC,CAAA;AACjE,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAC,CAAA;AAEM,SAAS,oBAAA,CACd,YACA,cAAA,EACwB;AACxB,EAAA,MAAM,WAAmC,EAAC;AAE1C,EAAA,KAAA,MAAW,CAAC,IAAA,EAAM,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,UAA0B,CAAA,EAAG;AACtE,IAAA,MAAM,cAAA,GAAiB,KAAK,WAAA,EAAY;AACxC,IAAA,IACE,OAAO,KAAA,KAAU,QAAA,IACjB,mBAAA,CAAoB,IAAA,CAAK,cAAc,CAAA,IACvC,CAAC,cAAA,CAAe,GAAA,CAAI,cAAc,CAAA,EAClC;AACA,MAAA,QAAA,CAAS,cAAc,CAAA,GAAI,KAAA;AAAA,IAC7B;AAAA,EACF;AAEA,EAAA,OAAO,QAAA;AACT;AAEO,SAAS,uBAAA,CACd,YACA,kBAAA,EACwB;AACxB,EAAA,MAAM,MAAA,GAAS,UAAA;AACf,EAAA,MAAM,QAAA,GAAW,oBAAA,CAAqB,UAAA,EAAY,kBAAkB,CAAA;AAEpE,EAAA,IAAI,OAAO,OAAO,aAAA,KAAkB,QAAA;AAClC,IAAA,QAAA,CAAS,gBAAgB,MAAA,CAAO,aAAA;AAClC,EAAA,IAAI,sBAAA,CAAuB,GAAA,CAAI,MAAA,CAAO,mBAA6B,CAAA,EAAG;AACpE,IAAA,QAAA,CAAS,sBAAsB,MAAA,CAAO,mBAAA;AAAA,EACxC;AACA,EAAA,IAAI,OAAO,MAAA,CAAO,eAAe,CAAA,KAAM,QAAA;AACrC,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AACpD,EAAA,IAAI,oBAAA,CAAqB,GAAA,CAAI,MAAA,CAAO,eAAe,CAAW,CAAA,EAAG;AAC/D,IAAA,QAAA,CAAS,eAAe,CAAA,GAAI,MAAA,CAAO,eAAe,CAAA;AAAA,EACpD;AAEA,EAAA,OAAO,QAAA;AACT","file":"chunk-SRSJO5QE.js","sourcesContent":["type AttributeBag = Readonly<Record<string, unknown>>;\n\nconst DATA_ATTRIBUTE_NAME = /^data-[a-z0-9_.:-]+$/;\nconst POPOVER_TARGET_ACTIONS = new Set(['toggle', 'show', 'hide']);\nconst ARIA_HASPOPUP_VALUES = new Set([\n  'dialog',\n  'menu',\n  'listbox',\n  'tree',\n  'grid',\n  'true',\n]);\n\nexport function filterDataAttributes(\n  attributes: object,\n  protectedNames: ReadonlySet<string>,\n): Record<string, string> {\n  const filtered: Record<string, string> = {};\n\n  for (const [name, value] of Object.entries(attributes as AttributeBag)) {\n    const normalizedName = name.toLowerCase();\n    if (\n      typeof value === 'string' &&\n      DATA_ATTRIBUTE_NAME.test(normalizedName) &&\n      !protectedNames.has(normalizedName)\n    ) {\n      filtered[normalizedName] = value;\n    }\n  }\n\n  return filtered;\n}\n\nexport function filterControlAttributes(\n  attributes: object,\n  protectedDataNames: ReadonlySet<string>,\n): Record<string, string> {\n  const source = attributes as AttributeBag;\n  const filtered = filterDataAttributes(attributes, protectedDataNames);\n\n  if (typeof source.popoverTarget === 'string')\n    filtered.popoverTarget = source.popoverTarget;\n  if (POPOVER_TARGET_ACTIONS.has(source.popoverTargetAction as string)) {\n    filtered.popoverTargetAction = source.popoverTargetAction as string;\n  }\n  if (typeof source['aria-controls'] === 'string')\n    filtered['aria-controls'] = source['aria-controls'];\n  if (ARIA_HASPOPUP_VALUES.has(source['aria-haspopup'] as string)) {\n    filtered['aria-haspopup'] = source['aria-haspopup'] as string;\n  }\n\n  return filtered;\n}\n"]}

package/dist/chunk-U5IFGQCD.js

@@ -0,0 +1,117 @@
+import { Skeleton } from './chunk-PZQVSDLH.js';
+import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { ChevronDown } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+function Select({
+  name,
+  value,
+  label,
+  ariaLabel,
+  choices,
+  className = "",
+  placeholderText,
+  disabled = false,
+  fitMenu = false,
+  renderSelected,
+  placeholder = false
+}) {
+  if (placeholder) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: `kui-select kui-select--placeholder ${className}`.trim(),
+        "data-component": "select",
+        "data-placeholder": "true",
+        "aria-busy": "true",
+        children: [
+          label && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-label", children: label }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              class: "kui-select__placeholder-box",
+              "aria-label": ariaLabel,
+              role: "img",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: "10em" }),
+                /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down" }) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  const selected = choices.find((choice) => choice.value === value);
+  const icon = (choice, selectedIcon = false) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-key": `${name}:${choice.value}:${selectedIcon ? "selected" : "option"}`,
+      "data-morph-skip": true,
+      slot: "start",
+      class: `kui-select__icon${selectedIcon ? " kui-select__icon--selected" : ""}`,
+      style: choice.color ? `color:${choice.color}` : void 0,
+      children: choice.icon ? /* @__PURE__ */ jsx(
+        LucideIcon,
+        {
+          icon: choice.icon,
+          name: choice.iconName ?? choice.label.toLowerCase().replaceAll(" ", "-")
+        }
+      ) : null
+    }
+  );
+  const option = (choice) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    choice.separatorBefore && /* @__PURE__ */ jsx("wa-divider", {}),
+    /* @__PURE__ */ jsxs("wa-option", { value: choice.value, children: [
+      choice.icon ? icon(choice) : null,
+      choice.label
+    ] })
+  ] });
+  const groups = [
+    ...new Set(
+      choices.map((choice) => choice.group).filter((group) => Boolean(group))
+    )
+  ];
+  const ungrouped = choices.filter((choice) => !choice.group);
+  return /* @__PURE__ */ jsxs(
+    "wa-select",
+    {
+      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
+      "data-component": "select",
+      name,
+      label,
+      "aria-label": ariaLabel,
+      value,
+      placeholder: placeholderText,
+      disabled,
+      children: [
+        selected && (renderSelected ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-key": `${name}:${value}:custom-selected`,
+            slot: "start",
+            class: "kui-select__custom-selected",
+            children: renderSelected(selected)
+          }
+        ) : selected.icon ? icon(selected, true) : null),
+        ungrouped.map(option),
+        groups.map((group, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: `kui-select__group${index > 0 || ungrouped.length > 0 ? " kui-select__group--separated" : ""}`,
+            role: "group",
+            "aria-label": group,
+            children: [
+              /* @__PURE__ */ jsx("span", { class: "kui-select__group-title", children: group }),
+              choices.filter((choice) => choice.group === group).map(option)
+            ]
+          }
+        ))
+      ]
+    }
+  );
+}
+
+export { Select };
+
+//# sourceMappingURL=chunk-U5IFGQCD.js.map

package/dist/chunk-U5IFGQCD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-U5IFGQCD.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  color?: string;\n  group?: string;\n  separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n  name: string;\n  value: Value;\n  label?: string;\n  ariaLabel?: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control (the native select placeholder). */\n  placeholderText?: string;\n  disabled?: boolean;\n  fitMenu?: boolean;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n}\n\nexport function Select<Value extends string>({\n  name,\n  value,\n  label,\n  ariaLabel,\n  choices,\n  className = '',\n  placeholderText,\n  disabled = false,\n  fitMenu = false,\n  renderSelected,\n  placeholder = false,\n}: SelectProps<Value>) {\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        data-component=\"select\"\n        data-placeholder=\"true\"\n        aria-busy=\"true\"\n      >\n        {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width=\"10em\" />\n          <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n            <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n          </span>\n        </span>\n      </div>\n    );\n  }\n  const selected = choices.find((choice) => choice.value === value);\n  const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n    <span\n      data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n      data-morph-skip\n      slot=\"start\"\n      class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n    >\n      {choice.icon ? (\n        <LucideIcon\n          icon={choice.icon}\n          name={\n            choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n          }\n        />\n      ) : null}\n    </span>\n  );\n  const option = (choice: SelectChoice<Value>) => (\n    <>\n      {choice.separatorBefore && <wa-divider></wa-divider>}\n      <wa-option value={choice.value}>\n        {choice.icon ? icon(choice) : null}\n        {choice.label}\n      </wa-option>\n    </>\n  );\n  const groups = [\n    ...new Set(\n      choices\n        .map((choice) => choice.group)\n        .filter((group): group is string => Boolean(group)),\n    ),\n  ];\n  const ungrouped = choices.filter((choice) => !choice.group);\n  return (\n    <wa-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()}\n      data-component=\"select\"\n      name={name}\n      label={label}\n      aria-label={ariaLabel}\n      value={value}\n      placeholder={placeholderText}\n      disabled={disabled}\n    >\n      {selected &&\n        (renderSelected ? (\n          <span\n            data-key={`${name}:${value}:custom-selected`}\n            slot=\"start\"\n            class=\"kui-select__custom-selected\"\n          >\n            {renderSelected(selected)}\n          </span>\n        ) : selected.icon ? (\n          icon(selected, true)\n        ) : null)}\n      {ungrouped.map(option)}\n      {groups.map((group, index) => (\n        <div\n          class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n          role=\"group\"\n          aria-label={group}\n        >\n          <span class=\"kui-select__group-title\">{group}</span>\n          {choices.filter((choice) => choice.group === group).map(option)}\n        </div>\n      ))}\n    </wa-select>\n  );\n}\n"]}

package/dist/{chunk-56RJXPHG.js → chunk-Y6LYKFXY.js}

@@ -40,4 +40,4 @@ function DisclosureArrow({
 
 export { DisclosureArrow };
 
-//# sourceMappingURL=chunk-56RJXPHG.js.map
+//# sourceMappingURL=chunk-Y6LYKFXY.js.map

package/dist/{chunk-56RJXPHG.js.map → chunk-Y6LYKFXY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAiB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAM,GAAA;AACpE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBAAO,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,CAAA;AAAA,MACnD,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAAG;AACpE","file":"chunk-56RJXPHG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  className?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = (openRotation - closedRotation + 540) % 360 - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  className = '',\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return <span\n    class={`kui-disclosure-arrow ${className}`.trim()}\n    style={`--_kui-disclosure-arrow-rotation:${rotation}deg`}\n    data-component=\"disclosure-arrow\"\n    data-open={String(open)}\n    data-direction={direction}\n    aria-hidden=\"true\"\n  >{icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}</span>;\n}\n"]}
+{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,CAAA;AAAA,MACnD,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MAEX,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-Y6LYKFXY.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n  open: boolean;\n  openDirection?: DisclosureDirection;\n  closedDirection?: DisclosureDirection;\n  /** Replacement icons should use right as their unrotated orientation. */\n  icon?: SafeHtml;\n  className?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n  right: 0,\n  down: 90,\n  left: 180,\n  up: 270,\n};\n\nfunction rotationForState(\n  open: boolean,\n  openDirection: DisclosureDirection,\n  closedDirection: DisclosureDirection,\n) {\n  const closedRotation = directionRotations[closedDirection];\n  if (!open) return closedRotation;\n\n  const openRotation = directionRotations[openDirection];\n  const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n  return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n  open,\n  openDirection = 'down',\n  closedDirection = 'right',\n  icon,\n  className = '',\n}: DisclosureArrowProps) {\n  const direction = open ? openDirection : closedDirection;\n  const rotation = rotationForState(open, openDirection, closedDirection);\n  return (\n    <span\n      class={`kui-disclosure-arrow ${className}`.trim()}\n      style={`--_kui-disclosure-arrow-rotation:${rotation}deg`}\n      data-component=\"disclosure-arrow\"\n      data-open={String(open)}\n      data-direction={direction}\n      aria-hidden=\"true\"\n    >\n      {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n    </span>\n  );\n}\n"]}

package/dist/chunk-ZK2G3VR5.js

@@ -0,0 +1,35 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/toolbar-control-group.tsx
+function ToolbarControlGroup({
+  children,
+  label,
+  className = "",
+  expanded = false,
+  single = false,
+  appearance = "contained",
+  tone = "default",
+  buttonAppearance = "plain",
+  shape = "pill"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: `kui-toolbar-control-group ${className}`.trim(),
+      "data-component": "toolbar-control-group",
+      role: label ? "group" : void 0,
+      "aria-label": label,
+      "data-appearance": appearance,
+      "data-tone": tone,
+      "data-button-appearance": buttonAppearance,
+      "data-expanded": String(expanded),
+      "data-single": String(single),
+      "data-shape": shape,
+      children
+    }
+  );
+}
+
+export { ToolbarControlGroup };
+
+//# sourceMappingURL=chunk-ZK2G3VR5.js.map

package/dist/chunk-ZK2G3VR5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar-control-group.tsx"],"names":[],"mappings":";;;AAeO,SAAS,mBAAA,CAAoB;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,WAAA;AAAA,EACb,IAAA,GAAO,SAAA;AAAA,EACP,gBAAA,GAAmB,OAAA;AAAA,EACnB,KAAA,GAAQ;AACV,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,0BAAA,EAA6B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACrD,gBAAA,EAAe,uBAAA;AAAA,MACf,IAAA,EAAM,QAAQ,OAAA,GAAU,MAAA;AAAA,MACxB,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,WAAA,EAAW,IAAA;AAAA,MACX,wBAAA,EAAwB,gBAAA;AAAA,MACxB,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,MAC9B,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,MAC1B,YAAA,EAAY,KAAA;AAAA,MAEX;AAAA;AAAA,GACH;AAEJ","file":"chunk-ZK2G3VR5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarControlGroupProps {\n  children: SafeHtml | SafeHtml[];\n  label?: string;\n  className?: string;\n  expanded?: boolean;\n  single?: boolean;\n  appearance?: 'contained' | 'borderless';\n  tone?: 'default' | 'dark';\n  buttonAppearance?: 'plain' | 'push';\n  /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */\n  shape?: 'pill' | 'rounded';\n}\n\nexport function ToolbarControlGroup({\n  children,\n  label,\n  className = '',\n  expanded = false,\n  single = false,\n  appearance = 'contained',\n  tone = 'default',\n  buttonAppearance = 'plain',\n  shape = 'pill',\n}: ToolbarControlGroupProps) {\n  return (\n    <div\n      class={`kui-toolbar-control-group ${className}`.trim()}\n      data-component=\"toolbar-control-group\"\n      role={label ? 'group' : undefined}\n      aria-label={label}\n      data-appearance={appearance}\n      data-tone={tone}\n      data-button-appearance={buttonAppearance}\n      data-expanded={String(expanded)}\n      data-single={String(single)}\n      data-shape={shape}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/chunk-ZVI5YST2.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/tab-bar.tsx
+function TabBar({
+  id,
+  label,
+  children,
+  leading,
+  trailing,
+  className = "",
+  activation
+}) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      class: `kui-tab-bar ${className}`.trim(),
+      "data-component": "tab-bar",
+      "data-tab-bar-id": id,
+      "data-tab-activation": activation,
+      "aria-label": label,
+      children: [
+        leading && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__leading", children: leading }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-tab-bar__tabs",
+            role: "tablist",
+            "aria-label": label,
+            "data-kui-tab-list": true,
+            children
+          }
+        ),
+        trailing && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__trailing", children: trailing })
+      ]
+    }
+  );
+}
+
+export { TabBar };
+
+//# sourceMappingURL=chunk-ZVI5YST2.js.map

package/dist/chunk-ZVI5YST2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-bar.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,MAAA,CAAO;AAAA,EACrB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgB;AACd,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAA,EAAiB,EAAA;AAAA,MACjB,qBAAA,EAAqB,UAAA;AAAA,MACrB,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBACvD,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,mBAAA;AAAA,YACN,IAAA,EAAK,SAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YACZ,mBAAA,EAAiB,IAAA;AAAA,YAEhB;AAAA;AAAA,SACH;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC5D;AAEJ","file":"chunk-ZVI5YST2.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabBarProps {\n  id: string;\n  label: string;\n  children: SafeHtml | readonly SafeHtml[];\n  leading?: SafeHtml;\n  trailing?: SafeHtml;\n  className?: string;\n  /**\n   * Keyboard activation mode for this strip, emitted as `data-tab-activation` for\n   * `wireTabBars` to read (overrides its `activation` option). `'automatic'` (default)\n   * selects on arrow / Home / End; `'manual'` moves roving focus only and the user\n   * selects with Enter / Space / click — use it when selecting a tab is a heavy action.\n   */\n  activation?: 'automatic' | 'manual';\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({\n  id,\n  label,\n  children,\n  leading,\n  trailing,\n  className = '',\n  activation,\n}: TabBarProps) {\n  return (\n    <nav\n      class={`kui-tab-bar ${className}`.trim()}\n      data-component=\"tab-bar\"\n      data-tab-bar-id={id}\n      data-tab-activation={activation}\n      aria-label={label}\n    >\n      {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n      <div\n        class=\"kui-tab-bar__tabs\"\n        role=\"tablist\"\n        aria-label={label}\n        data-kui-tab-list\n      >\n        {children}\n      </div>\n      {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n    </nav>\n  );\n}\n"]}