zabi-components 8.1.0 → 9.0.0

package/dist/atoms/CodeField.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { SemanticVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
+    import type { SizeVariant } from "../types/variants.js";
+    import {
+        activePlace,
+        caretAfterSanitise,
+        CODE_FIELD_GAP_REM,
+        CODE_FIELD_GROUP_GAP_REM,
+        CODE_FIELD_SIZES,
+        codeGroups,
+        codeLength,
+        DEFAULT_CODE_FIELD_STRINGS,
+        isCodeChar,
+        nearestBox,
+        pasteInto,
+        replaceAt,
+        sanitiseCode,
+        type CodeFieldMode,
+        type CodeFieldStrings,
+    } from "../util/code-field.js";
+    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
+    import FieldMessages from "./FieldMessages.svelte";
+
+    /**
+     * A field for a one-time or verification code. One real `<input>` holds
+     * the code, so autofill from a message, paste, the numeric keyboard, form
+     * posting by `name` and a single accessible name all work as on `Input`;
+     * the boxes are drawn under it and hidden from assistive technology.
+     * Other attributes (`autocomplete`, `inputmode`, `data-*`, ...) land on
+     * the `<input>`.
+     */
+    type Props = Omit<
+        HTMLInputAttributes,
+        | "class"
+        | "size"
+        | "value"
+        | "type"
+        | "id"
+        | "name"
+        | "required"
+        | "disabled"
+        | "readonly"
+        | "maxlength"
+        | "oninput"
+        | "onblur"
+        | "aria-label"
+        | "aria-describedby"
+    > & {
+        /** Omit to auto-generate. */
+        id?: string;
+        /** The code typed so far. Bindable. */
+        value?: string;
+        /** The name the code is posted under, with or without scripts. */
+        name?: string;
+        class?: string;
+        /** Places in the code. A whole number from 1 to 12. */
+        length?: number;
+        /** `numeric` (default): digits only. `alphanumeric` also takes letters. */
+        mode?: CodeFieldMode;
+        /** Box size: `sm` (44px tall, a compact row), `md` (default), `lg`. */
+        size?: SizeVariant;
+        /**
+         * Draws the boxes in groups with a wider gap between them: a number is
+         * the size of each group (`4` makes 4 and 4 of 8), a list gives each
+         * group's size. Only the drawing changes: one input, one value, and a
+         * paste with spaces or dashes still fills it. A row that cannot fit at
+         * large text or a narrow width wraps between groups.
+         */
+        groups?: number | number[];
+        /** Names the field. Defaults to the provider's `codeField.label`, then "Verification code". */
+        label?: string;
+        /** Keeps the label for assistive technology and takes it off the screen. */
+        labelHidden?: boolean;
+        required?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        variant?: SemanticVariant;
+        /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+        message?: string;
+        /** Help text under the field, read out with it. */
+        hint?: string;
+        /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+        error?: string;
+        /** Called with the code when the last place is filled by typing, pasting or autofill. It does not submit anything. */
+        oncomplete?: (value: string) => void;
+        /** Overrides for the built-in strings: label, description. */
+        strings?: Partial<CodeFieldStrings>;
+        oninput?: (event: Event) => void;
+        onblur?: (event: Event) => void;
+        "aria-label"?: string;
+        /** Ids of other elements that describe the field. The length, the hint and the message are added after them. */
+        "aria-describedby"?: string | null;
+    };
+
+    /** An event on the input, as Svelte types the handlers of an element. */
+    type OnInput<E extends Event> = E & { currentTarget: EventTarget & HTMLInputElement };
+
+    let {
+        id: idProp,
+        value = $bindable<Exclude<Props["value"], undefined>>(),
+        name = "",
+        class: className = "",
+        length: lengthProp = 6,
+        mode = "numeric",
+        size = "md",
+        groups,
+        label,
+        labelHidden = false,
+        required = false,
+        disabled = false,
+        readonly = false,
+        variant = "default",
+        message = "",
+        hint = "",
+        error = "",
+        oncomplete,
+        strings,
+        oninput,
+        onblur,
+        "aria-label": ariaLabel,
+        "aria-describedby": describedBy,
+        ...restProps
+    }: Props = $props();
+
+    // No fallback on a bindable prop (see Input): the default is applied here,
+    // at once and whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (value === undefined) value = "";
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    const length = $derived(codeLength(lengthProp));
+    const sizing = $derived(CODE_FIELD_SIZES[size] ?? CODE_FIELD_SIZES.md);
+    const groupSizes = $derived(codeGroups(groups, length));
+    const grouped = $derived(groupSizes.length > 1);
+    /** Which group each box is in, for the drawing, and the first box of each. */
+    const groupStarts = $derived(groupSizes.map((_, index) => groupSizes.slice(0, index).reduce((sum, n) => sum + n, 0)));
+    const provided = zabiStringsFor("codeField");
+    const text = $derived(mergeStrings(DEFAULT_CODE_FIELD_STRINGS, provided(), strings));
+    const shownLabel = $derived(label || text.label);
+
+    const fallbackId = generateId("code");
+    const inputId = $derived(idProp ?? fallbackId);
+    const lengthId = $derived(`${inputId}-length`);
+    const status = $derived(fieldMessageState({ variant, message, hint, error }));
+
+    let input: HTMLInputElement | undefined = $state();
+    let cells: HTMLElement | undefined = $state();
+    let focused = $state(false);
+    let caret = $state(0);
+
+    /**
+     * Without scripts the input is a plain bordered field showing what is
+     * typed, which posts like any other. Once the page is interactive it
+     * becomes the invisible layer over the boxes.
+     */
+    let enhanced = $state(false);
+    $effect(() => {
+        enhanced = true;
+    });
+
+    const places = $derived(Array.from({ length }, (_, index) => value?.[index] ?? ""));
+    const active = $derived(enhanced && focused && !disabled && !readonly ? activePlace(caret, length) : -1);
+
+    const variantClass = $derived(
+        status.variant === "success"
+            ? "border-success"
+            : status.variant === "warning"
+              ? "border-warning"
+              : status.variant === "error"
+                ? "border-error"
+                : "border-input-border",
+    );
+
+    /** The focus ring of `.focus-ring`, drawn on the box the caret is in. */
+    const RING = "shadow-[0_0_0_2px_var(--color-focus-ring-offset),0_0_0_4px_var(--color-focus-ring)]";
+
+    let complete = "";
+
+    /** Sets the code, and calls `oncomplete` when this makes it whole. */
+    function commit(next: string, caretAt: number) {
+        const previous = value ?? "";
+        if (next !== previous) value = next;
+        if (input) {
+            if (input.value !== next) input.value = next;
+            try {
+                input.setSelectionRange(caretAt, caretAt);
+            } catch {
+                // A browser that cannot place the caret: typing still works.
+            }
+        }
+        caret = caretAt;
+        if (next.length === length) {
+            if (next !== complete) {
+                complete = next;
+                oncomplete?.(next);
+            }
+        } else {
+            complete = "";
+        }
+    }
+
+    function syncCaret() {
+        if (input) caret = input.selectionStart ?? input.value.length;
+    }
+
+    function handleInput(event: OnInput<Event>) {
+        oninput?.(event);
+        const field = event.currentTarget;
+        const raw = field.value;
+        const clean = sanitiseCode(raw, mode, length);
+        const at = caretAfterSanitise(raw, field.selectionStart ?? raw.length, mode, length);
+        commit(clean, Math.min(at, clean.length));
+    }
+
+    /**
+     * A character typed over a filled place replaces it; one typed at the end
+     * is added. A character that does not belong never gets in.
+     */
+    function handleKeydown(event: OnInput<KeyboardEvent>) {
+        restProps.onkeydown?.(event);
+        if (event.defaultPrevented || readonly || disabled) return;
+        if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) return;
+        const field = event.currentTarget;
+        if (!isCodeChar(event.key, mode)) {
+            event.preventDefault();
+            return;
+        }
+        const start = field.selectionStart ?? 0;
+        const end = field.selectionEnd ?? start;
+        if (start === end && start < field.value.length) {
+            event.preventDefault();
+            commit(replaceAt(field.value, start, event.key), start + 1);
+        } else if (start === end && field.value.length >= length) {
+            event.preventDefault();
+        }
+    }
+
+    /** Takes the whole code from the clipboard, wherever the caret is; "123 456" and "123-456" are 123456. */
+    function handlePaste(event: OnInput<ClipboardEvent>) {
+        restProps.onpaste?.(event);
+        if (event.defaultPrevented || readonly || disabled) return;
+        const field = event.currentTarget;
+        event.preventDefault();
+        const pasted = event.clipboardData?.getData("text") ?? "";
+        const start = field.selectionStart ?? field.value.length;
+        const end = field.selectionEnd ?? start;
+        const next = pasteInto(field.value, start, end, pasted, mode, length);
+        if (next === field.value && sanitiseCode(pasted, mode, length) === "") return;
+        commit(next, next.length === length ? length : Math.min(next.length, start + sanitiseCode(pasted, mode, length).length));
+    }
+
+    /** A tap on a box puts the caret there, or at the end of the code when that box is still empty. */
+    function handleClick(event: OnInput<MouseEvent>) {
+        restProps.onclick?.(event);
+        if (!input || !cells) return;
+        const boxes = Array.from(cells.querySelectorAll<HTMLElement>("[data-code-cell]"));
+        let index = nearestBox(
+            boxes.map((box) => box.getBoundingClientRect()),
+            event.clientX,
+            event.clientY,
+        );
+        if (index < 0) return syncCaret();
+        index = Math.min(index, input.value.length);
+        try {
+            input.setSelectionRange(index, index);
+        } catch {
+            // Nothing to place.
+        }
+        syncCaret();
+    }
+
+    const fieldClass = $derived(
+        enhanced
+            ? "absolute inset-0 size-full min-w-0 cursor-text border-0 bg-transparent p-0 text-base text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed"
+            : cn(
+                  sizing.box,
+                  "w-full rounded-control border bg-input px-3 text-center text-xl font-medium tracking-[0.35em] text-body tabular-nums hover:bg-input-hover disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text focus-ring",
+                  variantClass,
+              ),
+    );
+</script>
+
+{#snippet cell(place: string, index: number)}
+    <span
+        data-code-cell
+        data-active={index === active ? "" : undefined}
+        style:max-inline-size="{sizing.maxRem}rem"
+        style:min-inline-size="{sizing.minEm}em"
+        class={cn(
+            "flex flex-1 items-center justify-center rounded-control border bg-input font-medium text-body tabular-nums transition-colors duration-150",
+            sizing.box,
+            sizing.text,
+            variantClass,
+            disabled && "cursor-not-allowed bg-input-disabled text-action-disabled-text",
+            index === active && RING,
+        )}
+    >
+        {place}
+    </span>
+{/snippet}
+
+<div class={cn("w-full", className)}>
+    <label for={inputId} class={cn("mb-2 block text-sm font-medium text-label", labelHidden && "sr-only")}>
+        {shownLabel}
+    </label>
+    <div
+        class="relative"
+        style:max-inline-size="calc({length} * {sizing.maxRem}rem + {length - 1 - Math.max(groupSizes.length - 1, 0)} * {CODE_FIELD_GAP_REM}rem + {Math.max(groupSizes.length - 1, 0)} * {CODE_FIELD_GROUP_GAP_REM}rem)"
+        bind:this={cells}
+    >
+        {#if enhanced}
+            <div
+                class={cn("flex flex-wrap", grouped ? "gap-x-4 gap-y-2" : "gap-2")}
+                aria-hidden="true"
+                data-code-cells
+                data-grouped={grouped ? "" : undefined}
+            >
+                {#if grouped}
+                    {#each groupSizes as groupSize, group (group)}
+                        <div
+                            data-code-group
+                            class="flex gap-2"
+                            style:flex="{groupSize} 1 0"
+                            style:min-inline-size="calc({groupSize} * {sizing.minEm * sizing.digitRem}rem + {groupSize - 1} * {CODE_FIELD_GAP_REM}rem)"
+                            style:max-inline-size="calc({groupSize} * {sizing.maxRem}rem + {groupSize - 1} * {CODE_FIELD_GAP_REM}rem)"
+                        >
+                            {#each places.slice(groupStarts[group], groupStarts[group] + groupSize) as place, offset (offset)}
+                                {@render cell(place, groupStarts[group] + offset)}
+                            {/each}
+                        </div>
+                    {/each}
+                {:else}
+                    {#each places as place, index (index)}
+                        {@render cell(place, index)}
+                    {/each}
+                {/if}
+            </div>
+        {/if}
+        <input
+            bind:this={input}
+            id={inputId}
+            type="text"
+            {name}
+            bind:value
+            {required}
+            {disabled}
+            {readonly}
+            inputmode={mode === "numeric" ? "numeric" : "text"}
+            autocomplete="one-time-code"
+            autocapitalize="off"
+            autocorrect="off"
+            spellcheck={false}
+            class={fieldClass}
+            aria-label={ariaLabel}
+            aria-invalid={status.variant === "error" ? "true" : undefined}
+            aria-required={required ? "true" : undefined}
+            aria-describedby={fieldDescribedBy(inputId, status, [describedBy, lengthId].filter(Boolean).join(" "))}
+            {...restProps}
+            oninput={handleInput}
+            onkeydown={handleKeydown}
+            onpaste={handlePaste}
+            onclick={handleClick}
+            onkeyup={syncCaret}
+            onselect={syncCaret}
+            onfocus={(event) => {
+                focused = true;
+                syncCaret();
+                restProps.onfocus?.(event);
+            }}
+            onblur={(event) => {
+                focused = false;
+                onblur?.(event);
+            }}
+        />
+    </div>
+    <span id={lengthId} class="sr-only">{text.description(length, mode)}</span>
+    <FieldMessages fieldId={inputId} {status} {hint} />
+</div>

package/dist/atoms/CodeField.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { SemanticVariant } from "../types/variants.js";
+import type { SizeVariant } from "../types/variants.js";
+import { type CodeFieldMode, type CodeFieldStrings } from "../util/code-field.js";
+/**
+ * A field for a one-time or verification code. One real `<input>` holds
+ * the code, so autofill from a message, paste, the numeric keyboard, form
+ * posting by `name` and a single accessible name all work as on `Input`;
+ * the boxes are drawn under it and hidden from assistive technology.
+ * Other attributes (`autocomplete`, `inputmode`, `data-*`, ...) land on
+ * the `<input>`.
+ */
+type Props = Omit<HTMLInputAttributes, "class" | "size" | "value" | "type" | "id" | "name" | "required" | "disabled" | "readonly" | "maxlength" | "oninput" | "onblur" | "aria-label" | "aria-describedby"> & {
+    /** Omit to auto-generate. */
+    id?: string;
+    /** The code typed so far. Bindable. */
+    value?: string;
+    /** The name the code is posted under, with or without scripts. */
+    name?: string;
+    class?: string;
+    /** Places in the code. A whole number from 1 to 12. */
+    length?: number;
+    /** `numeric` (default): digits only. `alphanumeric` also takes letters. */
+    mode?: CodeFieldMode;
+    /** Box size: `sm` (44px tall, a compact row), `md` (default), `lg`. */
+    size?: SizeVariant;
+    /**
+     * Draws the boxes in groups with a wider gap between them: a number is
+     * the size of each group (`4` makes 4 and 4 of 8), a list gives each
+     * group's size. Only the drawing changes: one input, one value, and a
+     * paste with spaces or dashes still fills it. A row that cannot fit at
+     * large text or a narrow width wraps between groups.
+     */
+    groups?: number | number[];
+    /** Names the field. Defaults to the provider's `codeField.label`, then "Verification code". */
+    label?: string;
+    /** Keeps the label for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    variant?: SemanticVariant;
+    /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
+    /** Called with the code when the last place is filled by typing, pasting or autofill. It does not submit anything. */
+    oncomplete?: (value: string) => void;
+    /** Overrides for the built-in strings: label, description. */
+    strings?: Partial<CodeFieldStrings>;
+    oninput?: (event: Event) => void;
+    onblur?: (event: Event) => void;
+    "aria-label"?: string;
+    /** Ids of other elements that describe the field. The length, the hint and the message are added after them. */
+    "aria-describedby"?: string | null;
+};
+declare const CodeField: import("svelte").Component<Props, {}, "value">;
+type CodeField = ReturnType<typeof CodeField>;
+export default CodeField;

package/dist/atoms/ColorPicker.svelte

@@ -488,6 +488,7 @@
                             use:setColorMapContainer
                             class="relative w-full h-48 rounded-container cursor-crosshair touch-none select-none {RING_WITHIN}"
                             role="group"
+                            data-sheet-no-drag
                             aria-label={text.area}
                             onpointerdown={handleMapPointerDown}
                             onpointermove={handleMapPointerMove}

package/dist/atoms/DateField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { HTMLInputAttributes } from "svelte/elements";
     import type { SizeVariant } from "../types/variants.js";
+    import type { DateFieldStrings } from "../util/temporal-field.js";
     import TemporalField from "./TemporalField.svelte";
 
     /**
@@ -10,15 +11,28 @@
      * calendar, Android its calendar, a desktop browser its own. `value` is
      * always `YYYY-MM-DD`, or `""` while empty, whatever the field shows.
      *
-     * What the field shows is the browser's decision: the date in the format
-     * of the browser or device, not of the page, and no attribute changes
-     * that. To show a date as text in the page's language, use `formatDate`:
+     * What the field shows is the browser's decision, unless it has a
+     * `locale`: without one, the date is in the format of the browser or
+     * device, not of the page, and no attribute changes that. To show a date
+     * as text in the page's language, use `formatDate`:
      *
      * ```svelte
      * <DateField label="Date" bind:value={date} min="2026-01-01" />
      * <p>{formatDate(date, "sv")}</p>  <!-- 6 okt. 2026 -->
      * ```
      *
+     * With `locale`, the field shows the value in that language and its own
+     * picker opens: a Calendar in a BottomSheet (at every width), with Clear
+     * unless the field is `required`. Until the page has run, and without
+     * scripts, it is the native input as above and submits as before; once
+     * it has, the native input stays as the form control, out of sight, and a
+     * button in its place shows the date. `picker="native"` opens the
+     * platform's own picker instead.
+     *
+     * ```svelte
+     * <DateField label="Datum" locale="sv" bind:value format={{ weekday: "short", day: "numeric", month: "short" }} />
+     * ```
+     *
      * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
      * `<input>`.
      */
@@ -53,6 +67,20 @@
         size?: SizeVariant;
         /** Extra classes for the `<input>`. */
         class?: string;
+        /**
+         * Language of the field, as a BCP 47 tag (`sv`, `en-GB`) or a list of them. With it the
+         * field shows the value in that language, whatever the browser's is, and opens the
+         * library's own picker; see above. Left out, the field is the native input.
+         */
+        locale?: string | string[];
+        /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. Default: what formatDate gives for the locale. */
+        format?: Intl.DateTimeFormatOptions;
+        /** With `locale`: shown in the placeholder colour while the field is empty. */
+        placeholder?: string;
+        /** With `locale`: `library` (default) opens the library's calendar in a sheet; `native` opens the platform's own picker. */
+        picker?: "library" | "native";
+        /** With `locale`: the words the field says; replace any of them to translate. */
+        strings?: Partial<DateFieldStrings>;
     };
 
     let {
@@ -71,6 +99,11 @@
         readonly = false,
         size = "md",
         class: className = "",
+        locale,
+        format,
+        placeholder,
+        picker = "library",
+        strings,
         ...restProps
     }: Props = $props();
 
@@ -103,5 +136,10 @@
     {readonly}
     {size}
     class={className}
+    {locale}
+    {format}
+    {placeholder}
+    {picker}
+    {strings}
     {...restProps}
 />

package/dist/atoms/DateField.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { SizeVariant } from "../types/variants.js";
+import type { DateFieldStrings } from "../util/temporal-field.js";
 /**
  * A date, picked with the device's own date picker and styled like Input.
  *
@@ -7,15 +8,28 @@ import type { SizeVariant } from "../types/variants.js";
  * calendar, Android its calendar, a desktop browser its own. `value` is
  * always `YYYY-MM-DD`, or `""` while empty, whatever the field shows.
  *
- * What the field shows is the browser's decision: the date in the format
- * of the browser or device, not of the page, and no attribute changes
- * that. To show a date as text in the page's language, use `formatDate`:
+ * What the field shows is the browser's decision, unless it has a
+ * `locale`: without one, the date is in the format of the browser or
+ * device, not of the page, and no attribute changes that. To show a date
+ * as text in the page's language, use `formatDate`:
  *
  * ```svelte
  * <DateField label="Date" bind:value={date} min="2026-01-01" />
  * <p>{formatDate(date, "sv")}</p>  <!-- 6 okt. 2026 -->
  * ```
  *
+ * With `locale`, the field shows the value in that language and its own
+ * picker opens: a Calendar in a BottomSheet (at every width), with Clear
+ * unless the field is `required`. Until the page has run, and without
+ * scripts, it is the native input as above and submits as before; once
+ * it has, the native input stays as the form control, out of sight, and a
+ * button in its place shows the date. `picker="native"` opens the
+ * platform's own picker instead.
+ *
+ * ```svelte
+ * <DateField label="Datum" locale="sv" bind:value format={{ weekday: "short", day: "numeric", month: "short" }} />
+ * ```
+ *
  * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
  * `<input>`.
  */
@@ -47,6 +61,20 @@ type Props = Omit<HTMLInputAttributes, "class" | "type" | "value" | "size" | "mi
     size?: SizeVariant;
     /** Extra classes for the `<input>`. */
     class?: string;
+    /**
+     * Language of the field, as a BCP 47 tag (`sv`, `en-GB`) or a list of them. With it the
+     * field shows the value in that language, whatever the browser's is, and opens the
+     * library's own picker; see above. Left out, the field is the native input.
+     */
+    locale?: string | string[];
+    /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. Default: what formatDate gives for the locale. */
+    format?: Intl.DateTimeFormatOptions;
+    /** With `locale`: shown in the placeholder colour while the field is empty. */
+    placeholder?: string;
+    /** With `locale`: `library` (default) opens the library's calendar in a sheet; `native` opens the platform's own picker. */
+    picker?: "library" | "native";
+    /** With `locale`: the words the field says; replace any of them to translate. */
+    strings?: Partial<DateFieldStrings>;
 };
 declare const DateField: import("svelte").Component<Props, {}, "value">;
 type DateField = ReturnType<typeof DateField>;

package/dist/atoms/FloatingActionButton.svelte

@@ -20,7 +20,7 @@
      * <FloatingActionButton
      *     label="New quiz"
      *     onclick={create}
-     *     style="--fab-bottom-offset: 65px"
+     *     style="--fab-bottom-offset: 64px"
      * />
      * ```
      *
@@ -125,8 +125,8 @@
             extended ? "min-h-14 min-w-14" : "size-[56px]",
             // Transparent until forced-colors mode draws it: the fill is gone there.
             "border border-transparent",
-            "bg-action-primary text-action-primary",
-            "transition-[background-color,scale] duration-150 active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100",
+            "bg-action-primary bg-control-gradient text-action-primary",
+            "transition-[background-color,scale] duration-(--duration-base) active:scale-[0.96] motion-reduce:transition-none motion-reduce:active:scale-100",
             extended ? "px-5 py-2 text-sm font-medium" : "p-0",
             // Never wider than the screen it floats on, margins included.
             "[max-inline-size:calc(100%_-_32px)]",
@@ -156,6 +156,7 @@
         class={classes}
         aria-label={extended ? undefined : label}
         data-position={position}
+        data-toast-clear
         {...restProps}
     >
         {@render content()}
@@ -167,6 +168,7 @@
         class={classes}
         aria-label={extended ? undefined : label}
         data-position={position}
+        data-toast-clear
         {...restProps}
     >
         {@render content()}

package/dist/atoms/FloatingActionButton.svelte.d.ts

@@ -14,7 +14,7 @@ import type { HTMLAttributes } from "svelte/elements";
  * <FloatingActionButton
  *     label="New quiz"
  *     onclick={create}
- *     style="--fab-bottom-offset: 65px"
+ *     style="--fab-bottom-offset: 64px"
  * />
  * ```
  *