zabi-components 8.0.0 → 9.0.0

package/dist/molecules/AppBar.svelte.d.ts

@@ -0,0 +1,131 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ScrollEdgeMode } from "../util/scroll-edge.js";
+/**
+ * The bar at the top of a phone screen: where you are, the way back, and
+ * at most two things to do here.
+ *
+ * It is one row, 56px tall, whenever the title has 72px or more beside
+ * the controls, at every text size. The bar is chrome: when the reader
+ * enlarges text, the room belongs to the page under it. So the controls
+ * are sized in px (48px targets), the title grows with the text only up
+ * to 1.3 times its size, and a title too long for the room it has is cut
+ * with an ellipsis (after two lines with `titleLines={2}`). The heading
+ * keeps its full text for a screen reader; keep the visible start of it
+ * enough to name the screen.
+ *
+ * The title never has less than 72px. Where the back control, `leading`
+ * and the actions leave it less (a wide chip in `leading`, a very narrow
+ * bar), it takes a second row of its own, as wide as the bar, and they
+ * stay together on the first.
+ *
+ * The bar is flush with the page and page-coloured at rest. Once content
+ * has scrolled under it, it turns to frosted glass with a hairline below
+ * it. Inside an `AppShell` the shell says when; on a page of its own the
+ * bar watches the window or its nearest scrolling ancestor.
+ *
+ * With `largeTitle` the title is also drawn large on a second row under
+ * the bar. That row scrolls away with the content (nothing is animated),
+ * the 56px row stays, and its own small title fades in once the large
+ * one has gone under it. The heading is the large one.
+ */
+type Props = Omit<HTMLAttributes<HTMLElement>, "class" | "title"> & {
+    /** The name of the screen, as a heading. */
+    title?: string;
+    /** Heading level of the title. 1 when the bar names the page. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Shows the back control as a link to this address. */
+    backHref?: string;
+    /**
+     * Called when the back control is activated. On its own it makes the
+     * control a button; with `backHref` it runs before the link is
+     * followed, and `event.preventDefault()` stops that.
+     */
+    onback?: (event: MouseEvent) => void;
+    /** Accessible name of the back control. */
+    backLabel?: string;
+    /**
+     * Hides the bar while the page scrolls down and brings it back as
+     * soon as it scrolls up. It follows the nearest scrolling ancestor
+     * (the one in `AppShell`), or the window. The bar never hides while
+     * keyboard focus is inside it, and focus arriving from the keyboard
+     * brings it back. Focus left behind by a tap or a click does not hold
+     * it: it hides as usual, and the next key press brings it back.
+     */
+    collapseOnScroll?: boolean;
+    /**
+     * How many lines the title may take before it is cut with an
+     * ellipsis. The bar is taller only while the second line is in use.
+     */
+    titleLines?: 1 | 2;
+    /**
+     * Before the title, after the back control: a logo, an avatar, a
+     * chip. Rendered as it is, a child of the bar's row. It keeps its
+     * width; when that leaves the title under 72px the title moves to a
+     * row of its own, and a `leading` wider than the row is held to the
+     * row's width.
+     * The bar's row is on a fixed pixel scale (`--spacing: 4px` on the
+     * row), so the bar's own controls do not grow with the text size.
+     * Size what you place here on the same scale (Tailwind numeric
+     * classes such as `size-9`, or `calc(var(--spacing) * 9)`), not in
+     * rem, or it grows at 200% text while the bar's controls do not.
+     */
+    leading?: Snippet;
+    /**
+     * After the title. At most two icon buttons, at `size="lg"` so each is
+     * a 48px target; put anything more in a menu. Their size does not
+     * grow with the text size here: inside the bar the spacing scale is
+     * in px.
+     * The bar's row is on a fixed pixel scale (`--spacing: 4px` on the
+     * row), so the bar's own controls do not grow with the text size.
+     * Size what you place here on the same scale (Tailwind numeric
+     * classes such as `size-9`, or `calc(var(--spacing) * 9)`), not in
+     * rem, or it grows at 200% text while the bar's controls do not.
+     */
+    actions?: Snippet;
+    /**
+     * When the bar shows the glass and the hairline. `auto` follows the
+     * scroll position: flush at the top, glass once content is under it.
+     * `always` is glass all the time, `never` flush all the time.
+     */
+    scrollEdge?: ScrollEdgeMode;
+    /**
+     * Draws the title large (30px bold, two lines at most) on a second row
+     * under the bar. It scrolls away with the content; the bar keeps its
+     * 56px row, which shows the title small once the large one is gone.
+     * The heading is the large title; the small one is hidden from
+     * assistive technology. Needs `title`. `collapseOnScroll` is ignored
+     * with it. Before the bar has been measured (the server, no scripts)
+     * the whole header simply sticks and the large title stays.
+     */
+    largeTitle?: boolean;
+    /**
+     * The bar's fill. `default` is the page colour at rest. `transparent`
+     * has none at rest, for a canvas, an image or a colour block laid
+     * behind the bar, and takes the glass once content is under it.
+     * `brand` is the brand colour with on-brand text and controls, at rest
+     * and scrolled, with no glass and no hairline, so a brand block
+     * directly under the bar joins it. With `largeTitle` the large row is
+     * part of the brand block.
+     * `inherit` is for a bar inside a block of another colour: no fill of
+     * its own, no glass and no hairline at any scroll position, and the
+     * title, back control, actions, links, borders and focus rings take
+     * the colour the block gives the text. A sticky bar that has to cover
+     * scrolling content takes its fill from the app:
+     * `class="[--color-bar:var(--my-block-colour)]"`.
+     */
+    tone?: "default" | "transparent" | "brand" | "inherit";
+    /**
+     * `sticky` (default) keeps the bar at the top of what scrolls.
+     * `static` leaves it where it is in the page, for a bar that sits
+     * inside a block of the content: it scrolls away with the block, is
+     * never glass, and `collapseOnScroll` and the condensing of
+     * `largeTitle` do nothing. `class="static"`, the 8.1 way to say this,
+     * is read as `position="static"`.
+     */
+    position?: "sticky" | "static";
+    class?: string;
+};
+declare const AppBar: import("svelte").Component<Props, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

