drab 5.0.0 → 5.0.2

package/README.md

@@ -1,10 +1,5 @@
 # A Headless Custom Element Library
 
-- [Docs](https://drab.robino.dev)
-- [GitHub](https://github.com/rossrobino/drab)
-- [npm](https://www.npmjs.com/package/drab)
-- [MIT License](https://github.com/rossrobino/drab/blob/main/LICENSE.md)
-
 ## Features
 
 **drab** focuses on providing JavaScript functionality where it's most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.

package/animate/define.d.ts

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

package/animate/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(s){this.setAttribute("event",s)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(s=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof s)return n;throw new Error("Content not found")}swapContent(s=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),s&&setTimeout(()=>this.getContent().replaceChildren(...t),n)}}safeListener(s,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(s,n,t)}triggerListener(s,n=this.event){for(let e of this.getTrigger())e.addEventListener(n,s)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let s={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?s[t]=Number(e):t==="easing"&&(s[t]=e))}return s}async animateElement(s={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=s,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let r=t.at(0),i=t.at(-1);if(r&&i){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete i[l]}e.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(n.style,r),await n.animate(t,e).finished,Object.assign(n.style,i)}}get keyframes(){let s=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...r]=n.split("-");if(n.startsWith("animation-keyframe-")){let i=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(t&&i){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let o=Number(t),a=s.find(l=>l.offset===o);a?a[i]=e:s.push({[i]:e,offset:o})}}}return s.sort((n,e)=>Number(n.offset)-Number(e.offset)),s}};customElements.define("drab-animate",f);})();
+"use strict";(()=>{var l=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),i&&setTimeout(()=>this.getContent().replaceChildren(...t),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event){for(let e of this.getTrigger())e.addEventListener(n,i)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends l{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let o=t.at(0),s=t.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let m of a)delete o[m],delete s[m]}e.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(n.style,o),await n.animate(t,e).finished,Object.assign(n.style,s)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...o]=n.split("-");if(n.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&s){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(m=>m.offset===r);a?a[s]=e:i.push({[s]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};customElements.define("drab-animate",f);})();

package/animate/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-animate",e);
+import { Animate } from "./index.js";
+customElements.define("drab-animate", Animate);

package/animate/index.d.ts

@@ -1,5 +1,9 @@
-import { Base } from '../base/index.js';
-
+import { Base } from "../base/index.js";
+type AnimationKeyframe = `animation-keyframe-${"from" | "to" | number}-${string}`;
+type AnimationOption = `animation-option-${"easing" | "duration" | "delay"}`;
+export type AnimateAttributes = Partial<{
+    [K in AnimationKeyframe | AnimationOption]: string;
+}>;
 /**
  * The `Animate` base class provides a declarative way to use the
  * [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
@@ -26,7 +30,7 @@ import { Base } from '../base/index.js';
  *
  * `property` can be `duration`, `delay`, or `easing`.
  */
