@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/file.js

@@ -0,0 +1,268 @@
+// The structural sheet of FileDrop: the drop zone round the real file input (visible: its own button opens the picker,
+// from the keyboard too), the list of file cards (a picture or an icon, the name and size, a progress bar, a check when
+// uploaded, the move and remove buttons) and the page-wide overlay of `page`. Positioning and states only; the look is
+// styles/form.css. Pure strings. See ./CLAUDE.md.
+//
+// The real input's own words ("No file chosen") are see-through: the zone's words say it, and the list shows the files.
+// Its button stays, styled by the look through hooks (--sx-file-button-*), which fileButton sets.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-file-control]";
+export const FILE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-file]) {
+    --sx-form-dir: 1;
+    --sx-file-thumb: 2.5rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "label" "zone" "description" "list" "message";
+    align-content: start;
+    min-inline-size: 0;
+    position: relative;
+  }
+  :where([data-sx-file]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-file-label]) {
+    grid-area: label;
+    justify-self: start;
+    margin-block-end: 0.375rem;
+  }
+  :where([data-sx-file-zone]) {
+    grid-area: zone;
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    justify-items: center;
+    gap: 0.5rem;
+    padding: 1.5rem 1rem;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+  }
+  :where([data-sx-file-zone] > [data-sx-file-layer]) {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  :where([data-sx-file-icon]) {
+    display: grid;
+    place-items: center;
+  }
+  :where([data-sx-file-icon] svg, [data-sx-file-card] svg) {
+    display: block;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where(${CONTROL}) {
+    max-inline-size: 100%;
+    color: transparent;
+    font: inherit;
+    font-size: max(16px, 0.875rem);
+    cursor: pointer;
+  }
+  :where(${CONTROL})::file-selector-button {
+    margin-inline-end: 0;
+    padding: 0.5rem 1rem;
+    font: inherit;
+    cursor: pointer;
+  }
+  :where(${CONTROL}:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-file][data-sx-over] [data-sx-file-zone]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: -2px;
+  }
+  :where([data-sx-file][data-sx-over="reject"] [data-sx-file-zone]) {
+    outline-color: var(--color-sx-danger, currentColor);
+    cursor: no-drop;
+  }
+  :where([data-sx-file]:has(${CONTROL}:disabled) [data-sx-file-zone]) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-file-description]) {
+    grid-area: description;
+    margin: 0.375rem 0 0;
+  }
+  :where([data-sx-file-list]) {
+    grid-area: list;
+    display: grid;
+    gap: 0.5rem;
+    margin: 0.75rem 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where([data-sx-file-card]) {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    grid-template-columns: var(--sx-file-thumb) minmax(0, 1fr) auto auto;
+    grid-template-areas: "thumb info status actions";
+    align-items: center;
+    column-gap: 0.75rem;
+    padding: 0.5rem;
+    box-sizing: border-box;
+  }
+  :where([data-sx-file-card] > [data-sx-file-layer]) {
+    grid-area: status;
+    pointer-events: none;
+  }
+  :where([data-sx-file-thumb]) {
+    grid-area: thumb;
+    display: grid;
+    place-items: center;
+    inline-size: var(--sx-file-thumb);
+    block-size: var(--sx-file-thumb);
+    overflow: hidden;
+    border-radius: calc(var(--radius-sx-control, 0.5rem) * 0.75);
+  }
+  :where([data-sx-file-thumb] > img) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+  :where([data-sx-file-info]) {
+    grid-area: info;
+    display: grid;
+    min-inline-size: 0;
+    gap: 0.125rem;
+  }
+  :where([data-sx-file-name]) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :where([data-sx-file-bar]) {
+    display: block;
+    block-size: 0.25rem;
+    margin-block-start: 0.25rem;
+    overflow: hidden;
+    border-radius: 999px;
+  }
+  :where([data-sx-file-fill]) {
+    display: block;
+    block-size: 100%;
+    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;
+    scale: var(--sx-file-progress, 0) 1;
+    background: currentColor;
+  }
+  :where([data-sx-file-done]) {
+    grid-area: status;
+    display: none;
+  }
+  :where([data-sx-file-card][data-sx-done] [data-sx-file-done]) {
+    display: grid;
+  }
+  :where([data-sx-file-card][data-sx-done] [data-sx-file-bar]) {
+    opacity: 0;
+  }
+  :where([data-sx-file-actions]) {
+    grid-area: actions;
+    display: flex;
+    gap: 0.125rem;
+  }
+  :where([data-sx-file-actions] > button) {
+    display: grid;
+    place-items: center;
+    inline-size: 2rem;
+    block-size: 2rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  :where([data-sx-file-actions] > button svg) {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+  :where([data-sx-file-actions] > button:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 1px;
+  }
+  :where([data-sx-file-actions] > button:disabled) {
+    opacity: 0.35;
+    cursor: default;
+  }
+  :where([data-sx-file-card][data-sx-leaving]) {
+    pointer-events: none;
+  }
+  :where([data-sx-file-page]) {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483000;
+    display: none;
+    place-items: center;
+    isolation: isolate;
+    padding: 1.5rem;
+    box-sizing: border-box;
+    font-size: 1.5rem;
+  }
+  :where([data-sx-file][data-sx-page-over] [data-sx-file-page]) {
+    display: grid;
+  }
+  :where([data-sx-file-page] > [data-sx-file-layer]) {
+    position: absolute;
+    inset: 1rem;
+    z-index: -1;
+    pointer-events: none;
+  }
+  :where([data-sx-file-message]) {
+    grid-area: message;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-file-message]:has([data-sx-file-says])) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-file-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-file-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-file-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-file] [data-sx-file-layer]:not([data-sx-file-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-file-zone]) {
+      border: 2px dashed CanvasText;
+    }
+    :where(${CONTROL}) {
+      color: CanvasText;
+    }
+    :where([data-sx-file-card]) {
+      border: 1px solid CanvasText;
+    }
+    :where([data-sx-file-fill]) {
+      forced-color-adjust: none;
+      background: Highlight;
+    }
+  }
+}`;

package/dist/forms/files.d.ts

@@ -0,0 +1,7 @@
+/** Whether a file is one `accept` lets in: `.pdf` by name, `image/*` by type family, `image/png` by type. */
+export declare function accepts(file: {
+    readonly name: string;
+    readonly type: string;
+}, accept: string | undefined): boolean;
+/** "2.4 MB", in the visitor's language. */
+export declare function fileSize(bytes: number, locale?: string): string;

