@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/carousel/physics/types.d.ts

@@ -0,0 +1,52 @@
+import type { CarouselFrame } from "../engine/types.js";
+/** The state at the moment the user lets go. */
+export interface Release {
+    readonly position: number;
+    /** Index units per second, signed. */
+    readonly velocity: number;
+    readonly frame: CarouselFrame;
+    /** Non-null only when `loop` is off. Looping carousels have no ends. */
+    readonly bounds: {
+        readonly min: number;
+        readonly max: number;
+    } | null;
+}
+/**
+ * What should happen after a release -- an INTENT, not a target position.
+ *
+ * A bare target would throw away the *shape* of the motion, which is where all
+ * the feel lives: nearest-snap and momentum-carry can compute the same target
+ * and must not move the same way.
+ *
+ * Every variant maps onto a primitive motion already ships, so there is no
+ * bespoke integrator anywhere in this package.
+ */
+export type Settle = {
+    readonly kind: "inertia";
+    readonly power?: number;
+    readonly timeConstant?: number;
+    readonly modifyTarget?: (v: number) => number;
+    readonly min?: number;
+    readonly max?: number;
+    readonly bounceStiffness?: number;
+    readonly bounceDamping?: number;
+    /** How close to the target, in cards, the glide counts as arrived. Default 0.001. */
+    readonly restDelta?: number;
+    /** Cards per second below which the end bounce counts as still. Default 0.01. */
+    readonly restSpeed?: number;
+} | {
+    readonly kind: "spring";
+    readonly to: number;
+    readonly stiffness?: number;
+    readonly damping?: number;
+    readonly mass?: number;
+} | {
+    readonly kind: "none";
+};
+export type SettlePolicy = (release: Release) => Settle;
+/**
+ * Drag-time resistance past an end. Takes how far past the edge the pointer has
+ * pulled (in index units) and returns how far the carousel actually moves.
+ * Only consulted when `loop` is off.
+ */
+export type Overdrag = (overshoot: number, frame: CarouselFrame) => number;

package/dist/carousel/physics/types.js

@@ -0,0 +1 @@
+export {};

package/dist/carousel/slot/context.d.ts

@@ -0,0 +1,42 @@
+import { type MotionValue } from "motion/react";
+import type { SlotFrameBuffer } from "../engine/types.js";
+import type { SlotWriter } from "./useSlotWriter.js";
+export interface SlotContextValue {
+    /** Position on the unbounded integer line. */
+    readonly index: number;
+    readonly ringIndex: number;
+    /** Index into the consumer's `items`, or null for a placeholder position. */
+    readonly itemIndex: number | null;
+    /** Signed, fractional slots from centre. 0 is dead centre. */
+    readonly distance: MotionValue<number>;
+    readonly writer: SlotWriter;
+}
+export declare const SlotContext: import("react").Context<SlotContextValue | null>;
+/**
+ * How open this card is: 0 … 1 for the open card, 0 for every other. A card
+ * can use it to load a bigger picture once it opens, or to show more detail.
+ */
+export declare function useSlotOpen(): MotionValue<number>;
+/**
+ * Read the slot a card is sitting in.
+ *
+ * Resolves to the NEAREST slot, which is what makes nesting work: a carousel
+ * rendered inside a card sees its own slots, while the card itself still sees
+ * the outer one.
+ */
+export declare function useSlotState(): SlotContextValue;
+/**
+ * A MotionValue for one RESOLVED layout output, rather than raw distance.
+ *
+ * Some card choreography keys off what the layout produced, not off distance:
+ * the 0.1.0 placeholder derived its text offset from the resolved `scaleY`.
+ * Without this, such a card has to re-derive the preset's own curve, which is
+ * exactly the coupling the layout layer exists to remove.
+ *
+ * Transform components (`x`, `scaleY`, `rotateY`, ...) have no standalone
+ * MotionValue by default -- they are folded into one transform string. Asking
+ * for one materialises it lazily, so a card that never asks pays nothing.
+ * The initial value is read straight from the already-resolved buffer, so
+ * there is no frame of wrong output before the subscription lands.
+ */
+export declare function useSlotValue<K extends keyof SlotFrameBuffer>(key: K): MotionValue<SlotFrameBuffer[K]>;

