@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.105

package/dist/{chunk-HLDRH23D.js → chunk-WJKHLOP5.js}

@@ -1,5 +1,5 @@
-import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { LoadingSpinner } from './chunk-WVS6CUCT.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { filterDataAttributes } from './chunk-KH4KEMSP.js';
 import { ChevronDown } from 'lucide';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
@@ -81,4 +81,4 @@ function SplitButton({
 
 export { SplitButton };
 
-//# sourceMappingURL=chunk-HLDRH23D.js.map
+//# sourceMappingURL=chunk-WJKHLOP5.js.map

package/dist/{chunk-HLDRH23D.js.map → chunk-WJKHLOP5.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/actions/split-button/split-button.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAC,CAAA;AAwDM,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA,GAAkB,KAAA;AAAA,EAClB,YAAA,GAAe,MAAA;AAAA,EACf,eAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,eAAA,GAAkB,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,OAAA,GAAU,IAAA,mBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA,GAAK,IAAA;AAC5C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,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,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,IAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAY,eAAA;AAAA,YACZ,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,YAC3B,KAAA;AAAA,YACA,QAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,OAAA,wBACE,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAAyB,aAAA,EAAY,QAC9C,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,SAC/C;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,aAAA;AAAA,YACb,YAAA,EAAY,YAAA;AAAA,YACZ,eAAA,EAAe,YAAA;AAAA,YACf,eAAA,EAAe,kBAAkB,MAAA,GAAS,OAAA;AAAA,YAC1C,eAAA,EAAe,eAAA;AAAA,YACf,KAAA,EAAO,YAAA;AAAA,YACP,QAAA,EAAU,eAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAA,EAAa,MAAK,cAAA,EAAe;AAAA;AAAA;AACrD;AAAA;AAAA,GACF;AAEJ","file":"chunk-HLDRH23D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** The loud fill the whole split button paints. */\nexport type SplitButtonTone =\n  'brand' | 'neutral' | 'success' | 'warning' | 'danger';\n\nconst splitButtonProtected = new Set([\n  'data-component',\n  'data-tone',\n  'data-fill',\n  'data-busy',\n]);\n\ntype SplitButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-tone'?: never;\n    'data-fill'?: never;\n    'data-busy'?: never;\n  }\n>;\n\nexport interface SplitButtonProps {\n  /** Visible primary label. */\n  label: string;\n  /** Delegated `data-action` of the primary half. */\n  action: string;\n  /** Optional decorative leading icon of the primary half. */\n  icon?: SafeHtml;\n  /** Primary accessible name when it should say more than `label`. */\n  accessibleLabel?: string;\n  /** Accessible name (and tooltip) of the options trigger. */\n  optionsLabel: string;\n  /** Delegated `data-action` of the options trigger, which opens the app's menu. */\n  optionsAction: string;\n  /** Whether the options menu is open, exposed as `aria-expanded`. */\n  optionsExpanded?: boolean;\n  /** What the options trigger opens, exposed as `aria-haspopup`; defaults to `menu`. */\n  optionsPopup?: 'menu' | 'dialog' | 'listbox';\n  /** Element id the options trigger controls, exposed as `aria-controls`. */\n  optionsControls?: string;\n  /** The loud fill; defaults to `brand`. Switch it (for example to `neutral`) while running. */\n  tone?: SplitButtonTone;\n  /** Span the full width of the parent instead of sizing to the label. */\n  fill?: boolean;\n  /** Show work in progress: a spinner replaces the icon and the primary is `aria-busy`. */\n  busy?: boolean;\n  /** Disable the primary half. */\n  disabled?: boolean;\n  /** Disable the options trigger. */\n  optionsDisabled?: boolean;\n  /** Native tooltip of the primary half, for example why it is disabled. */\n  title?: string;\n  className?: string;\n  /** Safe `data-*` metadata; SplitButton-owned markers stay protected. */\n  rootAttributes?: SplitButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A primary action with an attached options trigger on one loud, semantic\n * fill (a \"Drive\" button with a provider menu). Both halves are native\n * buttons, so `aria-expanded` and the accessible names reach assistive\n * technology directly; the application opens its own menu from the options\n * action and owns the running state.\n */\nexport function SplitButton({\n  label,\n  action,\n  icon,\n  accessibleLabel,\n  optionsLabel,\n  optionsAction,\n  optionsExpanded = false,\n  optionsPopup = 'menu',\n  optionsControls,\n  tone = 'brand',\n  fill = false,\n  busy = false,\n  disabled = false,\n  optionsDisabled = false,\n  title,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: SplitButtonProps) {\n  const leading = busy ? <LoadingSpinner /> : icon;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, splitButtonProtected)}\n      class={`kui-split-button ${className}`.trim()}\n      data-component=\"split-button\"\n      data-tone={tone}\n      data-fill={fill ? 'true' : undefined}\n      data-busy={busy ? 'true' : undefined}\n      role=\"group\"\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-split-button__primary\"\n        data-action={action}\n        aria-label={accessibleLabel}\n        aria-busy={busy ? 'true' : undefined}\n        title={title}\n        disabled={disabled}\n      >\n        {leading && (\n          <span class=\"kui-split-button__icon\" aria-hidden=\"true\">\n            {leading}\n          </span>\n        )}\n        <span class=\"kui-split-button__label\">{label}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"kui-split-button__options\"\n        data-action={optionsAction}\n        aria-label={optionsLabel}\n        aria-haspopup={optionsPopup}\n        aria-expanded={optionsExpanded ? 'true' : 'false'}\n        aria-controls={optionsControls}\n        title={optionsLabel}\n        disabled={optionsDisabled}\n      >\n        <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n      </button>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/actions/split-button/split-button.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAC,CAAA;AAwDM,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA,GAAkB,KAAA;AAAA,EAClB,YAAA,GAAe,MAAA;AAAA,EACf,eAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,eAAA,GAAkB,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,OAAA,GAAU,IAAA,mBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA,GAAK,IAAA;AAC5C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,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,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,IAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAY,eAAA;AAAA,YACZ,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,YAC3B,KAAA;AAAA,YACA,QAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,OAAA,wBACE,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAAyB,aAAA,EAAY,QAC9C,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,SAC/C;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,aAAA;AAAA,YACb,YAAA,EAAY,YAAA;AAAA,YACZ,eAAA,EAAe,YAAA;AAAA,YACf,eAAA,EAAe,kBAAkB,MAAA,GAAS,OAAA;AAAA,YAC1C,eAAA,EAAe,eAAA;AAAA,YACf,KAAA,EAAO,YAAA;AAAA,YACP,QAAA,EAAU,eAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAA,EAAa,MAAK,cAAA,EAAe;AAAA;AAAA;AACrD;AAAA;AAAA,GACF;AAEJ","file":"chunk-WJKHLOP5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** The loud fill the whole split button paints. */\nexport type SplitButtonTone =\n  'brand' | 'neutral' | 'success' | 'warning' | 'danger';\n\nconst splitButtonProtected = new Set([\n  'data-component',\n  'data-tone',\n  'data-fill',\n  'data-busy',\n]);\n\ntype SplitButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-tone'?: never;\n    'data-fill'?: never;\n    'data-busy'?: never;\n  }\n>;\n\nexport interface SplitButtonProps {\n  /** Visible primary label. */\n  label: string;\n  /** Delegated `data-action` of the primary half. */\n  action: string;\n  /** Optional decorative leading icon of the primary half. */\n  icon?: SafeHtml;\n  /** Primary accessible name when it should say more than `label`. */\n  accessibleLabel?: string;\n  /** Accessible name (and tooltip) of the options trigger. */\n  optionsLabel: string;\n  /** Delegated `data-action` of the options trigger, which opens the app's menu. */\n  optionsAction: string;\n  /** Whether the options menu is open, exposed as `aria-expanded`. */\n  optionsExpanded?: boolean;\n  /** What the options trigger opens, exposed as `aria-haspopup`; defaults to `menu`. */\n  optionsPopup?: 'menu' | 'dialog' | 'listbox';\n  /** Element id the options trigger controls, exposed as `aria-controls`. */\n  optionsControls?: string;\n  /** The loud fill; defaults to `brand`. Switch it (for example to `neutral`) while running. */\n  tone?: SplitButtonTone;\n  /** Span the full width of the parent instead of sizing to the label. */\n  fill?: boolean;\n  /** Show work in progress: a spinner replaces the icon and the primary is `aria-busy`. */\n  busy?: boolean;\n  /** Disable the primary half. */\n  disabled?: boolean;\n  /** Disable the options trigger. */\n  optionsDisabled?: boolean;\n  /** Native tooltip of the primary half, for example why it is disabled. */\n  title?: string;\n  className?: string;\n  /** Safe `data-*` metadata; SplitButton-owned markers stay protected. */\n  rootAttributes?: SplitButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A primary action with an attached options trigger on one loud, semantic\n * fill (a \"Drive\" button with a provider menu). Both halves are native\n * buttons, so `aria-expanded` and the accessible names reach assistive\n * technology directly; the application opens its own menu from the options\n * action and owns the running state.\n */\nexport function SplitButton({\n  label,\n  action,\n  icon,\n  accessibleLabel,\n  optionsLabel,\n  optionsAction,\n  optionsExpanded = false,\n  optionsPopup = 'menu',\n  optionsControls,\n  tone = 'brand',\n  fill = false,\n  busy = false,\n  disabled = false,\n  optionsDisabled = false,\n  title,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: SplitButtonProps) {\n  const leading = busy ? <LoadingSpinner /> : icon;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, splitButtonProtected)}\n      class={`kui-split-button ${className}`.trim()}\n      data-component=\"split-button\"\n      data-tone={tone}\n      data-fill={fill ? 'true' : undefined}\n      data-busy={busy ? 'true' : undefined}\n      role=\"group\"\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-split-button__primary\"\n        data-action={action}\n        aria-label={accessibleLabel}\n        aria-busy={busy ? 'true' : undefined}\n        title={title}\n        disabled={disabled}\n      >\n        {leading && (\n          <span class=\"kui-split-button__icon\" aria-hidden=\"true\">\n            {leading}\n          </span>\n        )}\n        <span class=\"kui-split-button__label\">{label}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"kui-split-button__options\"\n        data-action={optionsAction}\n        aria-label={optionsLabel}\n        aria-haspopup={optionsPopup}\n        aria-expanded={optionsExpanded ? 'true' : 'false'}\n        aria-controls={optionsControls}\n        title={optionsLabel}\n        disabled={optionsDisabled}\n      >\n        <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-WU57BYYM.js

@@ -0,0 +1,115 @@
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { CircleX } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var TEXT_FIELD_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-invalid",
+  "data-multiline"
+]);
+function TextField({
+  label,
+  ariaLabel,
+  value,
+  name,
+  placeholder,
+  hint,
+  error,
+  size = "default",
+  icon,
+  clearable = false,
+  clearLabel = "Clear",
+  maxLength,
+  showCount = false,
+  type = "text",
+  multiline = false,
+  rows = 3,
+  maxRows,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  autocomplete,
+  id,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const description = [hint, error].filter(Boolean).join(" ") || void 0;
+  const shared = {
+    id,
+    name,
+    // A clearable field always has a placeholder, so CSS can hide its clear
+    // button while the field is empty (`:placeholder-shown`); a blank one
+    // shows nothing.
+    placeholder: clearable && !multiline ? placeholder ?? " " : placeholder,
+    disabled,
+    readonly: readOnly,
+    required,
+    autocomplete,
+    maxlength: maxLength,
+    // The label element also wraps the clear button and the count, so the
+    // input takes its name explicitly rather than from the label's text.
+    "aria-label": label ?? ariaLabel,
+    "aria-description": description,
+    "aria-invalid": error ? "true" : void 0
+  };
+  const hintText = hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-text-field__hint", "aria-hidden": "true", children: hint });
+  const count = showCount && maxLength !== void 0 ? `${String((value ?? "").length)} / ${String(maxLength)}` : void 0;
+  const style = [
+    multiline ? `--_kui-text-field-rows:${String(rows)}` : "",
+    multiline && maxRows !== void 0 ? `--_kui-text-field-max-rows:${String(Math.max(rows, maxRows))}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...filterDataAttributes(rootAttributes, TEXT_FIELD_PROTECTED),
+      class: `kui-text-field ${className}`.trim(),
+      "data-component": "text-field",
+      "data-size": size,
+      "data-invalid": error ? "" : void 0,
+      "data-multiline": multiline ? maxRows === void 0 ? "" : "grow" : void 0,
+      style: style || void 0,
+      slot,
+      children: [
+        label === void 0 ? null : /* @__PURE__ */ jsxs("span", { class: "kui-text-field__label", "aria-hidden": "true", children: [
+          label,
+          required ? /* @__PURE__ */ jsx("span", { class: "kui-text-field__required", "aria-hidden": "true", children: "*" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("span", { class: "kui-text-field__box", children: [
+          icon === void 0 || multiline ? null : /* @__PURE__ */ jsx("span", { class: "kui-text-field__icon", "aria-hidden": "true", children: icon }),
+          multiline ? /* @__PURE__ */ jsx("textarea", { ...shared, class: "kui-text-field__input", rows, children: value ?? "" }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...shared,
+              class: "kui-text-field__input",
+              type,
+              value
+            }
+          ),
+          clearable && !multiline ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              class: "kui-text-field__clear",
+              "aria-label": clearLabel,
+              "data-text-field-clear": "",
+              disabled: disabled || readOnly,
+              children: /* @__PURE__ */ jsx(LucideIcon, { icon: CircleX, name: "circle-x" })
+            }
+          ) : null
+        ] }),
+        count === void 0 ? hintText : /* @__PURE__ */ jsxs("span", { class: "kui-text-field__footer", children: [
+          hintText,
+          /* @__PURE__ */ jsx("span", { class: "kui-text-field__count", "data-text-field-count": "", children: count })
+        ] }),
+        error === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-text-field__error", "aria-hidden": "true", children: error })
+      ]
+    }
+  );
+}
+
+export { TextField };
+
+//# sourceMappingURL=chunk-WU57BYYM.js.map

package/dist/chunk-WU57BYYM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/text-field/text-field.tsx"],"names":[],"mappings":"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","file":"chunk-WU57BYYM.js","sourcesContent":["import { CircleX } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** `default` is the 44px control height; `compact` is 33px with smaller text. */\nexport type TextFieldSize = 'default' | 'compact';\n\n/** The kinds of single-line value a TextField takes. */\nexport type TextFieldType =\n  'text' | 'email' | 'password' | 'search' | 'url' | 'tel' | 'number';\n\nconst TEXT_FIELD_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-invalid',\n  'data-multiline',\n]);\n\n/** Application `data-*` metadata; the TextField's own markers stay protected. */\nexport type TextFieldRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\n/**\n * The field's accessible name: a visible `label`, or `ariaLabel` when the\n * surrounding content already names it.\n */\nexport type TextFieldName =\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string };\n\nexport type TextFieldProps = TextFieldName & TextFieldOptions;\n\nexport interface TextFieldOptions {\n  /** The controlled value. */\n  value?: string;\n  name?: string;\n  placeholder?: string;\n  /** Supporting text below the field, also its accessible description. */\n  hint?: string;\n  /**\n   * A validation message: shown below the field in the danger color, added\n   * to its description, and marking it `aria-invalid`.\n   */\n  error?: string;\n  size?: TextFieldSize;\n  /** A leading decorative icon, such as a `LucideIcon` (single-line only). */\n  icon?: KerfUiContent;\n  /**\n   * A clear button while the field has a value (single-line only). Needs\n   * `wireTextFields(root)`, which clears the field and announces `input`.\n   */\n  clearable?: boolean;\n  /** The clear button's accessible name (default `Clear`). */\n  clearLabel?: string;\n  /** The most characters the field accepts (native `maxlength`). */\n  maxLength?: number;\n  /**\n   * Show a live `count / maxLength` below the field. Needs `maxLength` and\n   * `wireTextFields(root)`, which updates it as people type.\n   */\n  showCount?: boolean;\n  /** Single-line value kind (default `text`). */\n  type?: TextFieldType;\n  /** A multi-line field: a `<textarea>`. */\n  multiline?: boolean;\n  /** A multi-line field's height in lines (default 3). */\n  rows?: number;\n  /**\n   * Grow a multi-line field with its content from `rows` up to this many\n   * lines, then scroll.\n   */\n  maxRows?: number;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  autocomplete?: string;\n  /** The input's id, for an external label or form. */\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`). */\n  rootAttributes?: TextFieldRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A text input with its label above, an optional leading icon and clear\n * button, and supporting or error text below, at the 44px control height or\n * compact. `multiline` makes it a textarea that can grow with its content.\n * The whole field is one `<label>`, so clicking anywhere on it focuses the\n * input; the input is named by `label` (or `ariaLabel`) directly.\n */\nexport function TextField({\n  label,\n  ariaLabel,\n  value,\n  name,\n  placeholder,\n  hint,\n  error,\n  size = 'default',\n  icon,\n  clearable = false,\n  clearLabel = 'Clear',\n  maxLength,\n  showCount = false,\n  type = 'text',\n  multiline = false,\n  rows = 3,\n  maxRows,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  autocomplete,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: TextFieldProps) {\n  const description = [hint, error].filter(Boolean).join(' ') || undefined;\n  const shared = {\n    id,\n    name,\n    // A clearable field always has a placeholder, so CSS can hide its clear\n    // button while the field is empty (`:placeholder-shown`); a blank one\n    // shows nothing.\n    placeholder: clearable && !multiline ? (placeholder ?? ' ') : placeholder,\n    disabled,\n    readonly: readOnly,\n    required,\n    autocomplete,\n    maxlength: maxLength,\n    // The label element also wraps the clear button and the count, so the\n    // input takes its name explicitly rather than from the label's text.\n    'aria-label': label ?? ariaLabel,\n    'aria-description': description,\n    'aria-invalid': error ? 'true' : undefined,\n  } as const;\n  const hintText =\n    hint === undefined ? null : (\n      <span class=\"kui-text-field__hint\" aria-hidden=\"true\">\n        {hint}\n      </span>\n    );\n  const count =\n    showCount && maxLength !== undefined\n      ? `${String((value ?? '').length)} / ${String(maxLength)}`\n      : undefined;\n  const style = [\n    multiline ? `--_kui-text-field-rows:${String(rows)}` : '',\n    multiline && maxRows !== undefined\n      ? `--_kui-text-field-max-rows:${String(Math.max(rows, maxRows))}`\n      : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <label\n      {...filterDataAttributes(rootAttributes, TEXT_FIELD_PROTECTED)}\n      class={`kui-text-field ${className}`.trim()}\n      data-component=\"text-field\"\n      data-size={size}\n      data-invalid={error ? '' : undefined}\n      data-multiline={\n        multiline ? (maxRows === undefined ? '' : 'grow') : undefined\n      }\n      style={style || undefined}\n      slot={slot}\n    >\n      {label === undefined ? null : (\n        <span class=\"kui-text-field__label\" aria-hidden=\"true\">\n          {label}\n          {required ? (\n            <span class=\"kui-text-field__required\" aria-hidden=\"true\">\n              *\n            </span>\n          ) : null}\n        </span>\n      )}\n      <span class=\"kui-text-field__box\">\n        {icon === undefined || multiline ? null : (\n          <span class=\"kui-text-field__icon\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {multiline ? (\n          <textarea {...shared} class=\"kui-text-field__input\" rows={rows}>\n            {value ?? ''}\n          </textarea>\n        ) : (\n          <input\n            {...shared}\n            class=\"kui-text-field__input\"\n            type={type}\n            value={value}\n          />\n        )}\n        {clearable && !multiline ? (\n          <button\n            type=\"button\"\n            class=\"kui-text-field__clear\"\n            aria-label={clearLabel}\n            data-text-field-clear=\"\"\n            disabled={disabled || readOnly}\n          >\n            <LucideIcon icon={CircleX} name=\"circle-x\" />\n          </button>\n        ) : null}\n      </span>\n      {count === undefined ? (\n        hintText\n      ) : (\n        <span class=\"kui-text-field__footer\">\n          {hintText}\n          <span class=\"kui-text-field__count\" data-text-field-count=\"\">\n            {count}\n          </span>\n        </span>\n      )}\n      {error === undefined ? null : (\n        <span class=\"kui-text-field__error\" aria-hidden=\"true\">\n          {error}\n        </span>\n      )}\n    </label>\n  );\n}\n"]}

package/dist/{chunk-TGLUDQP2.js → chunk-ZCDRLN3B.js}

@@ -32,7 +32,7 @@ function CloseIcon() {
     }
   );
 }
-function AppTab({
+function TabBarItem({
   id,
   name,
   selected = false,
@@ -70,8 +70,8 @@ function AppTab({
     "div",
     {
       ...extensionAttributes,
-      class: `kui-app-tab ${className}`.trim(),
-      "data-component": "app-tab",
+      class: `kui-tab-bar-item ${className}`.trim(),
+      "data-component": "tab-bar-item",
       "data-tab-id": id,
       "data-selected": String(selected),
       "data-attention": attention ? "true" : void 0,
@@ -84,7 +84,7 @@ function AppTab({
       "data-pending": named ? "true" : void 0,
       draggable: dormant ? "false" : draggable ? "true" : "false",
       "aria-busy": dormant ? "true" : void 0,
-      style: labelMaxWidth === void 0 ? void 0 : `--kui-app-tab-label-max-width:${labelMaxWidth}px`,
+      style: labelMaxWidth === void 0 ? void 0 : `--kui-tab-bar-item-label-max-width:${labelMaxWidth}px`,
       slot,
       children: [
         closable && /* @__PURE__ */ jsx(
@@ -92,20 +92,20 @@ function AppTab({
           {
             type: "button",
             tabindex: "-1",
-            class: "kui-app-tab__close",
+            class: "kui-tab-bar-item__close",
             "data-action": dormant ? void 0 : closeAction,
             "data-tab-id": id,
             disabled: dormant || void 0,
             "aria-label": `Close ${name}`,
             title: `Close ${name}`,
-            children: /* @__PURE__ */ jsx("span", { class: "kui-app-tab__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) })
+            children: /* @__PURE__ */ jsx("span", { class: "kui-tab-bar-item__close-icon", "aria-hidden": "true", children: closeIcon ?? /* @__PURE__ */ jsx(CloseIcon, {}) })
           }
         ),
         /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            class: "kui-app-tab__select",
+            class: "kui-tab-bar-item__select",
             role: "tab",
             "aria-selected": String(selected),
             "aria-label": presentation === "icon-only" || named ? name : void 0,
@@ -119,12 +119,12 @@ function AppTab({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  class: "kui-app-tab__name",
+                  class: "kui-tab-bar-item__name",
                   "aria-hidden": presentation === "icon-only" ? "true" : void 0,
                   children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(7) }) : name
                 }
               ),
-              closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-app-tab__trailing", children: trailing }) : void 0
+              closable || trailing ? /* @__PURE__ */ jsx("span", { class: "kui-tab-bar-item__trailing", children: trailing }) : void 0
             ]
           }
         )
@@ -133,6 +133,6 @@ function AppTab({
   );
 }
 
-export { AppTab };
+export { TabBarItem };
 
-//# sourceMappingURL=chunk-TGLUDQP2.js.map
+//# sourceMappingURL=chunk-ZCDRLN3B.js.map

package/dist/chunk-ZCDRLN3B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/tab-bar-item/tab-bar-item.tsx"],"names":[],"mappings":"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","file":"chunk-ZCDRLN3B.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-tab-id',\n  'data-selected',\n  'data-tab-dragging',\n  'data-tab-drop-position',\n  'data-attention',\n  'data-drop-target',\n  'data-name-overflow',\n  'data-pinned',\n]);\n\ntype TabBarItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-tab-id'?: never;\n    'data-selected'?: never;\n    'data-tab-dragging'?: never;\n    'data-tab-drop-position'?: never;\n    'data-attention'?: never;\n    'data-drop-target'?: never;\n    'data-name-overflow'?: never;\n    'data-pinned'?: never;\n  }\n>;\n\nexport type TabBarItemPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type TabBarItemSize = 'default' | 'compact';\nexport type TabBarItemNameOverflow = 'ellipsis' | 'visible';\n\nexport interface TabBarItemProps {\n  id: string;\n  name: string;\n  selected?: boolean;\n  /** Emphasize the visible tab name with the attention color token. */\n  attention?: boolean;\n  /** Highlight this tab as the target of a drag over its content. */\n  dropTarget?: boolean;\n  /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n  pinned?: boolean;\n  closable?: boolean;\n  draggable?: boolean;\n  leading?: KerfUiContent;\n  trailing?: KerfUiContent;\n  /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n  presentation?: TabBarItemPresentation;\n  /** Compact tabs use the 32px application-rail height. */\n  size?: TabBarItemSize;\n  /** Maximum visible label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Keep the full name visible for an inline loading treatment. */\n  nameOverflow?: TabBarItemNameOverflow;\n  /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n  closeIcon?: SafeHtml;\n  selectAction?: string;\n  closeAction?: string;\n  className?: string;\n  /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n  placeholder?: boolean;\n  /**\n   * Named and still opening: the tab is known but its content is loading.\n   * Keeps `name` visible in the quiet text color and as the tab's accessible\n   * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n   * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n   * application shows placeholder content in its panel until loading\n   * completes — while close and dragging stay disabled. Same pill geometry\n   * as the live tab, so swapping it in place does not shift the bar.\n   * `placeholder` wins when both are set.\n   */\n  pending?: boolean;\n  rootAttributes?: TabBarItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2.25\"\n      stroke-linecap=\"round\"\n    >\n      <path d=\"m7 7 10 10\" />\n      <path d=\"M17 7 7 17\" />\n    </svg>\n  );\n}\n\nexport function TabBarItem({\n  id,\n  name,\n  selected = false,\n  attention = false,\n  dropTarget = false,\n  pinned = false,\n  closable = true,\n  draggable = false,\n  leading,\n  trailing,\n  presentation = 'pill',\n  size = 'default',\n  labelMaxWidth,\n  nameOverflow = 'ellipsis',\n  closeIcon,\n  selectAction = 'select-tab',\n  closeAction = 'close-tab',\n  className = '',\n  placeholder = false,\n  pending = false,\n  rootAttributes = {},\n  slot,\n}: TabBarItemProps) {\n  // Both loading states disable close and dragging; a `placeholder` (unknown\n  // tab) is also unselectable and hides its name, while a `pending` (known,\n  // still opening) tab stays selectable so its panel can show placeholders.\n  const dormant = placeholder || pending;\n  const named = pending && !placeholder;\n  const keyshortcuts = [\n    closable && !dormant ? 'Delete Backspace' : '',\n    draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  return (\n    <div\n      {...extensionAttributes}\n      class={`kui-tab-bar-item ${className}`.trim()}\n      data-component=\"tab-bar-item\"\n      data-tab-id={id}\n      data-selected={String(selected)}\n      data-attention={attention ? 'true' : undefined}\n      data-drop-target={dropTarget ? 'true' : undefined}\n      data-pinned={pinned ? 'true' : undefined}\n      data-name-overflow={nameOverflow}\n      data-presentation={presentation}\n      data-size={size}\n      data-placeholder={placeholder ? 'true' : undefined}\n      data-pending={named ? 'true' : undefined}\n      draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n      aria-busy={dormant ? 'true' : undefined}\n      style={\n        labelMaxWidth === undefined\n          ? undefined\n          : `--kui-tab-bar-item-label-max-width:${labelMaxWidth}px`\n      }\n      slot={slot}\n    >\n      {closable && (\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"kui-tab-bar-item__close\"\n          data-action={dormant ? undefined : closeAction}\n          data-tab-id={id}\n          disabled={dormant || undefined}\n          aria-label={`Close ${name}`}\n          title={`Close ${name}`}\n        >\n          <span class=\"kui-tab-bar-item__close-icon\" aria-hidden=\"true\">\n            {closeIcon ?? <CloseIcon />}\n          </span>\n        </button>\n      )}\n      <button\n        type=\"button\"\n        class=\"kui-tab-bar-item__select\"\n        role=\"tab\"\n        aria-selected={String(selected)}\n        aria-label={presentation === 'icon-only' || named ? name : undefined}\n        aria-keyshortcuts={keyshortcuts || undefined}\n        data-action={placeholder ? undefined : selectAction}\n        data-tab-id={id}\n        disabled={placeholder || undefined}\n        tabindex={!placeholder && selected ? '0' : '-1'}\n      >\n        {leading}\n        <span\n          class=\"kui-tab-bar-item__name\"\n          aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n        >\n          {placeholder ? <Skeleton width={em(7)} /> : name}\n        </span>\n        {closable || trailing ? (\n          <span class=\"kui-tab-bar-item__trailing\">{trailing}</span>\n        ) : undefined}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/chunk-ZX2QQJXD.js

@@ -0,0 +1,249 @@
+import { summarizeSelection } from './chunk-TUID42UE.js';
+import { PopupCaretGlyph } from './chunk-AYPGXR2E.js';
+import { Skeleton } from './chunk-CVD5IZGB.js';
+import { Badge } from './chunk-RMWNO6BA.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { em } from './chunk-IQSRHXZR.js';
+import { Check } from 'lucide';
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+function ChoiceIcon({
+  choice,
+  icon,
+  selected = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      class: `kui-select__icon${selected ? " kui-select__icon--selected" : ""}`,
+      style: choice.color ? `color:${choice.color}` : void 0,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        LucideIcon,
+        {
+          icon,
+          name: choice.iconName ?? choice.label.toLowerCase().replaceAll(" ", "-")
+        }
+      )
+    }
+  );
+}
+function Caret() {
+  return /* @__PURE__ */ jsx("span", { class: "kui-select__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopupCaretGlyph, {}) });
+}
+function Select(props) {
+  const {
+    name,
+    label,
+    ariaLabel,
+    choices,
+    className = "",
+    placeholderText,
+    hint,
+    disabled = false,
+    fitMenu = false,
+    placeholder = false,
+    presentation = "form",
+    size = "default",
+    triggerWidth,
+    maxTriggerWidth,
+    minTriggerWidth,
+    caret = true,
+    focusRingOwner = "select",
+    focusRingInset = false,
+    labelMaxWidth,
+    slot
+  } = props;
+  const multiple = props.multiple === true;
+  const values = props.multiple ? props.value : [props.value];
+  const renderSelected = props.multiple ? void 0 : props.renderSelected;
+  const selectedPresentation = props.selectedPresentation ?? "label";
+  const iconTrigger = props.multiple && props.selectedPresentation === "icon-only";
+  const accessibleName = label || ariaLabel;
+  const style = [
+    labelMaxWidth === void 0 ? void 0 : `--kui-select-label-max-width:${labelMaxWidth}px`,
+    maxTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-max:${maxTriggerWidth}`,
+    minTriggerWidth === void 0 ? void 0 : `--_kui-select-trigger-min:${minTriggerWidth}`
+  ].filter(Boolean).join(";") || void 0;
+  const rootData = {
+    "data-component": "select",
+    "data-presentation": presentation,
+    "data-size": size,
+    "data-trigger-width": triggerWidth,
+    "data-trigger-max": maxTriggerWidth === void 0 ? void 0 : "",
+    "data-trigger-min": minTriggerWidth === void 0 ? void 0 : "",
+    "data-caret": caret ? void 0 : "false",
+    "data-selected-presentation": selectedPresentation,
+    "data-focus-ring-owner": focusRingOwner,
+    "data-focus-ring-inset": focusRingInset ? "true" : void 0
+  };
+  if (placeholder) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        class: `kui-select kui-select--placeholder ${className}`.trim(),
+        ...rootData,
+        "data-placeholder": "true",
+        "aria-busy": "true",
+        style,
+        slot,
+        children: [
+          label && /* @__PURE__ */ jsx("span", { class: "kui-select__label", children: label }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              class: "kui-select__placeholder-box",
+              "aria-label": ariaLabel,
+              role: "img",
+              children: [
+                /* @__PURE__ */ jsx(Skeleton, { width: em(10) }),
+                caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+              ]
+            }
+          ),
+          hint && /* @__PURE__ */ jsx("span", { class: "kui-select__hint", children: hint })
+        ]
+      }
+    );
+  }
+  const enabledChosen = choices.filter(
+    (choice) => !choice.disabled && values.includes(choice.value)
+  );
+  const selected = multiple ? void 0 : enabledChosen[0];
+  const summary = multiple ? summarizeSelection(enabledChosen.map((choice) => choice.label)) : "";
+  const triggerName = iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;
+  const valueText = multiple ? iconTrigger ? "" : summary : selected?.label ?? "";
+  const option = (choice, index) => {
+    const chosen = !choice.disabled && values.includes(choice.value);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      choice.separatorBefore && index > 0 ? /* @__PURE__ */ jsx("div", { class: "kui-select__separator", role: "separator" }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: "kui-select__option",
+          role: "option",
+          tabindex: -1,
+          "data-value": choice.value,
+          "data-default-selected": chosen ? "" : void 0,
+          "aria-selected": String(chosen),
+          "aria-disabled": choice.disabled ? "true" : void 0,
+          title: choice.disabled ? choice.disabledReason : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { class: "kui-select__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: Check, name: "check" }) }),
+            choice.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice, icon: choice.icon }) : null,
+            /* @__PURE__ */ jsx("span", { class: "kui-select__option-label", children: 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(
+    "kui-select",
+    {
+      class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(),
+      ...rootData,
+      name,
+      value: multiple ? void 0 : selected?.value ?? "",
+      multiple,
+      disabled,
+      style,
+      slot,
+      children: [
+        label ? /* @__PURE__ */ jsx("span", { class: "kui-select__label", "aria-hidden": "true", children: label }) : null,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            class: "kui-select__trigger",
+            role: "combobox",
+            tabindex: 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": "false",
+            "aria-label": triggerName,
+            "aria-description": hint,
+            disabled,
+            children: [
+              iconTrigger ? /* @__PURE__ */ jsx("span", { class: "kui-select__icon kui-select__icon--selected kui-select__trigger-icon", children: props.triggerIcon }) : selected && renderSelected ? /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected", children: /* @__PURE__ */ jsx("span", { class: "kui-select__custom-selected-content", children: renderSelected(selected) }) }) : selected?.icon ? /* @__PURE__ */ jsx(ChoiceIcon, { choice: selected, icon: selected.icon, selected: true }) : null,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  class: "kui-select__value",
+                  "data-placeholder": valueText ? void 0 : "true",
+                  "data-placeholder-text": placeholderText,
+                  children: valueText || placeholderText || ""
+                }
+              ),
+              iconTrigger && enabledChosen.length > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "info", size: "compact", ariaHidden: true, children: enabledChosen.length }) : null,
+              caret ? /* @__PURE__ */ jsx(Caret, {}) : null
+            ]
+          }
+        ),
+        hint ? /* @__PURE__ */ jsx("span", { class: "kui-select__hint", "aria-hidden": "true", children: hint }) : null,
+        /* @__PURE__ */ jsxs("div", { class: "kui-select__popup", popover: "manual", tabindex: -1, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__listbox",
+              role: "listbox",
+              "aria-label": accessibleName,
+              "aria-multiselectable": multiple ? "true" : void 0,
+              children: [
+                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", "aria-hidden": "true", children: group }),
+                      choices.filter((choice) => choice.group === group).map(option)
+                    ]
+                  }
+                ))
+              ]
+            }
+          ),
+          props.multiple && (props.selectAllLabel || props.clearLabel) ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "kui-select__actions",
+              role: "group",
+              "aria-label": accessibleName,
+              children: [
+                props.selectAllLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "all",
+                    children: props.selectAllLabel
+                  }
+                ) : null,
+                props.clearLabel ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    class: "kui-select__action",
+                    type: "button",
+                    "data-select-action": "clear",
+                    children: props.clearLabel
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+
+export { Select };
+
+//# sourceMappingURL=chunk-ZX2QQJXD.js.map

package/dist/chunk-ZX2QQJXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-ZX2QQJXD.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport type { KerfCustomElement } from 'kerfjs/jsx-runtime';\nimport { Check } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { PopupCaretGlyph } from '../../../shared/popup/popup-glyphs.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport {\n  type CssForegroundColor,\n  em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n  LucideIcon,\n  type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\nimport { summarizeSelection } from './model/select-summary.js';\n\ndeclare module 'kerfjs/jsx-runtime' {\n  // Module augmentation requires the namespace form expected by the JSX runtime.\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      /** The Select root: a light-DOM form control defined by `select/register`. */\n      'kui-select': KerfCustomElement & {\n        class?: string;\n        name?: string;\n        value?: string;\n        multiple?: boolean;\n        disabled?: boolean;\n        style?: string;\n        slot?: string;\n      };\n    }\n  }\n}\n\nexport interface SelectChoice<Value extends string = string> {\n  value: Value;\n  label: string;\n  icon?: LucideNode;\n  iconName?: string;\n  /**\n   * Foreground color for the optional icon: a semantic foreground token such\n   * as `uiColor('success-on-quiet')`, or an application-owned\n   * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n   * `uiColor('success-fill-quiet')` are pale background tints and do not\n   * type-check.\n   */\n  color?: CssForegroundColor;\n  group?: string;\n  /** Keep an unavailable choice visible but prevent selection. */\n  disabled?: boolean;\n  /** Optional explanation exposed as the disabled option's native tooltip. */\n  disabledReason?: string;\n  /**\n   * Draw a divider between this choice and the previous choice in the same\n   * list. A group boundary is already a separator, so the first choice of a\n   * group (or of the whole menu) never draws a second one.\n   */\n  separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n  { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n  'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n  name: string;\n  choices: readonly SelectChoice<Value>[];\n  className?: string;\n  /** Empty-value hint text shown in the closed control. */\n  placeholderText?: string;\n  /** Supporting text shown below the control and announced as its description. */\n  hint?: string;\n  disabled?: boolean;\n  /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n  fitMenu?: boolean;\n  /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n  placeholder?: boolean;\n  /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n  presentation?: SelectPresentation;\n  size?: SelectSize;\n  /** Closed trigger width; omit to keep the presentation's default. */\n  triggerWidth?: SelectTriggerWidth;\n  /**\n   * The widest the closed trigger grows, under any presentation; its value\n   * (or `renderSelected` content) ellipsizes inside it and the caret stays.\n   */\n  maxTriggerWidth?: CssLength;\n  /** The narrowest the closed trigger gets. */\n  minTriggerWidth?: CssLength;\n  /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n  caret?: boolean;\n  /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n  focusRingOwner?: SelectFocusRingOwner;\n  /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n  focusRingInset?: boolean;\n  /** Maximum closed-control label width in CSS pixels before ellipsis. */\n  labelMaxWidth?: number;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n  multiple?: false;\n  value: NoInfer<Value>;\n  renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n  /** Show only the selected choice icon while retaining the Select's accessible name. */\n  selectedPresentation?: SelectSelectedPresentation;\n  triggerIcon?: never;\n  selectAllLabel?: never;\n  clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside press, Escape, or Tab; the closed control\n * summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation?: 'label';\n  triggerIcon?: never;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the trigger's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n  multiple: true;\n  value: readonly NoInfer<Value>[];\n  renderSelected?: never;\n  selectedPresentation: 'icon-only';\n  /**\n   * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n   * purpose (a funnel for a filter), independent of the selection.\n   */\n  triggerIcon: KerfUiContent;\n  /** Opt in to a footer action that selects every enabled choice. */\n  selectAllLabel?: string;\n  /** Opt in to a footer action that clears the current selection. */\n  clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n  SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n  SelectBaseProps<Value> &\n    SelectAccessibleName &\n    (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n/**\n * A choice's icon, in the listbox or (`selected`) in the closed trigger.\n * Rendered only for a choice that has one.\n */\nfunction ChoiceIcon<Value extends string>({\n  choice,\n  icon,\n  selected = false,\n}: {\n  choice: SelectChoice<Value>;\n  icon: LucideNode;\n  selected?: boolean;\n}) {\n  return (\n    <span\n      class={`kui-select__icon${selected ? ' kui-select__icon--selected' : ''}`}\n      style={choice.color ? `color:${choice.color}` : undefined}\n      aria-hidden=\"true\"\n    >\n      <LucideIcon\n        icon={icon}\n        name={\n          choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n        }\n      />\n    </span>\n  );\n}\n\nfunction Caret() {\n  return (\n    <span class=\"kui-select__caret\" aria-hidden=\"true\">\n      <PopupCaretGlyph />\n    </span>\n  );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n  const {\n    name,\n    label,\n    ariaLabel,\n    choices,\n    className = '',\n    placeholderText,\n    hint,\n    disabled = false,\n    fitMenu = false,\n    placeholder = false,\n    presentation = 'form',\n    size = 'default',\n    triggerWidth,\n    maxTriggerWidth,\n    minTriggerWidth,\n    caret = true,\n    focusRingOwner = 'select',\n    focusRingInset = false,\n    labelMaxWidth,\n    slot,\n  } = props;\n  const multiple = props.multiple === true;\n  const values: readonly Value[] = props.multiple ? props.value : [props.value];\n  const renderSelected = props.multiple ? undefined : props.renderSelected;\n  const selectedPresentation: SelectSelectedPresentation =\n    props.selectedPresentation ?? 'label';\n  // A multiple icon-only trigger shows a fixed icon naming the menu's\n  // purpose instead of a selected choice's icon.\n  const iconTrigger =\n    props.multiple && props.selectedPresentation === 'icon-only';\n  const accessibleName = label || ariaLabel;\n  const style =\n    [\n      labelMaxWidth === undefined\n        ? undefined\n        : `--kui-select-label-max-width:${labelMaxWidth}px`,\n      maxTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-max:${maxTriggerWidth}`,\n      minTriggerWidth === undefined\n        ? undefined\n        : `--_kui-select-trigger-min:${minTriggerWidth}`,\n    ]\n      .filter(Boolean)\n      .join(';') || undefined;\n  const rootData = {\n    'data-component': 'select',\n    'data-presentation': presentation,\n    'data-size': size,\n    'data-trigger-width': triggerWidth,\n    'data-trigger-max': maxTriggerWidth === undefined ? undefined : '',\n    'data-trigger-min': minTriggerWidth === undefined ? undefined : '',\n    'data-caret': caret ? undefined : 'false',\n    'data-selected-presentation': selectedPresentation,\n    'data-focus-ring-owner': focusRingOwner,\n    'data-focus-ring-inset': focusRingInset ? 'true' : undefined,\n  } as const;\n  if (placeholder) {\n    return (\n      <div\n        class={`kui-select kui-select--placeholder ${className}`.trim()}\n        {...rootData}\n        data-placeholder=\"true\"\n        aria-busy=\"true\"\n        style={style}\n        slot={slot}\n      >\n        {label && <span class=\"kui-select__label\">{label}</span>}\n        <span\n          class=\"kui-select__placeholder-box\"\n          aria-label={ariaLabel}\n          role=\"img\"\n        >\n          <Skeleton width={em(10)} />\n          {caret ? <Caret /> : null}\n        </span>\n        {hint && <span class=\"kui-select__hint\">{hint}</span>}\n      </div>\n    );\n  }\n  const enabledChosen = choices.filter(\n    (choice) => !choice.disabled && values.includes(choice.value),\n  );\n  const selected = multiple ? undefined : enabledChosen[0];\n  // A multiple Select summarizes its chosen labels, in choice order; an\n  // icon-only trigger (whose value text is hidden) ends its name with them.\n  const summary = multiple\n    ? summarizeSelection(enabledChosen.map((choice) => choice.label))\n    : '';\n  const triggerName =\n    iconTrigger && summary ? `${accessibleName}: ${summary}` : accessibleName;\n  const valueText = multiple\n    ? iconTrigger\n      ? ''\n      : summary\n    : (selected?.label ?? '');\n  const option = (choice: SelectChoice<Value>, index: number) => {\n    const chosen = !choice.disabled && values.includes(choice.value);\n    return (\n      <>\n        {choice.separatorBefore && index > 0 ? (\n          <div class=\"kui-select__separator\" role=\"separator\" />\n        ) : null}\n        <div\n          class=\"kui-select__option\"\n          role=\"option\"\n          tabindex={-1}\n          data-value={choice.value}\n          data-default-selected={chosen ? '' : undefined}\n          aria-selected={String(chosen)}\n          aria-disabled={choice.disabled ? 'true' : undefined}\n          title={choice.disabled ? choice.disabledReason : undefined}\n        >\n          <span class=\"kui-select__check\" aria-hidden=\"true\">\n            <LucideIcon icon={Check} name=\"check\" />\n          </span>\n          {choice.icon ? (\n            <ChoiceIcon choice={choice} icon={choice.icon} />\n          ) : null}\n          <span class=\"kui-select__option-label\">{choice.label}</span>\n        </div>\n      </>\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    <kui-select\n      class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()}\n      {...rootData}\n      name={name}\n      value={multiple ? undefined : (selected?.value ?? '')}\n      multiple={multiple}\n      disabled={disabled}\n      style={style}\n      slot={slot}\n    >\n      {label ? (\n        <span class=\"kui-select__label\" aria-hidden=\"true\">\n          {label}\n        </span>\n      ) : null}\n      <button\n        type=\"button\"\n        class=\"kui-select__trigger\"\n        role=\"combobox\"\n        // Safari's default Tab order skips buttons; a select stays in it.\n        tabindex={0}\n        aria-haspopup=\"listbox\"\n        aria-expanded=\"false\"\n        aria-label={triggerName}\n        aria-description={hint}\n        disabled={disabled}\n      >\n        {iconTrigger ? (\n          <span class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\">\n            {props.triggerIcon}\n          </span>\n        ) : selected && renderSelected ? (\n          <span class=\"kui-select__custom-selected\">\n            <span class=\"kui-select__custom-selected-content\">\n              {renderSelected(selected)}\n            </span>\n          </span>\n        ) : selected?.icon ? (\n          <ChoiceIcon choice={selected} icon={selected.icon} selected />\n        ) : null}\n        <span\n          class=\"kui-select__value\"\n          data-placeholder={valueText ? undefined : 'true'}\n          data-placeholder-text={placeholderText}\n        >\n          {valueText || placeholderText || ''}\n        </span>\n        {iconTrigger && enabledChosen.length > 0 ? (\n          <Badge tone=\"info\" size=\"compact\" ariaHidden>\n            {enabledChosen.length}\n          </Badge>\n        ) : null}\n        {caret ? <Caret /> : null}\n      </button>\n      {hint ? (\n        <span class=\"kui-select__hint\" aria-hidden=\"true\">\n          {hint}\n        </span>\n      ) : null}\n      <div class=\"kui-select__popup\" popover=\"manual\" tabindex={-1}>\n        <div\n          class=\"kui-select__listbox\"\n          role=\"listbox\"\n          aria-label={accessibleName}\n          aria-multiselectable={multiple ? 'true' : undefined}\n        >\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\" aria-hidden=\"true\">\n                {group}\n              </span>\n              {choices.filter((choice) => choice.group === group).map(option)}\n            </div>\n          ))}\n        </div>\n        {props.multiple && (props.selectAllLabel || props.clearLabel) ? (\n          <div\n            class=\"kui-select__actions\"\n            role=\"group\"\n            aria-label={accessibleName}\n          >\n            {props.selectAllLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"all\"\n              >\n                {props.selectAllLabel}\n              </button>\n            ) : null}\n            {props.clearLabel ? (\n              <button\n                class=\"kui-select__action\"\n                type=\"button\"\n                data-select-action=\"clear\"\n              >\n                {props.clearLabel}\n              </button>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </kui-select>\n  );\n}\n"]}

package/dist/{chunk-6E2H2E5A.js → chunk-ZXZAECHZ.js}

@@ -1,11 +1,11 @@
 import { ToolbarText } from './chunk-EKHDLBRP.js';
-import { paneConfigProps } from './chunk-LPHU44S3.js';
+import { paneConfigProps } from './chunk-CTQUDCY5.js';
 import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
-import { Toolbar } from './chunk-CMLPFIC5.js';
-import { List } from './chunk-HZPHCSCS.js';
-import { Pane } from './chunk-M5KZ26VV.js';
+import { Pane } from './chunk-HQZG3OFL.js';
 import { surfaceTintAttributes, joinStyles, scrollEdgeAttributes } from './chunk-SQ5DH66U.js';
-import { LucideIcon } from './chunk-LOSRXZAH.js';
+import { List } from './chunk-OY2MXIBB.js';
+import { Toolbar } from './chunk-CMLPFIC5.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
 import { ChevronLeft } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -193,4 +193,4 @@ function NavStack({
 
 export { NavStack };
 
-//# sourceMappingURL=chunk-6E2H2E5A.js.map
+//# sourceMappingURL=chunk-ZXZAECHZ.js.map