@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

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

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

package/dist/chunk-LZUUUHNH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/segmented-control/segmented-control.tsx"],"names":[],"mappings":";;;AAkCO,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,QAAA,GAAW,KAAA;AAAA,EACX;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,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,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,MAAM,WAAA,GAAc,YAAY,MAAA,CAAO,QAAA;AACvC,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,UAAU,WAAA,IAAe,WAAA;AAAA,YACzB,QAAA,EAAU,cAAc,IAAA,GAAO,GAAA;AAAA,YAC/B,mBAAA,EAAmB,cAAc,MAAA,GAAS,MAAA;AAAA,YAEzC,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-LZUUUHNH.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  /** Disable the whole control: every segment is disabled and dimmed, the selection stays visible, and the group reports `aria-disabled`. A choice's own `disabled` still disables just that segment. */\n  disabled?: 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  disabled = 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      data-disabled={disabled ? 'true' : undefined}\n      role=\"group\"\n      aria-label={label}\n      aria-disabled={disabled ? 'true' : undefined}\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        const unavailable = disabled || choice.disabled;\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={unavailable || placeholder}\n            tabindex={placeholder ? '-1' : '0'}\n            data-kui-disabled={unavailable ? 'true' : undefined}\n          >\n            {choice.content ?? <span>{choice.label}</span>}\n          </button>\n        );\n      })}\n    </div>\n  );\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-MVKHSAKE.js

