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

package/dist/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/progress-bar/progress-bar.tsx"],"names":[],"mappings":";;;AAeA,IAAM,sBAAA,uBAA6B,GAAA,CAAI;AAAA,EACrC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAC,CAAA;AAqCD,SAAS,OAAA,CAAQ,OAAe,GAAA,EAAqB;AACnD,EAAA,OAAO,GAAG,IAAA,CAAK,KAAA,CAAO,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA,CAAA,CAAA;AAC3C;AASO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAqB;AACnB,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,GAAG,KAAK,GAAA,IAAO,CAAA;AAClC,IAAA,MAAM,IAAI,WAAW,4CAA4C,CAAA;AACnE,EAAA,IAAI,UAAU,MAAA,KAAc,CAAC,OAAO,QAAA,CAAS,KAAK,KAAK,KAAA,GAAQ,CAAA,CAAA;AAC7D,IAAA,MAAM,IAAI,WAAW,yCAAyC,CAAA;AAChE,EAAA,MAAM,UAAU,KAAA,KAAU,MAAA,GAAY,SAAY,IAAA,CAAK,GAAA,CAAI,OAAO,GAAG,CAAA;AACrE,EAAA,MAAM,OAAA,GAAU,EAAA,KAAO,MAAA,GAAY,MAAA,GAAY,GAAG,EAAE,CAAA,MAAA,CAAA;AACpD,EAAA,MAAM,UAAA,GACJ,cACC,SAAA,KAAc,OAAA,KAAY,SAAY,MAAA,GAAY,OAAA,CAAQ,SAAS,GAAG,CAAA,CAAA,CAAA;AACzE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,sBAAsB,CAAA;AAAA,MAC/D,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,oBAAA,EAAoB,OAAA,KAAY,MAAA,GAAY,EAAA,GAAK,MAAA;AAAA,MACjD,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,KAAU,UAAa,CAAC,UAAA,GAAa,uBACpC,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,0BAAA,EACR,QAAA,EAAA;AAAA,UAAA,KAAA,KAAU,MAAA,GAAY,uBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,OAAM,yBAAA,EAA0B,EAAA,EAAI,SACvC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,UAAA,uBACE,MAAA,EAAA,EAAK,KAAA,EAAM,2BAA0B,aAAA,EAAY,MAAA,EAC/C,sBACH,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA,wBAEF,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yBAAA;AAAA,YACN,KAAA,EAAO,OAAA;AAAA,YACP,GAAA;AAAA,YACA,YAAA,EAAY,OAAA,KAAY,MAAA,GAAa,KAAA,IAAS,SAAA,GAAa,MAAA;AAAA,YAC3D,iBAAA,EAAiB,OAAA;AAAA,YACjB,gBAAA,EAAgB;AAAA;AAAA;AAClB;AAAA;AAAA,GACF;AAEJ","file":"progress-bar.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\n\n/** The fill color: `brand` (default), or a status tone. */\nexport type ProgressTone = 'brand' | 'success' | 'warning' | 'danger';\n/** `default` is a 6px track; `compact` is 4px, for a row or table cell. */\nexport type ProgressBarSize = 'default' | 'compact';\n\n/**\n * Application `data-*` identity on the ProgressBar root, such as `data-key`;\n * its own configuration attributes stay protected.\n */\nexport type ProgressBarRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst PROGRESS_BAR_PROTECTED = new Set([\n  'data-component',\n  'data-tone',\n  'data-size',\n  'data-indeterminate',\n]);\n\nexport type ProgressBarProps = {\n  /**\n   * Work done so far, from 0 to `max`. Omit it for indeterminate progress\n   * (work whose size is unknown), which animates instead.\n   */\n  value?: number;\n  /** The amount that means done (default 1). */\n  max?: number;\n  /**\n   * Spoken progress in place of the percentage, such as \"3 of 12 files\". With\n   * `showValue` it is also the visible text.\n   */\n  valueText?: string;\n  /** Show the value (or `valueText`) at the end of the label row. */\n  showValue?: boolean;\n  tone?: ProgressTone;\n  size?: ProgressBarSize;\n  id?: string;\n  rootAttributes?: ProgressBarRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n} & (\n  | {\n      /** A visible label above the bar that also names it. */\n      label: string;\n      ariaLabel?: never;\n    }\n  | {\n      label?: never;\n      /** The bar's accessible name when it shows no visible label. */\n      ariaLabel: string;\n    }\n);\n\nfunction percent(value: number, max: number): string {\n  return `${Math.round((value / max) * 100)}%`;\n}\n\n/**\n * A linear progress indicator on the native `<progress>` element: determinate\n * (`value` of `max`) or indeterminate (no `value`, an animated sweep), named\n * by a visible `label` or an `ariaLabel`, toned, and in two track sizes. The\n * native element carries the progressbar role and its value to assistive\n * technology; `valueText` replaces the spoken percentage.\n */\nexport function ProgressBar({\n  value,\n  max = 1,\n  valueText,\n  showValue = false,\n  label,\n  ariaLabel,\n  tone = 'brand',\n  size = 'default',\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: ProgressBarProps) {\n  if (!Number.isFinite(max) || max <= 0)\n    throw new RangeError('ProgressBar max must be a positive number.');\n  if (value !== undefined && (!Number.isFinite(value) || value < 0))\n    throw new RangeError('ProgressBar value must be zero or more.');\n  const clamped = value === undefined ? undefined : Math.min(value, max);\n  const labelId = id === undefined ? undefined : `${id}-label`;\n  const shownValue =\n    showValue &&\n    (valueText ?? (clamped === undefined ? undefined : percent(clamped, max)));\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, PROGRESS_BAR_PROTECTED)}\n      id={id}\n      class={`kui-progress-bar ${className}`.trim()}\n      data-component=\"progress-bar\"\n      data-tone={tone}\n      data-size={size}\n      data-indeterminate={clamped === undefined ? '' : undefined}\n      slot={slot}\n    >\n      {label === undefined && !shownValue ? null : (\n        <div class=\"kui-progress-bar__header\">\n          {label === undefined ? null : (\n            <span class=\"kui-progress-bar__label\" id={labelId}>\n              {label}\n            </span>\n          )}\n          {shownValue ? (\n            <span class=\"kui-progress-bar__value\" aria-hidden=\"true\">\n              {shownValue}\n            </span>\n          ) : null}\n        </div>\n      )}\n      <progress\n        class=\"kui-progress-bar__track\"\n        value={clamped}\n        max={max}\n        aria-label={labelId === undefined ? (label ?? ariaLabel) : undefined}\n        aria-labelledby={labelId}\n        aria-valuetext={valueText}\n      />\n    </div>\n  );\n}\n"]}

