@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/dist/0-face/copy-text.js

@@ -0,0 +1,97 @@
+/**
+ * Copy text to the clipboard and say so in a toast, for pages with or
+ * without a framework.
+ *
+ * It writes with the Clipboard API, and where that is missing or refused (a
+ * page served over plain HTTP, an older browser) it copies from a hidden field
+ * instead. The toast is the shared word "Copied" in the page's language,
+ * shown by `<ds-toast>` where the page has one and by the page toaster
+ * otherwise; a failure says "Could not copy".
+ *
+ * It is small on its own: the page toaster (`./toaster.ts`) loads only when a
+ * toast is shown and nothing in the page draws toasts yet, so a page that
+ * copies with `toast: false`, or has `<ds-toast>`, never loads it. Import it
+ * from here, not from `./feedback.ts`, where the page needs nothing else.
+ */
+import { feedbackWord } from "./feedback-words";
+import { toast, toasterListening } from "./toast-queue";
+/** The open modal dialog, if any: the rest of the page is inert, so the hidden field goes in it. */
+function modalDialog() {
+    try {
+        return document.querySelector("dialog:modal");
+    }
+    catch {
+        return null;
+    }
+}
+/** The fallback: select the text in a hidden field and copy the selection. */
+function copyFromField(text) {
+    if (typeof document === "undefined" || !document.body)
+        return false;
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const selection = document.getSelection();
+    const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index)) : [];
+    const field = document.createElement("textarea");
+    field.value = text;
+    field.setAttribute("readonly", "");
+    field.setAttribute("aria-hidden", "true");
+    field.tabIndex = -1;
+    field.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none";
+    (modalDialog() ?? document.body).appendChild(field);
+    field.focus({ preventScroll: true });
+    field.select();
+    field.setSelectionRange(0, text.length);
+    let copied = false;
+    try {
+        copied = document.execCommand("copy");
+    }
+    catch {
+        copied = false;
+    }
+    field.remove();
+    active?.focus({ preventScroll: true });
+    if (selection) {
+        selection.removeAllRanges();
+        for (const range of ranges)
+            selection.addRange(range);
+    }
+    return copied;
+}
+/**
+ * Copy `text` and confirm it with a toast. Resolves to whether it was copied.
+ * Call it from the click or key press that asks for it: browsers allow writing
+ * to the clipboard only then.
+ */
+export async function copyText(text, options = {}) {
+    let copied = false;
+    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard;
+    if (clipboard?.writeText) {
+        try {
+            await clipboard.writeText(text);
+            copied = true;
+        }
+        catch {
+            copied = false;
+        }
+    }
+    if (!copied)
+        copied = copyFromField(text);
+    if (options.toast !== false)
+        await say(copied, copied ? options.toast ?? feedbackWord("Copied") : feedbackWord("Could not copy"));
+    return copied;
+}
+/** The toast, with the page toaster loaded first where nothing in the page draws toasts yet. */
+async function say(copied, words) {
+    if (!toasterListening()) {
+        try {
+            (await import("./load-toaster")).pageToaster();
+        }
+        catch {
+            // No toaster could load: the copy itself still answers.
+        }
+    }
+    if (copied)
+        toast.success(words);
+    else
+        toast.error(words);
+}

package/dist/0-face/device.d.ts

@@ -1,5 +1,6 @@
 import { type ScalingConfig } from "./scaling";
