zabi-components 8.0.0 → 8.1.0

package/dist/atoms/Checkbox.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
     import SelectionControl from "./SelectionControl.svelte";
     import type { SelectionControlMarkProps } from "./SelectionControl.svelte";
 
-    interface Props {
+    /** Other attributes (`required`, `data-*`, `aria-*`, ...) land on the `<input>`. */
+    type Props = Omit<
+        HTMLInputAttributes,
+        "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"
+    > & {
         /** Extra classes for the host element. */
         class?: string;
         id?: string;
@@ -15,7 +20,7 @@
         checked?: boolean;
         onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
-    }
+    };
 
     let {
         class: className = "",
@@ -26,32 +31,54 @@
         loading = false,
         label = "",
         defaultChecked = false,
-        checked = $bindable(defaultChecked),
+        checked = $bindable<Exclude<Props["checked"], undefined>>(),
         onChange,
         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 = defaultChecked;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
 </script>
 
 {#snippet mark(props: SelectionControlMarkProps)}
-    <span
-        class="pointer-events-none absolute inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-brand-500 border-t-transparent z-10 opacity-0 group-has-[aria-busy=true]/control:opacity-100 group-has-checked/control:border-base-50"
-        aria-hidden="true"
-    ></span>
-    <svg
-        class="absolute w-3 h-3 text-base-50 pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-    >
-        <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2.5"
-            d="M5 13l4 4L19 7"
-        />
-    </svg>
+    <!-- While loading the ring stands in for the tick, so the two never overlap;
+         the fill still says whether the box is checked. The ring is only in the
+         DOM while busy, which is what lets it take Spinner's reduced-motion
+         pulse: a pulse animates opacity and would un-hide a ring that was
+         merely transparent. It is drawn in the text colour so the gap in it
+         survives: a hand-written border colour class repaints all four sides. -->
+    {#if props.loading}
+        <span
+            class="pointer-events-none absolute z-10 inline-block size-3 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent motion-reduce:animate-pulse {props.checked
+                ? 'text-action-primary'
+                : 'text-brand-500'}"
+            aria-hidden="true"
+        ></span>
+    {:else}
+        <svg
+            class="absolute w-3 h-3 text-action-primary pointer-events-none z-10 opacity-0 group-has-checked/control:opacity-100"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2.5"
+                d="M5 13l4 4L19 7"
+            />
+        </svg>
+    {/if}
 {/snippet}
 
 <SelectionControl

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

@@ -1,4 +1,6 @@
-interface Props {
+import type { HTMLInputAttributes } from "svelte/elements";
+/** Other attributes (`required`, `data-*`, `aria-*`, ...) land on the `<input>`. */
+type Props = Omit<HTMLInputAttributes, "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"> & {
     /** Extra classes for the host element. */
     class?: string;
     id?: string;
@@ -11,7 +13,7 @@ interface Props {
     checked?: boolean;
     onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
-}
+};
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/atoms/CodeBlock.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { DEFAULT_CODE_BLOCK_TEXTS, zabiStringsFor } from "../util/zabi-strings.js";
     import Check from "@lucide/svelte/icons/check";
     import Copy from "@lucide/svelte/icons/copy";
     import IconButton from "./IconButton.svelte";
@@ -12,6 +13,10 @@
         /** @deprecated use `class`. */
         className?: string;
         showCopyButton?: boolean;
+        /** Accessible name of the copy button. */
+        copyLabel?: string;
+        /** Its name for the two seconds after the code was copied. */
+        copiedLabel?: string;
         /** If true, `{@html code}` — only trusted, sanitized input. */
         trustHtml?: boolean;
     }
@@ -22,10 +27,17 @@
         class: classAttr = "",
         className: legacyClass = "",
         showCopyButton = true,
+        copyLabel: copyLabelGiven,
+        copiedLabel: copiedLabelGiven,
         trustHtml = false,
         ...restProps
     }: Props & Record<string, unknown> = $props();
 
+    /** Each text: the prop, else the app-wide word from a `ZabiStringsProvider` above this one, else English. */
+    const provided = zabiStringsFor("codeBlock");
+    const copyLabel = $derived(copyLabelGiven ?? provided()?.copyLabel ?? DEFAULT_CODE_BLOCK_TEXTS.copyLabel);
+    const copiedLabel = $derived(copiedLabelGiven ?? provided()?.copiedLabel ?? DEFAULT_CODE_BLOCK_TEXTS.copiedLabel);
+
     /** `class` is the public prop; `className` is a deprecated alias.
      * Both are merged here so existing call sites keep working. */
     const className = $derived(cn(`${classAttr} ${legacyClass}`));
@@ -61,7 +73,7 @@
             <IconButton
                 variant="ghost"
                 size="sm"
-                label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
+                label={copied ? copiedLabel : copyLabel}
                 onclick={copyToClipboard}
             >
                 {#if copied}
@@ -70,6 +82,9 @@
                     <Copy size={16} class="shrink-0" aria-hidden="true" />
                 {/if}
             </IconButton>
+            <!-- A button's new name is not read out while it keeps focus.
+            This says it: always in the page, filled when the code is copied. -->
+            <span class="sr-only" role="status" data-code-block-status>{copied ? copiedLabel : ""}</span>
         {/if}
     </div>
 
@@ -80,8 +95,11 @@
 </div>
 
 <style>
+    /* The token's default is this same stack. It is repeated as the fallback
+       because Tailwind only emits theme variables it sees used, and it does
+       not read a component's scoped styles. */
     .code-block {
-        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+        font-family: var(--font-family-mono, "Monaco", "Menlo", "Ubuntu Mono", monospace);
     }
 
     :global(.language-svelte .token.tag),

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

@@ -6,6 +6,10 @@ interface Props {
     /** @deprecated use `class`. */
     className?: string;
     showCopyButton?: boolean;
+    /** Accessible name of the copy button. */
+    copyLabel?: string;
+    /** Its name for the two seconds after the code was copied. */
+    copiedLabel?: string;
     /** If true, `{@html code}` — only trusted, sanitized input. */
     trustHtml?: boolean;
 }

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,100 @@
                 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"
+                            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 +554,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">;