@agent-ui-kit/components 0.0.3

package/dist/controls/sparkline/sparkline.css

@@ -0,0 +1,61 @@
+/* sparkline.css — ui-sparkline, the Display-class series-shape mark (LLD-C3, chart-family.lld.md §2;
+ * SPEC-R2/R9/R10/R11; ADR-0107). Two sectioned blocks:
+ *
+ *   [1] TOKEN BLOCK — `:where(ui-sparkline)` declares the mark geometry as `--ui-sparkline-*`:
+ *       density-invariant px/em quantities (ADR-0107 cl.5) — no [size]/[scale] lookup (Display class,
+ *       geometry.md; SPEC-R12: no control height, no h/2 law).
+ *   [2] STYLES BLOCK — `@scope (ui-sparkline)` consumes ONLY `--ui-sparkline-*`.
+ *
+ * The sizing ruling (SPEC-R9 AC1): the host takes an EXPLICIT `inline-size` token default, not an
+ * `auto + min-floor` pair — `auto` is non-deterministic here (a percentage-sized SVG inside a shrink-to-fit
+ * flex item falls back to the replaced-element intrinsic, 300px). `8em x 1lh` paints identically everywhere
+ * (whole-shape law, test-the-whole-shape) and rides the ambient type context (the `ui-icon` `1em` posture,
+ * widened to a mark box) — the two tokens are the page-author override freedom (ADR-0102 Lane A).
+ *
+ * `overflow: visible` on the svg: with `vector-effect: non-scaling-stroke` the stroke is px-sized, so at
+ * y=0/100 half the stroke falls outside the viewBox; visible overflow shows it instead of clipping the
+ * series extremes flat.
+ *
+ * Forced colors: NO dedicated block (SPEC-R10) — the mark is `currentColor` stroke/fill, which resolves to
+ * the consuming context's forced ink (the `ui-icon` precedent); the area wash is that same ink at token
+ * opacity (opacity is not a color property — WHCM never flattens it).
+ *
+ * RTL: NO mirroring rule (SPEC-R11) — SVG viewBox coordinates are physical by design; the series reads
+ * left-to-right in both directions (chronology is data order, not a bidi concern). Documented in sparkline.md.
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-sparkline) declares --ui-sparkline-* ════════════════ */
+
+:where(ui-sparkline) {
+  --ui-sparkline-inline-size: 8em; /* the deterministic default box (see the sizing ruling above) */
+  --ui-sparkline-block-size: 1lh; /* rides the ambient line box — inline-in-text fits by construction */
+  --ui-sparkline-stroke-width: 1.5px; /* density-invariant px (ADR-0107 cl.5) */
+  --ui-sparkline-area-opacity: 0.15;
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-sparkline) consumes ONLY --ui-sparkline-* ════════════════ */
+
+@scope (ui-sparkline) {
+  :scope {
+    display: inline-block;
+    inline-size: var(--ui-sparkline-inline-size);
+    block-size: var(--ui-sparkline-block-size);
+    vertical-align: text-bottom;
+    color: inherit;
+  }
+
+  :scope svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+
+  :scope svg [data-part='line'] {
+    stroke-width: var(--ui-sparkline-stroke-width);
+  }
+
+  :scope svg [data-part='area'] {
+    opacity: var(--ui-sparkline-area-opacity);
+  }
+}

package/dist/controls/sparkline/sparkline.d.ts

@@ -0,0 +1,27 @@
+import { UIElement, type ReactiveProps } from '../../dom/index.js';
+declare const props: {
+    values: import("../../index.js").PropConfig<number[]>;
+    label: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    variant: import("../../index.js").PropConfig<"line" | "area">;
+};
+export interface UISparklineElement extends ReactiveProps<typeof props> {
+}
+export declare class UISparklineElement extends UIElement {
+    static props: {
+        values: import("../../index.js").PropConfig<number[]>;
+        label: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        variant: import("../../index.js").PropConfig<"line" | "area">;
+    };
+    protected connected(): void;
+}
+export {};

package/dist/controls/sparkline/sparkline.js

