zabi-components 8.0.0 → 9.0.0

package/dist/atoms/ColorPicker.svelte

@@ -1,6 +1,18 @@
 <script lang="ts">
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
     import Input from "./Input.svelte";
-    import { onMount, onDestroy, tick } from "svelte";
+    import { onMount, tick } from "svelte";
+    import { isInsideToastRegion } from "../util/focus-utils.js";
+    import {
+        measurePlacement,
+        watchViewport,
+        type PanelPlacement,
+    } from "../util/fit-in-viewport.js";
+    import {
+        DEFAULT_COLOR_PICKER_STRINGS,
+        type ColorPickerStrings,
+    } from "../util/ready-made-strings.js";
 
     interface Props {
         /** Extra classes for the host element. */
@@ -9,23 +21,79 @@
         label?: string;
         disabled?: boolean;
         placeholder?: string;
+        /** The accessible names of its parts, for another language. */
+        strings?: Partial<ColorPickerStrings>;
         onchange?: (event: Event) => void;
     }
 
     let {
         class: className = "",
-        value = $bindable(""),
+        value = $bindable<Exclude<Props["value"], undefined>>(),
         label = "",
         disabled = false,
         placeholder = "#000000",
+        strings,
         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 (value === undefined) value = "";
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("colorPicker");
+    const text = $derived(mergeStrings(DEFAULT_COLOR_PICKER_STRINGS, provided(), strings));
+
     let isOpen = $state(false);
-    let isDragging = $state(false);
+    /** The pointer that is down on the colour map, if one is. */
+    let dragPointer: number | null = null;
     let pickerContainer: HTMLDivElement | undefined;
-    let colorMap: HTMLCanvasElement | undefined;
+
+    /**
+     * Where the popover is. It hangs from the right edge of the swatch and is
+     * 20rem wide, so with the swatch in the left half of a phone screen it ran
+     * off the left edge. It is slid back to 8px from the edge, narrowed when
+     * it is wider than the screen, and placed against the viewport when a box
+     * that scrolls around it would cut it off (`fixed`). A popover that fits
+     * is not touched.
+     */
+    let popoverElement = $state<HTMLDivElement | null>(null);
+    let placed = $state<PanelPlacement | null>(null);
+
+    $effect(() => {
+        const panel = popoverElement;
+        const anchor = panel?.parentElement;
+        if (!isOpen || !panel || !anchor) {
+            placed = null;
+            return;
+        }
+        const update = () => {
+            // `top-12` is 3rem from the top of the box around the swatch,
+            // which can be a little taller than the swatch: the gap is what
+            // is left under that box, so the popover is where the class puts it.
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const gap = rem * 3 - anchor.getBoundingClientRect().height;
+            placed = measurePlacement(
+                anchor,
+                panel,
+                { block: "bottom", inline: "end" },
+                // Placed with `right`, in either writing direction, and always below.
+                { margin: 8, gap, flipBlock: false, flipInline: false, rtl: false },
+            );
+        };
+        update();
+        return watchViewport(update, panel);
+    });
+    let colorMap = $state<HTMLCanvasElement | undefined>();
+    let swatchButton: HTMLButtonElement | undefined;
     let colorMapContainer: HTMLDivElement | undefined;
 
     // Working color in HSL (h: 0–360; s, l: 0–100).
@@ -108,9 +176,7 @@
     const variant = $derived(value && !isValidHex(value) ? "error" : "default");
 
     const message = $derived(
-        value && !isValidHex(value)
-            ? "Please enter a valid hex color (e.g., #ff0000 or #f00)"
-            : "",
+        value && !isValidHex(value) ? text.invalidHex : "",
     );
 
     function handleInput(event: Event) {
@@ -142,7 +208,7 @@
         commitCurrentValue(event);
     }
 
-    async function togglePicker() {
+    async function togglePicker(event?: MouseEvent) {
         if (!disabled) {
             if (isOpen) {
                 commitCurrentValue(new Event("change"));
@@ -151,13 +217,41 @@
             if (isOpen && value && isValidHex(value)) {
                 updateFromHex(value);
             }
-            if (isOpen) {
+            // A click from the keyboard has no pointer (`detail` is 0): focus
+            // goes in, to the first stop of the popover. A press keeps it.
+            if (isOpen && event && event.detail === 0) {
                 await tick();
-                drawColorMap();
+                saturationInput?.focus({ preventScroll: true });
             }
         }
     }
 
+    /** Escape inside the popover, or on the swatch while it is open: close, and back to the swatch. */
+    function handleEscape(event: KeyboardEvent) {
+        if (event.key !== "Escape" || !isOpen) return;
+        // Consumed here: a Modal or Drawer around the picker stays open.
+        event.stopPropagation();
+        event.preventDefault();
+        commitCurrentValue(new Event("change"));
+        isOpen = false;
+        swatchButton?.focus({ preventScroll: true });
+    }
+
+    // The map is drawn for the hue it is open at, and again for any change of
+    // it: the hue slider, a typed hex, or a `value` set from outside.
+    $effect(() => {
+        void hue;
+        if (isOpen && colorMap) drawColorMap();
+    });
+
+    // A `value` changed from outside while open (not the one the sliders just made).
+    $effect(() => {
+        if (!isOpen || !value || !isValidHex(value)) return;
+        if (expandHex(value).toLowerCase() !== hslToHex(hue, saturation, lightness)) {
+            updateFromHex(value);
+        }
+    });
+
     function drawColorMap() {
         if (!colorMap) return;
         const ctx = colorMap.getContext("2d");
@@ -177,34 +271,93 @@
         }
     }
 
-    function handleColorMapClick(event: MouseEvent) {
-        if (!colorMapContainer || !colorMap) return;
+    /**
+     * The colour map: saturation across, lightness up.
+     *
+     * It is two sliders on one surface, and is built as that: two visually
+     * hidden `<input type="range">`, which is what a screen reader, a switch
+     * and a voice command already know how to name, read and set ("Saturation,
+     * slider, 50%"). A single element cannot say it: `role="slider"` has one
+     * value, and an unnamed `role="button"`, which this was, has none.
+     *
+     * For the keyboard the two act as one map. Left and right move
+     * saturation and up and down lightness, from whichever slider has focus,
+     * and focus goes to the one that moved, so its new value is what is
+     * read out. Shift moves by ten. Only the first is a Tab stop.
+     *
+     * The surface takes pointer events, so a finger and a pen work as a mouse
+     * does; it used to listen for `mousedown` alone. The whole surface is the
+     * target (the mark on it is not something to hit), and `touch-none`
+     * keeps a drag on it from scrolling the page.
+     */
+    let saturationInput = $state<HTMLInputElement | null>(null);
+    let lightnessInput = $state<HTMLInputElement | null>(null);
+
+    const percent = (value: number) => Math.max(0, Math.min(100, Math.round(value)));
+
+    function setFromPoint(event: PointerEvent) {
+        if (!colorMapContainer) return;
         const rect = colorMapContainer.getBoundingClientRect();
-        const x = event.clientX - rect.left;
-        const y = event.clientY - rect.top;
+        if (rect.width === 0 || rect.height === 0) return;
+        saturation = percent(((event.clientX - rect.left) / rect.width) * 100);
+        lightness = percent(100 - ((event.clientY - rect.top) / rect.height) * 100);
+        updateHexFromHsl();
+    }
 
-        saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));
-        lightness = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));
+    function handleMapPointerDown(event: PointerEvent) {
+        if (event.pointerType === "mouse" && event.button !== 0) return;
+        dragPointer = event.pointerId;
+        try {
+            colorMapContainer?.setPointerCapture(event.pointerId);
+        } catch {
+            /* a test DOM, or a pointer that is already gone */
+        }
+        setFromPoint(event);
+        // The keys carry on from where the pointer left it.
+        saturationInput?.focus({ preventScroll: true });
+        // Not a text selection, and not a second focus change from the press itself.
+        event.preventDefault();
+    }
 
