zabi-components 8.0.0 → 9.0.0

package/dist/util/radio-keys.js

@@ -0,0 +1,49 @@
+/**
+ * Where a key moves the selection in a radio group laid out in a row, as
+ * Rating and SegmentedControl are. Kept out of the components so it can be
+ * tested without a DOM.
+ *
+ * It is the native radio contract: Right and Down go to the next option, Left
+ * and Up to the previous one, both wrap, and Left and Right swap in a
+ * right-to-left layout.
+ *
+ * `current` is the option that has focus, which is not always the selected
+ * one: a screen reader's cursor can put focus on any radio, and the keys then
+ * move from where the user is. It is -1 when focus is on none of them: the
+ * next option is then the first, and the previous one the last.
+ *
+ * `hasSelection` is false while the group is empty. A forward key then selects
+ * the focused option itself instead of stepping over it, so Right on an empty
+ * rating gives one star, not two.
+ *
+ * Returns -1 for a key that is not a navigation key, or when there is nothing
+ * to move to.
+ */
+export function radioKeyIndex(key, current, count, rtl = false, hasSelection = true) {
+    if (count <= 0)
+        return -1;
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return count - 1;
+    let delta = 0;
+    if (key === "ArrowDown")
+        delta = 1;
+    else if (key === "ArrowUp")
+        delta = -1;
+    else if (key === "ArrowRight")
+        delta = rtl ? -1 : 1;
+    else if (key === "ArrowLeft")
+        delta = rtl ? 1 : -1;
+    if (delta === 0)
+        return -1;
+    if (current < 0 || current >= count)
+        return delta > 0 ? 0 : count - 1;
+    if (!hasSelection && delta > 0)
+        return current;
+    return (current + delta + count) % count;
+}
+/** Whether `node` is laid out right to left. */
+export function isRtl(node) {
+    return getComputedStyle(node).direction === "rtl";
+}

package/dist/util/rating.d.ts

@@ -0,0 +1,22 @@
+/** Types and pure helpers for `Rating`. 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 RatingStrings {
+    /**
+     * Accessible name of one star ("4 of 5 stars"), and of a read-only
+     * rating as a whole ("3.5 of 5 stars"). `value` is already formatted.
+     */
+    starLabel: (value: string, max: number) => string;
+    /** Accessible name of the clear button that `clearable` adds. */
+    clearLabel: string;
+    /** Shown, and read, for a read-only rating without a value. */
+    noRating: string;
+}
+export declare const RATING_STRINGS: RatingStrings;
+/** Number of stars: a whole number, at least one. */
+export declare function starCount(max: number): number;
+/** `value` held within 0..max; `null` for no rating or a value that is not a number. */
+export declare function clampRating(value: number | null | undefined, max: number): number | null;
+/** How much of star `star` (counted from 1) is filled, 0 to 1. */
+export declare function starFill(value: number | null, star: number): number;
+/** The value with at most one decimal: 4, 3.5, 3.7. */
+export declare function defaultRatingFormat(value: number): string;

package/dist/util/rating.js

@@ -0,0 +1,26 @@
+/** Types and pure helpers for `Rating`. Kept out of the component so they can be tested without a DOM. */
+export const RATING_STRINGS = {
+    starLabel: (value, max) => `${value} of ${max} stars`,
+    clearLabel: "Clear rating",
+    noRating: "No rating",
+};
+/** Number of stars: a whole number, at least one. */
+export function starCount(max) {
+    return Number.isFinite(max) ? Math.max(1, Math.floor(max)) : 5;
+}
+/** `value` held within 0..max; `null` for no rating or a value that is not a number. */
+export function clampRating(value, max) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return null;
+    return Math.max(0, Math.min(max, value));
+}
+/** How much of star `star` (counted from 1) is filled, 0 to 1. */
+export function starFill(value, star) {
+    if (value === null)
+        return 0;
+    return Math.max(0, Math.min(1, value - (star - 1)));
+}
+/** The value with at most one decimal: 4, 3.5, 3.7. */
+export function defaultRatingFormat(value) {
+    return String(Math.round(value * 10) / 10);
+}