package/dist/forms/files.js

@@ -0,0 +1,29 @@
+// FileDrop's pure helpers: which files `accept` lets in, and a file's size in words. A plain module, so a server (or a
+// form's own check) can use them too.
+/** Whether a file is one `accept` lets in: `.pdf` by name, `image/*` by type family, `image/png` by type. */
+export function accepts(file, accept) {
+    if (!accept)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.split(",").some((raw) => {
+        const t = raw.trim().toLowerCase();
+        if (!t)
+            return false;
+        if (t.startsWith("."))
+            return name.endsWith(t);
+        if (t.endsWith("/*"))
+            return type.startsWith(t.slice(0, -1));
+        return type === t;
+    });
+}
+/** "2.4 MB", in the visitor's language. */
+export function fileSize(bytes, locale) {
+    const [n, unit] = bytes >= 1e9 ? [bytes / 1e9, "gigabyte"] : bytes >= 1e6 ? [bytes / 1e6, "megabyte"] : bytes >= 1e3 ? [bytes / 1e3, "kilobyte"] : [bytes, "byte"];
+    try {
+        return new Intl.NumberFormat(locale, { style: "unit", unit, unitDisplay: "short", maximumFractionDigits: n < 10 ? 1 : 0 }).format(n);
+    }
+    catch {
+        return `${Math.round(n * 10) / 10} ${unit === "byte" ? "B" : unit[0].toUpperCase() + "B"}`;
+    }
+}

package/dist/forms/formSteps.d.ts

