zabi-components 7.0.2 → 8.1.0

package/dist/atoms/TimeField.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { SizeVariant } from "../types/variants.js";
+    import TemporalField from "./TemporalField.svelte";
+
+    /**
+     * A time of day, picked with the device's own time picker and styled
+     * like Input.
+     *
+     * It is a native `<input type="time">`. `value` is always 24-hour
+     * `HH:mm` (`HH:mm:ss` when `step` asks for seconds), or `""` while empty,
+     * whatever the field shows.
+     *
+     * What the field shows is the browser's decision: 24-hour or 12-hour
+     * with AM and PM, by the settings of the browser or device, not of the
+     * page. To show a time as text in the page's language, use `formatTime`:
+     *
+     * ```svelte
+     * <TimeField label="Starts" bind:value={time} step={300} />
+     * <p>{formatTime(time, "sv")}</p>  <!-- 19:00 -->
+     * ```
+     *
+     * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
+     * `<input>`.
+     */
+    type Props = Omit<
+        HTMLInputAttributes,
+        "class" | "type" | "value" | "size" | "min" | "max" | "step" | "required" | "disabled" | "readonly" | "id" | "name"
+    > & {
+        /** Omit to auto-generate; pair with FormField's `id` when used inside FormField. */
+        id?: string;
+        /** The time as 24-hour `HH:mm`, or `""` while empty. Supports `bind:value`. */
+        value?: string;
+        /** Name the value is submitted under in a form. */
+        name?: string;
+        label?: string;
+        /** True when FormField supplies the visible `<label>`. */
+        hideLabel?: boolean;
+        /** Help text under the field, read out with it. */
+        hint?: string;
+        /** An error under the field. It marks the field invalid and is announced. */
+        error?: string;
+        /** Earliest time that can be picked, as `HH:mm`. */
+        min?: string;
+        /** Latest time that can be picked, as `HH:mm`. */
+        max?: string;
+        /** Steps between times that can be picked, in seconds: 300 for five minutes. */
+        step?: number | "any";
+        required?: boolean;
+        disabled?: boolean;
+        /** Shows the value without letting it be changed; it is still submitted. */
+        readonly?: boolean;
+        /** Height, on the scale Input and Button use. At least 44px on a touch screen. */
+        size?: SizeVariant;
+        /** Extra classes for the `<input>`. */
+        class?: string;
+    };
+
+    let {
+        id,
+        value = $bindable<Exclude<Props["value"], undefined>>(),
+        name = "",
+        label = "",
+        hideLabel = false,
+        hint = "",
+        error = "",
+        min,
+        max,
+        step,
+        required = false,
+        disabled = false,
+        readonly = false,
+        size = "md",
+        class: className = "",
+        ...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);
+</script>
+
+<TemporalField
+    kind="time"
+    {id}
+    bind:value
+    {name}
+    {label}
+    {hideLabel}
+    {hint}
+    {error}
+    {min}
+    {max}
+    {step}
+    {required}
+    {disabled}
+    {readonly}
+    {size}
+    class={className}
+    {...restProps}
+/>

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

