@sharedex/ui 0.9.0 → 0.10.0

package/dist/forms/effects/valid/validCheck.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidCheckOptions {
+    /** The check's colour. Default `var(--color-sx-success)`. */
+    readonly color?: string;
+    /** Seconds it takes to draw. Default `0.35`. */
+    readonly duration?: number;
+}
+/** A check mark draws itself at the end of the field once it is filled in right. */
+export declare function validCheck(options?: ValidCheckOptions): FormEffect;

package/dist/forms/effects/valid/validCheck.js

@@ -0,0 +1,50 @@
+import { SPRING, VALID, at, defineForm, inField, layerOf, v, varName } from "../kit.js";
+const ID = "validCheck";
+const LAYER = layerOf(ID);
+const LINE = `${LAYER} [data-sx-field-svg="check"]`;
+// The check is the field's state, so it shows under reduced motion too (the layer is kept). Drawn: its dash runs from
+// 1 to 0 and the mark pops a little. It sits in the end row and keeps its room, so nothing moves when it appears.
+const STATE = `  ${at(LINE)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  ${at(inField(ID, VALID, LINE))} {
+    stroke-dashoffset: 0;
+  }
+  @media (forced-colors: active) {
+    ${at(LINE)} {
+      stroke: CanvasText;
+    }
+  }`;
+const CSS = `  ${at(LINE)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-out;
+  }
+  ${at(LAYER)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+    scale: 0.6;
+  }
+  ${at(inField(ID, VALID, LAYER))} {
+    scale: 1;
+  }`;
+/** A check mark draws itself at the end of the field once it is filled in right. */
+export function validCheck(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-success)",
+            [varName(ID, "time")]: `${options.duration ?? 0.35}s`,
+        },
+        layers: [
+            {
+                slot: "end",
+                keep: true,
+                svg: { viewBox: "0 0 24 24", children: [{ tag: "path", part: "check", attrs: { d: "m5 12.5 4.5 4.5L19 7.5", pathLength: 1 } }] },
+            },
+        ],
+    });
+}

package/dist/forms/effects/valid/validCheck.schema.d.ts

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

package/dist/forms/effects/valid/validCheck.schema.js

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

package/dist/forms/effects/valid/validColor.d.ts

