zabi-components 8.0.0 → 8.1.0

package/dist/atoms/Input.svelte

@@ -1,10 +1,37 @@
 <script lang="ts">
-    import { CheckCircle, AlertTriangle, AlertCircle } from "@lucide/svelte";
+    import { zabiCommonStrings } from "../util/zabi-strings.js";
+    import Eye from "@lucide/svelte/icons/eye";
+    import EyeOff from "@lucide/svelte/icons/eye-off";
+    import { tick, type Snippet } from "svelte";
+    import type { HTMLInputAttributes } from "svelte/elements";
     import type { SemanticVariant, SizeVariant } from "../types/variants.js";
-    import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
+    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import { TOUCH_HIT_AREA } from "../util/touch-target.js";
+    import FieldMessages from "./FieldMessages.svelte";
+    import IconButton from "./IconButton.svelte";
 
-    interface Props {
+    /**
+     * Other attributes (`autocomplete`, `inputmode`, `maxlength`,
+     * `enterkeyhint`, `data-*`, `onchange`, ...) land on the `<input>`.
+     */
+    type Props = Omit<
+        HTMLInputAttributes,
+        | "class"
+        | "size"
+        | "value"
+        | "type"
+        | "id"
+        | "name"
+        | "placeholder"
+        | "required"
+        | "disabled"
+        | "oninput"
+        | "onblur"
+        | "aria-label"
+        | "aria-describedby"
+    > & {
         /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
         id?: string;
         value?: string;
@@ -20,15 +47,39 @@
         loading?: boolean;
         size?: SizeVariant;
         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;
+        /**
+         * Drawn inside the field, before the text: an icon, a unit. Decoration
+         * lets a press through to the field; a button or link in it is pressable.
+         */
+        leading?: Snippet;
+        /** Drawn inside the field, after the text and before the loading spinner's place. */
+        trailing?: Snippet;
+        /**
+         * With `type="password"`: adds a button at the end of the field that
+         * shows the password as text, and hides it again. Ignored for other types.
+         */
+        revealable?: boolean;
+        /**
+         * Accessible name of that button. It stays the same in both states;
+         * the button's pressed state says whether the password is showing.
+         */
+        revealLabel?: string;
         oninput?: (event: Event) => void;
         onblur?: (event: Event) => void;
         "aria-label"?: string;
-    }
+        /** Ids of other elements that describe the field. The hint and the message are added after them. */
+        "aria-describedby"?: string | null;
+    };
 
     let {
         id: idProp,
-        value = $bindable(""),
+        value = $bindable<Exclude<Props["value"], undefined>>(),
         type = "text",
         name = "",
         class: className = "",
@@ -41,43 +92,161 @@
         size = "md",
         variant = "default",
         message = "",
+        hint = "",
+        error = "",
+        leading,
+        trailing,
+        revealable = false,
+        revealLabel: revealLabelGiven,
         oninput,
         onblur,
+        "aria-describedby": describedBy,
         ...restProps
     }: Props = $props();
 