-export type { ScalingConfig, ScalingMode } from "./scaling";
+export type { ScalingConfig, ScalingMode, ScalingOptions, ScalingSnap } from "./scaling";
+export { applyScaling, detectMobileDevice, startScaling, toDevicePixel, toLayoutStep } from "./scaling";
 export type DeviceType = "mobile" | "tablet" | "desktop";
 export interface DeviceInfo {
     isMobile: boolean;
@@ -15,11 +16,6 @@ export interface DeviceInfo {
 export declare const scalingFactor: import("@lit-labs/signals").Signal.State<number>;
 /** Current scaling configuration */
 export declare const scalingConfig: import("@lit-labs/signals").Signal.State<ScalingConfig>;
-/**
- * Comprehensive mobile device detection
- * Combines user agent detection, touch capability, and viewport size
- */
-export declare function detectMobileDevice(): boolean;
 /**
  * Get detailed device information
  */
@@ -38,7 +34,7 @@ export declare function calculateScalingFactor(viewportWidth: number, config?: S
 export declare function setScalingConfig(config: Partial<ScalingConfig>): void;
 /**
  * Update the scaling factor based on current viewport
- * Desktop always uses factor 1; mobile uses computed factor
+ * Desktop always uses factor 1; mobile uses computed factor (see scaling.ts)
  */
 export declare function updateScalingFactor(): void;
 /**

package/dist/0-face/device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAIA,OAAO,EAAkE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/G,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAM5D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,qCAAqC;AACrC,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAE/C,oCAAoC;AACpC,eAAO,MAAM,aAAa,yDAA8C,CAAC;AAMzE;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CA0B5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAMD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAER;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAiC1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD;AAiCD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../../DS1/0-face/device.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoG,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACjJ,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEzF,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMxG,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,qCAAqC;AACrC,eAAO,MAAM,aAAa,kDAAoB,CAAC;AAE/C,oCAAoC;AACpC,eAAO,MAAM,aAAa,yDAA8C,CAAC;AAMzE;;GAEG;AACH,wBAAgB,aAAa,IAAI,UAAU,CA6B1C;AAMD;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,aAAa,EAAE,MAAM,EACrB,MAAM,GAAE,aAAmC,GAC1C,MAAM,CAER;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CASrE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAa1C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAEzC;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGhD;AAMD;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,UAAU,CA8ChD;AAiCD;;;GAGG;AACH,wBAAgB,OAAO,IAAI,IAAI,CA4H9B"}

package/dist/0-face/device.js

@@ -1,7 +1,9 @@
 // device.ts
 // Device detection, context utilities, and responsive scaling
 import { signal } from "@lit-labs/signals";
-import { calculateScalingFactor as calculateScale, defaultScalingConfig } from "./scaling";
+import { applyScaling, calculateScalingFactor as calculateScale, defaultScalingConfig, detectMobileDevice } from "./scaling";
+// One rule for which screens scale, shared with pages that copy scaling.ts alone.
+export { applyScaling, detectMobileDevice, startScaling, toDevicePixel, toLayoutStep } from "./scaling";
 /** Reactive scaling factor signal */
 export const scalingFactor = signal(1);
 /** Current scaling configuration */
@@ -9,28 +11,6 @@ export const scalingConfig = signal(defaultScalingConfig);
 // ============================================================================
 // Device Detection
 // ============================================================================
-/**
- * Comprehensive mobile device detection
- * Combines user agent detection, touch capability, and viewport size
- */
-export function detectMobileDevice() {
-    if (typeof navigator === "undefined" || typeof window === "undefined") {
-        return false;
-    }
-    const nav = navigator;
-    const win = window;
-    const ua = (nav && (nav.userAgent || nav.vendor)) || (win && win.opera) || "";
-    // User agent based detection
-    const uaMatchesMobile = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(ua);
-    // Touch capability detection
-    const touchPoints = (nav && nav.maxTouchPoints) || 0;
-    const isTouchCapable = touchPoints > 1;
-    // Viewport detection
-    const narrowViewport = win
-        ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820
-        : false;
-    return uaMatchesMobile || (isTouchCapable && narrowViewport);
-}
 /**
  * Get detailed device information
  */
@@ -86,31 +66,17 @@ export function setScalingConfig(config) {
 }
 /**
  * Update the scaling factor based on current viewport
- * Desktop always uses factor 1; mobile uses computed factor
+ * Desktop always uses factor 1; mobile uses computed factor (see scaling.ts)
  */
 export function updateScalingFactor() {
     if (typeof window === "undefined" || typeof document === "undefined") {
         return;
     }
-    const isMobile = detectMobileDevice();
-    // Desktop: always use factor 1
-    if (!isMobile) {
-        const factor = 1;
-        scalingFactor.set(factor);
-        document.documentElement.style.setProperty("--sf", factor.toString());
-        window.dispatchEvent(new CustomEvent("scaling-changed", {
-            detail: { scalingFactor: factor, config: scalingConfig.get() },
-        }));
-        return;
-    }
-    // Mobile: compute scaling based on viewport
-    const viewportWidth = document.documentElement.clientWidth;
     const config = scalingConfig.get();
-    const newFactor = calculateScalingFactor(viewportWidth, config);
-    scalingFactor.set(newFactor);
-    document.documentElement.style.setProperty("--sf", newFactor.toString());
+    const factor = applyScaling(config);
+    scalingFactor.set(factor);
     window.dispatchEvent(new CustomEvent("scaling-changed", {
-        detail: { scalingFactor: newFactor, config },
+        detail: { scalingFactor: factor, config },
     }));
 }
 /**

package/dist/0-face/dialog-swipe.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Swipe a sheet or a drawer away: a finger that drags a dialog towards the
+ * edge it came from moves it, and letting go far or fast enough dismisses it.
+ * `ds-dialog` binds it for `placement="sheet"`, `"end"` and `"start"`; a page
+ * without Lit binds its own `dialog.ds-dialog--sheet` (or `--end`, `--start`)
+ * with `bindDialogSwipe(dialog)`. Plain TypeScript with no framework.
+ *
+ * It follows the finger as touch does on Apple's platforms:
+ *
+ * - Touch alone; a mouse or a trackpad closes with Escape or the close button.
+ * - Ten pixels of movement before it decides, then it tracks the finger one
+ *   to one from where it was grabbed, a moving dialog included (it starts
+ *   from the dialog's place on screen, not from where it was going).
+ * - A drag along the content's own scroll is the content's: a sheet scrolled
+ *   down scrolls back up first, a horizontal strip in a drawer scrolls, and a
+ *   slider, a range input or anything marked `data-ds-dialog-no-swipe` keeps
+ *   its touches.
+ * - Dragged the other way, it gives a little and pulls back (rubber-banding).
+ * - On release it projects where the throw would come to rest (the
+ *   deceleration of a scroll, rate 0.998) and dismisses when that is past half
+ *   its size and the finger is not moving back; otherwise it settles home.
+ * - The backdrop fades as the dialog goes (`--ds-dialog-progress`).
+ *
+ * Dismissing asks first, as a close button does: the element sends
+ * `ds-close-request` with the reason `"swipe"`, the native frame a cancelable
+ * `ds-close-request` on the dialog, and closes it when no listener prevents
+ * that. Declined (a form with unsaved changes asking first), it settles home.
+ * The motion itself is dialog-placement.css's, in transform alone.
+ */
+export type DialogPlacement = "center" | "sheet" | "end" | "start";
+export interface DialogSwipeOptions {
+    /** Where the dialog stands, read at each touch; from its class or `data-ds-placement` by default. */
+    placement?: DialogPlacement | (() => DialogPlacement);
+    /**
+     * Called when a swipe would dismiss it. By default a cancelable
+     * `ds-close-request` (`detail.reason` `"swipe"`) on the dialog, then
+     * `dialog.close()` unless a listener prevented it. Still open two frames
+     * later, the dialog settles home.
+     */
+    onDismiss?: (dialog: HTMLDialogElement) => void;
+}
+/** A dialog's placement, from `data-ds-placement` or its `ds-dialog--` class. */
+export declare function dialogPlacement(dialog: HTMLDialogElement): DialogPlacement;
+/**
+ * Let a finger swipe a sheet or drawer away. Returns the function that
+ * unbinds it and clears what it set on the dialog.
+ */
+export declare function bindDialogSwipe(dialog: HTMLDialogElement, options?: DialogSwipeOptions): () => void;
+//# sourceMappingURL=dialog-swipe.d.ts.map

package/dist/0-face/dialog-swipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-swipe.d.ts","sourceRoot":"","sources":["../../DS1/0-face/dialog-swipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,kBAAkB;IACjC,qGAAqG;IACrG,SAAS,CAAC,EAAE,eAAe,GAAG,CAAC,MAAM,eAAe,CAAC,CAAC;IACtD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACjD;AAaD,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,eAAe,CAK1E;AA4DD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,EAAE,OAAO,GAAE,kBAAuB,GAAG,MAAM,IAAI,CA2HvG"}

package/dist/0-face/dialog-swipe.js

@@ -0,0 +1,239 @@
+/**
+ * Swipe a sheet or a drawer away: a finger that drags a dialog towards the
+ * edge it came from moves it, and letting go far or fast enough dismisses it.
+ * `ds-dialog` binds it for `placement="sheet"`, `"end"` and `"start"`; a page
+ * without Lit binds its own `dialog.ds-dialog--sheet` (or `--end`, `--start`)
+ * with `bindDialogSwipe(dialog)`. Plain TypeScript with no framework.
+ *
+ * It follows the finger as touch does on Apple's platforms:
+ *
+ * - Touch alone; a mouse or a trackpad closes with Escape or the close button.
+ * - Ten pixels of movement before it decides, then it tracks the finger one
+ *   to one from where it was grabbed, a moving dialog included (it starts
+ *   from the dialog's place on screen, not from where it was going).
+ * - A drag along the content's own scroll is the content's: a sheet scrolled
+ *   down scrolls back up first, a horizontal strip in a drawer scrolls, and a
+ *   slider, a range input or anything marked `data-ds-dialog-no-swipe` keeps
+ *   its touches.
+ * - Dragged the other way, it gives a little and pulls back (rubber-banding).
+ * - On release it projects where the throw would come to rest (the
+ *   deceleration of a scroll, rate 0.998) and dismisses when that is past half
+ *   its size and the finger is not moving back; otherwise it settles home.
+ * - The backdrop fades as the dialog goes (`--ds-dialog-progress`).
+ *
+ * Dismissing asks first, as a close button does: the element sends
+ * `ds-close-request` with the reason `"swipe"`, the native frame a cancelable
+ * `ds-close-request` on the dialog, and closes it when no listener prevents
+ * that. Declined (a form with unsaved changes asking first), it settles home.
+ * The motion itself is dialog-placement.css's, in transform alone.
+ */
+/** Ten pixels before a touch is a drag, as the platforms wait. */
+const SLOP = 10;
+/** A scroll's deceleration: where a throw at this speed comes to rest. */
+const DECELERATION = 0.998;
+const project = (velocity) => ((velocity / 1000) * DECELERATION) / (1 - DECELERATION);
+/** Past its edge the dialog follows less the further it goes. */
+const rubberband = (overshoot, dimension, constant = 0.55) => (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
+const PLACEMENTS = new Set(["center", "sheet", "end", "start"]);
+/** A dialog's placement, from `data-ds-placement` or its `ds-dialog--` class. */
+export function dialogPlacement(dialog) {
+    const marked = dialog.getAttribute("data-ds-placement");
+    if (marked && PLACEMENTS.has(marked))
+        return marked;
+    for (const placement of ["sheet", "end", "start"])
+        if (dialog.classList.contains(`ds-dialog--${placement}`))
+            return placement;
+    return "center";
+}
+/** The axis the dialog leaves along, and the sign of the way out on it. */
+function direction(dialog, placement) {
+    if (placement === "sheet")
+        return { axis: "y", sign: 1 };
+    const rtl = dialog.ownerDocument.defaultView?.getComputedStyle(dialog).direction === "rtl";
+    const right = (placement === "end") !== rtl;
+    return { axis: "x", sign: right ? 1 : -1 };
+}
+/**
+ * True when the content under the finger would scroll for this drag, so it
+ * keeps the touch: a finger moving down on content scrolled down scrolls it
+ * back up first, and one moving up scrolls it on while there is more.
+ */
+function contentScrolls(path, dialog, axis, along) {
+    const view = dialog.ownerDocument.defaultView;
+    for (const node of path) {
+        if (!(node instanceof Element))
+            continue;
+        const style = view?.getComputedStyle(node);
+        if (axis === "y") {
+            const scrolls = /auto|scroll/.test(style?.overflowY ?? "") && node.scrollHeight > node.clientHeight;
+            if (scrolls && (along > 0 ? node.scrollTop > 0 : node.scrollTop + node.clientHeight < node.scrollHeight - 1))
+                return true;
+        }
+        else {
+            const scrolls = /auto|scroll/.test(style?.overflowX ?? "") && node.scrollWidth > node.clientWidth;
+            if (scrolls)
+                return true;
+        }
+        if (node === dialog)
+            break;
+    }
+    return false;
+}
+/** The dialog's place on screen along its axis, towards its edge, from its live transform. */
+function presented(dialog, axis, sign) {
+    const view = dialog.ownerDocument.defaultView;
+    const transform = view?.getComputedStyle(dialog).transform;
+    if (!transform || transform === "none" || typeof DOMMatrixReadOnly === "undefined")
+        return 0;
+    try {
+        const matrix = new DOMMatrixReadOnly(transform);
+        return sign * (axis === "y" ? matrix.m42 : matrix.m41);
+    }
+    catch {
+        return 0;
+    }
+}
+/**
+ * Let a finger swipe a sheet or drawer away. Returns the function that
+ * unbinds it and clears what it set on the dialog.
+ */
+export function bindDialogSwipe(dialog, options = {}) {
+    const placementNow = () => {
+        const given = typeof options.placement === "function" ? options.placement() : options.placement;
+        return given ?? dialogPlacement(dialog);
+    };
+    let gesture = null;
+    let settleTimer = 0;
+    const view = dialog.ownerDocument.defaultView;
+    const frame = (callback) => (view?.requestAnimationFrame ? view.requestAnimationFrame(callback) : view?.setTimeout(callback, 16) ?? 0);
+    const write = (offset, size, sign) => {
+        dialog.style.setProperty("--ds-dialog-drag", `${sign * offset}px`);
+        dialog.style.setProperty("--ds-dialog-progress", String(size > 0 ? Math.min(1, Math.max(0, offset / size)) : 0));
+    };
+    const clear = () => {
+        dialog.style.removeProperty("--ds-dialog-drag");
+        dialog.style.removeProperty("--ds-dialog-progress");
+        dialog.removeAttribute("data-ds-dialog-dragging");
+    };
+    /** Home: the stylesheet's transition takes it back from where it is. */
+    const settle = () => {
+        dialog.removeAttribute("data-ds-dialog-dragging");
+        dialog.style.setProperty("--ds-dialog-drag", "0px");
+        dialog.style.setProperty("--ds-dialog-progress", "0");
+    };
+    const dismiss = () => {
+        dialog.removeAttribute("data-ds-dialog-dragging");
+        if (options.onDismiss)
+            options.onDismiss(dialog);
+        else {
+            const request = new CustomEvent("ds-close-request", { detail: { reason: "swipe" }, bubbles: true, composed: true, cancelable: true });
+            if (dialog.dispatchEvent(request))
+                dialog.close();
+        }
+        // A product may close it a moment later (a framework's state); declined, it goes home.
+        const token = ++settleTimer;
+        frame(() => frame(() => { if (token === settleTimer && dialog.open)
+            settle(); }));
+    };
+    const onStart = (event) => {
+        const placement = placementNow();
+        if (!dialog.open || placement === "center")
+            return;
+        if (event.touches.length !== 1) {
+            if (gesture?.mode === "drag")
+                settle();
+            gesture = null;
+            return;
+        }
+        const path = event.composedPath();
+        if (path.some(node => node instanceof Element && node.matches('[data-ds-dialog-no-swipe], input[type="range"], [role="slider"]')))
+            return;
+        const touch = event.touches[0];
+        const { axis, sign } = direction(dialog, placement);
+        gesture = { id: touch.identifier, x: touch.clientX, y: touch.clientY, base: Math.max(0, presented(dialog, axis, sign)), start: 0, mode: "pending", offset: 0, samples: [], target: event.target, path };
+    };
+    const onMove = (event) => {
+        if (!gesture || gesture.mode === "ignore")
+            return;
+        const touch = [...event.touches].find(each => each.identifier === gesture.id);
+        if (!touch)
+            return;
+        const placement = placementNow();
+        if (placement === "center") {
+            gesture = null;
+            return;
+        }
+        const { axis, sign } = direction(dialog, placement);
+        const dx = touch.clientX - gesture.x, dy = touch.clientY - gesture.y;
+        const along = axis === "y" ? dy * sign : dx * sign;
+        const across = axis === "y" ? dx : dy;
+        if (gesture.mode === "pending") {
+            if (Math.hypot(dx, dy) < SLOP)
+                return;
+            if (Math.abs(along) <= Math.abs(across) || contentScrolls(gesture.path, dialog, axis, along)) {
+                gesture.mode = "ignore";
+                return;
+            }
+            gesture.mode = "drag";
+            gesture.start = along;
+            settleTimer++;
+            dialog.setAttribute("data-ds-dialog-dragging", "");
+        }
+        event.preventDefault();
+        const rect = dialog.getBoundingClientRect();
+        const size = axis === "y" ? rect.height : rect.width;
+        const raw = gesture.base + along - gesture.start;
+        gesture.offset = raw < 0 ? rubberband(raw, size || 1) : raw;
+        write(gesture.offset, size, sign);
+        const time = event.timeStamp || (view?.performance?.now() ?? Date.now());
+        gesture.samples.push({ time, offset: gesture.offset });
+        while (gesture.samples.length > 2 && time - gesture.samples[0].time > 150)
+            gesture.samples.shift();
+    };
+    const onEnd = (event) => {
+        if (!gesture)
+            return;
+        if ([...event.touches].some(each => each.identifier === gesture.id))
+            return;
+        const ended = gesture;
+        gesture = null;
+        if (ended.mode !== "drag")
+            return;
+        const placement = placementNow();
+        const { axis } = direction(dialog, placement === "center" ? "sheet" : placement);
+        const rect = dialog.getBoundingClientRect();
+        const size = axis === "y" ? rect.height : rect.width;
+        // The speed of the last tenth of a second: a finger held still before letting go throws nothing.
+        const now = event.timeStamp || (view?.performance?.now() ?? Date.now());
+        const recent = ended.samples.filter(sample => now - sample.time <= 100);
+        const first = recent[0], last = recent[recent.length - 1];
+        const elapsed = first && last ? last.time - first.time : 0;
+        const velocity = first && last && elapsed > 0 ? ((last.offset - first.offset) / elapsed) * 1000 : 0;
+        const resting = ended.offset + project(velocity);
+        if (event.type !== "touchcancel" && placement !== "center" && ended.offset > 0 && resting > size / 2 && velocity > -100)
+            dismiss();
+        else
+            settle();
+    };
+    // Open again: it starts from its edge, with nothing left of the last drag.
+    const observer = new MutationObserver(() => { if (dialog.open) {
+        settleTimer++;
+        gesture = null;
+        clear();
+    } });
+    observer.observe(dialog, { attributes: true, attributeFilter: ["open"] });
+    dialog.addEventListener("touchstart", onStart, { passive: true });
+    dialog.addEventListener("touchmove", onMove, { passive: false });
+    dialog.addEventListener("touchend", onEnd, { passive: true });
+    dialog.addEventListener("touchcancel", onEnd, { passive: true });
+    return () => {
+        observer.disconnect();
+        dialog.removeEventListener("touchstart", onStart);
+        dialog.removeEventListener("touchmove", onMove);
+        dialog.removeEventListener("touchend", onEnd);
+        dialog.removeEventListener("touchcancel", onEnd);
+        settleTimer++;
+        gesture = null;
+        clear();
+    };
+}

package/dist/0-face/dialogs.d.ts

@@ -0,0 +1,33 @@
+export interface AlertOptions {
+    title: string;
+    text?: string;
+    /** The button's words; the shared word "OK" by default. */
+    confirm?: string;
+}
+export interface ConfirmOptions {
+    title: string;
+    text?: string;
+    /** The confirming button's words; the shared word "OK" by default. Name the action when it has one ("Delete"). */
+    confirm?: string;
+    /** The cancelling button's words; the shared word "Cancel" by default. */
+    cancel?: string;
+    /** A destructive action: the confirming button in the danger colour, Cancel focused, and no backdrop dismissal. */
+    danger?: boolean;
+}
+export interface PromptOptions {
+    title: string;
+    text?: string;
+    /** The field's label, shown above it; without one, the title names the field. */
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    confirm?: string;
+    cancel?: string;
+}
+/** In place of `alert()`: a message with one button. Resolves when it is dismissed. */
+export declare function alert(options: AlertOptions | string): Promise<void>;
+/** In place of `confirm()`: resolves to `true` when confirmed, `false` otherwise. */
+export declare function confirm(options: ConfirmOptions | string): Promise<boolean>;
+/** In place of `prompt()`: resolves to the text written, or `null` when cancelled. */
+export declare function prompt(options: PromptOptions | string): Promise<string | null>;
+//# sourceMappingURL=dialogs.d.ts.map

package/dist/0-face/dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogs.d.ts","sourceRoot":"","sources":["../../DS1/0-face/dialogs.ts"],"names":[],"mappings":"AAuBA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kHAAkH;IAClH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsID,uFAAuF;AACvF,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAInE;AAED,qFAAqF;AACrF,wBAAgB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAI1E;AAED,sFAAsF;AACtF,wBAAgB,MAAM,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAQ9E"}