@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/interaction/tt-resizable.js

@@ -0,0 +1,210 @@
+import { Directive, directive } from "lit/directive.js";
+import { PartType } from "lit/directive.js";
+/*
+  A resize HANDLE, behaviour only: it reports movement and never applies
+  it.
+
+  Put it on the strip or corner a person grabs. The owner keeps the size,
+  which is "events up, data down": the handle cannot know what it
+  resizes, so the same directive serves a sidebar, a table column and a
+  builder's canvas. The owner's half of the deal:
+
+  - Remember the size in onResizeStart, then set start + delta in
+    onResize. The delta counts from the start of the gesture, so a late
+    or dropped move event cannot make the size drift.
+  - Clamp to your own minimum and maximum. The handle knows no bounds.
+  - Divide by any scale you draw at (a zoomed canvas). The delta is in
+    the page's pixels, not yours.
+  - Give the handle its meaning. This sets no role, ARIA or tabindex,
+    because only the owner knows the label and the current size. The
+    pattern is a focusable separator (the "window splitter"):
+      role="separator" tabindex="0" aria-label="Resize sidebar"
+      aria-orientation="vertical" aria-valuenow="280"
+    plus aria-valuemin and aria-valuemax when there are bounds.
+    aria-orientation names the LINE, not the movement: a handle dragged
+    left and right is a vertical line.
+
+  Listeners are attached ONCE and read the latest options, as in
+  tt-draggable. update() runs on every render of the template this sits
+  in, and here that is every pointer move, because an onResize that sets
+  the owner's state re-renders it. Detaching and reattaching each time
+  would strip the `resizing` attribute and lose the gesture mid-drag.
+  Keeping the newest options in a field gives the same "always current"
+  behaviour without touching the element.
+*/
+class ResizableDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this.options = {};
+        this.attached = false;
+        // The pointer driving the current drag, or null between gestures.
+        this.pointerId = null;
+        this.startX = 0;
+        this.startY = 0;
+        this.delta = { dx: 0, dy: 0 };
+        this.handlePointerDown = (e) => {
+            // The main button only: a right click opens a menu, it does not resize.
+            if (e.button !== 0 || !this.element)
+                return;
+            // A press while a gesture is still open means its end never arrived
+            // (the handle was moved in the DOM mid-drag, say). Close it, so every
+            // start the owner hears is matched by exactly one end.
+            this.end();
+            /*
+              Capture sends every later move, and the release, to this element
+              even once the pointer has left it. A handle is a few pixels wide,
+              so without capture a quick drag outruns it and the resize stalls.
+        
+              In a try because it throws for a pointer the browser is not
+              tracking, which is exactly what a synthetic PointerEvent in a test
+              is. Nothing else depends on it, so the gesture still runs.
+            */
+            try {
+                this.element.setPointerCapture(e.pointerId);
+            }
+            catch {
+                // Not a live pointer. See above.
+            }
+            this.pointerId = e.pointerId;
+            this.startX = e.clientX;
+            this.startY = e.clientY;
+            this.delta = { dx: 0, dy: 0 };
+            this.element.setAttribute("resizing", "");
+            this.options.onResizeStart?.();
+        };
+        this.handlePointerMove = (e) => {
+            if (e.pointerId !== this.pointerId)
+                return;
+            // Cumulative from where the press started, never per event.
+            this.delta = this.measure(e.clientX - this.startX, e.clientY - this.startY);
+            this.options.onResize?.(this.delta);
+        };
+        // pointerup, pointercancel and lostpointercapture all end a drag, and a
+        // real release fires two of them. end() only acts on the first.
+        this.handlePointerEnd = (e) => {
+            if (e.pointerId === this.pointerId)
+                this.end();
+        };
+        /*
+          Each key press is a whole gesture: start, one move, end. An owner
+          then handles the keyboard and the pointer with the same three
+          callbacks and never needs to know which one it got.
+        */
+        this.handleKeyDown = (e) => {
+            // A key in the middle of a drag would open a second gesture inside
+            // the first, and reset the start size the owner is counting from.
+            if (this.pointerId !== null)
+                return;
+            // With Alt, Ctrl or Meta held, an arrow belongs to the browser or the
+            // system (Alt+Left is Back), not to this handle.
+            if (e.altKey || e.ctrlKey || e.metaKey)
+                return;
+            const delta = this.keyDelta(e.key);
+            if (!delta)
+                return;
+            // Only for keys this handles, or the page would scroll as well.
+            e.preventDefault();
+            const { onResizeStart, onResize, onResizeEnd } = this.options;
+            onResizeStart?.();
+            onResize?.(delta);
+            onResizeEnd?.(delta);
+        };
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error("The resizable directive can only be attached directly to an element (e.g. <div ${resizable()}>)");
+        }
+    }
+    render(_options) {
+        // Behavior-only directive
+    }
+    update(part, [options = {}]) {
+        this.element = part.element;
+        this.options = options;
+        if (options.disabled)
+            this.detach();
+        else
+            this.attach();
+    }
+    // The axis that is not asked for is always 0, so an owner can apply
+    // both numbers without checking which one it wanted.
+    measure(dx, dy) {
+        const axis = this.options.axis ?? "x";
+        return {
+            dx: axis === "y" ? 0 : dx,
+            dy: axis === "x" ? 0 : dy,
+        };
+    }
+    end() {
+        if (this.pointerId === null)
+            return;
+        this.pointerId = null;
+        this.element?.removeAttribute("resizing");
+        this.options.onResizeEnd?.(this.delta);
+    }
+    // A key for the axis that is not reported does nothing at all, so
+    // ArrowUp on a sideways handle still scrolls the page as it normally would.
+    keyDelta(key) {
+        const axis = this.options.axis ?? "x";
+        const step = this.options.step ?? 16;
+        const sideways = axis !== "y";
+        const upDown = axis !== "x";
+        switch (key) {
+            case "ArrowLeft":
+                return sideways ? { dx: -step, dy: 0 } : null;
+            case "ArrowRight":
+                return sideways ? { dx: step, dy: 0 } : null;
+            case "ArrowUp":
+                return upDown ? { dx: 0, dy: -step } : null;
+            case "ArrowDown":
+                return upDown ? { dx: 0, dy: step } : null;
+            default:
+                return null;
+        }
+    }
+    attach() {
+        if (this.attached || !this.element)
+            return;
+        this.attached = true;
+        /*
+          touch-action: none, or a touch drag scrolls the page instead of
+          resizing. The browser decides that a touch is a scroll before any
+          script runs, then cancels the pointer a few pixels in.
+    
+          Inline, because a directive has no stylesheet of its own. So do not
+          bind the handle's own style attribute in a template: that binding
+          rewrites the whole attribute and would drop this.
+        */
+        this.element.style.touchAction = "none";
+        this.element.addEventListener("pointerdown", this.handlePointerDown);
+        this.element.addEventListener("pointermove", this.handlePointerMove);
+        this.element.addEventListener("pointerup", this.handlePointerEnd);
+        this.element.addEventListener("pointercancel", this.handlePointerEnd);
+        this.element.addEventListener("lostpointercapture", this.handlePointerEnd);
+        this.element.addEventListener("keydown", this.handleKeyDown);
+    }
+    detach() {
+        if (!this.attached || !this.element)
+            return;
+        this.attached = false;
+        /*
+          Disabling mid-drag cancels the gesture WITHOUT calling onResizeEnd.
+          This runs inside the owner's render, and the owner is the one that
+          turned the handle off, so it already knows. A callback here would
+          be setting the owner's state in the middle of its own render.
+        */
+        if (this.pointerId !== null &&
+            this.element.hasPointerCapture(this.pointerId)) {
+            this.element.releasePointerCapture(this.pointerId);
+        }
+        this.pointerId = null;
+        this.element.removeAttribute("resizing");
+        this.element.style.removeProperty("touch-action");
+        this.element.removeEventListener("pointerdown", this.handlePointerDown);
+        this.element.removeEventListener("pointermove", this.handlePointerMove);
+        this.element.removeEventListener("pointerup", this.handlePointerEnd);
+        this.element.removeEventListener("pointercancel", this.handlePointerEnd);
+        this.element.removeEventListener("lostpointercapture", this.handlePointerEnd);
+        this.element.removeEventListener("keydown", this.handleKeyDown);
+    }
+}
+export const resizable = directive(ResizableDirective);
+//# sourceMappingURL=tt-resizable.js.map