@@ -0,0 +1,11 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidColorOptions {
+    /** A wrong field's border and label. Default `var(--color-sx-danger)`. */
+    readonly invalid?: string;
+    /** A right field's border. Default `var(--color-sx-success)`. */
+    readonly valid?: string;
+    /** Seconds the colour takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** The border turns red when the field is wrong and green when it is right, once the user has left it. */
+export declare function validColor(options?: ValidColorOptions): FormEffect;

package/dist/forms/effects/valid/validColor.js

@@ -0,0 +1,28 @@
+import { INVALID, VALID, at, defineForm, fieldOf, inField, labelOf, timed, v, varName } from "../kit.js";
+const ID = "validColor";
+const FIELD = fieldOf(ID);
+const LABEL = labelOf(ID);
+// Colours are states: they hold under reduced motion. They go through the look's hooks (the look loads after
+// effects): `--sx-field-edge` for the border, `--sx-field-label-color` for the label. A field turns only once the
+// user has left it or the app has checked it, never while typing.
+const STATE = `  ${at(inField(ID, INVALID, FIELD))} {
+    --sx-field-edge: ${v(ID, "invalid")};
+    --sx-field-label-color: ${v(ID, "invalid")};
+  }
+  ${at(inField(ID, VALID, FIELD))} {
+    --sx-field-edge: ${v(ID, "valid")};
+  }`;
+const CSS = `  ${at(LABEL)} {
+    ${timed(ID, "color")}
+  }`;
+/** The border turns red when the field is wrong and green when it is right, once the user has left it. */
+export function validColor(options = {}) {
+    return defineForm(ID, CSS, {
+        state: STATE,
+        vars: {
+            [varName(ID, "invalid")]: options.invalid ?? "var(--color-sx-danger)",
+            [varName(ID, "valid")]: options.valid ?? "var(--color-sx-success)",
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+    });
+}

package/dist/forms/effects/valid/validColor.schema.d.ts

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

package/dist/forms/effects/valid/validColor.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const VALID_COLOR_SCHEMA = defineSchema()({
+    id: "validColor",
+    family: "form",
+    factory: "validColor",
+    fields: {
+        invalid: { kind: "color", label: "Wrong", default: "var(--color-sx-danger)" },
+        valid: { kind: "color", label: "Right", default: "var(--color-sx-success)" },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.6, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/valid/validFlash.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidFlashOptions {
+    /** The flash's colour. Default `var(--color-sx-danger)`. */
+    readonly color?: string;
+    /** Seconds the two blinks take. Default `0.9`. */
+    readonly duration?: number;
+}
+/** The field blinks twice when the user is sent to it after a failed submit (`focusFirstError`, `ErrorSummary`). */
+export declare function validFlash(options?: ValidFlashOptions): FormEffect;

package/dist/forms/effects/valid/validFlash.js

@@ -0,0 +1,36 @@
+import { FLASH, at, defineForm, inField, layerOf, v, varName } from "../kit.js";
+const ID = "validFlash";
+const RING = layerOf(ID, "ring");
+const TINT = layerOf(ID, "tint");
+// `focusFirstError` and an error summary's links mark the field they send the user to (`data-sx-flash`, for about a
+// second). A ring around the box and a tint inside it blink twice: only their opacity moves. Under reduced motion the
+// layers go and the focus ring alone shows where the user landed.
+const CSS = `  ${at(RING)} {
+    outline: 2px solid ${v(ID, "color")};
+    outline-offset: 3px;
+    opacity: 0;
+  }
+  ${at(TINT)} {
+    background: color-mix(in oklab, ${v(ID, "color")} 12%, transparent);
+    opacity: 0;
+  }
+  ${at(`${inField(ID, FLASH, RING)}, ${inField(ID, FLASH, TINT)}`)} {
+    animation: sx-form-validFlash ${v(ID, "time")} ease-in-out;
+  }
+  @keyframes sx-form-validFlash {
+    0%, 50%, 100% { opacity: 0; }
+    25%, 75% { opacity: 1; }
+  }`;
+/** The field blinks twice when the user is sent to it after a failed submit (`focusFirstError`, `ErrorSummary`). */
+export function validFlash(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-danger)",
+            [varName(ID, "time")]: `${options.duration ?? 0.9}s`,
+        },
+        layers: [
+            { slot: "under", part: "tint" },
+            { slot: "edge", part: "ring" },
+        ],
+    });
+}

package/dist/forms/effects/valid/validFlash.schema.d.ts

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

package/dist/forms/effects/valid/validFlash.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const VALID_FLASH_SCHEMA = defineSchema()({
+    id: "validFlash",
+    family: "form",
+    factory: "validFlash",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-danger)" },
+        duration: { kind: "number", label: "Two blinks", min: 0.4, max: 1.6, step: 0.05, unit: "s", default: 0.9 },
+    },
+});

