@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/dist/chunk-EKYZCRCX.js

@@ -0,0 +1,256 @@
+import { resizeRegionFromPointer, clampRegionSize } from './chunk-VOCPXGQN.js';
+import { delegate } from 'kerfjs';
+
+var REGION_SELECTOR = '[data-component="resizable-region"]';
+var HANDLE_SELECTOR = "[data-kui-resize-handle]";
+var INSET_ATTRIBUTE = "data-handle-inset";
+var REPORTED_ATTRIBUTES = ["aria-valuenow", "aria-valuemax", INSET_ATTRIBUTE];
+var HANDLE_OVERHANG = 10;
+function renderedSize(region, handle) {
+  const size = Number.parseFloat(
+    region.style.getPropertyValue("--kui-resizable-region-size")
+  );
+  return Number.isFinite(size) ? size : Number(handle.getAttribute("aria-valuenow"));
+}
+function handleInset(state, size) {
+  return state.max < state.declaredMax && state.max - size < HANDLE_OVERHANG;
+}
+function setInset(region, inset) {
+  if (region.hasAttribute(INSET_ATTRIBUTE) !== inset)
+    region.toggleAttribute(INSET_ATTRIBUTE, inset);
+}
+function setAttributeIfChanged(element, name, value) {
+  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+function visibleMax(region, axis, min, max) {
+  const property = "--kui-resizable-region-size";
+  const previous = region.style.getPropertyValue(property);
+  region.style.setProperty(property, `${max}px`);
+  const basis = Number.parseFloat(
+    globalThis.getComputedStyle(region).flexBasis
+  );
+  const box = region.getBoundingClientRect();
+  region.style.setProperty(property, previous);
+  const track = axis === "horizontal" ? box.width : box.height;
+  if (!Number.isFinite(basis) || track <= 0 || track >= basis - 0.5) return max;
+  return Math.max(min, Math.min(max, Math.floor(track - (basis - max))));
+}
+function applySize(state, size) {
+  const value = `${size}px`;
+  state.region.style.setProperty("--kui-resizable-region-size", value);
+  state.region.style.setProperty("--kui-resizable-region-expanded-size", value);
+  state.handle.setAttribute("aria-valuenow", String(size));
+  setInset(state.region, handleInset(state, size));
+}
+function wireResizableRegions(root, {
+  step = 16,
+  largeStep = 64,
+  onPreview,
+  onCommit
+}) {
+  let stopPointer;
+  const announced = /* @__PURE__ */ new WeakMap();
+  function regionState(handle) {
+    const region = handle.closest(REGION_SELECTOR);
+    if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))
+      return void 0;
+    const id = region.dataset.regionId;
+    const axis = region.dataset.axis;
+    const edge = region.dataset.edge;
+    const min = Number(handle.getAttribute("aria-valuemin"));
+    const valueMax = Number(handle.getAttribute("aria-valuemax"));
+    const remembered = announced.get(handle);
+    const declaredMax = remembered?.max === valueMax ? remembered.declaredMax : valueMax;
+    const size = renderedSize(region, handle);
+    if (!id || region.dataset.collapsed === "true" || region.dataset.presentation !== "inline" || axis !== "horizontal" && axis !== "vertical" || edge !== "start" && edge !== "end" || !Number.isFinite(min) || !Number.isFinite(declaredMax) || !Number.isFinite(size))
+      return void 0;
+    const max = visibleMax(region, axis, min, declaredMax);
+    return {
+      region,
+      handle,
+      id,
+      axis,
+      edge,
+      min,
+      declaredMax,
+      max,
+      size: clampRegionSize(size, min, max)
+    };
+  }
+  function announce(state) {
+    const inset = handleInset(state, state.size);
+    announced.set(state.handle, {
+      declaredMax: state.declaredMax,
+      max: state.max,
+      size: state.size,
+      inset
+    });
+    setAttributeIfChanged(state.handle, "aria-valuemax", String(state.max));
+    setAttributeIfChanged(state.handle, "aria-valuenow", String(state.size));
+    setInset(state.region, inset);
+  }
+  const handleOf = (region) => region.querySelector(`:scope > ${HANDLE_SELECTOR}`);
+  function sync(region) {
+    if (!region.isConnected || region.dataset.resizing === "true") return;
+    const handle = handleOf(region);
+    const state = handle ? regionState(handle) : void 0;
+    if (state) announce(state);
+  }
+  function reportedByUs(region) {
+    const handle = handleOf(region);
+    const remembered = handle ? announced.get(handle) : void 0;
+    return remembered !== void 0 && handle?.getAttribute("aria-valuemax") === String(remembered.max) && handle.getAttribute("aria-valuenow") === String(remembered.size) && region.hasAttribute(INSET_ATTRIBUTE) === remembered.inset;
+  }
+  const observed = /* @__PURE__ */ new Set();
+  const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver((entries) => {
+    const regions = /* @__PURE__ */ new Set();
+    for (const { target } of entries) {
+      if (target.matches(REGION_SELECTOR))
+        regions.add(target);
+      for (const child of target.querySelectorAll(
+        `:scope > ${REGION_SELECTOR}`
+      ))
+        regions.add(child);
+    }
+    for (const region of regions) sync(region);
+  }) : void 0;
+  function observeRegions() {
+    if (!resizeObserver) return;
+    const wanted = /* @__PURE__ */ new Set();
+    for (const region of root.querySelectorAll(REGION_SELECTOR)) {
+      wanted.add(region);
+      wanted.add(region.parentElement);
+    }
+    for (const element of observed)
+      if (!wanted.has(element)) {
+        resizeObserver.unobserve(element);
+        observed.delete(element);
+      }
+    for (const element of wanted)
+      if (!observed.has(element)) {
+        resizeObserver.observe(element);
+        observed.add(element);
+      }
+  }
+  const mutationObserver = new MutationObserver((records) => {
+    const regions = /* @__PURE__ */ new Set();
+    let structural = false;
+    for (const record of records) {
+      if (record.type === "childList") {
+        structural = true;
+        continue;
+      }
+      const target = record.target;
+      const region = target.matches(REGION_SELECTOR) ? target : target.matches(HANDLE_SELECTOR) ? target.closest(REGION_SELECTOR) : null;
+      if (region && !reportedByUs(region)) regions.add(region);
+    }
+    if (structural) observeRegions();
+    for (const region of regions) sync(region);
+  });
+  mutationObserver.observe(root, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: REPORTED_ATTRIBUTES
+  });
+  observeRegions();
+  function commit(state, change) {
+    onCommit(change);
+    const settled = state.handle.isConnected ? regionState(state.handle) : void 0;
+    if (settled) announce(settled);
+  }
+  const stopFocus = delegate(
+    root,
+    "focusin",
+    HANDLE_SELECTOR,
+    (_event, handle) => {
+      const state = regionState(handle);
+      if (state) announce(state);
+    }
+  );
+  const stopKeydown = delegate(
+    root,
+    "keydown",
+    HANDLE_SELECTOR,
+    (event, handle) => {
+      const keyboardEvent = event;
+      const state = regionState(handle);
+      if (!state) return;
+      announce(state);
+      let next;
+      if (keyboardEvent.key === "Home") next = state.min;
+      if (keyboardEvent.key === "End") next = state.max;
+      const increment = keyboardEvent.shiftKey ? largeStep : step;
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowLeft")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "horizontal" && keyboardEvent.key === "ArrowRight")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowUp")
+        next = resizeRegionFromPointer(state.size, -increment, state.edge);
+      if (state.axis === "vertical" && keyboardEvent.key === "ArrowDown")
+        next = resizeRegionFromPointer(state.size, increment, state.edge);
+      if (next === void 0) return;
+      keyboardEvent.preventDefault();
+      const size = clampRegionSize(next, state.min, state.max);
+      applySize(state, size);
+      commit(state, { id: state.id, size, source: "keyboard" });
+    }
+  );
+  const stopPointerDown = delegate(
+    root,
+    "pointerdown",
+    HANDLE_SELECTOR,
+    (event, handle) => {
+      const pointerEvent = event;
+      if (pointerEvent.button !== 0) return;
+      const state = regionState(handle);
+      if (!state) return;
+      pointerEvent.preventDefault();
+      announce(state);
+      state.handle.setPointerCapture?.(pointerEvent.pointerId);
+      const startCoordinate = state.axis === "horizontal" ? pointerEvent.clientX : pointerEvent.clientY;
+      let next = state.size;
+      const move = (moveEvent) => {
+        const coordinate = state.axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+        next = clampRegionSize(
+          resizeRegionFromPointer(
+            state.size,
+            coordinate - startCoordinate,
+            state.edge
+          ),
+          state.min,
+          state.max
+        );
+        applySize(state, next);
+        onPreview?.({ id: state.id, size: next, source: "pointer" });
+      };
+      const finish = () => {
+        root.removeEventListener("pointermove", move);
+        root.removeEventListener("pointerup", finish);
+        root.removeEventListener("pointercancel", finish);
+        stopPointer = void 0;
+        delete state.region.dataset.resizing;
+        commit(state, { id: state.id, size: next, source: "pointer" });
+      };
+      stopPointer?.();
+      stopPointer = finish;
+      state.region.dataset.resizing = "true";
+      root.addEventListener("pointermove", move);
+      root.addEventListener("pointerup", finish, { once: true });
+      root.addEventListener("pointercancel", finish, { once: true });
+    }
+  );
+  return () => {
+    mutationObserver.disconnect();
+    resizeObserver?.disconnect();
+    observed.clear();
+    stopPointer?.();
+    stopFocus();
+    stopKeydown();
+    stopPointerDown();
+  };
+}
+
+export { wireResizableRegions };
+
+//# sourceMappingURL=chunk-EKYZCRCX.js.map

