zabi-components 8.1.0 → 9.0.0

package/dist/util/display-voice.js

@@ -0,0 +1,9 @@
+/**
+ * The display voice: the weight and tracking of a figure or a display line.
+ * Both are read from custom properties that are declared nowhere, so any
+ * ancestor can set them (`--zabi-display-weight: 400` for a light serif) and
+ * the defaults are what the display face looked like before. The `number:`
+ * hint is what makes Tailwind read the weight as a weight and not a family.
+ * Heading `variant="display"` and Stat share this string.
+ */
+export const displayVoice = "font-[number:var(--zabi-display-weight,700)] tracking-[var(--zabi-display-tracking,-0.02em)]";

package/dist/util/field-control.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The look of a field-shaped control's box: Select's trigger and native select
+ * and PickerField draw it from here, so a picker beside a Select is the same
+ * box. Kept in one place so they cannot drift.
+ */
+export type FieldControlSize = "sm" | "md" | "lg";
+export interface FieldControlSizeClasses {
+    /** The trigger's box: a minimum height, so a label that wraps makes it taller. */
+    box: string;
+    /** The text size: 16px below `sm`, as Input. */
+    text: string;
+    /** The same box for a native `<select>`, which is always one line. */
+    native: string;
+    /** Where the trailing chevron sits. */
+    chevron: string;
+}
+/**
+ * Same fixed height scale as Button, IconButton and Input (32 / 40 / 48), and
+ * the same 16px text below `sm`. One line is exactly 32, 40 or 48px: the
+ * padding leaves room for the line and the border inside it, and is a step
+ * smaller below `sm`, where the text is 16px on a 24px line.
+ */
+export declare function fieldControlSize(size: FieldControlSize): FieldControlSizeClasses;
+/** The edge colour for a status: the field's own, or the status colour. */
+export declare function fieldControlEdge(variant: string): string;
+/** The field's surface, edge and states. */
+export declare const FIELD_CONTROL_SURFACE = "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-(--duration-base) hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text";
+/** What the trigger adds to the surface: one row, text and chevron apart. */
+export declare const FIELD_CONTROL_TRIGGER = "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-(--duration-base) hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text flex items-center justify-between gap-2";

package/dist/util/field-control.js

@@ -0,0 +1,32 @@
+/**
+ * The look of a field-shaped control's box: Select's trigger and native select
+ * and PickerField draw it from here, so a picker beside a Select is the same
+ * box. Kept in one place so they cannot drift.
+ */
+/**
+ * Same fixed height scale as Button, IconButton and Input (32 / 40 / 48), and
+ * the same 16px text below `sm`. One line is exactly 32, 40 or 48px: the
+ * padding leaves room for the line and the border inside it, and is a step
+ * smaller below `sm`, where the text is 16px on a 24px line.
+ */
+export function fieldControlSize(size) {
+    if (size === "sm")
+        return { box: "min-h-8 px-3 py-1 max-sm:py-0 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", native: "h-8 ps-3 pe-9 pointer-coarse:h-11", chevron: "end-3" };
+    if (size === "lg")
+        return { box: "min-h-12 px-4 py-2", text: "text-base", native: "h-12 ps-4 pe-10", chevron: "end-4" };
+    return { box: "min-h-10 px-3 py-2 max-sm:py-1 pointer-coarse:min-h-11", text: "text-sm max-sm:text-base", native: "h-10 ps-3 pe-9 pointer-coarse:h-11", chevron: "end-3" };
+}
+/** The edge colour for a status: the field's own, or the status colour. */
+export function fieldControlEdge(variant) {
+    return variant === "success"
+        ? "border-success focus-visible:border-success"
+        : variant === "warning"
+            ? "border-warning focus-visible:border-warning"
+            : variant === "error"
+                ? "border-error focus-visible:border-error"
+                : "border-input-border enabled:hover:border-input-border-hover";
+}
+/** The field's surface, edge and states. */
+export const FIELD_CONTROL_SURFACE = "focus-ring w-full min-w-0 cursor-pointer rounded-control border bg-input text-body transition-colors duration-(--duration-base) hover:bg-input-hover active:bg-input-active focus-visible:bg-input-focus focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-input-disabled disabled:text-action-disabled-text";
+/** What the trigger adds to the surface: one row, text and chevron apart. */
+export const FIELD_CONTROL_TRIGGER = `${FIELD_CONTROL_SURFACE} flex items-center justify-between gap-2`;