@@ -0,0 +1,9 @@
+import { FormStepsBack, FormStepsNext, FormStepsProgress, FormStepsRoot, FormStepsStep } from "./controls/FormSteps.js";
+/** A form in steps: `Root` holds them, `Step` is one, `Progress` shows where you are, `Next` and `Back` move. */
+export declare const FormSteps: {
+    Root: typeof FormStepsRoot;
+    Step: typeof FormStepsStep;
+    Progress: typeof FormStepsProgress;
+    Next: typeof FormStepsNext;
+    Back: typeof FormStepsBack;
+};

package/dist/forms/formSteps.js

@@ -0,0 +1,6 @@
+// FormSteps as one object (`FormSteps.Root`, `.Step`, `.Progress`, `.Next`, `.Back`), built in a plain module: a
+// "use client" module's exports reach a Server Component as opaque references, so an object built there would have
+// no `.Root` on the server (.claude/rules/typescript-esm.md).
+import { FormStepsBack, FormStepsNext, FormStepsProgress, FormStepsRoot, FormStepsStep } from "./controls/FormSteps.js";
+/** A form in steps: `Root` holds them, `Step` is one, `Progress` shows where you are, `Next` and `Back` move. */
+export const FormSteps = { Root: FormStepsRoot, Step: FormStepsStep, Progress: FormStepsProgress, Next: FormStepsNext, Back: FormStepsBack };

package/dist/forms/ids.d.ts

@@ -0,0 +1,17 @@
+export interface FieldIds {
+    readonly control: string;
+    readonly label: string;
+    readonly description: string;
+    readonly error: string;
+}
+/** The ids of a control's parts, from its own id. */
+export declare function fieldIds(id: string): FieldIds;
+/**
+ * What `aria-describedby` points at: the error while there is one, the description otherwise, then whatever the
+ * developer passed. A screen reader then reads the error with the field, and never a stale hint over it.
+ */
+export declare function fieldDescribedBy(ids: FieldIds, state: {
+    readonly error: boolean;
+    readonly description: boolean;
+    readonly own?: string | undefined;
+}): string | undefined;

package/dist/forms/ids.js

@@ -0,0 +1,13 @@
+// The accessibility contract's ids, derived from the control's id. Pure; tested.
+/** The ids of a control's parts, from its own id. */
+export function fieldIds(id) {
+    return { control: id, label: `${id}-label`, description: `${id}-description`, error: `${id}-error` };
+}
+/**
+ * What `aria-describedby` points at: the error while there is one, the description otherwise, then whatever the
+ * developer passed. A screen reader then reads the error with the field, and never a stale hint over it.
+ */
+export function fieldDescribedBy(ids, state) {
+    const parts = [state.error ? ids.error : state.description ? ids.description : undefined, state.own].filter(Boolean);
+    return parts.length > 0 ? parts.join(" ") : undefined;
+}

package/dist/forms/inline.d.ts