@@ -0,0 +1,74 @@
+// sparkline.ts — UISparklineElement, the Display-class series-shape mark (LLD-C2, chart-family.lld.md §2;
+// SPEC-R1..R4; ADR-0107). Axis-free: no ticks, no legend, no interaction, no keyboard contract, no form
+// participation. Light DOM; the only child is the component-built `<svg>` (the `ui-icon` imperative-
+// injection idiom) — `render()` stays the inherited no-op.
+//
+// Three props, two connected() effects:
+//   • `values` (number[], the safe JSON codec from sparkline-math.ts) + `variant` ('line'|'area') drive the
+//     MARK effect: a whole-array swap rebuilds the <svg> via `replaceChildren` — no incremental patching.
+//   • `label` (accessible context) + `values` drive the ARIA effect: `internals.ariaLabel` is the SPEC-R4
+//     generated summary, recomputed on either input — never null, never aria-hidden (no silent state).
+// `internals.role = 'img'` is a CONSTANT set directly in connected() (the list.ts `role=list` precedent) —
+// it never varies, so it is not inside an effect.
+//
+// `cleanSeries` runs again at the render boundary (not just inside the codec): a PROPERTY write of garbage
+// (e.g. `el.values = [1, null, 'x']`) never reaches the math either (SPEC-R3 AC2) — the codec only guards
+// the ATTRIBUTE path.
+import { UIElement, prop } from "../../dom/index.js";
+import { cleanSeries, sparklineGeometry, sparklineSummary, sparklineValuesProp } from "./sparkline-math.js";
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const props = {
+    values: sparklineValuesProp, // number[] · safe JSON codec (sparkline-math.ts)
+    label: { ...prop.string(''), reflect: true }, // accessible context (SPEC-R4), e.g. "Revenue trend"
+    variant: prop.enum(['line', 'area'], 'line'), // structural — enumType snaps unknowns to 'line'
+};
+export class UISparklineElement extends UIElement {
+    static props = props;
+    connected() {
+        // A chart is data, not decoration (ADR-0107 cl.4): role=img is CONSTANT — set directly, once, the
+        // list.ts `role=list` precedent — never through an effect (there is nothing to toggle it away).
+        this.internals.role = 'img';
+        // Mark effect (reads values, variant): rebuild the <svg> on any change. `g === null` (empty rendered
+        // set) clears the host — the box still paints via the CSS floors (SPEC-R9).
+        this.effect(() => {
+            const g = sparklineGeometry(cleanSeries(this.values));
+            if (g === null) {
+                this.replaceChildren();
+                return;
+            }
+            const svg = document.createElementNS(SVG_NS, 'svg');
+            svg.setAttribute('viewBox', '0 0 100 100');
+            svg.setAttribute('preserveAspectRatio', 'none');
+            // aria-hidden on the SVG — the HOST carries role=img; the svg must never double-announce.
+            svg.setAttribute('aria-hidden', 'true');
+            svg.setAttribute('focusable', 'false');
+            if (this.variant === 'area' && g.area !== null) {
+                const area = document.createElementNS(SVG_NS, 'polygon');
+                area.setAttribute('data-part', 'area');
+                area.setAttribute('points', g.area);
+                area.setAttribute('fill', 'currentColor');
+                area.setAttribute('stroke', 'none');
+                svg.append(area);
+            }
+            const line = document.createElementNS(SVG_NS, 'polyline');
+            line.setAttribute('data-part', 'line');
+            line.setAttribute('points', g.points);
+            line.setAttribute('fill', 'none');
+            line.setAttribute('stroke', 'currentColor');
+            line.setAttribute('vector-effect', 'non-scaling-stroke');
+            line.setAttribute('stroke-linecap', 'round');
+            line.setAttribute('stroke-linejoin', 'round');
+            svg.append(line);
+            // One replaceChildren(svg) per change — whole-array swap semantics (SPEC-R2; no incremental
+            // patching of a 2-node tree).
+            this.replaceChildren(svg);
+        });
+        // ARIA effect (reads label, values): the generated accessible name — recomputed on either input.
+        // Never null, never aria-hidden (SPEC-R4 AC2: no silent state, with or without a label).
+        this.effect(() => {
+            this.internals.ariaLabel = sparklineSummary(this.label, sparklineGeometry(cleanSeries(this.values)));
+        });
+    }
+}
+if (!customElements.get('ui-sparkline'))
+    customElements.define('ui-sparkline', UISparklineElement); // idempotent self-define

package/dist/controls/split/constrain.d.ts

