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

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

package/dist/split-view.d.ts

@@ -1,17 +1,68 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-CrZF95VO.js';
+import { ResizableRegionProps } from './resizable-region.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
 
-interface SplitViewResizable {
+/**
+ * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /
+ * `max` limits, plus the region configuration that forwards unchanged
+ * (`separator`, `handleIcon`, `contentOverflow`, and collapse:
+ * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,
+ * `restorePosition`). Omitted options keep the region's defaults.
+ */
+interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'handleIcon' | 'contentOverflow' | 'collapsed' | 'transitioning' | 'collapseMotion' | 'restoreControl' | 'restorePosition'> {
     size: number;
     min: number;
     max: number;
 }
+/**
+ * One compact view's top- and bottom-toolbar content and pinned footer (see
+ * `NavStackView`).
+ */
+type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar' | 'footer'>;
+/**
+ * The compact `NavStack`'s configuration: its toolbar configuration, back
+ * control, persistent bottom toolbar, chrome dividers, and chrome and
+ * bottom-toolbar presentations forward to the stack, and `list` / `detail`
+ * give each view its own toolbar groups.
+ */
+interface SplitViewCompactStack extends Pick<NavStackProps, 'toolbarConfig' | 'backIcon' | 'backText' | 'hideToolbar' | 'bottomToolbar' | 'chromeDividers' | 'chromePresentation' | 'bottomToolbarPresentation'> {
+    /** Toolbar content for the list (root) view. */
+    list?: SplitViewCompactViewToolbars;
+    /** Toolbar content for the pushed detail view. */
+    detail?: SplitViewCompactViewToolbars;
+}
+/**
+ * The fixed list column's width: a size in CSS pixels, or that size capped
+ * at a fraction of the SplitView's own width so a narrow container (a
+ * dialog, a small window) always leaves the detail in view.
+ */
+type SplitViewListWidth = number | {
+    /** Preferred width in CSS pixels. */
+    size: number;
+    /** Largest share of the SplitView's width, greater than 0 and at most 1. */
+    maxFraction?: number;
+};
 interface SplitViewProps {
     id: string;
     label: string;
     /** The list (primary) pane. */
-    list: SafeHtml;
+    list: KerfUiContent;
     /** The detail (secondary) pane. */
-    detail: SafeHtml;
+    detail: KerfUiContent;
     /**
      * Compact ("one pane at a time") classes — a handset or portrait tablet.
      * Derive from `deviceClass().value.compact`. When true the split collapses to
@@ -26,9 +77,19 @@ interface SplitViewProps {
     detailTitle?: string;
     /** Back label for the compact NavStack (default "Back"). */
     backLabel?: string;
+    /** Compact NavStack configuration and per-view toolbars. */
+    compactStack?: SplitViewCompactStack;
     /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
     resizable?: SplitViewResizable;
+    /**
+     * The fixed split's list column width (default 320px). A number is CSS
+     * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's
+     * width. A resizable split sizes its list with `resizable` instead.
+     */
+    listWidth?: SplitViewListWidth;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A list-detail split. On roomy classes it shows both panes side
@@ -37,6 +98,6 @@ interface SplitViewProps {
  * resizable wiring with `wireResizableRegions` and the compact back with
  * `wireNavStack`.
  */
-declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className }: SplitViewProps): SafeHtml;
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, compactStack, resizable, listWidth, className, slot, }: SplitViewProps): kerfjs.SafeHtml;
 
-export { SplitView, type SplitViewProps, type SplitViewResizable };
+export { SplitView, type SplitViewCompactStack, type SplitViewCompactViewToolbars, type SplitViewListWidth, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -1,21 +1,21 @@
-import { NavStack } from './chunk-BLK3UEEI.js';
+export { SplitView } from './chunk-ETFP7HAR.js';
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-import { ResizableRegion } from './chunk-M5JRI6MN.js';
 
-import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
-function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = "", detailTitle = "", backLabel = "Back", resizable, className = "" }) {
-  if (compact) {
-    const views = detailActive ? [{ key: "list", title: listTitle, content: list }, { key: "detail", title: detailTitle, content: detail }] : [{ key: "list", title: listTitle, content: list }];
-    return /* @__PURE__ */ jsx("div", { class: `kui-split-view kui-split-view--compact ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "compact", children: /* @__PURE__ */ jsx(NavStack, { id: `${id}-stack`, label, views, backLabel }) });
-  }
-  const listPane = resizable ? /* @__PURE__ */ jsx(ResizableRegion, { id: `${id}-list`, label: listTitle || "List", size: resizable.size, min: resizable.min, max: resizable.max, children: /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list }) }) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
-  return /* @__PURE__ */ jsxs("div", { class: `kui-split-view ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "split", "aria-label": label, children: [
-    listPane,
-    /* @__PURE__ */ jsx("div", { class: "kui-split-view__detail kui-pane", "data-split-detail": true, "aria-label": detailTitle || void 0, children: detail })
-  ] });
-}
 
-export { SplitView };
 
 //# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"split-view.js"}