package/dist/progress-ring.d.ts

@@ -0,0 +1,44 @@
+import * as kerfjs from 'kerfjs';
+import { ProgressTone } from './progress-bar.js';
+
+/**
+ * The ring's diameter: `small` (16px) sits in a line of text, `medium` (24px,
+ * the default) beside an icon in a row or toolbar, and `large` (40px) on its
+ * own.
+ */
+type ProgressRingSize = 'small' | 'medium' | 'large';
+/**
+ * Application `data-*` identity on the ProgressRing root, such as `data-key`;
+ * its own configuration attributes stay protected.
+ */
+type ProgressRingRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface ProgressRingProps {
+    /**
+     * Work done so far, from 0 to `max`. Omit it for indeterminate progress,
+     * which spins a short arc instead.
+     */
+    value?: number;
+    /** The amount that means done (default 1). */
+    max?: number;
+    /** The ring's accessible name, such as "Claim time remaining". */
+    label: string;
+    /** Spoken progress in place of the percentage, such as "12 minutes left". */
+    valueText?: string;
+    tone?: ProgressTone;
+    size?: ProgressRingSize;
+    id?: string;
+    rootAttributes?: ProgressRingRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A circular progress indicator: an SVG track and arc, determinate (`value`
+ * of `max`, filling clockwise from the top) or indeterminate (no `value`, a
+ * spinning arc), sized to sit inline in text, a row, or a toolbar. It is a
+ * `role="progressbar"` named by `label`, with `aria-valuenow` (as a
+ * percentage) or `valueText`.
+ */
+declare function ProgressRing({ value, max, label, valueText, tone, size, id, rootAttributes, className, slot, }: ProgressRingProps): kerfjs.SafeHtml;
+
+export { ProgressRing, type ProgressRingProps, type ProgressRingRootAttributes, type ProgressRingSize, ProgressTone };

package/dist/progress-ring.js

@@ -0,0 +1,73 @@
+import { remify } from './chunk-IQSRHXZR.js';
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsx, jsxs } from 'kerfjs/jsx-runtime';
+
+var RING_PIXELS = {
+  small: 16,
+  medium: 24,
+  large: 40
+};
+var PROGRESS_RING_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-tone",
+  "data-size",
+  "data-indeterminate"
+]);
+var RADIUS = 10.5;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function ProgressRing({
+  value,
+  max = 1,
+  label,
+  valueText,
+  tone = "brand",
+  size = "medium",
+  id,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  if (!Number.isFinite(max) || max <= 0)
+    throw new RangeError("ProgressRing max must be a positive number.");
+  if (value !== void 0 && (!Number.isFinite(value) || value < 0))
+    throw new RangeError("ProgressRing value must be zero or more.");
+  const fraction = value === void 0 ? void 0 : Math.min(value, max) / max;
+  const dash = fraction === void 0 ? CIRCUMFERENCE * 0.25 : CIRCUMFERENCE * fraction;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...filterDataAttributes(rootAttributes, PROGRESS_RING_PROTECTED),
+      id,
+      class: `kui-progress-ring ${className}`.trim(),
+      "data-component": "progress-ring",
+      "data-tone": tone,
+      "data-size": size,
+      "data-indeterminate": fraction === void 0 ? "" : void 0,
+      role: "progressbar",
+      "aria-label": label,
+      "aria-valuemin": fraction === void 0 ? void 0 : "0",
+      "aria-valuemax": fraction === void 0 ? void 0 : "100",
+      "aria-valuenow": fraction === void 0 ? void 0 : String(Math.round(fraction * 100)),
+      "aria-valuetext": valueText,
+      style: `--_kui-progress-ring-size:${remify(RING_PIXELS[size])}`,
+      slot,
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { class: "kui-progress-ring__track", cx: "12", cy: "12", r: RADIUS }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            class: "kui-progress-ring__arc",
+            cx: "12",
+            cy: "12",
+            r: RADIUS,
+            "stroke-dasharray": `${dash.toFixed(3)} ${CIRCUMFERENCE.toFixed(3)}`
+          }
+        )
+      ] })
+    }
+  );
+}
+
+export { ProgressRing };
+
+//# sourceMappingURL=progress-ring.js.map

