zabi-components 8.0.0 → 9.0.0

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type SkeletonStrings } from "../util/skeleton.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;
+};
+declare const SkeletonGroup: import("svelte").Component<Props, {}, "">;
+type SkeletonGroup = ReturnType<typeof SkeletonGroup>;
+export default SkeletonGroup;

package/dist/atoms/Slider.svelte

@@ -0,0 +1,344 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import type { SemanticVariant, SizeVariant } from "../types/variants.js";
+    import { generateId } from "../util/ssr-safe.js";
+    import { cn } from "../util/cn.js";
+
+    /** Other attributes (`data-*`, `aria-*`, `list`, ...) land on the `<input>`. */
+    type Props = Omit<
+        HTMLInputAttributes,
+        "class" | "size" | "type" | "value" | "min" | "max" | "step" | "id"
+    > & {
+        /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+        id?: string;
+        /** Current value; supports `bind:value`. Starts at `min` when not given. */
+        value?: number;
+        min?: number;
+        max?: number;
+        step?: number;
+        name?: string;
+        /** Extra classes for the host element. */
+        class?: string;
+        label?: string;
+        /** True when FormField supplies the visible `<label>`. */
+        hideLabel?: boolean;
+        disabled?: boolean;
+        /** Height of the row, on the scale Input and Button use. */
+        size?: SizeVariant;
+        /** Colours the message; `error` also marks the input invalid. */
+        variant?: SemanticVariant;
+        /** Helper or error text below the slider. */
+        message?: string;
+        /** Shows the current value beside the label. */
+        showValue?: boolean;
+        /**
+         * Turns the value into text ("40 %", "2 h"). It is what `showValue`
+         * shows, and what assistive technology reads instead of the bare
+         * number.
+         */
+        formatValue?: (value: number) => string;
+        /** Native `input` event: fires while the thumb moves. */
+        oninput?: (event: Event) => void;
+        /** Native `change` event: fires when the thumb is released. */
+        onchange?: (event: Event) => void;
+    };
+
+    let {
+        id: idProp,
+        min = 0,
+        max = 100,
+        step = 1,
+        value = $bindable<Exclude<Props["value"], undefined>>(),
+        name = "",
+        class: className = "",
+        label = "",
+        hideLabel = false,
+        disabled = false,
+        size = "md",
+        variant = "default",
+        message = "",
+        showValue = false,
+        formatValue,
+        oninput,
+        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 = min;
+    };
+    applyDefaults();
+    $effect.pre(applyDefaults);
+
+    const fallbackId = generateId("slider");
+    const inputId = $derived(idProp ?? fallbackId);
+
+    /**
+     * Row heights on the shared control scale (32 / 40 / 48), so a slider
+     * lines up with an Input or a Button of the same size beside it. The
+     * `<input>` itself is 44px tall in the two smaller rows, pulled back in
+     * with a negative margin: the whole input takes the pointer, so that is
+     * the touch target, and the row does not grow for it.
+     */
+    const sizeClass = $derived.by(() => {
+        if (size === "sm") return { box: "h-8 pointer-coarse:min-h-11", input: "h-11 -my-1.5" };
+        if (size === "lg") return { box: "h-12", input: "h-12" };
+        return { box: "h-10 pointer-coarse:min-h-11", input: "h-11 -my-0.5" };
+    });
+
+    /** Where the thumb sits, 0 to 1; drives the filled part of the track. */
+    const ratio = $derived.by(() => {
+        if (!(max > min)) return 0;
+        return Math.max(0, Math.min(1, (value - min) / (max - min)));
+    });
+
+    const valueText = $derived(formatValue ? formatValue(value) : String(value));
+    const labelVisible = $derived(!!label && !hideLabel);
+
+    // The `-text` step clears 4.5:1 on a page surface, as in Input.
+    const messageClasses = $derived.by(() => {
+        const base = "text-sm mt-2";
+        if (variant === "error") return `text-error-text ${base}`;
+        if (variant === "success") return `text-success-text ${base}`;
+        if (variant === "warning") return `text-warning-text ${base}`;
+        return `text-description ${base}`;
+    });
+</script>
+
+{#snippet valueOutput()}
+    <output
+        for={inputId}
+        class={cn(
+            "shrink-0 text-sm tabular-nums",
+            disabled ? "text-action-disabled-text" : "text-description",
+        )}
+        data-slider-value
+    >
+        {valueText}
+    </output>
+{/snippet}
+
+<div class={cn(className)}>
+    {#if labelVisible}
+        <div class="mb-2 flex items-baseline justify-between gap-3">
+            <label for={inputId} class="block text-sm font-medium text-label">{label}</label>
+            {#if showValue}
+                {@render valueOutput()}
+            {/if}
+        </div>
+    {/if}
+    <div class={cn("flex items-center gap-3", sizeClass.box)}>
+        <!-- A native range input: keyboard, touch, right-to-left and form
+        submission come with it. Only its looks are replaced, below. -->
+        <input
+            type="range"
+            id={inputId}
+            class={cn("slider min-w-0 flex-1", sizeClass.input)}
+            style:--zabi-slider-ratio={ratio}
+            data-size={size}
+            bind:value
+            {min}
+            {max}
+            {step}
+            name={name || undefined}
+            {disabled}
+            {oninput}
+            {onchange}
+            aria-valuetext={formatValue ? valueText : undefined}
+            aria-invalid={variant === "error" ? "true" : undefined}
+            aria-describedby={message ? `${inputId}-message` : undefined}
+            {...restProps}
+        />
+        {#if showValue && !labelVisible}
+            {@render valueOutput()}
+        {/if}
+    </div>
+    {#if message}
+        <p
+            id={`${inputId}-message`}
+            class={messageClasses}
+            role={variant === "error" ? "alert" : undefined}
+        >
+            {message}
+        </p>
+    {/if}
+</div>
+
+<style>
+    /*
+     * The parts of a range input are vendor pseudo-elements, which utilities
+     * cannot reach without an arbitrary variant per declaration. WebKit/Blink
+     * and Gecko each get their own rules: one unknown pseudo-element in a
+     * selector list drops the whole rule.
+     */
+    .slider {
+        --zabi-slider-thumb: 1.25rem;
+        --zabi-slider-track: 0.375rem;
+        --zabi-slider-fill: var(--color-action-primary);
+        --zabi-slider-rest: var(--color-control-track);
+        --zabi-slider-halo: 0 0 0 0 transparent;
+        /* The fill ends under the centre of the thumb, which travels less
+           than the full width. */
+        --zabi-slider-stop: calc(
+            var(--zabi-slider-ratio, 0) * (100% - var(--zabi-slider-thumb)) +
+                var(--zabi-slider-thumb) / 2
+        );
+        -webkit-appearance: none;
+        -moz-appearance: none;
+             appearance: none;
+        background: transparent;
+        cursor: pointer;
+        outline: none;
+        /* A touch that starts on the slider moves the thumb; vertical scrolling stays with the page. */
+        touch-action: pan-y;
+    }
+
+    .slider[data-size="sm"] {
+        --zabi-slider-thumb: 1rem;
+        --zabi-slider-track: 0.25rem;
+    }
+
+    .slider[data-size="lg"] {
+        --zabi-slider-thumb: 1.5rem;
+        --zabi-slider-track: 0.5rem;
+    }
+
+    /* Only where a pointer can hover: after a tap, `:hover` stays on the slider until the next tap elsewhere. */
+    @media (hover: hover) {
+        .slider:hover {
+            --zabi-slider-fill: var(--color-action-primary-hover);
+            --zabi-slider-rest: var(--color-control-track-hover);
+            --zabi-slider-halo: 0 0 0 4px var(--color-surface-hover);
+        }
+    }
+
+    .slider:active {
+        --zabi-slider-fill: var(--color-action-primary-active);
+        --zabi-slider-rest: var(--color-control-track-active);
+        --zabi-slider-halo: 0 0 0 6px var(--color-surface-active);
+    }
+
+    /* Same geometry as `.focus-ring`: a 2px gap, then a 2px ring, on the thumb. */
+    .slider:focus-visible {
+        --zabi-slider-halo:
+            0 0 0 2px var(--color-focus-ring-offset), 0 0 0 4px var(--color-focus-ring);
+    }
+
+    .slider:disabled {
+        --zabi-slider-fill: var(--color-action-disabled-text);
+        --zabi-slider-rest: var(--color-action-disabled);
+        --zabi-slider-halo: 0 0 0 0 transparent;
+        cursor: not-allowed;
+    }
+
+    /* WebKit and Blink: one track, painted in two parts. */
+    .slider::-webkit-slider-runnable-track {
+        height: var(--zabi-slider-track);
+        border-radius: 9999px;
+        background: linear-gradient(
+            to right,
+            var(--zabi-slider-fill) 0 var(--zabi-slider-stop),
+            var(--zabi-slider-rest) var(--zabi-slider-stop) 100%
+        );
+    }
+
+    .slider:dir(rtl)::-webkit-slider-runnable-track {
+        background: linear-gradient(
+            to left,
+            var(--zabi-slider-fill) 0 var(--zabi-slider-stop),
+            var(--zabi-slider-rest) var(--zabi-slider-stop) 100%
+        );
+    }
+
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        box-sizing: border-box;
+        width: var(--zabi-slider-thumb);
+        height: var(--zabi-slider-thumb);
+        margin-top: calc((var(--zabi-slider-track) - var(--zabi-slider-thumb)) / 2);
+        border: 2px solid var(--zabi-slider-fill);
+        border-radius: 9999px;
+        background: var(--color-card);
+        box-shadow: var(--zabi-slider-halo);
+        -webkit-transition: box-shadow 150ms;
+        transition: box-shadow 150ms;
+    }
+
+    /* Gecko: the filled part is its own pseudo-element and follows the direction. */
+    .slider::-moz-range-track {
+        height: var(--zabi-slider-track);
+        border-radius: 9999px;
+        background: var(--zabi-slider-rest);
+    }
+
+    .slider::-moz-range-progress {
+        height: var(--zabi-slider-track);
+        border-radius: 9999px;
+        background: var(--zabi-slider-fill);
+    }
+
+    .slider::-moz-range-thumb {
+        box-sizing: border-box;
+        width: var(--zabi-slider-thumb);
+        height: var(--zabi-slider-thumb);
+        border: 2px solid var(--zabi-slider-fill);
+        border-radius: 9999px;
+        background: var(--color-card);
+        box-shadow: var(--zabi-slider-halo);
+        -moz-transition: box-shadow 150ms;
+        transition: box-shadow 150ms;
+    }
+
+    /* Forced colours: the fills are gone and a gradient is not trusted to stay,
+       so the filled part is `Highlight` on a `Canvas` track with a `ButtonText`
+       edge, and a disabled slider is `GrayText`. The thumb keeps its ring. */
+    @media (forced-colors: active) {
+        .slider {
+            --zabi-slider-fill: Highlight;
+            --zabi-slider-rest: Canvas;
+        }
+
+        .slider:disabled {
+            --zabi-slider-fill: GrayText;
+            --zabi-slider-rest: Canvas;
+        }
+
+        .slider::-webkit-slider-runnable-track {
+            box-sizing: border-box;
+            border: 1px solid ButtonText;
+        }
+
+        .slider::-moz-range-track {
+            box-sizing: border-box;
+            border: 1px solid ButtonText;
+        }
+
+        .slider:disabled::-webkit-slider-runnable-track,
+        .slider:disabled::-moz-range-track {
+            border-color: GrayText;
+        }
+
+        .slider::-webkit-slider-thumb,
+        .slider::-moz-range-thumb {
+            background: Canvas;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .slider::-webkit-slider-thumb {
+            -webkit-transition: none;
+            transition: none;
+        }
+
+        .slider::-moz-range-thumb {
+            -moz-transition: none;
+            transition: none;
+        }
+    }
+</style>

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

@@ -0,0 +1,40 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { SemanticVariant, SizeVariant } from "../types/variants.js";
+/** Other attributes (`data-*`, `aria-*`, `list`, ...) land on the `<input>`. */
+type Props = Omit<HTMLInputAttributes, "class" | "size" | "type" | "value" | "min" | "max" | "step" | "id"> & {
+    /** Omit to auto-generate; pair with FormField `id` when used inside FormField. */
+    id?: string;
+    /** Current value; supports `bind:value`. Starts at `min` when not given. */
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    name?: string;
+    /** Extra classes for the host element. */
+    class?: string;
+    label?: string;
+    /** True when FormField supplies the visible `<label>`. */
+    hideLabel?: boolean;
+    disabled?: boolean;
+    /** Height of the row, on the scale Input and Button use. */
+    size?: SizeVariant;
+    /** Colours the message; `error` also marks the input invalid. */
+    variant?: SemanticVariant;
+    /** Helper or error text below the slider. */
+    message?: string;
+    /** Shows the current value beside the label. */
+    showValue?: boolean;
+    /**
+     * Turns the value into text ("40 %", "2 h"). It is what `showValue`
+     * shows, and what assistive technology reads instead of the bare
+     * number.
+     */
+    formatValue?: (value: number) => string;
+    /** Native `input` event: fires while the thumb moves. */
+    oninput?: (event: Event) => void;
+    /** Native `change` event: fires when the thumb is released. */
+    onchange?: (event: Event) => void;
+};
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/atoms/Sparkline.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import type { SVGAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
+    import { chartColor, linePath, type ChartColor } from "../util/chart.js";
+
+    /**
+     * A small line with no axes, for a trend beside a figure or in a table
+     * cell. Plain SVG, an image named by `label`; it has no table of its
+     * own, so say what the number is in the text next to it.
+     *
+     * It is 5rem by 1.5rem; size it with `class` (`w-full h-8`). The line
+     * stretches to the box and keeps its thickness. A dot marks the last
+     * value: the one the figure beside it is.
+     */
+    type Props = Omit<SVGAttributes<SVGSVGElement>, "class" | "points" | "min" | "max" | "color"> & {
+        /** The values, in order. `null` leaves a gap. */
+        points: Array<number | null>;
+        /** What the image is called ("Results, last eight weeks: rising"). Without it the line is decoration, hidden from assistive technology. */
+        label?: string;
+        /** A theme colour by name or any CSS colour. Without it, the first series colour. */
+        color?: ChartColor;
+        /** The bottom of the scale. Without it, the lowest value. */
+        min?: number;
+        /** The top of the scale. Without it, the highest value. */
+        max?: number;
+        class?: string;
+    };
+
+    let { points, label, color, min, max, class: className = "", ...restProps }: Props = $props();
+
+    const isValue = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
+
+    const placed = $derived.by(() => {
+        const values = points.filter(isValue);
+        if (!values.length) return [];
+        const low = isValue(min) ? min : Math.min(...values);
+        const high = isValue(max) ? max : Math.max(...values);
+        const span = high - low;
+        const last = Math.max(points.length - 1, 1);
+        // 100 by 100, with room above and below for the stroke; the box stretches it.
+        return points.map((value, index) =>
+            isValue(value)
+                ? {
+                      x: points.length === 1 ? 50 : (index / last) * 100,
+                      y: span > 0 ? 92 - (Math.min(Math.max(value, low), high) - low) / span * 84 : 50,
+                  }
+                : null,
+        );
+    });
+    const path = $derived(linePath(placed));
+    const single = $derived(points.filter(isValue).length === 1);
+    /** One value alone is a dash, not a dot that stretches. */
+    const d = $derived(single && path ? "M0 50L100 50" : path);
+    /**
+     * The last value, as a line of no length with a round end: the box may
+     * stretch the drawing, and a circle would stretch with it.
+     */
+    const end = $derived.by(() => {
+        const at = single ? { x: 100, y: 50 } : [...placed].reverse().find((point) => point !== null);
+        return at ? `M${Math.round(at.x * 100) / 100} ${Math.round(at.y * 100) / 100}h0` : "";
+    });
+</script>
+
+<svg
+    class={cn("zabi-sparkline inline-block h-6 w-20 align-middle", className)}
+    viewBox="0 0 100 100"
+    preserveAspectRatio="none"
+    role={label ? "img" : undefined}
+    aria-label={label || undefined}
+    aria-hidden={label ? undefined : "true"}
+    focusable="false"
+    style:--_c={chartColor(color, 0)}
+    {...restProps}
+>
+    <path class="line" {d} />
+    {#if end}<path class="end" d={end} />{/if}
+</svg>
+
+<style>
+    /* The colour an app may set, on the line or on anything around it; read
+       with a fallback (in util/chart.ts) and never declared here: --zabi-chart-1 */
+    .zabi-sparkline {
+        overflow: visible;
+    }
+
+    .line {
+        fill: none;
+        stroke: var(--_c);
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+    }
+
+    .end {
+        fill: none;
+        stroke: var(--_c);
+        stroke-width: 6;
+        stroke-linecap: round;
+        vector-effect: non-scaling-stroke;
+    }
+
+    @media (forced-colors: active) {
+        .line,
+        .end {
+            stroke: CanvasText;
+        }
+    }
+</style>

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

@@ -0,0 +1,27 @@
+import type { SVGAttributes } from "svelte/elements";
+import { type ChartColor } from "../util/chart.js";
+/**
+ * A small line with no axes, for a trend beside a figure or in a table
+ * cell. Plain SVG, an image named by `label`; it has no table of its
+ * own, so say what the number is in the text next to it.
+ *
+ * It is 5rem by 1.5rem; size it with `class` (`w-full h-8`). The line
+ * stretches to the box and keeps its thickness. A dot marks the last
+ * value: the one the figure beside it is.
+ */
+type Props = Omit<SVGAttributes<SVGSVGElement>, "class" | "points" | "min" | "max" | "color"> & {
+    /** The values, in order. `null` leaves a gap. */
+    points: Array<number | null>;
+    /** What the image is called ("Results, last eight weeks: rising"). Without it the line is decoration, hidden from assistive technology. */
+    label?: string;
+    /** A theme colour by name or any CSS colour. Without it, the first series colour. */
+    color?: ChartColor;
+    /** The bottom of the scale. Without it, the lowest value. */
+    min?: number;
+    /** The top of the scale. Without it, the highest value. */
+    max?: number;
+    class?: string;
+};
+declare const Sparkline: import("svelte").Component<Props, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;