zabi-components 7.0.2 → 8.1.0

package/dist/atoms/Spinner.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
+
+    type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+        /**
+         * Diameter, on the scale the built-in loading states use: 12, 14, 16
+         * and 20px. For another size pass a `size-*` utility through `class`.
+         */
+        size?: "xs" | "sm" | "md" | "lg";
+        /**
+         * What is loading. With a label the spinner is a `status` and the
+         * label is read out; without one it is decorative and hidden from
+         * assistive technology, for use beside text that already says so.
+         */
+        label?: string;
+        /** Extra classes for the ring: a size, a colour, an opacity. */
+        class?: string;
+    };
+
+    let {
+        size = "md",
+        label = "",
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    const SIZES = {
+        xs: "size-3",
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5",
+    };
+
+    /**
+     * The same ring Button, IconButton and Input draw while loading, in the
+     * text colour. Rotation is the motion a reduced-motion preference is
+     * about, so there the ring stays still and fades in and out instead:
+     * something must still show that work is going on.
+     */
+    const ringClasses = $derived(
+        cn(
+            "inline-block shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80 motion-reduce:animate-pulse",
+            SIZES[size],
+            className,
+        ),
+    );
+</script>
+
+{#if label}
+    <span class="inline-flex shrink-0" role="status" {...restProps}>
+        <span class={ringClasses} aria-hidden="true"></span>
+        <span class="sr-only">{label}</span>
+    </span>
+{:else}
+    <span class={ringClasses} aria-hidden="true" {...restProps}></span>
+{/if}

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "svelte/elements";
+type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
+    /**
+     * Diameter, on the scale the built-in loading states use: 12, 14, 16
+     * and 20px. For another size pass a `size-*` utility through `class`.
+     */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * What is loading. With a label the spinner is a `status` and the
+     * label is read out; without one it is decorative and hidden from
+     * assistive technology, for use beside text that already says so.
+     */
+    label?: string;
+    /** Extra classes for the ring: a size, a colour, an opacity. */
+    class?: string;
+};
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/atoms/Table.svelte

@@ -1,22 +1,168 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { HTMLTableAttributes } from 'svelte/elements';
+    import { cn } from "../util/cn.js";
+    import { generateId } from "../util/ssr-safe.js";
 
-    interface Props {
-        /** Visible `<caption>` when set. */
+    /** `true` stacks at every width; a breakpoint name stacks below it. */
+    export type TableStacked = boolean | "sm" | "md" | "lg";
+
+    /** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the `<table>`. */
+    type Props = Omit<HTMLTableAttributes, 'class' | 'children'> & {
+        /** `<caption>`, and the table's accessible name, when set. */
         caption?: string;
+        /** Keeps the caption as the accessible name but hides it from view. */
+        captionHidden?: boolean;
+        /**
+         * Lays each row out as a block of label and value pairs instead of
+         * scrolling sideways. The label of a cell is its `data-label`
+         * attribute, which the caller sets on every `<td>`.
+         */
+        stacked?: TableStacked;
         class?: string;
         children?: Snippet;
+    };
+
+    let {
+        caption,
+        captionHidden = false,
+        stacked = false,
+        class: className = '',
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const captionId = generateId("table-caption");
+    let tableElement = $state<HTMLTableElement>();
+
+    /**
+     * The rows arrive as `children`, so the stacked layout is written from the
+     * table down. Tailwind only generates classes it can read whole, which is
+     * why each breakpoint repeats the list rather than building it.
+     *
+     * The header row is hidden from view, not removed, so cells keep their
+     * column header. The visible label is the cell's `data-label` drawn in
+     * `::before`; where the browser supports alternative text for generated
+     * content it is given an empty one, so a screen reader reads the column
+     * header once instead of the header and then the label.
+     *
+     * The label takes the start of the line with an auto margin after it, and
+     * the cell packs everything else at the end. So a cell's own children stay
+     * together however many there are, and a cell with no label still has its
+     * value on the value side. An empty cell collapses to nothing but is not
+     * hidden: taking it out of the tree would shift the cells after it under
+     * the wrong column headers.
+     */
+    const STACKED_CLASS = {
+        always:
+            "block min-w-0 [&>:not(thead)]:block [&>thead]:sr-only [&>*>tr]:block [&>*>tr]:py-2 " +
+            "[&>*>tr>*]:flex [&>*>tr>*]:items-baseline [&>*>tr>*]:justify-end " +
+            "[&>*>tr>*]:gap-4 [&>*>tr>*]:py-1 [&>*>tr>*]:text-end " +
+            "[&>*>tr>:empty]:py-0 [&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        sm:
+            "max-sm:block max-sm:min-w-0 max-sm:[&>:not(thead)]:block max-sm:[&>thead]:sr-only " +
+            "max-sm:[&>*>tr]:block max-sm:[&>*>tr]:py-2 max-sm:[&>*>tr>*]:flex " +
+            "max-sm:[&>*>tr>*]:items-baseline " +
+            "max-sm:[&>*>tr>*]:justify-end max-sm:[&>*>tr>*]:gap-4 " +
+            "max-sm:[&>*>tr>*]:py-1 max-sm:[&>*>tr>*]:text-end max-sm:[&>*>tr>:empty]:py-0 " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-sm:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-sm:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        md:
+            "max-md:block max-md:min-w-0 max-md:[&>:not(thead)]:block max-md:[&>thead]:sr-only " +
+            "max-md:[&>*>tr]:block max-md:[&>*>tr]:py-2 max-md:[&>*>tr>*]:flex " +
+            "max-md:[&>*>tr>*]:items-baseline " +
+            "max-md:[&>*>tr>*]:justify-end max-md:[&>*>tr>*]:gap-4 " +
+            "max-md:[&>*>tr>*]:py-1 max-md:[&>*>tr>*]:text-end max-md:[&>*>tr>:empty]:py-0 " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-md:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-md:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+        lg:
+            "max-lg:block max-lg:min-w-0 max-lg:[&>:not(thead)]:block max-lg:[&>thead]:sr-only " +
+            "max-lg:[&>*>tr]:block max-lg:[&>*>tr]:py-2 max-lg:[&>*>tr>*]:flex " +
+            "max-lg:[&>*>tr>*]:items-baseline " +
+            "max-lg:[&>*>tr>*]:justify-end max-lg:[&>*>tr>*]:gap-4 " +
+            "max-lg:[&>*>tr>*]:py-1 max-lg:[&>*>tr>*]:text-end max-lg:[&>*>tr>:empty]:py-0 " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:me-auto " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:shrink-0 " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:text-start " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:font-medium " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:text-headline " +
+            "max-lg:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)] " +
+            "max-lg:supports-[content:'x'/'']:[&>*>tr>[data-label]:not(:empty)]:before:content-[attr(data-label)/'']",
+    } as const;
+
+    const stackedClass = $derived(
+        stacked === true ? STACKED_CLASS.always : stacked ? STACKED_CLASS[stacked] : "",
+    );
+
+    /**
+     * Some browsers stop treating a table as one once its boxes are no longer
+     * table boxes, and the rows then reach a screen reader as loose text.
+     * Explicit roles keep the structure whatever `display` says. The rows are
+     * the caller's markup, so the roles are set on the rendered elements and
+     * kept up as rows come and go; a role the caller set is left alone.
+     */
+    function restoreTableRoles(table: HTMLTableElement) {
+        const set = (element: Element, role: string) => {
+            if (!element.hasAttribute("role")) element.setAttribute("role", role);
+        };
+        for (const group of table.querySelectorAll(":scope > :is(thead, tbody, tfoot)")) {
+            set(group, "rowgroup");
+            for (const row of group.querySelectorAll(":scope > tr")) {
+                set(row, "row");
+                for (const cell of row.querySelectorAll(":scope > :is(td, th)")) {
+                    if (cell.tagName === "TD") set(cell, "cell");
+                    else if (cell.getAttribute("scope") === "row") set(cell, "rowheader");
+                    else if (cell.getAttribute("scope") === "col") set(cell, "columnheader");
+                    else set(cell, group.tagName === "THEAD" ? "columnheader" : "rowheader");
+                }
+            }
+        }
     }
 
-    let { caption, class: className = '', children }: Props = $props();
+    $effect(() => {
+        const table = tableElement;
+        if (!table || !stacked) return;
+
+        restoreTableRoles(table);
+        const observer = new MutationObserver(() => restoreTableRoles(table));
+        observer.observe(table, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    });
 </script>
 
 <div
-    class="overflow-x-auto rounded-lg border border-border shadow-sm {className}"
+    class={cn("overflow-x-auto rounded-control border border-border bg-card shadow-sm", className)}
 >
-    <table class="w-full min-w-[20rem] border-collapse text-left text-sm text-body">
+    <table
+        bind:this={tableElement}
+        class={cn("w-full min-w-[20rem] border-collapse text-left text-sm text-body", stackedClass)}
+        role={stacked ? "table" : undefined}
+        aria-labelledby={stacked && caption ? captionId : undefined}
+        {...restProps}
+    >
         {#if caption}
-            <caption class="border-b border-border bg-base-50 px-4 py-3 text-left text-headline">
+            <caption
+                id={captionId}
+                class={captionHidden
+                    ? "sr-only"
+                    : "border-b border-border bg-surface-elevated px-4 py-3 text-left text-headline"}
+            >
                 {caption}
             </caption>
         {/if}

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

@@ -1,10 +1,22 @@
 import type { Snippet } from 'svelte';
-interface Props {
-    /** Visible `<caption>` when set. */
+import type { HTMLTableAttributes } from 'svelte/elements';
+/** `true` stacks at every width; a breakpoint name stacks below it. */
+export type TableStacked = boolean | "sm" | "md" | "lg";
+/** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the `<table>`. */
+type Props = Omit<HTMLTableAttributes, 'class' | 'children'> & {
+    /** `<caption>`, and the table's accessible name, when set. */
     caption?: string;
+    /** Keeps the caption as the accessible name but hides it from view. */
+    captionHidden?: boolean;
+    /**
+     * Lays each row out as a block of label and value pairs instead of
+     * scrolling sideways. The label of a cell is its `data-label`
+     * attribute, which the caller sets on every `<td>`.
+     */
+    stacked?: TableStacked;
     class?: string;
     children?: Snippet;
-}
+};
 declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/atoms/TemporalField.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+    import type { SizeVariant } from "../types/variants.js";
+    import { cn } from "../util/cn.js";
+    import Input from "./Input.svelte";
+
+    /**
+     * What DateField and TimeField share. Internal: it is not exported from
+     * the package, and its props are those of the two fields.
+     *
+     * It is an `Input` with a native `type`, so the box, the sizes, the label,
+     * the hint and the error message are Input's own and cannot drift from it.
+     * What is added here is only what a native date or time input needs to
+     * look like one: see the classes and the style block below.
+     */
+    interface Props {
+        kind: "date" | "time";
+        id?: string;
+        value?: string;
+        name?: string;
+        label?: string;
+        hideLabel?: boolean;
+        hint?: string;
+        error?: string;
+        min?: string;
+        max?: string;
+        step?: number | "any";
+        required?: boolean;
+        disabled?: boolean;
+        readonly?: boolean;
+        size?: SizeVariant;
+        class?: string;
+        "aria-describedby"?: string | null;
+    }
+
+    let {
+        kind,
+        id: idProp,
+        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 = "",
+        "aria-describedby": describedBy,
+        ...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);
+
+    /** What Input does not declare, but passes on to the `<input>`. */
+    const native = $derived({
+        min,
+        max,
+        step,
+        readonly: readonly || undefined,
+        "data-empty": value ? undefined : "",
+        ...restProps,
+    });
+
+    const fieldClasses = $derived(
+        cn(
+            "zabi-temporal-field",
+            // Its own look off: WebKit on iOS otherwise draws a date input as
+            // a button, with its own height and centred text. `block` and
+            // `min-w-0`: an empty one there has no intrinsic width.
+            "block min-w-0 appearance-none",
+            // The format the browser shows in an empty field ("mm/dd/yyyy")
+            // is a hint, not a value: in the placeholder colour.
+            !value && "text-input-placeholder",
+            className,
+        ),
+    );
+</script>
+
+<div>
+    <Input
+        id={idProp}
+        type={kind}
+        bind:value
+        {name}
+        {label}
+        {hideLabel}
+        {required}
+        {disabled}
+        {size}
+        {hint}
+        {error}
+        aria-describedby={describedBy}
+        class={fieldClasses}
+        {...native}
+    />
+</div>
+
+<style>
+    /*
+     * The parts of a native date or time input that utilities cannot reach.
+     * Global selectors under one class: the `<input>` is rendered by Input,
+     * so a scoped selector would not match it.
+     */
+
+    /* WebKit on iOS centres the value, and gives an empty one no height. */
+    :global(.zabi-temporal-field::-webkit-date-and-time-value) {
+        min-height: 1.5em;
+        text-align: start;
+    }
+
+    /* The editable segments in Chromium and desktop WebKit: no extra box
+       inside the field, so the text sits where an Input's does. */
+    :global(.zabi-temporal-field::-webkit-datetime-edit) {
+        padding: 0;
+    }
+
+    /* The browser's calendar or clock button. It follows `color-scheme`,
+       which the theme's dark block sets (see app.css); nothing here has to. */
+    :global(.zabi-temporal-field::-webkit-calendar-picker-indicator) {
+        cursor: pointer;
+    }
+    :global(.zabi-temporal-field:disabled::-webkit-calendar-picker-indicator),
+    :global(.zabi-temporal-field:read-only::-webkit-calendar-picker-indicator) {
+        cursor: default;
+    }
+
+</style>

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

@@ -0,0 +1,32 @@
+import type { SizeVariant } from "../types/variants.js";
+/**
+ * What DateField and TimeField share. Internal: it is not exported from
+ * the package, and its props are those of the two fields.
+ *
+ * It is an `Input` with a native `type`, so the box, the sizes, the label,
+ * the hint and the error message are Input's own and cannot drift from it.
+ * What is added here is only what a native date or time input needs to
+ * look like one: see the classes and the style block below.
+ */
+interface Props {
+    kind: "date" | "time";
+    id?: string;
+    value?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    hint?: string;
+    error?: string;
+    min?: string;
+    max?: string;
+    step?: number | "any";
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: SizeVariant;
+    class?: string;
+    "aria-describedby"?: string | null;
+}
+declare const TemporalField: import("svelte").Component<Props, {}, "value">;
+type TemporalField = ReturnType<typeof TemporalField>;
+export default TemporalField;

package/dist/atoms/Text.svelte

@@ -1,23 +1,35 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
 
-    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
-    type Size = 'sm' | 'md' | 'lg';
+    import { cn } from "../util/cn.js";
+    import type { OnFillTone } from "../types/variants.js";
+    type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error' | OnFillTone;
+    type Size = 'xs' | 'sm' | 'md' | 'lg';
+    type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
 
-    interface Props {
+    /** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the element. */
+    type Props = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
         as?: 'p' | 'span' | 'div';
         tone?: Tone;
         size?: Size;
+        /**
+         * Overrides the weight the tone implies — `label` sets `medium`,
+         * every other tone sets `normal`.
+         */
+        weight?: Weight;
         class?: string;
         children?: Snippet;
-    }
+    };
 
     let {
         as: Tag = 'p',
         tone = 'body',
         size = 'md',
+        weight,
         class: className = '',
         children,
+        ...restProps
     }: Props = $props();
 
     const toneClass: Record<Tone, string> = {
@@ -27,20 +39,49 @@
         headline: 'text-headline',
         label: 'text-label',
         error: 'text-error',
+        inherit: 'text-inherit',
+        'on-brand': 'text-on-brand',
+        'on-accent': 'text-on-accent',
     };
 
+    /**
+     * The bottom of the same ramp `Heading` sits on, so the two components
+     * share one scale rather than each carrying its own. `md` matches the
+     * metrics of an `h6` (text-base/leading-6) and `lg` those of an `h5`
+     * (text-lg/leading-7) — a Text set at that size lands on the same line
+     * box as the heading above it. Leading is stated rather than inherited
+     * from Tailwind's defaults so the shared steps stay locked together if
+     * the type scale is retuned.
+     */
     const sizeClass: Record<Size, string> = {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        xs: 'text-xs leading-4',
+        sm: 'text-sm leading-5',
+        md: 'text-base leading-6',
+        lg: 'text-lg leading-7',
+    };
+
+    const weightClass: Record<Weight, string> = {
+        normal: 'font-normal',
+        medium: 'font-medium',
+        semibold: 'font-semibold',
+        bold: 'font-bold',
     };
+
+    /** Labels read as labels by default; callers can still override. */
+    const defaultWeight: Weight = $derived(tone === 'label' ? 'medium' : 'normal');
+    const resolvedWeight = $derived(weight ?? defaultWeight);
+    const classes = $derived(
+        cn(toneClass[tone], sizeClass[size], weightClass[resolvedWeight], className),
+    );
 </script>
 
-<svelte:element
-    this={Tag}
-    class={[toneClass[tone], sizeClass[size], className].filter(Boolean).join(' ')}
->
-    {#if children}
-        {@render children()}
-    {/if}
-</svelte:element>
+<!-- One branch per tag, not a dynamic element: hydration takes a dynamic
+element out and puts it back, which blurs a link or a field inside it that the
+user had already tabbed to. -->
+{#if Tag === 'span'}
+    <span class={classes} {...restProps}>{@render children?.()}</span>
+{:else if Tag === 'div'}
+    <div class={classes} {...restProps}>{@render children?.()}</div>
+{:else}
+    <p class={classes} {...restProps}>{@render children?.()}</p>
+{/if}

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

@@ -1,13 +1,22 @@
 import type { Snippet } from 'svelte';
-type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error';
-type Size = 'sm' | 'md' | 'lg';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+import type { OnFillTone } from "../types/variants.js";
+type Tone = 'body' | 'description' | 'caption' | 'headline' | 'label' | 'error' | OnFillTone;
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
+/** Other attributes (`id`, `data-*`, `aria-*`, ...) land on the element. */
+type Props = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
     as?: 'p' | 'span' | 'div';
     tone?: Tone;
     size?: Size;
+    /**
+     * Overrides the weight the tone implies — `label` sets `medium`,
+     * every other tone sets `normal`.
+     */
+    weight?: Weight;
     class?: string;
     children?: Snippet;
-}
+};
 declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;