@@ -0,0 +1,54 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { SizeVariant } from "../types/variants.js";
+/**
+ * A time of day, picked with the device's own time picker and styled
+ * like Input.
+ *
+ * It is a native `<input type="time">`. `value` is always 24-hour
+ * `HH:mm` (`HH:mm:ss` when `step` asks for seconds), or `""` while empty,
+ * whatever the field shows.
+ *
+ * What the field shows is the browser's decision: 24-hour or 12-hour
+ * with AM and PM, by the settings of the browser or device, not of the
+ * page. To show a time as text in the page's language, use `formatTime`:
+ *
+ * ```svelte
+ * <TimeField label="Starts" bind:value={time} step={300} />
+ * <p>{formatTime(time, "sv")}</p>  <!-- 19:00 -->
+ * ```
+ *
+ * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
+ * `<input>`.
+ */
+type Props = Omit<HTMLInputAttributes, "class" | "type" | "value" | "size" | "min" | "max" | "step" | "required" | "disabled" | "readonly" | "id" | "name"> & {
+    /** Omit to auto-generate; pair with FormField's `id` when used inside FormField. */
+    id?: string;
+    /** The time as 24-hour `HH:mm`, or `""` while empty. Supports `bind:value`. */
+    value?: string;
+    /** Name the value is submitted under in a form. */
+    name?: string;
+    label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
+    /** Help text under the field, read out with it. */
+    hint?: string;
+    /** An error under the field. It marks the field invalid and is announced. */
+    error?: string;
+    /** Earliest time that can be picked, as `HH:mm`. */
+    min?: string;
+    /** Latest time that can be picked, as `HH:mm`. */
+    max?: string;
+    /** Steps between times that can be picked, in seconds: 300 for five minutes. */
+    step?: number | "any";
+    required?: boolean;
+    disabled?: boolean;
+    /** Shows the value without letting it be changed; it is still submitted. */
+    readonly?: boolean;
+    /** Height, on the scale Input and Button use. At least 44px on a touch screen. */
+    size?: SizeVariant;
+    /** Extra classes for the `<input>`. */
+    class?: string;
+};
+declare const TimeField: import("svelte").Component<Props, {}, "value">;
+type TimeField = ReturnType<typeof TimeField>;
+export default TimeField;

package/dist/atoms/Toast.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+    import { DEFAULT_TOAST_TEXTS, zabiStringsFor } from "../util/zabi-strings.js";
+    import { cn } from "../util/cn.js";
+    import { TOUCH_HIT_AREA } from "../util/touch-target.js";
+
     interface Props {
         message?: string;
         type?: 'success' | 'error' | 'warning' | 'info';
         closable?: boolean;
+        /** Accessible name of the close button. */
+        closeLabel?: string;
         onclick?: (event: Event) => void;
         class?: string;
         /** `viewport`: fixed corner; `inline`: block in flow (e.g. demos). */
@@ -13,23 +19,29 @@
         message = '',
         type = 'info',
         closable = true,
+        closeLabel: closeLabelGiven,
         onclick,
         class: className = '',
         layout = 'viewport',
         ...restProps
     }: Props = $props();
 
+    /** Each text: the prop, else the app-wide word from a `ZabiStringsProvider` above this one, else English. */
+    const provided = zabiStringsFor("toast");
+    const closeLabel = $derived(closeLabelGiven ?? provided()?.closeLabel ?? DEFAULT_TOAST_TEXTS.closeLabel);
+
     let isVisible = $state(true);
 
     const typeClasses: Record<NonNullable<Props['type']>, string> = {
-        success: 'border-success bg-card text-success',
-        error: 'border-error bg-card text-error',
-        warning: 'border-warning bg-card text-warning',
-        info: 'border-border bg-card text-body',
+        success: 'border-success bg-surface-overlay text-success',
+        error: 'border-error bg-surface-overlay text-error',
+        warning: 'border-warning bg-surface-overlay text-warning',
+        info: 'border-border bg-surface-overlay text-body',
     };
 
+    // `min(18rem, 100%)`: 18rem is wider than a 320px screen once the text is enlarged.
     const cardClasses =
