@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/otp.js

@@ -0,0 +1,171 @@
+// The structural sheet of OtpField: one real input laid over drawn slots, transparent, so typing, pasting, a phone's
+// SMS code and a screen reader all meet one ordinary text box, while the slots show its characters. 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-otp-control]";
+const FOCUSED = `:has(${CONTROL}:focus)`;
+// The real input lies over every slot, the same box, its own text, caret and selection invisible; never hidden, it takes
+// the keys, the paste, the SMS code and the screen reader. Its text is 16 px or more, so a phone doesn't zoom in on focus.
+// The slot the next character goes to is ringed, with a caret while it is empty.
+export const OTP_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-otp]) {
+    --sx-otp-w: 2.75rem;
+    --sx-otp-h: 3.25rem;
+    --sx-otp-gap: 0.5rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "label" "box" "description" "message";
+    justify-items: start;
+    min-inline-size: 0;
+  }
+  :where([data-sx-otp-label]) {
+    grid-area: label;
+    margin-block-end: 0.375rem;
+  }
+  :where([data-sx-otp-box]) {
+    grid-area: box;
+    position: relative;
+    max-inline-size: 100%;
+  }
+  :where([data-sx-otp-slots]) {
+    display: flex;
+    align-items: center;
+    gap: var(--sx-otp-gap);
+  }
+  :where([data-sx-otp-slot]) {
+    position: relative;
+    display: grid;
+    place-items: center;
+    flex: 0 1 var(--sx-otp-w);
+    min-inline-size: 1.5rem;
+    block-size: var(--sx-otp-h);
+    box-sizing: border-box;
+    font-size: 1.25rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  :where([data-sx-otp-char]) {
+    grid-area: 1 / 1;
+  }
+  :where([data-sx-otp-gap]) {
+    display: grid;
+    place-items: center;
+    inline-size: 0.75rem;
+  }
+  :where([data-sx-otp-gap] > span) {
+    inline-size: 100%;
+    block-size: 2px;
+    border-radius: 1px;
+    background: currentColor;
+    opacity: 0.4;
+  }
+  :where(${CONTROL}) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    caret-color: transparent;
+    font: inherit;
+    font-size: max(16px, 1em);
+    letter-spacing: 0;
+    outline: none;
+    cursor: text;
+    appearance: none;
+  }
+  :where(${CONTROL})::selection {
+    background: transparent;
+    color: transparent;
+  }
+  :where(${CONTROL}:autofill) {
+    -webkit-text-fill-color: transparent;
+    transition: background-color 0s 600000s, color 0s 600000s;
+  }
+  :where(${CONTROL}:disabled) {
+    cursor: not-allowed;
+  }
+  :where([data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-active], [data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-selected]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: -1px;
+    z-index: 0;
+  }
+  :where([data-sx-otp-caret]) {
+    grid-area: 1 / 1;
+    inline-size: 2px;
+    block-size: 1.15em;
+    border-radius: 1px;
+    background: currentColor;
+    opacity: 0;
+  }
+  :where([data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-active]:not([data-filled]) [data-sx-otp-caret]) {
+    opacity: 1;
+  }
+  :where([data-sx-otp-description]) {
+    grid-area: description;
+    margin: 0.375rem 0 0;
+  }
+  :where([data-sx-otp-message]) {
+    grid-area: message;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-otp-message]:has([data-sx-otp-says])) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-otp-error]) {
+    min-block-size: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+  :where([data-sx-otp-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-otp-slot]) {
+      border: 1px solid CanvasText;
+    }
+    :where([data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-active], [data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-selected]) {
+      outline-color: Highlight;
+    }
+    :where([data-sx-otp-caret]) {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+  }
+}`;
+/** 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 const OTP_MOTION = `@layer components {
+  :where([data-sx-otp-char]) {
+    transition: scale 160ms var(--ease-sx-out, ease-out), opacity 160ms var(--ease-sx-out, ease-out);
+  }
+  @starting-style {
+    :where([data-sx-otp]${FOCUSED} [data-sx-otp-char]) {
+      scale: 0.6;
+      opacity: 0;
+    }
+  }
+  :where([data-sx-otp-slot]) {
+    transition: outline-color 120ms ease-out;
+  }
+  :where([data-sx-otp]${FOCUSED} [data-sx-otp-slot][data-active]:not([data-filled]) [data-sx-otp-caret]) {
+    animation: sx-form-otp-blink 1.06s steps(1, end) infinite;
+  }
+  :where(html[data-sx-loops-paused] [data-sx-otp-caret]) {
+    animation: none;
+  }
+  @keyframes sx-form-otp-blink {
+    50% {
+      opacity: 0;
+    }
+  }
+}`;

package/dist/forms/picker.d.ts

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

package/dist/forms/picker.js

@@ -0,0 +1,303 @@
+// The structural sheet of Select and Combobox: the label, the box, the arrow, the real <select> made stylable where the
+// browser allows it (`appearance: base-select`), the Combobox's popup in the top layer tied to the box by anchor
+// positioning, the list, the options, the chips, the error row. Positioning only; the look is styles/form.css.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-picker-control]";
+const SELECT = `select${CONTROL}`;
+// How the list opens and closes: one transition here, the starting look in variables an effect sets (`pickerOpen` on
+// the root, `pickerSheet` on the popup itself, so on a phone the sheet's slide wins whatever their order). Without an
+// effect the time is 0 and the list just appears. A rule each for the Combobox's popup and the `<select>`'s own picker:
+// a browser that doesn't know `::picker()` drops a whole selector list that names it.
+const FROM = `        opacity: var(--sx-picker-from-opacity, 1);
+        scale: var(--sx-picker-from-scale, 1);
+        translate: var(--sx-picker-from-shift, 0 0);
+        clip-path: var(--sx-picker-from-clip, var(--sx-picker-clip, none));`;
+const OPENING = [
+    { at: "[data-sx-picker-popup]", pseudo: "", closed: ":not(:popover-open)", open: ":popover-open" },
+    { at: SELECT, pseudo: "::picker(select)", closed: ":not(:open)", open: ":open" },
+];
+// A TagsField (`data-sx-kind="tags"`) has no arrow to leave room for; a tag typed again is ringed for a moment.
+export const PICKER_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-picker]) {
+    --sx-form-dir: 1;
+    --sx-picker-px: 1rem;
+    --sx-picker-py: 0.75rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "label" "box" "description" "message";
+    align-content: start;
+    min-inline-size: 0;
+    position: relative;
+    isolation: isolate;
+  }
+  :where([data-sx-picker]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-picker][data-sx-inline]) {
+    --sx-picker-px: 0.125rem;
+    --sx-picker-py: 0rem;
+    display: inline-grid;
+    vertical-align: baseline;
+    grid-template-areas: "box";
+  }
+  :where([data-sx-picker][data-sx-inline] > [data-sx-picker-label]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-picker][data-sx-inline] select[data-sx-picker-control]) {
+    field-sizing: content;
+    inline-size: auto;
+  }
+  :where([data-sx-picker][data-sx-inline] > [data-sx-picker-message]) {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    inline-size: max-content;
+  }
+  :where([data-sx-picker-label]) {
+    grid-area: label;
+    justify-self: start;
+    margin-block-end: 0.375rem;
+  }
+  :where([data-sx-picker-box]) {
+    grid-area: box;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    min-inline-size: 0;
+  }
+  :where(${CONTROL}) {
+    flex: 1 1 6rem;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    border-radius: inherit;
+    padding-block: var(--sx-picker-py);
+    padding-inline: var(--sx-picker-px) calc(var(--sx-picker-px) + 1.5em);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1.5;
+    outline: none;
+    appearance: none;
+  }
+  :where(${SELECT}) {
+    inline-size: 100%;
+    cursor: pointer;
+  }
+  :where([data-sx-picker-box]:has([data-sx-chip])) {
+    padding-inline-start: 0.375rem;
+  }
+  :where([data-sx-picker-box]:has([data-sx-chip]) ${CONTROL}) {
+    padding-inline-start: 0.25rem;
+  }
+  :where([data-sx-picker]:has(${CONTROL}:focus-visible) > [data-sx-picker-box]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-picker-arrow]) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    display: grid;
+    place-items: center;
+    inline-size: calc(var(--sx-picker-px) * 2 + 0.5em);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  :where(span[data-sx-picker-arrow]) {
+    pointer-events: none;
+  }
+  :where([data-sx-picker-arrow] > svg, [data-sx-option-check] > svg, [data-sx-chip] svg) {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  @supports (appearance: base-select) {
+    :where(${SELECT}) {
+      appearance: base-select;
+    }
+    :where(${SELECT})::picker(select) {
+      appearance: base-select;
+    }
+    :where(${SELECT})::picker-icon {
+      display: none;
+    }
+    :where(${SELECT})::picker(select) {
+      clip-path: var(--sx-picker-clip, none);
+    }
+  }
+  :where([data-sx-picker-popup]) {
+    inset: auto;
+    box-sizing: border-box;
+    margin: 0.25rem 0;
+    padding: 0.25rem;
+    overflow: auto;
+    position-anchor: var(--sx-picker-anchor);
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    inline-size: anchor-size(width);
+    max-block-size: min(20rem, 50vh);
+  }
+  :where([data-sx-picker-popup]) {
+    clip-path: var(--sx-picker-clip, none);
+  }
+  :where([data-sx-picker-popup] > [data-sx-choice-layer]) {
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+  }
+  :where([data-sx-picker-list]) {
+    position: relative;
+    isolation: isolate;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  :where([data-sx-option], ${SELECT} option) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-block-size: 1.5rem;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+  }
+  :where([data-sx-option][aria-disabled="true"]) {
+    cursor: not-allowed;
+  }
+  :where([data-sx-option-text]) {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  :where([data-sx-option-check]) {
+    flex: none;
+  }
+  :where([data-sx-option-check] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-option][aria-selected="true"] [data-sx-option-check] path) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-option-note]) {
+    padding: 0.5rem 0.75rem;
+  }
+  :where([data-sx-chip]) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    max-inline-size: 100%;
+    min-block-size: 1.75rem;
+    box-sizing: border-box;
+    padding-inline: 0.625rem 0.125rem;
+    border-radius: 999px;
+    font-size: 0.875em;
+  }
+  :where([data-sx-chip] > button) {
+    display: grid;
+    place-items: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  :where([data-sx-chip] > button:focus-visible) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+  }
+  :where([data-sx-chip][data-sx-leaving]) {
+    pointer-events: none;
+  }
+  :where([data-sx-kind="tags"] ${CONTROL}) {
+    padding-inline-end: var(--sx-picker-px);
+  }
+  :where([data-sx-chip][data-sx-again]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 1px;
+  }
+  :where([data-sx-picker-description]) {
+    grid-area: description;
+    margin: 0.375rem 0 0;
+  }
+  :where([data-sx-picker-message]) {
+    grid-area: message;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-picker-message]:has(> [data-sx-picker-error]:not(:empty))) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-picker-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-picker-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-picker-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([data-sx-option][data-active]) {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+${OPENING.map((o) => `    :where(${o.at})${o.pseudo} {
+      transform-origin: 50% 0;
+      transition-property: opacity, scale, translate, clip-path, display, overlay;
+      transition-duration: var(--sx-picker-time, 0s);
+      transition-timing-function: var(--ease-sx-out, ease-out);
+      transition-behavior: allow-discrete;
+    }
+    :where(${o.at}${o.closed})${o.pseudo} {
+${FROM}
+    }
+    @starting-style {
+      :where(${o.at}${o.open})${o.pseudo} {
+${FROM}
+      }
+    }`).join("\n")}
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-picker] [data-sx-choice-layer]:not([data-sx-choice-keep])) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/range.d.ts

@@ -0,0 +1,3 @@
+/** How many gaps an auto tick row (`rangeTicks`) shows: every step up to 20, else the largest count up to 20 that lands on steps. */
+export declare function autoTicks(steps: number): number;
+export declare const RANGE_BASE_CSS: string;

package/dist/forms/range.js

@@ -0,0 +1,223 @@
+// The structural sheet of Range: the head (label, value), the drawn rail and thumbs, and the real range inputs on top at
+// opacity 0, their own thumbs the same size as the drawn ones so a press lands where it looks. One or two thumbs,
+// across or upright. Positioning only; the look is styles/form.css. The thumbs and the rail's layers glide to a new value
+// (a key, a click on the rail) and follow a drag at once; effects tune that through variables, never `transition`:
+// `--sx-range-glide`, `--sx-range-drag-glide` (ticks spring from step to step), `--sx-range-grow` (a thumb's scale).
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-range-control]";
+const THUMB = "[data-sx-range-thumb]";
+const TRACK = "[data-sx-range-track]";
+const UPRIGHT = "[data-sx-vertical]";
+const SPRING = "linear(0, 0.45 12%, 0.85 25%, 1.08 38%, 1.1 46%, 1.03 62%, 0.99 78%, 1)";
+/** The real thumbs, one rule per engine: a browser drops a whole selector list that names another engine's part. */
+const NATIVE = ["::-webkit-slider-thumb", "::-moz-range-thumb"];
+/** How many gaps an auto tick row (`rangeTicks`) shows: every step up to 20, else the largest count up to 20 that lands on steps. */
+export function autoTicks(steps) {
+    if (!Number.isFinite(steps) || steps <= 0)
+        return 1;
+    const whole = Math.round(steps);
+    if (whole <= 20)
+        return whole;
+    for (let n = 20; n >= 2; n--)
+        if (whole % n === 0)
+            return n;
+    return 10;
+}
+export const RANGE_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-range]) {
+    --sx-form-dir: 1;
+    --sx-range-thumb: 1.25rem;
+    --sx-range-h: 0.375rem;
+    --sx-range-length: 10rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "head" "box" "description" "message";
+    align-content: start;
+    min-inline-size: 0;
+    position: relative;
+    isolation: isolate;
+  }
+  :where([data-sx-range]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-range-head]) {
+    grid-area: head;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-block-end: 0.5rem;
+  }
+  :where([data-sx-range-output]) {
+    font-variant-numeric: tabular-nums;
+  }
+  :where([data-sx-range-box]) {
+    grid-area: box;
+    position: relative;
+    container-type: inline-size;
+    block-size: max(1.5rem, var(--sx-range-thumb));
+    min-inline-size: 0;
+    touch-action: pan-y;
+  }
+  :where(${TRACK}) {
+    position: absolute;
+    inset-inline: calc(var(--sx-range-thumb) / 2);
+    inset-block: 0;
+    margin-block: auto;
+    block-size: var(--sx-range-h);
+    border-radius: 999px;
+    pointer-events: none;
+  }
+  :where(${TRACK} > [data-sx-choice-layer]) {
+    position: absolute;
+    pointer-events: none;
+  }
+  :where(${THUMB}) {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block: 0;
+    margin-block: auto;
+    display: grid;
+    place-items: center;
+    inline-size: var(--sx-range-thumb);
+    block-size: var(--sx-range-thumb);
+    box-sizing: border-box;
+    border-radius: 50%;
+    pointer-events: none;
+    translate: calc((var(--sx-at) * (100cqi - var(--sx-range-thumb)) + var(--sx-range-pull, 0px)) * var(--sx-form-dir)) 0;
+  }
+  :where(${THUMB} > [data-sx-choice-layer]) {
+    position: absolute;
+    pointer-events: none;
+  }
+  :where([data-sx-range-says]) {
+    display: none;
+  }
+  :where(${CONTROL}) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  :where(${CONTROL}:disabled) {
+    cursor: not-allowed;
+  }
+${NATIVE.map((part) => `  :where(${CONTROL})${part} {
+    appearance: none;
+    inline-size: var(--sx-range-thumb);
+    block-size: var(--sx-range-thumb);
+    border: 0;
+    border-radius: 50%;
+  }`).join("\n")}
+  :where([data-sx-dual] ${CONTROL}) {
+    pointer-events: none;
+  }
+${NATIVE.map((part) => `  :where([data-sx-dual] ${CONTROL})${part} {
+    pointer-events: auto;
+  }`).join("\n")}
+  :where([data-sx-dual][data-sx-top="a"] ${CONTROL}[data-sx-thumb="a"]) {
+    z-index: 2;
+  }
+  :where([data-sx-range]:has(${CONTROL}[data-sx-thumb="a"]:focus-visible) ${THUMB}[data-sx-thumb="a"],
+    [data-sx-range]:has(${CONTROL}[data-sx-thumb="b"]:focus-visible) ${THUMB}[data-sx-thumb="b"]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+
+  :where(${UPRIGHT}) {
+    justify-items: start;
+  }
+  :where(${UPRIGHT} > [data-sx-range-box]) {
+    container-type: size;
+    inline-size: max(1.5rem, var(--sx-range-thumb));
+    block-size: var(--sx-range-length);
+    touch-action: pan-x;
+  }
+  :where(${UPRIGHT} ${TRACK}) {
+    inset-inline: 0;
+    inset-block: calc(var(--sx-range-thumb) / 2);
+    margin-inline: auto;
+    margin-block: 0;
+    inline-size: var(--sx-range-h);
+    block-size: auto;
+  }
+  :where(${UPRIGHT} ${THUMB}) {
+    inset-block: 0 auto;
+    inset-inline: 0;
+    margin: 0 auto;
+    translate: 0 calc((1 - var(--sx-at)) * (100cqb - var(--sx-range-thumb)) - var(--sx-range-pull, 0px));
+  }
+  :where(${UPRIGHT} ${CONTROL}) {
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+
+  :where([data-sx-range-description]) {
+    grid-area: description;
+    margin: 0.5rem 0 0;
+  }
+  :where([data-sx-range-message]) {
+    grid-area: message;
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-range-message]:has(> [data-sx-range-error]:not(:empty))) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-range-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-range-says-error]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-range-name]) {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(${THUMB}) {
+      transition-property: translate, scale;
+      transition-duration: var(--sx-range-glide, 0.12s), var(--sx-range-grow, 0.2s);
+      transition-timing-function: ${SPRING};
+    }
+    :where(${TRACK} > [data-sx-choice-layer]) {
+      transition-property: translate, scale, clip-path;
+      transition-duration: var(--sx-range-glide, 0.12s);
+      transition-timing-function: ${SPRING};
+    }
+    :where([data-sx-dragging] ${THUMB}) {
+      transition-duration: var(--sx-range-drag-glide, 0s), var(--sx-range-grow, 0.2s);
+    }
+    :where([data-sx-dragging] ${TRACK} > [data-sx-choice-layer]) {
+      transition-duration: var(--sx-range-drag-glide, 0s);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-range] [data-sx-choice-layer]:not([data-sx-choice-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where(${TRACK}) {
+      border: 1px solid CanvasText;
+    }
+    :where(${THUMB}) {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+    :where([data-sx-range]:has(${CONTROL}:disabled) ${THUMB}) {
+      background: GrayText;
+    }
+  }
+}`;

package/dist/forms/registry.d.ts

@@ -0,0 +1,4 @@
+import type { FormMeta } from "./types.js";
+export declare const FORM_EFFECTS: readonly FormMeta[];
+export declare const FORM_IDS: ReadonlySet<string>;
+export declare function formMetaOf(id: string): FormMeta;