@@ -0,0 +1,3 @@
+export declare const INLINE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-inline]) {\n    --sx-inline-px: 0.5rem;\n    --sx-inline-py: 0.25rem;\n    position: relative;\n    display: inline-grid;\n    grid-template-columns: minmax(0, 1fr);\n    align-items: center;\n    max-inline-size: 100%;\n    vertical-align: middle;\n  }\n  :where([data-sx-inline-view], [data-sx-inline-control]) {\n    grid-area: 1 / 1;\n    box-sizing: border-box;\n    min-inline-size: 0;\n    margin: 0;\n    padding: var(--sx-inline-py) var(--sx-inline-px);\n    font: inherit;\n    line-height: 1.5;\n    color: inherit;\n    text-align: start;\n  }\n  :where([data-sx-inline-view]) {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.375rem;\n    border: 1px solid transparent;\n    border-radius: var(--radius-sx-control, 0.375rem);\n    background: transparent;\n    cursor: text;\n  }\n  :where([data-sx-inline-text]) {\n    min-inline-size: 0;\n    overflow-wrap: anywhere;\n    white-space: pre-wrap;\n  }\n  :where([data-sx-inline-icon], [data-sx-inline-done]) {\n    flex: none;\n    inline-size: 0.9em;\n    block-size: 0.9em;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-inline-done]) {\n    display: none;\n  }\n  :where([data-sx-inline][data-sx-saved] [data-sx-inline-done]) {\n    display: block;\n  }\n  :where([data-sx-inline-view]:focus-visible) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-inline-control]) {\n    min-inline-size: 4ch;\n    field-sizing: content;\n    border: 1px solid transparent;\n    border-radius: var(--radius-sx-control, 0.375rem);\n    background: transparent;\n    opacity: 0;\n    pointer-events: none;\n    resize: none;\n  }\n  :where([data-sx-inline][data-sx-editing] [data-sx-inline-control]) {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  :where([data-sx-inline][data-sx-editing] [data-sx-inline-view]) {\n    opacity: 0;\n    pointer-events: none;\n  }\n  :where([data-sx-inline-control]:focus-visible) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-inline][data-sx-saving] [data-sx-inline-text]) {\n    opacity: 0.6;\n  }\n  :where([data-sx-inline-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  @media (pointer: coarse) {\n    :where([data-sx-inline-control]) {\n      font-size: max(16px, 1em);\n    }\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-inline-control]) {\n      border-color: CanvasText;\n    }\n  }\n}";
+/** What moves: the field grows out of the text and back, and the saved tick draws. Dropped under reduced motion. */
+export declare const INLINE_MOTION = "@layer components {\n  :where([data-sx-inline-view], [data-sx-inline-control]) {\n    transition: opacity 150ms ease-out, scale 150ms var(--ease-sx-out, ease-out);\n  }\n  :where([data-sx-inline]:not([data-sx-editing]) [data-sx-inline-control]) {\n    scale: 0.97;\n  }\n  :where([data-sx-inline-done] path) {\n    stroke-dasharray: 1 2;\n    stroke-dashoffset: 1.01;\n    animation: sx-form-inline-done 300ms var(--ease-sx-out, ease-out) forwards;\n  }\n  @keyframes sx-form-inline-done {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n}";

package/dist/forms/inline.js