package/dist/interaction/tt-resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-resizable.js","sourceRoot":"","sources":["../../src/interaction/tt-resizable.ts"],"names":[],"mappings":"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"}

package/dist/interaction/tt-reveal.d.ts

@@ -0,0 +1,54 @@
+import { AsyncDirective } from "lit/async-directive.js";
+import type { ElementPart, PartInfo, DirectiveParameters } from "lit/directive.js";
+/** The way an element travels as it arrives. "none" only fades. */
+export type RevealDirection = "up" | "down" | "left" | "right" | "none";
+export interface RevealOptions {
+    /** Default "up": starts a little below its place and rises into it. */
+    direction?: RevealDirection;
+    /** How far it travels. A CSS length, or a number of pixels. Default --tt-reveal-distance, else 1.5rem. */
+    distance?: string | number;
+    /** Milliseconds before it starts moving. Default 0. */
+    delay?: number;
+    /** Its place in a group that arrives together. Each step adds `stagger` ms of delay. Default 0. */
+    index?: number;
+    /** Milliseconds per index step. Default 60. */
+    stagger?: number;
+    /** Default true: arrive once, then stay. false hides it again whenever it leaves the viewport, so it replays. */
+    once?: boolean;
+    /** Grows or shrinks the viewport the observer checks against. Default "0px": any pixel in view counts. */
+    rootMargin?: string;
+    /** Shown as it is, with no observer. */
+    disabled?: boolean;
+    /** Called each time it comes into view (with or without motion). */
+    onReveal?: (element: Element) => void;
+}
+declare class RevealDirective extends AsyncDirective {
+    private element?;
+    private options;
+    private state;
+    private unwatch?;
+    private cancelFinish?;
+    private queued;
+    constructor(partInfo: PartInfo);
+    render(_options?: RevealOptions): void;
+    update(part: ElementPart, [options]: DirectiveParameters<this>): void;
+    private sync;
+    private start;
+    private writeOffsets;
+    private handleEntry;
+    private reveal;
+    private settle;
+    private handleFocusIn;
+    private stopWatching;
+    private stop;
+    protected disconnected(): void;
+}
+/**
+ * Fades and slides an element into place when it scrolls into view.
+ *
+ *   <section ${reveal()}>...</section>
+ *   ${items.map((item, i) => html`<li ${reveal({ index: i % 3 })}>...</li>`)}
+ */
+export declare const reveal: (_options?: RevealOptions | undefined) => import("lit-html/directive.js").DirectiveResult<typeof RevealDirective>;
+export {};
+//# sourceMappingURL=tt-reveal.d.ts.map