@@ -0,0 +1,44 @@
+/** A pane's [min, max] extent, in RATIO space (already resolved against the live container extent). */
+export type Bounds = [number, number];
+/**
+ * Two-neighbor local redistribution (SPEC-R2 §2, the core contract). Dragging/stepping separator `sepIndex`
+ * by `deltaRatio` grows pane `i = sepIndex` and shrinks pane `j = i + 1` by the SAME amount — sum-invariant
+ * by construction (adding `d` to one and subtracting `d` from the other never changes their sum) — clamped
+ * to the tightest of both neighbors' `[min, max]` windows. The residual (whatever `deltaRatio` couldn't fit)
+ * is DROPPED — push-through to non-adjacent panes is reserved (LLD §8 fork F5, not v1). Never throws: an
+ * out-of-range `sepIndex` (0/1-pane degenerate case, or a stale index) returns `ratios` unchanged.
+ */
+export declare function redistribute(ratios: number[], sepIndex: number, deltaRatio: number, bounds: Bounds[]): number[];
+/** Scale a ratio vector to sum to 1. A zero-sum, negative-sum, or non-finite vector (degenerate input)
+ *  falls back to an EQUAL split rather than dividing by zero / propagating NaN. Empty stays empty. */
+export declare function normalizeRatios(ratios: number[]): number[];
+/**
+ * Reconcile a ratio vector to a target pane COUNT (SPEC-R2 AC4 — a `sizes` length mismatch; also the
+ * SHRINK leg of AC5's dynamic panes): extra entries are DROPPED (truncate), missing entries are EQUAL-
+ * FILLED, then the whole vector is normalized to sum 1 — so a removed pane's share is absorbed by the
+ * survivors automatically (normalizing after truncation redistributes proportionally). Never throws;
+ * `count <= 0` returns `[]`.
+ */
+export declare function reconcileRatios(ratios: number[], count: number): number[];
+/** A pane's declared `size` seed, or `null`/`undefined` when unset (the "equal-fill the rest" case). */
+export type SizeSeed = number | null | undefined;
+/**
+ * The CONNECT-time seed (SPEC-R2 §2, uncontrolled mode): each pane with a declared, positive, finite
+ * `size` keeps it as its seed; panes with none equally split whatever ratio remains. The whole vector is
+ * then normalized to sum 1 regardless (so an over-declared set of sizes, e.g. summing > 1, still resolves
+ * to a valid ratio vector rather than an invalid one). Empty input ⇒ `[]`.
+ */
+export declare function seedRatios(sizes: SizeSeed[]): number[];
+/**
+ * Re-derive an UNCONTROLLED ratio vector when the pane COUNT changes after connect (SPEC-R2 AC5, the
+ * dynamic-panes contract — load-bearing: the app-tier consumers add/remove panes at runtime).
+ *   • Shrink (`nextCount <= prevCount`) — delegates to `reconcileRatios` (truncate + renormalize; the
+ *     survivors absorb the removed panes' share).
+ *   • No prior panes (`prevCount === 0`) — a pure seed from the new full `sizes` vector.
+ *   • Growth — the NEW panes (the tail of `sizes`, one per added slot) take their own declared `size` or
+ *     an equal share of a carved-out "reserved" portion (declared-sum, or `addedCount/nextCount` when
+ *     none declare — whichever is larger, capped at 95% so survivors never lose their entire share); the
+ *     SURVIVING panes' ratios shrink proportionally (their RELATIVE proportions among themselves are
+ *     preserved) to make room. Always normalizes to sum 1; never throws.
+ */
+export declare function rederiveRatios(prevRatios: number[], sizes: SizeSeed[]): number[];

package/dist/controls/split/constrain.js