@@ -0,0 +1,128 @@
+// The structural sheet of InlineEdit: the text (a button) and the real input share one grid cell. At rest the input is
+// there, invisible and inert (it still submits with the form); while editing, the button steps aside. Positioning only;
+// the look is styles/form.css. Pure strings. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-inline-control]";
+const VIEW = "[data-sx-inline-view]";
+const EDITING = "[data-sx-editing]";
+export const INLINE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-inline]) {
+    --sx-inline-px: 0.5rem;
+    --sx-inline-py: 0.25rem;
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-items: center;
+    max-inline-size: 100%;
+    vertical-align: middle;
+  }
+  :where(${VIEW}, ${CONTROL}) {
+    grid-area: 1 / 1;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--sx-inline-py) var(--sx-inline-px);
+    font: inherit;
+    line-height: 1.5;
+    color: inherit;
+    text-align: start;
+  }
+  :where(${VIEW}) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sx-control, 0.375rem);
+    background: transparent;
+    cursor: text;
+  }
+  :where([data-sx-inline-text]) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  :where([data-sx-inline-icon], [data-sx-inline-done]) {
+    flex: none;
+    inline-size: 0.9em;
+    block-size: 0.9em;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-inline-done]) {
+    display: none;
+  }
+  :where([data-sx-inline][data-sx-saved] [data-sx-inline-done]) {
+    display: block;
+  }
+  :where(${VIEW}:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where(${CONTROL}) {
+    min-inline-size: 4ch;
+    field-sizing: content;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sx-control, 0.375rem);
+    background: transparent;
+    opacity: 0;
+    pointer-events: none;
+    resize: none;
+  }
+  :where([data-sx-inline]${EDITING} ${CONTROL}) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  :where([data-sx-inline]${EDITING} ${VIEW}) {
+    opacity: 0;
+    pointer-events: none;
+  }
+  :where(${CONTROL}:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-inline][data-sx-saving] [data-sx-inline-text]) {
+    opacity: 0.6;
+  }
+  :where([data-sx-inline-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  @media (pointer: coarse) {
+    :where(${CONTROL}) {
+      font-size: max(16px, 1em);
+    }
+  }
+  @media (forced-colors: active) {
+    :where(${CONTROL}) {
+      border-color: CanvasText;
+    }
+  }
+}`;
+/** What moves: the field grows out of the text and back, and the saved tick draws. Dropped under reduced motion. */
+export const INLINE_MOTION = `@layer components {
+  :where(${VIEW}, ${CONTROL}) {
+    transition: opacity 150ms ease-out, scale 150ms var(--ease-sx-out, ease-out);
+  }
+  :where([data-sx-inline]:not(${EDITING}) ${CONTROL}) {
+    scale: 0.97;
+  }
+  :where([data-sx-inline-done] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    animation: sx-form-inline-done 300ms var(--ease-sx-out, ease-out) forwards;
+  }
+  @keyframes sx-form-inline-done {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+}`;

package/dist/forms/number.d.ts

@@ -0,0 +1 @@
+export declare const NUMBER_CSS: string;

package/dist/forms/number.js

@@ -0,0 +1,67 @@
+// NumberField's own small sheet, on top of Field's: the browser's spin buttons hidden (ours replace them), the rolling
+// digits laid over the input's own text, the scrub cursor on the label, and the shake at a limit.
+const CONTROL = "[data-sx-field-control]";
+/** The browser's own spin buttons, one rule each: a browser drops a whole selector list that names another's part. */
+const SPIN = ["::-webkit-inner-spin-button", "::-webkit-outer-spin-button"];
+export const NUMBER_CSS = `@layer components {
+  :where([data-sx-number]) {
+    display: contents;
+  }
+  :where([data-sx-number] ${CONTROL}) {
+    appearance: textfield;
+    font-variant-numeric: tabular-nums;
+  }
+${SPIN.map((part) => `  :where([data-sx-number] ${CONTROL})${part} {
+    appearance: none;
+    margin: 0;
+  }`).join("\n")}
+  :where([data-sx-number]:not([data-sx-typing]):has([data-sx-number-roll]) ${CONTROL}) {
+    color: transparent;
+    caret-color: var(--color-sx-ink, CanvasText);
+  }
+  :where([data-sx-number-roll]) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+  }
+  :where([data-sx-number][data-sx-typing] [data-sx-number-roll]) {
+    visibility: hidden;
+  }
+  :where([data-sx-number-step][aria-disabled="true"]) {
+    opacity: 0.4;
+    cursor: default;
+  }
+  :where([data-sx-number][data-sx-scrub] [data-sx-field-label]) {
+    cursor: ew-resize;
+    touch-action: pan-y;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  :where([data-sx-number][data-sx-limit] > [data-sx-field]) {
+    --sx-field-edge: var(--color-sx-danger, currentColor);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :where([data-sx-number][data-sx-limit] [data-sx-field-box]) {
+      animation: sx-form-number-limit 0.32s ease-out;
+    }
+    @keyframes sx-form-number-limit {
+      20% { translate: 4px 0; }
+      40% { translate: -4px 0; }
+      60% { translate: 3px 0; }
+      80% { translate: -2px 0; }
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-number]:not([data-sx-typing]):has([data-sx-number-roll]) ${CONTROL}) {
+      color: CanvasText;
+    }
+    :where([data-sx-number-roll]) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/otp.d.ts

@@ -0,0 +1,4 @@
+export declare const OTP_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-otp]) {\n    --sx-otp-w: 2.75rem;\n    --sx-otp-h: 3.25rem;\n    --sx-otp-gap: 0.5rem;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: \"label\" \"box\" \"description\" \"message\";\n    justify-items: start;\n    min-inline-size: 0;\n  }\n  :where([data-sx-otp-label]) {\n    grid-area: label;\n    margin-block-end: 0.375rem;\n  }\n  :where([data-sx-otp-box]) {\n    grid-area: box;\n    position: relative;\n    max-inline-size: 100%;\n  }\n  :where([data-sx-otp-slots]) {\n    display: flex;\n    align-items: center;\n    gap: var(--sx-otp-gap);\n  }\n  :where([data-sx-otp-slot]) {\n    position: relative;\n    display: grid;\n    place-items: center;\n    flex: 0 1 var(--sx-otp-w);\n    min-inline-size: 1.5rem;\n    block-size: var(--sx-otp-h);\n    box-sizing: border-box;\n    font-size: 1.25rem;\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n  }\n  :where([data-sx-otp-char]) {\n    grid-area: 1 / 1;\n  }\n  :where([data-sx-otp-gap]) {\n    display: grid;\n    place-items: center;\n    inline-size: 0.75rem;\n  }\n  :where([data-sx-otp-gap] > span) {\n    inline-size: 100%;\n    block-size: 2px;\n    border-radius: 1px;\n    background: currentColor;\n    opacity: 0.4;\n  }\n  :where([data-sx-otp-control]) {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    inline-size: 100%;\n    block-size: 100%;\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: transparent;\n    -webkit-text-fill-color: transparent;\n    caret-color: transparent;\n    font: inherit;\n    font-size: max(16px, 1em);\n    letter-spacing: 0;\n    outline: none;\n    cursor: text;\n    appearance: none;\n  }\n  :where([data-sx-otp-control])::selection {\n    background: transparent;\n    color: transparent;\n  }\n  :where([data-sx-otp-control]:autofill) {\n    -webkit-text-fill-color: transparent;\n    transition: background-color 0s 600000s, color 0s 600000s;\n  }\n  :where([data-sx-otp-control]:disabled) {\n    cursor: not-allowed;\n  }\n  :where([data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-active], [data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-selected]) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: -1px;\n    z-index: 0;\n  }\n  :where([data-sx-otp-caret]) {\n    grid-area: 1 / 1;\n    inline-size: 2px;\n    block-size: 1.15em;\n    border-radius: 1px;\n    background: currentColor;\n    opacity: 0;\n  }\n  :where([data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-active]:not([data-filled]) [data-sx-otp-caret]) {\n    opacity: 1;\n  }\n  :where([data-sx-otp-description]) {\n    grid-area: description;\n    margin: 0.375rem 0 0;\n  }\n  :where([data-sx-otp-message]) {\n    grid-area: message;\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-otp-message]:has([data-sx-otp-says])) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-otp-error]) {\n    min-block-size: 0;\n    overflow: hidden;\n    margin: 0;\n  }\n  :where([data-sx-otp-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-otp-slot]) {\n      border: 1px solid CanvasText;\n    }\n    :where([data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-active], [data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-selected]) {\n      outline-color: Highlight;\n    }\n    :where([data-sx-otp-caret]) {\n      forced-color-adjust: none;\n      background: CanvasText;\n    }\n  }\n}";
+/** What moves: a typed character pops in (only while the field has the focus: never on load), the caret blinks and
+ * stays lit when the page pauses its loops (WCAG 2.2.2). Dropped under reduced motion. */
+export declare const OTP_MOTION = "@layer components {\n  :where([data-sx-otp-char]) {\n    transition: scale 160ms var(--ease-sx-out, ease-out), opacity 160ms var(--ease-sx-out, ease-out);\n  }\n  @starting-style {\n    :where([data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-char]) {\n      scale: 0.6;\n      opacity: 0;\n    }\n  }\n  :where([data-sx-otp-slot]) {\n    transition: outline-color 120ms ease-out;\n  }\n  :where([data-sx-otp]:has([data-sx-otp-control]:focus) [data-sx-otp-slot][data-active]:not([data-filled]) [data-sx-otp-caret]) {\n    animation: sx-form-otp-blink 1.06s steps(1, end) infinite;\n  }\n  :where(html[data-sx-loops-paused] [data-sx-otp-caret]) {\n    animation: none;\n  }\n  @keyframes sx-form-otp-blink {\n    50% {\n      opacity: 0;\n    }\n  }\n}";