zabi-components 8.1.0 → 9.0.0

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>

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

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

package/dist/molecules/BottomSheet.svelte

@@ -59,7 +59,10 @@
      * the lowest, closed. It is also a button that moves the sheet a step, so
      * the same is there for a keyboard and a screen reader. A swipe on the
      * content scrolls the content; it moves the sheet only when the content
-     * is at its top and the swipe goes down.
+     * is at its top and the swipe goes down. A box inside the content that
+     * scrolls by itself (a long list, a text area) keeps every swipe that
+     * starts on it, at its top too, and so does anything carrying
+     * `data-sheet-no-drag` (a map, a wheel, a swipeable row) or a range input.
      *
      * From the `md` breakpoint up the sheet is still attached to the bottom
      * edge, centred and no wider than 40rem.
@@ -87,6 +90,19 @@
          * Set it when you open the sheet to start somewhere else.
          */
         snap?: BottomSheetSnap;
+        /**
+         * The sheet is as tall as its content, up to half the screen, instead
+         * of half the screen whatever it holds. It has one resting height, so
+         * `snapPoints` and `snap` are ignored and the grip only drags. Off by
+         * default.
+         */
+        fit?: boolean;
+        /**
+         * With `fit`: the tallest the sheet grows before its content scrolls.
+         * `half` (the default) is half the screen; `full` is down from the
+         * status bar, like the `full` snap point. Ignored without `fit`.
+         */
+        fitMax?: "half" | "full";
         /**
          * Render the overlay in `document.body`, so an ancestor with a
          * transform, filter or clipped overflow cannot trap it; pass `false`
@@ -133,6 +149,8 @@
         description = "",
         snapPoints,
         snap = $bindable(),
+        fit = false,
+        fitMax = "half",
         portal = true,
         dismissible = true,
         onclose,
@@ -164,7 +182,8 @@
     applyDefaults();
     $effect.pre(applyDefaults);
 
-    const SLIDE_MS = 200;
+    // Used only where --duration-slow cannot be read.
+    const SLIDE_MS = 300;
 
     const titleId = generateId("bottom-sheet-title");
     const descriptionId = generateId("bottom-sheet-description");
@@ -188,7 +207,7 @@
     /** Position among the open overlays; lifts a sheet opened later above the earlier ones. */
     let depth = $state(0);
 
-    const points = $derived(normaliseSnapPoints(snapPoints));
+    const points = $derived(fit ? normaliseSnapPoints(["half"]) : normaliseSnapPoints(snapPoints));
     /** The snap point in effect: the one asked for if it is in use, else the lowest. */
     const currentSnap = $derived(snap && points.includes(snap) ? snap : points[0]);
     const stepTo = $derived(nextSnap(points, currentSnap));
@@ -199,14 +218,21 @@
      * that a short screen leaves no room for content, and never above full.
      */
     const FULL = "calc(100% - env(safe-area-inset-top, 0px))";
-    const snapHeight = $derived(
-        currentSnap === "full" ? FULL : `min(max(50%, 18rem), ${FULL})`,
-    );
+    const HALF = `min(max(50%, 18rem), ${FULL})`;
+    const snapHeight = $derived(currentSnap === "full" ? FULL : HALF);
 
     /** While a drag is on: the height and offset it has moved the panel to, in px. */
     let dragging = $state(false);
     let dragHeight = $state<number | null>(null);
     let dragOffset = $state(0);
+    /**
+     * False from opening until the slide-in has ended. The panel's height
+     * transition is for snapping and settling a drag; while the sheet arrives
+     * a late change of height (the overlay shrinking over a keyboard, a snap
+     * set as it opens) would ride the spring and move the content after the
+     * eye has landed on it. Until then the height is applied at once.
+     */
+    let arrived = $state(false);
 
     function close(reason: BottomSheetCloseReason) {
         if (!dismissible) return;
@@ -218,18 +244,42 @@
         onclose?.({ reason });
     }
 
