@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/buddy.d.ts

@@ -0,0 +1,6 @@
+export declare const BUDDY_CSS: string;
+/**
+ * What moves: eyes follow at once, the face a little behind, hands with a spring, and a blink now and then that rests,
+ * eyes open, when the page pauses its loops or the buddy is off screen. Dropped under reduced motion.
+ */
+export declare const BUDDY_MOTION: string;

package/dist/forms/buddy.js

@@ -0,0 +1,150 @@
+// FormBuddy's sheets: our own character, a round sprout that sits on a form's top edge. Its parts are SVG groups named
+// by `data-sx-buddy-part`; its state is on the root (`data-sx-buddy-state`: idle, look, cover, peek; `data-sx-mood`:
+// worried, happy) and where it looks is two numbers, `--sx-buddy-x` / `--sx-buddy-y` (-1 to 1). Pure strings.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const P = (part) => `[data-sx-buddy-part="${part}"]`;
+const IS = (state) => `[data-sx-buddy-state="${state}"]`;
+const MOOD = (mood) => `[data-sx-mood="${mood}"]`;
+const ROOT = "[data-sx-buddy]";
+// One face at a time: calm, worried (brows up, a wavy mouth) or happy (eyes closed in a smile, a grin). On a password the
+// hands rise from behind the form's edge (outside the drawing, clipped) to cover the eyes; one slides down to peek when
+// the password shows.
+export const BUDDY_CSS = `${LAYER_ORDER}
+@layer components {
+  :where(${ROOT}) {
+    --sx-buddy-x: 0;
+    --sx-buddy-y: 0;
+    --sx-buddy-body: var(--color-sx-primary);
+    --sx-buddy-leaf: var(--color-sx-accent, var(--color-sx-primary));
+    --sx-buddy-eye: white;
+    --sx-buddy-ink: color-mix(in oklab, var(--sx-buddy-body) 30%, black);
+    --sx-buddy-hand: color-mix(in oklab, var(--sx-buddy-body) 82%, var(--sx-buddy-ink));
+    --sx-buddy-cheek: color-mix(in oklab, var(--color-sx-accent, white) 55%, transparent);
+    display: block;
+    inline-size: var(--sx-buddy-size, 8rem);
+    max-inline-size: 100%;
+    margin-inline: auto;
+    pointer-events: none;
+    user-select: none;
+  }
+  :where(${ROOT} > svg) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    overflow: hidden;
+  }
+  :where(${ROOT} ${P("body")}) {
+    fill: var(--sx-buddy-body);
+  }
+  :where(${ROOT} ${P("leaf")}) {
+    fill: var(--sx-buddy-leaf);
+  }
+  :where(${ROOT} ${P("stem")}) {
+    fill: none;
+    stroke: var(--sx-buddy-leaf);
+    stroke-width: 3;
+    stroke-linecap: round;
+  }
+  :where(${ROOT} ${P("white")}) {
+    fill: var(--sx-buddy-eye);
+    stroke: var(--sx-buddy-ink);
+    stroke-width: 1.5;
+  }
+  :where(${ROOT} ${P("pupil")}) {
+    fill: var(--sx-buddy-ink);
+    translate: calc(var(--sx-buddy-x) * 5px) calc(var(--sx-buddy-y) * 5px);
+  }
+  :where(${ROOT} ${P("glint")}) {
+    fill: var(--sx-buddy-eye);
+  }
+  :where(${ROOT} ${P("cheek")}) {
+    fill: var(--sx-buddy-cheek);
+  }
+  :where(${ROOT} :is(${P("calm")}, ${P("wobble")}, ${P("brow")}, ${P("smile-eye")}, ${P("finger")})) {
+    fill: none;
+    stroke: var(--sx-buddy-ink);
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where(${ROOT} ${P("finger")}) {
+    stroke-width: 2.5;
+    opacity: 0.35;
+  }
+  :where(${ROOT} ${P("grin")}) {
+    fill: var(--sx-buddy-ink);
+  }
+  :where(${ROOT} ${P("hand")}) {
+    fill: var(--sx-buddy-hand);
+  }
+  :where(${ROOT} ${P("face")}) {
+    translate: calc(var(--sx-buddy-x) * 3px) calc(var(--sx-buddy-y) * 2px);
+  }
+  :where(${ROOT} ${P("eye")}) {
+    transform-box: fill-box;
+    transform-origin: 50% 50%;
+  }
+  :where(${ROOT} :is(${P("brow")}, ${P("smile-eye")}, ${P("grin")}, ${P("wobble")})) {
+    opacity: 0;
+  }
+  :where(${ROOT}${MOOD("worried")} :is(${P("brow")}, ${P("wobble")})) {
+    opacity: 1;
+  }
+  :where(${ROOT}${MOOD("worried")} ${P("calm")}) {
+    opacity: 0;
+  }
+  :where(${ROOT}${MOOD("happy")} :is(${P("smile-eye")}, ${P("grin")})) {
+    opacity: 1;
+  }
+  :where(${ROOT}${MOOD("happy")} :is(${P("eye")}, ${P("calm")})) {
+    opacity: 0;
+  }
+  :where(${ROOT}:is(${IS("cover")}, ${IS("peek")}) ${P("hand")}[data-sx-side="start"]) {
+    translate: 4px -66px;
+    rotate: 8deg;
+  }
+  :where(${ROOT}:is(${IS("cover")}, ${IS("peek")}) ${P("hand")}[data-sx-side="end"]) {
+    translate: -4px -66px;
+    rotate: -8deg;
+  }
+  :where(${ROOT}${IS("peek")} ${P("hand")}[data-sx-side="end"]) {
+    translate: 8px -34px;
+    rotate: -24deg;
+  }
+  :where(${ROOT} ${P("hand")}) {
+    transform-box: fill-box;
+    transform-origin: 50% 100%;
+  }
+}`;
+/**
+ * What moves: eyes follow at once, the face a little behind, hands with a spring, and a blink now and then that rests,
+ * eyes open, when the page pauses its loops or the buddy is off screen. Dropped under reduced motion.
+ */
+export const BUDDY_MOTION = `@layer components {
+  :where(${ROOT} ${P("pupil")}) {
+    transition: translate 120ms ease-out;
+  }
+  :where(${ROOT} ${P("face")}) {
+    transition: translate 260ms var(--ease-sx-out, ease-out);
+  }
+  :where(${ROOT} ${P("hand")}) {
+    transition: translate 420ms linear(0, 0.45 12%, 0.85 25%, 1.08 38%, 1.1 46%, 1.03 62%, 0.99 78%, 1), rotate 420ms ease-out;
+  }
+  :where(${ROOT} :is(${P("brow")}, ${P("smile-eye")}, ${P("grin")}, ${P("wobble")}, ${P("calm")}, ${P("eye")})) {
+    transition: opacity 160ms ease-out;
+  }
+  :where(${ROOT}:is(${IS("idle")}, ${IS("look")}) ${P("eye")}) {
+    animation: sx-form-buddy-blink 5.2s ease-in-out infinite;
+  }
+  :where(html[data-sx-loops-paused] ${ROOT} ${P("eye")}, ${ROOT}[data-sx-buddy-off] ${P("eye")}) {
+    animation: none;
+  }
+  @keyframes sx-form-buddy-blink {
+    0%, 93%, 100% {
+      scale: 1 1;
+    }
+    96% {
+      scale: 1 0.1;
+    }
+  }
+}`;

