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

package/dist/popup-menu.d.ts

@@ -0,0 +1,153 @@
+import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+
+type PopupMenuPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';
+type PopupMenuDataAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-action'?: never;
+    'data-component'?: never;
+    'data-key'?: never;
+    'data-morph-skip-children'?: never;
+}>;
+/** One command in the menu. */
+interface PopupMenuItem {
+    kind?: 'item';
+    label: string;
+    /** Delegated `data-action` the app handles when the item is chosen. */
+    action?: string;
+    /** The item's value, reported in the menu's `kui-menu-select` event. */
+    value?: string;
+    /** Leading icon, typically a `LucideIcon`, before the label. */
+    icon?: SafeHtml;
+    /** A checkbox choice, including nested choices; omit for a plain command. */
+    checked?: boolean;
+    /** Trailing safe content, such as secondary status. */
+    details?: SafeHtml;
+    /** Destructive command styling. */
+    tone?: 'default' | 'danger';
+    disabled?: boolean;
+    /** Native tooltip text for a disabled command. */
+    disabledReason?: string;
+    /** Application `data-*` metadata such as a record id. */
+    attributes?: PopupMenuDataAttributes;
+    /** Child commands, headings, and dividers opened by hover or keyboard navigation. */
+    submenu?: readonly PopupMenuEntry[];
+}
+/** A labeled group heading; items that follow it belong to the group. */
+interface PopupMenuHeading {
+    kind: 'heading';
+    label: string;
+}
+/** A separator between groups of items. */
+interface PopupMenuDivider {
+    kind: 'divider';
+}
+type PopupMenuEntry = PopupMenuItem | PopupMenuHeading | PopupMenuDivider;
+type PopupMenuTriggerName = {
+    /** Visible trigger text, which is also its accessible name. */
+    text: string;
+    label?: never;
+    triggerContent?: never;
+} | {
+    text?: never;
+    /**
+     * Accessible name of an icon-only trigger, rendered as visually hidden
+     * text inside the trigger button.
+     */
+    label: string;
+    triggerContent?: never;
+} | {
+    text?: never;
+    /**
+     * The trigger's accessible name ("Status: Started"); the visible
+     * content is hidden from assistive technology.
+     */
+    label: string;
+    /**
+     * Visible content that is the whole trigger, such as a `Badge` showing
+     * the current status. Kerf owns the bare button around it (no chrome,
+     * a pill focus ring, the pointer cursor, `aria-haspopup`), and the
+     * caret is off unless `caret` is set.
+     */
+    triggerContent: KerfUiContent;
+    icon?: never;
+};
+/** A context PopupMenu's viewport anchor point. */
+interface PopupMenuAnchor {
+    x: number;
+    y: number;
+}
+type PopupMenuTrigger = (PopupMenuTriggerName & {
+    context?: false;
+    anchor?: never;
+}) | {
+    context: true;
+    label: string;
+    triggerContent?: never;
+    /**
+     * The viewport point (CSS pixels, as in `MouseEvent.clientX/Y`) the
+     * menu opens from. Rendered into the menu itself, so it survives
+     * re-renders and replacement; open it with `openPopupMenu`.
+     */
+    anchor?: PopupMenuAnchor;
+    text?: never;
+    icon?: never;
+    caret?: never;
+    disabled?: never;
+};
+type PopupMenuProps = PopupMenuTrigger & {
+    /** Trigger icon, typically a `LucideIcon`, before any visible text. */
+    icon?: KerfUiContent;
+    items: readonly PopupMenuEntry[];
+    /**
+     * Where the menu opens relative to its trigger, or to its anchor point for
+     * a `context` menu (`top-start` opens above the point). Defaults to
+     * `bottom-start`.
+     */
+    placement?: PopupMenuPlacement;
+    /** Show the disclosure caret after the trigger content. Defaults to true. */
+    caret?: boolean;
+    disabled?: boolean;
+    /** Application `data-*` metadata on the menu root. */
+    rootAttributes?: PopupMenuDataAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+};
+/** A rendered PopupMenu root, the element the open and close helpers take. */
+type PopupMenuElement = HTMLElement;
+/**
+ * Open a PopupMenu at viewport pointer coordinates. A `context` menu rendered
+ * without `anchor` moves its invisible anchor there and opens at its
+ * `placement` (a menu rendered with `anchor` opens with `openPopupMenu`
+ * instead). A button-triggered menu (such
+ * as a `ListActionRow` trailing menu) opens `bottom-start` from the point,
+ * like a context menu, for this opening only; its next opening returns to its
+ * trigger and placement. `options.placement` sets the placement at the point
+ * for this opening instead (`top-start` sits above it, say), for either kind
+ * of menu; flipping, shifting, and the height cap still apply. Needs the
+ * `/register` entry.
+ */
+declare function openPopupMenuAt(menu: PopupMenuElement, x: number, y: number, options?: {
+    placement?: PopupMenuPlacement;
+}): void;
+/**
+ * Open a PopupMenu from its trigger, or a context PopupMenu at the `anchor`
+ * it was rendered with (or the point a previous `openPopupMenuAt` set).
+ * Needs the `/register` entry.
+ */
+declare function openPopupMenu(menu: PopupMenuElement): void;
+/** Close an open PopupMenu, and any submenu it shows. */
+declare function closePopupMenu(menu: PopupMenuElement): void;
+/**
+ * An action menu: a trigger button that opens a list of commands in the top
+ * layer. A `single` `ToolbarControlGroup` (with `nestedDropdown`) or a
+ * `PopupSurface` sizes and insets it as usual. Items dispatch through
+ * delegated `data-action`s, and the root reports each choice as a bubbling
+ * `kui-menu-select` event; the app owns the commands and any open-state reaction.
+ * Import `@kerfjs/ui/popup-menu/register` once to wire opening, keyboard
+ * navigation, submenus, and dismissal. At viewport widths up to 480px,
+ * submenus appear above or below their parent menu so their rows do not cover
+ * the parent list.
+ */
+declare function PopupMenu({ text, label, icon, triggerContent, items, placement, caret, disabled, rootAttributes, slot, context, anchor, }: PopupMenuProps): SafeHtml;
+
+export { PopupMenu, type PopupMenuAnchor, type PopupMenuDivider, type PopupMenuElement, type PopupMenuEntry, type PopupMenuHeading, type PopupMenuItem, type PopupMenuPlacement, type PopupMenuProps, closePopupMenu, openPopupMenu, openPopupMenuAt };