@@ -0,0 +1,126 @@
+// constrain.ts — the pure N-pane ratio math for ui-split (LLD-C3, app-surfaces-m4.lld.md §2.3; SPEC-R2).
+// DOM-free by construction (the value-codec / bar-math.ts precedent: the hard math isolated from the
+// element so it is independently unit-testable and the element stays a thin DOM/ARIA/event adapter over
+// it). Every function here operates purely on ratio vectors (numbers summing to ~1) and [min,max] ratio
+// windows — resolving a CSS length (px/%/rem) to a ratio, and measuring the live container extent, is the
+// ELEMENT's job (split.ts), which then calls in here with already-resolved ratio-space numbers.
+//
+// Four functions, each SPEC-R2-traceable:
+//   • redistribute   — two-neighbor LOCAL resize (the core drag/keyboard-step math, SPEC-R2 §2 + AC1/AC2).
+//   • normalizeRatios — scale a vector to sum 1 (degenerate/zero-sum ⇒ equal-fill, never NaN/throw).
+//   • reconcileRatios — a `sizes` length MISMATCH repair: truncate extra, equal-fill missing, normalize
+//     (SPEC-R2 AC4 — the controlled-`sizes` path, and the shrink leg of dynamic panes AC5).
+//   • seedRatios      — the CONNECT-time seed from each pane's own `size` prop (declared panes keep their
+//     seed; undeclared panes equally split what's left), normalized (SPEC-R2 §2 "uncontrolled ... seeded").
+//   • rederiveRatios  — the GROWTH leg of dynamic panes (SPEC-R2 AC5): survivors shrink proportionally to
+//     make room; new panes take their own `size` seed or an equal share of the carved-out remainder.
+/** Normalize a possibly-inverted bounds pair: `min > max` clamps to `[min, min]` (SPEC §2.3 "contradictory
+ *  bounds ⇒ clamp to min" — the pane is pinned at its own min, never a negative-width window). */
+function normalizeBounds([min, max]) {
+    return min > max ? [min, min] : [min, max];
+}
+/**
+ * Two-neighbor local redistribution (SPEC-R2 §2, the core contract). Dragging/stepping separator `sepIndex`
+ * by `deltaRatio` grows pane `i = sepIndex` and shrinks pane `j = i + 1` by the SAME amount — sum-invariant
+ * by construction (adding `d` to one and subtracting `d` from the other never changes their sum) — clamped
+ * to the tightest of both neighbors' `[min, max]` windows. The residual (whatever `deltaRatio` couldn't fit)
+ * is DROPPED — push-through to non-adjacent panes is reserved (LLD §8 fork F5, not v1). Never throws: an
+ * out-of-range `sepIndex` (0/1-pane degenerate case, or a stale index) returns `ratios` unchanged.
+ */
+export function redistribute(ratios, sepIndex, deltaRatio, bounds) {
+    const i = sepIndex;
+    const j = i + 1;
+    if (!Number.isInteger(i) || i < 0 || j >= ratios.length)
+        return ratios.slice();
+    const [minI, maxI] = normalizeBounds(bounds[i] ?? [0, 1]);
+    const [minJ, maxJ] = normalizeBounds(bounds[j] ?? [0, 1]);
+    // The achievable delta window: pane i's own [min,max] bounds it directly; pane j's [min,max] bounds it
+    // INVERTED (j SHRINKS as delta grows). The combined window is the intersection of both — the tightest
+    // constraint wins, and a delta outside it clamps to the nearest edge (the residual silently drops).
+    const lo = Math.max(minI - ratios[i], ratios[j] - maxJ);
+    const hi = Math.min(maxI - ratios[i], ratios[j] - minJ);
+    const clamped = lo > hi ? 0 : Math.max(lo, Math.min(hi, deltaRatio)); // lo>hi: a degenerate/contradictory window — hold in place
+    const next = ratios.slice();
+    next[i] = ratios[i] + clamped;
+    next[j] = ratios[j] - clamped;
+    return next;
+}
+/** Scale a ratio vector to sum to 1. A zero-sum, negative-sum, or non-finite vector (degenerate input)
+ *  falls back to an EQUAL split rather than dividing by zero / propagating NaN. Empty stays empty. */
+export function normalizeRatios(ratios) {
+    const n = ratios.length;
+    if (n === 0)
+        return [];
+    const sum = ratios.reduce((a, b) => a + b, 0);
+    if (!Number.isFinite(sum) || sum <= 0)
+        return ratios.map(() => 1 / n);
+    return ratios.map((r) => r / sum);
+}
+/**
+ * Reconcile a ratio vector to a target pane COUNT (SPEC-R2 AC4 — a `sizes` length mismatch; also the
+ * SHRINK leg of AC5's dynamic panes): extra entries are DROPPED (truncate), missing entries are EQUAL-
+ * FILLED, then the whole vector is normalized to sum 1 — so a removed pane's share is absorbed by the
+ * survivors automatically (normalizing after truncation redistributes proportionally). Never throws;
+ * `count <= 0` returns `[]`.
+ */
+export function reconcileRatios(ratios, count) {
+    if (count <= 0)
+        return [];
+    const next = ratios.slice(0, count);
+    while (next.length < count)
+        next.push(0);
+    if (next.every((r) => r === 0))
+        return next.map(() => 1 / count);
+    return normalizeRatios(next);
+}
+const isDeclared = (s) => typeof s === 'number' && Number.isFinite(s) && s > 0;
+/**
+ * The CONNECT-time seed (SPEC-R2 §2, uncontrolled mode): each pane with a declared, positive, finite
+ * `size` keeps it as its seed; panes with none equally split whatever ratio remains. The whole vector is
+ * then normalized to sum 1 regardless (so an over-declared set of sizes, e.g. summing > 1, still resolves
+ * to a valid ratio vector rather than an invalid one). Empty input ⇒ `[]`.
+ */
+export function seedRatios(sizes) {
+    const n = sizes.length;
+    if (n === 0)
+        return [];
+    const declaredSum = sizes.reduce((a, s) => a + (isDeclared(s) ? s : 0), 0);
+    const undeclaredCount = sizes.filter((s) => !isDeclared(s)).length;
+    if (undeclaredCount === n)
+        return sizes.map(() => 1 / n); // nobody declared a size — equal split
+    const remaining = Math.max(0, 1 - Math.min(1, declaredSum));
+    const equalShare = undeclaredCount > 0 ? remaining / undeclaredCount : 0;
+    return normalizeRatios(sizes.map((s) => (isDeclared(s) ? s : equalShare)));
+}
+/**
+ * Re-derive an UNCONTROLLED ratio vector when the pane COUNT changes after connect (SPEC-R2 AC5, the
+ * dynamic-panes contract — load-bearing: the app-tier consumers add/remove panes at runtime).
+ *   • Shrink (`nextCount <= prevCount`) — delegates to `reconcileRatios` (truncate + renormalize; the
+ *     survivors absorb the removed panes' share).
+ *   • No prior panes (`prevCount === 0`) — a pure seed from the new full `sizes` vector.
+ *   • Growth — the NEW panes (the tail of `sizes`, one per added slot) take their own declared `size` or
+ *     an equal share of a carved-out "reserved" portion (declared-sum, or `addedCount/nextCount` when
+ *     none declare — whichever is larger, capped at 95% so survivors never lose their entire share); the
+ *     SURVIVING panes' ratios shrink proportionally (their RELATIVE proportions among themselves are
+ *     preserved) to make room. Always normalizes to sum 1; never throws.
+ */
+export function rederiveRatios(prevRatios, sizes) {
+    const prevCount = prevRatios.length;
+    const nextCount = sizes.length;
+    if (nextCount === 0)
+        return [];
+    if (nextCount <= prevCount)
+        return reconcileRatios(prevRatios, nextCount);
+    if (prevCount === 0)
+        return seedRatios(sizes);
+    const addedSizes = sizes.slice(prevCount);
+    const addedDeclaredSum = addedSizes.reduce((a, s) => a + (isDeclared(s) ? s : 0), 0);
+    const addedUndeclaredCount = addedSizes.filter((s) => !isDeclared(s)).length;
+    const equalShareGuess = addedSizes.length / nextCount;
+    const reservedTotal = Math.min(0.95, Math.max(addedDeclaredSum, equalShareGuess));
+    const survivorScale = 1 - reservedTotal;
+    const survivors = prevRatios.map((r) => r * survivorScale);
+    const addedEqualShare = addedUndeclaredCount > 0 ? Math.max(0, reservedTotal - addedDeclaredSum) / addedUndeclaredCount : 0;
+    const added = addedSizes.map((s) => (isDeclared(s) ? s : addedEqualShare));
+    return normalizeRatios([...survivors, ...added]);
+}