+    // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
+    // one that has a fallback (`props_invalid_value`), and a page that throws
+    // while it hydrates never becomes interactive. The default is applied
+    // here instead: at once, for the server and the first render, and again
+    // whenever a parent hands back `undefined`.
+    const applyDefaults = () => {
+        if (value === undefined) value = "";
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
+    const common = zabiCommonStrings();
+    const revealLabel = $derived(revealLabelGiven ?? common().showPassword);
+
     const fallbackId = generateId("input");
     const inputId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
+    const status = $derived(fieldMessageState({ variant, message, hint, error }));
+
+    /** Only a password can be revealed: on any other type the button would have nothing to do. */
+    const canReveal = $derived(revealable && type === "password");
+    let revealed = $state(false);
+    const shownType = $derived(canReveal && revealed ? "text" : type);
+
+    let input: HTMLInputElement | undefined = $state();
+
+    /**
+     * Changing `type` can drop the caret in some browsers. When the field has
+     * focus (a mouse or a finger pressed the button: see `keepFocus`), the
+     * selection is put back where it was.
+     */
+    async function restoreCaret() {
+        const field = input;
+        if (!field || document.activeElement !== field) return;
+        const { selectionStart, selectionEnd, selectionDirection } = field;
+        if (selectionStart === null || selectionEnd === null) return;
+        const restore = () => {
+            if (document.activeElement !== field) return;
+            try {
+                field.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? undefined);
+            } catch {
+                // A type without a text selection: nothing to put back.
+            }
+        };
+        await tick();
+        restore();
+        // Chromium moves the caret to the start once more after the type has
+        // changed, so it is put back again when the frame is done.
+        requestAnimationFrame(restore);
+    }
+
+    /**
+     * A press with a pointer does not take focus from the field: on a phone
+     * that would close the keyboard in the middle of typing a password. From
+     * the keyboard the button has focus and keeps it.
+     */
+    function keepFocus(event: Event) {
+        event.preventDefault();
+    }
+
     /**
      * Same fixed height scale as Button, IconButton and Select (32 / 40 / 48),
      * so a field and its submit button are the same height in a row. These
      * used to be 38 / 46 / 50 while Button was 40 / 48 / 64.
+     *
+     * Below the `sm` breakpoint the text is 16px at every size: iOS Safari
+     * zooms the page when a focused field is smaller. Only the font grows;
+     * the box keeps its height.
      */
     const sizeClass = $derived(() => {
         if (size === "sm") {
-            return { box: "h-8 px-3", text: "text-sm", spinner: "size-3.5" };
+            return { box: "h-8 px-3 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", spinner: "size-3.5" };
         } else if (size === "lg") {
             return { box: "h-12 px-4", text: "text-base", spinner: "size-5" };
         } else {
-            return { box: "h-10 px-3", text: "text-sm", spinner: "size-4" };
+            return { box: "h-10 px-3 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", spinner: "size-4" };
         }
     });
 