package/dist/util/ready-made-strings.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The words of the components that come with text of their own: the colour
+ * picker, the ready-made contact form, and the two the docs site is built
+ * from. Each takes its own as `strings`; what is left out stays as it is here.
+ */
+/** `ColorPicker`. */
+export interface ColorPickerStrings {
+    /** Accessible name of the field the hex value is typed in. */
+    hexInput: string;
+    /** Accessible name of the swatch button that opens the picker. */
+    open: string;
+    /** Accessible name of the picker that opens. */
+    picker: string;
+    /** Accessible name of the hue slider in it. */
+    hue: string;
+    /** Accessible name of the colour map: the two sliders below, on one surface. */
+    area: string;
+    /** Accessible name of the map's slider that goes across. */
+    saturation: string;
+    /** Accessible name of the map's slider that goes up and down. */
+    lightness: string;
+    /** The message under the field while what is typed is not a hex colour. */
+    invalidHex: string;
+}
+export declare const DEFAULT_COLOR_PICKER_STRINGS: ColorPickerStrings;
+/** `ContactForm`: every label, placeholder and message of the form. */
+export interface ContactFormStrings {
+    heading: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    messageLabel: string;
+    messagePlaceholder: string;
+    subscribeLabel: string;
+    submit: string;
+    /** Under a field left empty or filled in wrongly. */
+    nameRequired: string;
+    emailRequired: string;
+    emailInvalid: string;
+    messageRequired: string;
+    /** The box above the fields when the form could not be sent: its three lines. */
+    errorTitle: string;
+    errorMessage: string;
+    errorRecovery: string;
+}
+export declare const DEFAULT_CONTACT_FORM_STRINGS: ContactFormStrings;
+/** `PropsTable`. The caption is the `caption` prop. */
+export interface PropsTableStrings {
+    name: string;
+    type: string;
+    required: string;
+    default: string;
+    description: string;
+    yes: string;
+    no: string;
+    /** Shown instead of the table when there are no props. */
+    empty: string;
+}
+export declare const DEFAULT_PROPS_TABLE_STRINGS: PropsTableStrings;
+/** `ComponentDemo`. */
+export interface ComponentDemoStrings {
+    /** The two tabs, and what the switch between them is called. */
+    preview: string;
+    code: string;
+    showPreview: string;
+    showCode: string;
+}
+export declare const DEFAULT_COMPONENT_DEMO_STRINGS: ComponentDemoStrings;
+/**
+ * Lays `strings` layers over a component's defaults, later layers winning. A
+ * key whose value is `undefined` is skipped, so `strings={{ close: t.close }}`
+ * with `t.close` missing keeps the default instead of blanking it. `null` and
+ * the empty string are kept: those are choices.
+ */
+export declare function mergeStrings<T extends object>(defaults: T, ...layers: Array<Partial<T> | null | undefined>): T;

package/dist/util/ready-made-strings.js

