@sharedex/ui 0.0.0-stage → 0.10.0

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

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;