@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

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/row.js

@@ -1,4 +1,4 @@
-export { Row } from './chunk-YQ2AC4E2.js';
+export { Row } from './chunk-AMIHGFLP.js';
 
 
 

package/dist/{token-search-model-aYR0YAei.d.ts → search-field-CrGTN5sa.d.ts}

@@ -1,7 +1,7 @@
-import { SafeHtml, Signal } from 'kerfjs';
+import { SafeHtml, Signal, ReadonlySignal } from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-interface TokenSearchToken {
+interface SearchFieldToken {
     value: string;
     label: string;
     offset?: number;
@@ -11,12 +11,12 @@ interface TokenSearchToken {
  * Domain `data-*` metadata for a trailing action button. The component owns
  * `data-action` (pass `action`) and its state attributes.
  */
-type TokenSearchTrailingActionAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type SearchFieldTrailingActionAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-action'?: never;
     'data-component'?: never;
     'data-key'?: never;
 }>;
-interface TokenSearchTrailingActionBase {
+interface SearchFieldTrailingActionBase {
     /** Decorative glyph, such as a `LucideIcon`. */
     icon: SafeHtml;
     /** Accessible name and tooltip, in title style ("Search Help"). */
@@ -29,35 +29,35 @@ interface TokenSearchTrailingActionBase {
     /** `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?: TokenSearchTrailingActionAttributes;
+    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 TokenSearchTrailingAction = TokenSearchTrailingActionBase & ({
+type SearchFieldTrailingAction = SearchFieldTrailingActionBase & ({
     expanded?: boolean;
     pressed?: never;
 } | {
     expanded?: never;
     pressed?: boolean;
 });
-type TokenSearchEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+type SearchFieldEditorAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-component'?: never;
     'data-key'?: never;
     'data-morph-skip'?: never;
-    'data-token-search-editor'?: never;
+    'data-search-field-editor'?: never;
     'data-token-count'?: never;
     'data-placeholder'?: never;
 }>;
-interface TokenSearchFieldBaseProps {
+interface SearchFieldBaseProps {
     id: string;
     label: string;
     query?: string;
-    tokens?: readonly TokenSearchToken[];
+    tokens?: readonly SearchFieldToken[];
     /** Opt-in grammar, suggestion, and evaluation state. Overrides `query` and `tokens`. */
-    model?: TokenSearchModel;
+    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
@@ -81,18 +81,18 @@ interface TokenSearchFieldBaseProps {
     /** Icon for the clear button. Default: the Lucide `x` glyph token chips also use. */
     clearIcon?: SafeHtml;
     className?: string;
-    editorAttributes?: TokenSearchEditorAttributes;
+    editorAttributes?: SearchFieldEditorAttributes;
     /** Native named-slot assignment when composed inside a web component. */
     slot?: string;
 }
-type TokenSearchTrailingProps = {
+type SearchFieldTrailingProps = {
     trailing?: KerfUiContent;
     trailingAction?: never;
 } | {
     trailing?: never;
-    trailingAction: TokenSearchTrailingAction;
+    trailingAction: SearchFieldTrailingAction;
 };
-type TokenSearchPresentationProps = {
+type SearchFieldPresentationProps = {
     /** Standalone field chrome or the inset visual layer of a configured toolbar group. */
     presentation?: 'standalone' | 'toolbar-group';
     hint?: never;
@@ -104,7 +104,7 @@ type TokenSearchPresentationProps = {
     /** Marks the editor required; the app validates its value. */
     required?: boolean;
 };
-type TokenSearchCollapsibleProps = {
+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. */
@@ -117,18 +117,18 @@ type TokenSearchCollapsibleProps = {
     expandAction?: never;
     expandLabel?: never;
 };
-type TokenSearchFieldProps = TokenSearchFieldBaseProps & TokenSearchCollapsibleProps & TokenSearchTrailingProps & TokenSearchPresentationProps;
-interface TokenSearchFieldValue {
+type SearchFieldProps = SearchFieldBaseProps & SearchFieldCollapsibleProps & SearchFieldTrailingProps & SearchFieldPresentationProps;
+interface SearchFieldValue {
     query: string;
-    tokens: TokenSearchToken[];
+    tokens: SearchFieldToken[];
 }
-declare function TokenSearchField({ 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, }: TokenSearchFieldProps): SafeHtml;
-/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */
-declare function readTokenSearchField(editor: HTMLElement, knownTokens?: readonly TokenSearchToken[]): TokenSearchFieldValue;
+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 placeTokenSearchCaret(editor: HTMLElement, offset?: number): void;
+declare function placeSearchFieldCaret(editor: HTMLElement, offset?: number): void;
 
-interface TokenSearchRule {
+interface SearchFieldRule {
     /** The word before `:` (for example `tag` or `status`). */
     name: string;
     /** Return a canonical value, or undefined to leave invalid input as text. */
@@ -136,33 +136,57 @@ interface TokenSearchRule {
     /** 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: TokenSearchState) => readonly (string | {
+    suggest?: (input: string, state: SearchFieldState) => readonly (string | {
         value: string;
         label: string;
     })[];
 }
-interface TokenSearchResolvedToken extends TokenSearchToken {
+interface SearchFieldResolvedToken extends SearchFieldToken {
     kind: string;
     parsedValue: string;
 }
-interface TokenSearchState {
+interface SearchFieldState {
     query: string;
-    tokens: TokenSearchResolvedToken[];
+    tokens: SearchFieldResolvedToken[];
 }
-interface TokenSearchSuggestion {
+interface SearchFieldSuggestion {
     value: string;
     label: string;
 }
-interface TokenSearchModel<Result = unknown> {
-    state: Signal<TokenSearchState>;
+/**
+ * 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>;
-    suggestions: Signal<readonly TokenSearchSuggestion[]>;
+    /**
+     * 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: TokenSearchFieldValue, commit?: boolean): void;
+    edit(value: SearchFieldValue, commit?: boolean): void;
     /** Replace app-owned search state and rebuild the DOM-owned editor text. */
-    replace(value: TokenSearchFieldValue): void;
-    submit(value: TokenSearchFieldValue): void;
+    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;
@@ -171,14 +195,14 @@ interface TokenSearchModel<Result = unknown> {
     clear(): void;
     dismiss(): void;
 }
-interface TokenSearchModelOptions<Result> {
-    rules?: readonly TokenSearchRule[];
-    initial?: TokenSearchFieldValue;
+interface SearchFieldModelOptions<Result> {
+    rules?: readonly SearchFieldRule[];
+    initial?: SearchFieldValue;
     /** Runs after every state change, including initial state. */
-    evaluate?: (state: TokenSearchState) => Result;
-    onSubmit?: (state: TokenSearchState, result: Result | undefined) => void;
+    evaluate?: (state: SearchFieldState) => Result;
+    onSubmit?: (state: SearchFieldState, result: Result | undefined) => void;
 }
-/** Opt-in state, token parsing, suggestions, and evaluation for TokenSearchField. */
-declare function createTokenSearchModel<Result = unknown>({ rules, initial, evaluate, onSubmit, }?: TokenSearchModelOptions<Result>): TokenSearchModel<Result>;
+/** Opt-in state, token parsing, suggestions, and evaluation for SearchField. */
+declare function createSearchFieldModel<Result = unknown>({ rules, initial, evaluate, onSubmit, }?: SearchFieldModelOptions<Result>): SearchFieldModel<Result>;
 
-export { type TokenSearchEditorAttributes as T, TokenSearchField as a, type TokenSearchFieldProps as b, type TokenSearchFieldValue as c, type TokenSearchModel as d, type TokenSearchModelOptions as e, type TokenSearchResolvedToken as f, type TokenSearchRule as g, type TokenSearchState as h, type TokenSearchSuggestion as i, type TokenSearchToken as j, type TokenSearchTrailingAction as k, type TokenSearchTrailingActionAttributes as l, createTokenSearchModel as m, placeTokenSearchCaret as p, readTokenSearchField as r };
+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/select-register.d.ts

@@ -1,7 +1,10 @@
 /**
- * Marker export for tests and tooling; importing this module performs registration.
- * Registers both the `Select` elements and the `Catalog` related-entries popup-menu
- * elements (`wa-dropdown` / `wa-dropdown-item` / `wa-button`).
+ * Marker export for tests and tooling; importing this module defines the
+ * `kui-select` root element and wires every `Select` in the document:
+ * opening, placement, keyboard navigation and typeahead, choosing, the
+ * select-all and clear actions, form participation, and dismissal. It also
+ * wires the `Catalog` related-entries `PopupMenu`s and registers the help tag
+ * an icon-only trigger shows on hover or keyboard focus.
  */
 declare const selectElementsRegistered = true;