@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/effects/range/rangeTicks.schema.d.ts

@@ -0,0 +1 @@
+export declare const RANGE_TICKS_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/range/rangeTicks.schema.js

@@ -0,0 +1,18 @@
+import { defineSchema } from "../../../schema/define.js";
+export const RANGE_TICKS_SCHEMA = defineSchema()({
+    id: "rangeTicks",
+    family: "form",
+    factory: "rangeTicks",
+    fields: {
+        count: {
+            kind: "number",
+            label: "Gaps",
+            min: 1,
+            max: 40,
+            step: 1,
+            autoNote: "Every step up to 20 steps, else the most up to 20 that land on steps.",
+            autoValue: 10,
+        },
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-muted)" },
+    },
+});

package/dist/forms/effects/ring.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Drops the field's focus outline (`focusRing="always"` keeps it), except under reduced motion, where the effect's layers
+ * step aside, and under forced colours.
+ */
+export declare const ringOff: (id: string) => string;

package/dist/forms/effects/ring.js

@@ -0,0 +1,12 @@
+// The rule an effect that marks the focus carries, so the field's own outline steps aside for it. Imported only by those
+// effects, so a page without one downloads none of it.
+import { at, fieldOf } from "./kit.js";
+/**
+ * Drops the field's focus outline (`focusRing="always"` keeps it), except under reduced motion, where the effect's layers
+ * step aside, and under forced colours.
+ */
+export const ringOff = (id) => `  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
+    ${at(`${fieldOf(id)}:not([data-sx-ring="always"])`)} {
+      --sx-field-ring-style: none;
+    }
+  }`;

package/dist/forms/effects/step/stepProgress.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface StepProgressOptions {
+    /** The progress's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds the rail takes to fill to the next step. Default `0.4`. */
+    readonly duration?: number;
+}
+/** The progress rail fills smoothly, finished steps' checks draw themselves, the new current step pops. */
+export declare function stepProgress(options?: StepProgressOptions): FormEffect;

package/dist/forms/effects/step/stepProgress.js

@@ -0,0 +1,35 @@
+import { EASE, SPRING, STEP_MARK, at, defineForm, stepsOf, v, varName } from "../kit.js";
+const ID = "stepProgress";
+const ROOT = stepsOf(ID);
+const DOT = "[data-sx-step-dot]";
+// The progress (FormSteps.Progress) shows where you are as a state: marks, a rail filled to the current one, a check on
+// each step done. This makes the rail fill smoothly, a finished step's number give way to a check that draws itself,
+// and the new current mark pop, once the user has moved.
+const STATE = `  ${at(ROOT)} {
+    --sx-steps-color: ${v(ID, "color")};
+  }`;
+const CSS = `  ${at(`${ROOT} [data-sx-steps-fill]`)} {
+    transition: scale ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${DOT} path`)} {
+    transition: stroke-dashoffset 0.3s ${EASE} calc(${v(ID, "time")} * 0.6);
+  }
+  ${at(`${ROOT} [data-sx-step-number]`)} {
+    transition: opacity 0.15s ${EASE} calc(${v(ID, "time")} * 0.5);
+  }
+  ${at(`${ROOT}[data-sx-moved] ${STEP_MARK}[aria-current="step"] ${DOT}`)} {
+    animation: sx-form-stepProgress-pop 0.4s ${SPRING} calc(${v(ID, "time")} * 0.6) both;
+  }
+  @keyframes sx-form-stepProgress-pop {
+    from {
+      scale: 0.8;
+    }
+  }`;
+/** The progress rail fills smoothly, finished steps' checks draw themselves, the new current step pops. */
+export function stepProgress(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["steps"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.4}s` },
+    });
+}

package/dist/forms/effects/step/stepProgress.schema.d.ts