package/dist/controls/split/split-pane.css

@@ -0,0 +1,63 @@
+/* split-pane.css — ui-split-pane, the generic pane child of ui-split (ADR-0003 single-file convention).
+ * Two sectioned blocks:
+ *
+ *   [1] TOKEN BLOCK — `:where(ui-split-pane)` declares ONLY `--ui-split-pane-*`: the bare-pane floor
+ *       (`--ui-split-pane-min`, the LLD's "min unset ⇒ this floor" default, SPEC-R2 §2). Owned HERE (not
+ *       on `ui-split`) because it textually IS this control's own token (`--ui-split-pane-{...}`) even
+ *       though it's consumed via the PARENT-written geometry seam below — the same token-ownership law any
+ *       `--ui-{name}-*` prefix earns regardless of which element's CSS ends up reading it.
+ *   [2] STYLES BLOCK — `@scope (ui-split-pane)` is AXIS-OBLIQUE by construction: `ui-split` (the parent)
+ *       writes three imperative custom properties per pane — `--_pane-flex` (a unitless flex-grow ratio),
+ *       `--_pane-min` / `--_pane-max` (the resolved CSS-length floor/ceiling) — PLUS a `[data-axis-vertical]`
+ *       presence marker mirroring its own `axis` prop (the slider-multi `--value-pct-lo/-hi` JS-geometry-seam
+ *       precedent: the parent computes, the child's CSS purely consumes). Physical `width`/`height`
+ *       properties (never logical `inline-size`) are used deliberately — `axis` selects a PHYSICAL
+ *       dimension (which the flex row/column lays out), NOT a writing-mode-relative one; RTL only inverts
+ *       the DRAG SENSE within the horizontal axis (SPEC-R3 AC3), it never changes which physical dimension
+ *       is constrained.
+ *
+ * NO control height (geometry.md's Container/layout-adjacent size-class): a pane has no frame of its own —
+ * `overflow: auto` lets whatever CONTENT the author places (a `ui-card`, a nav tree, prose) manage its own
+ * scrolling; the pane itself is a pure flex-distribution box.
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-split-pane) declares --ui-split-pane-* ════════════════ */
+
+:where(ui-split-pane) {
+  /* The bare-pane floor (SPEC-R2 §2 "default min = a floor"). A small, sane minimum so an unset-`min`
+     pane never collapses to zero-width during a hard drag/clamp — the entry-control `min-inline-size`
+     floor's spirit (geometry.md), sized for a generic content region rather than a typing surface. */
+  --ui-split-pane-min: 4rem;
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-split-pane) consumes the parent-written seam ═══════ */
+
+@scope (ui-split-pane) {
+  :scope {
+    display: block;
+    box-sizing: border-box;
+    overflow: auto; /* the pane's own content manages its scroll; the pane itself never clips silently */
+    /* Consumer-INHERITED scrollbar-visibility seam (the ui-container-bg seam shape, NOT a token-block
+       declaration): a composing surface hides the pane scroller for an app-chrome look by setting
+       --ui-split-pane-scrollbar-width on ITSELF (ui-agent-admin sets `none`; the value inherits down to
+       every descendant pane). Deliberately NOT declared in this file's :where() block — an own
+       declaration would BEAT the consumer's inherited value (the TKT-0065 alias-resolution lesson's
+       sibling), so the default rides the var() fallback. Scrolling stays live; scrollbar-width is
+       supported by both shipped engines (Chromium 121+/Safari 18.2+), no ::-webkit-scrollbar leg. */
+    scrollbar-width: var(--ui-split-pane-scrollbar-width, auto);
+
+    /* horizontal axis (default) — width is the constrained dimension */
+    flex: var(--_pane-flex, 1) 0 0%;
+    min-width: var(--_pane-min, var(--ui-split-pane-min));
+    max-width: var(--_pane-max, none);
+  }
+
+  /* vertical axis — the parent mirrors `axis="vertical"` onto each pane via [data-axis-vertical]; height
+     becomes the constrained dimension instead (the min-width floor above is released to auto). */
+  :scope[data-axis-vertical] {
+    min-width: auto;
+    max-width: none;
+    min-height: var(--_pane-min, var(--ui-split-pane-min));
+    max-height: var(--_pane-max, none);
+  }
+}