package/dist/progress-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/progress-ring/progress-ring.tsx"],"names":[],"mappings":"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","file":"progress-ring.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport type { ProgressTone } from '../progress-bar/progress-bar.js';\n\nexport type { ProgressTone } from '../progress-bar/progress-bar.js';\n\n/**\n * The ring's diameter: `small` (16px) sits in a line of text, `medium` (24px,\n * the default) beside an icon in a row or toolbar, and `large` (40px) on its\n * own.\n */\nexport type ProgressRingSize = 'small' | 'medium' | 'large';\n\nconst RING_PIXELS: Record<ProgressRingSize, number> = {\n  small: 16,\n  medium: 24,\n  large: 40,\n};\n\n/**\n * Application `data-*` identity on the ProgressRing root, such as `data-key`;\n * its own configuration attributes stay protected.\n */\nexport type ProgressRingRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst PROGRESS_RING_PROTECTED = new Set([\n  'data-component',\n  'data-tone',\n  'data-size',\n  'data-indeterminate',\n]);\n\nexport interface ProgressRingProps {\n  /**\n   * Work done so far, from 0 to `max`. Omit it for indeterminate progress,\n   * which spins a short arc instead.\n   */\n  value?: number;\n  /** The amount that means done (default 1). */\n  max?: number;\n  /** The ring's accessible name, such as \"Claim time remaining\". */\n  label: string;\n  /** Spoken progress in place of the percentage, such as \"12 minutes left\". */\n  valueText?: string;\n  tone?: ProgressTone;\n  size?: ProgressRingSize;\n  id?: string;\n  rootAttributes?: ProgressRingRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** The circle's radius in the 24-unit viewBox, inside a 3-unit stroke. */\nconst RADIUS = 10.5;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\n/**\n * A circular progress indicator: an SVG track and arc, determinate (`value`\n * of `max`, filling clockwise from the top) or indeterminate (no `value`, a\n * spinning arc), sized to sit inline in text, a row, or a toolbar. It is a\n * `role=\"progressbar\"` named by `label`, with `aria-valuenow` (as a\n * percentage) or `valueText`.\n */\nexport function ProgressRing({\n  value,\n  max = 1,\n  label,\n  valueText,\n  tone = 'brand',\n  size = 'medium',\n  id,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: ProgressRingProps) {\n  if (!Number.isFinite(max) || max <= 0)\n    throw new RangeError('ProgressRing max must be a positive number.');\n  if (value !== undefined && (!Number.isFinite(value) || value < 0))\n    throw new RangeError('ProgressRing value must be zero or more.');\n  const fraction = value === undefined ? undefined : Math.min(value, max) / max;\n  const dash =\n    fraction === undefined ? CIRCUMFERENCE * 0.25 : CIRCUMFERENCE * fraction;\n  return (\n    <span\n      {...filterDataAttributes(rootAttributes, PROGRESS_RING_PROTECTED)}\n      id={id}\n      class={`kui-progress-ring ${className}`.trim()}\n      data-component=\"progress-ring\"\n      data-tone={tone}\n      data-size={size}\n      data-indeterminate={fraction === undefined ? '' : undefined}\n      role=\"progressbar\"\n      aria-label={label}\n      aria-valuemin={fraction === undefined ? undefined : '0'}\n      aria-valuemax={fraction === undefined ? undefined : '100'}\n      aria-valuenow={\n        fraction === undefined ? undefined : String(Math.round(fraction * 100))\n      }\n      aria-valuetext={valueText}\n      style={`--_kui-progress-ring-size:${remify(RING_PIXELS[size])}`}\n      slot={slot}\n    >\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <circle class=\"kui-progress-ring__track\" cx=\"12\" cy=\"12\" r={RADIUS} />\n        <circle\n          class=\"kui-progress-ring__arc\"\n          cx=\"12\"\n          cy=\"12\"\n          r={RADIUS}\n          stroke-dasharray={`${dash.toFixed(3)} ${CIRCUMFERENCE.toFixed(3)}`}\n        />\n      </svg>\n    </span>\n  );\n}\n"]}

package/dist/radio-group.d.ts

@@ -0,0 +1,62 @@
+import * as kerfjs from 'kerfjs';
+
+/** `default` is a 20px circle beside 16px text; `compact` 18px and 14px. */
+type RadioGroupSize = 'default' | 'compact';
+/** `vertical` stacks the choices; `horizontal` lines them up and wraps. */
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+/** Application `data-*` metadata; the RadioGroup's own markers stay protected. */
+type RadioGroupRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+interface RadioGroupChoice<Value extends string = string> {
+    value: Value;
+    /** Visible label; it is also the radio's accessible name. */
+    label: string;
+    /** Supporting text under this choice's label, also its description. */
+    hint?: string;
+    disabled?: boolean;
+}
+/** A group is named by a visible `label` (its legend) or by `ariaLabel`. */
+type RadioGroupName = {
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+};
+interface RadioGroupOptions<Value extends string = string> {
+    /** Native input `name`: the form field the selected value submits under. */
+    name: string;
+    choices: readonly RadioGroupChoice<Value>[];
+    /** The selected value. Omit for no selection. */
+    value?: NoInfer<Value>;
+    /** Supporting text below the choices, also the group's description. */
+    hint?: string;
+    /** A validation message: shown in the danger color and marking it invalid. */
+    error?: string;
+    size?: RadioGroupSize;
+    orientation?: RadioGroupOrientation;
+    /** Require a selection for native form validation. */
+    required?: boolean;
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Delegated `data-action` on every radio; listen for `change`. */
+    action?: string;
+    /** Associate the radios with a form outside their ancestor chain. */
+    form?: string;
+    /** The fieldset's id. */
+    id?: string;
+    className?: string;
+    /** Safe `data-*` metadata (a `data-key`). */
+    rootAttributes?: RadioGroupRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type RadioGroupProps<Value extends string = string> = RadioGroupName & RadioGroupOptions<Value>;
+/**
+ * One exclusive choice among a few visible options: a native fieldset of
+ * radios, each drawn as a Kerf circle beside its label, with the group label
+ * above and hint and error text below. The browser owns the interaction: one
+ * Tab stop, arrow keys move and select, and the checked value submits.
+ */
+declare function RadioGroup<Value extends string>({ label, ariaLabel, name, choices, value, hint, error, size, orientation, required, disabled, action, form, id, className, rootAttributes, slot, }: RadioGroupProps<Value>): kerfjs.SafeHtml;
+
+export { RadioGroup, type RadioGroupChoice, type RadioGroupName, type RadioGroupOptions, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupRootAttributes, type RadioGroupSize };

package/dist/radio-group.js

@@ -0,0 +1,4 @@
+export { RadioGroup } from './chunk-OHPYT2BH.js';
+
+
+//# sourceMappingURL=radio-group.js.map

package/dist/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"radio-group.js"}

package/dist/resizable-region.d.ts

@@ -1,7 +1,15 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
 
 type ResizableRegionAxis = 'horizontal' | 'vertical';
 type ResizableRegionEdge = 'start' | 'end';
+type ResizableRegionSeparator = 'auto' | 'hidden';
+type ResizableRegionCollapseMotion = 'none' | 'slide' | 'fade-slide';
+type ResizableRegionContentOverflow = 'clip' | 'auto' | 'visible';
+type ResizableRegionPresentation = 'inline' | 'overlay' | 'hidden';
+type ResizableRegionRestorePosition = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type ResizableRegionResponsiveFillAt = 'compact' | 'narrow';
 interface ResizableRegionProps {
     id: string;
     label: string;
@@ -10,14 +18,35 @@ interface ResizableRegionProps {
     max: number;
     axis?: ResizableRegionAxis;
     edge?: ResizableRegionEdge;
+    /** Snap the track to zero. The region renders `inert` and `aria-hidden`
+     * while collapsed, so neither Tab nor assistive technology reaches it or
+     * lands on an empty landmark; `restoreControl` renders outside the region. */
     collapsed?: boolean;
     transitioning?: boolean;
+    /** Whether the separator line is painted. The resize hit target remains available. */
+    separator?: ResizableRegionSeparator;
+    /** Keep the track change instant while optionally sliding the fixed-size content. */
+    collapseMotion?: ResizableRegionCollapseMotion;
+    /** Use `visible` while an anchored popup must escape the content box; it raises the region to the popup layer. */
+    contentOverflow?: ResizableRegionContentOverflow;
+    /** Inline layout, an edge overlay, or a responsive replacement that removes the region. */
+    presentation?: ResizableRegionPresentation;
+    /** Always-available control rendered while collapsed, outside the clipped region. */
+    restoreControl?: SafeHtml;
+    /** Safe-area-aware corner of the region's container (not the viewport) for `restoreControl`. */
+    restorePosition?: ResizableRegionRestorePosition;
+    /** Position a restore control in its container corner or leave it in normal flow. */
+    restorePlacement?: 'corner' | 'inline';
+    /** Corner distance before the container's safe-area inset. */
+    restoreInset?: CssLength;
+    /** Fill the available inline track and hide the separator below a container breakpoint. */
+    responsiveFillAt?: ResizableRegionResponsiveFillAt;
     /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */
     handleIcon?: SafeHtml;
-    children: SafeHtml | SafeHtml[];
+    children: KerfUiContent;
 }
 declare const clampRegionSize: (size: number, min: number, max: number) => number;
 declare const resizeRegionFromPointer: (startSize: number, delta: number, edge: ResizableRegionEdge) => number;
-declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, handleIcon, children }: ResizableRegionProps): SafeHtml;
+declare function ResizableRegion({ id, label, size, min, max, axis, edge, collapsed, transitioning, separator, collapseMotion, contentOverflow, presentation, restoreControl, restorePosition, restorePlacement, restoreInset, responsiveFillAt, handleIcon, children, }: ResizableRegionProps): SafeHtml;
 