-declare class Animate extends Base {
+export declare class Animate extends Base {
     constructor();
     /**
      * @returns An object containing the values of each `animation-option` attribute
@@ -50,5 +54,4 @@ declare class Animate extends Base {
     }): Promise<void>;
     get keyframes(): Keyframe[];
 }
-
-export { Animate };
+export {};

package/animate/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var f=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(s){this.setAttribute("event",s)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(s=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof s)return n;throw new Error("Content not found")}swapContent(s=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),s&&setTimeout(()=>this.getContent().replaceChildren(...t),n)}}safeListener(s,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(s,n,t)}triggerListener(s,n=this.event){for(let e of this.getTrigger())e.addEventListener(n,s)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var m=class extends f{constructor(){super()}get animationOptions(){let s={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?s[t]=Number(e):t==="easing"&&(s[t]=e))}return s}async animateElement(s={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=s,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let r=t.at(0),i=t.at(-1);if(r&&i){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete i[l]}e.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(n.style,r),await n.animate(t,e).finished,Object.assign(n.style,i)}}get keyframes(){let s=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...r]=n.split("-");if(n.startsWith("animation-keyframe-")){let i=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(t&&i){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let o=Number(t),a=s.find(l=>l.offset===o);a?a[i]=e:s.push({[i]:e,offset:o})}}}return s.sort((n,e)=>Number(n.offset)-Number(e.offset)),s}};})();
+"use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes);e instanceof HTMLTemplateElement?this.getContent().replaceChildren(e.content.cloneNode(!0)):this.getContent().replaceChildren(...e.childNodes),i&&setTimeout(()=>this.getContent().replaceChildren(...t),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event){for(let e of this.getTrigger())e.addEventListener(n,i)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let o=t.at(0),s=t.at(-1);if(o&&s){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete s[l]}e.direction?.includes("reverse")&&([o,s]=[s,o]),Object.assign(n.style,o),await n.animate(t,e).finished,Object.assign(n.style,s)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...o]=n.split("-");if(n.startsWith("animation-keyframe-")){let s=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&s){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(l=>l.offset===r);a?a[s]=e:i.push({[s]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};})();

package/animate/index.js

@@ -1 +1,138 @@
-import{a}from"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";export{a as Animate};
+import { Base } from "../base/index.js";
+/**
+ * The `Animate` base class provides a declarative way to use the
+ * [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
+ * through HTML attributes. The `animateElement` method uses these attributes and
+ * persists the final animation state. Other elements in **drab** extend this class
+ * to provide animations. You can also extend this class to create your own custom
+ * animated element.
+ *
+ * Keyframes can be set via HTML attributes on the element in the form of:
+ *
+ * ```html
+ * <drab-animate animation-keyframe-offset-property="value">
+ * ```
+ *
+ * `offset` can be `to`, `from`, or a `number`.
+ *
+ * `property` can be any animatable CSS property separated by dashes.
+ *
+ * Animations `options` can be set:
+ *
+ * ```html
+ * <drab-animate animation-option-property="value">
+ * ```
+ *
+ * `property` can be `duration`, `delay`, or `easing`.
+ */
+export class Animate extends Base {
+    constructor() {
+        super();
+    }
+    /**
+     * @returns An object containing the values of each `animation-option` attribute
+     */
+    get animationOptions() {
+        const options = {};
+        for (const attributeName of this.getAttributeNames()) {
+            if (attributeName.startsWith("animation-option-")) {
+                const value = this.getAttribute(attributeName);
+                let [, , option] = attributeName.split("-");
+                if (value) {
+                    if (option === "duration" || option === "delay") {
+                        options[option] = Number(value);
+                    }
+                    else if (option === "easing") {
+                        options[option] = value;
+                    }
+                }
+            }
+        }
+        return options;
+    }
+    /**
+     * @description
+     * Animates a particular element using the web animations API.
+     *
+     * - Disables animation if the user prefers reduced motion.
+     * - Sets default options
+     * - Uses the keyframes provided from `this.keyframes`
+     * - Waits for the animation to complete
+     * - Sets the start and end styles based on the first and last keyframe
+     *
+     * @param animateOptions - animates `this.content()` by default
+     */
+    async animateElement(animateOptions = { element: this.getContent(), options: {} }) {
+        let { element = this.getContent(), options = {} } = animateOptions;
+        const keyframes = this.keyframes;
+        if (keyframes.length &&
+            !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            // options passed in via JS override the html attributes
+            options = Object.assign(this.animationOptions, options);
+            // defaults
+            if (!options.duration)
+                options.duration = 200;
+            if (!options.easing)
+                options.easing = "ease-in-out";
+            let startStyles = keyframes.at(0);
+            let endStyles = keyframes.at(-1);
+            if (startStyles && endStyles) {
+                // Don't modify the start/end style based on these,
+                // everything else is a CSS property.
+                // This is instead of doing `fill` since it is discouraged:
+                // https://www.w3.org/TR/web-animations-1/#fill-behavior
+                const notStyles = ["composite", "easing", "offset"];
+                for (const key of notStyles) {
+                    delete startStyles[key];
+                    delete endStyles[key];
+                }
+            }
+            if (options.direction?.includes("reverse")) {
+                // swap the start and ending values
+                [startStyles, endStyles] = [endStyles, startStyles];
+            }
+            Object.assign(element.style, startStyles);
+            const animation = element.animate(keyframes, options);
+            await animation.finished;
+            Object.assign(element.style, endStyles);
+        }
+    }
+    get keyframes() {
+        const keyframes = [];
+        for (const attributeName of this.getAttributeNames()) {
+            /** the css property value, ex: "translate(100%,0)" */
+            const value = this.getAttribute(attributeName);
+            let [, , offset, ...propertyArray] = attributeName.split("-");
+            if (attributeName.startsWith("animation-keyframe-")) {
+                const property = propertyArray
+                    .map((v, i) => {
+                    if (i < 1)
+                        return v;
+                    return v.at(0)?.toUpperCase() + v.slice(1);
+                })
+                    .join("");
+                if (offset && property) {
+                    if (offset === "from")
+                        offset = "0";
+                    else if (offset === "to")
+                        offset = "1";
+                    else
+                        offset = String(parseInt(offset) * 0.01);
+                    const numberOffset = Number(offset);
+                    const sameOffsetKeyframe = keyframes.find((v) => v.offset === numberOffset);
+                    if (sameOffsetKeyframe) {
+                        sameOffsetKeyframe[property] = value;
+                    }
+                    else {
+                        keyframes.push({
+                            [property]: value,
+                            offset: numberOffset,
+                        });
+                    }
+                }
+            }
+        }
+        keyframes.sort((a, b) => Number(a.offset) - Number(b.offset));
+        return keyframes;
+    }
+}

package/{index-SyRipepB.d.ts → base/copy/index.d.ts}

@@ -1,8 +1,9 @@
-import { Base } from './base/index.js';
-
-declare class BaseCopy extends Base {
+import { Base } from "../index.js";
+export declare class BaseCopy extends Base {
     constructor();
     /**
+     * The value to copy or share.
+     *
      * @default "" the empty string
      */
     get value(): string;
@@ -13,5 +14,3 @@ declare class BaseCopy extends Base {
      */
     copy(text?: string): Promise<void>;
 }
-
-export { BaseCopy as B };

package/base/copy/index.js

@@ -0,0 +1,25 @@
+import { Base } from "../index.js";
+export class BaseCopy extends Base {
+    constructor() {
+        super();
+    }
+    /**
+     * The value to copy or share.
+     *
+     * @default "" the empty string
+     */
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    /**
+     * Copies the `text`.
+     * @param text The `text` to share
+     */
+    async copy(text = this.value) {
+        await navigator.clipboard.writeText(text);
+        this.swapContent();
+    }
+}

package/base/define.d.ts

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

package/base/define.js

@@ -1 +1,2 @@
-import{b as e}from"../chunk-MXKU7AKV.js";customElements.define("drab-base",e);
+import { Base } from "./index.js";
+customElements.define("drab-base", Base);

package/base/index.d.ts

@@ -10,7 +10,7 @@
  *
  * Each element can have multiple `trigger`s, but will only have one `content`.
  */
-declare class Base extends HTMLElement {
+export declare class Base extends HTMLElement {
     #private;
     constructor();
     /**
@@ -65,5 +65,3 @@ declare class Base extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
-
-export { Base };

package/base/index.js

@@ -1 +1,108 @@
-import{b as a}from"../chunk-MXKU7AKV.js";export{a as Base};
+/**
+ * Each element in the library extends the `Base` class. It provides methods
+ * for selecting elements via HTML attributes along with other helpers.
+ *
+ * By default, `trigger`s and `content` will be selected via the `data-trigger` and
+ * `data-content` attributes. Alternatively, you can set the `trigger` or
+ * `content` attribute to a CSS selector to change the default selector from
+ * `[data-trigger]` or `[data-content]` to a selector of your choosing.
+ * This can be useful if you have multiple elements within one another.
+ *
+ * Each element can have multiple `trigger`s, but will only have one `content`.
+ */
+export class Base extends HTMLElement {
+    /**
+     * To clean up event listeners added to `document` when the element is removed.
+     */
+    #listenerController = new AbortController();
+    constructor() {
+        super();
+    }
+    /**
+     * Event for the `trigger` to execute.
+     *
+     * For example, set to `"mouseover"` to execute the event when the user hovers the mouse over the `trigger`, instead of when they click it.
+     *
+     * @default "click"
+     */
+    get event() {
+        return (this.getAttribute("event") ?? "click");
+    }
+    set event(value) {
+        this.setAttribute("event", value);
+    }
+    /**
+     * @returns All of the elements that match the `trigger` selector.
+     * @default this.querySelectorAll("[data-trigger]")
+     */
+    getTrigger() {
+        const triggers = this.querySelectorAll(this.getAttribute("trigger") ?? "[data-trigger]");
+        return triggers;
+    }
+    /**
+     * @param instance The instance of the desired element, ex: `HTMLDialogElement`.
+     * Defaults to `HTMLElement`.
+     * @returns The element that matches the `content` selector.
+     * @default this.querySelector("[data-content]")
+     */
+    getContent(instance = HTMLElement) {
+        const content = this.querySelector(this.getAttribute("content") ?? "[data-content]");
+        if (content instanceof instance)
+            return content;
+        throw new Error("Content not found");
+    }
+    /**
+     * Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and
+     * swaps `this.content()` with the content of the element found.
+     *
+     * @param revert Swap back to old content
+     * @param delay Wait time before swapping back
+     */
+    swapContent(revert = true, delay = 800) {
+        const swap = this.querySelector(this.getAttribute("swap") ?? "[data-swap]");
+        if (swap) {
+            const original = Array.from(this.getContent().childNodes);
+            if (swap instanceof HTMLTemplateElement) {
+                this.getContent().replaceChildren(swap.content.cloneNode(true));
+            }
+            else {
+                this.getContent().replaceChildren(...swap.childNodes);
+            }
+            if (revert) {
+                setTimeout(() => this.getContent().replaceChildren(...original), delay);
+            }
+        }
+    }
+    /**
+     * Wrapper around `document.body.addEventListener` that ensures when the
+     * element is removed from the DOM, these event listeners are cleaned up.
+     * @param type
+     * @param listener
+     * @param options
+     */
+    safeListener(type, listener, element = document.body, options = {}) {
+        options.signal = this.#listenerController.signal;
+        //@ts-ignore - inferred listener type not working...?
+        element.addEventListener(type, listener, options);
+    }
+    /**
+     * @param listener Listener to attach to all of the `trigger` elements.
+     */
+    triggerListener(listener, type = this.event) {
+        for (const trigger of this.getTrigger()) {
+            trigger.addEventListener(type, listener);
+        }
+    }
+    /**
+     * Placeholder function is passed into `queueMicrotask` in `connectedCallback`. It is overridden in each component that needs to run `connectedCallback`.
+     *
+     * The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn't necessary, but when client side rendering, the HTML within the custom element isn't available before `connectedCallback` is called. By waiting until the next microtask, the HTML content is available---then for example, listeners can be attached to elements inside.
+     */
+    mount() { }
+    connectedCallback() {
+        queueMicrotask(() => this.mount());
+    }
+    disconnectedCallback() {
+        this.#listenerController.abort();
+    }
+}

package/breakpoint/define.d.ts

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

package/breakpoint/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-6HYPZWQ4.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-breakpoint",e);
+import { Breakpoint } from "./index.js";
+customElements.define("drab-breakpoint", Breakpoint);

package/breakpoint/index.d.ts

@@ -1,5 +1,8 @@
-import { Base } from '../base/index.js';
-
+import { Base } from "../base/index.js";
+import type { Attributes } from "../types/index.js";
+export type BreakpointAttributes = Attributes<Breakpoint> & Partial<{
+    [attr: `breakpoint-${string}`]: string;
+}>;
 type Breakpoints = {
     name: string;
     width: number;
@@ -13,12 +16,11 @@ type Breakpoints = {
  * <drab-breakpoint breakpoint-name="400">
  * ```
  */
-declare class Breakpoint extends Base {
+export declare class Breakpoint extends Base {
     breakpoints: Breakpoints;
     constructor();
     /** finds the current breakpoint */
     get breakpoint(): string;
     mount(): void;
 }
-
-export { Breakpoint, type Breakpoints };
+export {};

package/breakpoint/index.js

@@ -1 +1,55 @@
-import{a}from"../chunk-6HYPZWQ4.js";import"../chunk-MXKU7AKV.js";export{a as Breakpoint};
+import { Base } from "../base/index.js";
+/**
+ * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
+ *
+ * Provide alternate breakpoints by specifying `breakpoint` attributes:
+ *
+ * ```html
+ * <drab-breakpoint breakpoint-name="400">
+ * ```
+ */
+export class Breakpoint extends Base {
+    breakpoints = [
+        { name: "sm", width: 640 },
+        { name: "md", width: 768 },
+        { name: "lg", width: 1024 },
+        { name: "xl", width: 1280 },
+        { name: "2xl", width: 1536 },
+    ];
+    constructor() {
+        super();
+        const custom = [];
+        for (const attributeName of this.getAttributeNames()) {
+            if (attributeName.startsWith("breakpoint-")) {
+                const [, ...name] = attributeName.split("-");
+                if (name) {
+                    custom.push({
+                        name: name.join("-"),
+                        width: Number(this.getAttribute(attributeName)),
+                    });
+                }
+            }
+        }
+        if (custom.length)
+            this.breakpoints = custom;
+        // highest to lowest
+        this.breakpoints.sort((a, b) => b.width - a.width);
+    }
+    /** finds the current breakpoint */
+    get breakpoint() {
+        for (let i = 0; i < this.breakpoints.length; i++) {
+            const breakpoint = this.breakpoints[i];
+            if (breakpoint) {
+                if (window.innerWidth > breakpoint.width) {
+                    return breakpoint.name;
+                }
+            }
+        }
+        return "none";
+    }
+    mount() {
+        const render = () => (this.getContent().innerHTML = `${this.breakpoint}:${window.innerWidth}`);
+        render();
+        this.safeListener("resize", render, window);
+    }
+}

package/contextmenu/define.d.ts

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

package/contextmenu/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let s=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...s),e)}}safeListener(t,e,n=document.body,s={}){s.signal=this.#t.signal,n.addEventListener(t,e,s)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var f=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let n=this.getAttribute(e),[,,s]=e.split("-");n&&(s==="duration"||s==="delay"?t[s]=Number(n):s==="easing"&&(t[s]=n))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:n={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){n=Object.assign(this.animationOptions,n),n.duration||(n.duration=200),n.easing||(n.easing="ease-in-out");let r=s.at(0),i=s.at(-1);if(r&&i){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete i[l]}n.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(e.style,r),await e.animate(s,n).finished,Object.assign(e.style,i)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let n=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let i=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(s&&i){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let o=Number(s),a=t.find(l=>l.offset===o);a?a[i]=n:t.push({[i]:n,offset:o})}}}return t.sort((e,n)=>Number(e.offset)-Number(n.offset)),t}};var m=class extends f{#t;constructor(){super()}set#e(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,n=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,i=s+n,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let a=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,u=window.innerWidth,d=window.innerHeight;i+a>n+u&&(i=n+u-a),o+l>e+d&&(o=e+d-l),this.#e={x:i,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};customElements.define("drab-contextmenu",m);})();
+"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let i=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...i),e)}}safeListener(t,e,n=document.body,i={}){i.signal=this.#t.signal,n.addEventListener(t,e,i)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let n=this.getAttribute(e),[,,i]=e.split("-");n&&(i==="duration"||i==="delay"?t[i]=Number(n):i==="easing"&&(t[i]=n))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:n={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){n=Object.assign(this.animationOptions,n),n.duration||(n.duration=200),n.easing||(n.easing="ease-in-out");let r=i.at(0),s=i.at(-1);if(r&&s){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete s[l]}n.direction?.includes("reverse")&&([r,s]=[s,r]),Object.assign(e.style,r),await e.animate(i,n).finished,Object.assign(e.style,s)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let n=this.getAttribute(e),[,,i,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let s=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(i&&s){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let o=Number(i),a=t.find(l=>l.offset===o);a?a[s]=n:t.push({[s]:n,offset:o})}}}return t.sort((e,n)=>Number(e.offset)-Number(n.offset)),t}};var f=class extends m{#t;constructor(){super()}set#e(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,n=window.scrollX,i=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,s=i+n,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let a=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,u=window.innerWidth,d=window.innerHeight;s+a>n+u&&(s=n+u-a),o+l>e+d&&(o=e+d-l),this.#e={x:s,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};customElements.define("drab-contextmenu",f);})();

package/contextmenu/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-57VEEUFG.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-contextmenu",e);
+import { ContextMenu } from "./index.js";
+customElements.define("drab-contextmenu", ContextMenu);

package/contextmenu/index.d.ts

@@ -1,15 +1,13 @@
-import { Animate } from '../animate/index.js';
-import '../base/index.js';
-
+import { Animate, type AnimateAttributes } from "../animate/index.js";
+import type { Attributes } from "../types/index.js";
+export type ContextMenuAttributes = Attributes<ContextMenu> & AnimateAttributes;
 /**
  * Displays content when the `trigger` element is right clicked, or long pressed on mobile.
  */
-declare class ContextMenu extends Animate {
+export declare class ContextMenu extends Animate {
     #private;
     constructor();
     show(e: MouseEvent | TouchEvent): Promise<void>;
     hide(): Promise<void>;
     mount(): void;
 }
-
-export { ContextMenu };

package/contextmenu/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let s=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...s),e)}}safeListener(t,e,n=document.body,s={}){s.signal=this.#t.signal,n.addEventListener(t,e,s)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var f=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let n=this.getAttribute(e),[,,s]=e.split("-");n&&(s==="duration"||s==="delay"?t[s]=Number(n):s==="easing"&&(t[s]=n))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:n={}}=t,s=this.keyframes;if(s.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){n=Object.assign(this.animationOptions,n),n.duration||(n.duration=200),n.easing||(n.easing="ease-in-out");let r=s.at(0),i=s.at(-1);if(r&&i){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete i[l]}n.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(e.style,r),await e.animate(s,n).finished,Object.assign(e.style,i)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let n=this.getAttribute(e),[,,s,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let i=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(s&&i){s==="from"?s="0":s==="to"?s="1":s=String(parseInt(s)*.01);let o=Number(s),a=t.find(l=>l.offset===o);a?a[i]=n:t.push({[i]:n,offset:o})}}}return t.sort((e,n)=>Number(e.offset)-Number(n.offset)),t}};var d=class extends f{#t;constructor(){super()}set#e(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,n=window.scrollX,s=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,i=s+n,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let a=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,m=window.innerWidth,u=window.innerHeight;i+a>n+m&&(i=n+m-a),o+l>e+u&&(o=e+u-l),this.#e={x:i,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};})();
+"use strict";(()=>{var c=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let i=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...i),e)}}safeListener(t,e,n=document.body,i={}){i.signal=this.#t.signal,n.addEventListener(t,e,i)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let n=this.getAttribute(e),[,,i]=e.split("-");n&&(i==="duration"||i==="delay"?t[i]=Number(n):i==="easing"&&(t[i]=n))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:n={}}=t,i=this.keyframes;if(i.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){n=Object.assign(this.animationOptions,n),n.duration||(n.duration=200),n.easing||(n.easing="ease-in-out");let r=i.at(0),s=i.at(-1);if(r&&s){let a=["composite","easing","offset"];for(let l of a)delete r[l],delete s[l]}n.direction?.includes("reverse")&&([r,s]=[s,r]),Object.assign(e.style,r),await e.animate(i,n).finished,Object.assign(e.style,s)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let n=this.getAttribute(e),[,,i,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let s=r.map((o,a)=>a<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(i&&s){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let o=Number(i),a=t.find(l=>l.offset===o);a?a[s]=n:t.push({[s]:n,offset:o})}}}return t.sort((e,n)=>Number(e.offset)-Number(n.offset)),t}};var d=class extends m{#t;constructor(){super()}set#e(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,n=window.scrollX,i=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,s=i+n,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let a=this.getContent().offsetWidth+24,l=this.getContent().offsetHeight+6,h=window.innerWidth,u=window.innerHeight;s+a>n+h&&(s=n+h-a),o+l>e+u&&(o=e+u-l),this.#e={x:s,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#t=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#t);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};})();

package/contextmenu/index.js

@@ -1 +1,71 @@
-import{a}from"../chunk-57VEEUFG.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";export{a as ContextMenu};
+import { Animate } from "../animate/index.js";
+/**
+ * Displays content when the `trigger` element is right clicked, or long pressed on mobile.
+ */
+export class ContextMenu extends Animate {
+    /** Tracks the long press duration on mobile. */
+    #touchTimer;
+    constructor() {
+        super();
+    }
+    /** Sets the context menu's `style.left` and `style.top` position. */
+    set #coordinates(value) {
+        this.getContent().style.left = `${value.x}px`;
+        this.getContent().style.top = `${value.y}px`;
+    }
+    async show(e) {
+        // find coordinates of the click
+        const scrollY = window.scrollY;
+        const scrollX = window.scrollX;
+        const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0]?.clientX ?? 0;
+        const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0]?.clientY ?? 0;
+        let x = clientX + scrollX;
+        let y = clientY + scrollY;
+        this.getContent().style.position = "absolute";
+        this.getContent().style.display = "block";
+        const offsetWidth = this.getContent().offsetWidth + 24;
+        const offsetHeight = this.getContent().offsetHeight + 6;
+        const innerWidth = window.innerWidth;
+        const innerHeight = window.innerHeight;
+        // ensure menu is within view
+        if (x + offsetWidth > scrollX + innerWidth) {
+            x = scrollX + innerWidth - offsetWidth;
+        }
+        if (y + offsetHeight > scrollY + innerHeight) {
+            y = scrollY + innerHeight - offsetHeight;
+        }
+        this.#coordinates = { x, y };
+        await this.animateElement();
+    }
+    async hide() {
+        if (this.getContent().style.display !== "none") {
+            await this.animateElement({
+                options: { direction: "reverse" },
+            });
+            this.getContent().style.display = "none";
+        }
+    }
+    mount() {
+        // mouse
+        this.triggerListener((e) => {
+            e.preventDefault();
+            this.show(e);
+        }, "contextmenu");
+        this.safeListener("click", () => this.hide());
+        // touch
+        this.triggerListener((e) => {
+            this.#touchTimer = setTimeout(() => {
+                this.show(e);
+            }, 800);
+        }, "touchstart");
+        const resetTimer = () => clearTimeout(this.#touchTimer);
+        this.triggerListener(resetTimer, "touchend");
+        this.triggerListener(resetTimer, "touchcancel");
+        // keyboard
+        this.safeListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                this.hide();
+            }
+        });
+    }
+}

package/copy/define.d.ts

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