package/dist/forms/chips.d.ts

@@ -0,0 +1 @@
+export declare const CHIPS_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-chips]) {\n    --sx-form-dir: 1;\n    --sx-chips-gap: 0.5rem;\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  :where([data-sx-chips]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-chips-legend]) {\n    padding: 0;\n    margin-block-end: 0.5rem;\n  }\n  :where([data-sx-chips-description]) {\n    margin: 0 0 0.5rem;\n  }\n  :where([data-sx-chips-options]) {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sx-chips-gap);\n  }\n  :where([data-sx-chip-option]) {\n    position: relative;\n    isolation: isolate;\n    display: inline-grid;\n    grid-template-columns: minmax(0, 0fr) auto;\n    align-items: center;\n    min-block-size: 2rem;\n    box-sizing: border-box;\n    padding-inline: 0.75rem;\n    border-radius: 999px;\n    line-height: 1.25;\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  :where([data-sx-chip-option]:has([data-sx-chip-control]:checked)) {\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n  :where([data-sx-chip-check]) {\n    display: flex;\n    align-items: center;\n    min-inline-size: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-chip-check] > svg) {\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    margin-inline-end: 0.375rem;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-chip-check] path) {\n    stroke-dasharray: 1 2;\n    stroke-dashoffset: 1.01;\n  }\n  :where([data-sx-chip-option]:has([data-sx-chip-control]:checked) [data-sx-chip-check] path) {\n    stroke-dashoffset: 0;\n  }\n  :where([data-sx-chip-control]) {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    inline-size: 100%;\n    block-size: 100%;\n    margin: 0;\n    border-radius: inherit;\n    opacity: 0;\n    cursor: inherit;\n    appearance: none;\n  }\n  :where([data-sx-chip-option]:has([data-sx-chip-control]:focus-visible)) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-chip-option]:has([data-sx-chip-control]:disabled)) {\n    opacity: 0.55;\n    cursor: not-allowed;\n  }\n  :where([data-sx-chips] [data-sx-chip-layer]) {\n    position: absolute;\n    z-index: -1;\n    pointer-events: none;\n  }\n  :where([data-sx-chips-message]) {\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-chips-message]:has([data-sx-chips-says])) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-chips-error]) {\n    min-block-size: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-chips-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :where([data-sx-chips] [data-sx-chip-layer]:not([data-sx-chip-keep])) {\n      display: none;\n    }\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-chip-option]) {\n      grid-template-columns: auto auto;\n      column-gap: 0.375rem;\n      border: 1px solid ButtonText;\n    }\n    :where([data-sx-chip-control]) {\n      position: static;\n      grid-area: 1 / 1;\n      inline-size: 1em;\n      block-size: 1em;\n      opacity: 1;\n      appearance: auto;\n    }\n    :where([data-sx-chip-check], [data-sx-chips] [data-sx-chip-layer]) {\n      display: none;\n    }\n  }\n}";