-export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionEdge, type ResizableRegionProps, clampRegionSize, resizeRegionFromPointer };
+export { ResizableRegion, type ResizableRegionAxis, type ResizableRegionCollapseMotion, type ResizableRegionContentOverflow, type ResizableRegionEdge, type ResizableRegionPresentation, type ResizableRegionProps, type ResizableRegionResponsiveFillAt, type ResizableRegionRestorePosition, type ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer };

package/dist/resizable-region.js

@@ -1,3 +1,3 @@
-export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-M5JRI6MN.js';
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
 
 //# sourceMappingURL=resizable-region.js.map

package/dist/row.d.ts

@@ -0,0 +1,53 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
+import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { UiGap, CssFlexKeyword, CssFlex } from './css-values.js';
+export { CssLength, UiGapValue, UiSpaceName } from './css-values.js';
+
+type RowRootAttributes = StructuralRootAttributes & Readonly<{
+    'data-component'?: never;
+    'data-h-align'?: never;
+    'data-v-align'?: never;
+    'data-flex'?: never;
+    'data-fill'?: never;
+    'data-wrap'?: never;
+    'data-text-insets'?: never;
+    'data-control-insets'?: never;
+}>;
+interface RowProps {
+    children?: KerfUiContent;
+    /** Horizontal distribution. Defaults to left. */
+    hAlign?: HorizontalAlignment;
+    /** Vertical alignment and wrapped-line distribution. Defaults to full. */
+    vAlign?: VerticalAlignment;
+    /** One spacing value or separate column and row values. Defaults to xs. */
+    gap?: UiGap;
+    /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */
+    flex?: boolean | CssFlexKeyword | CssFlex;
+    /**
+     * Fill the height of a parent with a definite height, such as an app root or
+     * a fixed-height frame, when this row is that parent's layout root. Inside a
+     * flex layout use `flex` instead. Defaults to false.
+     */
+    fill?: boolean;
+    /** Allow children to wrap onto additional lines. */
+    wrap?: boolean;
+    /** Physical sides that receive the standard 17px text inset. */
+    textInsets?: Sides;
+    /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */
+    controlInsets?: Sides;
+    className?: string;
+    /**
+     * Safe `data-*`, `aria-*`, and structural `role` metadata (a named
+     * `region`, a `group`); Row-owned structural attributes remain protected.
+     */
+    rootAttributes?: RowRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A horizontal flex row with explicit physical-axis alignment and spacing. */
+declare function Row({ children, hAlign, vAlign, gap, flex, fill, wrap, textInsets, controlInsets, className, rootAttributes, slot, }: RowProps): kerfjs.SafeHtml;
+
+export { CssFlex, CssFlexKeyword, HorizontalAlignment, Row, type RowProps, Sides, UiGap, VerticalAlignment };

package/dist/row.js

@@ -0,0 +1,7 @@
+export { Row } from './chunk-AMIHGFLP.js';
+
+
+
+
+
+//# sourceMappingURL=row.js.map

package/dist/row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"row.js"}