@@ -0,0 +1 @@
+export declare const STEP_PROGRESS_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/step/stepProgress.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STEP_PROGRESS_SCHEMA = defineSchema()({
+    id: "stepProgress",
+    family: "form",
+    factory: "stepProgress",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.15, max: 0.8, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/forms/effects/step/stepSlide.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface StepSlideOptions {
+    /** How far a step slides, in rem. Default `3`. */
+    readonly distance?: number;
+    /** Seconds it takes. Default `0.35`. */
+    readonly duration?: number;
+}
+/** Steps slide in from the end and out toward the start (back the other way), or rise and fall one question at a time. */
+export declare function stepSlide(options?: StepSlideOptions): FormEffect;

package/dist/forms/effects/step/stepSlide.js

@@ -0,0 +1,50 @@
+import { DIR, EASE, STEP, at, defineForm, stepsOf, v, varName } from "../kit.js";
+const ID = "stepSlide";
+const ROOT = stepsOf(ID);
+const WAY = "var(--sx-steps-way)";
+// Next: the step leaves toward the start and the new one comes in from the end; Back: the other way round. Forward
+// always feels forward, in either reading direction (--sx-form-dir). In the one-question mode the steps rise and fall
+// instead. Only once the user has moved (data-sx-moved): nothing plays on load.
+const CSS = `  ${at(`${ROOT}[data-sx-moved] ${STEP}[data-sx-active]`)} {
+    animation: sx-form-stepSlide-in ${v(ID, "time")} ${EASE} both;
+  }
+  ${at(`${ROOT} ${STEP}[data-sx-leaving]`)} {
+    animation: sx-form-stepSlide-out ${v(ID, "time")} ${EASE} both;
+  }
+  ${at(`${ROOT}[data-sx-mode="focus"][data-sx-moved] ${STEP}[data-sx-active]`)} {
+    animation-name: sx-form-stepSlide-rise;
+  }
+  ${at(`${ROOT}[data-sx-mode="focus"] ${STEP}[data-sx-leaving]`)} {
+    animation-name: sx-form-stepSlide-sink;
+  }
+  @keyframes sx-form-stepSlide-in {
+    from {
+      translate: calc(${v(ID, "distance")} * ${DIR} * ${WAY}) 0;
+      opacity: 0;
+    }
+  }
+  @keyframes sx-form-stepSlide-out {
+    to {
+      translate: calc(${v(ID, "distance")} * ${DIR} * ${WAY} * -1) 0;
+      opacity: 0;
+    }
+  }
+  @keyframes sx-form-stepSlide-rise {
+    from {
+      translate: 0 calc(${v(ID, "distance")} * ${WAY});
+      opacity: 0;
+    }
+  }
+  @keyframes sx-form-stepSlide-sink {
+    to {
+      translate: 0 calc(${v(ID, "distance")} * ${WAY} * -1);
+      opacity: 0;
+    }
+  }`;
+/** Steps slide in from the end and out toward the start (back the other way), or rise and fall one question at a time. */
+export function stepSlide(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["steps"],
+        vars: { [varName(ID, "distance")]: `${options.distance ?? 3}rem`, [varName(ID, "time")]: `${options.duration ?? 0.35}s` },
+    });
+}

package/dist/forms/effects/step/stepSlide.schema.d.ts

@@ -0,0 +1 @@
+export declare const STEP_SLIDE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/step/stepSlide.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STEP_SLIDE_SCHEMA = defineSchema()({
+    id: "stepSlide",
+    family: "form",
+    factory: "stepSlide",
+    fields: {
+        distance: { kind: "number", label: "Distance", min: 1, max: 8, step: 0.5, unit: "rem", default: 3 },
+        duration: { kind: "number", label: "Duration", min: 0.15, max: 0.8, step: 0.05, unit: "s", default: 0.35 },
+    },
+});

package/dist/forms/effects/switch/switchBulb.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchBulbOptions {
+    /** The light's colour. Default a warm yellow. */
+    readonly light?: string;
+    /** Seconds it takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** The thumb is a bulb: on, it lights up and a warm glow spreads over the track, catching with a stutter. */
+export declare function switchBulb(options?: SwitchBulbOptions): FormEffect;

package/dist/forms/effects/switch/switchBulb.js

@@ -0,0 +1,70 @@
+import { CHANGED, CHECKED, at, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchBulb";
+const ROOT = switchOf(ID);
+const BULB = `${choiceLayer(ID, "bulb")} [data-sx-choice-svg]`;
+const GLASS = `${choiceLayer(ID, "bulb")} [data-sx-choice-svg="glass"]`;
+const GLOW = choiceLayer(ID, "glow");
+// A lamp: the thumb carries a bulb drawn in lines. On, the glass fills with light and a warm glow spreads over the
+// track around it (a radial gradient that fades in: no blur filter). Switched on by hand, the light stutters once,
+// like a real bulb catching. Lit or not is the state.
+const STATE = `  ${at(BULB)} {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  ${at(`${choiceLayer(ID, "bulb")}`)} {
+    inset: 14%;
+  }
+  ${at(inItem(ROOT, CHECKED, GLASS))} {
+    fill: ${v(ID, "light")};
+  }
+  ${at(GLOW)} {
+    inset-inline: auto 0;
+    inline-size: calc(var(--sx-switch-h) * 1.6);
+    border-radius: 999px;
+    background: radial-gradient(closest-side, ${v(ID, "light")}, transparent);
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, GLOW))} {
+    opacity: 0.75;
+  }`;
+const CSS = `  ${at(GLOW)} {
+    transition: opacity ${v(ID, "time")} ease-out;
+  }
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, GLOW))} {
+    animation: sx-form-switchBulb calc(${v(ID, "time")} * 2) linear;
+  }
+  @keyframes sx-form-switchBulb {
+    0% { opacity: 0; }
+    20% { opacity: 0.75; }
+    30% { opacity: 0.2; }
+    45% { opacity: 0.75; }
+    55% { opacity: 0.45; }
+    100% { opacity: 0.75; }
+  }`;
+/** The thumb is a bulb: on, it lights up and a warm glow spreads over the track, catching with a stutter. */
+export function switchBulb(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "light")]: options.light ?? "#ffd25c", [varName(ID, "time")]: `${options.duration ?? 0.3}s` },
+        layers: [
+            { slot: "box", part: "glow", keep: true },
+            {
+                slot: "thumb",
+                part: "bulb",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "path", part: "glass", attrs: { d: "M9 17.5v-1.6c0-1.4-.8-2.4-1.7-3.5A6 6 0 1 1 18 8.4c0 1.6-.7 2.9-1.3 4-.9 1.1-1.7 2.1-1.7 3.5v1.6Z" } },
+                        { tag: "path", part: "base", attrs: { d: "M9.5 20.5h5" } },
+                    ],
+                },
+            },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/switch/switchBulb.schema.d.ts

