@sharedex/ui 0.9.0 → 0.10.0

package/README.md

@@ -431,6 +431,36 @@ const title = [enterRise({ by: "chars" }), inkGradient()];   // module level, li
   guide lists them).
 - **Guide for Claude Code:** `node_modules/@sharedex/ui/guides/text.md`.
 
+## Forms
+
+Form controls whose **real native element does all the work** (the label, the keyboard, autofill, password managers,
+screen readers, a plain form submit), wearing any number of the **91 form effects** from the owner's Form Effects
+Atlas plus rows found online: `Field` (with built-in tools: clear, show password, Caps Lock, counter, strength, an async
+check, a hint, auto-grow, `inline`), `Checkbox`, `CheckGroup`, `RadioGroup`, `Switch`, `Select`, our own `Combobox`,
+`Range`, `NumberField`, `OtpField`, `TagsField`, `ChipGroup`, `FileDrop`, `FormSteps`, `FormReveal`, `FormSwap`,
+`InlineEdit`, `ErrorSummary`, `SaveStatus`, `PasswordRules` and `FormBuddy`, a sign-in companion of our own.
+
+```tsx
+import { Controller } from "react-hook-form";
+import { Field, Checkbox, Combobox, inputFloat, validColor, checkDraw, pickerOpen } from "@sharedex/ui";
+
+const fieldEffects = [inputFloat(), validColor()];   // module level, like every effect
+
+<Field label="Email" type="email" effect={fieldEffects} error={errors.email?.message} {...register("email")} />
+<Checkbox label="I agree" effect={checkDraw()} {...register("terms")} />
+<Controller name="topics" control={control} render={({ field }) => (
+  <Combobox label="Topics" multiple options={topics} effect={pickerOpen()} {...field} />
+)} />
+```
+
+- **Every prop and the `ref` go on the native control**, so React Hook Form's `register()` spreads straight onto it; a
+  list or files go through a `Controller`. The package imports no form library: React Hook Form + Zod is a documented
+  recipe. Errors need words: `error` sets `aria-invalid`, points `aria-describedby` at the message and announces it.
+- **Effects read the control's state through CSS** (`:focus-visible`, `:user-invalid`, `:checked`, `:autofill`), so
+  nearly all are plain data a Server Component can pass; three carry code (`checkConfetti`, `rangeElastic`,
+  `inputCycle`). They never scold while you type, keep their state under reduced motion and drop the movement.
+- **Guide for Claude Code:** `node_modules/@sharedex/ui/guides/forms.md`.
+
 ## Option schemas (`@sharedex/ui/schema`)
 
 Every configurable piece describes its options as data, for tools such as the sharedex Design System Builder:
@@ -462,7 +492,11 @@ validateOptions(schema, { strength: 3 }, schemaOf);        // ["strength: must b
 
 ## Status
 
-**0.9.0** adds `Text` and 69 text effects (every row of the Text Effects Atlas, plus 26 found online), `Typewriter`,
+**0.10.0** adds the form controls and 91 form effects (every row of the Form Effects Atlas, plus 62 found online):
+`Field` and its tools, `Checkbox`, `CheckGroup`, `RadioGroup`, `Switch`, `Select`, `Combobox`, `Range`, `NumberField`,
+`OtpField`, `TagsField`, `ChipGroup`, `FileDrop`, `FormSteps`, `FormReveal`, `FormSwap`, `InlineEdit`, `ErrorSummary`,
+`SaveStatus`, `PasswordRules`, `FormBuddy`, `focusFirstError`; the `danger` and `success` tokens; the `form` schema
+family. **0.9.0** added `Text` and 69 text effects (every row of the Text Effects Atlas, plus 26 found online), `Typewriter`,
 `WordCycle`, `NumberRoll`, `TextPath`, `Text3D` (in `@sharedex/ui/three`), the Ticker's `scrollBoost`, and on the
 sections `titleEffect` / `eyebrowEffect` (every `Root`), a cycling word in the Hero's title (`titleWords`,
 `titleCycle`) and rolling figures in About (`statRoll`); schema families `text`, `word-cycle`, `number-roll`.
@@ -492,7 +526,8 @@ category filtering, drag, autoplay; Hero, About, Services and Contact sections;
 backgrounds (all 94 rows of the Background Effects Atlas: 88 effects, 3 rows covered by the
 `image()` / `video()` slots, 3 docs recipes); transitions (all 51 rows of the Transition Effects
 Atlas); the gallery effects, `Ticker` and `Grid`; `Button` (75 of the 76 rows of the Button Effects Atlas, the
-last a docs recipe); `Text` (all 94 rows of the Text Effects Atlas: 69 effects and the text components).
+last a docs recipe); `Text` (all 94 rows of the Text Effects Atlas: 69 effects and the text components); the form
+controls (all 134 rows of the Form Effects Atlas: 91 effects and the controls).
 **Next:** built-in Controls / Filters / Pagination components, full a11y wiring for the carousel
 (region label, live region, roving tabindex), RTL for the carousel.
 