package/dist/carousel/slot/context.js

@@ -0,0 +1,69 @@
+"use client";
+import { createContext, useContext } from "react";
+import { useIsomorphicLayoutEffect, useMotionValue, useTransform, } from "motion/react";
+import { useCarouselMotion } from "../engine/handle.js";
+export const SlotContext = createContext(null);
+/**
+ * How open this card is: 0 … 1 for the open card, 0 for every other. A card
+ * can use it to load a bigger picture once it opens, or to show more detail.
+ */
+export function useSlotOpen() {
+    const { distance } = useSlotState();
+    const { openProgress } = useCarouselMotion();
+    return useTransform(() => openProgress.get() * Math.max(0, 1 - Math.abs(distance.get())));
+}
+/**
+ * Read the slot a card is sitting in.
+ *
+ * Resolves to the NEAREST slot, which is what makes nesting work: a carousel
+ * rendered inside a card sees its own slots, while the card itself still sees
+ * the outer one.
+ */
+export function useSlotState() {
+    const value = useContext(SlotContext);
+    if (!value) {
+        throw new Error("[@sharedex/ui] useSlotState must be called inside <Carousel.Slot>.");
+    }
+    return value;
+}
+/** The writer already keeps a dedicated MotionValue for these. */
+const DEDICATED = {
+    opacity: true,
+    zIndex: true,
+    filter: true,
+    pointerEvents: true,
+    originX: true,
+    originY: true,
+};
+const isDedicated = (k) => k in DEDICATED;
+/**
+ * A MotionValue for one RESOLVED layout output, rather than raw distance.
+ *
+ * Some card choreography keys off what the layout produced, not off distance:
+ * the 0.1.0 placeholder derived its text offset from the resolved `scaleY`.
+ * Without this, such a card has to re-derive the preset's own curve, which is
+ * exactly the coupling the layout layer exists to remove.
+ *
+ * Transform components (`x`, `scaleY`, `rotateY`, ...) have no standalone
+ * MotionValue by default -- they are folded into one transform string. Asking
+ * for one materialises it lazily, so a card that never asks pays nothing.
+ * The initial value is read straight from the already-resolved buffer, so
+ * there is no frame of wrong output before the subscription lands.
+ */
+export function useSlotValue(key) {
+    const { writer } = useSlotState();
+    // Hooks must run unconditionally, so materialise first and discard below.
+    const lazy = useMotionValue(writer.buffer[key]);
+    useIsomorphicLayoutEffect(() => {
+        if (isDedicated(key))
+            return;
+        return writer.register(key, lazy);
+    }, [writer, key, lazy]);
+    if (isDedicated(key)) {
+        // Safe by construction: DEDICATED's keys are exactly the writer fields
+        // whose MotionValue type already matches SlotFrameBuffer[key]. TypeScript
+        // cannot see that through the union because MotionValue is invariant.
+        return writer[key];
+    }
+    return lazy;
+}

package/dist/carousel/slot/useSlotWriter.d.ts