@@ -0,0 +1,169 @@
+import { followAnchor, positionPopup } from './chunk-HDXUHLTQ.js';
+
+// src/components/forms/combobox/wiring/wire-comboboxes.ts
+var INPUT = ".kui-combobox__input";
+function partsOf(input) {
+  const field = input.closest('[data-component="combobox"]');
+  const listbox = field.querySelector('[role="listbox"]');
+  return {
+    field,
+    input,
+    listbox,
+    create: listbox.querySelector("[data-create]")
+  };
+}
+var visibleOptions = (parts) => [...parts.listbox.querySelectorAll('[role="option"]')].filter(
+  (option) => !option.hidden
+);
+var matches = (option, text) => option.textContent.toLowerCase().includes(text) || option.dataset.value.toLowerCase().includes(text);
+function setActive(parts, option) {
+  for (const item of parts.listbox.querySelectorAll('[role="option"]'))
+    item.setAttribute("aria-selected", String(item === option));
+  if (option) {
+    parts.input.setAttribute("aria-activedescendant", option.id);
+    option.scrollIntoView?.({ block: "nearest" });
+  } else parts.input.removeAttribute("aria-activedescendant");
+}
+function activeOption(parts) {
+  const id = parts.input.getAttribute("aria-activedescendant");
+  return id ? parts.listbox.querySelector(`#${CSS.escape(id)}`) : null;
+}
+var following = /* @__PURE__ */ new WeakMap();
+function show(parts) {
+  const { listbox } = parts;
+  listbox.hidden = false;
+  if (!listbox.matches(":popover-open")) listbox.showPopover();
+  if (following.has(listbox)) return;
+  const control = parts.input.parentElement;
+  const place = async () => {
+    if (!listbox.isConnected || listbox.hidden) return;
+    listbox.style.width = `${control.getBoundingClientRect().width}px`;
+    await positionPopup(control, listbox, {
+      placement: "bottom-start",
+      gap: 4
+    });
+    listbox.style.maxHeight = `min(${listbox.style.maxHeight}, var(--_kui-combobox-max-height))`;
+  };
+  following.set(
+    listbox,
+    followAnchor(control, listbox, () => void place())
+  );
+}
+function hide(parts) {
+  const { listbox } = parts;
+  listbox.hidden = true;
+  if (listbox.matches(":popover-open")) listbox.hidePopover();
+  following.get(listbox)?.();
+  following.delete(listbox);
+}
+function close(parts) {
+  hide(parts);
+  parts.input.setAttribute("aria-expanded", "false");
+  setActive(parts, null);
+}
+function update(parts) {
+  const typed = parts.input.value.trim();
+  const text = typed.toLowerCase();
+  let exact = false;
+  for (const option of parts.listbox.querySelectorAll(
+    '[role="option"]:not([data-create])'
+  )) {
+    option.hidden = text !== "" && !matches(option, text);
+    if (option.dataset.value.toLowerCase() === text) exact = true;
+  }
+  if (parts.create) {
+    parts.create.hidden = typed === "" || exact;
+    parts.create.dataset.value = typed;
+    parts.create.textContent = parts.field.dataset.createLabel.replaceAll(
+      "{value}",
+      typed
+    );
+  }
+  const options = visibleOptions(parts);
+  if (options.length === 0) hide(parts);
+  else show(parts);
+  parts.input.setAttribute("aria-expanded", String(options.length > 0));
+  if (!options.includes(activeOption(parts))) setActive(parts, null);
+}
+function wireComboboxes(root, { onCommit, commitKeys = [","] }) {
+  const commit = (parts, active) => {
+    const option = active ?? (parts.create ? null : visibleOptions(parts)[0] ?? null);
+    const typed = parts.input.value.trim();
+    const value = option ? option.dataset.value : typed;
+    const suggestion = [
+      ...parts.listbox.querySelectorAll(
+        '[role="option"]:not([data-create])'
+      )
+    ].find((item) => item.dataset.value.toLowerCase() === value.toLowerCase());
+    const created = !suggestion;
+    if (created && !parts.create) return;
+    close(parts);
+    onCommit({
+      id: parts.field.dataset.comboboxId,
+      value: suggestion?.dataset.value ?? value,
+      created,
+      input: parts.input
+    });
+  };
+  const inputOf = (event) => event.target instanceof HTMLInputElement && event.target.matches(INPUT) ? event.target : null;
+  const onInput = (event) => {
+    const input = inputOf(event);
+    const parts = input && partsOf(input);
+    if (parts) update(parts);
+  };
+  const onFocus = onInput;
+  const onKeyDown = (event) => {
+    const keyboard = event;
+    const input = inputOf(keyboard);
+    const parts = input && partsOf(input);
+    if (!parts || keyboard.isComposing) return;
+    const options = visibleOptions(parts);
+    const current = activeOption(parts);
+    const index = current ? options.indexOf(current) : -1;
+    if (keyboard.key === "ArrowDown" || keyboard.key === "ArrowUp") {
+      keyboard.preventDefault();
+      if (parts.listbox.hidden) update(parts);
+      const open = visibleOptions(parts);
+      if (open.length === 0) return;
+      const step = keyboard.key === "ArrowDown" ? 1 : -1;
+      const next = index < 0 ? step > 0 ? 0 : open.length - 1 : (index + step + open.length) % open.length;
+      setActive(parts, open[next]);
+    } else if (keyboard.key === "Enter" || commitKeys.includes(keyboard.key)) {
+      if (!parts.input.value.trim() && !current) return;
+      keyboard.preventDefault();
+      commit(parts, current);
+    } else if (keyboard.key === "Escape" && !parts.listbox.hidden) {
+      keyboard.preventDefault();
+      close(parts);
+    }
+  };
+  const onPointerDown = (event) => {
+    const option = event.target instanceof Element ? event.target.closest(".kui-combobox__option") : null;
+    const input = option?.closest('[data-component="combobox"]')?.querySelector(INPUT);
+    const parts = input && partsOf(input);
+    if (!option || !parts) return;
+    event.preventDefault();
+    commit(parts, option);
+  };
+  const onFocusOut = (event) => {
+    const input = inputOf(event);
+    const parts = input && partsOf(input);
+    if (parts) close(parts);
+  };
+  root.addEventListener("input", onInput);
+  root.addEventListener("focusin", onFocus);
+  root.addEventListener("keydown", onKeyDown);
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("focusout", onFocusOut);
+  return () => {
+    root.removeEventListener("input", onInput);
+    root.removeEventListener("focusin", onFocus);
+    root.removeEventListener("keydown", onKeyDown);
+    root.removeEventListener("pointerdown", onPointerDown);
+    root.removeEventListener("focusout", onFocusOut);
+  };
+}
+
+export { wireComboboxes };
+
+//# sourceMappingURL=chunk-MVKHSAKE.js.map