package/dist/scroll-clearance-BikHljTc.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The block edges at which a scroll owner clears chrome that lies over it.
+ *
+ * Overlaying chrome publishes how far it covers a region's edge through the
+ * inherited `--kui-scroll-clearance-block-start` / `--kui-scroll-clearance-block-end`
+ * context (a `DialogSurface` floating footer publishes `block-end`). A scroll
+ * owner that opts in adds that clearance to its own block padding and
+ * `scroll-padding`, so its content scrolls visibly beneath the chrome while its
+ * first and last items, and anything focused or scrolled into view, can still
+ * come to rest clear of it.
+ */
+type ScrollClearance = 'block-start' | 'block-end' | 'both';
+
+export type { ScrollClearance as S };

package/dist/search-field-CrGTN5sa.d.ts

@@ -0,0 +1,208 @@
+import { SafeHtml, Signal, ReadonlySignal } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+interface SearchFieldToken {
+    value: string;
+    label: string;
+    offset?: number;
+    accessibleLabel?: string;
+}
+/**
+ * Domain `data-*` metadata for a trailing action button. The component owns
+ * `data-action` (pass `action`) and its state attributes.
+ */
+type SearchFieldTrailingActionAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-component'?: never;
+    'data-key'?: never;
+}>;
+interface SearchFieldTrailingActionBase {
+    /** Decorative glyph, such as a `LucideIcon`. */
+    icon: SafeHtml;
+    /** Accessible name and tooltip, in title style ("Search Help"). */
+    label: string;
+    /** Delegated `data-action` value. */
+    action: string;
+    id?: string;
+    /** `aria-controls`: the id of the surface this button opens or toggles. */
+    controls?: string;
+    /** `aria-haspopup` for a button that opens a dialog, menu, or listbox. */
+    haspopup?: 'dialog' | 'menu' | 'listbox' | 'true';
+    /** Domain `data-*` metadata for the app's delegated handler. */
+    attributes?: SearchFieldTrailingActionAttributes;
+}
+/**
+ * A compact icon button in the field's trailing slot, sized and styled like
+ * the clear button. Pass `expanded` for a disclosure (a help surface it opens)
+ * or `pressed` for a toggle; the button shows the state with its hover fill.
+ */
+type SearchFieldTrailingAction = SearchFieldTrailingActionBase & ({
+    expanded?: boolean;
+    pressed?: never;
+} | {
+    expanded?: never;
+    pressed?: boolean;
+});
+type SearchFieldEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip'?: never;
+    'data-search-field-editor'?: never;
+    'data-token-count'?: never;
+    'data-placeholder'?: never;
+}>;
+interface SearchFieldBaseProps {
+    id: string;
+    label: string;
+    query?: string;
+    tokens?: readonly SearchFieldToken[];
+    /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */
+    model?: SearchFieldModel;
+    /**
+     * Editor identity for a programmatic text replacement. The editor's text is
+     * DOM-owned between token changes, so a new `query` with the same tokens
+     * does not re-render it (that would reset the caret on every keystroke).
+     * Change `revision` when the app replaces the text itself — reseeding a
+     * persistent dialog's field on reopen, applying a saved search — and the
+     * editor is rebuilt from `query` and `tokens`.
+     */
+    revision?: string | number;
+    placeholder?: string;
+    tokenPlaceholder?: string;
+    disabled?: boolean;
+    autofocus?: boolean;
+    /** Let an expanded collapsible field consume the available inline width. */
+    fill?: boolean;
+    leading?: KerfUiContent;
+    editAction?: string;
+    removeAction?: string;
+    clearAction?: string;
+    clearLabel?: string;
+    /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */
+    clearIcon?: SafeHtml;
+    className?: string;
+    editorAttributes?: SearchFieldEditorAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+type SearchFieldTrailingProps = {
+    trailing?: KerfUiContent;
+    trailingAction?: never;
+} | {
+    trailing?: never;
+    trailingAction: SearchFieldTrailingAction;
+};
+type SearchFieldPresentationProps = {
+    /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
+    presentation?: 'standalone' | 'toolbar-group';
+    hint?: never;
+    required?: never;
+} | {
+    /** Visible form label and optional hint around the full-width standalone control. */
+    presentation: 'form-field';
+    hint?: string;
+    /** Marks the editor required; the app validates its value. */
+    required?: boolean;
+};
+type SearchFieldCollapsibleProps = {
+    /** Allow an empty field to render as one iconic action. */
+    collapsible: true;
+    /** Keep an empty collapsible field open while the application owns focus. */
+    expanded?: boolean;
+    expandAction?: string;
+    expandLabel?: string;
+} | {
+    collapsible?: false;
+    expanded?: never;
+    expandAction?: never;
+    expandLabel?: never;
+};
+type SearchFieldProps = SearchFieldBaseProps & SearchFieldCollapsibleProps & SearchFieldTrailingProps & SearchFieldPresentationProps;
+interface SearchFieldValue {
+    query: string;
+    tokens: SearchFieldToken[];
+}
+declare function SearchField({ id, label, query, tokens, model, revision, placeholder, tokenPlaceholder, disabled, autofocus, fill, collapsible, expanded, expandAction, expandLabel, leading, trailing, trailingAction, presentation, hint, required, editAction, removeAction, clearAction, clearLabel, clearIcon, className, editorAttributes, slot, }: SearchFieldProps): SafeHtml;
+/** Read editable text and ordered token offsets from a rendered SearchField editor. */
+declare function readSearchField(editor: HTMLElement, knownTokens?: readonly SearchFieldToken[]): SearchFieldValue;
+/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */
+declare function placeSearchFieldCaret(editor: HTMLElement, offset?: number): void;
+
+interface SearchFieldRule {
+    /** The word before `:` (for example `tag` or `status`). */
+    name: string;
+    /** Return a canonical value, or undefined to leave invalid input as text. */
+    parse?: (input: string) => string | undefined;
+    /** Label for a committed chip. Defaults to `name:input`. */
+    label?: (value: string, input: string) => string;
+    /** Suggestions for the unfinished value after `name:`, with current committed tokens. */
+    suggest?: (input: string, state: SearchFieldState) => readonly (string | {
+        value: string;
+        label: string;
+    })[];
+}
+interface SearchFieldResolvedToken extends SearchFieldToken {
+    kind: string;
+    parsedValue: string;
+}
+interface SearchFieldState {
+    query: string;
+    tokens: SearchFieldResolvedToken[];
+}
+interface SearchFieldSuggestion {
+    value: string;
+    label: string;
+}
+/**
+ * The render-relevant shape of a managed field: everything a host render
+ * needs to re-run for. Plain text edits do not change it.
+ */
+interface SearchFieldStructure {
+    /** Whether the free text is non-empty (drives clear, placeholder, and collapsed state). */
+    hasQuery: boolean;
+    /** Committed token values in editor order. */
+    tokenValues: readonly string[];
+    /** The model's editor revision (programmatic text replacement). */
+    editorRevision: number;
+}
+interface SearchFieldModel<Result = unknown> {
+    /**
+     * The live query and tokens. Changes on every keystroke: read it with
+     * `.peek()` (or in an event handler) to avoid subscribing a render per key.
+     */
+    state: Signal<SearchFieldState>;
+    /** Changes when a model action must replace DOM-owned editor text. */
+    editorRevision: Signal<number>;
+    /**
+     * Changes only on structural edits (a token committed, removed, or
+     * reordered; the text becoming empty or non-empty; an editor revision), and
+     * keeps the same reference otherwise. `SearchField` subscribes to this
+     * instead of `state`, so typing does not re-run the host render.
+     */
+    structure: ReadonlySignal<SearchFieldStructure>;
+    /** Visible suggestions. Publishes only when the list's content changes. */
+    suggestions: Signal<readonly SearchFieldSuggestion[]>;
+    result: Signal<Result | undefined>;
+    edit(value: SearchFieldValue, commit?: boolean): void;
+    /** Replace app-owned search state and rebuild the DOM-owned editor text. */
+    replace(value: SearchFieldValue): void;
+    submit(value: SearchFieldValue): void;
+    choose(value: string): void;
+    /** Commit a value for the active `name:` prefix, even when it is not suggested. */
+    commit(value: string): void;
+    expandToken(value: string): void;
+    remove(value: string): void;
+    clear(): void;
+    dismiss(): void;
+}
+interface SearchFieldModelOptions<Result> {
+    rules?: readonly SearchFieldRule[];
+    initial?: SearchFieldValue;
+    /** Runs after every state change, including initial state. */
+    evaluate?: (state: SearchFieldState) => Result;
+    onSubmit?: (state: SearchFieldState, result: Result | undefined) => void;
+}
+/** Opt-in state, token parsing, suggestions, and evaluation for SearchField. */
+declare function createSearchFieldModel<Result = unknown>({ rules, initial, evaluate, onSubmit, }?: SearchFieldModelOptions<Result>): SearchFieldModel<Result>;
+
+export { SearchField as S, type SearchFieldEditorAttributes as a, type SearchFieldModel as b, type SearchFieldModelOptions as c, type SearchFieldProps as d, type SearchFieldResolvedToken as e, type SearchFieldRule as f, type SearchFieldState as g, type SearchFieldStructure as h, type SearchFieldSuggestion as i, type SearchFieldToken as j, type SearchFieldTrailingAction as k, type SearchFieldTrailingActionAttributes as l, type SearchFieldValue as m, createSearchFieldModel as n, placeSearchFieldCaret as p, readSearchField as r };

package/dist/search-field-model.d.ts

@@ -0,0 +1,3 @@
+export { b as SearchFieldModel, c as SearchFieldModelOptions, e as SearchFieldResolvedToken, f as SearchFieldRule, g as SearchFieldState, h as SearchFieldStructure, i as SearchFieldSuggestion, n as createSearchFieldModel } from './search-field-CrGTN5sa.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';

package/dist/search-field-model.js

@@ -0,0 +1,3 @@
+export { createSearchFieldModel } from './chunk-CIAUILRR.js';
+
+//# sourceMappingURL=search-field-model.js.map

package/dist/search-field-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"search-field-model.js"}