package/dist/forms/effects/valid/validMessage.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidMessageOptions {
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The error message slides down under the field, and its row opens smoothly, pushing what is below gently. */
+export declare function validMessage(options?: ValidMessageOptions): FormEffect;

package/dist/forms/effects/valid/validMessage.js

@@ -0,0 +1,24 @@
+import { EASE, at, defineForm, fieldOf, v, varName } from "../kit.js";
+const ID = "validMessage";
+const FIELD = fieldOf(ID);
+const ROW = `${FIELD} [data-sx-field-message]`;
+const SAYS = `${FIELD} [data-sx-field-says]`;
+// The base sheet already gives the message its own row, 0fr while empty and 1fr with words, so nothing below jumps
+// at once. This eases the row open (an allowed repaint, one row of one field) and slides the words down into it. A new
+// message is a new element (the field keys it by its words), so it slides in again.
+const CSS = `  ${at(ROW)} {
+    transition: grid-template-rows ${v(ID, "time")} ${EASE};
+  }
+  ${at(SAYS)} {
+    transition: opacity ${v(ID, "time")} ${EASE}, translate ${v(ID, "time")} ${EASE};
+  }
+  @starting-style {
+    ${at(SAYS)} {
+      opacity: 0;
+      translate: 0 -0.75em;
+    }
+  }`;
+/** The error message slides down under the field, and its row opens smoothly, pushing what is below gently. */
+export function validMessage(options = {}) {
+    return defineForm(ID, CSS, { vars: { [varName(ID, "time")]: `${options.duration ?? 0.25}s` } });
+}

package/dist/forms/effects/valid/validMessage.schema.d.ts

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

package/dist/forms/effects/valid/validMessage.schema.js

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

package/dist/forms/effects/valid/validShake.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidShakeOptions {
+    /** How far it swings, px. Default `6`. */
+    readonly distance?: number;
+    /** Seconds the shake lasts. Default `0.4`. */
+    readonly duration?: number;
+}
+/** The field shakes side to side when it turns wrong, and again when the user is sent back to it. */
+export declare function validShake(options?: ValidShakeOptions): FormEffect;

package/dist/forms/effects/valid/validShake.js

@@ -0,0 +1,37 @@
+import { FLASH, INVALID, at, boxOf, defineForm, inField, v, varName } from "../kit.js";
+const ID = "validShake";
+const BOX = boxOf(ID);
+const SWING = (n) => `calc(${v(ID, "distance")} * ${n}px) 0`;
+// The box shakes when the field turns wrong, and again each time the user is sent to it (`focusFirstError`, an error
+// summary's link: `data-sx-flash`). The second shake is a second animation in the list, so it starts afresh while the
+// first one, long over, keeps its place. A shake is never the only sign: the error has words (atlas rule 3).
+const CSS = `  ${at(inField(ID, INVALID, BOX))} {
+    animation: sx-form-validShake ${v(ID, "time")} ease-out;
+  }
+  ${at(inField(ID, `${INVALID}${FLASH}`, BOX))} {
+    animation: sx-form-validShake ${v(ID, "time")} ease-out, sx-form-validShake-again ${v(ID, "time")} ease-out;
+  }
+  @keyframes sx-form-validShake {
+    0%, 100% { translate: 0 0; }
+    15% { translate: ${SWING(-1)}; }
+    35% { translate: ${SWING(1)}; }
+    55% { translate: ${SWING(-0.6)}; }
+    75% { translate: ${SWING(0.3)}; }
+  }
+  @keyframes sx-form-validShake-again {
+    0%, 100% { translate: 0 0; }
+    15% { translate: ${SWING(-1)}; }
+    35% { translate: ${SWING(1)}; }
+    55% { translate: ${SWING(-0.6)}; }
+    75% { translate: ${SWING(0.3)}; }
+  }`;
+/** The field shakes side to side when it turns wrong, and again when the user is sent back to it. */
+export function validShake(options = {}) {
+    return defineForm(ID, CSS, {
+        vars: {
+            [varName(ID, "distance")]: options.distance ?? 6,
+            [varName(ID, "time")]: `${options.duration ?? 0.4}s`,
+        },
+        claims: ["box"],
+    });
+}

package/dist/forms/effects/valid/validShake.schema.d.ts

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

package/dist/forms/effects/valid/validShake.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const VALID_SHAKE_SCHEMA = defineSchema()({
+    id: "validShake",
+    family: "form",
+    factory: "validShake",
+    fields: {
+        distance: { kind: "number", label: "Swing", min: 2, max: 16, step: 1, unit: "px", default: 6 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 0.8, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/forms/effects/valid/validSwap.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ValidSwapOptions {
+    /** Seconds it takes. Default `0.25`. */
+    readonly duration?: number;
+}
+/** The help text under the field rolls up and away, and the error rolls in from below in its place. */
+export declare function validSwap(options?: ValidSwapOptions): FormEffect;

package/dist/forms/effects/valid/validSwap.js

@@ -0,0 +1,33 @@
+import { EASE, at, defineForm, fieldOf, inField, v, varName } from "../kit.js";
+const ID = "validSwap";
+const FIELD = fieldOf(ID);
+const HELP = `${FIELD} > [data-sx-field-description]`;
+const MESSAGE = `${FIELD} > [data-sx-field-message]`;
+const SAYS = `${FIELD} [data-sx-field-says]`;
+const SAYING = ":has([data-sx-field-error]:not(:empty))";
+// The help text and the error share one cell, so the error takes the help's place instead of adding a row: the
+// field's height barely changes. Which one shows is a state (it holds under reduced motion); the roll is the motion.
+// Screen readers already hear the error in place of the help (`aria-describedby`).
+const STATE = `  ${at(MESSAGE)} {
+    grid-area: description;
+  }
+  ${at(inField(ID, SAYING, HELP))} {
+    opacity: 0;
+    translate: 0 -0.75em;
+  }`;
+const CSS = `  ${at(HELP)} {
+    transition: opacity ${v(ID, "time")} ${EASE}, translate ${v(ID, "time")} ${EASE};
+  }
+  ${at(SAYS)} {
+    transition: opacity ${v(ID, "time")} ${EASE}, translate ${v(ID, "time")} ${EASE};
+  }
+  @starting-style {
+    ${at(SAYS)} {
+      opacity: 0;
+      translate: 0 0.75em;
+    }
+  }`;
+/** The help text under the field rolls up and away, and the error rolls in from below in its place. */
+export function validSwap(options = {}) {
+    return defineForm(ID, CSS, { state: STATE, vars: { [varName(ID, "time")]: `${options.duration ?? 0.25}s` } });
+}

package/dist/forms/effects/valid/validSwap.schema.d.ts

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

package/dist/forms/effects/valid/validSwap.schema.js

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

package/dist/forms/errors.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+/** One problem: the id (or `name`) of the field it is about, and what is wrong. */
+export interface ErrorSummaryItem {
+    readonly id: string;
+    readonly message: ReactNode;
+}
+/** A React Hook Form `formState.errors` object, nested objects and arrays included, or a plain `{ name: message }`. */
+export type ErrorTree = {
+    readonly [name: string]: unknown;
+};
+/** The problems as a flat list, in the object's order. A nested name joins with dots, as React Hook Form names it (`address.city`). */
+export declare function errorItems(errors: readonly ErrorSummaryItem[] | ErrorTree, prefix?: string): ErrorSummaryItem[];

package/dist/forms/errors.js

@@ -0,0 +1,20 @@
+// Turns the errors a form library holds into the flat list an error summary shows. Plain module: a Server Component
+// can call it too.
+import { isValidElement } from "react";
+/** The problems as a flat list, in the object's order. A nested name joins with dots, as React Hook Form names it (`address.city`). */
+export function errorItems(errors, prefix = "") {
+    // a list of problems as given; deeper down, an array is a field array (`items.1.name`)
+    if (Array.isArray(errors) && !prefix)
+        return errors;
+    return Object.entries(errors).flatMap(([key, value]) => {
+        if (value === undefined || value === null || value === false || value === "")
+            return [];
+        const id = prefix ? `${prefix}.${key}` : key;
+        if (typeof value !== "object" || isValidElement(value))
+            return [{ id, message: value }];
+        const message = value.message;
+        if (message !== undefined && message !== null && message !== "")
+            return [{ id, message: message }];
+        return errorItems(value, id);
+    });
+}

package/dist/forms/file.d.ts

@@ -0,0 +1 @@
+export declare const FILE_CSS = "@layer theme, base, components, utilities;\n@layer components {\n  :where([data-sx-file]) {\n    --sx-form-dir: 1;\n    --sx-file-thumb: 2.5rem;\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas: \"label\" \"zone\" \"description\" \"list\" \"message\";\n    align-content: start;\n    min-inline-size: 0;\n    position: relative;\n  }\n  :where([data-sx-file]:dir(rtl)) {\n    --sx-form-dir: -1;\n  }\n  :where([data-sx-file-label]) {\n    grid-area: label;\n    justify-self: start;\n    margin-block-end: 0.375rem;\n  }\n  :where([data-sx-file-zone]) {\n    grid-area: zone;\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    justify-items: center;\n    gap: 0.5rem;\n    padding: 1.5rem 1rem;\n    box-sizing: border-box;\n    text-align: center;\n    cursor: pointer;\n  }\n  :where([data-sx-file-zone] > [data-sx-file-layer]) {\n    position: absolute;\n    inset: 0;\n    z-index: -1;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :where([data-sx-file-icon]) {\n    display: grid;\n    place-items: center;\n  }\n  :where([data-sx-file-icon] svg, [data-sx-file-card] svg) {\n    display: block;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    overflow: visible;\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n  :where([data-sx-file-control]) {\n    max-inline-size: 100%;\n    color: transparent;\n    font: inherit;\n    font-size: max(16px, 0.875rem);\n    cursor: pointer;\n  }\n  :where([data-sx-file-control])::file-selector-button {\n    margin-inline-end: 0;\n    padding: 0.5rem 1rem;\n    font: inherit;\n    cursor: pointer;\n  }\n  :where([data-sx-file-control]:focus-visible) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 2px;\n  }\n  :where([data-sx-file][data-sx-over] [data-sx-file-zone]) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: -2px;\n  }\n  :where([data-sx-file][data-sx-over=\"reject\"] [data-sx-file-zone]) {\n    outline-color: var(--color-sx-danger, currentColor);\n    cursor: no-drop;\n  }\n  :where([data-sx-file]:has([data-sx-file-control]:disabled) [data-sx-file-zone]) {\n    opacity: 0.55;\n    cursor: not-allowed;\n  }\n  :where([data-sx-file-description]) {\n    grid-area: description;\n    margin: 0.375rem 0 0;\n  }\n  :where([data-sx-file-list]) {\n    grid-area: list;\n    display: grid;\n    gap: 0.5rem;\n    margin: 0.75rem 0 0;\n    padding: 0;\n    list-style: none;\n  }\n  :where([data-sx-file-card]) {\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    grid-template-columns: var(--sx-file-thumb) minmax(0, 1fr) auto auto;\n    grid-template-areas: \"thumb info status actions\";\n    align-items: center;\n    column-gap: 0.75rem;\n    padding: 0.5rem;\n    box-sizing: border-box;\n  }\n  :where([data-sx-file-card] > [data-sx-file-layer]) {\n    grid-area: status;\n    pointer-events: none;\n  }\n  :where([data-sx-file-thumb]) {\n    grid-area: thumb;\n    display: grid;\n    place-items: center;\n    inline-size: var(--sx-file-thumb);\n    block-size: var(--sx-file-thumb);\n    overflow: hidden;\n    border-radius: calc(var(--radius-sx-control, 0.5rem) * 0.75);\n  }\n  :where([data-sx-file-thumb] > img) {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n  :where([data-sx-file-info]) {\n    grid-area: info;\n    display: grid;\n    min-inline-size: 0;\n    gap: 0.125rem;\n  }\n  :where([data-sx-file-name]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  :where([data-sx-file-bar]) {\n    display: block;\n    block-size: 0.25rem;\n    margin-block-start: 0.25rem;\n    overflow: hidden;\n    border-radius: 999px;\n  }\n  :where([data-sx-file-fill]) {\n    display: block;\n    block-size: 100%;\n    transform-origin: calc(50% - 50% * var(--sx-form-dir)) 50%;\n    scale: var(--sx-file-progress, 0) 1;\n    background: currentColor;\n  }\n  :where([data-sx-file-done]) {\n    grid-area: status;\n    display: none;\n  }\n  :where([data-sx-file-card][data-sx-done] [data-sx-file-done]) {\n    display: grid;\n  }\n  :where([data-sx-file-card][data-sx-done] [data-sx-file-bar]) {\n    opacity: 0;\n  }\n  :where([data-sx-file-actions]) {\n    grid-area: actions;\n    display: flex;\n    gap: 0.125rem;\n  }\n  :where([data-sx-file-actions] > button) {\n    display: grid;\n    place-items: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n  }\n  :where([data-sx-file-actions] > button svg) {\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n  }\n  :where([data-sx-file-actions] > button:focus-visible) {\n    outline: 2px solid var(--color-sx-primary, currentColor);\n    outline-offset: 1px;\n  }\n  :where([data-sx-file-actions] > button:disabled) {\n    opacity: 0.35;\n    cursor: default;\n  }\n  :where([data-sx-file-card][data-sx-leaving]) {\n    pointer-events: none;\n  }\n  :where([data-sx-file-page]) {\n    position: fixed;\n    inset: 0;\n    z-index: 2147483000;\n    display: none;\n    place-items: center;\n    isolation: isolate;\n    padding: 1.5rem;\n    box-sizing: border-box;\n    font-size: 1.5rem;\n  }\n  :where([data-sx-file][data-sx-page-over] [data-sx-file-page]) {\n    display: grid;\n  }\n  :where([data-sx-file-page] > [data-sx-file-layer]) {\n    position: absolute;\n    inset: 1rem;\n    z-index: -1;\n    pointer-events: none;\n  }\n  :where([data-sx-file-message]) {\n    grid-area: message;\n    display: grid;\n    grid-template-rows: 0fr;\n  }\n  :where([data-sx-file-message]:has([data-sx-file-says])) {\n    grid-template-rows: 1fr;\n  }\n  :where([data-sx-file-error]) {\n    min-block-size: 0;\n    margin: 0;\n    overflow: hidden;\n  }\n  :where([data-sx-file-says]) {\n    display: block;\n    padding-block-start: 0.375rem;\n  }\n  :where([data-sx-file-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  @media (prefers-reduced-motion: reduce) {\n    :where([data-sx-file] [data-sx-file-layer]:not([data-sx-file-keep])) {\n      display: none;\n    }\n  }\n  @media (forced-colors: active) {\n    :where([data-sx-file-zone]) {\n      border: 2px dashed CanvasText;\n    }\n    :where([data-sx-file-control]) {\n      color: CanvasText;\n    }\n    :where([data-sx-file-card]) {\n      border: 1px solid CanvasText;\n    }\n    :where([data-sx-file-fill]) {\n      forced-color-adjust: none;\n      background: Highlight;\n    }\n  }\n}";