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

package/dist/select.d.ts

@@ -1,31 +1,150 @@
 import { SafeHtml } from 'kerfjs';
+import { KerfCustomElement } from 'kerfjs/jsx-runtime';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssForegroundColor, CssLength } from './css-values.js';
 import { LucideNode } from './lucide-icon.js';
 import 'lucide';
 
+declare module 'kerfjs/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            /** The Select root: a light-DOM form control defined by `select/register`. */
+            'kui-select': KerfCustomElement & {
+                class?: string;
+                name?: string;
+                value?: string;
+                multiple?: boolean;
+                disabled?: boolean;
+                style?: string;
+                slot?: string;
+            };
+        }
+    }
+}
 interface SelectChoice<Value extends string = string> {
     value: Value;
     label: string;
     icon?: LucideNode;
     iconName?: string;
-    color?: string;
+    /**
+     * Foreground color for the optional icon: a semantic foreground token such
+     * as `uiColor('success-on-quiet')`, or an application-owned
+     * `foregroundColorVar('--app-icon-color')`. Fill tokens such as
+     * `uiColor('success-fill-quiet')` are pale background tints and do not
+     * type-check.
+     */
+    color?: CssForegroundColor;
     group?: string;
+    /** Keep an unavailable choice visible but prevent selection. */
+    disabled?: boolean;
+    /** Optional explanation exposed as the disabled option's native tooltip. */
+    disabledReason?: string;
+    /**
+     * Draw a divider between this choice and the previous choice in the same
+     * list. A group boundary is already a separator, so the first choice of a
+     * group (or of the whole menu) never draws a second one.
+     */
     separatorBefore?: boolean;
 }