package/dist/chunk-MVKHSAKE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/combobox/wiring/wire-comboboxes.ts"],"names":[],"mappings":"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","file":"chunk-MVKHSAKE.js","sourcesContent":["import {\n  followAnchor,\n  positionPopup,\n} from '../../../../shared/popup/position-popup.js';\n\ntype Root = HTMLElement | Document;\n\nconst INPUT = '.kui-combobox__input';\n\n/** A committed combobox value. */\nexport interface ComboboxCommit {\n  id: string;\n  value: string;\n  /** True when the value matched no suggestion (the person created it). */\n  created: boolean;\n  /** The field's input; clear or keep its text after applying the commit. */\n  input: HTMLInputElement;\n}\n\nexport interface WireComboboxesOptions {\n  onCommit: (commit: ComboboxCommit) => void;\n  /** Characters that commit the typed text besides Enter. Default `[',']`. */\n  commitKeys?: readonly string[];\n}\n\ninterface Parts {\n  field: HTMLElement;\n  input: HTMLInputElement;\n  listbox: HTMLElement;\n  create: HTMLElement | null;\n}\n\n// `Combobox` renders the input inside its field with its listbox, and every\n// suggestion option with `data-value`, so the lookups below cannot miss.\nfunction partsOf(input: HTMLInputElement): Parts {\n  const field = input.closest<HTMLElement>('[data-component=\"combobox\"]')!;\n  const listbox = field.querySelector<HTMLElement>('[role=\"listbox\"]')!;\n  return {\n    field,\n    input,\n    listbox,\n    create: listbox.querySelector<HTMLElement>('[data-create]'),\n  };\n}\n\nconst visibleOptions = (parts: Parts) =>\n  [...parts.listbox.querySelectorAll<HTMLElement>('[role=\"option\"]')].filter(\n    (option) => !option.hidden,\n  );\n\nconst matches = (option: HTMLElement, text: string) =>\n  option.textContent!.toLowerCase().includes(text) ||\n  option.dataset.value!.toLowerCase().includes(text);\n\nfunction setActive(parts: Parts, option: HTMLElement | null) {\n  for (const item of parts.listbox.querySelectorAll('[role=\"option\"]'))\n    item.setAttribute('aria-selected', String(item === option));\n  if (option) {\n    parts.input.setAttribute('aria-activedescendant', option.id);\n    option.scrollIntoView?.({ block: 'nearest' });\n  } else parts.input.removeAttribute('aria-activedescendant');\n}\n\nfunction activeOption(parts: Parts): HTMLElement | null {\n  const id = parts.input.getAttribute('aria-activedescendant');\n  return id\n    ? parts.listbox.querySelector<HTMLElement>(`#${CSS.escape(id)}`)\n    : null;\n}\n\n// The listbox is a manual popover in the top layer, so no clipping or\n// scrolling ancestor (an AnchoredSurface, a dialog, a scrolling List) cuts\n// it off; it follows the field while shown.\nconst following = new WeakMap<HTMLElement, () => void>();\n\nfunction show(parts: Parts) {\n  const { listbox } = parts;\n  listbox.hidden = false;\n  if (!listbox.matches(':popover-open')) listbox.showPopover();\n  if (following.has(listbox)) return;\n  const control = parts.input.parentElement!;\n  const place = async () => {\n    if (!listbox.isConnected || listbox.hidden) return;\n    listbox.style.width = `${control.getBoundingClientRect().width}px`;\n    await positionPopup(control, listbox, {\n      placement: 'bottom-start',\n      gap: 4,\n    });\n    // Placement caps the height to the room its side has; keep the list's\n    // own cap too.\n    listbox.style.maxHeight = `min(${listbox.style.maxHeight}, var(--_kui-combobox-max-height))`;\n  };\n  following.set(\n    listbox,\n    followAnchor(control, listbox, () => void place()),\n  );\n}\n\nfunction hide(parts: Parts) {\n  const { listbox } = parts;\n  listbox.hidden = true;\n  if (listbox.matches(':popover-open')) listbox.hidePopover();\n  following.get(listbox)?.();\n  following.delete(listbox);\n}\n\nfunction close(parts: Parts) {\n  hide(parts);\n  parts.input.setAttribute('aria-expanded', 'false');\n  setActive(parts, null);\n}\n\n/** Filter the suggestions to the typed text and show the create option. */\nfunction update(parts: Parts) {\n  const typed = parts.input.value.trim();\n  const text = typed.toLowerCase();\n  let exact = false;\n  for (const option of parts.listbox.querySelectorAll<HTMLElement>(\n    '[role=\"option\"]:not([data-create])',\n  )) {\n    option.hidden = text !== '' && !matches(option, text);\n    if (option.dataset.value!.toLowerCase() === text) exact = true;\n  }\n  if (parts.create) {\n    parts.create.hidden = typed === '' || exact;\n    parts.create.dataset.value = typed;\n    // A create option exists only when the field has a create label.\n    parts.create.textContent = parts.field.dataset.createLabel!.replaceAll(\n      '{value}',\n      typed,\n    );\n  }\n  const options = visibleOptions(parts);\n  if (options.length === 0) hide(parts);\n  else show(parts);\n  parts.input.setAttribute('aria-expanded', String(options.length > 0));\n  if (!options.includes(activeOption(parts)!)) setActive(parts, null);\n}\n\n/**\n * Wire every `Combobox` below root: typing filters the suggestions (and offers\n * to create the typed text), ArrowDown/ArrowUp move the active option, Enter or\n * a commit key (comma by default) commits the active option or the typed text,\n * a click commits an option, and Escape or leaving the field closes the list.\n * Typed text that matches no suggestion commits only when the field offers\n * creation; otherwise Enter commits the first matching suggestion. Dispose with the owning application.\n */\nexport function wireComboboxes(\n  root: Root,\n  { onCommit, commitKeys = [','] }: WireComboboxesOptions,\n): () => void {\n  const commit = (parts: Parts, active: HTMLElement | null) => {\n    // Without a create option, Enter on partial text takes the first match.\n    const option =\n      active ?? (parts.create ? null : (visibleOptions(parts)[0] ?? null));\n    const typed = parts.input.value.trim();\n    // Callers commit only with an option or non-empty typed text.\n    const value = option ? option.dataset.value! : typed;\n    const suggestion = [\n      ...parts.listbox.querySelectorAll<HTMLElement>(\n        '[role=\"option\"]:not([data-create])',\n      ),\n    ].find((item) => item.dataset.value!.toLowerCase() === value.toLowerCase());\n    const created = !suggestion;\n    if (created && !parts.create) return;\n    close(parts);\n    onCommit({\n      id: parts.field.dataset.comboboxId!,\n      value: suggestion?.dataset.value ?? value,\n      created,\n      input: parts.input,\n    });\n  };\n  const inputOf = (event: Event) =>\n    event.target instanceof HTMLInputElement && event.target.matches(INPUT)\n      ? event.target\n      : null;\n  const onInput = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) update(parts);\n  };\n  const onFocus = onInput;\n  const onKeyDown = (event: Event) => {\n    const keyboard = event as KeyboardEvent;\n    const input = inputOf(keyboard);\n    const parts = input && partsOf(input);\n    if (!parts || keyboard.isComposing) return;\n    const options = visibleOptions(parts);\n    const current = activeOption(parts);\n    const index = current ? options.indexOf(current) : -1;\n    if (keyboard.key === 'ArrowDown' || keyboard.key === 'ArrowUp') {\n      keyboard.preventDefault();\n      if (parts.listbox.hidden) update(parts);\n      const open = visibleOptions(parts);\n      if (open.length === 0) return;\n      const step = keyboard.key === 'ArrowDown' ? 1 : -1;\n      const next =\n        index < 0\n          ? step > 0\n            ? 0\n            : open.length - 1\n          : (index + step + open.length) % open.length;\n      setActive(parts, open[next]!);\n    } else if (keyboard.key === 'Enter' || commitKeys.includes(keyboard.key)) {\n      if (!parts.input.value.trim() && !current) return;\n      keyboard.preventDefault();\n      commit(parts, current);\n    } else if (keyboard.key === 'Escape' && !parts.listbox.hidden) {\n      keyboard.preventDefault();\n      close(parts);\n    }\n  };\n  const onPointerDown = (event: Event) => {\n    const option =\n      event.target instanceof Element\n        ? event.target.closest<HTMLElement>('.kui-combobox__option')\n        : null;\n    const input = option\n      ?.closest('[data-component=\"combobox\"]')\n      ?.querySelector<HTMLInputElement>(INPUT);\n    const parts = input && partsOf(input);\n    if (!option || !parts) return;\n    // Keep focus in the field; commit on the press itself.\n    event.preventDefault();\n    commit(parts, option);\n  };\n  const onFocusOut = (event: Event) => {\n    const input = inputOf(event);\n    const parts = input && partsOf(input);\n    if (parts) close(parts);\n  };\n  root.addEventListener('input', onInput);\n  root.addEventListener('focusin', onFocus);\n  root.addEventListener('keydown', onKeyDown);\n  root.addEventListener('pointerdown', onPointerDown);\n  root.addEventListener('focusout', onFocusOut);\n  return () => {\n    root.removeEventListener('input', onInput);\n    root.removeEventListener('focusin', onFocus);\n    root.removeEventListener('keydown', onKeyDown);\n    root.removeEventListener('pointerdown', onPointerDown);\n    root.removeEventListener('focusout', onFocusOut);\n  };\n}\n"]}