+    /**
+     * What stands inside the field at either end sits in a slot 4px in from
+     * the field's edge and 8px smaller than the field: 24, 32 and 40px. An
+     * icon is centred in it, which puts it where the text's own padding would;
+     * a button fills it.
+     */
+    const SLOT_INSET = 4;
+    const SLOTS = {
+        sm: { px: 24, min: "min-w-[24px]", reveal: "xs", icon: 14 },
+        md: { px: 32, min: "min-w-[32px]", reveal: "sm", icon: 16 },
+        lg: { px: 40, min: "min-w-[40px]", reveal: "md", icon: 16 },
+    } as const;
+    const slot = $derived(SLOTS[size].px);
+    const slotClass = $derived(SLOTS[size].min);
+    /** The reveal button is one size down from the field, so it fits the slot: 24, 32 and 40px. */
+    const revealSize = $derived(SLOTS[size].reveal);
+
+    const hasLeading = $derived(!!leading);
+    /** Whether the end of the field holds more than the spinner. */
+    const hasTrailing = $derived(!!trailing || canReveal);
+
+    /** Measured once mounted; until then, and on the server, the slots are assumed to be their least size. */
+    let leadingWidth = $state(0);
+    let trailingWidth = $state(0);
+
+    /**
+     * Reports the width of what stands at one end of the field, and again
+     * when it changes. Where there is no `ResizeObserver` (an old browser, a
+     * test without layout) the assumed size stays.
+     */
+    function measured(report: (width: number) => void) {
+        return (element: HTMLElement) => {
+            if (typeof ResizeObserver === "undefined") return;
+            const observer = new ResizeObserver(() => report(element.offsetWidth));
+            observer.observe(element);
+            return () => observer.disconnect();
+        };
+    }
+    const trailingCount = $derived((trailing ? 1 : 0) + (canReveal ? 1 : 0) + (loading ? 1 : 0));
+    const leadingPad = $derived(
+        hasLeading ? `${(leadingWidth || SLOT_INSET + slot) + SLOT_INSET}px` : undefined,
+    );
+    const trailingPad = $derived(
+        hasTrailing
+            ? `${(trailingWidth || SLOT_INSET + trailingCount * slot + (trailingCount - 1) * SLOT_INSET) + SLOT_INSET}px`
+            : undefined,
+    );
+
     const variantClass = $derived(() => {
-        return variant === "success"
+        return status.variant === "success"
             ? "border-success focus-visible:border-success"
-            : variant === "warning"
+            : status.variant === "warning"
               ? "border-warning focus-visible:border-warning"
-              : variant === "error"
+              : status.variant === "error"
                 ? "border-error focus-visible:border-error"
-                : "border-input-border focus-visible:border-input-border";
+                : "border-input-border enabled:hover:border-input-border-hover focus-visible:border-input-border";
     });
 
     const inputClasses = $derived(() => {
         const sizeStyles = sizeClass();
-        const trailingPad = loading ? (size === "sm" ? "pr-9" : "pr-10") : "";
+        // Room for the spinner alone. With more at the end, the measured width is used instead.
+        const spinnerPad = loading && !hasTrailing ? SPINNER_PAD[size] : "";
         /**
          * The field is a raised surface (`bg-input` = white in light, an inset
          * step in dark). It used to be a grey fill on a grey page, which read
@@ -87,29 +256,22 @@
         const baseClasses =
             "focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed";
 
-        return cn(`${baseClasses} ${sizeStyles.box} ${trailingPad} ${sizeStyles.text} ${variantClass()} ${className}`);
+        return cn(`${baseClasses} ${sizeStyles.box} ${spinnerPad} ${sizeStyles.text} ${variantClass()} ${className}`);
     });
 
     const labelClasses = $derived(
         () => "block text-sm font-medium text-label mb-2",
     );
 
-    // Message text uses the `-text` step (700), which clears 4.5:1 on a page
-    // surface; the solid fill step (600) is for fills, not for small text.
-    const messageClasses = $derived(() => {
-        const base = "text-sm mt-2 flex items-center gap-2";
-        if (variant === "error") return `text-error-text ${base}`;
-        if (variant === "success") return `text-success-text ${base}`;
-        if (variant === "warning") return `text-warning-text ${base}`;
-        return `text-description ${base}`;
-    });
+    /**
+     * Both ends are laid over the field, which stays one box with one focus
+     * ring. They let a press through to it, except on something in them that
+     * can itself be pressed.
+     */
+    const SPINNER_PAD = { sm: "pe-9", md: "pe-10", lg: "pe-10" } as const;
 
-    const getIcon = $derived(() => {
-        if (variant === "error") return AlertCircle;
-        if (variant === "success") return CheckCircle;
-        if (variant === "warning") return AlertTriangle;
-        return null;
-    });
+    const END_BASE =
+        "pointer-events-none absolute inset-y-0 flex items-center gap-[4px] text-description [&_:is(a,button,input,select,textarea,[tabindex])]:pointer-events-auto";
 
     function handleInput(event: Event) {
         if (oninput) {
@@ -124,46 +286,85 @@
     {/if}
     <div class="relative">
         <input
+            bind:this={input}
             id={inputId}
-            {type}
+            type={shownType}
             {name}
             bind:value
             {placeholder}
             {required}
             disabled={isDisabled}
             class={inputClasses()}
+            style:padding-inline-start={leadingPad}
+            style:padding-inline-end={trailingPad}
             oninput={handleInput}
             {onblur}
-            aria-invalid={variant === "error" ? "true" : undefined}
+            aria-invalid={status.variant === "error" ? "true" : undefined}
             aria-required={required ? "true" : undefined}
             aria-busy={loading ? "true" : undefined}
-            aria-describedby={message ? `${inputId}-message` : undefined}
+            aria-describedby={fieldDescribedBy(inputId, status, describedBy)}
             {...restProps}
         />
-        {#if loading}
+        {#if leading}
             <span
-                class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-description"
-                aria-hidden="true"
+                class={cn(END_BASE, "start-0 ps-[4px]")}
+                {@attach measured((width) => (leadingWidth = width))}
+                data-input-leading
             >
-                <span
-                    class="inline-block {sizeClass()
-                        .spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
-                ></span>
+                <span class={cn("flex items-center justify-center", slotClass)}>
+                    {@render leading()}
+                </span>
+            </span>
+        {/if}
+        {#if loading || hasTrailing}
+            <span
+                class={cn(END_BASE, "end-0 pe-[4px]")}
+                {@attach measured((width) => (trailingWidth = width))}
+                data-input-trailing
+            >
+                {#if trailing}
+                    <span class={cn("flex items-center justify-center", slotClass)}>
+                        {@render trailing()}
+                    </span>
+                {/if}
+                {#if canReveal}
+                    <!-- A toggle with one name: "Show password", pressed or not.
+                    A name that changed with the state would read as "Hide
+                    password, pressed". The visible box is 4px inside the field
+                    at every size, so its corners are the field's less 4px; on a
+                    touch screen the layer around it is the 44px target. -->
+                    <IconButton
+                        variant="ghost"
+                        size={revealSize}
+                        bind:pressed={revealed}
+                        label={revealLabel}
+                        disabled={isDisabled}
+                        class={cn(
+                            "rounded-[calc(var(--radius-control)-4px)] pointer-coarse:relative pointer-coarse:min-h-0 pointer-coarse:min-w-0",
+                            TOUCH_HIT_AREA,
+                        )}
+                        onmousedown={keepFocus}
+                        onclick={restoreCaret}
+                        data-input-reveal
+                    >
+                        {#if revealed}
+                            <EyeOff size={SLOTS[size].icon} aria-hidden="true" />
+                        {:else}
+                            <Eye size={SLOTS[size].icon} aria-hidden="true" />
+                        {/if}
+                    </IconButton>
+                {/if}
+                {#if loading}
+                    <!-- 12px from the field's edge, where it has always been. -->
+                    <span class="flex items-center ps-[4px] pe-[8px]" aria-hidden="true">
+                        <span
+                            class="inline-block {sizeClass()
+                                .spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70 motion-reduce:animate-pulse"
+                        ></span>
+                    </span>
+                {/if}
             </span>
         {/if}
     </div>
-    {#if message && variant !== "default"}
-        <p
-            id={`${inputId}-message`}
-            class={messageClasses()}
-            role={variant === "error" ? "alert" : "status"}
-            aria-live={variant === "error" ? "assertive" : "polite"}
-        >
-            {#if getIcon()}
-                {@const Icon = getIcon()}
-                <Icon size={14} class="shrink-0" />
-            {/if}
-            <span>{message}</span>
-        </p>
-    {/if}
+    <FieldMessages fieldId={inputId} {status} {hint} />
 </div>

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

@@ -1,5 +1,11 @@
+import { type Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
 import type { SemanticVariant, SizeVariant } from "../types/variants.js";
-interface Props {
+/**
+ * Other attributes (`autocomplete`, `inputmode`, `maxlength`,
+ * `enterkeyhint`, `data-*`, `onchange`, ...) land on the `<input>`.
+ */
+type Props = Omit<HTMLInputAttributes, "class" | "size" | "value" | "type" | "id" | "name" | "placeholder" | "required" | "disabled" | "oninput" | "onblur" | "aria-label" | "aria-describedby"> & {
     /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
     id?: string;
     value?: string;
@@ -15,11 +21,35 @@ interface Props {
     loading?: boolean;
     size?: SizeVariant;
     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;
+    /**
+     * Drawn inside the field, before the text: an icon, a unit. Decoration
+     * lets a press through to the field; a button or link in it is pressable.
+     */
+    leading?: Snippet;
+    /** Drawn inside the field, after the text and before the loading spinner's place. */
+    trailing?: Snippet;
+    /**
+     * With `type="password"`: adds a button at the end of the field that
+     * shows the password as text, and hides it again. Ignored for other types.
+     */
+    revealable?: boolean;
+    /**
+     * Accessible name of that button. It stays the same in both states;
+     * the button's pressed state says whether the password is showing.
+     */
+    revealLabel?: string;
     oninput?: (event: Event) => void;
     onblur?: (event: Event) => void;
     "aria-label"?: string;
-}
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    "aria-describedby"?: string | null;
+};
 declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/atoms/List.svelte

@@ -32,7 +32,10 @@
     const className = $derived(cn(`${classAttr} ${legacyClass}`));
 
     const listClasses = $derived(
-        cn(`space-y-1 overflow-hidden rounded-container ${className}`),
+        // The same radius as its rows. Not `overflow-hidden`: the rows fill
+        // the list edge to edge, so clipping here cut a row's focus ring off
+        // on every side but the gap to the next row.
+        cn(`space-y-1 rounded-[var(--zabi-list-row-radius,var(--radius-container))] ${className}`),
     );
 </script>
 

package/dist/atoms/ListItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowRight } from "@lucide/svelte";
+    import ArrowRight from "@lucide/svelte/icons/arrow-right";
     import type { Component, Snippet } from "svelte";
     import ListItemLeading from "./ListItemLeading.svelte";
 
@@ -21,9 +21,14 @@
     interface Props {
         item: ListItemData;
         selected?: boolean;
+        /** The arrow at the end of a row that can be pressed. A row with nothing to do never has one. */
         showArrow?: boolean;
         /** Shown before the chevron when `showArrow` is true. */
         trailing?: Snippet;
+        /**
+         * Called when the row is pressed. A row with neither this nor
+         * `item.href` has nothing to do: it is plain content, not a button.
+         */
         onclick?: (item: ListItemData, event: MouseEvent) => void;
     }
 
@@ -36,16 +41,37 @@
         ...restProps
     }: Props = $props();
 
+    /**
+     * A row is a link with `item.href`, a button with `onclick`, and otherwise
+     * plain content: it used to be a focusable button with a pointer cursor
+     * and an arrow, and nothing happened when it was pressed.
+     */
+    const interactive = $derived(!!item.href || !!onclick);
+
     const itemClasses = $derived.by(() => {
         const baseClasses =
-            "group focus-ring flex w-full items-center gap-3 rounded-container border border-border px-4 py-3 pr-5 text-left transition-all duration-150";
-        const interactiveClasses = item.disabled
-            ? "cursor-not-allowed opacity-50"
-            : "cursor-pointer focus-visible:bg-surface-hover";
-        const selectedClasses = selected
-            ? "bg-action-primary-subtle border-brand-500"
-            : "";
-        return `${baseClasses} ${interactiveClasses} ${selectedClasses}`.trim();
+            // The container radius, or the one a `.list-group` shell around the list
+        // hands down so the row is concentric with it (see app.css).
+        "group flex w-full items-center gap-3 rounded-[var(--zabi-list-row-radius,var(--radius-container))] border px-4 py-3 pr-5 text-left transition-all duration-150";
+        if (!interactive) {
+            const tone = selected ? "bg-action-primary-subtle border-action-primary" : "border-border";
+            return `${baseClasses} ${tone} ${item.disabled ? "opacity-50" : ""}`.trim();
+        }
+        const cursorClasses = item.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer";
+        // A selected row keeps its fill under keyboard focus, which the focus
+        // ring already shows; the hover tint is for rows with no fill. The two
+        // never share an element, and neither does the selected border with
+        // `border-border`: beside each other the second of each pair lost.
+        //
+        // Hover is for a pointer that can hover (the hand-written rule is
+        // gated on it, so the tint does not stay on after a tap); the pressed
+        // fill is for every pointer, and is what a finger sees.
+        const stateClasses = selected
+            ? "bg-action-primary-subtle border-action-primary active:bg-action-primary-subtle-active"
+            : item.disabled
+              ? "border-border"
+              : "border-border hover:bg-surface-hover focus-visible:bg-surface-hover active:bg-surface-active";
+        return `focus-ring ${baseClasses} ${cursorClasses} ${stateClasses}`.trim();
     });
 
     const ariaCurrent = $derived(item.href && selected ? "page" : undefined);
@@ -101,7 +127,7 @@
             {@render trailing()}
         </span>
     {/if}
-    {#if showArrow}
+    {#if showArrow && interactive}
         <ArrowRight
             size={16}
             class="shrink-0 text-description transition-transform duration-150 group-hover:translate-x-1 group-focus-visible:translate-x-1"
@@ -124,7 +150,7 @@
     >
         {@render rowContent()}
     </a>
-{:else}
+{:else if onclick}
     <button
         type="button"
         class={itemClasses}
@@ -134,4 +160,11 @@
     >
         {@render rowContent()}
     </button>
+{:else}
+    <!-- A plain row has no role, so `aria-disabled` on it would say nothing
+    to anyone: a disabled one is only drawn dimmed. There is nothing in it to
+    press, enabled or not. -->
+    <div class={itemClasses} {...restProps}>
+        {@render rowContent()}
+    </div>
 {/if}

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

@@ -19,9 +19,14 @@ export interface ListItemData {
 interface Props {
     item: ListItemData;
     selected?: boolean;
+    /** The arrow at the end of a row that can be pressed. A row with nothing to do never has one. */
     showArrow?: boolean;
     /** Shown before the chevron when `showArrow` is true. */
     trailing?: Snippet;
+    /**
+     * Called when the row is pressed. A row with neither this nor
+     * `item.href` has nothing to do: it is plain content, not a button.
+     */
     onclick?: (item: ListItemData, event: MouseEvent) => void;
 }
 declare const ListItem: Component<Props, {}, "">;

package/dist/atoms/Progress.svelte

@@ -8,6 +8,10 @@
         max?: number;
         size?: "sm" | "md" | "lg";
         label?: string;
+        /** Names the progressbar when there is no visible `label`. Reaches the element with role="progressbar". */
+        "aria-label"?: string;
+        /** Points the progressbar at another element's id for its name. Reaches the element with role="progressbar". */
+        "aria-labelledby"?: string;
     }
 
     let {
@@ -16,12 +20,24 @@
         max = 100,
         size = "md",
         label = "",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
         ...restProps
     }: Props = $props();
 
     const progressId = generateId("progress");
+    const labelId = `${progressId}-label`;
 
-    let percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+    // A max that is not a positive, finite number would give an empty or full
+    // bar with aria-valuemax=0: fall back to the default.
+    let safeMax = $derived(Number.isFinite(max) && max > 0 ? max : 100);
+    let safeValue = $derived(
+        Number.isFinite(value) ? Math.min(Math.max(value, 0), safeMax) : 0,
+    );
+    let percentage = $derived((safeValue / safeMax) * 100);
+    let labelledby = $derived(
+        ariaLabelledby ?? (ariaLabel || !label ? undefined : labelId),
+    );
 
     let sizeClasses = $derived({
         sm: "h-1",
@@ -33,8 +49,10 @@
 <div class={className} {...restProps}>
     {#if label}
         <div class="flex justify-between items-center mb-2">
-            <label for={progressId} class="text-sm font-medium text-label"
-                >{label}</label
+            <!-- A span named through aria-labelledby, not a label: `for` only
+            names form controls, so it left the progressbar without a name. -->
+            <span id={labelId} class="text-sm font-medium text-label"
+                >{label}</span
             >
             <span class="text-sm text-caption">{Math.round(percentage)}%</span>
         </div>
@@ -42,15 +60,16 @@
 
     <div
         id={progressId}
-        class="w-full border border-input-border bg-input rounded-full overflow-hidden {sizeClasses[size]}"
+        class="w-full border border-input-border bg-progress-track rounded-full overflow-hidden {sizeClasses[size]}"
         role="progressbar"
-        aria-valuenow={value}
+        aria-label={ariaLabel}
+        aria-labelledby={labelledby}
+        aria-valuenow={safeValue}
         aria-valuemin="0"
-        aria-valuemax={max}
-        {...restProps}
+        aria-valuemax={safeMax}
     >
         <div
-            class="h-full bg-brand-600 rounded-full"
+            class="h-full bg-progress-fill rounded-full"
             style="width: {percentage}%"
         ></div>
     </div>

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

@@ -5,6 +5,10 @@ interface Props {
     max?: number;
     size?: "sm" | "md" | "lg";
     label?: string;
+    /** Names the progressbar when there is no visible `label`. Reaches the element with role="progressbar". */
+    "aria-label"?: string;
+    /** Points the progressbar at another element's id for its name. Reaches the element with role="progressbar". */
+    "aria-labelledby"?: string;
 }
 declare const Progress: import("svelte").Component<Props, {}, "">;
 type Progress = ReturnType<typeof Progress>;