zabi-components 8.0.0 → 8.1.0

package/dist/atoms/Toggle.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+    import type { HTMLButtonAttributes } from "svelte/elements";
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
+    import { TOUCH_HIT_AREA } from "../util/touch-target.js";
 
-    interface Props {
+    /** Other attributes (`data-*`, `aria-*`, ...) land on the switch, which is a `<button>`. */
+    type Props = Omit<
+        HTMLButtonAttributes,
+        "class" | "id" | "name" | "value" | "disabled" | "type" | "role" | "onclick" | "onchange" | "children"
+    > & {
         /** Extra classes for the host element. */
         class?: string;
         /** Omit to auto-generate; pass to pair with an external `<label for>`. */
@@ -14,24 +20,44 @@
         disabled?: boolean;
         loading?: boolean;
         label?: string;
+        /**
+         * The switch's accessible name when there is no visible `label`. With
+         * neither this, `aria-labelledby` nor `label`, it is called "Toggle".
+         */
+        "aria-label"?: string;
+        /** The id of an element of the page that names the switch. */
+        "aria-labelledby"?: string;
         onclick?: (event: MouseEvent) => void;
         onchange?: (event: { checked: boolean }) => void;
-    }
+    };
 
     let {
         class: className = "",
         id: idProp,
         name = "",
         value = "on",
-        checked = $bindable(false),
+        checked = $bindable<Exclude<Props["checked"], undefined>>(),
         disabled = false,
         loading = false,
         label = "",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
         onclick,
         onchange,
         ...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 (checked === undefined) checked = false;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
     const fallbackId = generateId("toggle");
     const toggleId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
@@ -46,10 +72,13 @@
 
     const toggleButtonClasses = $derived(() => {
         const base =
-            "focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:outline-none";
+            `focus-ring relative inline-flex w-10 h-6 flex-shrink-0 rounded-full border-0 transition-colors duration-200 ease-in-out focus:outline-none focus-visible:outline-none ${TOUCH_HIT_AREA}`;
+        // A disabled switch has no hover or pressed fill: `:active` still matches a disabled button.
         const colorClass = checked
             ? "bg-action-primary hover:bg-action-primary-hover active:bg-action-primary-active"
-            : "bg-control-track hover:bg-control-track-hover active:bg-control-track-active";
+            : isDisabled
+              ? "bg-control-track"
+              : "bg-control-track hover:bg-control-track-hover active:bg-control-track-active";
         const stateClass = isDisabled
             ? "opacity-50 cursor-not-allowed"
             : "cursor-pointer";
@@ -64,13 +93,17 @@
     });
 </script>
 
-<div class={cn("flex items-center gap-3", className)}>
+<!-- On a coarse pointer the row is 44px tall, so the switch's hit area (44px, around a
+     24px switch) has room of its own: stacked 8px apart, the layer of one switch lay
+     over the visible edge of the one above it and took its taps. -->
+<div class={cn("flex items-center gap-3 pointer-coarse:min-h-11", className)}>
     <button
         type="button"
         role="switch"
         id={toggleId}
         aria-checked={checked}
-        aria-label={label ? undefined : "Toggle"}
+        aria-label={ariaLabel ?? (label || ariaLabelledby ? undefined : "Toggle")}
+        aria-labelledby={ariaLabelledby}
         aria-busy={loading ? "true" : undefined}
         disabled={isDisabled}
         onclick={handleClick}
@@ -80,7 +113,7 @@
         <span class={toggleThumbClasses()}>
             {#if loading}
                 <span
-                    class="inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-brand-500 border-t-transparent"
+                    class="inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent text-brand-500 motion-reduce:animate-pulse"
                     aria-hidden="true"
                 ></span>
             {/if}

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

@@ -1,4 +1,6 @@
-interface Props {
+import type { HTMLButtonAttributes } from "svelte/elements";
+/** Other attributes (`data-*`, `aria-*`, ...) land on the switch, which is a `<button>`. */
+type Props = Omit<HTMLButtonAttributes, "class" | "id" | "name" | "value" | "disabled" | "type" | "role" | "onclick" | "onchange" | "children"> & {
     /** Extra classes for the host element. */
     class?: string;
     /** Omit to auto-generate; pass to pair with an external `<label for>`. */
@@ -10,11 +12,18 @@ interface Props {
     disabled?: boolean;
     loading?: boolean;
     label?: string;
+    /**
+     * The switch's accessible name when there is no visible `label`. With
+     * neither this, `aria-labelledby` nor `label`, it is called "Toggle".
+     */
+    "aria-label"?: string;
+    /** The id of an element of the page that names the switch. */
+    "aria-labelledby"?: string;
     onclick?: (event: MouseEvent) => void;
     onchange?: (event: {
         checked: boolean;
     }) => void;
-}
+};
 declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;