@@ -0,0 +1 @@
+export declare const SWITCH_BULB_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/switch/switchBulb.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_BULB_SCHEMA = defineSchema()({
+    id: "switchBulb",
+    family: "form",
+    factory: "switchBulb",
+    fields: {
+        light: { kind: "color", label: "Light", default: "#ffd25c" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/switch/switchDayNight.d.ts

@@ -0,0 +1,15 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchDayNightOptions {
+    /** The sky by day (off). Default a pale sky blue. */
+    readonly day?: string;
+    /** The sky by night (on). Default a deep blue. */
+    readonly night?: string;
+    /** The sun. Default a warm yellow. */
+    readonly sun?: string;
+    /** The moon. Default a pale cream. */
+    readonly moon?: string;
+    /** Seconds it takes. Default `0.45`. */
+    readonly duration?: number;
+}
+/** A day-to-night toggle: the sun turns into a moon, clouds drift off and stars come out. */
+export declare function switchDayNight(options?: SwitchDayNightOptions): FormEffect;

package/dist/forms/effects/switch/switchDayNight.js

@@ -0,0 +1,96 @@
+import { CHECKED, THUMB, at, choiceChild, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchDayNight";
+const ROOT = switchOf(ID);
+const SKY = choiceLayer(ID, "sky");
+const STAR = `${SKY} > [data-sx-choice-part^="star"]`;
+const CLOUD = `${SKY} > [data-sx-choice-part^="cloud"]`;
+const SHADE = choiceLayer(ID, "shade");
+const SPOTS = {
+    // the stars sit on the start half, which the thumb leaves when on
+    star1: ["24%", "14%", "0.12em"],
+    star2: ["60%", "28%", "0.08em"],
+    star3: ["30%", "40%", "0.1em"],
+    cloud1: ["8%", "55%", "0.7em"],
+    cloud2: ["30%", "35%", "0.5em"],
+};
+// For a dark-mode toggle: off is day (a sun on a blue sky with clouds at the free end), on is night (the sun has become
+// a moon by a shadow sliding over it, stars come out where the clouds were). The colours are options, so a theme can
+// bring its own. Which sky shows is the state; the drift and the fades are motion.
+const STATE = `  ${at(ROOT)} {
+    --sx-choice-edge: transparent;
+    --sx-choice-bg: ${v(ID, "day")};
+    --sx-choice-fill: ${v(ID, "night")};
+    --sx-switch-thumb: ${v(ID, "sun")};
+    --sx-switch-thumb-on: ${v(ID, "moon")};
+  }
+  ${at(`${ROOT} ${THUMB}`)} {
+    overflow: hidden;
+  }
+  ${at(SKY)} {
+    overflow: hidden;
+  }
+  ${at(`${STAR}, ${CLOUD}`)} {
+    position: absolute;
+    border-radius: 50%;
+  }
+${Object.entries(SPOTS).map(([part, [block, inline, size]]) => `  ${at(choiceChild(ID, part, "sky"))} { inset-block-start: ${block}; inset-inline-start: ${inline}; inline-size: ${size}; block-size: ${size}; }`).join("\n")}
+  ${at(STAR)} {
+    background: ${v(ID, "moon")};
+    opacity: 0;
+    scale: 0.3;
+  }
+  ${at(CLOUD)} {
+    inline-size: calc(var(--sx-switch-h) * 0.9);
+    block-size: calc(var(--sx-switch-h) * 0.45);
+    inset-inline-start: auto;
+    inset-inline-end: 0.3em;
+    border-radius: 999px;
+    background: var(--color-sx-secondary, Canvas);
+    opacity: 0.9;
+  }
+  ${at(`${SKY} > [data-sx-choice-part="cloud2"]`)} {
+    inset-inline-end: 0.75em;
+    inset-block-start: 22%;
+    opacity: 0.6;
+  }
+  ${at(inItem(ROOT, CHECKED, STAR))} {
+    opacity: 1;
+    scale: 1;
+  }
+  ${at(inItem(ROOT, CHECKED, CLOUD))} {
+    opacity: 0;
+    translate: 0 120%;
+  }
+  ${at(SHADE)} {
+    background: ${v(ID, "night")};
+    border-radius: 50%;
+    translate: 110% -110%;
+  }
+  ${at(inItem(ROOT, CHECKED, SHADE))} {
+    translate: 32% -22%;
+  }`;
+const CSS = `  ${at(`${STAR}, ${CLOUD}`)} {
+    transition: opacity ${v(ID, "time")} ease-out, scale ${v(ID, "time")} ease-out, translate ${v(ID, "time")} ease-out;
+  }
+  ${at(SHADE)} {
+    transition: translate ${v(ID, "time")} ease-in-out;
+  }`;
+/** A day-to-night toggle: the sun turns into a moon, clouds drift off and stars come out. */
+export function switchDayNight(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: {
+            [varName(ID, "day")]: options.day ?? "#8ecdf0",
+            [varName(ID, "night")]: options.night ?? "#1d2a4d",
+            [varName(ID, "sun")]: options.sun ?? "#ffd25c",
+            [varName(ID, "moon")]: options.moon ?? "#f4efd8",
+            [varName(ID, "time")]: `${options.duration ?? 0.45}s`,
+        },
+        layers: [
+            { slot: "box", part: "sky", children: Object.keys(SPOTS), keep: true },
+            { slot: "thumb", part: "shade", keep: true },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/switch/switchDayNight.schema.d.ts

@@ -0,0 +1 @@
+export declare const SWITCH_DAY_NIGHT_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/switch/switchDayNight.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_DAY_NIGHT_SCHEMA = defineSchema()({
+    id: "switchDayNight",
+    family: "form",
+    factory: "switchDayNight",
+    fields: {
+        day: { kind: "color", label: "Day sky", default: "#8ecdf0" },
+        night: { kind: "color", label: "Night sky", default: "#1d2a4d" },
+        sun: { kind: "color", label: "Sun", default: "#ffd25c" },
+        moon: { kind: "color", label: "Moon", default: "#f4efd8" },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/forms/effects/switch/switchFace.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchFaceOptions {
+    /** Seconds the wake-up takes. Default `0.4`. */
+    readonly duration?: number;
+}
+/** A sleeping face wakes up when switched on: eyes open, a smile, a blink. */
+export declare function switchFace(options?: SwitchFaceOptions): FormEffect;

package/dist/forms/effects/switch/switchFace.js

@@ -0,0 +1,75 @@
+import { CHANGED, CHECKED, at, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchFace";
+const ROOT = switchOf(ID);
+const FACE = choiceLayer(ID, "face");
+const part = (name) => `${FACE} [data-sx-choice-svg="${name}"]`;
+// Our own little creature, drawn in a few strokes on the thumb. Off, it sleeps: eyes shut, a small round mouth. On, it
+// wakes: eyes open, a smile; woken by hand, it blinks once. Asleep or awake is the state (it holds under reduced
+// motion); the blink and the swaps are motion.
+const STATE = `  ${at(FACE)} {
+    inset: 12%;
+  }
+  ${at(`${FACE} [data-sx-choice-svg]`)} {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  ${at(part("open"))} {
+    fill: currentColor;
+    stroke: none;
+    opacity: 0;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+  ${at(part("smile"))} {
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, part("shut")))} {
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, part("open")))} {
+    opacity: 1;
+  }
+  ${at(inItem(ROOT, CHECKED, part("snore")))} {
+    opacity: 0;
+  }
+  ${at(inItem(ROOT, CHECKED, part("smile")))} {
+    opacity: 1;
+  }`;
+const CSS = `  ${at(`${FACE} [data-sx-choice-svg]`)} {
+    transition: opacity ${v(ID, "time")} ease-out;
+  }
+  ${at(inItem(ROOT, `${CHECKED}${CHANGED}`, part("open")))} {
+    animation: sx-form-switchFace calc(${v(ID, "time")} * 2) ease-in-out;
+  }
+  @keyframes sx-form-switchFace {
+    0%, 40%, 70%, 100% { scale: 1 1; }
+    55% { scale: 1 0.1; }
+  }`;
+/** A sleeping face wakes up when switched on: eyes open, a smile, a blink. */
+export function switchFace(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.4}s` },
+        layers: [
+            {
+                slot: "thumb",
+                part: "face",
+                keep: true,
+                svg: {
+                    viewBox: "0 0 24 24",
+                    children: [
+                        { tag: "path", part: "shut", attrs: { d: "M6.5 10q1.5 1.6 3 0M14.5 10q1.5 1.6 3 0" } },
+                        { tag: "path", part: "open", attrs: { d: "M8 10.2a1.5 1.5 0 1 0 0-.01zM16 10.2a1.5 1.5 0 1 0 0-.01z" } },
+                        { tag: "circle", part: "snore", attrs: { cx: 12, cy: 16, r: 1.4 } },
+                        { tag: "path", part: "smile", attrs: { d: "M8.5 14.5q3.5 3.4 7 0" } },
+                    ],
+                },
+            },
+        ],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/switch/switchFace.schema.d.ts

@@ -0,0 +1 @@
+export declare const SWITCH_FACE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/switch/switchFace.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_FACE_SCHEMA = defineSchema()({
+    id: "switchFace",
+    family: "form",
+    factory: "switchFace",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/forms/effects/switch/switchFlip.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchFlipOptions {
+    /** Seconds the coin takes to turn over. Default `0.45`. */
+    readonly duration?: number;
+}
+/** The thumb is a coin that turns over as it crosses: a cross on one face, a tick on the other. */
+export declare function switchFlip(options?: SwitchFlipOptions): FormEffect;

package/dist/forms/effects/switch/switchFlip.js

@@ -0,0 +1,45 @@
+import { CHECKED, THUMB, at, choiceChild, choiceLayer, defineForm, inItem, switchOf, v, varName } from "../kit.js";
+const ID = "switchFlip";
+const ROOT = switchOf(ID);
+const COIN = choiceLayer(ID, "coin");
+const FACE = `${COIN} > [data-sx-choice-part]`;
+const BACK = choiceChild(ID, "back", "coin");
+// The thumb is a coin with a cross on one face and a tick on the other. It turns over in 3D as it crosses the track
+// (a perspective on the thumb, the coin's two faces back to back, each hidden when turned away). Which face shows is the
+// state, so reduced motion still shows the tick; the turn is motion.
+const STATE = `  ${at(`${ROOT} ${THUMB}`)} {
+    perspective: 6em;
+  }
+  ${at(COIN)} {
+    transform-style: preserve-3d;
+    border-radius: 50%;
+  }
+  ${at(inItem(ROOT, CHECKED, COIN))} {
+    rotate: y 180deg;
+  }
+  ${at(FACE)} {
+    position: absolute;
+    inset: 22%;
+    backface-visibility: hidden;
+    background: currentColor;
+  }
+  ${at(choiceChild(ID, "front", "coin"))} {
+    clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
+  }
+  ${at(BACK)} {
+    rotate: y 180deg;
+    clip-path: polygon(8% 52%, 20% 40%, 40% 60%, 80% 18%, 92% 30%, 40% 84%);
+  }`;
+const CSS = `  ${at(COIN)} {
+    transition: rotate ${v(ID, "time")} ease-in-out;
+  }`;
+/** The thumb is a coin that turns over as it crosses: a cross on one face, a tick on the other. */
+export function switchFlip(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["switch"],
+        state: STATE,
+        vars: { [varName(ID, "time")]: `${options.duration ?? 0.45}s` },
+        layers: [{ slot: "thumb", part: "coin", children: ["front", "back"], keep: true }],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/switch/switchFlip.schema.d.ts

@@ -0,0 +1 @@
+export declare const SWITCH_FLIP_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/forms/effects/switch/switchFlip.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const SWITCH_FLIP_SCHEMA = defineSchema()({
+    id: "switchFlip",
+    family: "form",
+    factory: "switchFlip",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 1, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/forms/effects/switch/switchGoo.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface SwitchGooOptions {
+    /** Seconds the drop takes to cross. Default `0.5`. */
+    readonly duration?: number;
+}
+/** The thumb is a drop of liquid: it stretches into a bridge as it crosses and snaps round on the other side. */
+export declare function switchGoo(options?: SwitchGooOptions): FormEffect;