@@ -0,0 +1,67 @@
+/**
+ * The words of the components that come with text of their own: the colour
+ * picker, the ready-made contact form, and the two the docs site is built
+ * from. Each takes its own as `strings`; what is left out stays as it is here.
+ */
+export const DEFAULT_COLOR_PICKER_STRINGS = {
+    hexInput: "Hex color input",
+    open: "Open color picker",
+    picker: "Color picker",
+    hue: "Hue slider",
+    area: "Saturation and lightness",
+    saturation: "Saturation",
+    lightness: "Lightness",
+    invalidHex: "Please enter a valid hex color (e.g., #ff0000 or #f00)",
+};
+export const DEFAULT_CONTACT_FORM_STRINGS = {
+    heading: "Get in Touch",
+    nameLabel: "Name",
+    namePlaceholder: "Enter your name",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter your email",
+    messageLabel: "Message",
+    messagePlaceholder: "Enter your message",
+    subscribeLabel: "Subscribe to updates",
+    submit: "Send Message",
+    nameRequired: "Please enter your name.",
+    emailRequired: "Please enter your email address.",
+    emailInvalid: "Please enter a valid email address.",
+    messageRequired: "Please enter a message.",
+    errorTitle: "Something went wrong",
+    errorMessage: "We could not submit your request. Fix the highlighted fields and try again.",
+    errorRecovery: "Recovery action: review your inputs and resubmit.",
+};
+export const DEFAULT_PROPS_TABLE_STRINGS = {
+    name: "Name",
+    type: "Type",
+    required: "Required",
+    default: "Default",
+    description: "Description",
+    yes: "Yes",
+    no: "No",
+    empty: "No documented props.",
+};
+export const DEFAULT_COMPONENT_DEMO_STRINGS = {
+    preview: "Preview",
+    code: "Code",
+    showPreview: "Show preview",
+    showCode: "Show code",
+};
+/**
+ * Lays `strings` layers over a component's defaults, later layers winning. A
+ * key whose value is `undefined` is skipped, so `strings={{ close: t.close }}`
+ * with `t.close` missing keeps the default instead of blanking it. `null` and
+ * the empty string are kept: those are choices.
+ */
+export function mergeStrings(defaults, ...layers) {
+    const merged = { ...defaults };
+    for (const layer of layers) {
+        if (!layer)
+            continue;
+        for (const [key, value] of Object.entries(layer)) {
+            if (value !== undefined)
+                merged[key] = value;
+        }
+    }
+    return merged;
+}

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/scroll-padding.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `scroll-padding-bottom` on a scrolling box, shared between the things that
+ * lie over its bottom edge.
+ *
+ * Each of them saves what was there and puts it back when it leaves. Done one
+ * by one that goes wrong as soon as two overlap in time: the second saves the
+ * first one's value as "what was there", and if the first leaves first, the
+ * second later restores a value nobody owns any more. Here the box's own
+ * value is saved once, the largest request is what is set, and the box gets
+ * its own value back when the last request is released.
+ */
+/**
+ * Asks for room at the bottom of `container`. `set` gives or changes the
+ * amount in px; `release` withdraws the request. Call it in the browser.
+ */
+export declare function reserveScrollPaddingBottom(container: HTMLElement): {
+    set: (px: number) => void;
+    release: () => void;
+};

package/dist/util/scroll-padding.js

@@ -0,0 +1,44 @@
+/**
+ * `scroll-padding-bottom` on a scrolling box, shared between the things that
+ * lie over its bottom edge.
+ *
+ * Each of them saves what was there and puts it back when it leaves. Done one
+ * by one that goes wrong as soon as two overlap in time: the second saves the
+ * first one's value as "what was there", and if the first leaves first, the
+ * second later restores a value nobody owns any more. Here the box's own
+ * value is saved once, the largest request is what is set, and the box gets
+ * its own value back when the last request is released.
+ */
+const reservations = new WeakMap();
+function apply(container, reservation) {
+    const largest = Math.max(0, ...reservation.requests.values());
+    container.style.scrollPaddingBottom = `${largest}px`;
+}
+/**
+ * Asks for room at the bottom of `container`. `set` gives or changes the
+ * amount in px; `release` withdraws the request. Call it in the browser.
+ */
+export function reserveScrollPaddingBottom(container) {
+    const key = Symbol("scroll-padding");
+    let reservation = reservations.get(container);
+    if (!reservation) {
+        reservation = { original: container.style.scrollPaddingBottom, requests: new Map() };
+        reservations.set(container, reservation);
+    }
+    const mine = reservation;
+    return {
+        set(px) {
+            mine.requests.set(key, px);
+            apply(container, mine);
+        },
+        release() {
+            mine.requests.delete(key);
+            if (mine.requests.size > 0) {
+                apply(container, mine);
+                return;
+            }
+            container.style.scrollPaddingBottom = mine.original;
+            reservations.delete(container);
+        },
+    };
+}

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