package/dist/forms/chips.js

@@ -0,0 +1,140 @@
+// The structural sheet of ChipGroup: a `<fieldset>` of filter chips, each a label round its real checkbox (or radio),
+// which lies over the whole chip at opacity 0 and takes the click, the keys and the focus. A chip that is on opens a
+// column for its check before the words. Positioning only; the look is styles/form.css. Pure string. See ./CLAUDE.md.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-chip-control]";
+const ON = `:has(${CONTROL}:checked)`;
+// High contrast: the real checkbox comes back at the chip's start; the drawn check and the layers step aside.
+export const CHIPS_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-chips]) {
+    --sx-form-dir: 1;
+    --sx-chips-gap: 0.5rem;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  :where([data-sx-chips]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-chips-legend]) {
+    padding: 0;
+    margin-block-end: 0.5rem;
+  }
+  :where([data-sx-chips-description]) {
+    margin: 0 0 0.5rem;
+  }
+  :where([data-sx-chips-options]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sx-chips-gap);
+  }
+  :where([data-sx-chip-option]) {
+    position: relative;
+    isolation: isolate;
+    display: inline-grid;
+    grid-template-columns: minmax(0, 0fr) auto;
+    align-items: center;
+    min-block-size: 2rem;
+    box-sizing: border-box;
+    padding-inline: 0.75rem;
+    border-radius: 999px;
+    line-height: 1.25;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  :where([data-sx-chip-option]${ON}) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  :where([data-sx-chip-check]) {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-chip-check] > svg) {
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-end: 0.375rem;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-chip-check] path) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  :where([data-sx-chip-option]${ON} [data-sx-chip-check] path) {
+    stroke-dashoffset: 0;
+  }
+  :where(${CONTROL}) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    border-radius: inherit;
+    opacity: 0;
+    cursor: inherit;
+    appearance: none;
+  }
+  :where([data-sx-chip-option]:has(${CONTROL}:focus-visible)) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-chip-option]:has(${CONTROL}:disabled)) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+  :where([data-sx-chips] [data-sx-chip-layer]) {
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+  }
+  :where([data-sx-chips-message]) {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-chips-message]:has([data-sx-chips-says])) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-chips-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-chips-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-sx-chips] [data-sx-chip-layer]:not([data-sx-chip-keep])) {
+      display: none;
+    }
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-chip-option]) {
+      grid-template-columns: auto auto;
+      column-gap: 0.375rem;
+      border: 1px solid ButtonText;
+    }
+    :where(${CONTROL}) {
+      position: static;
+      grid-area: 1 / 1;
+      inline-size: 1em;
+      block-size: 1em;
+      opacity: 1;
+      appearance: auto;
+    }
+    :where([data-sx-chip-check], [data-sx-chips] [data-sx-chip-layer]) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/choice.d.ts