-interface SelectProps<Value extends string = string> {
-    name: string;
-    value: Value;
-    label?: string;
+type SelectAccessibleName = {
+    label: string;
     ariaLabel?: string;
+} | {
+    label?: never;
+    ariaLabel: string;
+};
+type SelectPresentation = 'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';
+type SelectSize = 'default' | 'compact';
+type SelectSelectedPresentation = 'label' | 'icon-only';
+type SelectFocusRingOwner = 'select' | 'group';
+type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';
+interface SelectBaseProps<Value extends string = string> {
+    name: string;
     choices: readonly SelectChoice<Value>[];
     className?: string;
-    /** Empty-value hint text shown in the closed control (the native select placeholder). */
+    /** Empty-value hint text shown in the closed control. */
     placeholderText?: string;
+    /** Supporting text shown below the control and announced as its description. */
+    hint?: string;
     disabled?: boolean;
+    /** Match menu width to the trigger; default menus grow to content within viewport gutters. */
     fitMenu?: boolean;
-    renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;
     /** Render as an unanimated loading skeleton: the label above a static, empty control box. */
     placeholder?: boolean;
+    /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */
+    presentation?: SelectPresentation;
+    size?: SelectSize;
+    /** Closed trigger width; omit to keep the presentation's default. */
+    triggerWidth?: SelectTriggerWidth;
+    /**
+     * The widest the closed trigger grows, under any presentation; its value
+     * (or `renderSelected` content) ellipsizes inside it and the caret stays.
+     */
+    maxTriggerWidth?: CssLength;
+    /** The narrowest the closed trigger gets. */
+    minTriggerWidth?: CssLength;
+    /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */
+    caret?: boolean;
+    /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */
+    focusRingOwner?: SelectFocusRingOwner;
+    /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */
+    focusRingInset?: boolean;
+    /** Maximum closed-control label width in CSS pixels before ellipsis. */
+    labelMaxWidth?: number;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** One chosen value (the default). */
+interface SelectSingleValueProps<Value extends string = string> {
+    multiple?: false;
+    value: NoInfer<Value>;
+    renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;
+    /** Show only the selected choice icon while retaining the Select's accessible name. */
+    selectedPresentation?: SelectSelectedPresentation;
+    triggerIcon?: never;
+    selectAllLabel?: never;
+    clearLabel?: never;
+}
+/**
+ * Any number of chosen values. The popup stays open while the person toggles
+ * choices and closes on an outside press, Escape, or Tab; the closed control
+ * summarizes the chosen labels in choice order.
+ */
+interface SelectMultipleLabelProps<Value extends string = string> {
+    multiple: true;
+    value: readonly NoInfer<Value>[];
+    renderSelected?: never;
+    selectedPresentation?: 'label';
+    triggerIcon?: never;
+    /** Opt in to a footer action that selects every enabled choice. */
+    selectAllLabel?: string;
+    /** Opt in to a footer action that clears the current selection. */
+    clearLabel?: string;
+}
+/**
+ * A multiple Select drawn as an icon-only toolbar trigger, such as a
+ * "Filter by label" funnel. No single choice is selected, so the trigger shows
+ * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen
+ * a count badge sits beside it, and the trigger's accessible name ends with
+ * the chosen labels in choice order.
+ */
+interface SelectMultipleIconProps<Value extends string = string> {
+    multiple: true;
+    value: readonly NoInfer<Value>[];
+    renderSelected?: never;
+    selectedPresentation: 'icon-only';
+    /**
+     * The trigger's fixed icon, typically a `LucideIcon` naming the menu's
+     * purpose (a funnel for a filter), independent of the selection.
+     */
+    triggerIcon: KerfUiContent;
+    /** Opt in to a footer action that selects every enabled choice. */
+    selectAllLabel?: string;
+    /** Opt in to a footer action that clears the current selection. */
+    clearLabel?: string;
 }
-declare function Select<Value extends string>({ name, value, label, ariaLabel, choices, className, placeholderText, disabled, fitMenu, renderSelected, placeholder }: SelectProps<Value>): SafeHtml;
+type SelectMultipleValueProps<Value extends string = string> = SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;
+type SelectProps<Value extends string = string> = SelectBaseProps<Value> & SelectAccessibleName & (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);
+declare function Select<Value extends string>(props: SelectProps<Value>): SafeHtml;
 
-export { Select, type SelectChoice, type SelectProps };
+export { Select, type SelectChoice, type SelectFocusRingOwner, type SelectMultipleIconProps, type SelectMultipleLabelProps, type SelectMultipleValueProps, type SelectPresentation, type SelectProps, type SelectSelectedPresentation, type SelectSingleValueProps, type SelectSize, type SelectTriggerWidth };

package/dist/select.js

@@ -1,4 +1,9 @@
-export { Select } from './chunk-CH4SQ6H5.js';
+export { Select } from './chunk-ZX2QQJXD.js';
+
+
+
+
+
 
 
 

package/dist/selection.d.ts

@@ -0,0 +1,54 @@
+/**
+ * What a pointer or key activation does to a multi-selection:
+ * - `replace`: select only the target (a plain click or Enter);
+ * - `toggle`: add or remove the target, keeping the rest (Cmd on Apple
+ *   platforms, Ctrl elsewhere);
+ * - `extend`: select the range from the anchor to the target (Shift).
+ */
+type SelectionGesture = 'replace' | 'toggle' | 'extend';
+/** The modifier state of a `MouseEvent` or `KeyboardEvent`. */
+interface SelectionModifiers {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}
+/** True on macOS, iOS, and iPadOS, where Cmd (not Ctrl) toggles one item. */
+declare function isApplePlatform(navigatorLike?: Pick<Navigator, 'platform' | 'userAgent'> | undefined): boolean;
+/**
+ * Map an activation's modifiers to a {@link SelectionGesture}, normalized for
+ * the host platform: Shift extends; Cmd on Apple platforms, Ctrl elsewhere,
+ * toggles; anything else replaces.
+ */
+declare function selectionGesture(modifiers: SelectionModifiers, apple?: boolean): SelectionGesture;
+interface ApplySelectionOptions<Id> {
+    /** Every selectable id, in display order (leave out disabled items). */
+    readonly items: readonly Id[];
+    /** The current selection. */
+    readonly selected: readonly Id[];
+    /**
+     * The last replaced or toggled item; a Shift range starts here. Without
+     * one, the range starts at the first selected item, then at the target.
+     */
+    readonly anchor?: Id;
+    /** The activated item. */
+    readonly target: Id;
+    readonly gesture: SelectionGesture;
+}
+interface SelectionResult<Id> {
+    /** The new selection, in display order. */
+    readonly selected: Id[];
+    /** The anchor for the next Shift range. */
+    readonly anchor: Id;
+}
+/**
+ * Apply one selection gesture to a multi-selection, the conventional desktop
+ * list model: `replace` selects only the target, `toggle` flips it and keeps
+ * the rest, and `extend` selects the range from the anchor (the first
+ * selected item when there is none, else the target) to the target. The anchor moves to the target on
+ * `replace` and `toggle` and stays put on `extend`, so successive Shift
+ * activations pivot around one item. A target missing from `items` (such as a
+ * disabled item) leaves the selection unchanged.
+ */
+declare function applySelection<Id>({ items, selected, anchor, target, gesture, }: ApplySelectionOptions<Id>): SelectionResult<Id>;
+
+export { type ApplySelectionOptions, type SelectionGesture, type SelectionModifiers, type SelectionResult, applySelection, isApplePlatform, selectionGesture };

package/dist/selection.js

@@ -0,0 +1,3 @@
+export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
+
+//# sourceMappingURL=selection.js.map

package/dist/selection.js.map

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

package/dist/semantic-content-BbzjvSu9.d.ts

@@ -0,0 +1,14 @@
+import { SafeHtml } from 'kerfjs';
+
+/**
+ * Renderable content for semantic Kerf UI component positions.
+ *
+ * Unlike core JSX children, UI content intentionally excludes raw strings,
+ * numbers, and signals: semantic component zones should contain trusted
+ * `SafeHtml` components. Boolean and nullish values render nothing, and nested
+ * readonly arrays let conditionals and mapped component collections compose
+ * directly without an otherwise-unnecessary Fragment.
+ */
+type KerfUiContent = SafeHtml | boolean | null | undefined | readonly KerfUiContent[];
+
+export type { KerfUiContent as K };

package/dist/semantic-tone-CdW013KF.d.ts

@@ -0,0 +1,4 @@
+/** Shared semantic color roles for metadata, feedback, and content surfaces. */
+type SemanticTone = 'neutral' | 'info' | 'pop' | 'success' | 'warning' | 'danger';
+
+export type { SemanticTone as S };

package/dist/sides-BPSWde0A.d.ts

@@ -0,0 +1,4 @@
+/** Canonical physical edge combinations in top/right/bottom/left order. */
+type Sides = '' | 't' | 'r' | 'b' | 'l' | 'tr' | 'tb' | 'tl' | 'rb' | 'rl' | 'bl' | 'trb' | 'trl' | 'tbl' | 'rbl' | 'trbl';
+
+export type { Sides as S };

package/dist/skeleton.d.ts

@@ -1,17 +1,24 @@
 import * as kerfjs from 'kerfjs';
+import { CssSize, CssLength } from './css-values.js';
 
 interface SkeletonProps {
-    /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */
-    width?: string;
-    /** Height as any CSS length. Defaults to a single text line. */
-    height?: string;
-    /** Corner radius override (a CSS length). Defaults to the small radius token. */
-    radius?: string;
+    /** Typed width or intrinsic sizing keyword. Defaults to filling its slot. */
+    width?: CssSize;
+    /** Typed height or intrinsic sizing keyword. Defaults to a single text line. */
+    height?: CssSize;
+    /** Typed corner-radius override. Defaults to the small radius token. */
+    radius?: CssLength;
     /** Render this many stacked lines (the last one shorter), for multi-line text. */
     lines?: number;
+    /** Lay the block out as `display: block` instead of the default
+     *  `inline-block`, so it takes no text line of its own: no baseline gap
+     *  below it, and it centers like an icon in a slot. Defaults to `false`. */
+    block?: boolean;
     /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */
     label?: string;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A subtle, deliberately **unanimated** loading placeholder block. Use it for a
@@ -19,6 +26,6 @@ interface SkeletonProps {
  * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to
  * announce it. Sizes to its slot unless `width`/`height` are given.
  */
-declare function Skeleton({ width, height, radius, lines, label, className }: SkeletonProps): kerfjs.SafeHtml;
+declare function Skeleton({ width, height, radius, lines, block, label, className, slot, }: SkeletonProps): kerfjs.SafeHtml;
 
 export { Skeleton, type SkeletonProps };

package/dist/skeleton.js

@@ -1,3 +1,4 @@
-export { Skeleton } from './chunk-B24C4A6T.js';
+export { Skeleton } from './chunk-CVD5IZGB.js';
+
 
 //# sourceMappingURL=skeleton.js.map

package/dist/slider.d.ts

@@ -0,0 +1,74 @@
+import * as kerfjs from 'kerfjs';
+import { CssLength } from './css-values.js';
+
+/** `default` is a 4px track with a 20px thumb at 16px text; `compact` 3px, 16px, and 14px. */
+type SliderSize = 'default' | 'compact';
+/** `horizontal` (default), or `vertical` with its minimum at the bottom. */
+type SliderOrientation = 'horizontal' | 'vertical';
+/**
+ * A labeled stop under the track: a value and the text shown for it. The
+ * labels are visual; the input still reports its value to assistive
+ * technology. (No `<datalist>`: Chromium shrinks a styled range's track when
+ * the input has a `list`.)
+ */
+interface SliderTick {
+    value: number;
+    label?: string;
+}
+/** Application `data-*` metadata; the Slider's own markers stay protected. */
+type SliderRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
+type SliderProps = {
+    /** The input's id; it also derives the readout, hint, and tick ids. */
+    id: string;
+    /** The current value (default the midpoint of `min` and `max`, snapped to `step`). */
+    value?: number;
+    /** The lowest value (default 0). */
+    min?: number;
+    /** The highest value (default 100). */
+    max?: number;
+    /** The step between values (default 1). */
+    step?: number;
+    name?: string;
+    /** Show the current value at the end of the label row, live while dragging. */
+    showValue?: boolean;
+    /** Text after the readout's number, such as `%` or ` px`. */
+    unit?: string;
+    /** Supporting text below the slider, also its description. */
+    hint?: string;
+    /** Labeled stops under the track. */
+    ticks?: readonly SliderTick[];
+    /**
+     * `vertical` stands the slider up (a volume control in a popup), minimum at
+     * the bottom, `length` tall; it takes no `ticks`.
+     */
+    orientation?: SliderOrientation;
+    /** A vertical slider's length (default 160px). */
+    length?: CssLength;
+    size?: SliderSize;
+    disabled?: boolean;
+    /** Delegated `data-action` on the input; listen for `input` or `change`. */
+    action?: string;
+    /** Associate the input with a form outside its ancestor chain. */
+    form?: string;
+    className?: string;
+    rootAttributes?: SliderRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+} & ({
+    label: string;
+    ariaLabel?: never;
+} | {
+    label?: never;
+    ariaLabel: string;
+});
+/**
+ * A value on a continuous or stepped range: a native `<input type="range">`
+ * drawn as a track, a brand fill up to the value, and a thumb, with a label
+ * row, an optional live readout (`<output>`), labeled tick stops, and a hint.
+ * Keyboard, pointer, and screen-reader behavior are the platform's. Wire
+ * `wireSliders` from `@kerfjs/ui/wire-sliders` above it so the fill and the
+ * readout follow a drag before the app re-renders.
+ */
+declare function Slider({ id, value, min, max, step, name, label, ariaLabel, showValue, unit, hint, ticks, size, orientation, length, disabled, action, form, className, rootAttributes, slot, }: SliderProps): kerfjs.SafeHtml;
+
+export { Slider, type SliderOrientation, type SliderProps, type SliderRootAttributes, type SliderSize, type SliderTick };

package/dist/slider.js

@@ -0,0 +1,103 @@
+import { filterDataAttributes } from './chunk-KH4KEMSP.js';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var SLIDER_PROTECTED = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-size",
+  "data-orientation",
+  "data-unit"
+]);
+function fractionOf(value, min, max) {
+  return max === min ? 0 : (value - min) / (max - min);
+}
+function percent(fraction) {
+  return `${Number((fraction * 100).toFixed(4))}%`;
+}
+function Slider({
+  id,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  name,
+  label,
+  ariaLabel,
+  showValue = false,
+  unit = "",
+  hint,
+  ticks,
+  size = "default",
+  orientation = "horizontal",
+  length,
+  disabled = false,
+  action,
+  form,
+  className = "",
+  rootAttributes = {},
+  slot
+}) {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max < min)
+    throw new RangeError("Slider max must be a number at least min.");
+  if (!Number.isFinite(step) || step <= 0)
+    throw new RangeError("Slider step must be a positive number.");
+  if (orientation === "vertical" && ticks !== void 0)
+    throw new TypeError("A vertical Slider takes no ticks.");
+  const current = Math.min(
+    max,
+    Math.max(min, value ?? min + Math.round((max - min) / 2 / step) * step)
+  );
+  const hintId = hint === void 0 ? void 0 : `${id}-hint`;
+  const ticksId = ticks === void 0 ? void 0 : `${id}-ticks`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...filterDataAttributes(rootAttributes, SLIDER_PROTECTED),
+      class: `kui-slider ${className}`.trim(),
+      "data-component": "slider",
+      "data-size": size,
+      "data-orientation": orientation === "vertical" ? "vertical" : void 0,
+      "data-unit": unit || void 0,
+      style: length === void 0 ? void 0 : `--_kui-slider-length:${length}`,
+      slot,
+      children: [
+        label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs("div", { class: "kui-slider__header", children: [
+          label === void 0 ? null : /* @__PURE__ */ jsx("label", { class: "kui-slider__label", for: id, children: label }),
+          showValue ? /* @__PURE__ */ jsx("output", { class: "kui-slider__value", for: id, "aria-hidden": "true", children: `${current}${unit}` }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            class: "kui-slider__input",
+            type: "range",
+            id,
+            name,
+            min,
+            max,
+            step,
+            value: String(current),
+            form,
+            disabled,
+            "data-action": action,
+            "aria-label": ariaLabel,
+            "aria-describedby": hintId,
+            "aria-valuetext": unit ? `${current}${unit}` : void 0,
+            style: `--_kui-slider-fill:${percent(fractionOf(current, min, max))}`
+          }
+        ),
+        ticks === void 0 ? null : /* @__PURE__ */ jsx("div", { class: "kui-slider__ticks", id: ticksId, "aria-hidden": "true", children: ticks.map((tick) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            class: "kui-slider__tick",
+            style: `--_kui-slider-tick:${percent(fractionOf(Math.min(max, Math.max(min, tick.value)), min, max))}`,
+            children: tick.label ?? ""
+          }
+        )) }),
+        hint === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-slider__hint", id: hintId, children: hint })
+      ]
+    }
+  );
+}
+
+export { Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/slider/slider.tsx"],"names":[],"mappings":"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","file":"slider.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\n/** `default` is a 4px track with a 20px thumb at 16px text; `compact` 3px, 16px, and 14px. */\nexport type SliderSize = 'default' | 'compact';\n\n/** `horizontal` (default), or `vertical` with its minimum at the bottom. */\nexport type SliderOrientation = 'horizontal' | 'vertical';\n\n/**\n * A labeled stop under the track: a value and the text shown for it. The\n * labels are visual; the input still reports its value to assistive\n * technology. (No `<datalist>`: Chromium shrinks a styled range's track when\n * the input has a `list`.)\n */\nexport interface SliderTick {\n  value: number;\n  label?: string;\n}\n\n/** Application `data-*` metadata; the Slider's own markers stay protected. */\nexport type SliderRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst SLIDER_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-orientation',\n  'data-unit',\n]);\n\nexport type SliderProps = {\n  /** The input's id; it also derives the readout, hint, and tick ids. */\n  id: string;\n  /** The current value (default the midpoint of `min` and `max`, snapped to `step`). */\n  value?: number;\n  /** The lowest value (default 0). */\n  min?: number;\n  /** The highest value (default 100). */\n  max?: number;\n  /** The step between values (default 1). */\n  step?: number;\n  name?: string;\n  /** Show the current value at the end of the label row, live while dragging. */\n  showValue?: boolean;\n  /** Text after the readout's number, such as `%` or ` px`. */\n  unit?: string;\n  /** Supporting text below the slider, also its description. */\n  hint?: string;\n  /** Labeled stops under the track. */\n  ticks?: readonly SliderTick[];\n  /**\n   * `vertical` stands the slider up (a volume control in a popup), minimum at\n   * the bottom, `length` tall; it takes no `ticks`.\n   */\n  orientation?: SliderOrientation;\n  /** A vertical slider's length (default 160px). */\n  length?: CssLength;\n  size?: SliderSize;\n  disabled?: boolean;\n  /** Delegated `data-action` on the input; listen for `input` or `change`. */\n  action?: string;\n  /** Associate the input with a form outside its ancestor chain. */\n  form?: string;\n  className?: string;\n  rootAttributes?: SliderRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n} & (\n  { label: string; ariaLabel?: never } | { label?: never; ariaLabel: string }\n);\n\nfunction fractionOf(value: number, min: number, max: number): number {\n  return max === min ? 0 : (value - min) / (max - min);\n}\n\nfunction percent(fraction: number): string {\n  return `${Number((fraction * 100).toFixed(4))}%`;\n}\n\n/**\n * A value on a continuous or stepped range: a native `<input type=\"range\">`\n * drawn as a track, a brand fill up to the value, and a thumb, with a label\n * row, an optional live readout (`<output>`), labeled tick stops, and a hint.\n * Keyboard, pointer, and screen-reader behavior are the platform's. Wire\n * `wireSliders` from `@kerfjs/ui/wire-sliders` above it so the fill and the\n * readout follow a drag before the app re-renders.\n */\nexport function Slider({\n  id,\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  name,\n  label,\n  ariaLabel,\n  showValue = false,\n  unit = '',\n  hint,\n  ticks,\n  size = 'default',\n  orientation = 'horizontal',\n  length,\n  disabled = false,\n  action,\n  form,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: SliderProps) {\n  if (!Number.isFinite(min) || !Number.isFinite(max) || max < min)\n    throw new RangeError('Slider max must be a number at least min.');\n  if (!Number.isFinite(step) || step <= 0)\n    throw new RangeError('Slider step must be a positive number.');\n  if (orientation === 'vertical' && ticks !== undefined)\n    throw new TypeError('A vertical Slider takes no ticks.');\n  const current = Math.min(\n    max,\n    Math.max(min, value ?? min + Math.round((max - min) / 2 / step) * step),\n  );\n  const hintId = hint === undefined ? undefined : `${id}-hint`;\n  const ticksId = ticks === undefined ? undefined : `${id}-ticks`;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, SLIDER_PROTECTED)}\n      class={`kui-slider ${className}`.trim()}\n      data-component=\"slider\"\n      data-size={size}\n      data-orientation={orientation === 'vertical' ? 'vertical' : undefined}\n      data-unit={unit || undefined}\n      style={\n        length === undefined ? undefined : `--_kui-slider-length:${length}`\n      }\n      slot={slot}\n    >\n      {label === undefined && !showValue ? null : (\n        <div class=\"kui-slider__header\">\n          {label === undefined ? null : (\n            <label class=\"kui-slider__label\" for={id}>\n              {label}\n            </label>\n          )}\n          {showValue ? (\n            <output class=\"kui-slider__value\" for={id} aria-hidden=\"true\">\n              {`${current}${unit}`}\n            </output>\n          ) : null}\n        </div>\n      )}\n      <input\n        class=\"kui-slider__input\"\n        type=\"range\"\n        id={id}\n        name={name}\n        min={min}\n        max={max}\n        step={step}\n        value={String(current)}\n        form={form}\n        disabled={disabled}\n        data-action={action}\n        aria-label={ariaLabel}\n        aria-describedby={hintId}\n        aria-valuetext={unit ? `${current}${unit}` : undefined}\n        style={`--_kui-slider-fill:${percent(fractionOf(current, min, max))}`}\n      />\n      {ticks === undefined ? null : (\n        <div class=\"kui-slider__ticks\" id={ticksId} aria-hidden=\"true\">\n          {ticks.map((tick) => (\n            <span\n              class=\"kui-slider__tick\"\n              style={`--_kui-slider-tick:${percent(fractionOf(Math.min(max, Math.max(min, tick.value)), min, max))}`}\n            >\n              {tick.label ?? ''}\n            </span>\n          ))}\n        </div>\n      )}\n      {hint === undefined ? null : (\n        <span class=\"kui-slider__hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/spacer.d.ts

