zabi-components 8.1.0 → 9.0.0

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-neutral-subtle", 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>

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

@@ -295,6 +295,41 @@
         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;

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;

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;