package/dist/chunk-NB6POCFH.js

@@ -0,0 +1,103 @@
+import { verticalAlignment, horizontalAlignment } from './chunk-D4MXSAMI.js';
+import { gapLength } from './chunk-MHMWQ7RB.js';
+import { filterRootAttributes } from './chunk-KH4KEMSP.js';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+var listGridAttributes = ["role", "aria-label", "aria-multiselectable"];
+var listProtectedAttributes = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-gap",
+  "data-flex",
+  "data-fill",
+  "data-h-align",
+  "data-v-align",
+  "data-scrollable",
+  "data-scroll-clearance",
+  "data-frame",
+  "data-surface",
+  "data-inset",
+  "data-content-width",
+  "data-content-align",
+  "data-text-insets",
+  "data-control-insets"
+]);
+function List({
+  children,
+  selectionMode,
+  ariaLabel,
+  gap = false,
+  flex = false,
+  fill = false,
+  hAlign = "full",
+  vAlign = "top",
+  scrollable = false,
+  scrollClearance,
+  frame = false,
+  maxHeight,
+  minHeight,
+  surface,
+  inset,
+  contentWidth,
+  contentAlign = "center",
+  dividerSides = "",
+  textInsets = "",
+  controlInsets = "",
+  className = "",
+  id,
+  rootAttributes = {},
+  slot
+}) {
+  if (selectionMode === "multiple" && !ariaLabel) {
+    throw new Error("Multi-select List requires an ariaLabel");
+  }
+  const multiple = selectionMode === "multiple";
+  const safeRootAttributes = filterRootAttributes(
+    rootAttributes,
+    multiple ? /* @__PURE__ */ new Set([...listProtectedAttributes, ...listGridAttributes]) : listProtectedAttributes
+  );
+  const gridAttributes = multiple ? {
+    role: "grid",
+    "aria-label": ariaLabel,
+    "aria-multiselectable": "true"
+  } : {};
+  const gapStyle = gap === true ? "--_kui-list-gap:var(--kui-list-gap)" : gap === false ? "" : typeof gap === "string" ? `--_kui-list-gap:${gapLength(gap)}` : `--_kui-list-column-gap:${gapLength(gap.column)};--_kui-list-row-gap:${gapLength(gap.row)}`;
+  const flexValue = flex === true ? "1 1 auto" : flex || void 0;
+  const style = [
+    gapStyle,
+    flexValue ? `--_kui-list-flex:${flexValue}` : "",
+    maxHeight === void 0 ? "" : `--_kui-list-max-height:${maxHeight}`,
+    minHeight === void 0 ? "" : `--_kui-list-min-height:${minHeight}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...safeRootAttributes,
+      ...gridAttributes,
+      id,
+      class: `kui-list ${className}`.trim(),
+      "data-component": "list",
+      "data-gap": String(Boolean(gap)),
+      "data-flex": String(Boolean(flex)),
+      "data-fill": fill ? "true" : void 0,
+      "data-h-align": horizontalAlignment(hAlign),
+      "data-v-align": verticalAlignment(vAlign),
+      "data-scrollable": String(scrollable),
+      "data-scroll-clearance": scrollClearance,
+      "data-frame": frame ? "true" : void 0,
+      "data-surface": surface,
+      "data-inset": inset,
+      "data-content-width": contentWidth,
+      "data-content-align": contentWidth === void 0 ? void 0 : contentAlign,
+      "divider-sides": dividerSides || void 0,
+      "data-text-insets": textInsets || void 0,
+      "data-control-insets": controlInsets || void 0,
+      style: style || void 0,
+      slot,
+      children
+    }
+  );
+}
+
+export { List };
+
+//# sourceMappingURL=chunk-NB6POCFH.js.map

package/dist/chunk-NB6POCFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collections/list/list.tsx"],"names":[],"mappings":"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","file":"chunk-NB6POCFH.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n  filterRootAttributes,\n  type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport {\n  type HorizontalAlignment,\n  horizontalAlignment,\n  type ListVerticalAlignment,\n  verticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nimport { gapLength } from '../../../shared/layout/gap.js';\nimport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport {\n  type CssFlex,\n  type CssFlexKeyword,\n  type CssLength,\n  type UiGap,\n} from '../../../shared/styles/css-values.js';\n\n/** Attributes a multi-select List owns as an ARIA grid. */\nconst listGridAttributes = ['role', 'aria-label', 'aria-multiselectable'];\n\nconst listProtectedAttributes = new Set([\n  'data-component',\n  'data-gap',\n  'data-flex',\n  'data-fill',\n  'data-h-align',\n  'data-v-align',\n  'data-scrollable',\n  'data-scroll-clearance',\n  'data-frame',\n  'data-surface',\n  'data-inset',\n  'data-content-width',\n  'data-content-align',\n  'data-text-insets',\n  'data-control-insets',\n]);\n\ntype ListRootAttributes = StructuralRootAttributes &\n  Readonly<{\n    'data-component'?: never;\n    'data-gap'?: never;\n    'data-flex'?: never;\n    'data-fill'?: never;\n    'data-h-align'?: never;\n    'data-v-align'?: never;\n    'data-scrollable'?: never;\n    'data-scroll-clearance'?: never;\n    'data-frame'?: never;\n    'data-surface'?: never;\n    'data-inset'?: never;\n    'data-content-width'?: never;\n    'data-content-align'?: never;\n    'data-text-insets'?: never;\n    'data-control-insets'?: never;\n  }>;\n\n/**\n * A solid surface painted behind a List: `base` is the page surface\n * (`--kui-color-surface`), `raised` the raised surface\n * (`--kui-color-surface-raised`). A lowered region is a `SunkenPanel`.\n */\nexport type ListSurface = 'base' | 'raised';\n\n/**\n * A preset inset on all four sides. `document` is the reading inset for long\n * content such as a reader view: 24px block and 32px inline, narrowing to\n * 16px inline below 576px. It replaces any `textInsets`/`controlInsets`.\n */\nexport type ListInset = 'document';\n\n/**\n * A readable measure for a page's content column: `compact` 440px, `medium`\n * 640px, or `wide` 864px of content, the same steps as a catalog example's\n * `contentWidth`.\n */\nexport type ListContentWidth = 'compact' | 'medium' | 'wide';\n\nexport interface ListProps {\n  children?: KerfUiContent;\n  /** Make this list a labeled multi-select grid for `ContentItem selectionMode=\"multiple\"` rows. */\n  selectionMode?: 'multiple';\n  /** Accessible name for the multi-select grid. */\n  ariaLabel?: string;\n  /** Standard gap (`true`), one spacing value, or separate column and row values. Defaults to no gap. */\n  gap?: boolean | UiGap;\n  /** Allow this list 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 list is that parent's layout root. Inside a\n   * flex layout use `flex` instead. Defaults to false.\n   */\n  fill?: boolean;\n  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n  hAlign?: HorizontalAlignment;\n  /** Vertical distribution. Defaults to top. */\n  vAlign?: ListVerticalAlignment;\n  /**\n   * Own vertical scrolling and overscroll containment. Children keep their\n   * natural height and scroll instead of shrinking. To bound the list by a\n   * `max-height` ancestor (no definite height), give that ancestor a flex\n   * column and use `flex`; `fill` needs a definite-height parent.\n   */\n  scrollable?: boolean;\n  /**\n   * Clear chrome that lies over this scrollable List's block-start and/or\n   * block-end edge, such as a `DialogSurface` floating footer. The List adds\n   * the inherited `--kui-scroll-clearance-block-*` context that chrome\n   * publishes to its own block padding and `scroll-padding`, so its rows\n   * scroll visibly beneath the chrome while the first and last rows (and any\n   * row focused or scrolled into view) can still rest clear of it. Opt in only\n   * the one scroller that reaches the covered edge. Defaults to none.\n   */\n  scrollClearance?: ScrollClearance;\n  /**\n   * Draw a bordered, rounded frame around the stack: a 1px neutral border,\n   * the standard control radius, and a 4px inset on every side that keeps the\n   * first and last rows' focus rings inside a scrolling frame's clip. It\n   * replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and\n   * `maxHeight` it is a bounded result picker of `ListItem` rows.\n   */\n  frame?: boolean;\n  /**\n   * The List's maximum block size, a typed `CssLength` from\n   * `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so\n   * rows beyond it scroll; it bounds the List without a flex-column ancestor.\n   */\n  maxHeight?: CssLength;\n  /**\n   * The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),\n   * so a short or empty result set keeps a stable box. Defaults to no minimum.\n   */\n  minHeight?: CssLength;\n  /**\n   * Paint a solid surface behind the stack, including its insets: for a strip\n   * of chrome (a banner above a sunken work area) that must not show the\n   * lowered tint around its content. Omitted, the List is transparent.\n   */\n  surface?: ListSurface;\n  /** Physical divider edges in canonical top/right/bottom/left order. */\n  dividerSides?: Sides;\n  /** A preset four-sided inset; see `ListInset`. */\n  /**\n   * Cap the list's content at a readable measure, plus its insets, so a page\n   * column needs no application CSS. Composes with `inset=\"document\"`.\n   */\n  contentWidth?: ListContentWidth;\n  /** Where a `contentWidth` column sits: `center` (default) or `start`. */\n  contentAlign?: 'start' | 'center';\n  inset?: ListInset;\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  /**\n   * The list's id, so app code can address it: name it as a\n   * `wireScrollDividers` scroller (with a `Toolbar` above it as its chrome),\n   * or find it in tests.\n   */\n  id?: string;\n  /**\n   * Safe `data-*`, `aria-*`, and structural `role` metadata (a named drop\n   * `region`, `aria-busy`); List-owned structural attributes remain\n   * protected, and a multi-select List owns its grid role and name.\n   */\n  rootAttributes?: ListRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A list's configuration, apart from its content and styling hooks: the props a\n * composite that renders a `List` for the app (the Workbench's `mainHeader` /\n * `mainFooter` chrome) forwards, so the app configures that list instead of\n * styling it. An omitted or `undefined` field keeps the composite's default.\n */\nexport type ListConfig = Pick<\n  ListProps,\n  'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'\n>;\n\n/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */\nexport function List({\n  children,\n  selectionMode,\n  ariaLabel,\n  gap = false,\n  flex = false,\n  fill = false,\n  hAlign = 'full',\n  vAlign = 'top',\n  scrollable = false,\n  scrollClearance,\n  frame = false,\n  maxHeight,\n  minHeight,\n  surface,\n  inset,\n  contentWidth,\n  contentAlign = 'center',\n  dividerSides = '',\n  textInsets = '',\n  controlInsets = '',\n  className = '',\n  id,\n  rootAttributes = {},\n  slot,\n}: ListProps) {\n  if (selectionMode === 'multiple' && !ariaLabel) {\n    throw new Error('Multi-select List requires an ariaLabel');\n  }\n  const multiple = selectionMode === 'multiple';\n  const safeRootAttributes = filterRootAttributes(\n    rootAttributes,\n    multiple\n      ? new Set([...listProtectedAttributes, ...listGridAttributes])\n      : listProtectedAttributes,\n  );\n  const gridAttributes = multiple\n    ? {\n        role: 'grid',\n        'aria-label': ariaLabel,\n        'aria-multiselectable': 'true',\n      }\n    : {};\n  const gapStyle =\n    gap === true\n      ? '--_kui-list-gap:var(--kui-list-gap)'\n      : gap === false\n        ? ''\n        : typeof gap === 'string'\n          ? `--_kui-list-gap:${gapLength(gap)}`\n          : `--_kui-list-column-gap:${gapLength(gap.column)};--_kui-list-row-gap:${gapLength(gap.row)}`;\n  const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n  const style = [\n    gapStyle,\n    flexValue ? `--_kui-list-flex:${flexValue}` : '',\n    maxHeight === undefined ? '' : `--_kui-list-max-height:${maxHeight}`,\n    minHeight === undefined ? '' : `--_kui-list-min-height:${minHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      {...safeRootAttributes}\n      {...gridAttributes}\n      id={id}\n      class={`kui-list ${className}`.trim()}\n      data-component=\"list\"\n      data-gap={String(Boolean(gap))}\n      data-flex={String(Boolean(flex))}\n      data-fill={fill ? 'true' : undefined}\n      data-h-align={horizontalAlignment(hAlign)}\n      data-v-align={verticalAlignment(vAlign)}\n      data-scrollable={String(scrollable)}\n      data-scroll-clearance={scrollClearance}\n      data-frame={frame ? 'true' : undefined}\n      data-surface={surface}\n      data-inset={inset}\n      data-content-width={contentWidth}\n      data-content-align={contentWidth === undefined ? undefined : contentAlign}\n      divider-sides={dividerSides || undefined}\n      data-text-insets={textInsets || undefined}\n      data-control-insets={controlInsets || undefined}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport type {\n  HorizontalAlignment,\n  ListVerticalAlignment,\n  VerticalAlignment,\n} from '../../../shared/layout/flex-alignment.js';\nexport type { ScrollClearance } from '../../../shared/layout/scroll-clearance.js';\nexport type { Sides } from '../../../shared/layout/sides.js';\nexport type {\n  CssFlex,\n  CssFlexKeyword,\n  CssLength,\n  UiGap,\n  UiGapValue,\n  UiSpaceName,\n} from '../../../shared/styles/css-values.js';\n"]}