@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/{chunk-7KEUJIIC.js → chunk-MF6ZUUJZ.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { LucideIcon } from './chunk-LOSRXZAH.js';
 import { Search, X } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -28,36 +28,58 @@ function TokenSearchField({
   label,
   query = "",
   tokens = [],
+  model,
+  revision,
   placeholder = "Search",
   tokenPlaceholder = "Add search\u2026",
   disabled = false,
   autofocus = false,
+  fill = false,
   collapsible = false,
   expanded = false,
   expandAction = "expand-token-search",
   expandLabel,
   leading,
   trailing,
+  trailingAction,
+  presentation = "standalone",
+  hint,
+  required = false,
   editAction = "edit-search-token",
   removeAction = "remove-search-token",
   clearAction = "clear-token-search",
-  clearLabel = "Clear search",
+  clearLabel = "Clear Search",
+  clearIcon,
   className = "",
-  editorAttributes = {}
+  editorAttributes = {},
+  slot
 }) {
+  if (model) {
+    query = model.state.value.query;
+    tokens = model.state.value.tokens;
+  }
+  const suggestions = model?.suggestions.value ?? [];
   const parts = orderedParts(query, tokens);
-  const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
+  const tokenKey = tokens.map((token) => token.value).join("|");
+  const key = model ? `${id}@${String(revision ?? "")}:${model.editorRevision.value}:${tokenKey}` : revision === void 0 ? `${id}:${tokenKey}` : `${id}@${String(revision)}:${tokenKey}`;
   const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
-  return /* @__PURE__ */ jsx(
+  const control = /* @__PURE__ */ jsx(
     "div",
     {
-      class: `kui-token-search ${className}`.trim(),
+      class: `kui-token-search ${presentation === "form-field" ? "" : 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)),
+      "data-fill": String(fill),
+      "data-has-trailing": String(Boolean(trailing || trailingAction)),
+      "data-presentation": presentation,
+      "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
+      "data-placeholder-visible": String(
+        query.length === 0 && tokens.length === 0
+      ),
+      slot,
       children: !resolvedExpanded ? /* @__PURE__ */ jsx(
         "button",
         {
@@ -82,7 +104,10 @@ function TokenSearchField({
             "data-token-count": tokens.length,
             "data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
             role: "searchbox",
-            "aria-label": label,
+            "aria-label": presentation === "form-field" ? void 0 : label,
+            "aria-labelledby": presentation === "form-field" ? `${id}-label` : void 0,
+            "aria-describedby": presentation === "form-field" && hint ? `${id}-hint` : void 0,
+            "aria-required": required ? "true" : void 0,
             "aria-disabled": disabled ? "true" : void 0,
             contenteditable: disabled ? "false" : "true",
             spellcheck: "false",
@@ -142,13 +167,70 @@ function TokenSearchField({
             "aria-label": clearLabel,
             title: clearLabel,
             disabled,
-            children: /* @__PURE__ */ jsx(CloseIcon, {})
+            children: clearIcon ?? /* @__PURE__ */ jsx(CloseIcon, {})
           }
         ),
-        trailing && /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing })
+        trailingAction ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...trailingAction.attributes,
+            type: "button",
+            class: "kui-token-search__trailing-action",
+            id: trailingAction.id,
+            "data-action": trailingAction.action,
+            "aria-label": trailingAction.label,
+            "aria-expanded": trailingAction.expanded === void 0 ? void 0 : String(trailingAction.expanded),
+            "aria-pressed": trailingAction.pressed === void 0 ? void 0 : String(trailingAction.pressed),
+            "aria-controls": trailingAction.controls,
+            "aria-haspopup": trailingAction.haspopup,
+            title: trailingAction.label,
+            disabled,
+            children: trailingAction.icon
+          }
+        ) : trailing ? /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing }) : null,
+        !disabled && suggestions.length > 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            class: "kui-token-search__suggestions",
+            "data-token-search-keep-open": true,
+            children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "kui-token-search__suggestion",
+                "data-token-search-suggestion": suggestion.value,
+                children: suggestion.label
+              }
+            ))
+          }
+        )
       ] })
     }
   );
+  if (presentation !== "form-field") return control;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-token-search__field ${className}`.trim(),
+      "data-token-search-form-field": id,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            class: "kui-token-search__field-label",
+            id: `${id}-label`,
+            "data-token-search-form-label": id,
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { class: "kui-token-search__field-required", "aria-hidden": "true", children: "*" })
+            ]
+          }
+        ),
+        control,
+        hint && /* @__PURE__ */ jsx("div", { class: "kui-token-search__field-hint", id: `${id}-hint`, children: hint })
+      ]
+    }
+  );
 }
 function readTokenSearchField(editor, knownTokens = []) {
   let query = "";
@@ -215,4 +297,4 @@ function placeTokenSearchCaret(editor, offset) {
 
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
 
-//# sourceMappingURL=chunk-7KEUJIIC.js.map
+//# sourceMappingURL=chunk-MF6ZUUJZ.js.map

package/dist/chunk-MF6ZUUJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/token-search-field/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-MF6ZUUJZ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { TokenSearchModel } from './model/token-search-model.js';\n\nexport interface TokenSearchToken {\n  value: string;\n  label: string;\n  offset?: number;\n  accessibleLabel?: string;\n}\n\n/**\n * Domain `data-*` metadata for a trailing action button. The component owns\n * `data-action` (pass `action`) and its state attributes.\n */\nexport type TokenSearchTrailingActionAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    'data-component'?: never;\n    'data-key'?: never;\n  }\n>;\n\ninterface TokenSearchTrailingActionBase {\n  /** Decorative glyph, such as a `LucideIcon`. */\n  icon: SafeHtml;\n  /** Accessible name and tooltip, in title style (\"Search Help\"). */\n  label: string;\n  /** Delegated `data-action` value. */\n  action: string;\n  id?: string;\n  /** `aria-controls`: the id of the surface this button opens or toggles. */\n  controls?: string;\n  /** `aria-haspopup` for a button that opens a dialog, menu, or listbox. */\n  haspopup?: 'dialog' | 'menu' | 'listbox' | 'true';\n  /** Domain `data-*` metadata for the app's delegated handler. */\n  attributes?: TokenSearchTrailingActionAttributes;\n}\n\n/**\n * A compact icon button in the field's trailing slot, sized and styled like\n * the clear button. Pass `expanded` for a disclosure (a help surface it opens)\n * or `pressed` for a toggle; the button shows the state with its hover fill.\n */\nexport type TokenSearchTrailingAction = TokenSearchTrailingActionBase &\n  (\n    | { expanded?: boolean; pressed?: never }\n    | { expanded?: never; pressed?: boolean }\n  );\n\nexport type TokenSearchEditorAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-key'?: never;\n    'data-morph-skip'?: never;\n    'data-token-search-editor'?: never;\n    'data-token-count'?: never;\n    'data-placeholder'?: never;\n  }\n>;\n\ninterface TokenSearchFieldBaseProps {\n  id: string;\n  label: string;\n  query?: string;\n  tokens?: readonly TokenSearchToken[];\n  /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */\n  model?: TokenSearchModel;\n  /**\n   * Editor identity for a programmatic text replacement. The editor's text is\n   * DOM-owned between token changes, so a new `query` with the same tokens\n   * does not re-render it (that would reset the caret on every keystroke).\n   * Change `revision` when the app replaces the text itself — reseeding a\n   * persistent dialog's field on reopen, applying a saved search — and the\n   * editor is rebuilt from `query` and `tokens`.\n   */\n  revision?: string | number;\n  placeholder?: string;\n  tokenPlaceholder?: string;\n  disabled?: boolean;\n  autofocus?: boolean;\n  /** Let an expanded collapsible field consume the available inline width. */\n  fill?: boolean;\n  leading?: KerfUiContent;\n  editAction?: string;\n  removeAction?: string;\n  clearAction?: string;\n  clearLabel?: string;\n  /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */\n  clearIcon?: SafeHtml;\n  className?: string;\n  editorAttributes?: TokenSearchEditorAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype TokenSearchTrailingProps =\n  | { trailing?: KerfUiContent; trailingAction?: never }\n  | { trailing?: never; trailingAction: TokenSearchTrailingAction };\n\ntype TokenSearchPresentationProps =\n  | {\n      /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n      presentation?: 'standalone' | 'toolbar-group';\n      hint?: never;\n      required?: never;\n    }\n  | {\n      /** Visible form label and optional hint around the full-width standalone control. */\n      presentation: 'form-field';\n      hint?: string;\n      /** Marks the editor required; the app validates its value. */\n      required?: boolean;\n    };\n\ntype TokenSearchCollapsibleProps =\n  | {\n      /** Allow an empty field to render as one iconic action. */\n      collapsible: true;\n      /** Keep an empty collapsible field open while the application owns focus. */\n      expanded?: boolean;\n      expandAction?: string;\n      expandLabel?: string;\n    }\n  | {\n      collapsible?: false;\n      expanded?: never;\n      expandAction?: never;\n      expandLabel?: never;\n    };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n  TokenSearchCollapsibleProps &\n  TokenSearchTrailingProps &\n  TokenSearchPresentationProps;\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  model,\n  revision,\n  placeholder = 'Search',\n  tokenPlaceholder = 'Add search…',\n  disabled = false,\n  autofocus = false,\n  fill = false,\n  collapsible = false,\n  expanded = false,\n  expandAction = 'expand-token-search',\n  expandLabel,\n  leading,\n  trailing,\n  trailingAction,\n  presentation = 'standalone',\n  hint,\n  required = false,\n  editAction = 'edit-search-token',\n  removeAction = 'remove-search-token',\n  clearAction = 'clear-token-search',\n  clearLabel = 'Clear Search',\n  clearIcon,\n  className = '',\n  editorAttributes = {},\n  slot,\n}: TokenSearchFieldProps) {\n  if (model) {\n    query = model.state.value.query;\n    tokens = model.state.value.tokens;\n  }\n  const suggestions = model?.suggestions.value ?? [];\n  const parts = orderedParts(query, tokens);\n  const tokenKey = tokens.map((token) => token.value).join('|');\n  const key = model\n    ? `${id}@${String(revision ?? '')}:${model.editorRevision.value}:${tokenKey}`\n    : revision === undefined\n      ? `${id}:${tokenKey}`\n      : `${id}@${String(revision)}:${tokenKey}`;\n  const resolvedExpanded =\n    !collapsible || expanded || query.length > 0 || tokens.length > 0;\n  const control = (\n    <div\n      class={`kui-token-search ${presentation === 'form-field' ? '' : 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-fill={String(fill)}\n      data-has-trailing={String(Boolean(trailing || trailingAction))}\n      data-presentation={presentation}\n      data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n      data-placeholder-visible={String(\n        query.length === 0 && tokens.length === 0,\n      )}\n      slot={slot}\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={presentation === 'form-field' ? undefined : label}\n            aria-labelledby={\n              presentation === 'form-field' ? `${id}-label` : undefined\n            }\n            aria-describedby={\n              presentation === 'form-field' && hint ? `${id}-hint` : undefined\n            }\n            aria-required={required ? 'true' : undefined}\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              {clearIcon ?? <CloseIcon />}\n            </button>\n          )}\n          {trailingAction ? (\n            <button\n              {...trailingAction.attributes}\n              type=\"button\"\n              class=\"kui-token-search__trailing-action\"\n              id={trailingAction.id}\n              data-action={trailingAction.action}\n              aria-label={trailingAction.label}\n              aria-expanded={\n                trailingAction.expanded === undefined\n                  ? undefined\n                  : String(trailingAction.expanded)\n              }\n              aria-pressed={\n                trailingAction.pressed === undefined\n                  ? undefined\n                  : String(trailingAction.pressed)\n              }\n              aria-controls={trailingAction.controls}\n              aria-haspopup={trailingAction.haspopup}\n              title={trailingAction.label}\n              disabled={disabled}\n            >\n              {trailingAction.icon}\n            </button>\n          ) : trailing ? (\n            <span class=\"kui-token-search__trailing\">{trailing}</span>\n          ) : null}\n          {!disabled && suggestions.length > 0 && (\n            <div\n              class=\"kui-token-search__suggestions\"\n              data-token-search-keep-open\n            >\n              {suggestions.map((suggestion) => (\n                <button\n                  type=\"button\"\n                  class=\"kui-token-search__suggestion\"\n                  data-token-search-suggestion={suggestion.value}\n                >\n                  {suggestion.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n  if (presentation !== 'form-field') return control;\n  return (\n    <div\n      class={`kui-token-search__field ${className}`.trim()}\n      data-token-search-form-field={id}\n    >\n      <div\n        class=\"kui-token-search__field-label\"\n        id={`${id}-label`}\n        data-token-search-form-label={id}\n      >\n        {label}\n        {required && (\n          <span class=\"kui-token-search__field-required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </div>\n      {control}\n      {hint && (\n        <div class=\"kui-token-search__field-hint\" id={`${id}-hint`}>\n          {hint}\n        </div>\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-MHMWQ7RB.js

@@ -0,0 +1,19 @@
+import { space } from './chunk-IQSRHXZR.js';
+
+// src/shared/layout/gap.ts
+var spaceNames = [
+  "none",
+  "2xs",
+  "xs",
+  "s",
+  "m",
+  "l",
+  "xl"
+];
+function gapLength(value) {
+  return spaceNames.includes(value) ? space(value) : value;
+}
+
+export { gapLength };
+
+//# sourceMappingURL=chunk-MHMWQ7RB.js.map

package/dist/chunk-MHMWQ7RB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/layout/gap.ts"],"names":[],"mappings":";;;AAMA,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;AAGO,SAAS,UAAU,KAAA,EAA2B;AACnD,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GAC1B,KAAA;AACN","file":"chunk-MHMWQ7RB.js","sourcesContent":["import {\n  space,\n  type UiGapValue,\n  type UiSpaceName,\n} from '../styles/css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\n/** Resolve a public spacing name while preserving a complete typed CSS length. */\nexport function gapLength(value: UiGapValue): string {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : value;\n}\n"]}

package/dist/chunk-MJ5RU6XT.js

@@ -0,0 +1,173 @@
+// src/wiring/wire-list-reorder.ts
+var ROW = '[data-component="list-item"], [data-component="list-item-link"], [data-component="list-action-row"]';
+var LIST = '[data-component="list"]';
+var DRAG_TYPE = "application/x-kerf-list-items";
+function reorderListItems(items, getId, sourceIds, target) {
+  const moving = new Set(sourceIds);
+  if (moving.has(target.id)) return [...items];
+  const moved = items.filter((item) => moving.has(getId(item)));
+  const remaining = items.filter((item) => !moving.has(getId(item)));
+  const index = remaining.findIndex((item) => getId(item) === target.id);
+  if (!moved.length || index < 0) return [...items];
+  remaining.splice(index + (target.position === "after" ? 1 : 0), 0, ...moved);
+  return remaining;
+}
+function rowOf(target) {
+  return target instanceof Element ? target.closest(ROW) ?? void 0 : void 0;
+}
+function reorderable(row) {
+  return row.getAttribute("draggable") === "true" && Boolean(row.dataset.itemId);
+}
+function scopeOf(row) {
+  return row.closest(LIST) ?? row.parentElement ?? void 0;
+}
+function rowsIn(scope) {
+  return [...scope.querySelectorAll(ROW)].filter(
+    (row) => reorderable(row) && scopeOf(row) === scope
+  );
+}
+function selected(row) {
+  if (row.dataset.component === "list-action-row")
+    return row.dataset.selected === "true" || row.dataset.pressed === "true";
+  return row.getAttribute("aria-current") === "page" || row.getAttribute("aria-pressed") === "true";
+}
+function sourcesFor(row, rows) {
+  return selected(row) ? rows.filter(selected) : [row];
+}
+function positionFor(event, row) {
+  const bounds = row.getBoundingClientRect();
+  return event.clientY < bounds.top + bounds.height / 2 ? "before" : "after";
+}
+function focusTarget(row) {
+  return row.querySelector(":scope > .kui-list-action-row__primary") ?? row;
+}
+function wireListReorder(root, { onReorder }) {
+  let disposed = false;
+  let dragged;
+  const clearDropPositions = () => root.querySelectorAll(`:is(${ROW})[data-drop-position]`).forEach((row) => delete row.dataset.dropPosition);
+  const clear = () => {
+    dragged = void 0;
+    root.querySelectorAll(
+      `:is(${ROW}):is([data-dragging], [data-drop-position])`
+    ).forEach((row) => {
+      delete row.dataset.dragging;
+      delete row.dataset.dropPosition;
+    });
+  };
+  const report = (scope, change) => {
+    const listId = scope.dataset.listId;
+    onReorder(listId ? { listId, ...change } : change);
+  };
+  const view = (root.nodeType === 9 ? root : root.ownerDocument).defaultView;
+  const refocus = (listId, itemId) => {
+    const restore = () => {
+      if (disposed) return;
+      const row = [...root.querySelectorAll(ROW)].find(
+        (candidate) => candidate.dataset.itemId === itemId && scopeOf(candidate)?.dataset.listId === listId
+      );
+      if (!row) return;
+      const target = focusTarget(row);
+      if (target.ownerDocument.activeElement === target) return;
+      target.focus();
+      target.scrollIntoView({ block: "nearest", inline: "nearest" });
+    };
+    globalThis.queueMicrotask(restore);
+    view.requestAnimationFrame(restore);
+  };
+  const onDragStart = (event) => {
+    const dragEvent = event;
+    const row = rowOf(event.target);
+    const scope = row && scopeOf(row);
+    if (!row || !scope || !reorderable(row)) return;
+    const sources = sourcesFor(row, rowsIn(scope));
+    const sourceIds = sources.map((source) => source.dataset.itemId);
+    dragged = { scope, sourceIds };
+    for (const source of sources) source.dataset.dragging = "true";
+    if (dragEvent.dataTransfer) {
+      dragEvent.dataTransfer.effectAllowed = "move";
+      dragEvent.dataTransfer.setData(DRAG_TYPE, sourceIds.join("\n"));
+    }
+  };
+  const dropRow = (event) => {
+    const row = rowOf(event.target);
+    if (!dragged || !row || !reorderable(row) || scopeOf(row) !== dragged.scope || dragged.sourceIds.includes(row.dataset.itemId))
+      return void 0;
+    return row;
+  };
+  const onDragOver = (event) => {
+    if (!dragged) return;
+    const dragEvent = event;
+    const row = dropRow(event);
+    clearDropPositions();
+    if (!row) return;
+    dragEvent.preventDefault();
+    row.dataset.dropPosition = positionFor(dragEvent, row);
+    if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = "move";
+  };
+  const onDrop = (event) => {
+    const current = dragged;
+    const row = dropRow(event);
+    if (!current || !row) {
+      clear();
+      return;
+    }
+    event.preventDefault();
+    const target = {
+      id: row.dataset.itemId,
+      position: positionFor(event, row)
+    };
+    clear();
+    report(current.scope, {
+      sourceIds: current.sourceIds,
+      target,
+      source: "pointer"
+    });
+  };
+  const onKeyDown = (event) => {
+    const keyboardEvent = event;
+    if (!keyboardEvent.altKey || !keyboardEvent.shiftKey || keyboardEvent.ctrlKey || keyboardEvent.metaKey || keyboardEvent.key !== "ArrowUp" && keyboardEvent.key !== "ArrowDown")
+      return;
+    const row = rowOf(event.target);
+    const scope = row && scopeOf(row);
+    if (!row || !scope || !reorderable(row)) return;
+    const rows = rowsIn(scope);
+    const sources = sourcesFor(row, rows);
+    const up = keyboardEvent.key === "ArrowUp";
+    const edge = rows.indexOf(up ? sources[0] : sources.at(-1));
+    const neighbors = up ? rows.slice(0, edge).reverse() : rows.slice(edge + 1);
+    const neighbor = neighbors.find(
+      (candidate) => !sources.includes(candidate)
+    );
+    if (!neighbor) return;
+    keyboardEvent.preventDefault();
+    const listId = scope.dataset.listId;
+    const focusedId = row.dataset.itemId;
+    report(scope, {
+      sourceIds: sources.map((source) => source.dataset.itemId),
+      target: {
+        id: neighbor.dataset.itemId,
+        position: up ? "before" : "after"
+      },
+      source: "keyboard"
+    });
+    refocus(listId, focusedId);
+  };
+  root.addEventListener("dragstart", onDragStart);
+  root.addEventListener("dragover", onDragOver);
+  root.addEventListener("drop", onDrop);
+  root.addEventListener("dragend", clear);
+  root.addEventListener("keydown", onKeyDown);
+  return () => {
+    disposed = true;
+    clear();
+    root.removeEventListener("dragstart", onDragStart);
+    root.removeEventListener("dragover", onDragOver);
+    root.removeEventListener("drop", onDrop);
+    root.removeEventListener("dragend", clear);
+    root.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+export { reorderListItems, wireListReorder };
+
+//# sourceMappingURL=chunk-MJ5RU6XT.js.map

package/dist/chunk-MJ5RU6XT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wiring/wire-list-reorder.ts"],"names":[],"mappings":"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","file":"chunk-MJ5RU6XT.js","sourcesContent":["/** Which edge of the target row the moved rows land beside. */\nexport type ListDropPosition = 'before' | 'after';\n\n/** How the person asked for the move. */\nexport type ListReorderSource = 'pointer' | 'keyboard';\n\n/** The row the moved rows land beside, and on which side of it. */\nexport interface ListReorderTarget {\n  id: string;\n  position: ListDropPosition;\n}\n\n/** One requested reorder. The application applies it to its own ordered state. */\nexport interface ListReorder {\n  /** The containing list's `data-list-id`, when it has one. */\n  listId?: string;\n  /** The moved rows' `itemId`s, in their current order. */\n  sourceIds: string[];\n  target: ListReorderTarget;\n  source: ListReorderSource;\n}\n\nexport interface WireListReorderOptions {\n  /** Apply the change synchronously (for example with `reorderListItems`) and re-render. */\n  onReorder: (change: ListReorder) => void;\n}\n\nconst ROW =\n  '[data-component=\"list-item\"], [data-component=\"list-item-link\"], [data-component=\"list-action-row\"]';\nconst LIST = '[data-component=\"list\"]';\nconst DRAG_TYPE = 'application/x-kerf-list-items';\n\n/**\n * Move `sourceIds` (kept in their current relative order) to `target`'s side\n * of the target row. Returns a new array; an unknown target, a target that is\n * itself being moved, or no known sources leave the order unchanged.\n */\nexport function reorderListItems<T>(\n  items: readonly T[],\n  getId: (item: T) => string,\n  sourceIds: readonly string[],\n  target: ListReorderTarget,\n): T[] {\n  const moving = new Set(sourceIds);\n  if (moving.has(target.id)) return [...items];\n  const moved = items.filter((item) => moving.has(getId(item)));\n  const remaining = items.filter((item) => !moving.has(getId(item)));\n  const index = remaining.findIndex((item) => getId(item) === target.id);\n  if (!moved.length || index < 0) return [...items];\n  remaining.splice(index + (target.position === 'after' ? 1 : 0), 0, ...moved);\n  return remaining;\n}\n\nfunction rowOf(target: EventTarget | null): HTMLElement | undefined {\n  return target instanceof Element\n    ? (target.closest<HTMLElement>(ROW) ?? undefined)\n    : undefined;\n}\n\nfunction reorderable(row: HTMLElement): boolean {\n  return (\n    row.getAttribute('draggable') === 'true' && Boolean(row.dataset.itemId)\n  );\n}\n\n/** The list a row reorders within: its List, or its parent element. */\nfunction scopeOf(row: HTMLElement): HTMLElement | undefined {\n  return row.closest<HTMLElement>(LIST) ?? row.parentElement ?? undefined;\n}\n\nfunction rowsIn(scope: HTMLElement): HTMLElement[] {\n  return [...scope.querySelectorAll<HTMLElement>(ROW)].filter(\n    (row) => reorderable(row) && scopeOf(row) === scope,\n  );\n}\n\nfunction selected(row: HTMLElement): boolean {\n  if (row.dataset.component === 'list-action-row')\n    return row.dataset.selected === 'true' || row.dataset.pressed === 'true';\n  return (\n    row.getAttribute('aria-current') === 'page' ||\n    row.getAttribute('aria-pressed') === 'true'\n  );\n}\n\n/** A selected row carries every selected row of its list; any other row moves alone. */\nfunction sourcesFor(row: HTMLElement, rows: readonly HTMLElement[]) {\n  return selected(row) ? rows.filter(selected) : [row];\n}\n\nfunction positionFor(event: DragEvent, row: HTMLElement): ListDropPosition {\n  const bounds = row.getBoundingClientRect();\n  return event.clientY < bounds.top + bounds.height / 2 ? 'before' : 'after';\n}\n\nfunction focusTarget(row: HTMLElement): HTMLElement {\n  return (\n    row.querySelector<HTMLElement>(':scope > .kui-list-action-row__primary') ??\n    row\n  );\n}\n\n/**\n * Wire native drag-and-drop and Alt+Shift+ArrowUp/ArrowDown reordering for\n * draggable `ListItem`, `ListItemLink`, and `ListActionRow` rows below `root`.\n * Rows reorder within their `List` (or parent element) and are identified by\n * `itemId`. Dragging a selected or pressed row moves every selected row of\n * its list. While a pointer drag is in progress the wiring paints the same\n * `data-dragging` / `data-drop-position` attributes the rows' `dragging` and\n * `dropPosition` props render. Order stays application state: `onReorder`\n * reports the change and the application re-renders. Returns a disposer.\n */\nexport function wireListReorder(\n  root: HTMLElement | Document,\n  { onReorder }: WireListReorderOptions,\n): () => void {\n  let disposed = false;\n  let dragged: { scope: HTMLElement; sourceIds: string[] } | undefined;\n\n  const clearDropPositions = () =>\n    root\n      .querySelectorAll<HTMLElement>(`:is(${ROW})[data-drop-position]`)\n      .forEach((row) => delete row.dataset.dropPosition);\n  const clear = () => {\n    dragged = undefined;\n    root\n      .querySelectorAll<HTMLElement>(\n        `:is(${ROW}):is([data-dragging], [data-drop-position])`,\n      )\n      .forEach((row) => {\n        delete row.dataset.dragging;\n        delete row.dataset.dropPosition;\n      });\n  };\n  const report = (scope: HTMLElement, change: Omit<ListReorder, 'listId'>) => {\n    const listId = scope.dataset.listId;\n    onReorder(listId ? { listId, ...change } : change);\n  };\n  const view = (root.nodeType === 9 ? (root as Document) : root.ownerDocument)!\n    .defaultView!;\n  /**\n   * Return focus to the moved row by identity. An unkeyed re-render morphs\n   * rows in place, so the focused element can come to hold a different row;\n   * a render may also land after a microtask (a scheduled effect). Check once\n   * after the synchronous render and again before the next frame.\n   */\n  const refocus = (listId: string | undefined, itemId: string) => {\n    const restore = () => {\n      if (disposed) return;\n      const row = [...root.querySelectorAll<HTMLElement>(ROW)].find(\n        (candidate) =>\n          candidate.dataset.itemId === itemId &&\n          scopeOf(candidate)?.dataset.listId === listId,\n      );\n      if (!row) return;\n      const target = focusTarget(row);\n      if (target.ownerDocument.activeElement === target) return;\n      target.focus();\n      target.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    };\n    globalThis.queueMicrotask(restore);\n    view.requestAnimationFrame(restore);\n  };\n\n  const onDragStart = (event: Event) => {\n    const dragEvent = event as DragEvent;\n    const row = rowOf(event.target);\n    const scope = row && scopeOf(row);\n    if (!row || !scope || !reorderable(row)) return;\n    const sources = sourcesFor(row, rowsIn(scope));\n    const sourceIds = sources.map((source) => source.dataset.itemId!);\n    dragged = { scope, sourceIds };\n    for (const source of sources) source.dataset.dragging = 'true';\n    if (dragEvent.dataTransfer) {\n      dragEvent.dataTransfer.effectAllowed = 'move';\n      dragEvent.dataTransfer.setData(DRAG_TYPE, sourceIds.join('\\n'));\n    }\n  };\n  /** The row under a drag event that the dragged rows may land beside. */\n  const dropRow = (event: Event) => {\n    const row = rowOf(event.target);\n    if (\n      !dragged ||\n      !row ||\n      !reorderable(row) ||\n      scopeOf(row) !== dragged.scope ||\n      dragged.sourceIds.includes(row.dataset.itemId!)\n    )\n      return undefined;\n    return row;\n  };\n  const onDragOver = (event: Event) => {\n    if (!dragged) return;\n    const dragEvent = event as DragEvent;\n    const row = dropRow(event);\n    clearDropPositions();\n    if (!row) return;\n    dragEvent.preventDefault();\n    row.dataset.dropPosition = positionFor(dragEvent, row);\n    if (dragEvent.dataTransfer) dragEvent.dataTransfer.dropEffect = 'move';\n  };\n  const onDrop = (event: Event) => {\n    const current = dragged;\n    const row = dropRow(event);\n    if (!current || !row) {\n      clear();\n      return;\n    }\n    event.preventDefault();\n    const target: ListReorderTarget = {\n      id: row.dataset.itemId!,\n      position: positionFor(event as DragEvent, row),\n    };\n    clear();\n    report(current.scope, {\n      sourceIds: current.sourceIds,\n      target,\n      source: 'pointer',\n    });\n  };\n  const onKeyDown = (event: Event) => {\n    const keyboardEvent = event as KeyboardEvent;\n    if (\n      !keyboardEvent.altKey ||\n      !keyboardEvent.shiftKey ||\n      keyboardEvent.ctrlKey ||\n      keyboardEvent.metaKey ||\n      (keyboardEvent.key !== 'ArrowUp' && keyboardEvent.key !== 'ArrowDown')\n    )\n      return;\n    const row = rowOf(event.target);\n    const scope = row && scopeOf(row);\n    if (!row || !scope || !reorderable(row)) return;\n    const rows = rowsIn(scope);\n    const sources = sourcesFor(row, rows);\n    const up = keyboardEvent.key === 'ArrowUp';\n    const edge = rows.indexOf(up ? sources[0]! : sources.at(-1)!);\n    const neighbors = up ? rows.slice(0, edge).reverse() : rows.slice(edge + 1);\n    const neighbor = neighbors.find(\n      (candidate) => !sources.includes(candidate),\n    );\n    if (!neighbor) return;\n    keyboardEvent.preventDefault();\n    // Read identity before reporting: a synchronous controlled render can\n    // morph these very elements into other rows.\n    const listId = scope.dataset.listId;\n    const focusedId = row.dataset.itemId!;\n    report(scope, {\n      sourceIds: sources.map((source) => source.dataset.itemId!),\n      target: {\n        id: neighbor.dataset.itemId!,\n        position: up ? 'before' : 'after',\n      },\n      source: 'keyboard',\n    });\n    refocus(listId, focusedId);\n  };\n\n  root.addEventListener('dragstart', onDragStart);\n  root.addEventListener('dragover', onDragOver);\n  root.addEventListener('drop', onDrop);\n  root.addEventListener('dragend', clear);\n  root.addEventListener('keydown', onKeyDown);\n  return () => {\n    disposed = true;\n    clear();\n    root.removeEventListener('dragstart', onDragStart);\n    root.removeEventListener('dragover', onDragOver);\n    root.removeEventListener('drop', onDrop);\n    root.removeEventListener('dragend', clear);\n    root.removeEventListener('keydown', onKeyDown);\n  };\n}\n"]}

package/dist/chunk-MXNIVEVL.js

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

package/dist/chunk-MXNIVEVL.js.map

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

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

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

package/dist/chunk-NS2TBYM4.js.map

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