@@ -0,0 +1,15 @@
+import type { Component } from "svelte";
+/** An icon component, as `@lucide/svelte` icons are. */
+export type SegmentedControlIcon = Component<{
+    size?: number;
+    class?: string;
+}>;
+/** One entry of SegmentedControl's `options`. */
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    /** Rendered before the label. Decorative: the label names the segment. */
+    icon?: SegmentedControlIcon;
+    /** A disabled segment cannot be chosen, and the arrow keys skip it. */
+    disabled?: boolean;
+}

package/dist/util/segmented-control.js

@@ -0,0 +1 @@
+export {};

package/dist/util/select.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Every word a `Select` says by itself, shown or only read out. An app in
+ * another language passes its own through `strings`; what it leaves out stays
+ * as it is here. The older props for six of them (`placeholder`,
+ * `searchPlaceholder`, `noResultsText`, `loadingText`, `emptyStateTitle`,
+ * `emptyStateDescription`) still work, and win over `strings`.
+ */
+export interface SelectStrings {
+    /** Shown in the field while nothing is chosen, and the first, empty option of the native select. */
+    placeholder: string;
+    /** Placeholder and accessible name of the search field above the options. */
+    searchPlaceholder: string;
+    /** Shown in the list when the search matches nothing. */
+    noResults: string;
+    /** Shown in the field and in the list while `isLoading`. */
+    loading: string;
+    /** Heading of the box shown in the list when there are no options at all. */
+    emptyTitle: string;
+    /** The line under that heading. */
+    emptyDescription: string;
+    /** Accessible name of the list of options. */
+    listLabel: string;
+    /** Accessible name of the close button of the sheet the list opens in on a phone. */
+    closeLabel: string;
+    /** Accessible name of that sheet's grip while its button takes the sheet up to full height. */
+    expandLabel: string;
+    /** The same, while it takes the sheet back down. */
+    collapseLabel: string;
+}
+export declare const DEFAULT_SELECT_STRINGS: SelectStrings;
+/** How a Select shows its options. See the `presentation` prop. */
+export type SelectPresentation = "auto" | "popover" | "sheet" | "native";
+/** Marks the native `<select>` a Select renders, so a choice made in it before the page hydrates can be found. */
+export declare const NATIVE_SELECT_ATTRIBUTE = "data-zabi-select";
+/**
+ * What the visitor (or the browser, restoring a form) chose in `element`
+ * before its component mounted; `undefined` when it still has the value the
+ * server rendered, and for an element this module never saw.
+ */
+export declare function choiceBeforeMount(element: Element): string | undefined;

package/dist/util/select.js