@@ -0,0 +1,65 @@
+import { type MotionValue } from "motion/react";
+import type { SlotFrameBuffer } from "../engine/types.js";
+import type { CarouselMotionSlice } from "../engine/handle.js";
+export interface SlotWriter {
+    /** ONE string. See the note below on why this beats a value per property. */
+    readonly transform: MotionValue<string>;
+    /** Published as `--sx-distance` so a card can choreograph in pure CSS. */
+    readonly distance: MotionValue<number>;
+    readonly opacity: MotionValue<number>;
+    readonly zIndex: MotionValue<number>;
+    readonly filter: MotionValue<string>;
+    readonly pointerEvents: MotionValue<"auto" | "none">;
+    readonly originX: MotionValue<number>;
+    readonly originY: MotionValue<number>;
+    /** Read-only view of the last resolved buffer, for useSlotValue. */
+    readonly buffer: SlotFrameBuffer;
+    /**
+     * Drive an extra MotionValue from one resolved buffer key.
+     *
+     * Transform components (x, scaleY, rotateY, ...) normally never exist as
+     * standalone values -- they are folded into the single transform string. A
+     * card that needs one materialises it here, and nothing pays for it until
+     * then. Returns an unsubscribe.
+     */
+    register<K extends keyof SlotFrameBuffer>(key: K, value: MotionValue<SlotFrameBuffer[K]>): () => void;
+}
+/**
+ * The per-slot write path. One layout evaluation and one transform string per
+ * slot per frame.
+ *
+ * ## Why a single string
+ *
+ * Verified against motion 12.43: `"transform"` is absent from `transformProps`
+ * (motion-dom/render/utils/keys-transform), and `buildHTMLStyles` guards with
+ * `if (!latestValues.transform)` before calling `buildTransform`. So handing
+ * motion a ready-made transform string short-circuits its 18-property
+ * serialisation loop entirely.
+ *
+ * 0.1.0 ran five independent `useTransform` closures per slot -- five scheduler
+ * entries, five subscriptions, five function calls per frame, two of which
+ * (skewX/skewY) were computed and then never consumed by either card. Worse, the
+ * cost scaled *with* preset richness: a seven-term coverflow would have cost
+ * three times the two-term wave. Here it costs the same.
+ *
+ * ## Why this is not useMotionValueEvent
+ *
+ * The `update()` call in the render body is load-bearing and must not be
+ * "simplified" into an effect or a change subscription. This mirrors motion's
+ * own `useCombineMotionValues`, which calls `updateValue()` synchronously on
+ * every render for exactly this reason.
+ *
+ * At mount, metrics are all zero, so every card resolves to offset 0. The
+ * ResizeObserver then lands real numbers and React re-renders -- but `position`
+ * never moved, so no "change" event fires. A subscription-only writer would
+ * never re-run the layout, and every card would stay stacked on one edge until
+ * the user dragged, fading in as a pile.
+ *
+ * Typed to `CarouselMotionSlice`, not the full `CarouselEngine`, deliberately:
+ * everything read below (readFrame, readSlot, config, position, mode) lives in
+ * the motion slice, and the type constraint is what guarantees a future edit
+ * here can't reach for a data-slice field (`items`, `filter`, `metrics`, ...)
+ * without the compiler catching it. Slot passes it a `useCarouselMotion()`
+ * result specifically so a filter click never has a reason to run this again.
+ */
+export declare function useSlotWriter(handle: CarouselMotionSlice, index: number): SlotWriter;

package/dist/carousel/slot/useSlotWriter.js