package/dist/popup-menu.js

@@ -0,0 +1,7 @@
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
+
+
+
+
+
+//# sourceMappingURL=popup-menu.js.map

package/dist/popup-menu.js.map

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

package/dist/progress-bar.d.ts

@@ -0,0 +1,52 @@
+import * as kerfjs from 'kerfjs';
+
+/** The fill color: `brand` (default), or a status tone. */
+type ProgressTone = 'brand' | 'success' | 'warning' | 'danger';
+/** `default` is a 6px track; `compact` is 4px, for a row or table cell. */
+type ProgressBarSize = 'default' | 'compact';
+/**
+ * Application `data-*` identity on the ProgressBar root, such as `data-key`;
+ * its own configuration attributes stay protected.
+ */
+type ProgressBarRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type ProgressBarProps = {
+    /**
+     * Work done so far, from 0 to `max`. Omit it for indeterminate progress
+     * (work whose size is unknown), which animates instead.
+     */
+    value?: number;
+    /** The amount that means done (default 1). */
+    max?: number;
+    /**
+     * Spoken progress in place of the percentage, such as "3 of 12 files". With
+     * `showValue` it is also the visible text.
+     */
+    valueText?: string;
+    /** Show the value (or `valueText`) at the end of the label row. */
+    showValue?: boolean;
+    tone?: ProgressTone;
+    size?: ProgressBarSize;
+    id?: string;
+    rootAttributes?: ProgressBarRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    /** A visible label above the bar that also names it. */
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    /** The bar's accessible name when it shows no visible label. */
+    ariaLabel: string;
+});
+/**
+ * A linear progress indicator on the native `<progress>` element: determinate
+ * (`value` of `max`) or indeterminate (no `value`, an animated sweep), named
+ * by a visible `label` or an `ariaLabel`, toned, and in two track sizes. The
+ * native element carries the progressbar role and its value to assistive
+ * technology; `valueText` replaces the spoken percentage.
+ */
+declare function ProgressBar({ value, max, valueText, showValue, label, ariaLabel, tone, size, id, rootAttributes, className, slot, }: ProgressBarProps): kerfjs.SafeHtml;
+
+export { ProgressBar, type ProgressBarProps, type ProgressBarRootAttributes, type ProgressBarSize, type ProgressTone };

package/dist/progress-bar.js

@@ -0,0 +1,68 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var PROGRESS_BAR_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-tone",
+  "data-size",
+  "data-indeterminate"
+]);
+function percent(value, max) {
+  return `${Math.round(value / max * 100)}%`;
+}
+function ProgressBar({
+  value,
+  max = 1,
+  valueText,
+  showValue = false,
+  label,
+  ariaLabel,
+  tone = "brand",
+  size = "default",
+  id,
+  rootAttributes = {},
+  className = "",
+  slot
+}) {
+  if (!Number.isFinite(max) || max <= 0)
+    throw new RangeError("ProgressBar max must be a positive number.");
+  if (value !== void 0 && (!Number.isFinite(value) || value < 0))
+    throw new RangeError("ProgressBar value must be zero or more.");
+  const clamped = value === void 0 ? void 0 : Math.min(value, max);
+  const labelId = id === void 0 ? void 0 : `${id}-label`;
+  const shownValue = showValue && (valueText ?? (clamped === void 0 ? void 0 : percent(clamped, max)));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, PROGRESS_BAR_PROTECTED),
+      id,
+      class: `kui-progress-bar ${className}`.trim(),
+      "data-component": "progress-bar",
+      "data-tone": tone,
+      "data-size": size,
+      "data-indeterminate": clamped === void 0 ? "" : void 0,
+      slot,
+      children: [
+        label === void 0 && !shownValue ? null : /* @__PURE__ */ jsxs("div", { class: "kui-progress-bar__header", children: [
+          label === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-progress-bar__label", id: labelId, children: label }),
+          shownValue ? /* @__PURE__ */ jsx("span", { class: "kui-progress-bar__value", "aria-hidden": "true", children: shownValue }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "progress",
+          {
+            class: "kui-progress-bar__track",
+            value: clamped,
+            max,
+            "aria-label": labelId === void 0 ? label ?? ariaLabel : void 0,
+            "aria-labelledby": labelId,
+            "aria-valuetext": valueText
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ProgressBar };
+
+//# sourceMappingURL=progress-bar.js.map

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 };