drab 5.0.1 → 5.1.0

package/animate/define.d.ts

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

package/animate/define.iife.js

@@ -1 +1 @@
-"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);})();
+"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),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),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())}destroy(){}disconnectedCallback(){this.destroy(),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 s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let m of a)delete s[m],delete o[m]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){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[o]=e:i.push({[o]: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-F5BEEHGA.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,8 +1,7 @@
-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"}`;
-type AnimateAttributes = Partial<{
+export type AnimateAttributes = Partial<{
     [K in AnimationKeyframe | AnimationOption]: string;
 }>;
 /**
@@ -31,7 +30,7 @@ type AnimateAttributes = Partial<{
  *
  * `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
@@ -55,5 +54,4 @@ declare class Animate extends Base {
     }): Promise<void>;
     get keyframes(): Keyframe[];
 }
-
-export { Animate, type AnimateAttributes };
+export {};

package/animate/index.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(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}};})();
+"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),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),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())}destroy(){}disconnectedCallback(){this.destroy(),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 s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){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[o]=e:i.push({[o]: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-F5BEEHGA.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-0rvQCq2U.d.ts → base/copy/index.d.ts}

@@ -1,6 +1,5 @@
-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.
@@ -15,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.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};customElements.define("drab-base",s);})();
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let r=Array.from(this.getContent().childNodes),o=[];t instanceof HTMLTemplateElement?(o.push(t.content.cloneNode(!0)),t.content.replaceChildren(...r)):(o.push(...t.childNodes),t.replaceChildren(...r)),this.getContent().replaceChildren(...o),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,r={}){r.signal=this.#e.signal,t.addEventListener(e,n,r)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};customElements.define("drab-base",s);})();

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();
     /**
@@ -51,19 +51,21 @@ declare class Base extends HTMLElement {
      * @param listener
      * @param options
      */
-    safeListener<K extends keyof HTMLElementEventMap, T extends HTMLElement | Window | Document = HTMLElement>(type: K, listener: (this: T, ev: HTMLElementEventMap[K]) => any, element?: T, options?: AddEventListenerOptions): void;
+    safeListener<K extends keyof DocumentEventMap, T extends HTMLElement | Window | Document = HTMLElement>(type: K, listener: (this: T, ev: DocumentEventMap[K]) => any, element?: T, options?: AddEventListenerOptions): void;
     /**
      * @param listener Listener to attach to all of the `trigger` elements.
      */
-    triggerListener<T extends HTMLElement, K extends keyof HTMLElementEventMap>(listener: (this: T, ev: HTMLElementEventMap[K]) => any, type?: K): void;
+    triggerListener<T extends HTMLElement, K extends keyof HTMLElementEventMap>(listener: (this: T, e: HTMLElementEventMap[K]) => any, type?: K): void;
     /**
-     * Placeholder function is passed into `queueMicrotask` in `connectedCallback`. It is overridden in each component that needs to run `connectedCallback`.
+     * 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(): void;
     connectedCallback(): void;
+    /**
+     * Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`.
+     */
+    destroy(): void;
     disconnectedCallback(): void;
 }
-
-export { Base };