package/dist/interaction/tt-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-reveal.d.ts","sourceRoot":"","sources":["../../src/interaction/tt-reveal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EACR,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAI1B,mEAAmE;AACnE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,WAAW,aAAa;IAC5B,uEAAuE;IACvE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iHAAiH;IACjH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0GAA0G;IAC1G,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAoKD,cAAM,eAAgB,SAAQ,cAAc;IAC1C,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,YAAY,CAAC,CAAa;IAClC,OAAO,CAAC,MAAM,CAAS;gBAEX,QAAQ,EAAE,QAAQ;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI;IAI7B,MAAM,CACb,IAAI,EAAE,WAAW,EACjB,CAAC,OAAY,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC,GACxC,IAAI;IA2BP,OAAO,CAAC,IAAI;IAQZ,OAAO,CAAC,KAAK;IAyBb,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,MAAM;IAuBd,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;cAmBO,YAAY,IAAI,IAAI;CAIxC;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,mHAA6B,CAAC"}

package/dist/interaction/tt-reveal.js

@@ -0,0 +1,302 @@
+import { AsyncDirective } from "lit/async-directive.js";
+import { directive, PartType } from "lit/directive.js";
+import { afterTransitions } from "../motion.js";
+/*
+  Content that fades and rises into place as it scrolls into view.
+
+  THE STYLES ARE CSS, NOT SCRIPT. The directive only flips one attribute,
+  data-tt-reveal, from "hidden" to "in". What those two states look like
+  lives in one shared stylesheet, adopted into whichever document or
+  shadow root the element sits in, and every rule in it is inside
+
+    @media screen and (prefers-reduced-motion: no-preference)
+
+  That single query is the safety net. Reduced motion, a printout, and a
+  setting changed while the page is open all show the content at once,
+  decided by the browser, with no script to get wrong. Where the sheet
+  cannot be adopted, or IntersectionObserver is missing, nothing is ever
+  hidden at all: the failure mode is "no animation", never "no content".
+
+  Only opacity and translate, so the element keeps its box from the first
+  frame and nothing around it moves (no layout shift). translate, not
+  transform, so an element that already has a transform keeps it.
+
+  !important in the sheet, deliberately. The two states are short-lived
+  and owned by this directive, and without it any consumer rule more
+  specific than an attribute selector (".grid .card { opacity: 1 }")
+  silently cancels the hidden state, and with it the whole effect. Once
+  the element has arrived the attribute is removed, so its own styles,
+  transitions included, are back in charge.
+
+  Keyboard users never land on an invisible control: focus moving inside
+  a hidden element reveals it on the spot.
+*/
+const STYLES = `
+@media screen and (prefers-reduced-motion: no-preference) {
+  [data-tt-reveal="hidden"] {
+    opacity: 0 !important;
+    translate: var(--_tt-reveal-x, 0) var(--_tt-reveal-y, 0) !important;
+  }
+
+  [data-tt-reveal="in"] {
+    transition:
+      opacity var(--tt-reveal-duration, var(--tt-duration-slower))
+        var(--tt-ease-out) var(--_tt-reveal-delay, 0ms),
+      translate var(--tt-reveal-duration, var(--tt-duration-slower))
+        var(--tt-ease-out) var(--_tt-reveal-delay, 0ms) !important;
+  }
+}
+`;
+// Built once, on first use, and shared by every root. null once it is
+// known the browser cannot construct one.
+let sheet;
+function revealSheet() {
+    if (sheet === undefined) {
+        try {
+            sheet = new CSSStyleSheet();
+            sheet.replaceSync(STYLES);
+        }
+        catch {
+            sheet = null;
+        }
+    }
+    return sheet;
+}
+/*
+  Puts the shared sheet into the root the element lives in. A shadow root
+  sees none of the page's styles, so each root needs it once. False when
+  that is impossible: a detached element, a root in another document (an
+  iframe), or no constructable stylesheets.
+*/
+function adoptInto(root) {
+    if (!(root instanceof Document || root instanceof ShadowRoot))
+        return false;
+    const shared = revealSheet();
+    if (!shared)
+        return false;
+    try {
+        if (!root.adoptedStyleSheets.includes(shared)) {
+            root.adoptedStyleSheets = [...root.adoptedStyleSheets, shared];
+        }
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const pools = new Map();
+function watch(element, rootMargin, watcher) {
+    let pool = pools.get(rootMargin);
+    if (!pool) {
+        const watchers = new Map();
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries)
+                watchers.get(entry.target)?.(entry);
+        }, { rootMargin, threshold: 0 });
+        pool = { observer, watchers };
+        pools.set(rootMargin, pool);
+    }
+    const owner = pool;
+    owner.watchers.set(element, watcher);
+    owner.observer.observe(element);
+    return () => {
+        if (owner.watchers.get(element) !== watcher)
+            return;
+        owner.watchers.delete(element);
+        owner.observer.unobserve(element);
+        // The last one out disconnects it, so no observer outlives its use.
+        if (owner.watchers.size === 0) {
+            owner.observer.disconnect();
+            if (pools.get(rootMargin) === owner)
+                pools.delete(rootMargin);
+        }
+    };
+}
+function toLength(distance) {
+    if (distance === undefined)
+        return "var(--tt-reveal-distance, 1.5rem)";
+    return typeof distance === "number" ? `${distance}px` : distance;
+}
+// Where the element starts, as the x and y it travels FROM.
+function offsets(direction, length) {
+    switch (direction) {
+        case "down":
+            return ["0px", `calc(${length} * -1)`];
+        case "left":
+            return [length, "0px"];
+        case "right":
+            return [`calc(${length} * -1)`, "0px"];
+        case "none":
+            return ["0px", "0px"];
+        default:
+            return ["0px", length];
+    }
+}
+/*
+  An AsyncDirective rather than a plain one, for disconnected(): it is
+  told when its element leaves the page, which is where the observer is
+  given up. A plain Directive never hears about it, and the observer
+  would keep the element alive.
+*/
+class RevealDirective extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.options = {};
+        this.state = "idle";
+        this.queued = false;
+        this.handleEntry = (entry) => {
+            // Removed without a disconnect reaching this directive (a template
+            // rendered with render() and never cleared): stop holding on to it.
+            if (!this.element?.isConnected) {
+                this.stopWatching();
+                return;
+            }
+            if (entry.isIntersecting) {
+                if (this.state === "hidden")
+                    this.reveal();
+                return;
+            }
+            // Left the viewport. Only a replaying reveal goes back to hidden,
+            // and it does so instantly, out of sight.
+            if (this.options.once === false && this.state !== "hidden") {
+                this.cancelFinish?.();
+                this.element?.setAttribute("data-tt-reveal", "hidden");
+                this.state = "hidden";
+            }
+        };
+        // Tabbed into while still hidden: shown at once, not faded in under
+        // the focus ring.
+        this.handleFocusIn = () => {
+            if (this.state !== "hidden")
+                return;
+            if (this.options.once !== false)
+                this.stopWatching();
+            this.settle();
+            if (this.element)
+                this.options.onReveal?.(this.element);
+        };
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new Error("The reveal directive can only be attached directly to an element (e.g. <section ${reveal()}>)");
+        }
+    }
+    render(_options) {
+        // Behaviour-only directive
+    }
+    update(part, [options = {}]) {
+        this.element = part.element;
+        this.options = options;
+        if (options.disabled) {
+            this.stop();
+            // Re-enabling arms it again, unless it has already arrived.
+            if (this.state !== "done")
+                this.state = "idle";
+            return;
+        }
+        /*
+          In a microtask, never during the render itself. On a first render
+          this runs while the template is still a detached fragment, so there
+          is no root to adopt the sheet into yet, and a style binding later
+          on the same element would overwrite the custom properties written
+          now. A microtask still runs before the first paint.
+        */
+        if (!this.queued) {
+            this.queued = true;
+            queueMicrotask(() => {
+                this.queued = false;
+                this.sync();
+            });
+        }
+    }
+    sync() {
+        const element = this.element;
+        if (!element || !this.isConnected || this.options.disabled)
+            return;
+        if (this.state === "idle")
+            this.start(element);
+        else if (this.state === "hidden")
+            this.writeOffsets(element);
+    }
+    start(element) {
+        const supported = typeof IntersectionObserver === "function" &&
+            adoptInto(element.getRootNode());
+        // Nothing is hidden that cannot be shown again: without an observer
+        // or the stylesheet, the element simply stays as it is.
+        if (!supported) {
+            this.state = "done";
+            this.options.onReveal?.(element);
+            return;
+        }
+        this.writeOffsets(element);
+        element.setAttribute("data-tt-reveal", "hidden");
+        this.state = "hidden";
+        element.addEventListener("focusin", this.handleFocusIn);
+        this.unwatch = watch(element, this.options.rootMargin ?? "0px", this.handleEntry);
+    }
+    writeOffsets(element) {
+        const { direction = "up", distance, delay = 0, index = 0, stagger = 60 } = this.options;
+        const [x, y] = offsets(direction, toLength(distance));
+        element.style.setProperty("--_tt-reveal-x", x);
+        element.style.setProperty("--_tt-reveal-y", y);
+        element.style.setProperty("--_tt-reveal-delay", `${Math.max(0, delay + index * stagger)}ms`);
+    }
+    reveal() {
+        const element = this.element;
+        if (!element)
+            return;
+        element.setAttribute("data-tt-reveal", "in");
+        this.state = "in";
+        // Arriving once means there is nothing left to watch for.
+        if (this.options.once !== false)
+            this.stopWatching();
+        this.options.onReveal?.(element);
+        // Read after "in" is applied, so the durations are the reveal's own.
+        this.cancelFinish = afterTransitions([element], () => {
+            this.cancelFinish = undefined;
+            this.settle();
+        });
+    }
+    /*
+      Arrived: the attribute goes, so the element's own styles (its own
+      transitions especially) are back in charge.
+    */
+    settle() {
+        this.element?.removeAttribute("data-tt-reveal");
+        this.state = this.options.once === false ? "shown" : "done";
+    }
+    stopWatching() {
+        this.unwatch?.();
+        this.unwatch = undefined;
+        this.element?.removeEventListener("focusin", this.handleFocusIn);
+    }
+    // Back to the element exactly as it was written, fully visible.
+    stop() {
+        this.stopWatching();
+        this.cancelFinish?.();
+        this.cancelFinish = undefined;
+        const element = this.element;
+        if (!element)
+            return;
+        element.removeAttribute("data-tt-reveal");
+        element.style.removeProperty("--_tt-reveal-x");
+        element.style.removeProperty("--_tt-reveal-y");
+        element.style.removeProperty("--_tt-reveal-delay");
+    }
+    /*
+      Left the page (or the template stopped using this directive). The
+      observer is given up and the element is left VISIBLE: if it is ever
+      put back, it should be there, not waiting on a reveal that already
+      belonged to its last visit.
+    */
+    disconnected() {
+        this.stop();
+        this.state = "done";
+    }
+}
+/**
+ * Fades and slides an element into place when it scrolls into view.
+ *
+ *   <section ${reveal()}>...</section>
+ *   ${items.map((item, i) => html`<li ${reveal({ index: i % 3 })}>...</li>`)}
+ */
+export const reveal = directive(RevealDirective);
+//# sourceMappingURL=tt-reveal.js.map