package/dist/search-field.d.ts

@@ -0,0 +1,3 @@
+export { S as SearchField, a as SearchFieldEditorAttributes, d as SearchFieldProps, j as SearchFieldToken, k as SearchFieldTrailingAction, l as SearchFieldTrailingActionAttributes, m as SearchFieldValue, p as placeSearchFieldCaret, r as readSearchField } from './search-field-CrGTN5sa.js';
+import 'kerfjs';
+import './semantic-content-BbzjvSu9.js';

package/dist/search-field.js

@@ -0,0 +1,5 @@
+export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
+
+
+
+//# sourceMappingURL=search-field.js.map

package/dist/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"search-field.js"}

package/dist/segmented-control.d.ts

@@ -1,30 +1,35 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
 type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';
 type SegmentedControlShape = 'rounded' | 'pill';
 type SegmentedControlSize = 'small' | 'default';
 type SegmentedControlLayout = 'content' | 'equal';
-interface SegmentedControlChoice {
-    value: string;
+interface SegmentedControlChoice<Value extends string = string> {
+    value: Value;
     label: string;
-    content?: SafeHtml;
+    content?: KerfUiContent;
     title?: string;
     disabled?: boolean;
 }
-interface SegmentedControlProps {
+interface SegmentedControlProps<Value extends string = string> {
     id: string;
     label: string;
-    value: string;
-    choices: readonly SegmentedControlChoice[];
+    value: NoInfer<Value>;
+    choices: readonly SegmentedControlChoice<Value>[];
     action?: string;
     appearance?: SegmentedControlAppearance;
     shape?: SegmentedControlShape;
     size?: SegmentedControlSize;
     layout?: SegmentedControlLayout;
     className?: string;
-    /** Render as an unanimated loading skeleton, disabling every segment. */
+    /** Render as a loading placeholder: every choice keeps its live label or icon, none is selected, and every segment is disabled. */
     placeholder?: boolean;
+    /** 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. */
+    disabled?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function SegmentedControl({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, }: SegmentedControlProps): SafeHtml;
+declare function SegmentedControl<Value extends string>({ id, label, value, choices, action, appearance, shape, size, layout, className, placeholder, disabled, slot, }: SegmentedControlProps<Value>): kerfjs.SafeHtml;
 
 export { SegmentedControl, type SegmentedControlAppearance, type SegmentedControlChoice, type SegmentedControlLayout, type SegmentedControlProps, type SegmentedControlShape, type SegmentedControlSize };