@@ -0,0 +1,18 @@
+import * as kerfjs from 'kerfjs';
+import { UiSpaceName, CssLength } from './css-values.js';
+
+interface SpacerProps {
+    /** Grow and shrink to fill the available space along a parent's flex axis. */
+    flex?: boolean;
+    /** A named UI spacing token or typed physical width. */
+    width?: UiSpaceName | CssLength;
+    /** A named UI spacing token or typed physical height. */
+    height?: UiSpaceName | CssLength;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/** A decorative fixed-size or flexible gap for Row, List, and other flex layouts. */
+declare function Spacer({ flex, width, height, className, slot, }: SpacerProps): kerfjs.SafeHtml;
+
+export { CssLength, Spacer, type SpacerProps, UiSpaceName };

package/dist/spacer.js

@@ -0,0 +1,4 @@
+export { Spacer } from './chunk-YMUIQRWK.js';
+
+
+//# sourceMappingURL=spacer.js.map

package/dist/spacer.js.map

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

package/dist/split-button.d.ts

@@ -0,0 +1,69 @@
+import { SafeHtml } from 'kerfjs';
+
+/** The loud fill the whole split button paints. */
+type SplitButtonTone = 'brand' | 'neutral' | 'success' | 'warning' | 'danger';
+/** Corner shape: the shared `rounded` control radius (default) or a full `pill`, as on `Button`. */
+type SplitButtonShape = 'rounded' | 'pill';
+type SplitButtonRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-component'?: never;
+    'data-tone'?: never;
+    'data-fill'?: never;
+    'data-busy'?: never;
+    'data-shape'?: never;
+    'data-focus-ring-inset'?: never;
+}>;
+interface SplitButtonProps {
+    /** Visible primary label. */
+    label: string;
+    /** Delegated `data-action` of the primary half. */
+    action: string;
+    /** Optional decorative leading icon of the primary half. */
+    icon?: SafeHtml;
+    /** Primary accessible name when it should say more than `label`. */
+    accessibleLabel?: string;
+    /** Accessible name (and tooltip) of the options trigger. */
+    optionsLabel: string;
+    /** Delegated `data-action` of the options trigger, which opens the app's menu. */
+    optionsAction: string;
+    /** Whether the options menu is open, exposed as `aria-expanded`. */
+    optionsExpanded?: boolean;
+    /** What the options trigger opens, exposed as `aria-haspopup`; defaults to `menu`. */
+    optionsPopup?: 'menu' | 'dialog' | 'listbox';
+    /** Element id the options trigger controls, exposed as `aria-controls`. */
+    optionsControls?: string;
+    /** The loud fill; defaults to `brand`. Switch it (for example to `neutral`) while running. */
+    tone?: SplitButtonTone;
+    /** Span the full width of the parent instead of sizing to the label. */
+    fill?: boolean;
+    /** Corner shape (default `rounded`); `pill` fully rounds both outer ends. */
+    shape?: SplitButtonShape;
+    /**
+     * Keep each half's focus ring inside its box when an ancestor clips
+     * overflow. The inset ring is two-tone, a surface-colored line inside the
+     * ring color, so it stays visible on every loud fill.
+     */
+    focusRingInset?: boolean;
+    /** Show work in progress: a spinner replaces the icon and the primary is `aria-busy`. */
+    busy?: boolean;
+    /** Disable the primary half. */
+    disabled?: boolean;
+    /** Disable the options trigger. */
+    optionsDisabled?: boolean;
+    /** Native tooltip of the primary half, for example why it is disabled. */
+    title?: string;
+    className?: string;
+    /** Safe `data-*` metadata; SplitButton-owned markers stay protected. */
+    rootAttributes?: SplitButtonRootAttributes;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A primary action with an attached options trigger on one loud, semantic
+ * fill (a "Drive" button with a provider menu). Both halves are native
+ * buttons, so `aria-expanded` and the accessible names reach assistive
+ * technology directly; the application opens its own menu from the options
+ * action and owns the running state.
+ */
+declare function SplitButton({ label, action, icon, accessibleLabel, optionsLabel, optionsAction, optionsExpanded, optionsPopup, optionsControls, tone, fill, shape, focusRingInset, busy, disabled, optionsDisabled, title, className, rootAttributes, slot, }: SplitButtonProps): SafeHtml;
+
+export { SplitButton, type SplitButtonProps, type SplitButtonShape, type SplitButtonTone };

package/dist/split-button.js

@@ -0,0 +1,7 @@
+export { SplitButton } from './chunk-TI2GV36S.js';
+
+
+
+
+
+//# sourceMappingURL=split-button.js.map

package/dist/split-button.js.map

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