package/dist/molecules/AvatarGroup.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Avatar from "../atoms/Avatar.svelte";
+    import {
+        DEFAULT_AVATAR_GROUP_STRINGS,
+        splitGroup,
+        type AvatarGroupStrings,
+        type AvatarPerson,
+        type AvatarSize,
+    } from "../util/avatar.js";
+    import { cn } from "../util/cn.js";
+
+    /**
+     * A row of overlapping avatars: who is going, the members, who rated.
+     *
+     * It is a list, each avatar named by its person. Past `max` the rest
+     * stand behind a "+3" of the same size and shape. Not interactive.
+     *
+     * Between two avatars is a ring in the colour of the surface under the
+     * group. It cannot read that colour, so it is the raised surface (a
+     * card) unless the group is told otherwise:
+     *
+     * ```svelte
+     * <AvatarGroup {people} style="--zabi-avatar-ring: var(--color-surface-base)" />
+     * ```
+     *
+     * Other attributes (`id`, `data-*`, `style`, ...) land on the list.
+     */
+    type Props = Omit<HTMLAttributes<HTMLUListElement>, "class" | "aria-label"> & {
+        /** The people, in the order they are shown. */
+        people: AvatarPerson[];
+        /**
+         * How many are shown before the rest become "+N". Below 1 is 1. One
+         * person too many is shown and not counted: there is no "+1".
+         */
+        max?: number;
+        /** Diameter of each avatar: 24, 32 and 48px. */
+        size?: "sm" | "md" | "lg";
+        /** Accessible name of the list ("Who's going"). */
+        label?: string;
+        /** Overrides for the built-in strings. */
+        strings?: Partial<AvatarGroupStrings>;
+        /** The language the initials are worked out in; passed to each Avatar. Without it, the page's. */
+        locale?: string;
+        /** Extra classes for the list. */
+        class?: string;
+    };
+
+    let {
+        people,
+        max = 4,
+        size = "md",
+        label,
+        strings,
+        locale,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("avatarGroup");
+    const text = $derived(mergeStrings(DEFAULT_AVATAR_GROUP_STRINGS, provided(), strings));
+    const split = $derived(splitGroup(people.length, max));
+    const shown = $derived(people.slice(0, split.shown));
+    const hiddenNames = $derived(people.slice(split.shown).map((person) => person.name));
+
+    // A quarter of the circle lies under the next one.
+    const OVERLAP: Record<AvatarSize, string> = {
+        sm: "-ms-[6px]",
+        md: "-ms-[8px]",
+        lg: "-ms-[12px]",
+    };
+    const CHIP: Record<AvatarSize, string> = {
+        sm: "size-[24px] text-[10px]",
+        md: "size-[32px] text-[12px]",
+        lg: "size-[48px] text-[16px]",
+    };
+
+    /** The ring that parts one circle from the next. A shadow, so it takes no room; forced colours draw the avatars' own borders instead. */
+    const ring = "rounded-pill shadow-[0_0_0_2px_var(--zabi-avatar-ring,var(--color-surface-raised))]";
+</script>
+
+<!-- `role`, because a list without bullets loses its role in Safari. -->
+<ul
+    class={cn("m-0 flex list-none items-center p-0", className)}
+    role="list"
+    aria-label={label || undefined}
+    data-avatar-group
+    data-size={size}
+    {...restProps}
+>
+    {#each shown as person, index (index)}
+        <li class={cn("flex", index > 0 && (OVERLAP[size] ?? OVERLAP.md))}>
+            <Avatar name={person.name} src={person.src} children={person.picture} {size} {locale} class={ring} />
+        </li>
+    {/each}
+    {#if split.hidden > 0}
+        <li class={cn("flex", OVERLAP[size] ?? OVERLAP.md)}>
+            <!-- The same circle as an avatar, in the neutral pair: it is a count, not a person. -->
+            <span
+                class={cn(
+                    "inline-flex shrink-0 items-center justify-center border border-transparent bg-neutral-subtle leading-none font-semibold text-neutral-text tabular-nums select-none",
+                    CHIP[size] ?? CHIP.md,
+                    ring,
+                )}
+                role="img"
+                aria-label={text.more(split.hidden, hiddenNames)}
+                data-avatar-more
+            >
+                <span aria-hidden="true">+{split.hidden}</span>
+            </span>
+        </li>
+    {/if}
+</ul>

package/dist/molecules/AvatarGroup.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type AvatarGroupStrings, type AvatarPerson } from "../util/avatar.js";
+/**
+ * A row of overlapping avatars: who is going, the members, who rated.
+ *
+ * It is a list, each avatar named by its person. Past `max` the rest
+ * stand behind a "+3" of the same size and shape. Not interactive.
+ *
+ * Between two avatars is a ring in the colour of the surface under the
+ * group. It cannot read that colour, so it is the raised surface (a
+ * card) unless the group is told otherwise:
+ *
+ * ```svelte
+ * <AvatarGroup {people} style="--zabi-avatar-ring: var(--color-surface-base)" />
+ * ```
+ *
+ * Other attributes (`id`, `data-*`, `style`, ...) land on the list.
+ */
+type Props = Omit<HTMLAttributes<HTMLUListElement>, "class" | "aria-label"> & {
+    /** The people, in the order they are shown. */
+    people: AvatarPerson[];
+    /**
+     * How many are shown before the rest become "+N". Below 1 is 1. One
+     * person too many is shown and not counted: there is no "+1".
+     */
+    max?: number;
+    /** Diameter of each avatar: 24, 32 and 48px. */
+    size?: "sm" | "md" | "lg";
+    /** Accessible name of the list ("Who's going"). */
+    label?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<AvatarGroupStrings>;
+    /** The language the initials are worked out in; passed to each Avatar. Without it, the page's. */
+    locale?: string;
+    /** Extra classes for the list. */
+    class?: string;
+};
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/molecules/BarChart.svelte

@@ -0,0 +1,381 @@
+<script lang="ts">
+    import type { HTMLAttributes } from "svelte/elements";
+    import Table from "../atoms/Table.svelte";
+    import { cn } from "../util/cn.js";
+    import {
+        CHART_GLASS,
+        chartColor,
+        chartFormatter,
+        barPath,
+        chartScale,
+        chartTextScale,
+        labelEvery,
+        measureWidth,
+        widestText,
+        type ChartColor,
+        type ChartDatum,
+        type ChartFormat,
+    } from "../util/chart.js";
+
+    /**
+     * A bar chart of one set of values, drawn as plain SVG: upright bars from
+     * a zero line, a label under each and its value over it. A bar is drawn
+     * the way `Progress` draws its fill, and with a `yMax` each bar stands in
+     * a track up to it, as a `Progress` does: so many of so many.
+     *
+     * It is a `figure`: the `label` is its caption, the drawing is hidden
+     * from assistive technology, and the same numbers are in a real table
+     * (off screen unless `showTable`). The bars are one colour, since the
+     * labels tell them apart; a datum may carry its own.
+     */
+    type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+        /** The bars, in order: a `label`, a `value`, and a `color` of its own if it needs one. */
+        data: ChartDatum[];
+        /** The colour of the bars: a theme colour by name or any CSS colour. Without it, the first series colour. */
+        color?: ChartColor;
+        /** The top of the value axis, and the ceiling each bar is measured against: with it every bar stands in a track that reaches it. Without it, the highest value rounded up to a tick, and no tracks. */
+        yMax?: number;
+        /** How a value is written: `number` (default), `percent` (72 is "72 %"), or a function. */
+        yFormat?: ChartFormat;
+        /** Height of the drawing in px. The width is the container's. */
+        height?: number;
+        /** The caption, and what the chart is called. */
+        label: string;
+        /** Keeps the caption for assistive technology and takes it off the screen. */
+        labelHidden?: boolean;
+        /** Writes each value over its bar. */
+        showValues?: boolean;
+        /** Shows the data table under the chart; otherwise it is there for assistive technology only. */
+        showTable?: boolean;
+        /** The heading of the table's first column. */
+        categoryTitle?: string;
+        /** The heading of the table's value column. */
+        valueTitle?: string;
+        /** The language of the built-in number formats. Without it, the runtime's. */
+        locale?: string;
+        /** Stands the chart on a panel of the thick material (frosted glass), for a chart that floats over a wash, a tint or a picture. On a plain card it shows nothing: leave it off there. */
+        glass?: boolean;
+        class?: string;
+    };
+
+    let {
+        data,
+        color,
+        yMax,
+        yFormat = "number",
+        height = 240,
+        label,
+        labelHidden = false,
+        showValues = true,
+        showTable = false,
+        categoryTitle = "Category",
+        valueTitle = "Value",
+        locale,
+        glass = false,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    /** Before it is measured (on the server) the drawing is laid out this wide and scaled to fit. */
+    const FALLBACK_WIDTH = 600;
+    /** The widest a bar gets: a bar is a `Progress` stood on end, a rod and not a block. */
+    const WIDEST = 24;
+
+    const uid = $props.id();
+    const clipId = `${uid}-bars`;
+    const veilId = `${uid}-veil`;
+    const shineId = `${uid}-shine`;
+    const streakId = `${uid}-streak`;
+    const softId = `${uid}-soft`;
+
+    let measured = $state(0);
+    let tickWidth = $state(0);
+
+    const width = $derived(measured > 0 ? measured : FALLBACK_WIDTH);
+    /** Chart text is set in rem; the room for it grows with the reader's text size. */
+    const rem = $derived(measured > 0 ? chartTextScale() : 1);
+    const plotHeight = $derived(Math.max(height, 80));
+    const top = $derived(showValues ? Math.round(24 * rem) : 8);
+    const bottom = $derived(Math.round(28 * rem));
+    const format = $derived(chartFormatter(yFormat, locale));
+    const isValue = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
+    const scale = $derived(chartScale(data.map((datum) => datum.value), { max: yMax, zero: true }));
+    const tickLabels = $derived(scale.ticks.map((tick) => format(tick)));
+    /** The value axis takes the width of its widest label as drawn; until that is known, an estimate. */
+    const left = $derived((tickWidth || Math.max(...tickLabels.map((text) => text.length), 1) * 7 * rem) + 12);
+    const innerWidth = $derived(Math.max(width - left, 10));
+    const innerHeight = $derived(Math.max(plotHeight - top - bottom, 10));
+    const band = $derived(innerWidth / Math.max(data.length, 1));
+    const barWidth = $derived(Math.max(1, Math.min(band * 0.5, WIDEST)));
+    /** A ceiling the app gave, and nothing below zero: each bar has a track up to it. */
+    const tracks = $derived(isValue(yMax) && scale.min >= 0 && scale.max > 0);
+    const every = $derived(labelEvery(data.map((datum) => datum.label), innerWidth, 7 * rem));
+    /** A value over every bar only while each has room for it. */
+    const valuesFit = $derived(showValues && band >= Math.max(...tickLabels.map((text) => text.length), 1) * 7 * rem);
+    /** Where the bars stand: zero, or the end of the axis nearest to it. */
+    const zero = $derived(Math.min(Math.max(0, scale.min), scale.max));
+
+    const y = (value: number) => top + innerHeight - ((value - scale.min) / (scale.max - scale.min)) * innerHeight;
+
+    const bars = $derived(
+        data.map((datum, index) => {
+            const value = isValue(datum.value) ? Math.min(Math.max(datum.value, scale.min), scale.max) : 0;
+            const from = y(zero);
+            const to = y(value);
+            return {
+                label: datum.label,
+                text: isValue(datum.value) ? format(datum.value) : "",
+                color: datum.color ? chartColor(datum.color, index) : chartColor(color, 0),
+                centre: left + band * (index + 0.5),
+                top: Math.min(from, to),
+                height: Math.abs(from - to),
+                path: barPath(left + band * (index + 0.5) - barWidth / 2, barWidth, from, to, barWidth / 2),
+                track: barPath(left + band * (index + 0.5) - barWidth / 2, barWidth, from, y(scale.max), barWidth / 2),
+                below: value < zero,
+            };
+        }),
+    );
+</script>
+
+<figure class={cn("zabi-chart relative m-0 flex flex-col gap-3", glass && CHART_GLASS, className)} {...restProps}>
+    <figcaption class={cn("text-label text-sm font-medium", labelHidden && "sr-only")}>{label}</figcaption>
+
+    <div class="w-full" use:measureWidth={(value) => (measured = value)}>
+        <svg class="plot block w-full" viewBox="0 0 {width} {plotHeight}" height={plotHeight} aria-hidden="true" focusable="false">
+            <g use:widestText={{ onwidth: (value) => (tickWidth = value), key: [tickLabels, measured] }}>
+                {#each scale.ticks as tick, index (tick)}
+                    {#if tick !== zero}
+                        <line class="grid" x1={left} x2={left + innerWidth} y1={y(tick)} y2={y(tick)} />
+                    {/if}
+                    <text class="tick" x={left - 12} y={y(tick)} text-anchor="end" dominant-baseline="central">
+                        {tickLabels[index]}
+                    </text>
+                {/each}
+            </g>
+
+            {#each bars as bar, index (index)}
+                {#if tracks}<path class="track" d={bar.track} />{/if}
+                <path class="bar" style:--_c={bar.color} d={bar.path}>
+                    <title>{bar.label}: {bar.text}</title>
+                </path>
+                {#if valuesFit && bar.text}
+                    <text
+                        class="value"
+                        x={bar.centre}
+                        y={bar.below ? bar.top + bar.height + 16 * rem : (tracks ? top : bar.top) - 8}
+                        text-anchor="middle"
+                    >
+                        {bar.text}
+                    </text>
+                {/if}
+                {#if index % every === 0}
+                    <text class="label" x={bar.centre} y={plotHeight - bottom + 20 * rem} text-anchor="middle">{bar.label}</text>
+                {/if}
+            {/each}
+
+            <!--
+                The glass, as on a PieChart: the bars keep their colour, opaque, and over them
+                lie the veil of a solid control, a hairline of light on the round end of each
+                bar and a soft sheen down its near side. Decoration only; not drawn where the materials are opaque.
+            -->
+            <defs>
+                <clipPath id={clipId}>
+                    {#each bars as bar, index (index)}<path d={bar.path} />{/each}
+                </clipPath>
+                <linearGradient id={veilId} x1="0" y1="0" x2="0" y2="1">
+                    <stop class="veil-top" offset="0" />
+                    <stop class="veil-bottom" offset="1" />
+                </linearGradient>
+                <linearGradient id={shineId} x1="0" y1="0" x2="0" y2="1">
+                    <stop class="light" offset="0" />
+                    <stop class="light off" offset="0.5" />
+                </linearGradient>
+                <linearGradient id={streakId} gradientUnits="userSpaceOnUse" x1="0" y1={top} x2="0" y2={top + innerHeight}>
+                    <stop class="light" offset="0" />
+                    <stop class="light off" offset="1" />
+                </linearGradient>
+                <filter id={softId} filterUnits="userSpaceOnUse" x="0" y="0" {width} height={plotHeight}>
+                    <feGaussianBlur stdDeviation="1.2" />
+                </filter>
+            </defs>
+            <g class="glass" clip-path="url(#{clipId})">
+                {#each bars as bar, index (index)}
+                    {#if bar.height > 0}
+                        <path class="veil" d={bar.path} fill="url(#{veilId})" />
+                        <path class="rim" d={bar.path} stroke="url(#{shineId})" />
+                        {#if barWidth >= 12 && bar.height > barWidth}
+                            <line
+                                class="sheen"
+                                filter="url(#{softId})"
+                                x1={bar.centre - barWidth / 2 + 4.5}
+                                x2={bar.centre - barWidth / 2 + 4.5}
+                                y1={bar.top + barWidth / 2}
+                                y2={bar.top + bar.height - barWidth / 2}
+                                stroke="url(#{streakId})"
+                            />
+                        {/if}
+                    {/if}
+                {/each}
+            </g>
+
+            <!-- The zero line is drawn last, so every bar stands on it. -->
+            <line class="grid axis" x1={left} x2={left + innerWidth} y1={y(zero)} y2={y(zero)} />
+        </svg>
+    </div>
+
+    <!-- The library's own Table, so the numbers look like every other table in the app. -->
+    <Table class={showTable ? "" : "sr-only"}>
+        <thead class="border-border bg-surface-elevated border-b">
+            <tr>
+                <th class="text-headline px-4 py-3 text-start font-medium" scope="col">{categoryTitle}</th>
+                <th class="text-headline px-4 py-3 text-end font-medium" scope="col">{valueTitle}</th>
+            </tr>
+        </thead>
+        <tbody class="divide-border divide-y">
+            {#each bars as bar, index (index)}
+                <tr>
+                    <th class="text-body px-4 py-3 text-start font-normal" scope="row">{bar.label}</th>
+                    <td class="text-body px-4 py-3 text-end tabular-nums">{bar.text}</td>
+                </tr>
+            {/each}
+        </tbody>
+    </Table>
+</figure>
+
+<style>
+    /*
+     * The series colours an app may set, on the chart or on anything around
+     * it; read with a fallback (in util/chart.ts) and never declared here:
+     *   --zabi-chart-1 … --zabi-chart-6
+     */
+    .plot {
+        overflow: visible;
+    }
+
+    /* The library's hairline, as between the rows of a list; the line the bars
+       stand on is the edge a Progress track has. */
+    .grid {
+        stroke: var(--color-border);
+        stroke-width: 1;
+        shape-rendering: crispEdges;
+    }
+
+    .grid.axis {
+        stroke: var(--color-border-strong);
+    }
+
+    /* The track of a Progress, stood on end: same fill, same edge. */
+    .track {
+        fill: var(--color-progress-track);
+        stroke: var(--color-progress-track-border);
+        stroke-width: 1;
+    }
+
+    .tick,
+    .label {
+        fill: var(--color-caption);
+        font-size: 0.75rem;
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* What a bar is called reads a step firmer than the scale beside it. */
+    .label {
+        fill: var(--color-description);
+    }
+
+    .value {
+        fill: var(--color-headline);
+        font-size: 0.75rem;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .bar {
+        fill: var(--_c);
+    }
+
+    /*
+     * The bars are glass, drawn, in the same terms as the slices of a PieChart (which has the
+     * list): the veil of a solid control, one pixel of light on the round end fading down the
+     * sides, a soft sheen down the near side, and the contact shadow.
+     */
+    .bar {
+        /* The contact shadow only: a wider one is a smudge under a rod this thin. */
+        filter: drop-shadow(0 1px 2px rgb(var(--shadow-color) / var(--shadow-opacity-contact)));
+    }
+
+    .glass {
+        pointer-events: none;
+    }
+
+    .veil-top {
+        stop-color: var(--color-control-gradient-accent-start);
+    }
+
+    .veil-bottom {
+        stop-color: var(--color-control-gradient-accent-end);
+    }
+
+    .light {
+        stop-color: color-mix(in srgb, var(--zabi-base-50) 30%, transparent);
+    }
+
+    .light.off {
+        stop-opacity: 0;
+    }
+
+    .rim {
+        fill: none;
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+    }
+
+    .sheen {
+        stroke-width: 3;
+        stroke-linecap: round;
+        opacity: 0.45;
+    }
+
+    /* Flat where the library's materials are opaque: the same switches, the same reasons. */
+    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+        .glass {
+            display: none;
+        }
+
+        .bar {
+            filter: none;
+        }
+    }
+
+    :global([data-materials="opaque"]) .glass {
+        display: none;
+    }
+
+    :global([data-materials="opaque"]) .bar {
+        filter: none;
+    }
+
+    /* Forced colours: bars in the system's text colour; the labels tell them apart. */
+    @media (forced-colors: active) {
+        .bar,
+        .tick,
+        .label,
+        .value {
+            fill: CanvasText;
+        }
+
+        .grid,
+        .grid.axis {
+            stroke: GrayText;
+        }
+
+        .track {
+            fill: Canvas;
+            stroke: CanvasText;
+        }
+
+        .bar {
+            fill: Highlight;
+        }
+    }
+</style>