@@ -0,0 +1,163 @@
+"use client";
+import { useRef } from "react";
+import { cancelFrame, frame as scheduler, useIsomorphicLayoutEffect, useMotionValue, } from "motion/react";
+import { createSlotFrameBuffer } from "../engine/types.js";
+import { applyLayout, serializeTransform } from "../layout/types.js";
+import { blendBuffers } from "../engine/morph.js";
+import { presenceProgress } from "../engine/presence.js";
+function useConstant(create) {
+    const ref = useRef(null);
+    if (ref.current === null)
+        ref.current = create();
+    return ref.current;
+}
+/**
+ * The per-slot write path. One layout evaluation and one transform string per
+ * slot per frame.
+ *
+ * ## Why a single string
+ *
+ * Verified against motion 12.43: `"transform"` is absent from `transformProps`
+ * (motion-dom/render/utils/keys-transform), and `buildHTMLStyles` guards with
+ * `if (!latestValues.transform)` before calling `buildTransform`. So handing
+ * motion a ready-made transform string short-circuits its 18-property
+ * serialisation loop entirely.
+ *
+ * 0.1.0 ran five independent `useTransform` closures per slot -- five scheduler
+ * entries, five subscriptions, five function calls per frame, two of which
+ * (skewX/skewY) were computed and then never consumed by either card. Worse, the
+ * cost scaled *with* preset richness: a seven-term coverflow would have cost
+ * three times the two-term wave. Here it costs the same.
+ *
+ * ## Why this is not useMotionValueEvent
+ *
+ * The `update()` call in the render body is load-bearing and must not be
+ * "simplified" into an effect or a change subscription. This mirrors motion's
+ * own `useCombineMotionValues`, which calls `updateValue()` synchronously on
+ * every render for exactly this reason.
+ *
+ * At mount, metrics are all zero, so every card resolves to offset 0. The
+ * ResizeObserver then lands real numbers and React re-renders -- but `position`
+ * never moved, so no "change" event fires. A subscription-only writer would
+ * never re-run the layout, and every card would stay stacked on one edge until
+ * the user dragged, fading in as a pile.
+ *
+ * Typed to `CarouselMotionSlice`, not the full `CarouselEngine`, deliberately:
+ * everything read below (readFrame, readSlot, config, position, mode) lives in
+ * the motion slice, and the type constraint is what guarantees a future edit
+ * here can't reach for a data-slice field (`items`, `filter`, `metrics`, ...)
+ * without the compiler catching it. Slot passes it a `useCarouselMotion()`
+ * result specifically so a filter click never has a reason to run this again.
+ */
+export function useSlotWriter(handle, index) {
+    const buffer = useConstant(createSlotFrameBuffer);
+    // Layout morph: this slot's pose when the change happened, blended into the
+    // new layout's pose. `written` is false for a slot mounted mid-morph: it has
+    // no pose to start from and takes the new layout as it is.
+    const from = useConstant(createSlotFrameBuffer);
+    const morphSeen = useConstant(() => ({ gen: 0, snapshot: false, written: false }));
+    // Stays empty for every card that never asks, which is almost all of them.
+    // Stored as type-erased setters: MotionValue<T> is invariant in T, so a map
+    // keyed by the buffer's union of value types cannot be expressed directly.
+    const extras = useConstant(() => new Map());
+    const slotState = useConstant(() => ({
+        index: 0,
+        ringIndex: 0,
+        itemIndex: null,
+        distance: 0,
+    }));
+    const transform = useMotionValue("none");
+    const distance = useMotionValue(0);
+    const opacity = useMotionValue(1);
+    const zIndex = useMotionValue(0);
+    const filter = useMotionValue("none");
+    const pointerEvents = useMotionValue("auto");
+    const originX = useMotionValue(0.5);
+    const originY = useMotionValue(0.5);
+    const update = () => {
+        const frameState = handle.readFrame();
+        const slot = handle.readSlot(slotState, index);
+        // A layout may name a reduced-motion stand-in (stage looks use fade()).
+        // The flag is a ref, so the swap lands on the next write, not a re-render.
+        const { layout } = handle.config;
+        const active = layout.reduced && handle.reducedMotion.current && handle.config.a11y.respectReducedMotion
+            ? layout.reduced
+            : layout;
+        const morph = handle.morph.current;
+        if (morph.active && morphSeen.gen !== morph.gen) {
+            morphSeen.gen = morph.gen;
+            morphSeen.snapshot = morphSeen.written;
+            // the pose on screen right now, mid-morph included
+            if (morphSeen.written)
+                Object.assign(from, buffer);
+        }
+        applyLayout(active, buffer, slot, frameState);
+        morphSeen.written = true;
+        // The one exception to "one layout evaluation per frame" is free here: the
+        // old pose is a snapshot, so a morph costs one blend, not a second layout.
+        if (morph.active && morphSeen.snapshot) {
+            const t = morph.curve.at(handle.morphClock.get() - morph.stagger * Math.abs(slot.distance));
+            if (t !== 1)
+                blendBuffers(buffer, from, buffer, t);
+        }
+        // Enter / exit: the preset moves the resting pose to how it looks at p.
+        const presence = handle.presence.current;
+        if (presence.phase !== "shown" && presence.preset) {
+            const p = presenceProgress(presence, handle.presenceClock.get(), slot.distance);
+            if (p !== 1)
+                presence.preset.apply(buffer, slot, frameState, p);
+        }
+        // Every .set early-outs when the value is unchanged, so the near-static
+        // ones below cost nothing on a typical frame.
+        transform.set(serializeTransform(buffer));
+        const range = layout.distanceRange;
+        distance.set(range ? Math.min(range[1], Math.max(range[0], slot.distance)) : slot.distance);
+        opacity.set(buffer.opacity);
+        zIndex.set(buffer.zIndex);
+        filter.set(buffer.filter);
+        pointerEvents.set(buffer.pointerEvents);
+        originX.set(buffer.originX);
+        originY.set(buffer.originY);
+        for (const [key, sink] of extras)
+            sink(buffer[key]);
+    };
+    // Synchronous, every render. See the note above.
+    update();
+    // No dependency array, matching useCombineMotionValues: resubscribing each
+    // render is what keeps `update`'s closure over `index` and the current layout
+    // fresh. preRender(..., immediate=true) collapses a double-write in one frame.
+    useIsomorphicLayoutEffect(() => {
+        const schedule = () => scheduler.preRender(update, false, true);
+        const stopPosition = handle.position.on("change", schedule);
+        const stopMode = handle.mode.on("change", schedule);
+        const stopMorph = handle.morphClock.on("change", schedule);
+        const stopPresence = handle.presenceClock.on("change", schedule);
+        return () => {
+            stopPosition();
+            stopMode();
+            stopMorph();
+            stopPresence();
+            cancelFrame(update);
+        };
+    });
+    return {
+        transform,
+        distance,
+        opacity,
+        zIndex,
+        filter,
+        pointerEvents,
+        originX,
+        originY,
+        buffer,
+        register(key, value) {
+            const sink = (v) => value.set(v);
+            extras.set(key, sink);
+            return () => {
+                // Identity-checked so a re-register cannot be undone by a stale cleanup.
+                if (extras.get(key) === sink)
+                    extras.delete(key);
+            };
+        },
+    };
+}