-        updateHexFromHsl();
-        drawColorMap();
+    function handleMapPointerMove(event: PointerEvent) {
+        if (dragPointer !== event.pointerId) return;
+        setFromPoint(event);
     }
 
-    function handleColorMapDrag(event: MouseEvent) {
-        if (isDragging) {
-            handleColorMapClick(event);
+    function handleMapPointerUp(event: PointerEvent) {
+        if (dragPointer !== event.pointerId) return;
+        dragPointer = null;
+    }
+
+    function handleMapKeydown(event: KeyboardEvent) {
+        const step = event.shiftKey ? 10 : 1;
+        const across = event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0;
+        const up = event.key === "ArrowUp" ? step : event.key === "ArrowDown" ? -step : 0;
+        if (across === 0 && up === 0) return;
+        // The slider's own handling would move the focused one for all four keys.
+        event.preventDefault();
+        if (across !== 0) {
+            saturation = percent(saturation + across);
+            saturationInput?.focus({ preventScroll: true });
+        } else {
+            lightness = percent(lightness + up);
+            lightnessInput?.focus({ preventScroll: true });
         }
+        updateHexFromHsl();
     }
 
-    function handleMouseUp() {
-        isDragging = false;
+    /** Home, End, Page Up and Down, and what assistive technology sets: the slider's own value. */
+    function handleMapInput(axis: "saturation" | "lightness", event: Event) {
+        const next = percent(Number((event.currentTarget as HTMLInputElement).value));
+        if (axis === "saturation") saturation = next;
+        else lightness = next;
+        updateHexFromHsl();
     }
 
     function handleHueChange(event: Event) {
         const target = event.target as HTMLInputElement;
         hue = parseInt(target.value);
         updateHexFromHsl();
-        drawColorMap();
     }
 
     function setPickerContainer(node: HTMLDivElement) {
@@ -241,11 +394,13 @@
     }
 
     function handleClickOutside(event: MouseEvent) {
+        // A toast lies over the panel; a press on it is for the toast.
+        if (isInsideToastRegion(event.target)) return;
         if (
             pickerContainer &&
             !pickerContainer.contains(event.target as Node) &&
             !(event.target as HTMLElement).closest(
-                '[aria-label="Open color picker"]',
+                "[data-color-picker-open]",
             )
         ) {
             commitCurrentValue(new Event("change"));
@@ -258,19 +413,22 @@
             updateFromHex(value);
         }
         window.addEventListener("mousedown", handleClickOutside);
-        window.addEventListener("mouseup", handleMouseUp);
-        window.addEventListener("mousemove", handleColorMapDrag);
-    });
 
-    onDestroy(() => {
-        window.removeEventListener("mousedown", handleClickOutside);
-        window.removeEventListener("mouseup", handleMouseUp);
-        window.removeEventListener("mousemove", handleColorMapDrag);
+        // Teardown is returned from onMount rather than registered with
+        // onDestroy: onDestroy also runs on the server, where there is no window.
+        return () => {
+            window.removeEventListener("mousedown", handleClickOutside);
+        };
     });
 
     const displayColor = $derived(value && isValidHex(value) ? value : placeholder);
     const pickerIndicatorX = $derived(`${saturation}%`);
     const pickerIndicatorY = $derived(`${100 - lightness}%`);
+    /** What a slider of the map says: its own value, and the colour the two make. */
+    const mapValueText = (value: number) => `${Math.round(value)}%, ${hslToHex(hue, saturation, lightness)}`;
+    /** A ring around a surface whose slider has keyboard focus: the sliders themselves are not drawn. */
+    const RING_WITHIN =
+        "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-focus-ring";
 </script>
 
 <div class={className} {...restProps}>
@@ -285,7 +443,7 @@
                 {message}
                 oninput={handleInput}
                 onblur={handleBlur}
-                aria-label="Hex color input"
+                aria-label={label ? undefined : text.hexInput}
             />
         </div>
         <div class="relative shrink-0 mt-6">
@@ -293,48 +451,101 @@
                 type="button"
                 onclick={togglePicker}
                 {disabled}
-                class="focus-ring w-11 h-11 rounded-control border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+                class="focus-ring w-11 h-11 rounded-control border-2 border-card shrink-0 cursor-pointer hover:ring-2 hover:ring-border active:ring-2 active:ring-border-strong transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                 style="background-color: {displayColor};"
-                aria-label="Open color picker"
+                aria-label={label ? `${label}, ${text.open}` : text.open}
+                bind:this={swatchButton}
+                onkeydown={handleEscape}
                 aria-expanded={isOpen}
+                data-color-picker-open
             ></button>
 
             {#if isOpen}
                 <div
                     use:setPickerContainer
-                    class="absolute top-12 right-0 z-popover border border-input-border bg-input rounded-container shadow-lg p-4 w-80"
+                    bind:this={popoverElement}
+                    class="absolute top-12 right-0 z-popover border border-border-overlay bg-surface-overlay rounded-overlay shadow-lg p-4 w-80"
+                    style:position={placed?.fixed ? "fixed" : undefined}
+                    style:top={placed?.fixed ? `${placed.fixed.top}px` : undefined}
+                    style:left={placed?.fixed ? `${placed.fixed.left}px` : undefined}
+                    style:right={placed?.fixed
+                        ? "auto"
+                        : placed && placed.inlineOffset !== 0
+                          ? `${placed.inlineOffset}px`
+                          : undefined}
+                    style:width={placed?.fixed ? `${placed.fixed.width}px` : undefined}
+                    style:max-width={placed && placed.maxWidth !== null ? `${placed.maxWidth}px` : undefined}
                     role="dialog"
-                    aria-label="Color picker"
+                    aria-label={text.picker}
+                    tabindex="-1"
+                    onkeydown={handleEscape}
                 >
                     <div class="space-y-4">
+                        <!-- The sliders inside are the controls; the pointer
+                        handlers are on the surface they share. -->
+                        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                         <div
                             use:setColorMapContainer
-                            class="relative w-full h-48 rounded-container overflow-hidden cursor-crosshair"
-                            onmousedown={(e) => {
-                                isDragging = true;
-                                handleColorMapClick(e);
-                            }}
-                            role="button"
-                            tabindex="0"
+                            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}
+                            onpointerup={handleMapPointerUp}
+                            onpointercancel={handleMapPointerUp}
                         >
                             <canvas
                                 use:setColorMap
                                 width={256}
                                 height={192}
-                                class="w-full h-full"
+                                class="w-full h-full rounded-container"
                             ></canvas>
+                            <input
+                                bind:this={saturationInput}
+                                type="range"
+                                min="0"
+                                max="100"
+                                step="1"
+                                value={saturation}
+                                class="sr-only"
+                                aria-label={text.saturation}
+                                aria-valuetext={mapValueText(saturation)}
+                                oninput={(event) => handleMapInput("saturation", event)}
+                                onkeydown={handleMapKeydown}
+                            />
+                            <input
+                                bind:this={lightnessInput}
+                                type="range"
+                                min="0"
+                                max="100"
+                                step="1"
+                                value={lightness}
+                                tabindex="-1"
+                                class="sr-only"
+                                aria-label={text.lightness}
+                                aria-orientation="vertical"
+                                aria-valuetext={mapValueText(lightness)}
+                                oninput={(event) => handleMapInput("lightness", event)}
+                                onkeydown={handleMapKeydown}
+                            />
+                            <!-- White with a dark edge: seen on the white corner of the map as on the black. -->
                             <div
-                                class="absolute w-4 h-4 border-2 border-white rounded-full shadow-sm pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
+                                class="absolute w-4 h-4 border-2 border-white rounded-full shadow-[0_0_0_1px_rgba(0,0,0,0.6)] pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
                                 style="left: {pickerIndicatorX}; top: {pickerIndicatorY};"
                             ></div>
                         </div>
 
                         <div class="space-y-2">
+                            <!-- A real slider, drawn by the two layers around
+                            it. It is transparent, so the ring for keyboard
+                            focus is on this box; and the box is a finger tall
+                            on a touch screen, where 24px was not. -->
                             <div
-                                class="relative h-6 rounded-control overflow-hidden"
+                                class="relative h-6 pointer-coarse:h-11 rounded-control {RING_WITHIN}"
                             >
                                 <div
-                                    class="absolute inset-0"
+                                    class="absolute inset-0 rounded-control"
                                     style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));"
                                 ></div>
                                 <input