package/dist/util/field.d.ts

@@ -36,3 +36,9 @@ export declare const fieldMessageId: (fieldId: string) => string;
  * that are rendered; `undefined` when there are none, so no empty attribute.
  */
 export declare function fieldDescribedBy(fieldId: string, state: Pick<FieldMessageState, "showMessage" | "showHint">, own?: string | null): string | undefined;
+/** What Textarea's `countText` is given: the characters typed, the limit, and how many are left. */
+export interface TextareaCount {
+    length: number;
+    max: number;
+    remaining: number;
+}

package/dist/util/focus-utils.d.ts

@@ -62,6 +62,8 @@ export declare function joinOverlayStack(panel: HTMLElement): {
     depth: number;
     leave: () => void;
 };
+/** Whether `panel` is the overlay on top of the stack: the one opened last. */
+export declare function isTopOverlay(panel: HTMLElement): boolean;
 /**
  * Keeps a modal overlay in charge of the keyboard when focus has left it
  * without a Tab: the focused control was disabled or removed and the browser

package/dist/util/focus-utils.js

@@ -214,6 +214,10 @@ export function joinOverlayStack(panel) {
         },
     };
 }
+/** Whether `panel` is the overlay on top of the stack: the one opened last. */
+export function isTopOverlay(panel) {
+    return overlayStack[overlayStack.length - 1]?.panel === panel;
+}
 /**
  * Keeps a modal overlay in charge of the keyboard when focus has left it
  * without a Tab: the focused control was disabled or removed and the browser

package/dist/util/map-view.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Public types and pure helpers for `MapView`.
+ *
+ * Which markers become one count marker is worked out here, on pixels, so it
+ * can be tested without a browser or the map library. Nothing in this file
+ * imports MapLibre: `mapViewSupported()` can be asked before the library is
+ * loaded, and the library's own types stay out of the package's.
+ */
+export type MapPointKey = string | number;
+/** A place on the map. */
+export interface MapLngLat {
+    lng: number;
+    lat: number;
+}
+/** One marker. */
+export interface MapPoint extends MapLngLat {
+    /** Stable identity. */
+    id: MapPointKey;
+    /** The marker's accessible name, written by the app. */
+    label: string;
+    /** Drawn filled, with a check mark; left out or false, round and outlined. */
+    checked?: boolean;
+}
+/** Room kept clear at the edges of the map, in px: a sheet over its lower part is a `bottom`. */
+export interface MapInset {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/**
+ * Where the map stands:
+ * - `loading`: the library or the first style is on its way;
+ * - `ready`: the map has drawn;
+ * - `library-error`: the map library could not be loaded or started (no WebGL, a failed chunk);
+ * - `tiles-error`: the style could not be fetched, or tiles failed and none has arrived (offline).
+ */
+export type MapViewStatus = "loading" | "ready" | "library-error" | "tiles-error";
+/** Payload of MapView's `onmove`: where the map is after a move has ended. */
+export interface MapViewPosition {
+    center: MapLngLat;
+    zoom: number;
+}
+/** Every built-in string of MapView. Pass a partial object to `strings` to translate. */
+export interface MapViewStrings {
+    /** Accessible name of the map. */
+    label: string;
+    /** Accessible name of a marker that stands for several points. */
+    cluster: (count: number) => string;
+    /** Accessible name of the dot at the viewer's own position. */
+    viewer: string;
+}
+export declare const MAP_VIEW_STRINGS: MapViewStrings;
+/** A marker's tap area, in px. It does not grow with the text size. */
+export declare const MAP_MARKER_TAP = 44;
+/** The closest the opening fit zooms in, so one marker does not fill the screen: street level. */
+export declare const MAP_FIT_MAX_ZOOM = 16;
+/**
+ * Whether this browser can draw the map: it has WebGL. Safe on the server
+ * (false) and cheap: it does not load the map library.
+ */
+export declare function mapViewSupported(): boolean;
+export interface MapPixel {
+    x: number;
+    y: number;
+}
+/** What is drawn: one point, or several under one count marker. */
+export interface MapMarker<T> {
+    /** The key of its first point in the list: the marker keeps its element, and the focus, while others join or leave it. */
+    key: MapPointKey;
+    /** Its points, in the order of the list. */
+    points: T[];
+    /** Place in the list of its first point: the marker's place in the tab order. */
+    order: number;
+    /** Where it is drawn: the middle of its points. */
+    x: number;
+    y: number;
+}
+/**
+ * Groups points whose tap areas overlap into one marker, and goes on until no
+ * two markers overlap: a count marker sits in the middle of its points, which
+ * may bring it over a neighbour. Markers come back in the order of the list,
+ * each at the place of its first point.
+ *
+ * `pixels[i]` is where `points[i]` is on the screen. The result depends only
+ * on how far apart the points are, so a pan changes nothing and a pinch splits
+ * markers as they stop overlapping.
+ */
+export declare function clusterMarkers<T extends {
+    id: MapPointKey;
+}>(points: readonly T[], pixels: readonly MapPixel[], tap?: number): MapMarker<T>[];
+/** The corners of the box around `points`, or null with none. */
+export declare function boundsOf(points: readonly MapLngLat[]): [[number, number], [number, number]] | null;
+/** Changes when a point is added, taken away or moved, and not when only its name or its check does. */
+export declare function pointsSignature(points: readonly MapPoint[]): string;
+/**
+ * How far from the middle of the map the middle of the area inside `inset`
+ * is, in px: where a point is put so that it is in view above a sheet.
+ */
+export declare function insetOffset(inset: MapInset | undefined): MapPixel;
+/** The words of an attribution the style carries as HTML, as plain text. */
+export declare function attributionText(html: string): string;
+/**
+ * The part of MapLibre GL JS that MapView uses, written out here so that the
+ * package's types do not need the library's.
+ */
+export interface MapLibreMapLike {
+    on(type: string, listener: (event: any) => void): unknown;
+    off(type: string, listener: (event: any) => void): unknown;
+    remove(): void;
+    resize(): unknown;
+    jumpTo(options: {
+        center?: [number, number] | MapLngLat;
+        zoom?: number;
+    }): unknown;
+    cameraForBounds(bounds: [[number, number], [number, number]], options?: {
+        padding?: number;
+        maxZoom?: number;
+    }): {
+        center?: unknown;
+        zoom?: number;
+    } | undefined;
+    project(lngLat: [number, number]): MapPixel;
+    unproject(point: [number, number]): MapLngLat;
+    getCenter(): MapLngLat;
+    getZoom(): number;
+    setStyle(style: string | object): unknown;
+    getStyle(): {
+        sources?: Record<string, {
+            attribution?: string;
+        }>;
+    } | undefined;
+    getSource?(id: string): {
+        attribution?: string;
+    } | undefined;
+    getCanvas(): HTMLCanvasElement;
+    touchZoomRotate?: {
+        disableRotation(): void;
+    };
+}
+export interface MapLibreLike {
+    Map: new (options: Record<string, unknown>) => MapLibreMapLike;
+}

package/dist/util/map-view.js

@@ -0,0 +1,121 @@
+/**
+ * Public types and pure helpers for `MapView`.
+ *
+ * Which markers become one count marker is worked out here, on pixels, so it
+ * can be tested without a browser or the map library. Nothing in this file
+ * imports MapLibre: `mapViewSupported()` can be asked before the library is
+ * loaded, and the library's own types stay out of the package's.
+ */
+export const MAP_VIEW_STRINGS = {
+    label: "Map",
+    cluster: (count) => `${count} places`,
+    viewer: "Your position",
+};
+/** A marker's tap area, in px. It does not grow with the text size. */
+export const MAP_MARKER_TAP = 44;
+/** The closest the opening fit zooms in, so one marker does not fill the screen: street level. */
+export const MAP_FIT_MAX_ZOOM = 16;
+/**
+ * Whether this browser can draw the map: it has WebGL. Safe on the server
+ * (false) and cheap: it does not load the map library.
+ */
+export function mapViewSupported() {
+    if (typeof document === "undefined")
+        return false;
+    try {
+        const canvas = document.createElement("canvas");
+        return !!(canvas.getContext("webgl2") ?? canvas.getContext("webgl"));
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Groups points whose tap areas overlap into one marker, and goes on until no
+ * two markers overlap: a count marker sits in the middle of its points, which
+ * may bring it over a neighbour. Markers come back in the order of the list,
+ * each at the place of its first point.
+ *
+ * `pixels[i]` is where `points[i]` is on the screen. The result depends only
+ * on how far apart the points are, so a pan changes nothing and a pinch splits
+ * markers as they stop overlapping.
+ */
+export function clusterMarkers(points, pixels, tap = MAP_MARKER_TAP) {
+    let groups = points.map((_, index) => ({
+        members: [index],
+        x: pixels[index].x,
+        y: pixels[index].y,
+    }));
+    let merged = true;
+    while (merged) {
+        merged = false;
+        const next = [];
+        for (const group of groups) {
+            const into = next.find((other) => Math.abs(other.x - group.x) < tap && Math.abs(other.y - group.y) < tap);
+            if (!into) {
+                next.push(group);
+                continue;
+            }
+            into.members = [...into.members, ...group.members];
+            into.x = into.members.reduce((sum, index) => sum + pixels[index].x, 0) / into.members.length;
+            into.y = into.members.reduce((sum, index) => sum + pixels[index].y, 0) / into.members.length;
+            merged = true;
+        }
+        groups = next;
+    }
+    return groups
+        .map((group) => {
+        const members = [...group.members].sort((a, b) => a - b);
+        return {
+            key: points[members[0]].id,
+            points: members.map((index) => points[index]),
+            order: members[0],
+            x: group.x,
+            y: group.y,
+        };
+    })
+        .sort((a, b) => a.order - b.order);
+}
+/** The corners of the box around `points`, or null with none. */
+export function boundsOf(points) {
+    if (points.length === 0)
+        return null;
+    let west = Infinity;
+    let south = Infinity;
+    let east = -Infinity;
+    let north = -Infinity;
+    for (const point of points) {
+        west = Math.min(west, point.lng);
+        east = Math.max(east, point.lng);
+        south = Math.min(south, point.lat);
+        north = Math.max(north, point.lat);
+    }
+    return [
+        [west, south],
+        [east, north],
+    ];
+}
+/** Changes when a point is added, taken away or moved, and not when only its name or its check does. */
+export function pointsSignature(points) {
+    return points.map((point) => `${point.id}:${point.lng}:${point.lat}`).join("|");
+}
+/**
+ * How far from the middle of the map the middle of the area inside `inset`
+ * is, in px: where a point is put so that it is in view above a sheet.
+ */
+export function insetOffset(inset) {
+    return {
+        x: ((inset?.left ?? 0) - (inset?.right ?? 0)) / 2,
+        y: ((inset?.top ?? 0) - (inset?.bottom ?? 0)) / 2,
+    };
+}
+/** The words of an attribution the style carries as HTML, as plain text. */
+export function attributionText(html) {
+    return html
+        .replace(/<[^>]*>/g, " ")
+        .replace(/&copy;/g, "©")
+        .replace(/&amp;/g, "&")
+        .replace(/&nbsp;/g, " ")
+        .replace(/\s+/g, " ")
+        .trim();
+}

package/dist/util/photo.d.ts

@@ -24,7 +24,20 @@ export interface Photo {
     height: number;
     /** Shown under the photo in the viewer. */
     caption?: string;
+    /**
+     * A second, quieter line under the caption in the viewer: who took the
+     * photo, when. It is never folded away with a long caption.
+     */
+    credit?: string;
+    /**
+     * Where a photo that is being added stands, drawn on its tile in the grid:
+     * `uploading` (on its way) or `error` (it did not arrive). Left out: saved.
+     */
+    status?: PhotoStatus;
+    /** How far an `uploading` photo has come, from 0 to 1. Without it the tile shows a spinner. */
+    progress?: number;
 }
+export type PhotoStatus = "uploading" | "error";
 export declare function photoKey(photo: Photo): PhotoKey;
 /** Payload of PhotoGrid's `onselect`. */
 export interface PhotoGridSelectDetail {
@@ -47,6 +60,12 @@ export interface PhotoGridStrings {
     openPhoto: (name: string) => string;
     /** How to get around by keyboard. Read once when focus enters the grid, and shown while it has keyboard focus. */
     keyboardHint: string;
+    /** Added to the name of a photo whose `status` is `uploading`. */
+    uploading: string;
+    /** Added to the name of a photo whose `status` is `error`. */
+    uploadFailed: string;
+    /** Name of the button on a failed photo that tries again. */
+    retryUpload: (name: string) => string;
 }
 export declare const PHOTO_GRID_STRINGS: PhotoGridStrings;
 /** What the user did to close the viewer. `swipe` is a swipe down on the photo. */

package/dist/util/photo.js

@@ -15,6 +15,9 @@ export const PHOTO_GRID_STRINGS = {
     morePhotos: (count) => `${count} more ${count === 1 ? "photo" : "photos"}`,
     openPhoto: (name) => `Open ${name}`,
     keyboardHint: "Use the arrow keys to move between photos.",
+    uploading: "Uploading",
+    uploadFailed: "Not uploaded",
+    retryUpload: (name) => `Try again: ${name}`,
 };
 export const PHOTO_VIEWER_STRINGS = {
     close: "Close",

package/dist/util/progress.d.ts

@@ -0,0 +1,18 @@
+/** Types and pure helpers for `Progress`. Kept out of the component so they can be tested without a DOM. */
+/** Every built-in string. Pass a partial object to `strings` to translate. */
+export interface ProgressStrings {
+    /**
+     * The count of a segmented bar, as its accessible value and as the
+     * read-out beside the label: "4 of 19". `value` is the number of filled
+     * segments.
+     */
+    valueText: (value: number, max: number) => string;
+}
+export declare const PROGRESS_STRINGS: ProgressStrings;
+/** The fewest and the most segments a segmented bar is drawn with. */
+export declare const SEGMENTS_MIN = 2;
+export declare const SEGMENTS_MAX = 24;
+/** Whether `max` can be drawn as separate segments: a whole number from 2 to 24. */
+export declare function canSegment(max: number): boolean;
+/** Filled segments: `value` rounded down, held within 0..max; 0 for something that is not a number. */
+export declare function filledSegments(value: number, max: number): number;

package/dist/util/progress.js

@@ -0,0 +1,17 @@
+/** Types and pure helpers for `Progress`. Kept out of the component so they can be tested without a DOM. */
+export const PROGRESS_STRINGS = {
+    valueText: (value, max) => `${value} of ${max}`,
+};
+/** The fewest and the most segments a segmented bar is drawn with. */
+export const SEGMENTS_MIN = 2;
+export const SEGMENTS_MAX = 24;
+/** Whether `max` can be drawn as separate segments: a whole number from 2 to 24. */
+export function canSegment(max) {
+    return Number.isInteger(max) && max >= SEGMENTS_MIN && max <= SEGMENTS_MAX;
+}
+/** Filled segments: `value` rounded down, held within 0..max; 0 for something that is not a number. */
+export function filledSegments(value, max) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(max, Math.floor(value)));
+}

package/dist/util/scroll-edge.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Whether content is under a bar (D123): the one thing a bar needs to know to
+ * choose between flush with the page and glass.
+ *
+ * Pure DOM, no Svelte. `AppShell` uses it on its scroller and shares the
+ * result with the bars inside it; a bar on its own uses it on its nearest
+ * scroll parent, or on the window.
+ */
+/** `scrollEdge` on a bar: follow the scroll position, or force the glass on or off. */
+export type ScrollEdgeMode = "auto" | "always" | "never";
+export interface ScrollEdge {
+    /** Scrolled away from the start: content is under a bar at the top. */
+    top: boolean;
+    /** Not at the end: content is under a bar at the bottom. */
+    bottom: boolean;
+}
+/** The edges for a scroll position, clamped against rubber-banding past either end. */
+export declare function measureScrollEdge(position: number, scrollable: number, topThreshold?: number): ScrollEdge;
+/** The value a bar writes as `data-scrolled-under`: the mode, or what the scroll position says. */
+export declare function resolveScrolledUnder(mode: ScrollEdgeMode | undefined, auto: boolean): boolean;
+/**
+ * Reports `{ top, bottom }` for `container` (null for the window): once on
+ * start, then whenever either changes. It listens to `scroll` (passive) and,
+ * where `ResizeObserver` exists, to the size of the container and of what is
+ * in it, since content that grows or shrinks moves the end. Returns the
+ * cleanup. Call it in the browser.
+ *
+ * `topThreshold` (px, default 0) is how far it has to scroll before `top` is
+ * true: a bar with a large title is only over content once the large row has
+ * gone under it. Call it again to change it.
+ */
+export declare function watchScrollEdge(container: HTMLElement | null, onChange: (edge: ScrollEdge) => void, topThreshold?: number): () => void;

package/dist/util/scroll-edge.js

@@ -0,0 +1,87 @@
+/**
+ * Whether content is under a bar (D123): the one thing a bar needs to know to
+ * choose between flush with the page and glass.
+ *
+ * Pure DOM, no Svelte. `AppShell` uses it on its scroller and shares the
+ * result with the bars inside it; a bar on its own uses it on its nearest
+ * scroll parent, or on the window.
+ */
+/** Less than this from the end counts as being at the end (fractional scroll positions). */
+const END_TOLERANCE = 1;
+/** The edges for a scroll position, clamped against rubber-banding past either end. */
+export function measureScrollEdge(position, scrollable, topThreshold = 0) {
+    const end = Math.max(0, scrollable);
+    const at = Math.min(Math.max(0, position), end);
+    return { top: at > topThreshold, bottom: end - at > END_TOLERANCE };
+}
+/** The value a bar writes as `data-scrolled-under`: the mode, or what the scroll position says. */
+export function resolveScrolledUnder(mode, auto) {
+    if (mode === "always")
+        return true;
+    if (mode === "never")
+        return false;
+    return auto;
+}
+/**
+ * Reports `{ top, bottom }` for `container` (null for the window): once on
+ * start, then whenever either changes. It listens to `scroll` (passive) and,
+ * where `ResizeObserver` exists, to the size of the container and of what is
+ * in it, since content that grows or shrinks moves the end. Returns the
+ * cleanup. Call it in the browser.
+ *
+ * `topThreshold` (px, default 0) is how far it has to scroll before `top` is
+ * true: a bar with a large title is only over content once the large row has
+ * gone under it. Call it again to change it.
+ */
+export function watchScrollEdge(container, onChange, topThreshold = 0) {
+    const target = container ?? window;
+    let last;
+    const measure = () => {
+        const root = document.documentElement;
+        const edge = container
+            ? measureScrollEdge(container.scrollTop, container.scrollHeight - container.clientHeight, topThreshold)
+            : measureScrollEdge(window.scrollY, root.scrollHeight - window.innerHeight, topThreshold);
+        if (last && last.top === edge.top && last.bottom === edge.bottom)
+            return;
+        last = edge;
+        onChange(edge);
+    };
+    target.addEventListener("scroll", measure, { passive: true });
+    measure();
+    let sizes;
+    let nodes;
+    if (typeof ResizeObserver !== "undefined") {
+        const sized = new ResizeObserver(measure);
+        sizes = sized;
+        const watch = () => {
+            sized.disconnect();
+            if (container) {
+                sized.observe(container);
+                for (const child of container.children)
+                    sized.observe(child);
+            }
+            else {
+                sized.observe(document.documentElement);
+                sized.observe(document.body);
+            }
+        };
+        watch();
+        // What is inside a scroller comes and goes: follow it.
+        if (container && typeof MutationObserver !== "undefined") {
+            nodes = new MutationObserver(() => {
+                watch();
+                measure();
+            });
+            nodes.observe(container, { childList: true });
+        }
+    }
+    if (!container)
+        window.addEventListener("resize", measure);
+    return () => {
+        target.removeEventListener("scroll", measure);
+        if (!container)
+            window.removeEventListener("resize", measure);
+        sizes?.disconnect();
+        nodes?.disconnect();
+    };
+}

package/dist/util/sheet-drag.d.ts

@@ -25,12 +25,36 @@ export interface SheetDragTargets {
     handleZone: HTMLElement;
     /**
      * The scrolling content. A touch that starts here scrolls it; only a
-     * downward swipe that begins with the content at its top moves the sheet.
+     * downward swipe that begins with the content at its top moves the sheet,
+     * and not one that begins on a box inside it that scrolls itself or on
+     * something that handles its own gesture: marked `data-sheet-no-drag`,
+     * a range input, or with a `touch-action` that gives up vertical
+     * panning (`contentTakesTouch`). A swipe that begins sideways stays
+     * sideways and never moves the sheet.
      */
     scroller?: HTMLElement | null;
 }
 /** Movement under this many px is a press, not a drag. */
 export declare const DRAG_SLOP = 6;
+/**
+ * Movement, on either axis, after which a touch in the content has an axis:
+ * more across than down is sideways (a carousel, a row that scrolls, a
+ * swipeable item), and stays so until the finger lifts.
+ */
+export declare const AXIS_SLOP = 8;
+/**
+ * Whether a touch that begins on `target` belongs to the content and not to the
+ * sheet: it started on something that is dragged itself (`OWN_DRAG`), or it
+ * has, between it and the sheet's `scroller`, a box that scrolls on the y axis
+ * or one whose `touch-action` leaves vertical panning to the page's own code
+ * (`ownsVerticalGesture`: a map, a canvas, a drawing pad, a slider).
+ * A box that can scroll keeps the gesture whether it is at its top or not: a
+ * drag that sometimes scrolls a list and sometimes closes the sheet cannot be
+ * predicted, and the list does not hand over what it cannot use
+ * (`overscroll-contain`). The scroller itself is not asked here; it is the
+ * sheet's own content, and hands a pull down at its top to the sheet.
+ */
+export declare function contentTakesTouch(target: EventTarget | null, scroller: HTMLElement): boolean;
 /**
  * When a pointer or touch event happened: its own `timeStamp`, which is when
  * the finger moved. The time the handler runs is later by however busy the