zabi-components 8.0.0 → 9.0.0

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

@@ -1,16 +1,62 @@
-interface Props {
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { type SelectPresentation, type SelectStrings } from "../util/select.js";
+/**
+ * Other attributes (`data-*`, `aria-*`, `onfocus`, ...) land on the
+ * trigger, which is a `<button>`: it is the control that takes focus and
+ * that the label names.
+ *
+ * The server's HTML also carries a native `<select>` with the same
+ * options. Until the component has mounted, and for good where there are
+ * no scripts, that is the control: it is what is seen, pressed and
+ * submitted. Once mounted the trigger and the list take over, and the
+ * native select stays, out of sight and out of reach, as the form control
+ * (`name`, `required`), kept at the same value. With
+ * `presentation="native"` it is the control throughout.
+ */
+type Props = Omit<HTMLButtonAttributes, "class" | "value" | "name" | "disabled" | "type" | "onchange" | "onclick" | "aria-describedby" | "children"> & {
     /** Extra classes for the host element. */
     class?: string;
+    /** Id of the trigger. Omit to auto-generate. */
+    id?: string;
     value?: string | number | undefined;
     options?: Array<{
         value: string | number;
         label: string;
         disabled?: boolean;
+        /**
+         * The language of the label, as a BCP 47 tag (`"en"`), when it is
+         * not the page's (WCAG 3.1.2). Set on the option's row, on the
+         * trigger's text while it is chosen, and on the native `<option>`.
+         */
+        lang?: string;
     }>;
     searchable?: boolean;
+    /**
+     * The component's own texts, for another language. Whatever is left
+     * out keeps its English default. The six older props for single texts
+     * (`placeholder`, `searchPlaceholder`, `noResultsText`,
+     * `loadingText`, `emptyStateTitle`, `emptyStateDescription`) win
+     * over it.
+     */
+    strings?: Partial<SelectStrings>;
     searchPlaceholder?: string;
     maxMenuHeight?: string;
     menuWidth?: string;
+    /**
+     * How the list is shown. `auto`: in a BottomSheet on a phone (a touch
+     * screen narrower than 640px), under the trigger everywhere else.
+     * `popover` and `sheet` are always the one or the other. `native`:
+     * only the browser's own `<select>`, styled as the field, with the
+     * platform's picker. It shows the options' labels and nothing else:
+     * no search field, and none of the loading or empty states.
+     */
+    presentation?: SelectPresentation;
+    /**
+     * In a sheet, a short list (up to six options) without a search field
+     * gets a sheet as tall as the list, not half the screen. `false`
+     * keeps the half-height sheet.
+     */
+    sheetFit?: boolean;
     noResultsText?: string;
     isLoading?: boolean;
     loadingText?: string;
@@ -19,16 +65,28 @@ interface Props {
     emptyStateActionLabel?: string;
     placeholder?: string;
     label?: string;
-    /** When set, a hidden input submits the selected value with native forms. */
+    /** The name the chosen value is submitted under, by the native `<select>`. */
     name?: string;
+    /**
+     * The form is not sent while nothing is chosen. Checked by the
+     * browser on the native `<select>`; once mounted, the browser's own
+     * message is shown under the field and focus goes to the trigger.
+     */
     required?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "success" | "warning" | "error";
+    /** 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;
     onchange?: (event: Event) => void;
     onEmptyStateAction?: () => void;
-}
+    /** Ids of other elements that describe the field. The hint and the message are added after them. */
+    "aria-describedby"?: string | null;
+};
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/atoms/SelectionControl.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import { onMount, tick, type Snippet } from "svelte";
+    import type { HTMLInputAttributes } from "svelte/elements";
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
+    import { groupBinding } from "../util/hydration.js";
+    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import type { SemanticVariant } from "../types/variants.js";
+    import FieldMessages from "./FieldMessages.svelte";
     import {
+        SELECTION_CONTROL_INPUT,
         SELECTION_CONTROL_LABEL_ROW,
         selectionControlRingOverlayClasses,
         selectionControlShellClasses,
@@ -17,7 +23,10 @@
         disabled: boolean;
     };
 
-    interface Props {
+    type Props = Omit<
+        HTMLInputAttributes,
+        "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"
+    > & {
         /** Extra classes for the host element. */
         class?: string;
         id?: string;
@@ -33,7 +42,31 @@
         onChange?: (event: Event) => void;
         onchange?: (event: Event) => void;
         mark?: Snippet<[SelectionControlMarkProps]>;
-    }
+        /**
+         * Drawn inside the one label, between the control and the label text,
+         * as decoration for the name `label` already gives. A leading image
+         * should have an empty alt: the label names the row.
+         */
+        leading?: Snippet;
+        /**
+         * A line under the label, tied to the input with `aria-describedby`.
+         * It is not part of the name: the label names the control.
+         */
+        description?: string;
+        /**
+         * Where the control sits in the row. `end` puts it after the leading,
+         * the label and the description, at the far edge; the row is still
+         * one label and fills the width it is given.
+         */
+        controlPosition?: "start" | "end";
+        variant?: SemanticVariant;
+        /** Status text under the control. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+        message?: string;
+        /** Help text under the control, read out with it. */
+        hint?: string;
+        /** An error under the control. It marks the input invalid and is announced; it wins over `variant` and `message`. */
+        error?: string;
+    };
 
     let {
         class: className = "",
@@ -46,26 +79,111 @@
         disabled = false,
         loading = false,
         defaultChecked = false,
-        checked = $bindable(defaultChecked),
+        checked = $bindable<Exclude<Props["checked"], undefined>>(),
         onChange,
         onchange,
         mark,
+        leading,
+        description,
+        controlPosition = "start",
+        variant = "default",
+        message = "",
+        hint = "",
+        error = "",
         ...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);
+
     /** Call once per mount — `generateId()` in `$derived` would churn ids every tick. */
     const fallbackId = generateId("selection-control");
     const controlId = $derived(idProp ?? fallbackId);
     const isDisabled = $derived(disabled || loading);
 
-    const labelWrapperClasses = SELECTION_CONTROL_LABEL_ROW;
+    const descriptionId = $derived(`${controlId}-description`);
+    const status = $derived(fieldMessageState({ variant, message, hint, error }));
+    const hasFieldText = $derived(status.showMessage || status.showHint);
+    // The caller's ids, then the description, the hint and the message.
+    const describedBy = $derived(
+        fieldDescribedBy(
+            controlId,
+            status,
+            [restProps["aria-describedby"], description ? descriptionId : undefined]
+                .filter(Boolean)
+                .join(" "),
+        ),
+    );
+    // `aria-invalid` is not supported by the radio role: a radio's error is said by its description.
+    const invalid = $derived(status.variant === "error" ? "true" : undefined);
 
-    const controlContainerClasses = $derived(selectionControlShellClasses(shape));
+    // With a description the row is two lines: the box sits at the top, as in RadioGroup.
+    // At the end the control is moved by `order`, so the markup and what a
+    // screen reader meets first are the same in both positions.
+    const controlAtEnd = $derived(controlPosition === "end");
+    const labelWrapperClasses = $derived(
+        cn(SELECTION_CONTROL_LABEL_ROW, description && "items-start", controlAtEnd && "min-w-0 flex-1"),
+    );
+
+    const controlContainerClasses = $derived(
+        cn(selectionControlShellClasses(shape), description && "mt-0.5", controlAtEnd && "order-last"),
+    );
+    const labelTextClasses = $derived(controlAtEnd ? "min-w-0 flex-1" : "");
 
     const controlRingClasses = $derived(selectionControlRingOverlayClasses(shape));
 
+    let input: HTMLInputElement | undefined = $state();
+
+    /**
+     * The input is bound, so a tick made before the page hydrated is kept:
+     * Svelte's binding finds the input changed and hands its state over here
+     * instead of overwriting it (see util/hydration.ts). A form reset arrives
+     * the same way.
+     *
+     * A choice that is adopted like that came without a `change` event that
+     * anything heard, and a parent that only listens (`onchange`, no
+     * `bind:checked`) would never learn of it. So while the component
+     * settles, a change made through the binding is noted, and reported once
+     * with a real `change` event on the input: the callbacks get the event
+     * they always get, and a form around the control hears it too.
+     */
+    let settling = true;
+    let adopted = false;
+
+    function take(next: boolean) {
+        if (next === !!checked) return;
+        checked = next;
+        if (settling) adopted = true;
+    }
+
+    /** What a single radio's group is bound to: its own value while it is checked. */
+    const NOT_CHOSEN = {};
+    const radio = groupBinding<unknown>(
+        () => (checked ? value : NOT_CHOSEN),
+        (chosen) => take(chosen === value),
+        () => take(false),
+    );
+
+    onMount(() => {
+        // The bindings adopt in a microtask of their own, queued before this one.
+        void tick().then(() => {
+            settling = false;
+            if (adopted) input?.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+    });
+
     function handleChange(event: Event) {
         if (isDisabled) return;
+        // A real change is its own report: nothing is left to tell.
+        adopted = false;
         const target = event.target as HTMLInputElement;
         checked = target.checked;
         onChange?.(event);
@@ -73,30 +191,82 @@
     }
 </script>
 
-<div class={cn("flex items-center gap-2", className)}>
+{#snippet row()}
     <label for={controlId} class={labelWrapperClasses}>
         <span class={controlContainerClasses}>
-            <input
-                {type}
-                id={controlId}
-                {name}
-                {value}
-                {checked}
-                disabled={isDisabled}
-                class="sr-only"
-                aria-busy={loading ? "true" : undefined}
-                onchange={handleChange}
-                {...restProps}
-            />
+            <!-- One branch per type: a binding needs a type it can read. -->
+            {#if type === "checkbox"}
+                <input
+                    bind:this={input}
+                    type="checkbox"
+                    id={controlId}
+                    {name}
+                    {value}
+                    bind:checked={() => !!checked, take}
+                    disabled={isDisabled}
+                    class={SELECTION_CONTROL_INPUT}
+                    aria-busy={loading ? "true" : undefined}
+                    onchange={handleChange}
+                    {...restProps}
+                    aria-describedby={describedBy}
+                    aria-invalid={invalid ?? restProps["aria-invalid"]}
+                />
+            {:else}
+                <input
+                    bind:this={input}
+                    type="radio"
+                    id={controlId}
+                    {name}
+                    {value}
+                    bind:group={radio.value}
+                    disabled={isDisabled}
+                    class={SELECTION_CONTROL_INPUT}
+                    aria-busy={loading ? "true" : undefined}
+                    onchange={handleChange}
+                    {...restProps}
+                    aria-describedby={describedBy}
+                />
+            {/if}
             <span class={controlRingClasses}></span>
             {#if mark}
-                {@render mark({ checked, loading, disabled: isDisabled })}
+                {@render mark({ checked: !!checked, loading, disabled: isDisabled })}
             {/if}
         </span>
-        {#if label}
-            <span class="text-sm font-medium text-label">
+        {#if leading}
+            <span class="inline-flex shrink-0 items-center">
+                {@render leading()}
+            </span>
+        {/if}
+        {#if description}
+            <span class={cn("flex flex-col gap-1", labelTextClasses)}>
+                <span class="text-sm font-medium text-label">
+                    {label}
+                </span>
+                <!-- aria-hidden keeps it out of the name; aria-describedby still reads it. -->
+                <span id={descriptionId} class="text-sm text-description" aria-hidden="true">
+                    {description}
+                </span>
+            </span>
+        {:else if label}
+            <span class={cn("text-sm font-medium text-label", labelTextClasses)}>
                 {label}
             </span>
         {/if}
     </label>
-</div>
+{/snippet}
+
+{#if hasFieldText}
+    <div class={cn("flex flex-col", className)}>
+        <div class="flex items-center gap-2">
+            {@render row()}
+        </div>
+        <!-- Under the label text: the box is 20px and the gap 8px. With the box at the end, from the row's edge. -->
+        <div class={controlAtEnd ? "" : "ps-7"}>
+            <FieldMessages fieldId={controlId} {status} {hint} gap="mt-1" />
+        </div>
+    </div>
+{:else}
+    <div class={cn("flex items-center gap-2", className)}>
+        {@render row()}
+    </div>
+{/if}

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

@@ -1,4 +1,6 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { SemanticVariant } from "../types/variants.js";
 import { type SelectionControlShape } from "./selection-control.styles";
 type SelectionControlType = "checkbox" | "radio";
 export type SelectionControlMarkProps = {
@@ -6,7 +8,7 @@ export type SelectionControlMarkProps = {
     loading: boolean;
     disabled: boolean;
 };
-interface Props {
+type Props = Omit<HTMLInputAttributes, "class" | "id" | "name" | "value" | "disabled" | "checked" | "type" | "onchange"> & {
     /** Extra classes for the host element. */
     class?: string;
     id?: string;
@@ -22,7 +24,31 @@ interface Props {
     onChange?: (event: Event) => void;
     onchange?: (event: Event) => void;
     mark?: Snippet<[SelectionControlMarkProps]>;
-}
+    /**
+     * Drawn inside the one label, between the control and the label text,
+     * as decoration for the name `label` already gives. A leading image
+     * should have an empty alt: the label names the row.
+     */
+    leading?: Snippet;
+    /**
+     * A line under the label, tied to the input with `aria-describedby`.
+     * It is not part of the name: the label names the control.
+     */
+    description?: string;
+    /**
+     * Where the control sits in the row. `end` puts it after the leading,
+     * the label and the description, at the far edge; the row is still
+     * one label and fills the width it is given.
+     */
+    controlPosition?: "start" | "end";
+    variant?: SemanticVariant;
+    /** Status text under the control. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
+    message?: string;
+    /** Help text under the control, read out with it. */
+    hint?: string;
+    /** An error under the control. It marks the input invalid and is announced; it wins over `variant` and `message`. */
+    error?: string;
+};
 declare const SelectionControl: import("svelte").Component<Props, {}, "checked">;
 type SelectionControl = ReturnType<typeof SelectionControl>;
 export default SelectionControl;

package/dist/atoms/Skeleton.svelte

@@ -1,56 +1,152 @@
 <script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+
     import { cn } from "../util/cn.js";
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import {
+        DEFAULT_SKELETON_STRINGS,
+        inSkeletonGroup,
+        skeletonLineCount,
+        type SkeletonStrings,
+    } from "../util/skeleton.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
 
     type Variant = "text" | "circle" | "block";
+    type Tone = "neutral" | "on-color";
 
-    interface Props {
+    /**
+     * Anything else a `div` takes (`id`, `data-testid`, `style`, `aria-*`) goes to the piece, or to the
+     * paragraph's wrapper with `lines`. `role`, `aria-busy`, `aria-hidden` and `data-skeleton` are set by
+     * the component and are not overridden.
+     */
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "aria-busy" | "aria-hidden"> & {
         variant?: Variant;
         /** CSS length or px number; omit to use variant default (circle stays square). */
         width?: string | number;
-        /** CSS length or px number; omit for variant default height. */
+        /** CSS length or px number; omit for variant default height. With `lines`, the height of each line. */
         height?: string | number;
         class?: string;
+        /** The status label. Defaults to the provider's `skeleton.label`, then "Loading…". */
         "aria-label"?: string;
-    }
+        /** Overrides for the built-in strings. */
+        strings?: Partial<SkeletonStrings>;
+        /**
+         * Draws the piece only: no role, no label, hidden from assistive tech.
+         * For a piece beside a status of your own. A piece under a `SkeletonGroup` is decorative already.
+         */
+        decorative?: boolean;
+        /**
+         * "neutral" is the quiet fill for a page or a card. "on-color" is the label colour of
+         * the surface it sits on at a low strength, for a brand, accent or fill block (`on-brand`,
+         * `on-accent`, `on-fill`, a `Card` with `tone`), in light and dark.
+         */
+        tone?: Tone;
+        /**
+         * Text variant only: draws this many lines (1 to 20) as one placeholder, the last one shorter.
+         * `class` and `width` then apply to the whole paragraph, `height` to each line.
+         */
+        lines?: number;
+    };
 
     let {
         variant = "text",
         width,
         height,
         class: className = "",
-        "aria-label": ariaLabel = "Loading…",
+        "aria-label": ariaLabel,
+        strings,
+        decorative = false,
+        tone = "neutral",
+        lines,
+        style,
+        ...restProps
     }: Props = $props();
 
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("skeleton");
+    const text = $derived(mergeStrings(DEFAULT_SKELETON_STRINGS, provided(), strings));
+
+    const grouped = inSkeletonGroup();
+    const hidden = $derived(decorative || grouped);
+
     const radius: Record<Variant, string> = {
         text: "rounded-control",
         circle: "rounded-full",
         block: "rounded-control",
     };
 
+    /**
+     * The variant's own box, at zero specificity (`:where()`): any size class at
+     * the call site wins over it in the stylesheet, whether `cn()` knows its name
+     * (`size-14`) or not (`size-sticker`, an app's own step).
+     */
     const defaultShape: Record<Variant, string> = {
-        text: "w-full h-3",
-        circle: "w-10 aspect-square",
-        block: "w-full h-32",
+        text: "[:where(&)]:w-full [:where(&)]:h-3",
+        circle: "[:where(&)]:w-10 aspect-square",
+        block: "[:where(&)]:w-full [:where(&)]:h-32",
+    };
+
+    const fill: Record<Tone, string> = {
+        neutral: "bg-neutral-subtle",
+        "on-color": "bg-skeleton-on-color",
     };
 
     function toSize(value: string | number): string {
         return typeof value === "number" ? `${value}px` : value;
     }
 
+    /** The component's own inline styles first, then the caller's `style`, which wins where both set a property. */
+    function joinStyles(...parts: Array<string | null | undefined>): string | undefined {
+        const joined = parts
+            .filter(Boolean)
+            .map((part) => String(part).replace(/;\s*$/, ""))
+            .join("; ");
+        return joined || undefined;
+    }
+
     const inlineStyle = $derived(
-        [
+        joinStyles(
             width !== undefined ? `width: ${toSize(width)}` : null,
             height !== undefined ? `height: ${toSize(height)}` : null,
-        ]
-            .filter(Boolean)
-            .join("; "),
+            style,
+        ),
     );
+
+    const lineCount = $derived(variant === "text" ? skeletonLineCount(lines) : 0);
+    const lineStyle = $derived(height !== undefined ? `height: ${toSize(height)}` : undefined);
+    const wrapperStyle = $derived(joinStyles(width !== undefined ? `width: ${toSize(width)}` : null, style));
+    const pieceClass = $derived(cn("animate-pulse motion-reduce:animate-none", fill[tone], radius.text));
 </script>
 
-<div
-    class={cn("animate-pulse bg-surface-2", defaultShape[variant], radius[variant], className)}
-    style={inlineStyle || undefined}
-    role="status"
-    aria-busy="true"
-    aria-label={ariaLabel}
-></div>
+{#if lineCount > 0}
+    <div
+        {...restProps}
+        class={cn("flex w-full flex-col gap-2", className)}
+        style={wrapperStyle}
+        data-skeleton-paragraph
+        role={hidden ? undefined : "status"}
+        aria-busy={hidden ? undefined : "true"}
+        aria-label={hidden ? undefined : (ariaLabel ?? text.label)}
+        aria-hidden={hidden ? "true" : undefined}
+    >
+        {#each { length: lineCount } as _, index (index)}
+            <div
+                class={cn(pieceClass, "h-3", index === lineCount - 1 && lineCount > 1 ? "w-3/5" : "w-full")}
+                style={lineStyle}
+                data-skeleton="text"
+                data-skeleton-line
+            ></div>
+        {/each}
+    </div>
+{:else}
+    <div
+        {...restProps}
+        class={cn("animate-pulse motion-reduce:animate-none", fill[tone], defaultShape[variant], radius[variant], className)}
+        style={inlineStyle}
+        data-skeleton={variant}
+        role={hidden ? undefined : "status"}
+        aria-busy={hidden ? undefined : "true"}
+        aria-label={hidden ? undefined : (ariaLabel ?? text.label)}
+        aria-hidden={hidden ? "true" : undefined}
+    ></div>
+{/if}

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

@@ -1,13 +1,40 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type SkeletonStrings } from "../util/skeleton.js";
 type Variant = "text" | "circle" | "block";
-interface Props {
+type Tone = "neutral" | "on-color";
+/**
+ * Anything else a `div` takes (`id`, `data-testid`, `style`, `aria-*`) goes to the piece, or to the
+ * paragraph's wrapper with `lines`. `role`, `aria-busy`, `aria-hidden` and `data-skeleton` are set by
+ * the component and are not overridden.
+ */
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "aria-busy" | "aria-hidden"> & {
     variant?: Variant;
     /** CSS length or px number; omit to use variant default (circle stays square). */
     width?: string | number;
-    /** CSS length or px number; omit for variant default height. */
+    /** CSS length or px number; omit for variant default height. With `lines`, the height of each line. */
     height?: string | number;
     class?: string;
+    /** The status label. Defaults to the provider's `skeleton.label`, then "Loading…". */
     "aria-label"?: string;
-}
+    /** Overrides for the built-in strings. */
+    strings?: Partial<SkeletonStrings>;
+    /**
+     * Draws the piece only: no role, no label, hidden from assistive tech.
+     * For a piece beside a status of your own. A piece under a `SkeletonGroup` is decorative already.
+     */
+    decorative?: boolean;
+    /**
+     * "neutral" is the quiet fill for a page or a card. "on-color" is the label colour of
+     * the surface it sits on at a low strength, for a brand, accent or fill block (`on-brand`,
+     * `on-accent`, `on-fill`, a `Card` with `tone`), in light and dark.
+     */
+    tone?: Tone;
+    /**
+     * Text variant only: draws this many lines (1 to 20) as one placeholder, the last one shorter.
+     * `class` and `width` then apply to the whole paragraph, `height` to each line.
+     */
+    lines?: number;
+};
 declare const Skeleton: import("svelte").Component<Props, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/atoms/SkeletonGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+
+    import { cn } from "../util/cn.js";
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { DEFAULT_SKELETON_STRINGS, provideSkeletonGroup, type SkeletonStrings } from "../util/skeleton.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
+
+    /**
+     * One loading status for a set of `Skeleton` pieces. The group is the
+     * `role="status"` region with the label; every `Skeleton` inside it is
+     * hidden from assistive tech, so a screen's eight pieces are announced
+     * once, not eight times.
+     */
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "role" | "aria-busy"> & {
+        /** The status label. Defaults to the provider's `skeleton.label`, then "Loading…". */
+        "aria-label"?: string;
+        /** Overrides for the built-in strings. */
+        strings?: Partial<SkeletonStrings>;
+        class?: string;
+        children?: Snippet;
+    };
+
+    let { "aria-label": ariaLabel, strings, class: className = "", children, ...restProps }: Props = $props();
+
+    provideSkeletonGroup();
+
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("skeleton");
+    const text = $derived(mergeStrings(DEFAULT_SKELETON_STRINGS, provided(), strings));
+</script>
+
+<div
+    {...restProps}
+    class={cn(className)}
+    role="status"
+    aria-busy="true"
+    aria-label={ariaLabel ?? text.label}
+    data-skeleton-group
+>
+    {@render children?.()}
+</div>