package/dist/carousel/types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Public data types.
+ *
+ * 0.1.0 shipped a closed `TemplateCategory` union of four English literals,
+ * which type-blocked every site that wasn't folio. Items are now opaque to the
+ * engine: it stores indices, never records (see engine/ring.ts), so nothing
+ * here constrains what a card actually holds.
+ */
+/** A filter's value. Any string; "all" is conventional but not required. */
+export type FilterValue = string;
+export interface CarouselFilter<T = unknown> {
+    readonly label: string;
+    readonly value: FilterValue;
+    /**
+     * Which items this pill keeps. Omit it and the filter matches every item
+     * whose `category` field equals `value` -- the 0.1.0 behaviour, minus the
+     * closed union.
+     */
+    readonly predicate?: (item: T, index: number) => boolean;
+}
+/**
+ * The default match when a filter declares no predicate: keep everything for
+ * "all", otherwise compare a `category` field if the item happens to have one.
+ */
+export declare function defaultFilterPredicate(item: unknown, value: FilterValue): boolean;

package/dist/carousel/types.js

@@ -0,0 +1,20 @@
+/**
+ * Public data types.
+ *
+ * 0.1.0 shipped a closed `TemplateCategory` union of four English literals,
+ * which type-blocked every site that wasn't folio. Items are now opaque to the
+ * engine: it stores indices, never records (see engine/ring.ts), so nothing
+ * here constrains what a card actually holds.
+ */
+/**
+ * The default match when a filter declares no predicate: keep everything for
+ * "all", otherwise compare a `category` field if the item happens to have one.
+ */
+export function defaultFilterPredicate(item, value) {
+    if (value === "all")
+        return true;
+    if (typeof item !== "object" || item === null)
+        return false;
+    const category = item.category;
+    return category === value;
+}