package/dist/backgrounds/hosts/CssHost.d.ts

@@ -1,10 +1,6 @@
 import type { CssEffect } from "../types.js";
-/**
- * `sx-bg-<id>-<hash of the css>`: React keeps one style per href, so the hash
- * lets an edited stylesheet (hot reload) or a second package version on the
- * same page get its own tag instead of silently reusing the first one.
- */
-export declare function styleHref(id: string, css: string): string;
+import { styleHref } from "./styleHref.js";
+export { styleHref };
 /**
  * Renders a CSS effect: one layer element, its generated nodes, and its
  * stylesheet. React 19 hoists `<style href precedence>` into <head> and keeps

package/dist/backgrounds/hosts/CssHost.js

@@ -1,24 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { styleHref } from "./styleHref.js";
 import { useLayerNeeds } from "./useLayerNeeds.js";
-const hrefs = new Map();
-/**
- * `sx-bg-<id>-<hash of the css>`: React keeps one style per href, so the hash
- * lets an edited stylesheet (hot reload) or a second package version on the
- * same page get its own tag instead of silently reusing the first one.
- */
-export function styleHref(id, css) {
-    let href = hrefs.get(css);
-    if (href === undefined) {
-        let h = 5381;
-        for (let i = 0; i < css.length; i++)
-            h = ((h << 5) + h + css.charCodeAt(i)) >>> 0;
-        href = `sx-bg-${id}-${h.toString(36)}`;
-        hrefs.set(css, href);
-    }
-    return href;
-}
+// kept here too, for the modules that import it from this one (all of them client modules)
+export { styleHref };
 /**
  * Renders a CSS effect: one layer element, its generated nodes, and its
  * stylesheet. React 19 hoists `<style href precedence>` into <head> and keeps

package/dist/backgrounds/hosts/styleHref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `sx-bg-<id>-<hash of the css>`: React keeps one style per href, so the hash
+ * lets an edited stylesheet (hot reload) or a second package version on the
+ * same page get its own tag instead of silently reusing the first one.
+ */
+export declare function styleHref(id: string, css: string): string;

package/dist/backgrounds/hosts/styleHref.js

@@ -0,0 +1,20 @@
+// A <style>'s href for React 19 to hoist and keep once per page. A plain module (no "use client"): a Server
+// Component that renders its own <style> (FormReveal, SaveStatus, PasswordRules) calls it on the server, where a client
+// module's export is only a reference.
+const hrefs = new Map();
+/**
+ * `sx-bg-<id>-<hash of the css>`: React keeps one style per href, so the hash
+ * lets an edited stylesheet (hot reload) or a second package version on the
+ * same page get its own tag instead of silently reusing the first one.
+ */
+export function styleHref(id, css) {
+    let href = hrefs.get(css);
+    if (href === undefined) {
+        let h = 5381;
+        for (let i = 0; i < css.length; i++)
+            h = ((h << 5) + h + css.charCodeAt(i)) >>> 0;
+        href = `sx-bg-${id}-${h.toString(36)}`;
+        hrefs.set(css, href);
+    }
+    return href;
+}

package/dist/buttons/pick.d.ts

@@ -1,5 +1,11 @@
-import type { ButtonEffect } from "./types.js";
+import type { ButtonEffect, ButtonTier } from "./types.js";
 /** What a device can carry, as the backgrounds and transitions guess it. */
 export type ButtonDevice = "low" | "mid" | "high";
-/** The first link in the fallback chain this device runs; the last link when none does (it is always `all`). */
-export declare function pickEffect(effect: ButtonEffect, device: ButtonDevice): ButtonEffect;
+/**
+ * The first link in the fallback chain this device runs; the last link when none does (it is always `all`). Any
+ * descriptor with a tier and a fallback works: the form controls pick their effects with it too.
+ */
+export declare function pickEffect<E extends {
+    readonly tier: ButtonTier;
+    readonly fallback?: E;
+} = ButtonEffect>(effect: E, device: ButtonDevice): E;

package/dist/buttons/pick.js

@@ -2,7 +2,10 @@
 // than backgrounds/runtime/tier.ts, so a plain button doesn't download the device check.
 const DEVICE = { low: 0, mid: 1, high: 2 };
 const NEEDS = { all: 0, mid: 1, high: 2 };
-/** The first link in the fallback chain this device runs; the last link when none does (it is always `all`). */
+/**
+ * The first link in the fallback chain this device runs; the last link when none does (it is always `all`). Any
+ * descriptor with a tier and a fallback works: the form controls pick their effects with it too.
+ */
 export function pickEffect(effect, device) {
     let link = effect;
     let last = effect;

package/dist/forms/base.d.ts

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

package/dist/forms/base.js

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

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