package/dist/controls/split/split-pane.d.ts

@@ -0,0 +1,49 @@
+import { UIContainerElement } from '../../dom/container.js';
+import { type ReactiveProps } from '../../dom/index.js';
+declare const splitPaneProps: {
+    initial: import("../../index.js").PropConfig<number | null>;
+    min: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    max: {
+        reflect: true;
+        type: import("../../index.js").PropType<string>;
+        default: string;
+        attribute?: string | false;
+    };
+    collapsible: {
+        reflect: true;
+        type: import("../../index.js").PropType<boolean>;
+        default: boolean;
+        attribute?: string | false;
+    };
+};
+export interface UISplitPaneElement extends ReactiveProps<typeof splitPaneProps> {
+}
+export declare class UISplitPaneElement extends UIContainerElement {
+    static props: {
+        initial: import("../../index.js").PropConfig<number | null>;
+        min: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        max: {
+            reflect: true;
+            type: import("../../index.js").PropType<string>;
+            default: string;
+            attribute?: string | false;
+        };
+        collapsible: {
+            reflect: true;
+            type: import("../../index.js").PropType<boolean>;
+            default: boolean;
+            attribute?: string | false;
+        };
+    };
+}
+export {};

package/dist/controls/split/split-pane.js

@@ -0,0 +1,42 @@
+// split-pane.ts — UISplitPaneElement, the generic pane child of `ui-split` (app-surfaces-m4.lld.md LLD-C1,
+// SPEC-R1/R2). A structural, non-form, non-interactive content region — the `ui-card-header`/`-content`
+// regions precedent (extends `UIContainerElement` for the family base; carries no ARIA of its own; the
+// AUTHOR's light-DOM children are the content, `render()` stays the inherited void). One folder, TWO real
+// components (the `radio`/`radio-group` precedent, ADR-0080's radio-group special case): `ui-split-pane`
+// gets its OWN `.ts`/`.css`/`.md` triple rather than being a side-effect-imported sub-element of split.ts —
+// each is independently fleet-discoverable (family-coherence.test.ts keys discovery off `{name}.md`), and
+// `ui-split-pane`'s per-pane props (`initial`/`min`/`max`/`collapsible`) earn their own descriptor + contract
+// trip-wire (LLD-C6) exactly as `radio-group.md` does inside `radio/`.
+//
+// Props (LLD §2.1's code sample names this `size`; RENAMED here to `initial` — `family-coherence.test.ts`'s
+// A2 invariant treats ANY attribute literally named `size` fleet-wide as the `[sm,md,lg]` sizing enum
+// (ADR-0081), and this prop is a semantically UNRELATED ratio seed, not a widget-box size step. Same value,
+// same behavior, a build-mechanics naming fix — not a design deviation):
+//   • `initial` — an UNREFLECTED optional ratio seed (`prop.number()`, default null) — read ONCE by the
+//     parent `ui-split` at connect / pane-count growth (`constrain.ts`'s `seedRatios`/`rederiveRatios`),
+//     never reflected (an internal seed, not a live authored dimension — the progress.md/stat.md optional-
+//     number precedent).
+//   • `min`/`max` — REFLECTED CSS-length strings (default `''` ⇒ the parent applies the
+//     `--ui-split-pane-min` floor / `none`). The PARENT (ui-split) resolves these into physical
+//     `min-width`/`max-width` (horizontal axis) or `min-height`/`max-height` (vertical axis) via the
+//     `--_pane-min`/`--_pane-max` JS geometry seam it writes onto each pane (the slider-multi
+//     `--value-pct-lo/hi` precedent) — split-pane.css is axis-oblique by construction; the parent decides
+//     which physical dimension the pane's floor/ceiling binds to.
+//   • `collapsible` — a REFLECTED boolean gating the parent's Enter-key collapse-to-last affordance
+//     (SPEC-R4) when this pane is a separator's LEADING pane. `ui-split-pane` itself does nothing with it —
+//     read only by the parent.
+//
+// `controls → dom` is the allowed import direction (no traits needed — this leaf has no behaviour).
+import { UIContainerElement } from "../../dom/container.js";
+import { prop } from "../../dom/index.js";
+const splitPaneProps = {
+    initial: prop.number(), // undefined ratio seed (uncontrolled) — a positive finite value; unset/invalid ⇒ equal-fill (constrain.ts)
+    min: { ...prop.string(''), reflect: true }, // CSS length; '' ⇒ the --ui-split-pane-min floor (parent-applied)
+    max: { ...prop.string(''), reflect: true }, // CSS length; '' ⇒ unbounded (parent-applied)
+    collapsible: { ...prop.boolean(false), reflect: true }, // gates the parent's Enter-key collapse-to-last (SPEC-R4)
+};
+export class UISplitPaneElement extends UIContainerElement {
+    static props = splitPaneProps;
+}
+if (!customElements.get('ui-split-pane'))
+    customElements.define('ui-split-pane', UISplitPaneElement);