-    /** Slides the panel up from the bottom edge. Skipped where motion is unwanted or unsupported. */
-    function slideIn(container: HTMLElement) {
-        if (typeof container.animate !== "function" || prefersReducedMotion()) return;
-        container.animate(
-            [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
-            { duration: SLIDE_MS, easing: "ease-out" },
-        );
+    /**
+     * Slides the panel up from the bottom edge. Skipped where motion is unwanted or unsupported.
+     * Returns how long the slide takes in ms: 0 when there is none.
+     */
+    function slideIn(container: HTMLElement): number {
+        if (typeof container.animate !== "function" || prefersReducedMotion()) return 0;
+        // Arriving is a smooth slide to rest on the standard curve, with no
+        // overshoot (the spring is for snapping and settling a drag). Read
+        // from the element so a theme that overrides the tokens is followed.
+        // Where the tokens cannot be read (no stylesheet) or the engine
+        // rejects the easing, plain ease-out.
+        const style = getComputedStyle(container);
+        const duration = parseDuration(style.getPropertyValue("--duration-slow"));
+        const standard = style.getPropertyValue("--ease-standard").trim();
+        const frames = [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }];
+        try {
+            container.animate(frames, { duration, easing: standard || "ease-out" });
+        } catch {
+            container.animate(frames, { duration, easing: "ease-out" });
+        }
+        return duration;
+    }
+
+    /** `300ms`, `0.3s` or `0s` to milliseconds; the fallback when it is not a time. */
+    function parseDuration(value: string): number {
+        const match = /^\s*(-?\d*\.?\d+)(ms|s)\s*$/.exec(value);
+        if (!match) return SLIDE_MS;
+        const ms = parseFloat(match[1]) * (match[2] === "s" ? 1000 : 1);
+        return ms >= 0 ? ms : SLIDE_MS;
     }
 
     /** The snap points in px, lowest first, for the screen as it is now. */
     function measureSnapHeights(): number[] {
         if (!root) return [];
+        // A fitted sheet rests at the height its content gives it.
+        if (fit && panel) return [panel.getBoundingClientRect().height];
         const available = root.clientHeight - parseFloat(getComputedStyle(root).paddingTop || "0");
         const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
         const half = Math.min(Math.max(root.clientHeight * 0.5, 18 * rem), available);
@@ -280,7 +330,8 @@
             const unlockScroll = lockBodyScroll();
             const overlay = joinOverlayStack(container);
             depth = overlay.depth;
-            slideIn(container);
+            arrived = false;
+            const arrival = setTimeout(() => (arrived = true), slideIn(container));
             const t = setTimeout(() => {
                 // Something inside has taken focus already (a field that
                 // focuses itself as it mounts): leave it there. `initialFocus`
@@ -297,6 +348,8 @@
             });
             return () => {
                 clearTimeout(t);
+                clearTimeout(arrival);
+                arrived = false;
                 stopRecovery();
                 overlay.leave();
                 unlockScroll();
@@ -415,9 +468,14 @@ a background is dropped there, and the grip would be gone. -->
 
 {#if isOpen}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- `overflow-clip`, not `hidden`: a clipped box is a scroll container
+    nobody can scroll. The panel waits below the screen while it slides in, so
+    the root has overflow to scroll, and WebKit scrolls it to bring the
+    focused grip into view: the sheet rose to the top of the screen, and sat
+    32px high (the filler under the panel) once the slide had ended. -->
     <div
         bind:this={root}
-        class="group/overlay fixed inset-0 z-modal overflow-hidden pt-[env(safe-area-inset-top)] {dismissible
+        class="group/overlay fixed inset-0 z-modal overflow-clip pt-[env(safe-area-inset-top)] {dismissible
             ? 'cursor-pointer'
             : 'cursor-default'} bg-overlay"
         style:z-index={depth > 0 ? `calc(var(--z-modal) + ${depth})` : undefined}
@@ -430,20 +488,30 @@ a background is dropped there, and the grip would be gone. -->
         <div
             bind:this={panel}
             class={cn(
-                "absolute inset-x-0 bottom-0 mx-auto flex w-full cursor-default flex-col rounded-t-overlay border-t border-border-overlay bg-surface-overlay shadow-lg",
+                // The glass is a layer behind the content (`::before`), not a filter on
+                // the panel: a backdrop-filter would make the panel the containing
+                // block of every fixed-position popover inside it.
+                "material-layer-thick absolute inset-x-0 bottom-0 mx-auto flex w-full cursor-default flex-col rounded-t-overlay",
                 "max-h-[calc(100dvh-env(safe-area-inset-top,0px))] pb-[env(safe-area-inset-bottom)]",
                 // Over the keyboard: no taller than what is left, and the home
                 // indicator it would clear is under the keyboard.
                 "group-data-keyboard-open/overlay:max-h-[calc(100%_-_env(safe-area-inset-top,0px))] group-data-keyboard-open/overlay:pb-0",
                 // Clear of the notch and the rounded corners in landscape.
                 "pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
-                "transition-[height,transform] duration-200 ease-out motion-reduce:transition-none",
-                "md:w-[min(100%,40rem)] md:border-x",
+                // Snapping and settling spring; the overshoot may lift the panel a
+                // few px, so the filler continues its fill under the screen edge.
+                // The panel's own background is transparent now (the fill is on its
+                // layer), so the filler paints the material token itself: it follows
+                // the same fallbacks.
+                "transition-[height,transform] duration-(--duration-slow) ease-spring motion-reduce:transition-none",
+                "after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-8 after:content-[''] after:bg-(--color-material-thick)",
+                "md:w-[min(100%,40rem)]",
                 className,
             )}
-            style:height={dragHeight !== null ? `${dragHeight}px` : snapHeight}
+            style:height={dragHeight !== null ? `${dragHeight}px` : fit ? "auto" : snapHeight}
+            style:max-height={fit ? (fitMax === "full" ? FULL : HALF) : undefined}
             style:transform={dragOffset > 0 ? `translateY(${dragOffset}px)` : undefined}
-            style:transition={dragging ? "none" : undefined}
+            style:transition={dragging || !arrived ? "none" : undefined}
             role="dialog"
             aria-modal="true"
             aria-labelledby={titleId}

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

@@ -23,7 +23,10 @@ import { type BottomSheetCloseReason, type BottomSheetSnap } from "../util/botto
  * the lowest, closed. It is also a button that moves the sheet a step, so
  * the same is there for a keyboard and a screen reader. A swipe on the
  * content scrolls the content; it moves the sheet only when the content
- * is at its top and the swipe goes down.
+ * is at its top and the swipe goes down. A box inside the content that
+ * scrolls by itself (a long list, a text area) keeps every swipe that
+ * starts on it, at its top too, and so does anything carrying
+ * `data-sheet-no-drag` (a map, a wheel, a swipeable row) or a range input.
  *
  * From the `md` breakpoint up the sheet is still attached to the bottom
  * edge, centred and no wider than 40rem.
@@ -47,6 +50,19 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "title" | "onclose"
      * Set it when you open the sheet to start somewhere else.
      */
     snap?: BottomSheetSnap;
+    /**
+     * The sheet is as tall as its content, up to half the screen, instead
+     * of half the screen whatever it holds. It has one resting height, so
+     * `snapPoints` and `snap` are ignored and the grip only drags. Off by
+     * default.
+     */
+    fit?: boolean;
+    /**
+     * With `fit`: the tallest the sheet grows before its content scrolls.
+     * `half` (the default) is half the screen; `full` is down from the
+     * status bar, like the `full` snap point. Ignored without `fit`.
+     */
+    fitMax?: "half" | "full";
     /**
      * Render the overlay in `document.body`, so an ancestor with a
      * transform, filter or clipped overflow cannot trap it; pass `false`