@@ -0,0 +1,63 @@
+export const DEFAULT_SELECT_STRINGS = {
+    placeholder: "Select an option",
+    searchPlaceholder: "Search options",
+    noResults: "No results found",
+    loading: "Loading options...",
+    emptyTitle: "No options available",
+    emptyDescription: "Add an option to start making selections.",
+    listLabel: "Select options",
+    closeLabel: "Close",
+    expandLabel: "Expand",
+    collapseLabel: "Collapse",
+};
+/** Marks the native `<select>` a Select renders, so a choice made in it before the page hydrates can be found. */
+export const NATIVE_SELECT_ATTRIBUTE = "data-zabi-select";
+/**
+ * What a visitor chose in each server-rendered native select before the
+ * component took it over.
+ *
+ * The server's HTML carries a real `<select>`, and it works at once: a
+ * visitor can choose from it while the scripts are still on their way, and
+ * the browser may put an earlier choice back into it after a reload or a
+ * step back. When the component then hydrates it renders the value it was
+ * given, which would silently undo that. So when this module loads, which is
+ * before anything hydrates, each select's value is noted beside the value
+ * the server rendered it with (its `selected` option, or else its first),
+ * and every change after that is noted too. The component asks for its own
+ * element's when it mounts.
+ *
+ * Only a value that differs from the rendered one is a choice. A select that
+ * nobody touched is not, whatever it shows: it used to be compared with the
+ * component's prop instead, and a value with no option of its own (its
+ * options still loading, or simply not among them) was replaced by whatever
+ * the select happened to fall back to.
+ */
+const seenBeforeMount = new WeakMap();
+/** The value a select has when nobody has touched it: that of the option with the `selected` attribute, or of the first. */
+function renderedValue(element) {
+    const options = [...element.options];
+    return (options.find((option) => option.defaultSelected) ?? options[0])?.value ?? "";
+}
+if (typeof document !== "undefined") {
+    const selector = `select[${NATIVE_SELECT_ATTRIBUTE}]`;
+    for (const element of document.querySelectorAll(selector)) {
+        seenBeforeMount.set(element, { rendered: renderedValue(element), value: element.value });
+    }
+    document.addEventListener("change", (event) => {
+        const target = event.target;
+        if (target instanceof HTMLSelectElement && target.matches(selector)) {
+            const seen = seenBeforeMount.get(target);
+            if (seen)
+                seen.value = target.value;
+        }
+    }, true);
+}
+/**
+ * What the visitor (or the browser, restoring a form) chose in `element`
+ * before its component mounted; `undefined` when it still has the value the
+ * server rendered, and for an element this module never saw.
+ */
+export function choiceBeforeMount(element) {
+    const seen = seenBeforeMount.get(element);
+    return seen && seen.value !== seen.rendered ? seen.value : undefined;
+}

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

@@ -0,0 +1,83 @@
+/**
+ * Dragging a bottom sheet with a finger or a pointer. Shared by `BottomSheet`
+ * and `SlideUp`, so the two cannot disagree on what a swipe is.
+ *
+ * It only reports the gesture: how far the pointer has travelled since the
+ * drag began and how fast it was going at the end. What that means (move the
+ * panel, snap, close) is the caller's.
+ */
+export interface SheetDragCallbacks {
+    /** Asked when a gesture could begin. Return false to leave it alone. */
+    canStart?: () => boolean;
+    onStart?: () => void;
+    /** `distance` in px since the drag began; positive is down. */
+    onMove: (distance: number) => void;
+    /** `velocity` in px per ms over the last moments of the drag; positive is down. */
+    onEnd: (distance: number, velocity: number, event: Event) => void;
+    /** The browser took the gesture back (a call came in, the pointer was lost). */
+    onCancel?: () => void;
+}
+export interface SheetDragTargets {
+    /**
+     * The grip and the area around it. A drag that starts here moves the
+     * sheet in either direction. Give it `touch-action: none`.
+     */
+    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,
+     * 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
+ * page is, and unevenly so, which made a flick on a janky frame (or a loaded
+ * machine) measure slower than it was and spring back. An event without a
+ * usable stamp gets the clock.
+ */
+export declare function timeOf(event: Event): number;
+/**
+ * How fast a pointer was moving over the last moments of a gesture, on one
+ * axis. Also used by `PhotoViewer`, for both axes.
+ */
+export declare function createVelocityTracker(): {
+    reset(y: number, time: number): void;
+    add(y: number, time: number): void;
+    velocity(): number;
+};
+/**
+ * Listens for drags on a sheet. Call it when the sheet is open, in the
+ * browser, and call the returned function when it closes.
+ */
+export declare function attachSheetDrag({ handleZone, scroller }: SheetDragTargets, callbacks: SheetDragCallbacks): () => void;
+/** A flick: faster than this, in px per ms, and the direction decides, not the distance. */
+export declare const FLICK_VELOCITY = 0.5;
+/** True where the user has asked for less motion, or where that cannot be asked. */
+export declare function prefersReducedMotion(): boolean;