package/dist/forms/base.d.ts

@@ -0,0 +1 @@
+export declare const FORM_BASE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-field]) {\n    --sx-form-dir: 1;\n    --sx-field-px: 1rem;\n    --sx-field-py: 0.75rem;\n    --sx-field-bw: 0px;\n    --sx-field-start: var(--sx-field-px);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: \"label\" \"box\" \"meter\" \"description\" \"note\" \"message\";\n    align-content: start;\n    min-inline-size: 0;\n    position: relative;\n    isolation: isolate;\n  }\n  :where([data-sx-field]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-field]:has([data-sx-field-icon])) {\n    --sx-field-start: calc(var(--sx-field-px) + 1.25em + 0.5rem);\n  }\n  :where([data-sx-field-label]) {\n    grid-area: label;\n    justify-self: start;\n    position: relative;\n    margin-block-end: 0.375rem;\n  }\n  :where([data-sx-field-box]) {\n    grid-area: box;\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    min-inline-size: 0;\n  }\n  :where([data-sx-field-control]) {\n    flex: 1 1 auto;\n    align-self: stretch;\n    min-inline-size: 0;\n    box-sizing: border-box;\n    margin: 0;\n    border: 0;\n    border-radius: inherit;\n    padding-block: var(--sx-field-py);\n    padding-inline: var(--sx-field-start) var(--sx-field-px);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    line-height: 1.5;\n    outline: none;\n  }\n  :where(textarea[data-sx-field-control]) {\n    resize: vertical;\n  }\n  :where([data-sx-field]:has([data-sx-field-control]:focus-visible) > [data-sx-field-box]) {\n    outline: var(--sx-field-ring-width, 2px) var(--sx-field-ring-style, solid) var(--sx-field-ring-color, var(--color-sx-primary, currentColor));\n    outline-offset: var(--sx-field-ring-offset, 2px);\n  }\n  :where([data-sx-ring=\"none\"]) {\n    --sx-field-ring-style: none;\n  }\n  :where([data-sx-field-control]:autofill) {\n    filter: none;\n    -webkit-text-fill-color: currentColor;\n    transition: background-color 0s 600000s, color 0s 600000s;\n  }\n  :where([data-sx-field-icon]) {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: var(--sx-field-px);\n    display: grid;\n    place-items: center;\n    inline-size: 1.25em;\n    pointer-events: none;\n  }\n  :where([data-sx-field-icon] > svg) {\n    display: block;\n    inline-size: 1.15em;\n    block-size: 1.15em;\n  }\n  :where([data-sx-field-end]) {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-inline-end: calc(var(--sx-field-px) / 2);\n  }\n  :where([data-sx-field-text]) {\n    display: inline-block;\n  }\n  :where([data-sx-field-sr]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  :where([data-sx-field-chars]) {\n    display: inline-flex;\n  }\n  :where([data-sx-field-char]) {\n    display: inline-block;\n    white-space: pre;\n  }\n  :where([data-sx-field-layer]) {\n    position: absolute;\n    inset: calc(var(--sx-field-bw) * -1);\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :where([data-sx-field-layer][data-sx-field-slot=\"under\"]) {\n    z-index: -1;\n  }\n  :where([data-sx-field-label] > [data-sx-field-layer]) {\n    position: static;\n    border-radius: 0;\n  }\n  :where([data-sx-field] > [data-sx-field-layer][data-sx-field-slot=\"behind\"]) {\n    position: relative;\n    inset: auto;\n    grid-area: box;\n    z-index: -1;\n    border-radius: var(--radius-sx-control, 0);\n  }\n  :where([data-sx-field-clip]) {\n    position: absolute;\n    inset: 0;\n    z-index: -1;\n    overflow: hidden;\n    border-radius: inherit;\n    container-type: size;\n    pointer-events: none;\n  }\n  :where([data-sx-field-clip] > [data-sx-field-layer]) {\n    inset: 0;\n    border-radius: 0;\n  }\n  :where([data-sx-field-layer] > svg) {\n    position: absolute;\n    inset: 0;\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    overflow: visible;\n  }\n  :where(fieldset[data-sx-field-layer]) {\n    margin: 0;\n    padding: 0;\n    min-inline-size: 0;\n  }\n  :where([data-sx-field-description]) {\n    grid-area: description;\n    margin: 0.375rem 0 0;\n  }\n  :where([data-sx-field-message]) {\n    grid-area: message;\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-field-message]:has(> [data-sx-field-error]:not(:empty))) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-field-error]) {\n    min-block-size: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-field-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  :where([data-sx-field-off] *) {\n    animation-play-state: paused !important;\n  }\n  :where([data-sx-field][data-sx-inline]) {\n    --sx-field-px: 0.125rem;\n    --sx-field-py: 0rem;\n    display: inline-grid;\n    vertical-align: baseline;\n    grid-template-areas: \"box\";\n  }\n  :where([data-sx-field][data-sx-inline] > [data-sx-field-label]) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  :where([data-sx-field][data-sx-inline] [data-sx-field-control]) {\n    field-sizing: content;\n    min-inline-size: var(--sx-field-min, 6ch);\n  }\n  :where([data-sx-field][data-sx-inline] > :is([data-sx-field-message], [data-sx-field-description])) {\n    position: absolute;\n    inset-block-start: 100%;\n    inset-inline-start: 0;\n    z-index: 1;\n    inline-size: max-content;\n    max-inline-size: 20rem;\n  }\n  @media (pointer: coarse) {\n    :where([data-sx-field-control]) {\n      font-size: max(16px, 1em);\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :where([data-sx-field-clip]:not([data-sx-field-keep]), [data-sx-field-layer]:not([data-sx-field-keep])) {\n      display: none;\n    }\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-ring]) {\n      --sx-field-ring-style: solid;\n    }\n  }\n}";

package/dist/forms/base.js

@@ -0,0 +1,224 @@
+// The structural sheet every form control ships: the anatomy, the focus ring on the box, autofill, 16 px text on touch
+// screens, the error region, the reduced-motion and off-screen switches. Positioning only, no colours of its own: the
+// look is styles/form.css (or the developer's className). Pure string, so it works without theme.css. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-field-control]";
+export const FORM_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-field]) {
+    --sx-form-dir: 1;
+    --sx-field-px: 1rem;
+    --sx-field-py: 0.75rem;
+    --sx-field-bw: 0px;
+    --sx-field-start: var(--sx-field-px);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "label" "box" "meter" "description" "note" "message";
+    align-content: start;
+    min-inline-size: 0;
+    position: relative;
+    isolation: isolate;
+  }
+  :where([data-sx-field]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-field]:has([data-sx-field-icon])) {
+    --sx-field-start: calc(var(--sx-field-px) + 1.25em + 0.5rem);
+  }
+  :where([data-sx-field-label]) {
+    grid-area: label;
+    justify-self: start;
+    position: relative;
+    margin-block-end: 0.375rem;
+  }
+  :where([data-sx-field-box]) {
+    grid-area: box;
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-inline-size: 0;
+  }
+  :where(${CONTROL}) {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    border-radius: inherit;
+    padding-block: var(--sx-field-py);
+    padding-inline: var(--sx-field-start) var(--sx-field-px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1.5;
+    outline: none;
+  }
+  :where(textarea${CONTROL}) {
+    resize: vertical;
+  }
+  :where([data-sx-field]:has(${CONTROL}:focus-visible) > [data-sx-field-box]) {
+    outline: var(--sx-field-ring-width, 2px) var(--sx-field-ring-style, solid) var(--sx-field-ring-color, var(--color-sx-primary, currentColor));
+    outline-offset: var(--sx-field-ring-offset, 2px);
+  }
+  :where([data-sx-ring="none"]) {
+    --sx-field-ring-style: none;
+  }
+  :where(${CONTROL}:autofill) {
+    filter: none;
+    -webkit-text-fill-color: currentColor;
+    transition: background-color 0s 600000s, color 0s 600000s;
+  }
+  :where([data-sx-field-icon]) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--sx-field-px);
+    display: grid;
+    place-items: center;
+    inline-size: 1.25em;
+    pointer-events: none;
+  }
+  :where([data-sx-field-icon] > svg) {
+    display: block;
+    inline-size: 1.15em;
+    block-size: 1.15em;
+  }
+  :where([data-sx-field-end]) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-inline-end: calc(var(--sx-field-px) / 2);
+  }
+  :where([data-sx-field-text]) {
+    display: inline-block;
+  }
+  :where([data-sx-field-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-field-chars]) {
+    display: inline-flex;
+  }
+  :where([data-sx-field-char]) {
+    display: inline-block;
+    white-space: pre;
+  }
+  :where([data-sx-field-layer]) {
+    position: absolute;
+    inset: calc(var(--sx-field-bw) * -1);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  :where([data-sx-field-layer][data-sx-field-slot="under"]) {
+    z-index: -1;
+  }
+  :where([data-sx-field-label] > [data-sx-field-layer]) {
+    position: static;
+    border-radius: 0;
+  }
+  :where([data-sx-field] > [data-sx-field-layer][data-sx-field-slot="behind"]) {
+    position: relative;
+    inset: auto;
+    grid-area: box;
+    z-index: -1;
+    border-radius: var(--radius-sx-control, 0);
+  }
+  :where([data-sx-field-clip]) {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    border-radius: inherit;
+    container-type: size;
+    pointer-events: none;
+  }
+  :where([data-sx-field-clip] > [data-sx-field-layer]) {
+    inset: 0;
+    border-radius: 0;
+  }
+  :where([data-sx-field-layer] > svg) {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :where(fieldset[data-sx-field-layer]) {
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+  :where([data-sx-field-description]) {
+    grid-area: description;
+    margin: 0.375rem 0 0;
+  }
+  :where([data-sx-field-message]) {
+    grid-area: message;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-field-message]:has(> [data-sx-field-error]:not(:empty))) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-field-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-field-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-field-off] *) {
+    animation-play-state: paused !important;
+  }
+  :where([data-sx-field][data-sx-inline]) {
+    --sx-field-px: 0.125rem;
+    --sx-field-py: 0rem;
+    display: inline-grid;
+    vertical-align: baseline;
+    grid-template-areas: "box";
+  }
+  :where([data-sx-field][data-sx-inline] > [data-sx-field-label]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-field][data-sx-inline] ${CONTROL}) {
+    field-sizing: content;
+    min-inline-size: var(--sx-field-min, 6ch);
+  }
+  :where([data-sx-field][data-sx-inline] > :is([data-sx-field-message], [data-sx-field-description])) {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    z-index: 1;
+    inline-size: max-content;
+    max-inline-size: 20rem;
+  }
+  @media (pointer: coarse) {
+    :where(${CONTROL}) {
+      font-size: max(16px, 1em);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-field-clip]:not([data-sx-field-keep]), [data-sx-field-layer]:not([data-sx-field-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-ring]) {
+      --sx-field-ring-style: solid;
+    }
+  }
+}`;