@@ -0,0 +1 @@
+export declare const CHOICE_BASE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-choice], [data-sx-group]) {\n    --sx-form-dir: 1;\n  }\n  :where([data-sx-choice]:dir(rtl), [data-sx-group]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-choice]) {\n    --sx-choice-size: 1.25em;\n    --sx-choice-gap: 0.625rem;\n    position: relative;\n    min-inline-size: 0;\n  }\n  :where([data-sx-choice-row]) {\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    grid-template-columns: var(--sx-choice-size) minmax(0, 1fr);\n    column-gap: var(--sx-choice-gap);\n    align-items: start;\n    min-block-size: 1.5rem;\n    line-height: 1.5;\n    cursor: pointer;\n  }\n  :where([data-sx-choice-row] > :is([data-sx-choice-box], [data-sx-choice-control])) {\n    grid-area: 1 / 1;\n  }\n  :where([data-sx-choice-box], [data-sx-choice-control]) {\n    inline-size: var(--sx-choice-size);\n    block-size: var(--sx-choice-size);\n    margin: calc((1.5em - var(--sx-choice-size)) / 2) 0 0;\n    box-sizing: border-box;\n  }\n  :where([data-sx-choice-box]) {\n    position: relative;\n    display: grid;\n    place-items: center;\n    pointer-events: none;\n  }\n  :where([data-sx-choice-control]) {\n    position: relative;\n    z-index: 1;\n    padding: 0;\n    opacity: 0;\n    cursor: inherit;\n    accent-color: var(--color-sx-primary, auto);\n  }\n  :where([data-sx-choice-text]) {\n    grid-area: 1 / 2;\n    position: relative;\n    min-inline-size: 0;\n  }\n  :where([data-sx-choice-description]) {\n    grid-area: 2 / 2;\n    margin: 0;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:focus-visible) [data-sx-choice-box]) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-choice-mark]) {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 3;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-mark]) {\n    stroke-dasharray: 1 2;\n    stroke-dashoffset: 1.01;\n    transform-box: fill-box;\n    transform-origin: center;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:checked):not(:is(:has([data-sx-choice-control]:indeterminate), [data-sx-mixed])) [data-sx-mark=\"tick\"], [data-sx-choice]:is(:has([data-sx-choice-control]:indeterminate), [data-sx-mixed]) [data-sx-mark=\"dash\"]) {\n    stroke-dashoffset: 0;\n  }\n  :where([data-sx-mark=\"dot\"]) {\n    inline-size: 50%;\n    block-size: 50%;\n    border-radius: 50%;\n    background: currentColor;\n    scale: 0;\n  }\n  :where([data-sx-choice]:has([data-sx-choice-control]:checked) [data-sx-mark=\"dot\"]) {\n    scale: 1;\n  }\n  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :where([data-sx-choice-row] > [data-sx-choice-slot=\"halo\"]) {\n    inset: auto;\n    inset-block-start: calc((1.5em - var(--sx-choice-size)) / 2 - var(--sx-choice-size) / 2);\n    inset-inline-start: calc(var(--sx-choice-size) / -2);\n    z-index: -1;\n    inline-size: calc(var(--sx-choice-size) * 2);\n    block-size: calc(var(--sx-choice-size) * 2);\n    border-radius: 50%;\n  }\n  :where([data-sx-choice-row] > [data-sx-choice-slot=\"row\"]) {\n    z-index: -1;\n  }\n  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-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([data-sx-choice-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-choice-message]) {\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-choice] > [data-sx-choice-message]) {\n    padding-inline-start: calc(var(--sx-choice-size) + var(--sx-choice-gap));\n  }\n  :where([data-sx-choice-message]:has(> [data-sx-choice-error]:not(:empty))) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-choice-error]) {\n    min-block-size: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-choice-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  :where([data-sx-native] [data-sx-choice-box]) {\n    display: none;\n  }\n  :where([data-sx-native] [data-sx-choice-control]) {\n    opacity: 1;\n  }\n  :where([data-sx-group]) {\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  :where([data-sx-group-legend]) {\n    padding: 0;\n    margin-block-end: 0.5rem;\n  }\n  :where([data-sx-group-description]) {\n    margin: -0.25rem 0 0.5rem;\n  }\n  :where([data-sx-group-options]) {\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  :where([data-sx-orientation=\"horizontal\"] > [data-sx-group-options]) {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem 1.25rem;\n  }\n  :where([data-sx-group-options] > [data-sx-choice-layer]) {\n    z-index: -1;\n  }\n  :where([data-sx-group-count]) {\n    margin: 0.5rem 0 0;\n  }\n  :where([data-sx-group] > [data-sx-choice-message]) {\n    padding-inline-start: 0;\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-choice-box], :is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {\n      display: none;\n    }\n    :where([data-sx-choice-control]) {\n      opacity: 1;\n    }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]:not([data-sx-choice-keep])) {\n      display: none;\n    }\n  }\n}";

package/dist/forms/choice.js

@@ -0,0 +1,208 @@
+// The structural sheet of checkboxes and radios, and of the groups that hold them: the drawn box with the real input
+// on top of it at opacity 0, the mark, the option's words and help, the layers' slots, the error row, the group's
+// frame. Positioning only, no colours of its own (the look is styles/form.css). Pure string. See ./CLAUDE.md.
+// Its layer rules key on a choice's own root: a Range and the pickers render the same layer spans, and a checkbox on the
+// same page must not pin, round or hide theirs.
+import { LAYER_ORDER } from "../backgrounds/runtime/rootCss.js";
+const CONTROL = "[data-sx-choice-control]";
+const ON = `:has(${CONTROL}:checked)`;
+const MIXED = `:is(:has(${CONTROL}:indeterminate), [data-sx-mixed])`;
+export const CHOICE_BASE_CSS = `${LAYER_ORDER}
+@layer components {
+  :where([data-sx-choice], [data-sx-group]) {
+    --sx-form-dir: 1;
+  }
+  :where([data-sx-choice]:dir(rtl), [data-sx-group]:dir(rtl)) {
+    --sx-form-dir: -1;
+  }
+  :where([data-sx-choice]) {
+    --sx-choice-size: 1.25em;
+    --sx-choice-gap: 0.625rem;
+    position: relative;
+    min-inline-size: 0;
+  }
+  :where([data-sx-choice-row]) {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    grid-template-columns: var(--sx-choice-size) minmax(0, 1fr);
+    column-gap: var(--sx-choice-gap);
+    align-items: start;
+    min-block-size: 1.5rem;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+  :where([data-sx-choice-row] > :is([data-sx-choice-box], ${CONTROL})) {
+    grid-area: 1 / 1;
+  }
+  :where([data-sx-choice-box], ${CONTROL}) {
+    inline-size: var(--sx-choice-size);
+    block-size: var(--sx-choice-size);
+    margin: calc((1.5em - var(--sx-choice-size)) / 2) 0 0;
+    box-sizing: border-box;
+  }
+  :where([data-sx-choice-box]) {
+    position: relative;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+  :where(${CONTROL}) {
+    position: relative;
+    z-index: 1;
+    padding: 0;
+    opacity: 0;
+    cursor: inherit;
+    accent-color: var(--color-sx-primary, auto);
+  }
+  :where([data-sx-choice-text]) {
+    grid-area: 1 / 2;
+    position: relative;
+    min-inline-size: 0;
+  }
+  :where([data-sx-choice-description]) {
+    grid-area: 2 / 2;
+    margin: 0;
+  }
+  :where([data-sx-choice]${`:has(${CONTROL}:focus-visible)`} [data-sx-choice-box]) {
+    outline: 2px solid var(--color-sx-primary, currentColor);
+    outline-offset: 2px;
+  }
+  :where([data-sx-choice-mark]) {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  :where([data-sx-mark]) {
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  :where([data-sx-choice]${ON}:not(${MIXED}) [data-sx-mark="tick"], [data-sx-choice]${MIXED} [data-sx-mark="dash"]) {
+    stroke-dashoffset: 0;
+  }
+  :where([data-sx-mark="dot"]) {
+    inline-size: 50%;
+    block-size: 50%;
+    border-radius: 50%;
+    background: currentColor;
+    scale: 0;
+  }
+  :where([data-sx-choice]${ON} [data-sx-mark="dot"]) {
+    scale: 1;
+  }
+  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  :where([data-sx-choice-row] > [data-sx-choice-slot="halo"]) {
+    inset: auto;
+    inset-block-start: calc((1.5em - var(--sx-choice-size)) / 2 - var(--sx-choice-size) / 2);
+    inset-inline-start: calc(var(--sx-choice-size) / -2);
+    z-index: -1;
+    inline-size: calc(var(--sx-choice-size) * 2);
+    block-size: calc(var(--sx-choice-size) * 2);
+    border-radius: 50%;
+  }
+  :where([data-sx-choice-row] > [data-sx-choice-slot="row"]) {
+    z-index: -1;
+  }
+  :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer] > svg) {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+  :where([data-sx-choice-sr]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-sx-choice-message]) {
+    display: grid;
+    grid-template-rows: 0fr;
+  }
+  :where([data-sx-choice] > [data-sx-choice-message]) {
+    padding-inline-start: calc(var(--sx-choice-size) + var(--sx-choice-gap));
+  }
+  :where([data-sx-choice-message]:has(> [data-sx-choice-error]:not(:empty))) {
+    grid-template-rows: 1fr;
+  }
+  :where([data-sx-choice-error]) {
+    min-block-size: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  :where([data-sx-choice-says]) {
+    display: block;
+    padding-block-start: 0.375rem;
+  }
+  :where([data-sx-native] [data-sx-choice-box]) {
+    display: none;
+  }
+  :where([data-sx-native] ${CONTROL}) {
+    opacity: 1;
+  }
+  :where([data-sx-group]) {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  :where([data-sx-group-legend]) {
+    padding: 0;
+    margin-block-end: 0.5rem;
+  }
+  :where([data-sx-group-description]) {
+    margin: -0.25rem 0 0.5rem;
+  }
+  :where([data-sx-group-options]) {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  :where([data-sx-orientation="horizontal"] > [data-sx-group-options]) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.25rem;
+  }
+  :where([data-sx-group-options] > [data-sx-choice-layer]) {
+    z-index: -1;
+  }
+  :where([data-sx-group-count]) {
+    margin: 0.5rem 0 0;
+  }
+  :where([data-sx-group] > [data-sx-choice-message]) {
+    padding-inline-start: 0;
+  }
+  @media (forced-colors: active) {
+    :where([data-sx-choice-box], :is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]) {
+      display: none;
+    }
+    :where(${CONTROL}) {
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(:is([data-sx-choice], [data-sx-group]) [data-sx-choice-layer]:not([data-sx-choice-keep])) {
+      display: none;
+    }
+  }
+}`;

package/dist/forms/controls/CheckGroup.d.ts

@@ -0,0 +1,65 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from "react";
+import type { FormEffect } from "../types.js";
+/** One checkbox of a group. */
+export interface CheckOption {
+    readonly value: string;
+    readonly label: ReactNode;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+}
+interface CheckGroupOwnProps {
+    /** The group's question: a real `<legend>`. */
+    readonly label?: ReactNode;
+    /** Help under the question, read with the group. */
+    readonly description?: ReactNode;
+    /** The error message. While set, every checkbox is `aria-invalid` and the group points at the message. */
+    readonly error?: ReactNode;
+    readonly invalid?: boolean;
+    readonly options: readonly CheckOption[];
+    /** The values that are on, when you hold them (with `onValueChange`). */
+    readonly value?: readonly string[];
+    /** The values on at first, when the browser holds them. */
+    readonly defaultValue?: readonly string[];
+    /** Called with the values that are on after each change. */
+    readonly onValueChange?: (values: string[]) => void;
+    /** A "select all" box above the options: on when all are, mixed when some are. Not submitted. */
+    readonly all?: boolean;
+    /** "3 selected" under the options, read out as it changes. */
+    readonly count?: boolean;
+    /** Shift-click a second checkbox to set every one between the two the same way. */
+    readonly shiftRange?: boolean;
+    /** Default `"vertical"`. */
+    readonly orientation?: "vertical" | "horizontal";
+    /** One effect or a list, worn by every checkbox. */
+    readonly effect?: FormEffect | readonly FormEffect[];
+    readonly native?: boolean;
+    readonly unstyled?: boolean;
+    /** The words, for your language. `{n}` is the number on. */
+    readonly labels?: {
+        readonly all?: string;
+        readonly count?: string;
+    };
+    /** Goes on the options' box. */
+    readonly className?: string;
+    /** Goes on the `<fieldset>`. */
+    readonly rootClassName?: string;
+    /** Goes on the `<legend>`. */
+    readonly labelClassName?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Every other prop goes on each checkbox, `ref` included: `name`, `onChange`, `onBlur`, `required`, `disabled`, so
+ * `{...register("toppings")}` spreads onto all of them (React Hook Form collects them as a list).
+ */
+export type CheckGroupProps = CheckGroupOwnProps & Omit<ComponentPropsWithRef<"input">, keyof CheckGroupOwnProps | "type" | "checked" | "defaultChecked">;
+/**
+ * A group of checkboxes in a real `<fieldset>`. With `all`, a "select all" box leads them: on when every one is, mixed
+ * when some are, and a click sets them all. With `count`, "3 selected" follows them. With `shiftRange`, a shift-click
+ * sets a whole run at once. Each checkbox stays a real one with its name, so a plain form submit carries the values.
+ *
+ * ```tsx
+ * <CheckGroup label="Toppings" options={toppings} all count effect={checkDraw()} {...register("toppings")} />
+ * ```
+ */
+export declare function CheckGroup(props: CheckGroupProps): import("react").JSX.Element;
+export {};