zabi-components 8.0.0 → 9.0.0

package/dist/atoms/SpeechBubble.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
+
+    type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+        /**
+         * The caption that names the quotation ("Säg så här i luren"), read
+         * before it. A string, or a snippet for a caption in the app's own
+         * text style.
+         */
+        label?: string | Snippet;
+        /** Keeps the caption for assistive technology and takes it off the screen. */
+        labelHidden?: boolean;
+        /** The side the tail is on: `end` (default) or `start`. Follows the text direction. */
+        side?: "end" | "start";
+        /**
+         * `ink` (default): the headline colour as fill, the page colour as
+         * text, so it is dark in light and light in dark. `paper`: the two
+         * swapped, for a bubble on a filled block. A pair of your own:
+         * `--zabi-bubble-fill` and `--zabi-bubble-text`, which win over both.
+         */
+        tone?: "ink" | "paper";
+        /**
+         * A drawing on the top corner of the tail's side, half over the edge
+         * (a sparkle, a quotation mark). Hidden from assistive technology;
+         * the app sizes and colours what it passes.
+         */
+        decoration?: Snippet;
+        class?: string;
+        /** The quoted text: phrasing content or paragraphs. */
+        children?: Snippet;
+    };
+
+    let {
+        label,
+        labelHidden = false,
+        side = "end",
+        tone = "ink",
+        decoration,
+        class: className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    /* The type is in utility classes, so a call-site class can replace it;
+       the quotation inherits it. */
+    const hostClasses = $derived(cn("speech-bubble flex flex-col gap-2 text-lg font-medium", className));
+</script>
+
+<figure
+    class={hostClasses}
+    data-side={side === "start" ? "start" : "end"}
+    data-tone={tone === "paper" ? "paper" : "ink"}
+    {...restProps}
+>
+    {#if label}
+        <figcaption class={cn("text-description text-sm font-normal", labelHidden && "sr-only")}>
+            {#if typeof label === "string"}{label}{:else}{@render label()}{/if}
+        </figcaption>
+    {/if}
+    <blockquote class="quote">
+        <span class="art" aria-hidden="true">
+            <span class="fill"></span>
+            <svg class="tail" viewBox="0 0 30 24" focusable="false">
+                <path d="M1 0C1 9 9 20 29 23 22 18 19 10 21 0Z" />
+            </svg>
+        </span>
+        {#if decoration}
+            <span class="decoration" aria-hidden="true">{@render decoration()}</span>
+        {/if}
+        {@render children?.()}
+    </blockquote>
+</figure>
+
+<style>
+    /*
+     * What an app may set, on the component or on anything around it (they
+     * inherit); read with a fallback and never declared here:
+     *   --zabi-bubble-fill    the bubble and its tail; default by `tone`
+     *   --zabi-bubble-text    the quoted text; default by `tone`
+     *   --zabi-bubble-radius  any border-radius value, the eight-value form
+     *                         included; default 1.5rem
+     *   --zabi-bubble-tilt    turns the fill and the tail, never the text;
+     *                         default 0deg
+     * Inside a filled block (`on-brand`, `on-accent`, `on-fill`) the headline
+     * role is the block's label colour; `--zabi-theme-headline` is the
+     * theme's own, kept by the block's parent, so the bubble is the same
+     * object on a block as on the page.
+     */
+    .quote {
+        --_bubble-ink: var(--zabi-theme-headline, var(--color-headline));
+        --_bubble-paper: var(--color-surface-base);
+        --_bubble-fill: var(--zabi-bubble-fill, var(--_bubble-ink));
+        position: relative;
+        isolation: isolate;
+        /* The tail hangs 0.8rem under the bubble; this keeps it off what follows. */
+        margin: 0 0 1rem;
+        padding: 1.125rem 1.25rem 1.25rem;
+        color: var(--zabi-bubble-text, var(--_bubble-paper));
+        font-style: normal;
+        overflow-wrap: anywhere;
+        -webkit-user-select: text;
+           -moz-user-select: text;
+                user-select: text;
+    }
+
+    .speech-bubble[data-tone="paper"] .quote {
+        --_bubble-fill: var(--zabi-bubble-fill, var(--_bubble-paper));
+        color: var(--zabi-bubble-text, var(--_bubble-ink));
+    }
+
+    .art {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        rotate: var(--zabi-bubble-tilt, 0deg);
+    }
+
+    .fill {
+        position: absolute;
+        inset: 0;
+        border-radius: var(--zabi-bubble-radius, 1.5rem);
+        background-color: var(--_bubble-fill);
+    }
+
+    /* A drawn curl that turns outward, towards the side it is on. Its top
+       0.4rem is under the fill; all of it is in rem, so it grows with the text. */
+    .tail {
+        position: absolute;
+        inset-block-start: calc(100% - 0.4rem);
+        inset-inline-end: 1.5rem;
+        inline-size: 1.5rem;
+        block-size: 1.2rem;
+        fill: var(--_bubble-fill);
+    }
+
+    .decoration {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        display: flex;
+        line-height: 0;
+        pointer-events: none;
+        translate: 25% -55%;
+    }
+
+    .speech-bubble[data-side="start"] .tail {
+        inset-inline: 1.5rem auto;
+        scale: -1 1;
+    }
+
+    .speech-bubble[data-side="start"] .decoration {
+        inset-inline: 0 auto;
+        translate: -25% -55%;
+    }
+
+    /* The path is drawn turning right; the other three cases follow from it. */
+    .speech-bubble:dir(rtl) .tail {
+        scale: -1 1;
+    }
+
+    .speech-bubble:dir(rtl) .decoration {
+        translate: -25% -55%;
+    }
+
+    .speech-bubble[data-side="start"]:dir(rtl) .tail {
+        scale: none;
+    }
+
+    .speech-bubble[data-side="start"]:dir(rtl) .decoration {
+        translate: 25% -55%;
+    }
+
+    /* Forced colours drop the fill: the shape is an outline in the text
+       colour, tilt and radius kept, and the tail is not drawn. */
+    @media (forced-colors: active) {
+        .fill {
+            outline: 0.125rem solid CanvasText;
+        }
+
+        .tail {
+            display: none;
+        }
+    }
+</style>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /**
+     * The caption that names the quotation ("Säg så här i luren"), read
+     * before it. A string, or a snippet for a caption in the app's own
+     * text style.
+     */
+    label?: string | Snippet;
+    /** Keeps the caption for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    /** The side the tail is on: `end` (default) or `start`. Follows the text direction. */
+    side?: "end" | "start";
+    /**
+     * `ink` (default): the headline colour as fill, the page colour as
+     * text, so it is dark in light and light in dark. `paper`: the two
+     * swapped, for a bubble on a filled block. A pair of your own:
+     * `--zabi-bubble-fill` and `--zabi-bubble-text`, which win over both.
+     */
+    tone?: "ink" | "paper";
+    /**
+     * A drawing on the top corner of the tail's side, half over the edge
+     * (a sparkle, a quotation mark). Hidden from assistive technology;
+     * the app sizes and colours what it passes.
+     */
+    decoration?: Snippet;
+    class?: string;
+    /** The quoted text: phrasing content or paragraphs. */
+    children?: Snippet;
+};
+declare const SpeechBubble: import("svelte").Component<Props, {}, "">;
+type SpeechBubble = ReturnType<typeof SpeechBubble>;
+export default SpeechBubble;

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/Stat.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { cn } from "../util/cn.js";
+    import { displayVoice } from "../util/display-voice.js";
+
+    type StatSize = "sm" | "md" | "lg";
+
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+        /** The figure, shown as given: the app formats numbers for its locale. */
+        value: string | number;
+        label?: string;
+        /** Drawn after the value, smaller, on the same baseline ("av 19"). */
+        unit?: string;
+        size?: StatSize;
+        align?: "start" | "center" | "end";
+        labelPosition?: "below" | "above";
+        class?: string;
+        /** Replaces `value` for a figure that needs markup. */
+        children?: Snippet;
+    };
+
+    let {
+        value,
+        label = "",
+        unit = "",
+        size = "md",
+        align = "start",
+        labelPosition = "below",
+        class: className = "",
+        children,
+        ...restProps
+    }: Props = $props();
+
+    /** Value 24 / 36 / 48px, unit 14 / 16 / 20px, label 12 / 14 / 14px. */
+    const sizeClasses: Record<StatSize, { value: string; unit: string; label: string }> = {
+        sm: { value: "text-2xl", unit: "text-sm", label: "text-xs" },
+        md: { value: "text-4xl", unit: "text-base", label: "text-sm" },
+        lg: { value: "text-5xl", unit: "text-xl", label: "text-sm" },
+    };
+    const alignClasses = {
+        start: "items-start text-start",
+        center: "items-center text-center",
+        end: "items-end text-end",
+    } as const;
+
+    const s = $derived(sizeClasses[size] ?? sizeClasses.md);
+    const hostClasses = $derived(
+        cn(`flex flex-col gap-1 ${alignClasses[align] ?? alignClasses.start} ${className}`),
+    );
+</script>
+
+{#snippet figure()}
+    <div class="inline-flex items-baseline gap-1 whitespace-nowrap">
+        <span class="font-display text-headline tabular-nums leading-none {displayVoice} {s.value}">
+            {#if children}{@render children()}{:else}{value}{/if}
+        </span>
+        {#if unit}
+            <span class="text-description font-medium {s.unit}">{unit}</span>
+        {/if}
+    </div>
+{/snippet}
+
+<div class={hostClasses} {...restProps}>
+    {#if labelPosition === "above"}
+        {#if label}<span class="text-description {s.label}">{label}</span>{/if}
+        {@render figure()}
+    {:else}
+        {@render figure()}
+        {#if label}<span class="text-description {s.label}">{label}</span>{/if}
+    {/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type StatSize = "sm" | "md" | "lg";
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class"> & {
+    /** The figure, shown as given: the app formats numbers for its locale. */
+    value: string | number;
+    label?: string;
+    /** Drawn after the value, smaller, on the same baseline ("av 19"). */
+    unit?: string;
+    size?: StatSize;
+    align?: "start" | "center" | "end";
+    labelPosition?: "below" | "above";
+    class?: string;
+    /** Replaces `value` for a figure that needs markup. */
+    children?: Snippet;
+};
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/atoms/Table.svelte

@@ -1,23 +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={cn("overflow-x-auto rounded-control 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;