package/base/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};})();
+"use strict";(()=>{var o=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let r=Array.from(this.getContent().childNodes),s=[];t instanceof HTMLTemplateElement?(s.push(t.content.cloneNode(!0)),t.content.replaceChildren(...r)):(s.push(...t.childNodes),t.replaceChildren(...r)),this.getContent().replaceChildren(...s),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,r={}){r.signal=this.#e.signal,t.addEventListener(e,n,r)}triggerListener(e,n=this.event){for(let t of this.getTrigger())t.addEventListener(n,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};})();

package/base/index.js

@@ -1 +1,131 @@
-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) {
+        // BREAKING TODO: `revert` and `delay` -- these could be one parameter
+        // revert: number = 800
+        /** The swap element, used to hold the replacement contents. */
+        const swap = this.querySelector(this.getAttribute("swap") ?? "[data-swap]");
+        if (swap) {
+            /** A copy of the content currently in `this.getContent()`. */
+            const currentContent = Array.from(this.getContent().childNodes);
+            /**
+             * The contents of the swap element, set based on whether the
+             * swap is a `template` or not.
+             */
+            const placeholder = [];
+            // Set the placeholder with the `swap` content, then replace the
+            // swap content with the `currentContent`
+            if (swap instanceof HTMLTemplateElement) {
+                // use `content` since it's a `template` element
+                placeholder.push(swap.content.cloneNode(true));
+                swap.content.replaceChildren(...currentContent);
+            }
+            else {
+                // not a `template`, replace children directly
+                placeholder.push(...swap.childNodes);
+                swap.replaceChildren(...currentContent);
+            }
+            // finally, set the content to the contents of the placeholder
+            this.getContent().replaceChildren(...placeholder);
+            if (revert) {
+                // wait and then run again to swap back
+                setTimeout(() => this.swapContent(false), 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);
+        }
+    }
+    /**
+     * 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());
+    }
+    /**
+     * Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`.
+     */
+    destroy() { }
+    disconnectedCallback() {
+        this.destroy();
+        this.#listenerController.abort();
+    }
+}

package/breakpoint/define.d.ts

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

package/breakpoint/define.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var r=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 s=class extends r{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};customElements.define("drab-breakpoint",s);})();
+"use strict";(()=>{var i=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 r=Array.from(this.getContent().childNodes),o=[];n instanceof HTMLTemplateElement?(o.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(o.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...o),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,n=document.body,r={}){r.signal=this.#t.signal,n.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var s=class extends i{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};customElements.define("drab-breakpoint",s);})();

package/breakpoint/define.js

@@ -1 +1,2 @@
-import{a as e}from"../chunk-BCS5E3IH.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,7 +1,6 @@
-import { Base } from '../base/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-
-type BreakpointAttributes = Attributes<Breakpoint> & Partial<{
+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 = {
@@ -17,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 BreakpointAttributes };
+export {};

package/breakpoint/index.iife.js

@@ -1 +1 @@
-"use strict";(()=>{var r=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 s=class extends r{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};})();
+"use strict";(()=>{var i=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 r=Array.from(this.getContent().childNodes),s=[];n instanceof HTMLTemplateElement?(s.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(s.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,n=document.body,r={}){r.signal=this.#t.signal,n.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let n of this.getTrigger())n.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var o=class extends i{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};})();

package/breakpoint/index.js

@@ -1 +1,55 @@
-import{a}from"../chunk-BCS5E3IH.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 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);})();
+"use strict";(()=>{var l=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),s=[];n instanceof HTMLTemplateElement?(s.push(n.content.cloneNode(!0)),n.content.replaceChildren(...i)):(s.push(...n.childNodes),n.replaceChildren(...i)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),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())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var m=class extends l{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 s=i.at(0),o=i.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let c of a)delete s[c],delete o[c]}n.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(e.style,s),await e.animate(i,n).finished,Object.assign(e.style,o)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let n=this.getAttribute(e),[,,i,...s]=e.split("-");if(e.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(i&&o){i==="from"?i="0":i==="to"?i="1":i=String(parseInt(i)*.01);let r=Number(i),a=t.find(c=>c.offset===r);a?a[o]=n:t.push({[o]:n,offset:r})}}}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,s=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,o=i+n,r=s+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let a=this.getContent().offsetWidth+24,c=this.getContent().offsetHeight+6,h=window.innerWidth,d=window.innerHeight;o+a>n+h&&(o=n+h-a),r+c>e+d&&(r=e+d-c),this.#e={x:o,y:r},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-AWUCZCAJ.js";import"../chunk-F5BEEHGA.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,17 +1,13 @@
-import { AnimateAttributes, Animate } from '../animate/index.js';
-import { A as Attributes } from '../index-J5TqSvEl.js';
-import '../base/index.js';
-
-type ContextMenuAttributes = Attributes<ContextMenu> & AnimateAttributes;
+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, type ContextMenuAttributes };