@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/dist/chunk-VCBTX62E.js

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

package/dist/chunk-VCBTX62E.js.map

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

package/dist/chunk-VZOFZPSO.js

@@ -0,0 +1,71 @@
+import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
+import { filterDataAttributes } from './chunk-SRSJO5QE.js';
+import { space } from './chunk-2G2ZJQYK.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var rowProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-h-align",
+  "data-v-align",
+  "data-flex",
+  "data-fill",
+  "data-wrap",
+  "data-text-insets",
+  "data-control-insets"
+]);
+var spaceNames = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl"
+];
+function Row({
+  children,
+  hAlign = "left",
+  vAlign = "full",
+  gap = "xs",
+  flex = false,
+  fill = false,
+  wrap = false,
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  const safeRootAttributes = filterDataAttributes(
+    rootAttributes,
+    rowProtectedAttributes
+  );
+  const gapValue = spaceNames.includes(gap) ? space(gap) : gap;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    `--_kui-row-gap:${gapValue}`,
+    flexValue ? `--_kui-row-flex:${flexValue}` : ""
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      class: `kui-row ${className}`.trim(),
+      "data-component": "row",
+      "data-h-align": horizontalAlignment(hAlign),
+      "data-v-align": verticalAlignment(vAlign),
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-wrap": String(wrap),
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style,
+      slot,
+      children
+    }
+  );
+}
+
+export { Row };
+
+//# sourceMappingURL=chunk-VZOFZPSO.js.map

package/dist/chunk-VZOFZPSO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;;AAiBA,IAAM,sBAAA,uBAA6B,GAAA,CAAI;AAAA,EACrC,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAeD,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAgCO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAa;AACX,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-VZOFZPSO.js","sourcesContent":["import {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  space,\n  type UiSpaceName,\n} from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type VerticalAlignment,\n  verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport type { Sides } from './sides.js';\n\nconst rowProtectedAttributes = new Set([\n  'data-component',\n  'data-h-align',\n  'data-v-align',\n  'data-flex',\n  'data-fill',\n  'data-wrap',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype RowRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-wrap'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface RowProps {\n  children?: KerfUiContent;\n  /** Horizontal distribution. Defaults to left. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n  vAlign?: VerticalAlignment;\n  /** A named UI spacing token or typed CSS length. Defaults to xs. */\n  gap?: UiSpaceName | CssLength;\n  /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n  flex?: boolean | CssFlexKeyword | CssFlex;\n  /**\n   * Fill the height of a parent with a definite height, such as an app root or\n   * a fixed-height frame, when this row is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Allow children to wrap onto additional lines. */\n  wrap?: boolean;\n  /** Physical sides that receive the standard 17px text inset. */\n  textInsets?: Sides;\n  /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n  controlInsets?: Sides;\n  className?: string;\n  /** Safe `data-*` metadata; Row-owned structural attributes remain protected. */\n  rootAttributes?: RowRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n  children,\n  hAlign = 'left',\n  vAlign = 'full',\n  gap = 'xs',\n  flex = false,\n  fill = false,\n  wrap = false,\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  rootAttributes = {},\n  slot,\n}: RowProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    rowProtectedAttributes,\n  );\n  const gapValue = spaceNames.includes(gap as UiSpaceName)\n    ? space(gap as UiSpaceName)\n    : gap;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    `--_kui-row-gap:${gapValue}`,\n    flexValue ? `--_kui-row-flex:${flexValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      class={`kui-row ${className}`.trim()}\n      data-component=\"row\"\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-wrap={String(wrap)}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiSpaceName,\n} from './css-values.js';\nexport type {\n  HorizontalAlignment,\n  VerticalAlignment,\n} from './flex-alignment.js';\nexport type { Sides } from './sides.js';\n"]}

package/dist/{chunk-TRNBHPNW.js → chunk-X5QSICJ3.js}

@@ -11,7 +11,9 @@ function SegmentedControl({
   shape = "rounded",
   size = "default",
   layout = "content",
-  className = ""
+  className = "",
+  placeholder = false,
+  slot
 }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -24,23 +26,27 @@ function SegmentedControl({
       "data-shape": shape,
       "data-size": size,
       "data-layout": layout,
+      "data-placeholder": placeholder ? "true" : void 0,
       role: "group",
       "aria-label": label,
+      "aria-busy": placeholder ? "true" : void 0,
+      slot,
       children: choices.map((choice) => {
-        const selected = choice.value === value;
+        const selected = !placeholder && choice.value === value;
         return /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             class: "kui-segmented-control__item",
-            "data-action": action,
+            "data-action": placeholder ? void 0 : action,
             "data-segment-value": choice.value,
             "data-selected": String(selected),
             "aria-label": choice.label,
             "aria-pressed": String(selected),
-            title: choice.title,
-            disabled: choice.disabled,
-            tabindex: "0",
+            title: placeholder ? void 0 : choice.title,
+            disabled: choice.disabled || placeholder,
+            tabindex: placeholder ? "-1" : "0",
+            "data-kui-disabled": choice.disabled ? "true" : void 0,
             children: choice.content ?? /* @__PURE__ */ jsx("span", { children: choice.label })
           }
         );
@@ -51,4 +57,4 @@ function SegmentedControl({
 
 export { SegmentedControl };
 
-//# sourceMappingURL=chunk-TRNBHPNW.js.map
+//# sourceMappingURL=chunk-X5QSICJ3.js.map

package/dist/chunk-X5QSICJ3.js.map

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