package/dist/chunk-EKYZCRCX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":"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","file":"chunk-EKYZCRCX.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport {\n  clampRegionSize,\n  type ResizableRegionAxis,\n  type ResizableRegionEdge,\n  resizeRegionFromPointer,\n} from './resizable-region.js';\n\nexport interface ResizeCommit {\n  id: string;\n  size: number;\n  source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n  step?: number;\n  largeStep?: number;\n  onPreview?: (change: ResizeCommit) => void;\n  onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n  region: HTMLElement;\n  handle: HTMLElement;\n  id: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  min: number;\n  /** The rendered `max` prop. */\n  declaredMax: number;\n  /** The largest size the region can actually show: `declaredMax`, or less when a parent clamps the track. */\n  max: number;\n  /** The shown size, which a parent clamp can hold below the rendered size. */\n  size: number;\n}\n\nconst REGION_SELECTOR = '[data-component=\"resizable-region\"]';\nconst HANDLE_SELECTOR = '[data-kui-resize-handle]';\nconst INSET_ATTRIBUTE = 'data-handle-inset';\n/** Attributes a re-render can write back over the reported state. */\nconst REPORTED_ATTRIBUTES = ['aria-valuenow', 'aria-valuemax', INSET_ATTRIBUTE];\n/**\n * How far the handle's hit target reaches past the separator (the CSS places\n * the 20px handle at `-10px` on the region's edge).\n */\nconst HANDLE_OVERHANG = 10;\n\n/**\n * The size the region renders or was last resized to. The track's custom\n * property is the source, not aria-valuenow, which reports the shown size and\n * can sit below the rendered size while a parent clamps the track.\n */\nfunction renderedSize(region: HTMLElement, handle: HTMLElement) {\n  const size = Number.parseFloat(\n    region.style.getPropertyValue('--kui-resizable-region-size'),\n  );\n  return Number.isFinite(size)\n    ? size\n    : Number(handle.getAttribute('aria-valuenow'));\n}\n\n/**\n * Whether the handle must sit inside the region. When a parent clamps the\n * track, the separator reaches the parent's edge, where a clipping ancestor\n * (an app shell, a scroll frame) would cut off the half of the hit target\n * and its focus ring that overhang the region. With less room past the\n * separator than that overhang, the region carries `data-handle-inset`, and\n * the CSS moves the handle and its ring inside.\n */\nfunction handleInset(state: RegionState, size: number) {\n  return state.max < state.declaredMax && state.max - size < HANDLE_OVERHANG;\n}\n\nfunction setInset(region: HTMLElement, inset: boolean) {\n  if (region.hasAttribute(INSET_ATTRIBUTE) !== inset)\n    region.toggleAttribute(INSET_ATTRIBUTE, inset);\n}\n\nfunction setAttributeIfChanged(\n  element: HTMLElement,\n  name: string,\n  value: string,\n) {\n  if (element.getAttribute(name) !== value) element.setAttribute(name, value);\n}\n\n/**\n * The largest size a parent lets the region show. The track is\n * `size + edge extent` (its flex basis), but a parent may clamp it (a\n * `max-width: 100%` stage, a narrow container). Probing the track at the\n * declared maximum for one synchronous layout read measures how much of that\n * size is visible; the probe is restored before anything paints. Without\n * layout (no box yet, or an `auto` basis under a responsive fill) the declared\n * maximum stands.\n */\nfunction visibleMax(\n  region: HTMLElement,\n  axis: ResizableRegionAxis,\n  min: number,\n  max: number,\n) {\n  const property = '--kui-resizable-region-size';\n  const previous = region.style.getPropertyValue(property);\n  region.style.setProperty(property, `${max}px`);\n  const basis = Number.parseFloat(\n    globalThis.getComputedStyle(region).flexBasis,\n  );\n  const box = region.getBoundingClientRect();\n  region.style.setProperty(property, previous);\n  const track = axis === 'horizontal' ? box.width : box.height;\n  if (!Number.isFinite(basis) || track <= 0 || track >= basis - 0.5) return max;\n  return Math.max(min, Math.min(max, Math.floor(track - (basis - max))));\n}\n\n/**\n * Apply a live size to an expanded region before the app commits it. The\n * collapse-motion content keeps a fixed width from the expanded size so its\n * slide reads as a slide, not a squeeze; it has to follow the live size too, or\n * the content stays at the previous width until the app re-renders.\n */\nfunction applySize(state: RegionState, size: number) {\n  const value = `${size}px`;\n  state.region.style.setProperty('--kui-resizable-region-size', value);\n  state.region.style.setProperty('--kui-resizable-region-expanded-size', value);\n  state.handle.setAttribute('aria-valuenow', String(size));\n  setInset(state.region, handleInset(state, size));\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(\n  root: HTMLElement,\n  {\n    step = 16,\n    largeStep = 64,\n    onPreview,\n    onCommit,\n  }: WireResizableRegionsOptions,\n) {\n  let stopPointer: (() => void) | undefined;\n  // The handle announces its visible maximum in aria-valuemax, which hides the\n  // rendered `max` prop. Remember it per handle; a re-render that writes a\n  // different aria-valuemax than the one announced here supersedes it.\n  const announced = new WeakMap<\n    HTMLElement,\n    { declaredMax: number; max: number; size: number; inset: boolean }\n  >();\n\n  function regionState(handle: Element): RegionState | undefined {\n    const region = handle.closest<HTMLElement>(REGION_SELECTOR);\n    if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement))\n      return undefined;\n    const id = region.dataset.regionId;\n    const axis = region.dataset.axis;\n    const edge = region.dataset.edge;\n    const min = Number(handle.getAttribute('aria-valuemin'));\n    const valueMax = Number(handle.getAttribute('aria-valuemax'));\n    const remembered = announced.get(handle);\n    const declaredMax =\n      remembered?.max === valueMax ? remembered.declaredMax : valueMax;\n    const size = renderedSize(region, handle);\n    if (\n      !id ||\n      region.dataset.collapsed === 'true' ||\n      region.dataset.presentation !== 'inline' ||\n      (axis !== 'horizontal' && axis !== 'vertical') ||\n      (edge !== 'start' && edge !== 'end') ||\n      !Number.isFinite(min) ||\n      !Number.isFinite(declaredMax) ||\n      !Number.isFinite(size)\n    )\n      return undefined;\n    const max = visibleMax(region, axis, min, declaredMax);\n    return {\n      region,\n      handle,\n      id,\n      axis,\n      edge,\n      min,\n      declaredMax,\n      max,\n      size: clampRegionSize(size, min, max),\n    };\n  }\n\n  /**\n   * Report what is shown: the visible maximum and the shown size. Nothing is\n   * committed — the app's size stays its own until the user resizes.\n   */\n  function announce(state: RegionState) {\n    const inset = handleInset(state, state.size);\n    announced.set(state.handle, {\n      declaredMax: state.declaredMax,\n      max: state.max,\n      size: state.size,\n      inset,\n    });\n    // Unchanged values are not rewritten, so the observer below never sees\n    // its own report as a re-render.\n    setAttributeIfChanged(state.handle, 'aria-valuemax', String(state.max));\n    setAttributeIfChanged(state.handle, 'aria-valuenow', String(state.size));\n    setInset(state.region, inset);\n  }\n\n  const handleOf = (region: HTMLElement) =>\n    region.querySelector<HTMLElement>(`:scope > ${HANDLE_SELECTOR}`);\n\n  /** Re-measure a region at rest and report what it shows. */\n  function sync(region: HTMLElement) {\n    if (!region.isConnected || region.dataset.resizing === 'true') return;\n    const handle = handleOf(region);\n    const state = handle ? regionState(handle) : undefined;\n    if (state) announce(state);\n  }\n\n  /** Whether the region still shows the state this wiring last reported. */\n  function reportedByUs(region: HTMLElement) {\n    const handle = handleOf(region);\n    const remembered = handle ? announced.get(handle) : undefined;\n    return (\n      remembered !== undefined &&\n      handle?.getAttribute('aria-valuemax') === String(remembered.max) &&\n      handle.getAttribute('aria-valuenow') === String(remembered.size) &&\n      region.hasAttribute(INSET_ATTRIBUTE) === remembered.inset\n    );\n  }\n\n  // Keep the reported values current without a focus or an interaction.\n  // A ResizeObserver on every region and its parent re-measures when the\n  // space changes (a narrowed viewport, a parent that grows back); a\n  // MutationObserver catches a re-render that writes the rendered props back\n  // over the reported values, and regions a re-render adds or removes. Both\n  // measure once per affected region per batch, after layout or in a\n  // microtask, never per frame.\n  const observed = new Set<Element>();\n  const resizeObserver =\n    typeof ResizeObserver === 'function'\n      ? new ResizeObserver((entries) => {\n          const regions = new Set<HTMLElement>();\n          for (const { target } of entries) {\n            if (target.matches(REGION_SELECTOR))\n              regions.add(target as HTMLElement);\n            for (const child of target.querySelectorAll<HTMLElement>(\n              `:scope > ${REGION_SELECTOR}`,\n            ))\n              regions.add(child);\n          }\n          for (const region of regions) sync(region);\n        })\n      : undefined;\n\n  /** Observe every region below root and its parent; release the rest. */\n  function observeRegions() {\n    if (!resizeObserver) return;\n    const wanted = new Set<Element>();\n    for (const region of root.querySelectorAll(REGION_SELECTOR)) {\n      wanted.add(region);\n      // A region found below root always has a parent element.\n      wanted.add(region.parentElement as Element);\n    }\n    for (const element of observed)\n      if (!wanted.has(element)) {\n        resizeObserver.unobserve(element);\n        observed.delete(element);\n      }\n    for (const element of wanted)\n      if (!observed.has(element)) {\n        resizeObserver.observe(element);\n        observed.add(element);\n      }\n  }\n\n  const mutationObserver = new MutationObserver((records) => {\n    const regions = new Set<HTMLElement>();\n    let structural = false;\n    for (const record of records) {\n      if (record.type === 'childList') {\n        structural = true;\n        continue;\n      }\n      const target = record.target as HTMLElement;\n      const region = target.matches(REGION_SELECTOR)\n        ? target\n        : target.matches(HANDLE_SELECTOR)\n          ? target.closest<HTMLElement>(REGION_SELECTOR)\n          : null;\n      if (region && !reportedByUs(region)) regions.add(region);\n    }\n    // Newly observed regions are measured by the ResizeObserver's first\n    // notification.\n    if (structural) observeRegions();\n    for (const region of regions) sync(region);\n  });\n  mutationObserver.observe(root, {\n    subtree: true,\n    childList: true,\n    attributes: true,\n    attributeFilter: REPORTED_ATTRIBUTES,\n  });\n  observeRegions();\n\n  /**\n   * Commit a size, then re-announce: an app that re-renders the committed\n   * size synchronously writes the rendered `max` prop back to aria-valuemax.\n   */\n  function commit(state: RegionState, change: ResizeCommit) {\n    onCommit(change);\n    const settled = state.handle.isConnected\n      ? regionState(state.handle)\n      : undefined;\n    if (settled) announce(settled);\n  }\n\n  const stopFocus = delegate(\n    root,\n    'focusin',\n    HANDLE_SELECTOR,\n    (_event, handle) => {\n      const state = regionState(handle);\n      if (state) announce(state);\n    },\n  );\n\n  const stopKeydown = delegate(\n    root,\n    'keydown',\n    HANDLE_SELECTOR,\n    (event, handle) => {\n      const keyboardEvent = event as KeyboardEvent;\n      const state = regionState(handle);\n      if (!state) return;\n      announce(state);\n      let next: number | undefined;\n      if (keyboardEvent.key === 'Home') next = state.min;\n      if (keyboardEvent.key === 'End') next = state.max;\n      const increment = keyboardEvent.shiftKey ? largeStep : step;\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp')\n        next = resizeRegionFromPointer(state.size, -increment, state.edge);\n      if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown')\n        next = resizeRegionFromPointer(state.size, increment, state.edge);\n      if (next === undefined) return;\n      keyboardEvent.preventDefault();\n      const size = clampRegionSize(next, state.min, state.max);\n      applySize(state, size);\n      commit(state, { id: state.id, size, source: 'keyboard' });\n    },\n  );\n\n  const stopPointerDown = delegate(\n    root,\n    'pointerdown',\n    HANDLE_SELECTOR,\n    (event, handle) => {\n      const pointerEvent = event as PointerEvent;\n      if (pointerEvent.button !== 0) return;\n      const state = regionState(handle);\n      if (!state) return;\n      pointerEvent.preventDefault();\n      announce(state);\n      state.handle.setPointerCapture?.(pointerEvent.pointerId);\n      const startCoordinate =\n        state.axis === 'horizontal'\n          ? pointerEvent.clientX\n          : pointerEvent.clientY;\n      let next = state.size;\n      const move = (moveEvent: PointerEvent) => {\n        const coordinate =\n          state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n        next = clampRegionSize(\n          resizeRegionFromPointer(\n            state.size,\n            coordinate - startCoordinate,\n            state.edge,\n          ),\n          state.min,\n          state.max,\n        );\n        applySize(state, next);\n        onPreview?.({ id: state.id, size: next, source: 'pointer' });\n      };\n      const finish = () => {\n        root.removeEventListener('pointermove', move);\n        root.removeEventListener('pointerup', finish);\n        root.removeEventListener('pointercancel', finish);\n        stopPointer = undefined;\n        delete state.region.dataset.resizing;\n        commit(state, { id: state.id, size: next, source: 'pointer' });\n      };\n      stopPointer?.();\n      stopPointer = finish;\n      state.region.dataset.resizing = 'true';\n      root.addEventListener('pointermove', move);\n      root.addEventListener('pointerup', finish, { once: true });\n      root.addEventListener('pointercancel', finish, { once: true });\n    },\n  );\n\n  return () => {\n    mutationObserver.disconnect();\n    resizeObserver?.disconnect();\n    observed.clear();\n    stopPointer?.();\n    stopFocus();\n    stopKeydown();\n    stopPointerDown();\n  };\n}\n"]}

package/dist/{chunk-TIGSG6BX.js → chunk-HJKRCKDR.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { LucideIcon } from './chunk-4R777DUZ.js';
 import { Search, X } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
@@ -38,12 +38,14 @@ function TokenSearchField({
   expandLabel,
   leading,
   trailing,
+  presentation = "standalone",
   editAction = "edit-search-token",
   removeAction = "remove-search-token",
   clearAction = "clear-token-search",
   clearLabel = "Clear search",
   className = "",
-  editorAttributes = {}
+  editorAttributes = {},
+  slot
 }) {
   const parts = orderedParts(query, tokens);
   const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
@@ -58,6 +60,8 @@ function TokenSearchField({
       "data-collapsible": String(collapsible),
       "data-expanded": String(resolvedExpanded),
       "data-has-trailing": String(Boolean(trailing)),
+      "data-presentation": presentation,
+      slot,
       children: !resolvedExpanded ? /* @__PURE__ */ jsx(
         "button",
         {
@@ -215,4 +219,4 @@ function placeTokenSearchCaret(editor, offset) {
 
 export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
 
-//# sourceMappingURL=chunk-TIGSG6BX.js.map
+//# sourceMappingURL=chunk-HJKRCKDR.js.map

package/dist/chunk-HJKRCKDR.js.map

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

package/dist/{chunk-Y6LYKFXY.js → chunk-HMQ2ZDGG.js}

@@ -1,4 +1,4 @@
-import { LucideIcon } from './chunk-W2FK7ZNY.js';
+import { LucideIcon } from './chunk-4R777DUZ.js';
 import { ChevronRight } from 'lucide';
 import { jsx } from 'kerfjs/jsx-runtime';
 
@@ -20,7 +20,8 @@ function DisclosureArrow({
   openDirection = "down",
   closedDirection = "right",
   icon,
-  className = ""
+  className = "",
+  slot
 }) {
   const direction = open ? openDirection : closedDirection;
   const rotation = rotationForState(open, openDirection, closedDirection);
@@ -33,6 +34,7 @@ function DisclosureArrow({
       "data-open": String(open),
       "data-direction": direction,
       "aria-hidden": "true",
+      slot,
       children: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronRight, name: "chevron-right" })
     }
   );
@@ -40,4 +42,4 @@ function DisclosureArrow({
 
 export { DisclosureArrow };
 
-//# sourceMappingURL=chunk-Y6LYKFXY.js.map
+//# sourceMappingURL=chunk-HMQ2ZDGG.js.map

package/dist/chunk-HMQ2ZDGG.js.map

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

package/dist/{chunk-UDHHKZWO.js → chunk-JM53SMVF.js}

@@ -1,5 +1,6 @@
-import { Skeleton } from './chunk-T7DOWS6T.js';
-import { em } from './chunk-OL4TC3U2.js';
+import { Skeleton } from './chunk-ULCDZTWL.js';
+import { Badge } from './chunk-XD7DWYXG.js';
+import { em } from './chunk-MO56ZZLG.js';
 import { jsxs, jsx } from 'kerfjs/jsx-runtime';
 
 function StateBanner({
@@ -11,8 +12,10 @@ function StateBanner({
   tone = "info",
   urgency = "status",
   className = "",
-  placeholder = false
+  placeholder = false,
+  slot
 }) {
+  const badgeTone = tone === "info" ? "brand" : tone;
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -23,11 +26,12 @@ function StateBanner({
       role: urgency,
       "aria-live": urgency === "alert" ? "assertive" : "polite",
       "aria-busy": placeholder ? "true" : void 0,
+      slot,
       children: [
         icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
         /* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
           /* @__PURE__ */ jsx("strong", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(10) }) : title }),
-          badge && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__badge", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) : badge }),
+          badge && /* @__PURE__ */ jsx(Badge, { appearance: "solid", size: "compact", tone: badgeTone, children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) : badge }),
           (placeholder || detail) && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__detail", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(16) }) : detail })
         ] }),
         action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
@@ -38,4 +42,4 @@ function StateBanner({
 
 export { StateBanner };
 
-//# sourceMappingURL=chunk-UDHHKZWO.js.map
+//# sourceMappingURL=chunk-JM53SMVF.js.map

package/dist/chunk-JM53SMVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;;;AA2BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,MAAA,GAAS,OAAA,GAAU,IAAA;AAC9C,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAO,GAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAAA,CAEA,WAAA,IAAe,MAAA,qBACf,GAAA,CAAC,MAAA,EAAA,EAAK,OAAM,0BAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,EAAE,CAAA,EAAG,IAAK,MAAA,EAC/C;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-JM53SMVF.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge } from './badge.js';\nimport { em } from './css-values.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone =\n  'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';\nexport type StateBannerUrgency = 'status' | 'alert';\n\nexport interface StateBannerProps {\n  title: string;\n  detail?: string;\n  /** Optional compact status or count shown beside the title. */\n  badge?: string;\n  icon?: SafeHtml;\n  action?: KerfUiContent;\n  tone?: StateBannerTone;\n  urgency?: StateBannerUrgency;\n  className?: string;\n  /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. */\n  placeholder?: boolean;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport function StateBanner({\n  title,\n  detail,\n  badge,\n  icon,\n  action,\n  tone = 'info',\n  urgency = 'status',\n  className = '',\n  placeholder = false,\n  slot,\n}: StateBannerProps) {\n  const badgeTone = tone === 'info' ? 'brand' : tone;\n  return (\n    <section\n      class={`kui-state-banner ${className}`.trim()}\n      data-component=\"state-banner\"\n      data-tone={tone}\n      data-placeholder={placeholder ? 'true' : undefined}\n      role={urgency}\n      aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n      aria-busy={placeholder ? 'true' : undefined}\n      slot={slot}\n    >\n      {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n      <div class=\"kui-state-banner__copy\">\n        <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n        {badge && (\n          <Badge appearance=\"solid\" size=\"compact\" tone={badgeTone}>\n            {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n          </Badge>\n        )}\n        {(placeholder || detail) && (\n          <span class=\"kui-state-banner__detail\">\n            {placeholder ? <Skeleton width={em(16)} /> : detail}\n          </span>\n        )}\n      </div>\n      {action && <div class=\"kui-state-banner__action\">{action}</div>}\n    </section>\n  );\n}\n"]}

package/dist/{chunk-OGTJNHRG.js → chunk-JMGKM7RK.js}

@@ -1,4 +1,4 @@
-import { space } from './chunk-OL4TC3U2.js';
+import { space } from './chunk-MO56ZZLG.js';
 import { jsx } from 'kerfjs/jsx-runtime';
 
 var spaceNames = [
@@ -17,7 +17,8 @@ function Spacer({
   flex = false,
   width,
   height,
-  className = ""
+  className = "",
+  slot
 }) {
   const widthValue = dimension(width);
   const heightValue = dimension(height);
@@ -32,11 +33,12 @@ function Spacer({
       "data-component": "spacer",
       "data-flex": String(flex),
       "aria-hidden": "true",
-      style: style || void 0
+      style: style || void 0,
+      slot
     }
   );
 }
 
 export { Spacer };
 
-//# sourceMappingURL=chunk-OGTJNHRG.js.map
+//# sourceMappingURL=chunk-JMGKM7RK.js.map

package/dist/chunk-JMGKM7RK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spacer.tsx"],"names":[],"mappings":";;;AAEA,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;AAcA,SAAS,UAAU,KAAA,EAAwD;AACzE,EAAA,OAAO,WAAW,QAAA,CAAS,KAAoB,CAAA,GAC3C,KAAA,CAAM,KAAoB,CAAA,GACzB,KAAA;AACP;AAGO,SAAS,MAAA,CAAO;AAAA,EACrB,IAAA,GAAO,KAAA;AAAA,EACP,KAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,UAAA,GAAa,UAAU,KAAK,CAAA;AAClC,EAAA,MAAM,WAAA,GAAc,UAAU,MAAM,CAAA;AACpC,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,UAAA,GAAa,CAAA,MAAA,EAAS,UAAU,CAAA,CAAA,GAAK,EAAA;AAAA,IACrC,WAAA,GAAc,CAAA,OAAA,EAAU,WAAW,CAAA,CAAA,GAAK;AAAA,GAC1C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,WAAA,EAAc,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACtC,gBAAA,EAAe,QAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,aAAA,EAAY,MAAA;AAAA,MACZ,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB;AAAA;AAAA,GACD;AAEL","file":"chunk-JMGKM7RK.js","sourcesContent":["import { type CssLength, space, type UiSpaceName } from './css-values.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n  'none',\n  '2xs',\n  'xs',\n  's',\n  'm',\n  'l',\n  'xl',\n];\n\nexport interface SpacerProps {\n  /** Grow and shrink to fill the available space along a parent's flex axis. */\n  flex?: boolean;\n  /** A named UI spacing token or typed physical width. */\n  width?: UiSpaceName | CssLength;\n  /** A named UI spacing token or typed physical height. */\n  height?: UiSpaceName | CssLength;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nfunction dimension(value?: UiSpaceName | CssLength): CssLength | undefined {\n  return spaceNames.includes(value as UiSpaceName)\n    ? space(value as UiSpaceName)\n    : (value as CssLength | undefined);\n}\n\n/** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */\nexport function Spacer({\n  flex = false,\n  width,\n  height,\n  className = '',\n  slot,\n}: SpacerProps) {\n  const widthValue = dimension(width);\n  const heightValue = dimension(height);\n  const style = [\n    widthValue ? `width:${widthValue}` : '',\n    heightValue ? `height:${heightValue}` : '',\n  ]\n    .filter(Boolean)\n    .join(';');\n\n  return (\n    <div\n      class={`kui-spacer ${className}`.trim()}\n      data-component=\"spacer\"\n      data-flex={String(flex)}\n      aria-hidden=\"true\"\n      style={style || undefined}\n      slot={slot}\n    ></div>\n  );\n}\n\nexport type { CssLength, UiSpaceName } from './css-values.js';\n"]}

package/dist/{chunk-GYGM363P.js → chunk-KX7DP2GO.js}

@@ -1,8 +1,9 @@
-import { Text } from './chunk-XKFRMGMW.js';
+import { Text } from './chunk-7IUSV4XG.js';
+import { Skeleton } from './chunk-ULCDZTWL.js';
 import { filterDataAttributes, filterControlAttributes } from './chunk-SRSJO5QE.js';
-import { Skeleton } from './chunk-T7DOWS6T.js';
-import { em } from './chunk-OL4TC3U2.js';
-import { DisclosureArrow } from './chunk-Y6LYKFXY.js';
+import { Badge } from './chunk-XD7DWYXG.js';
+import { em } from './chunk-MO56ZZLG.js';
+import { DisclosureArrow } from './chunk-HMQ2ZDGG.js';
 import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
 var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
@@ -13,6 +14,7 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data-density",
   "data-divider",
   "data-inline",
+  "data-width",
   "data-indicator-tone",
   "data-toggle"
 ]);
@@ -26,6 +28,7 @@ function ListHeader({
   density = "standard",
   divider = "none",
   inline = false,
+  width = "fill",
   indicatorTone = "neutral",
   action,
   actionLabel,
@@ -36,7 +39,8 @@ function ListHeader({
   toggle = false,
   placeholder = false,
   rootAttributes = {},
-  triggerAttributes = {}
+  triggerAttributes = {},
+  slot
 }) {
   const extensionRootAttributes = filterDataAttributes(
     rootAttributes,
@@ -51,7 +55,8 @@ function ListHeader({
   const renderedBadge = normalizedCount === void 0 ? status ?? badge : void 0;
   const renderedActionIcon = actionIcon ?? (toggle ? /* @__PURE__ */ jsx(DisclosureArrow, { open: Boolean(expanded) }) : void 0);
   const accessibleLabel = normalizedCount === void 0 ? void 0 : `${label}, ${normalizedCountLabel}`;
-  const indicator = placeholder ? (normalizedCount !== void 0 || renderedBadge) && /* @__PURE__ */ jsx("span", { class: "kui-list-header__badge", children: /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) }) : normalizedCount === void 0 ? renderedBadge && /* @__PURE__ */ jsx("span", { class: "kui-list-header__badge", children: renderedBadge }) : /* @__PURE__ */ jsx("span", { class: "kui-list-header__count", "aria-hidden": "true", children: normalizedCount });
+  const badgeTone = indicatorTone === "accent" ? "brand" : indicatorTone;
+  const indicator = placeholder ? (normalizedCount !== void 0 || renderedBadge) && /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, children: /* @__PURE__ */ jsx(Skeleton, { width: em(1.75) }) }) : normalizedCount === void 0 ? renderedBadge && /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, children: renderedBadge }) : /* @__PURE__ */ jsx(Badge, { size: "compact", tone: badgeTone, ariaHidden: true, children: normalizedCount });
   const busy = placeholder ? "true" : void 0;
   if (toggle) {
     return /* @__PURE__ */ jsx(
@@ -65,10 +70,12 @@ function ListHeader({
         "data-density": density,
         "data-divider": divider,
         "data-inline": String(inline),
+        "data-width": width,
         "data-indicator-tone": indicatorTone,
         "data-toggle": "true",
         "data-placeholder": placeholder ? "true" : void 0,
         "aria-busy": busy,
+        slot,
         children: /* @__PURE__ */ jsxs(
           "button",
           {
@@ -101,10 +108,12 @@ function ListHeader({
       "data-density": density,
       "data-divider": divider,
       "data-inline": String(inline),
+      "data-width": width,
       "data-indicator-tone": indicatorTone,
       "data-toggle": "false",
       "data-placeholder": placeholder ? "true" : void 0,
       "aria-busy": busy,
+      slot,
       children: [
         /* @__PURE__ */ jsxs("div", { class: "kui-list-header__title", children: [
           /* @__PURE__ */ jsx(
@@ -112,6 +121,7 @@ function ListHeader({
             {
               variant: "h2",
               class: "kui-list-header__label",
+              border: "none",
               "aria-label": accessibleLabel,
               children: label
             }
@@ -138,4 +148,4 @@ function ListHeader({
 
 export { ListHeader };
 
-//# sourceMappingURL=chunk-GYGM363P.js.map
+//# sourceMappingURL=chunk-KX7DP2GO.js.map

package/dist/chunk-KX7DP2GO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-KX7DP2GO.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge, type BadgeTone } from './badge.js';\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n  filterControlAttributes,\n  filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\nimport { Text } from './text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-has-badge',\n  'data-has-count',\n  'data-density',\n  'data-divider',\n  'data-inline',\n  'data-width',\n  'data-indicator-tone',\n  'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype ListHeaderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-has-badge'?: never;\n    'data-has-count'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-inline'?: never;\n    'data-width'?: never;\n    'data-indicator-tone'?: never;\n    'data-toggle'?: never;\n  }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-action'?: never;\n    popoverTarget?: string;\n    popoverTargetAction?: 'toggle' | 'show' | 'hide';\n    'aria-controls'?: string;\n    'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n  }\n>;\n\ninterface ListHeaderBaseProps {\n  label: string;\n  density?: 'standard' | 'compact';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  /** Shrink-wrap the header without its default outer margin, border, or padding. */\n  inline?: boolean;\n  /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n  width?: 'fill' | 'content';\n  indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n  /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n  placeholder?: boolean;\n  rootAttributes?: ListHeaderRootAttributes;\n  triggerAttributes?: ListHeaderTriggerAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\ntype ListHeaderModeProps =\n  | {\n      /** Render the title as a controlled disclosure trigger. */\n      toggle: true;\n      action: string;\n      expanded: boolean;\n      actionIcon?: SafeHtml;\n      actionLabel?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a separately named trailing action. */\n      toggle?: false;\n      action: string;\n      actionLabel: string;\n      actionIcon: SafeHtml;\n      expanded?: never;\n      actionDisabled?: boolean;\n      disabledReason?: string;\n    }\n  | {\n      /** Render a passive section heading. */\n      toggle?: false;\n      action?: never;\n      actionLabel?: never;\n      actionIcon?: never;\n      expanded?: never;\n      actionDisabled?: never;\n      disabledReason?: never;\n    };\n\ntype ListHeaderIndicatorProps =\n  | { count: number; countLabel: string; badge?: never; status?: never }\n  | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n  | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n  ListHeaderIndicatorProps &\n  ListHeaderModeProps;\n\nexport function ListHeader({\n  label,\n  count,\n  countLabel,\n  badge,\n  status,\n  density = 'standard',\n  divider = 'none',\n  inline = false,\n  width = 'fill',\n  indicatorTone = 'neutral',\n  action,\n  actionLabel,\n  actionIcon,\n  actionDisabled = false,\n  disabledReason,\n  expanded,\n  toggle = false,\n  placeholder = false,\n  rootAttributes = {},\n  triggerAttributes = {},\n  slot,\n}: ListHeaderProps) {\n  const extensionRootAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const extensionTriggerAttributes = filterControlAttributes(\n    triggerAttributes,\n    PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n  );\n  const normalizedCount =\n    typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n      ? count\n      : undefined;\n  const normalizedCountLabel =\n    normalizedCount === undefined\n      ? undefined\n      : typeof countLabel === 'string' && countLabel.trim()\n        ? countLabel\n        : String(normalizedCount);\n  const renderedBadge =\n    normalizedCount === undefined ? (status ?? badge) : undefined;\n  const renderedActionIcon =\n    actionIcon ??\n    (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n  const accessibleLabel =\n    normalizedCount === undefined\n      ? undefined\n      : `${label}, ${normalizedCountLabel}`;\n  const badgeTone: BadgeTone =\n    indicatorTone === 'accent' ? 'brand' : indicatorTone;\n  const indicator = placeholder ? (\n    (normalizedCount !== undefined || renderedBadge) && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        <Skeleton width={em(1.75)} />\n      </Badge>\n    )\n  ) : normalizedCount === undefined ? (\n    renderedBadge && (\n      <Badge size=\"compact\" tone={badgeTone}>\n        {renderedBadge}\n      </Badge>\n    )\n  ) : (\n    <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n      {normalizedCount}\n    </Badge>\n  );\n  const busy = placeholder ? ('true' as const) : undefined;\n  if (toggle) {\n    return (\n      <header\n        {...extensionRootAttributes}\n        class=\"kui-list-header\"\n        data-component=\"list-header\"\n        data-has-badge={String(Boolean(renderedBadge))}\n        data-has-count={String(normalizedCount !== undefined)}\n        data-density={density}\n        data-divider={divider}\n        data-inline={String(inline)}\n        data-width={width}\n        data-indicator-tone={indicatorTone}\n        data-toggle=\"true\"\n        data-placeholder={placeholder ? 'true' : undefined}\n        aria-busy={busy}\n        slot={slot}\n      >\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__title kui-list-header__toggle\"\n          data-action={placeholder ? undefined : action}\n          title={actionDisabled ? disabledReason : undefined}\n          disabled={actionDisabled || placeholder || undefined}\n          aria-label={accessibleLabel}\n          aria-expanded={String(Boolean(expanded))}\n        >\n          <span class=\"kui-list-header__label\">{label}</span>\n          {indicator}\n          {renderedActionIcon && (\n            <span class=\"kui-list-header__action-layer\">\n              {renderedActionIcon}\n            </span>\n          )}\n        </button>\n      </header>\n    );\n  }\n  return (\n    <header\n      {...extensionRootAttributes}\n      class=\"kui-list-header\"\n      data-component=\"list-header\"\n      data-has-badge={String(Boolean(renderedBadge))}\n      data-has-count={String(normalizedCount !== undefined)}\n      data-density={density}\n      data-divider={divider}\n      data-inline={String(inline)}\n      data-width={width}\n      data-indicator-tone={indicatorTone}\n      data-toggle=\"false\"\n      data-placeholder={placeholder ? 'true' : undefined}\n      aria-busy={busy}\n      slot={slot}\n    >\n      <div class=\"kui-list-header__title\">\n        <Text\n          variant=\"h2\"\n          class=\"kui-list-header__label\"\n          border=\"none\"\n          aria-label={accessibleLabel}\n        >\n          {label}\n        </Text>\n        {indicator}\n      </div>\n      {action && (\n        <button\n          {...extensionTriggerAttributes}\n          type=\"button\"\n          class=\"kui-list-header__action\"\n          data-action={placeholder ? undefined : action}\n          aria-label={actionLabel}\n          title={actionDisabled ? disabledReason : actionLabel}\n          disabled={actionDisabled || placeholder || undefined}\n        >\n          {renderedActionIcon}\n        </button>\n      )}\n    </header>\n  );\n}\n"]}