drab 5.4.2 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "drab",
-	"description": "A headless custom element library",
-	"version": "5.4.2",
+	"description": "Interactivity for You",
+	"version": "6.0.0",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {
@@ -11,192 +11,148 @@
 	"keywords": [
 		"web components",
 		"custom elements",
-		"animate",
-		"wakelock",
-		"intersect",
 		"contextmenu",
-		"details",
-		"youtube",
-		"breakpoint",
-		"dialog",
-		"popover",
-		"tablesort",
-		"prefetch",
 		"copy",
-		"fullscreen",
-		"base",
+		"dialog",
 		"editor",
-		"share"
+		"fullscreen",
+		"intersect",
+		"prefetch",
+		"share",
+		"tablesort",
+		"wakelock",
+		"youtube"
 	],
-	"repository": "github:rossrobino/drab",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/rossrobino/drab.git"
+	},
 	"type": "module",
-	"types": "./index.d.ts",
-	"main": "./index.js",
+	"types": "./dist/index.d.ts",
+	"main": "./dist/index.js",
 	"exports": {
+		"./package.json": {
+			"default": "./package.json"
+		},
 		".": {
-			"types": "./index.d.ts",
-			"default": "./index.js"
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
 		},
 		"./define": {
-			"types": "./define.d.ts",
-			"default": "./define.js"
-		},
-		"./animate": {
-			"types": "./animate/index.d.ts",
-			"default": "./animate/index.js"
+			"types": "./dist/define.d.ts",
+			"default": "./dist/define.js"
 		},
-		"./animate/define": {
-			"types": "./animate/define.d.ts",
-			"default": "./animate/define.js"
-		},
-		"./wakelock": {
-			"types": "./wakelock/index.d.ts",
-			"default": "./wakelock/index.js"
+		"./base": {
+			"types": "./dist/base/index.d.ts",
+			"default": "./dist/base/index.js"
 		},
-		"./wakelock/define": {
-			"types": "./wakelock/define.d.ts",
-			"default": "./wakelock/define.js"
+		"./base/define": {
+			"types": "./dist/base/define.d.ts",
+			"default": "./dist/base/define.js"
 		},
-		"./intersect": {
-			"types": "./intersect/index.d.ts",
-			"default": "./intersect/index.js"
+		"./breakpoint": {
+			"types": "./dist/breakpoint/index.d.ts",
+			"default": "./dist/breakpoint/index.js"
 		},
-		"./intersect/define": {
-			"types": "./intersect/define.d.ts",
-			"default": "./intersect/define.js"
+		"./breakpoint/define": {
+			"types": "./dist/breakpoint/define.d.ts",
+			"default": "./dist/breakpoint/define.js"
 		},
 		"./contextmenu": {
-			"types": "./contextmenu/index.d.ts",
-			"default": "./contextmenu/index.js"
+			"types": "./dist/contextmenu/index.d.ts",
+			"default": "./dist/contextmenu/index.js"
 		},
 		"./contextmenu/define": {
-			"types": "./contextmenu/define.d.ts",
-			"default": "./contextmenu/define.js"
-		},
-		"./details": {
-			"types": "./details/index.d.ts",
-			"default": "./details/index.js"
+			"types": "./dist/contextmenu/define.d.ts",
+			"default": "./dist/contextmenu/define.js"
 		},
-		"./details/define": {
-			"types": "./details/define.d.ts",
-			"default": "./details/define.js"
-		},
-		"./youtube": {
-			"types": "./youtube/index.d.ts",
-			"default": "./youtube/index.js"
-		},
-		"./youtube/define": {
-			"types": "./youtube/define.d.ts",
-			"default": "./youtube/define.js"
-		},
-		"./breakpoint": {
-			"types": "./breakpoint/index.d.ts",
-			"default": "./breakpoint/index.js"
+		"./copy": {
+			"types": "./dist/copy/index.d.ts",
+			"default": "./dist/copy/index.js"
 		},
-		"./breakpoint/define": {
-			"types": "./breakpoint/define.d.ts",
-			"default": "./breakpoint/define.js"
+		"./copy/define": {
+			"types": "./dist/copy/define.d.ts",
+			"default": "./dist/copy/define.js"
 		},
 		"./dialog": {
-			"types": "./dialog/index.d.ts",
-			"default": "./dialog/index.js"
+			"types": "./dist/dialog/index.d.ts",
+			"default": "./dist/dialog/index.js"
 		},
 		"./dialog/define": {
-			"types": "./dialog/define.d.ts",
-			"default": "./dialog/define.js"
+			"types": "./dist/dialog/define.d.ts",
+			"default": "./dist/dialog/define.js"
 		},
-		"./popover": {
-			"types": "./popover/index.d.ts",
-			"default": "./popover/index.js"
+		"./editor": {
+			"types": "./dist/editor/index.d.ts",
+			"default": "./dist/editor/index.js"
 		},
-		"./popover/define": {
-			"types": "./popover/define.d.ts",
-			"default": "./popover/define.js"
+		"./editor/define": {
+			"types": "./dist/editor/define.d.ts",
+			"default": "./dist/editor/define.js"
 		},
-		"./tablesort": {
-			"types": "./tablesort/index.d.ts",
-			"default": "./tablesort/index.js"
+		"./fullscreen": {
+			"types": "./dist/fullscreen/index.d.ts",
+			"default": "./dist/fullscreen/index.js"
 		},
-		"./tablesort/define": {
-			"types": "./tablesort/define.d.ts",
-			"default": "./tablesort/define.js"
+		"./fullscreen/define": {
+			"types": "./dist/fullscreen/define.d.ts",
+			"default": "./dist/fullscreen/define.js"
 		},
-		"./prefetch": {
-			"types": "./prefetch/index.d.ts",
-			"default": "./prefetch/index.js"
+		"./intersect": {
+			"types": "./dist/intersect/index.d.ts",
+			"default": "./dist/intersect/index.js"
 		},
-		"./prefetch/define": {
-			"types": "./prefetch/define.d.ts",
-			"default": "./prefetch/define.js"
+		"./intersect/define": {
+			"types": "./dist/intersect/define.d.ts",
+			"default": "./dist/intersect/define.js"
 		},
-		"./copy": {
-			"types": "./copy/index.d.ts",
-			"default": "./copy/index.js"
+		"./prefetch": {
+			"types": "./dist/prefetch/index.d.ts",
+			"default": "./dist/prefetch/index.js"
 		},
-		"./copy/define": {
-			"types": "./copy/define.d.ts",
-			"default": "./copy/define.js"
+		"./prefetch/define": {
+			"types": "./dist/prefetch/define.d.ts",
+			"default": "./dist/prefetch/define.js"
 		},
-		"./fullscreen": {
-			"types": "./fullscreen/index.d.ts",
-			"default": "./fullscreen/index.js"
+		"./share": {
+			"types": "./dist/share/index.d.ts",
+			"default": "./dist/share/index.js"
 		},
-		"./fullscreen/define": {
-			"types": "./fullscreen/define.d.ts",
-			"default": "./fullscreen/define.js"
+		"./share/define": {
+			"types": "./dist/share/define.d.ts",
+			"default": "./dist/share/define.js"
 		},
-		"./base": {
-			"types": "./base/index.d.ts",
-			"default": "./base/index.js"
+		"./tablesort": {
+			"types": "./dist/tablesort/index.d.ts",
+			"default": "./dist/tablesort/index.js"
 		},
-		"./base/define": {
-			"types": "./base/define.d.ts",
-			"default": "./base/define.js"
+		"./tablesort/define": {
+			"types": "./dist/tablesort/define.d.ts",
+			"default": "./dist/tablesort/define.js"
 		},
-		"./editor": {
-			"types": "./editor/index.d.ts",
-			"default": "./editor/index.js"
+		"./wakelock": {
+			"types": "./dist/wakelock/index.d.ts",
+			"default": "./dist/wakelock/index.js"
 		},
-		"./editor/define": {
-			"types": "./editor/define.d.ts",
-			"default": "./editor/define.js"
+		"./wakelock/define": {
+			"types": "./dist/wakelock/define.d.ts",
+			"default": "./dist/wakelock/define.js"
 		},
-		"./share": {
-			"types": "./share/index.d.ts",
-			"default": "./share/index.js"
+		"./youtube": {
+			"types": "./dist/youtube/index.d.ts",
+			"default": "./dist/youtube/index.js"
 		},
-		"./share/define": {
-			"types": "./share/define.d.ts",
-			"default": "./share/define.js"
+		"./youtube/define": {
+			"types": "./dist/youtube/define.d.ts",
+			"default": "./dist/youtube/define.js"
 		}
 	},
+	"files": [
+		"dist"
+	],
 	"scripts": {
-		"dev": "vite --host",
-		"build": "tsc && vite build",
-		"preview": "vite preview",
-		"format": "prettier --write .",
-		"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
-		"package:json": "bun src/lib/scripts/packageJson/index.ts && prettier --write package.json",
-		"package:copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./package",
-		"package:tsc": "tsc --project tsconfig.package.json",
-		"package": "bun package:json && tsup && bun package:tsc && bun package:copy",
-		"pub": "bun i && bun doc && bun package && npm publish --access public ./package"
-	},
-	"devDependencies": {
-		"@tailwindcss/typography": "^0.5.13",
-		"@types/node": "^20.12.12",
-		"@vercel/analytics": "^1.2.2",
-		"autoprefixer": "^10.4.19",
-		"domco": "^0.5.19",
-		"prettier": "^3.2.5",
-		"prettier-plugin-tailwindcss": "^0.5.14",
-		"robino": "^0.2.0",
-		"tailwindcss": "^3.4.3",
-		"tsup": "^8.0.2",
-		"typedoc": "^0.25.13",
-		"typedoc-plugin-markdown": "^4.0.2",
-		"typescript": "^5.4.5",
-		"uico": "^0.2.4",
-		"vite": "^5.2.11"
+		"check": "tsc --noEmit",
+		"dev": "tsc --watch",
+		"build": "tsc"
 	}
 }

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Ross Robino
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,49 +0,0 @@
-# A Headless Custom Element Library
-
-## 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.
-
-### Built on the web platform
-
-- Each element is a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). So you can use them [with a framework](http://drab.robino.dev/getting-started/#frameworks), without one, or even directly in a markdown file. These components will work [regardless of your project's architecture](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/).
-- **drab** does _not_ use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so you can style content within these elements as usual with CSS.
-- Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at---creating reusable markup that can be server side rendered.
-- Each element can be imported, extended, named, and used however you see fit.
-
-### Minimal bundle size
-
-- **drab** has zero dependencies.
-
-### Write JavaScript, or don't
-
-- Elements can be [installed](http://drab.robino.dev/getting-started/#install) as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
-- Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
-
-### Built in animations
-
-- Uses the [web animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) for transitions.
-- Transitions are disabled for users who prefer reduced motion.
-- Extend the `Animate` element to build your own elements.
-
-## Contributing
-
-Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
-
-Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
-
-### Local Development
-
-This library is built with [TypeScript](https://www.typescriptlang.org/) and [tsup](https://tsup.egoist.dev/). The docs are built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and [TailwindCSS](https://tailwindcss.com). The package contents are located in `src/package`.
-
-1. Clone the [repository](https://github.com/rossrobino/drab)
-2. `bun i`
-3. `bun dev`
-
-### Making changes
-
-1. Add or edit the element in `src/package`---each element should extend `Base` or `Animate`. Each element has a `index.ts` file with the source code, and then a `define.ts` file where it is imported and called for use with a CDN.
-2. Add or edit the example in `src/docs`.
-3. Export the element from `src/package/index.ts`.
-4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
-5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with tsup.

package/animate/define.iife.js

@@ -1 +0,0 @@
-"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,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}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,2 +0,0 @@
-import { Animate } from "./index.js";
-customElements.define("drab-animate", Animate);

package/animate/index.d.ts

@@ -1,57 +0,0 @@
-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)
- * 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 declare class Animate extends Base {
-    constructor();
-    /**
-     * @returns An object containing the values of each `animation-option` attribute
-     */
-    get animationOptions(): KeyframeAnimationOptions;
-    /**
-     * @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
-     */
-    animateElement(animateOptions?: {
-        element?: HTMLElement;
-        options?: KeyframeAnimationOptions;
-    }): Promise<void>;
-    get keyframes(): Keyframe[];
-}
-export {};

package/animate/index.iife.js

@@ -1 +0,0 @@
-"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,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}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,138 +0,0 @@
-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/base/define.iife.js

@@ -1 +0,0 @@
-"use strict";(()=>{var r=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 s=Array.from(this.getContent().childNodes),o=[];t instanceof HTMLTemplateElement?(o.push(t.content.cloneNode(!0)),t.content.replaceChildren(...s)):(o.push(...t.childNodes),t.replaceChildren(...s)),this.getContent().replaceChildren(...o),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,s={}){s.signal=this.#e.signal,t.addEventListener(e,n,s)}triggerListener(e,n=this.event,t){for(let s of this.getTrigger())s.addEventListener(n,e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};customElements.define("drab-base",r);})();

package/base/index.iife.js

@@ -1 +0,0 @@
-"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,t){for(let r of this.getTrigger())r.addEventListener(n,e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};})();

package/breakpoint/define.iife.js

@@ -1 +0,0 @@
-"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,n){for(let r of this.getTrigger())r.addEventListener(e,t,n)}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,2 +0,0 @@
-import { Breakpoint } from "./index.js";
-customElements.define("drab-breakpoint", Breakpoint);

package/breakpoint/index.d.ts

@@ -1,26 +0,0 @@
-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;
-}[];
-/**
- * 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 declare class Breakpoint extends Base {
-    breakpoints: Breakpoints;
-    constructor();
-    /** finds the current breakpoint */
-    get breakpoint(): string;
-    mount(): void;
-}
-export {};

package/breakpoint/index.iife.js

@@ -1 +0,0 @@
-"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,n){for(let r of this.getTrigger())r.addEventListener(e,t,n)}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)}};})();