-        'box-border w-full min-w-[18rem] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-lg border p-4 shadow-lg';
+        'box-border w-full min-w-[min(18rem,100%)] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-control border p-4 shadow-lg';
 
     function closeToast(event: Event) {
         isVisible = false;
@@ -44,11 +56,14 @@
         </div>
 
         {#if closable}
+            <!-- `px-1` on a touch screen: the 44px layer is centred on the
+            button, and around a button as narrow as the glyph it reached a
+            pixel past what the card clips. -->
             <button
                 type="button"
-                class="focus-ring shrink-0 cursor-pointer rounded-md text-description hover:text-headline focus:outline-none"
+                class="focus-ring pointer-coarse:relative shrink-0 cursor-pointer rounded-control text-description hover:text-headline active:text-headline focus:outline-none pointer-coarse:px-1 {TOUCH_HIT_AREA}"
                 onclick={closeToast}
-                aria-label="Close notification"
+                aria-label={closeLabel}
             >
                 ×
             </button>
@@ -59,10 +74,10 @@
 {#if isVisible}
     {#if layout === 'viewport'}
         <div
-            class="pointer-events-none fixed top-4 right-4 left-4 z-toast flex justify-end sm:left-auto"
+            class="pointer-events-none fixed top-[calc(max(var(--app-shell-top-inset,0px),env(safe-area-inset-top,0px))_+_1rem)] right-[calc(env(safe-area-inset-right,0px)_+_1rem)] left-[calc(env(safe-area-inset-left,0px)_+_1rem)] z-toast flex justify-end sm:left-auto"
         >
             <div
-                class="pointer-events-auto {cardClasses} {typeClasses[type]} {className}"
+                class={cn("pointer-events-auto", cardClasses, typeClasses[type], className)}
                 role="alert"
                 {...restProps}
             >
@@ -71,7 +86,7 @@
         </div>
     {:else}
         <div
-            class="relative z-toast mx-auto {cardClasses} {typeClasses[type]} {className}"
+            class={cn("relative z-toast mx-auto", cardClasses, typeClasses[type], className)}
             role="alert"
             {...restProps}
         >

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

@@ -2,6 +2,8 @@ interface Props {
     message?: string;
     type?: 'success' | 'error' | 'warning' | 'info';
     closable?: boolean;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
     onclick?: (event: Event) => void;
     class?: string;
     /** `viewport`: fixed corner; `inline`: block in flow (e.g. demos). */

package/dist/atoms/Toggle.svelte

@@ -1,26 +1,65 @@
 <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>`. */
+        id?: string;
+        /** When set, a hidden input submits `value` with native forms while checked. */
+        name?: string;
+        value?: string;
         checked?: boolean;
         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 {
-        checked = $bindable(false),
+        class: className = "",
+        id: idProp,
+        name = "",
+        value = "on",
+        checked = $bindable<Exclude<Props["checked"], undefined>>(),
         disabled = false,
         loading = false,
         label = "",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
         onclick,
         onchange,
         ...restProps
     }: Props = $props();
 
-    const toggleId = generateId("toggle");
+    // 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);
 
     function handleClick(event: MouseEvent) {
@@ -33,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-base-400 hover:bg-base-500 active:bg-base-500";
+            : 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";
@@ -45,44 +87,43 @@
 
     const toggleThumbClasses = $derived(() => {
         const base =
-            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow transition-transform duration-200 ease-in-out flex items-center justify-center";
+            "pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-card shadow-sm transition-transform duration-200 ease-in-out flex items-center justify-center";
         const positionClasses = checked ? "translate-x-4" : "translate-x-0";
         return `${base} ${positionClasses}`;
     });
-
-    function handleKeydown(event: KeyboardEvent) {
-        if (isDisabled) return;
-        if (event.key === " " || event.key === "Enter") {
-            event.preventDefault();
-            handleClick(event as unknown as MouseEvent);
-        }
-    }
 </script>
 
-<div class="flex items-center gap-3">
+<!-- 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}
-        onkeydown={handleKeydown}
         class={toggleButtonClasses()}
         {...restProps}
     >
         <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}
         </span>
     </button>
 
+    {#if name && checked}
+        <input type="hidden" {name} {value} />
+    {/if}
+
     {#if label}
         <label
             for={toggleId}

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

@@ -1,13 +1,29 @@
-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>`. */
+    id?: string;
+    /** When set, a hidden input submits `value` with native forms while checked. */
+    name?: string;
+    value?: string;
     checked?: boolean;
     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;