package/dist/controls/split/split.css

@@ -0,0 +1,127 @@
+/* split.css — ui-split, the single-file component stylesheet (ADR-0003). Two sectioned blocks:
+ *
+ *   [1] TOKEN BLOCK — `:where(ui-split)` declares ONLY `--ui-split-*`: the divider thickness, the
+ *       invisible hit-slop width, the keyboard step ratio, and the divider ink role. Geometry is
+ *       Container/layout size-class (geometry.md "the five size-classes"): NO control height, no
+ *       `--md-sys-height-*` — the divider + hit-slop are layout dimensions off the space/dimension scale.
+ *   [2] STYLES BLOCK — `@scope (ui-split)` consumes ONLY `--ui-split-*` for the host + the
+ *       control-rendered `[data-separator]` divider (a light-DOM `<div>`, not its own custom element —
+ *       styled here via a descendant selector, the `bar-chart.css` `[data-part]` precedent). The pane
+ *       CHILDREN's own geometry (flex-grow ratio, min/max clamp) lives in split-pane.css, consuming the
+ *       `--_pane-*` seam this control's `.ts` writes onto each pane (JS geometry seam, never a raw layout
+ *       style property — the slider-multi precedent).
+ *
+ * RTL: the axis mapping is PHYSICAL (`flex-direction: row`/`column`, [axis=vertical] repoints it) — under
+ * `direction: rtl`, `flex-direction: row` visually reverses item order NATIVELY (no bespoke RTL layout rule
+ * needed here); only the JS DRAG SENSE inverts (traits/pane-resize.ts, SPEC-R3 AC3).
+ *
+ * Motion: NO transitions are declared anywhere in this sheet — a resize (pointer or keyboard) is always
+ * instant (the geometry-law "a [scale]/[size]/[density] change must be instant" + the slider "no position
+ * transition" precedent), so `prefers-reduced-motion` has nothing to gate here (vacuously satisfied). TKT-0015
+ * traced the reported "animation" to split.ts's drag MATH (a since-press delta double-applied against the
+ * live ratio vector, compounding every pointermove) — never a CSS transition; this claim needed no repair.
+ *
+ * Selection (TKT-0015 pt.2): the `dragging` custom state suspends `user-select` across the WHOLE host (not
+ * just the separator, which already carries its own `user-select: none` below) while a drag is active, so a
+ * fast sweep never selects pane content underneath the pointer. The state is set/cleared ENTIRELY in split.ts
+ * around the drag's live-move↔commit span — never an authored attribute (button.css/combo-box.css's own
+ * internal, non-authorable custom-state motion/validity gates are the same shape). Host-level scope is
+ * sufficient — `setPointerCapture` on the separator keeps every `pointermove` routed to it regardless of
+ * where the cursor sweeps (SPEC-R3 AC2 capture-continuity), so a `document`-level rule buys nothing extra.
+ */
+
+/* ════════════════ [1] TOKEN BLOCK — :where(ui-split) declares --ui-split-* ════════════════ */
+
+:where(ui-split) {
+  --ui-split-divider: 1px; /* the visible divider thickness */
+  --ui-split-hit-slop: 24px; /* the invisible pointer hit target (WCAG 2.5.8, SPEC-R5 AC1) */
+  --ui-split-key-step: 5%; /* the keyboard Arrow step, as a PERCENTAGE of the two-neighbor pair (SPEC-R4) */
+  /* Kim-directed (2026-07-16): a resting DECORATIVE outline, not the solid ADR-0059 track role — the
+     divider is a layout boundary/drag handle, not a state-bearing part carrying a value a user must
+     perceive (unlike the switch off-track / slider rail ADR-0059 actually gates); its operability
+     already comes from the pointer cursor + the ≥24px hit-slop (SPEC-R5 AC1) + `role=separator`
+     regardless of visual weight, so the softer translucent role is legal here. Primary on hover/drag
+     is the clear "you're interacting with this" cue. */
+  --ui-split-divider-ink: var(--md-sys-color-neutral-outline-variant);
+  --ui-split-divider-ink-hover: var(--md-sys-color-primary);
+}
+
+/* ════════════════ [2] STYLES BLOCK — @scope (ui-split) consumes ONLY --ui-split-* ════════════════ */
+
+@scope (ui-split) {
+  :scope {
+    display: flex;
+    flex-direction: row; /* the horizontal identity — [axis=vertical] repoints it below */
+    align-items: stretch;
+    box-sizing: border-box;
+  }
+
+  :scope[axis='vertical'] {
+    flex-direction: column;
+  }
+
+  /* Selection suspension during an active drag (TKT-0015 pt.2) — see the file header for the full rationale. */
+  :scope:state(dragging) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* The separator — a control-rendered `<div data-separator role="separator" tabindex="0">` between each
+     adjacent pane pair (never authored — the slider-thumb precedent). Fixed-size flex item (never grows/
+     shrinks): its OWN box is the thin `--ui-split-divider`; the `::before` below expands the INVISIBLE
+     pointer hit area without displacing the pane tracks (absolutely positioned, zero layout contribution). */
+  [data-separator] {
+    position: relative;
+    flex: 0 0 var(--ui-split-divider);
+    background: var(--ui-split-divider-ink);
+    cursor: col-resize;
+    touch-action: none; /* give pointer events exclusively to the drag gesture, no scroll-conflict */
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :scope[axis='vertical'] [data-separator] {
+    cursor: row-resize;
+  }
+
+  /* Hover repoints to the primary cue; `:state(dragging)` (set host-wide in split.ts around the drag's
+     live-move↔commit span, see the file header) keeps the SAME cue live for the whole gesture even after
+     the pointer sweeps off the thin divider box — `setPointerCapture` keeps the drag routed to this
+     element regardless, but a plain `:hover` alone would drop the highlight the moment the cursor left
+     the 1px track, which reads as the divider "letting go" mid-drag. */
+  [data-separator]:hover,
+  :scope:state(dragging) [data-separator] {
+    background: var(--ui-split-divider-ink-hover);
+  }
+
+  /* The hit-slop — an invisible `::before`, centred on the divider, expanding the pointer-interactive area
+     to `--ui-split-hit-slop` on the CROSS axis (SPEC-R5 AC1: ≥24px even when the visible divider is 1-2px).
+     `position: absolute` means it contributes NOTHING to flex sizing — the pane tracks are never displaced. */
+  [data-separator]::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc((var(--ui-split-divider) - var(--ui-split-hit-slop)) / 2);
+  }
+
+  :scope[axis='vertical'] [data-separator]::before {
+    inset-inline: 0;
+    inset-block: calc((var(--ui-split-divider) - var(--ui-split-hit-slop)) / 2);
+  }
+
+  /* Focus ring (ADR-0009) — the shared fleet ring on the focused separator (keyboard-only). */
+  [data-separator]:focus-visible {
+    outline: var(--md-sys-state-focus-ring-width) solid var(--md-sys-color-focus-ring);
+    outline-offset: var(--md-sys-state-focus-ring-offset);
+  }
+
+  /* Forced-colors — the divider stays a real, visible system colour under `forced-colors: active` (SPEC-R5
+     AC2; the slider.css `forced-color-adjust: none` + explicit system-colour precedent). The focus ring is
+     already free via `--md-sys-color-focus-ring`'s own `→ Highlight` token-layer mapping (ADR-0009). */
+  @media (forced-colors: active) {
+    [data-separator] {
+      background: ButtonText;
+      forced-color-adjust: none;
+    }
+  }
+}