package/dist/interaction/tt-reveal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-reveal.js","sourceRoot":"","sources":["../../src/interaction/tt-reveal.ts"],"names":[],"mappings":"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"}

package/dist/motion.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Calls `done` once the transitions on every element given have had time
+ * to finish. Call it AFTER the styles being waited on are applied (the
+ * closing ones, say), so the durations it reads are theirs. Returns a
+ * cancel function, for an overlay reopened before its exit finished.
+ */
+export declare function afterTransitions(elements: (Element | null | undefined)[], done: () => void): () => void;
+//# sourceMappingURL=motion.d.ts.map

package/dist/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AAuCA;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EACxC,IAAI,EAAE,MAAM,IAAI,GACf,MAAM,IAAI,CAUZ"}

package/dist/motion.js

@@ -0,0 +1,49 @@
+/*
+  Knowing when a transition is over, for motion that has to clean up
+  after itself.
+
+  Exit motion for things that are REMOVED when they close (tt-modal,
+  tt-drawer, a dismissed tt-toast) needs it most. Removing an element ends
+  its styles at once, so there is nothing left to animate. Those
+  components keep the closing copy on the page, `inert` and click-through,
+  and drop it once its transitions have run. The reveal() directive uses
+  it the same way, to hand an element back its own styles after it
+  arrives.
+
+  A timer read from the computed durations, not `transitionend`. A
+  transition that never starts never ends: a consumer who turns motion off
+  through ::part(), or a tab in the background that paints no frames,
+  would otherwise leave the closing copy on the page for good. Reading the
+  durations also follows the reduced-motion block in tokens.css for free,
+  since that makes every one of them 1ms.
+*/
+// "0.25s, 150ms" -> [250, 150]
+function toMs(list) {
+    return list.split(",").map((value) => {
+        const n = Number.parseFloat(value);
+        if (Number.isNaN(n))
+            return 0;
+        return value.trim().endsWith("ms") ? n : n * 1000;
+    });
+}
+// The longest duration plus the longest delay: a slight overestimate when
+// the two belong to different properties, which only costs a few ms.
+function longest(element) {
+    const style = getComputedStyle(element);
+    return (Math.max(0, ...toMs(style.transitionDuration)) +
+        Math.max(0, ...toMs(style.transitionDelay)));
+}
+/**
+ * Calls `done` once the transitions on every element given have had time
+ * to finish. Call it AFTER the styles being waited on are applied (the
+ * closing ones, say), so the durations it reads are theirs. Returns a
+ * cancel function, for an overlay reopened before its exit finished.
+ */
+export function afterTransitions(elements, done) {
+    const wait = Math.max(0, ...elements.filter((el) => !!el).map(longest));
+    // A little slack, so the last frame of the fade is painted before the
+    // element goes.
+    const timer = setTimeout(done, wait > 0 ? wait + 20 : 0);
+    return () => clearTimeout(timer);
+}
+//# sourceMappingURL=motion.js.map

package/dist/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;EAkBE;AAEF,+BAA+B;AAC/B,SAAS,IAAI,CAAC,IAAY;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACnC,MAAM,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC;QAC9B,OAAO,KAAK,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,0EAA0E;AAC1E,qEAAqE;AACrE,SAAS,OAAO,CAAC,OAAgB;IAC/B,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,OAAO,CACL,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;QAC9C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAC5C,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,QAAwC,EACxC,IAAgB;IAEhB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CACnB,CAAC,EACD,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAE,EAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAC7D,CAAC;IAEF,sEAAsE;IACtE,gBAAgB;IAChB,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC"}