@@ -344,7 +555,7 @@
                                     value={hue}
                                     oninput={handleHueChange}
                                     class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                                    aria-label="Hue slider"
+                                    aria-label={text.hue}
                                 />
                                 <div
                                     class="absolute top-0 bottom-0 w-3 bg-card shadow-sm pointer-events-none my-px rounded-full border border-base-950"

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

@@ -1,3 +1,4 @@
+import { type ColorPickerStrings } from "../util/ready-made-strings.js";
 interface Props {
     /** Extra classes for the host element. */
     class?: string;
@@ -5,6 +6,8 @@ interface Props {
     label?: string;
     disabled?: boolean;
     placeholder?: string;
+    /** The accessible names of its parts, for another language. */
+    strings?: Partial<ColorPickerStrings>;
     onchange?: (event: Event) => void;
 }
 declare const ColorPicker: import("svelte").Component<Props, {}, "value">;

package/dist/atoms/Container.svelte

@@ -28,13 +28,21 @@
         '2xl': 'max-w-screen-2xl',
         full: 'max-w-full',
     };
+
+    const classes = $derived(
+        cn('mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className),
+    );
 </script>
 
-<svelte:element
-    this={Tag}
-    class={cn('mx-auto w-full', maxClass[maxWidth], padded ? 'px-4 sm:px-6' : '', className)}
->
-    {#if children}
-        {@render children()}
-    {/if}
-</svelte:element>
+<!-- One branch per tag, not `<svelte:element>`: hydration takes a dynamic
+element out and puts it back, which blurs a control inside it that the user
+had already tabbed to. -->
+{#if Tag === 'section'}
+    <section class={classes}>{@render children?.()}</section>
+{:else if Tag === 'main'}
+    <main class={classes}>{@render children?.()}</main>
+{:else if Tag === 'article'}
+    <article class={classes}>{@render children?.()}</article>
+{:else}
+    <div class={classes}>{@render children?.()}</div>
+{/if}

package/dist/atoms/DateField.svelte

@@ -0,0 +1,145 @@
+<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";
+
+    /**
+     * A date, picked with the device's own date picker and styled like Input.
+     *
+     * It is a native `<input type="date">`: an iPhone shows its wheels or
+     * 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, 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>`.
+     */
+    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 date as `YYYY-MM-DD`, 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 date that can be picked, as `YYYY-MM-DD`. */
+        min?: string;
+        /** Latest date that can be picked, as `YYYY-MM-DD`. */
+        max?: string;
+        /** Steps between dates that can be picked, in days. */
+        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;
+        /**
+         * 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 {
+        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 = "",
+        locale,
+        format,
+        placeholder,
+        picker = "library",
+        strings,
+        ...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="date"
+    {id}
+    bind:value
+    {name}
+    {label}
+    {hideLabel}
+    {hint}
+    {error}
+    {min}
+    {max}
+    {step}
+    {required}
+    {disabled}
+    {readonly}
+    {size}
+    class={className}
+    {locale}
+    {format}
+    {placeholder}
+    {picker}
+    {strings}
+    {...restProps}
+/>