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

package/dist/0-face/toaster.js

@@ -0,0 +1,373 @@
+/**
+ * The page toaster: Sonner's toast stack on a page without Lit or any other
+ * framework. Import it (or `0-face/feedback.ts`) and call `toast()`; nothing
+ * else goes in the page.
+ *
+ * BASED ON SONNER, the React toast library by Emil Kowalski
+ * (https://sonner.emilkowal.ski, https://github.com/emilkowalski/sonner, MIT
+ * licence), as `<ds-toast>` is: the same calls, options, stacking, timers,
+ * hover and focus pauses, swipe, Alt+T and 400ms slide and fade.
+ *
+ * It shares the look rather than wrapping the element: it draws the element's
+ * markup in a shadow root of its own with the element's stylesheet
+ * (`2-core/styles/ds-toast.css`, as plain text in `./generated/toast-assets.ts`,
+ * which `scripts/toast-assets.mjs` writes from it), so the two cannot drift
+ * apart, and it needs no Lit, which a page without Lit does not have. It is
+ * plain TypeScript: no `?inline` or `?raw` import, so any bundler and type
+ * check reads it. It shares the queue too
+ * (`0-face/toast-queue.ts`): where a `<ds-toast>` is in the page, that element
+ * takes every toast and this one stays quiet, so a page never shows two stacks.
+ *
+ * Its region is in the page before the first toast arrives, a polite live
+ * region in which each toast is announced, and an error assertively. Only
+ * `transform` and `opacity` animate, and nothing moves with reduced motion.
+ */
+import { feedbackWord } from "./feedback-words";
+import { toastIcons, toastStyles } from "./generated/toast-assets";
+import { SWIPE_THRESHOLD, SWIPE_VELOCITY, TIME_BEFORE_UNMOUNT, TOAST_DURATION, TOAST_ICONS, VISIBLE_TOASTS, listenForToasts, setFallbackToaster, } from "./toast-queue";
+export { toast } from "./toast-queue";
+/** The icons the page carries: the types' own and the close button's, in the text's colour. */
+const INK = /(fill|stroke)=("|')(#1E1E1E|#2A2A2A|#000000|#000|black)\2/gi;
+const SVGS = Object.fromEntries(Object.entries(toastIcons)
+    .map(([name, svg]) => [name, svg.replace(INK, '$1="currentColor"')]));
+let settings = {};
+let current;
+/** Set the page toaster's options, as Sonner's `<Toaster />` props. Toasts already shown take them at once. */
+export function configureToaster(options) {
+    settings = { ...settings, ...options };
+    current?.render();
+}
+const frame = (callback) => typeof requestAnimationFrame === "function" ? requestAnimationFrame(callback) : setTimeout(callback, 16);
+function element(name, attributes = {}, text) {
+    const node = document.createElement(name);
+    for (const [key, value] of Object.entries(attributes))
+        node.setAttribute(key, value);
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+function icon(name, className) {
+    const svg = SVGS[name];
+    if (!svg)
+        return undefined;
+    const span = element("span", { class: className, "aria-hidden": "true" });
+    span.innerHTML = svg;
+    return span;
+}
+class PageToaster {
+    constructor() {
+        this.host = element("div", { "data-ds-toaster": "" });
+        this.section = element("section", { "aria-live": "polite", "aria-relevant": "additions text", "aria-atomic": "false" });
+        this.list = element("ol", { tabindex: "-1" });
+        this.items = [];
+        this.heights = new Map();
+        this.timers = new Map();
+        this.hovered = false;
+        this.focused = false;
+        this.interacting = false;
+        this.mounting = false;
+        this.resizes = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => this.measure());
+        this.receive = (signal) => {
+            if ("dismiss" in signal) {
+                for (const item of this.live)
+                    if (signal.dismiss === undefined || item.data.id === signal.dismiss)
+                        this.removeToast(item.data.id);
+                return;
+            }
+            this.attach();
+            const data = signal.toast;
+            const existing = this.live.find(item => item.data.id === data.id);
+            if (existing) {
+                // An update keeps what it does not change and starts its time again, as in Sonner.
+                existing.data = { ...existing.data, ...data };
+                this.clearTimer(data.id);
+            }
+            else {
+                this.items = [{ data, mounted: false, removed: false, swipeOut: false, index: 0, offset: 0 }, ...this.items.filter(item => item.data.id !== data.id)];
+            }
+            this.render();
+        };
+        /** Sonner's timers: each toast keeps its remaining time while the stack is paused. */
+        this.syncTimers = () => {
+            const now = Date.now();
+            for (const item of this.live) {
+                const { id, type } = item.data;
+                const duration = item.data.duration ?? settings.duration ?? TOAST_DURATION;
+                if (type === "loading" || duration === Infinity) {
+                    this.clearTimer(id);
+                    continue;
+                }
+                let timer = this.timers.get(id);
+                if (!timer) {
+                    timer = { remaining: duration, started: now };
+                    this.timers.set(id, timer);
+                }
+                if (this.paused && timer.handle !== undefined) {
+                    clearTimeout(timer.handle);
+                    timer.handle = undefined;
+                    timer.remaining -= now - timer.started;
+                }
+                else if (!this.paused && timer.handle === undefined) {
+                    timer.started = now;
+                    timer.handle = setTimeout(() => this.removeToast(id, "auto"), Math.max(0, timer.remaining));
+                }
+            }
+        };
+        this.hotkey = (event) => {
+            if (event.altKey && event.code === "KeyT" && this.live.length) {
+                this.focused = true;
+                this.list.focus();
+                this.render();
+            }
+            else if (event.key === "Escape" && this.focused) {
+                this.focused = false;
+                this.render();
+            }
+        };
+        const root = this.host.attachShadow({ mode: "open" });
+        root.appendChild(element("style", {}, toastStyles));
+        root.appendChild(this.section);
+        this.section.appendChild(this.list);
+        this.list.addEventListener("pointerenter", () => { this.hovered = true; this.render(); });
+        this.list.addEventListener("pointerleave", () => { if (!this.interacting) {
+            this.hovered = false;
+            this.render();
+        } });
+        this.list.addEventListener("focusin", () => { this.focused = true; this.render(); });
+        this.list.addEventListener("focusout", event => {
+            if (!(event.relatedTarget instanceof Node && root.contains(event.relatedTarget))) {
+                this.focused = false;
+                this.render();
+            }
+        });
+        document.addEventListener("keydown", this.hotkey);
+        document.addEventListener("visibilitychange", this.syncTimers);
+        window.addEventListener("language-changed", () => this.render());
+        listenForToasts(this.receive, { fallback: true });
+        this.attach();
+        this.render();
+    }
+    /** Back in the page if something took it out, at the end of the body. */
+    attach() {
+        if (!this.host.isConnected && document.body)
+            document.body.appendChild(this.host);
+    }
+    get live() { return this.items.filter(item => !item.removed); }
+    get position() { return settings.position ?? "bottom-right"; }
+    get expanded() { return !!settings.expand || ((this.hovered || this.focused) && this.live.length > 0); }
+    get paused() { return this.hovered || this.focused || this.interacting || document.hidden; }
+    removeToast(id, how = "dismiss") {
+        const item = this.live.find(entry => entry.data.id === id);
+        if (!item)
+            return;
+        this.clearTimer(id);
+        this.heights.delete(id);
+        (how === "auto" ? item.data.onAutoClose : item.data.onDismiss)?.(item.data);
+        item.removed = true;
+        item.swipeOut = how === "swipe";
+        this.render();
+        setTimeout(() => {
+            this.items = this.items.filter(entry => entry !== item);
+            this.render();
+        }, TIME_BEFORE_UNMOUNT);
+    }
+    clearTimer(id) {
+        clearTimeout(this.timers.get(id)?.handle);
+        this.timers.delete(id);
+    }
+    measure() {
+        let changed = false;
+        for (const item of this.live) {
+            const toast = item.element;
+            const body = toast?.querySelector(".body");
+            if (!toast || !body)
+                continue;
+            const height = body.offsetHeight + toast.offsetHeight - toast.clientHeight;
+            if (this.heights.get(item.data.id) !== height) {
+                this.heights.set(item.data.id, height);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.layout();
+    }
+    press(event, id, button) {
+        button.onClick?.(event);
+        if (button.href || !event.defaultPrevented)
+            this.removeToast(id);
+    }
+    button(id, button, kind) {
+        const node = button.href ? element("a", { class: `button ${kind}`, href: button.href }, button.label) : element("button", { class: `button ${kind}`, type: "button" }, button.label);
+        node.addEventListener("click", event => this.press(event, id, button));
+        return node;
+    }
+    /** The toast's words and buttons, drawn again only when they change. */
+    draw(item) {
+        const { data } = item;
+        const dismissible = data.dismissible !== false;
+        const closeButton = (data.closeButton ?? settings.closeButton ?? false) && dismissible;
+        const closeLabel = settings.closeLabel ?? feedbackWord("Close");
+        const key = JSON.stringify([data.title, data.description, data.type, data.icon, data.action?.label, data.action?.href, data.cancel?.label, data.cancel?.href, closeButton, closeLabel]);
+        const previous = item.element?.querySelector(".body");
+        if (item.drawn === key && previous)
+            return;
+        item.drawn = key;
+        if (previous)
+            this.resizes?.unobserve(previous);
+        const body = element("div", { class: "body", "data-id": String(data.id) });
+        const symbol = data.type === "loading" ? element("span", { class: "icon", "aria-hidden": "true" }) : icon(data.icon ?? TOAST_ICONS[data.type] ?? "", "icon");
+        if (data.type === "loading")
+            symbol.appendChild(element("span", { class: "spinner" }));
+        const content = element("div", { class: "content" });
+        content.appendChild(element("div", { class: "title" }, data.title));
+        if (data.description)
+            content.appendChild(element("div", { class: "description" }, data.description));
+        if (symbol)
+            body.appendChild(symbol);
+        body.appendChild(content);
+        if (data.cancel)
+            body.appendChild(this.button(data.id, data.cancel, "cancel"));
+        if (data.action)
+            body.appendChild(this.button(data.id, data.action, "action"));
+        if (closeButton) {
+            const close = element("button", { class: "close", type: "button", "aria-label": closeLabel });
+            close.innerHTML = SVGS.close;
+            close.addEventListener("click", () => this.removeToast(data.id));
+            body.appendChild(close);
+        }
+        item.element.replaceChildren(body);
+        this.resizes?.observe(body);
+    }
+    create(item) {
+        const toast = element("li", { class: "toast", role: "status", tabindex: "0", "aria-atomic": "true" });
+        const id = item.data.id;
+        toast.addEventListener("pointerdown", event => {
+            const now = this.live.find(entry => entry.data.id === id);
+            if (!now || now.data.dismissible === false || now.data.type === "loading")
+                return;
+            if (event.composedPath()[0]?.closest?.("button, a"))
+                return;
+            toast.setPointerCapture?.(event.pointerId);
+            this.swipe = { id, start: event.clientY, time: Date.now(), amount: 0 };
+            this.interacting = true;
+            this.syncTimers();
+        });
+        toast.addEventListener("pointermove", event => {
+            if (!this.swipe || this.swipe.id !== id)
+                return;
+            const toward = this.position.startsWith("top") ? -1 : 1;
+            // Only towards the edge the toast came from.
+            this.swipe.amount = Math.max(0, (event.clientY - this.swipe.start) * toward);
+            toast.dataset.swiping = "true";
+            toast.style.setProperty("--swipe", `${this.swipe.amount * toward}px`);
+        });
+        const release = () => {
+            const swipe = this.swipe;
+            if (!swipe || swipe.id !== id)
+                return;
+            this.swipe = undefined;
+            this.interacting = false;
+            delete toast.dataset.swiping;
+            const velocity = swipe.amount / Math.max(1, Date.now() - swipe.time);
+            if (swipe.amount >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)
+                this.removeToast(id, "swipe");
+            else
+                toast.style.setProperty("--swipe", "0px");
+            this.syncTimers();
+        };
+        toast.addEventListener("pointerup", release);
+        toast.addEventListener("pointercancel", release);
+        return toast;
+    }
+    /** Draw the stack: every toast's place, and each toast's words where they changed. */
+    render() {
+        if (!this.live.length) {
+            this.hovered = false;
+            this.focused = false;
+        }
+        this.section.setAttribute("aria-label", `${settings.label ?? feedbackWord("Notifications")} alt+T`);
+        this.host.toggleAttribute("rich-colors", !!settings.richColors);
+        for (const item of this.items) {
+            item.element ?? (item.element = this.create(item));
+            this.draw(item);
+        }
+        this.items.forEach((item, index) => {
+            if (this.list.children[index] !== item.element)
+                this.list.insertBefore(item.element, this.list.children[index] ?? null);
+        });
+        // A copy: the live collection shrinks as children leave.
+        for (const child of Array.from(this.list.children)) {
+            if (this.items.some(item => item.element === child))
+                continue;
+            const body = child.querySelector(".body");
+            if (body)
+                this.resizes?.unobserve(body);
+            child.remove();
+        }
+        this.layout();
+        this.measure();
+        this.syncTimers();
+        if (!this.mounting && this.items.some(item => !item.mounted)) {
+            // Mount on the next frame so the toast slides in from its edge.
+            this.mounting = true;
+            frame(() => {
+                this.mounting = false;
+                for (const item of this.items)
+                    item.mounted = true;
+                this.layout();
+            });
+        }
+    }
+    /** Each toast's index and offset, counting live toasts only; one leaving keeps where it was. */
+    layout() {
+        let offset = 0;
+        this.live.forEach((item, index) => {
+            item.index = index;
+            item.offset = offset;
+            offset += this.heights.get(item.data.id) ?? 0;
+        });
+        const live = this.live;
+        const frontHeight = live.length ? this.heights.get(live[0].data.id) ?? 0 : 0;
+        const expanded = this.expanded;
+        const [y, x] = this.position.split("-");
+        Object.assign(this.list.dataset, { y, x, expanded: String(expanded) });
+        this.list.style.setProperty("--height", `${expanded ? offset : frontHeight}px`);
+        this.list.style.setProperty("--gaps", String(expanded ? Math.max(0, live.length - 1) : 0));
+        const visible = settings.visibleToasts ?? VISIBLE_TOASTS;
+        for (const item of this.items) {
+            const toast = item.element;
+            toast.setAttribute("aria-live", item.data.important ? "assertive" : "polite");
+            Object.assign(toast.dataset, {
+                type: item.data.type,
+                front: String(item.index === 0),
+                mounted: String(item.mounted),
+                removed: String(item.removed),
+                swipeOut: String(item.swipeOut),
+                visible: String(item.index < visible),
+            });
+            toast.style.setProperty("--index", String(item.index));
+            toast.style.setProperty("--offset", `${item.offset}px`);
+            toast.style.setProperty("--front-height", `${frontHeight}px`);
+            toast.style.zIndex = String(this.items.length - item.index);
+        }
+    }
+}
+/** The page toaster, put in the page when it is first needed. */
+export function pageToaster() {
+    if (typeof document === "undefined" || !document.body)
+        return undefined;
+    current ?? (current = new PageToaster());
+    current.attach();
+    return current.host;
+}
+setFallbackToaster(() => { pageToaster(); });
+// The region is in the page before the first toast, so the first is announced
+// too; not where a `<ds-toast>` already draws the toasts.
+if (typeof document !== "undefined") {
+    const ready = () => { if (typeof customElements === "undefined" || !customElements.get("ds-toast"))
+        pageToaster(); };
+    if (document.readyState === "loading")
+        document.addEventListener("DOMContentLoaded", ready, { once: true });
+    else
+        ready();
+}

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

@@ -1,8 +1,31 @@
 /**
  * One tooltip for a whole page: any element with `data-tooltip="…"` shows its text in Design system 1's tooltip,
- * Ezo's label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
+ * a small label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
  * the sides, two pixels above the element, shown at once. `data-tooltip-colour` gives it a colour of its own. The same look as `<ds-tooltip>`, without wrapping each element in a component, so a table of
  * hundreds of cells can carry one each. Long text wraps at 320px on 20px lines.
+ * Elements inside a component's open shadow root are found as well (`ds-sidebar`
+ * marks its cut-short labels this way); the description link is set only on
+ * elements in the document itself, since an id cannot reach across a shadow root.
+ *
+ * It shows on hover with a mouse or pen, and on focus only when the focus is
+ * the keyboard's (`:focus-visible`), so a menu that moves focus into its first
+ * row does not raise one. A showing tooltip follows its text as
+ * `data-tooltip` changes. On touch, a long press shows it, and a tap does on
+ * an element marked `data-tooltip-press`; it goes at the next touch or after
+ * a moment. `showTooltip(element)` and `hideTooltip()` show and hide it from
+ * code.
  */
+/** How long a tooltip raised by touch stays, in milliseconds. */
+export declare const TOUCH_TOOLTIP_DURATION = 2000;
+/** How long a finger rests before a long press shows the tooltip, in milliseconds. */
+export declare const LONG_PRESS_DELAY = 500;
+export type ShowTooltipOptions = {
+    /** Hide it after this many milliseconds; it stays until hidden by default. */
+    duration?: number;
+};
+/** Show an element's `data-tooltip` now, as a press would: it stays until `hideTooltip()`, or for `duration`. */
+export declare function showTooltip(target: HTMLElement, options?: ShowTooltipOptions): void;
+/** Hide the tooltip, however it was shown. */
+export declare function hideTooltip(): void;
 export declare function initTooltips(): void;
 //# sourceMappingURL=tooltips.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltips.d.ts","sourceRoot":"","sources":["../../DS1/0-face/tooltips.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAsEnC"}
+{"version":3,"file":"tooltips.d.ts","sourceRoot":"","sources":["../../DS1/0-face/tooltips.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAIpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAeF,iHAAiH;AACjH,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAGnF;AAED,8CAA8C;AAC9C,wBAAgB,WAAW,IAAI,IAAI,CAElC;AAED,wBAAgB,YAAY,IAAI,IAAI,CAoKnC"}

package/dist/0-face/tooltips.js

@@ -1,11 +1,42 @@
 /**
  * One tooltip for a whole page: any element with `data-tooltip="…"` shows its text in Design system 1's tooltip,
- * Ezo's label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
+ * a small label: 16px high, black with white text (white on black in dark mode), 4px corners, 14px regular, 2.5px at
  * the sides, two pixels above the element, shown at once. `data-tooltip-colour` gives it a colour of its own. The same look as `<ds-tooltip>`, without wrapping each element in a component, so a table of
  * hundreds of cells can carry one each. Long text wraps at 320px on 20px lines.
+ * Elements inside a component's open shadow root are found as well (`ds-sidebar`
+ * marks its cut-short labels this way); the description link is set only on
+ * elements in the document itself, since an id cannot reach across a shadow root.
+ *
+ * It shows on hover with a mouse or pen, and on focus only when the focus is
+ * the keyboard's (`:focus-visible`), so a menu that moves focus into its first
+ * row does not raise one. A showing tooltip follows its text as
+ * `data-tooltip` changes. On touch, a long press shows it, and a tap does on
+ * an element marked `data-tooltip-press`; it goes at the next touch or after
+ * a moment. `showTooltip(element)` and `hideTooltip()` show and hide it from
+ * code.
  */
+/** How long a tooltip raised by touch stays, in milliseconds. */
+export const TOUCH_TOOLTIP_DURATION = 2000;
+/** How long a finger rests before a long press shows the tooltip, in milliseconds. */
+export const LONG_PRESS_DELAY = 500;
+/** How far a finger may move, in pixels, before a press is a scroll instead. */
+const PRESS_SLOP = 10;
+// Shared through the window, so two copies of this module on a page share one tooltip.
+const KEY = Symbol.for("ds-one:tooltips");
+function controller() {
+    return typeof window === "undefined" ? undefined : window[KEY];
+}
+/** Show an element's `data-tooltip` now, as a press would: it stays until `hideTooltip()`, or for `duration`. */
+export function showTooltip(target, options) {
+    initTooltips();
+    controller()?.show(target, options);
+}
+/** Hide the tooltip, however it was shown. */
+export function hideTooltip() {
+    controller()?.hide();
+}
 export function initTooltips() {
-    if (typeof document === "undefined")
+    if (typeof document === "undefined" || !document.body)
         return;
     const root = document.documentElement;
     if (root.hasAttribute("data-ds-tooltips-ready"))
@@ -32,6 +63,7 @@ export function initTooltips() {
     document.head.appendChild(style);
     document.body.appendChild(bubble);
     let current = null;
+    let timer;
     const place = (target) => {
         const box = target.getBoundingClientRect();
         const width = bubble.offsetWidth;
@@ -41,46 +73,153 @@ export function initTooltips() {
         const top = box.top - height - 2 >= 4 ? box.top - height - 2 : box.bottom + 2;
         bubble.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
     };
-    const show = (target) => {
+    /** Draws the target's text and colour; false when it has no text. */
+    const draw = (target) => {
         const text = target.dataset.tooltip;
         if (!text)
-            return;
-        current = target;
+            return false;
         bubble.textContent = text;
-        // A colour of its own, as Ezo's labels take the accent: data-tooltip-colour="#f5aad1", lettered in the ink.
+        // A colour of its own, such as the accent: data-tooltip-colour="#f5aad1", lettered in the ink.
         const colour = target.dataset.tooltipColour;
-        bubble.style.setProperty("--ds-tooltip-background", colour || "");
-        bubble.style.setProperty("--ds-tooltip-color", colour ? "#1e1e1e" : "");
-        if (!colour) {
+        if (colour) {
+            bubble.style.setProperty("--ds-tooltip-background", colour);
+            bubble.style.setProperty("--ds-tooltip-color", "#1e1e1e");
+        }
+        else {
             bubble.style.removeProperty("--ds-tooltip-background");
             bubble.style.removeProperty("--ds-tooltip-color");
         }
-        // One line, as Ezo's; a long text wraps at 320px instead of running off the page.
+        // One line; a long text wraps at 320px instead of running off the page.
         bubble.classList.remove("is-wide");
         if (bubble.scrollWidth > 320)
             bubble.classList.add("is-wide");
-        target.setAttribute("aria-describedby", bubble.id);
         place(target);
+        return true;
+    };
+    // A showing tooltip follows its element's text and colour, and goes when the text does.
+    const watcher = typeof MutationObserver === "function"
+        ? new MutationObserver(() => { if (current && (!current.isConnected || !draw(current)))
+            hide(); })
+        : null;
+    const show = (target, options = {}) => {
+        clearTimeout(timer);
+        timer = undefined;
+        if (current && current !== target)
+            hide();
+        if (!draw(target))
+            return;
+        current = target;
+        if (target.getRootNode() === document)
+            target.setAttribute("aria-describedby", bubble.id);
+        watcher?.disconnect();
+        watcher?.observe(target, { attributes: true, attributeFilter: ["data-tooltip", "data-tooltip-colour"] });
         bubble.classList.add("is-visible");
+        if (options.duration !== undefined && options.duration >= 0)
+            timer = setTimeout(hide, options.duration);
     };
-    const hide = () => {
+    function hide() {
+        clearTimeout(timer);
+        timer = undefined;
+        watcher?.disconnect();
         current?.removeAttribute("aria-describedby");
         current = null;
         bubble.classList.remove("is-visible");
+    }
+    window[KEY] = { show, hide };
+    // The composed path crosses open shadow roots, where `closest` stops at the host.
+    const find = (event) => {
+        for (const node of event.composedPath()) {
+            if (node === document || node === window)
+                break;
+            if (node.hasAttribute?.("data-tooltip"))
+                return node;
+        }
+        return event.target?.closest?.("[data-tooltip]") ?? null;
     };
-    const find = (event) => event.target?.closest?.("[data-tooltip]") ?? null;
+    const keyboardFocus = (event) => {
+        const focused = event.composedPath()[0];
+        try {
+            return Boolean(focused?.matches?.(":focus-visible"));
+        }
+        catch {
+            // A browser without :focus-visible cannot tell, and a pointer's focus must not raise one.
+            return false;
+        }
+    };
+    const touch = (event) => event.pointerType === "touch";
     document.addEventListener("pointerover", (event) => {
+        // A finger has no hover: on touch a press shows the tooltip.
+        if (touch(event))
+            return;
         const target = find(event);
         if (target !== current)
             target ? show(target) : hide();
     }, { passive: true });
-    document.addEventListener("pointerleave", hide, { passive: true });
-    document.addEventListener("focusin", (event) => { const target = find(event); if (target)
-        show(target); });
+    document.addEventListener("pointerleave", (event) => { if (!touch(event))
+        hide(); }, { passive: true });
+    document.addEventListener("focusin", (event) => {
+        const target = find(event);
+        if (target && keyboardFocus(event))
+            show(target);
+    });
     document.addEventListener("focusout", hide);
     document.addEventListener("keydown", (event) => { if (event.key === "Escape")
         hide(); });
     window.addEventListener("scroll", hide, { passive: true, capture: true });
+    // Touch: a long press shows the label, a tap does where the element asks for it, and the next touch dismisses it.
+    let press = null;
+    let swallowClick = false;
+    const release = () => {
+        if (press)
+            clearTimeout(press.timer);
+        press = null;
+    };
+    document.addEventListener("pointerdown", (event) => {
+        swallowClick = false;
+        if (!touch(event))
+            return;
+        release();
+        hide();
+        const target = find(event);
+        if (!target?.dataset.tooltip)
+            return;
+        const pointer = event;
+        press = {
+            target,
+            id: pointer.pointerId,
+            x: pointer.clientX,
+            y: pointer.clientY,
+            timer: setTimeout(() => {
+                if (!press)
+                    return;
+                // The press was for the label: the click its release makes is not the element's.
+                swallowClick = true;
+                show(press.target, { duration: TOUCH_TOOLTIP_DURATION });
+                press = null;
+            }, LONG_PRESS_DELAY),
+        };
+    }, { passive: true, capture: true });
+    document.addEventListener("pointermove", (event) => {
+        const pointer = event;
+        if (press && pointer.pointerId === press.id && Math.hypot(pointer.clientX - press.x, pointer.clientY - press.y) > PRESS_SLOP)
+            release();
+    }, { passive: true, capture: true });
+    document.addEventListener("pointerup", (event) => {
+        if (!press || event.pointerId !== press.id)
+            return;
+        const { target } = press;
+        release();
+        if (target.hasAttribute("data-tooltip-press"))
+            show(target, { duration: TOUCH_TOOLTIP_DURATION });
+    }, { passive: true, capture: true });
+    document.addEventListener("pointercancel", release, { passive: true, capture: true });
+    document.addEventListener("click", (event) => {
+        if (!swallowClick)
+            return;
+        swallowClick = false;
+        event.preventDefault();
+        event.stopPropagation();
+    }, { capture: true });
 }
 if (typeof document !== "undefined") {
     if (document.readyState === "loading")