drab 5.4.2 → 6.1.0

package/{tablesort → dist/tablesort}/index.d.ts

@@ -1,6 +1,9 @@
-import { Base } from "../index.js";
-import type { Attributes } from "../types/index.js";
-export type TableSortAttributes = Attributes<TableSort>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type TableSortAttributes = BaseAttributes;
+export type TableSortTriggerAttributes = {
+    "data-type": "string" | "boolean" | "number";
+    "data-value": string;
+};
 /**
  * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
  * headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`

package/{tablesort → dist/tablesort}/index.js

@@ -1,4 +1,4 @@
-import { Base } from "../index.js";
+import { Base } from "../base/index.js";
 /**
  * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
  * headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
@@ -20,7 +20,7 @@ export class TableSort extends Base {
      * Removes `data-asc` or `data-desc` from other triggers then sets the correct attribute on the selected trigger.
      *
      * @param trigger
-     * @returns true if ascending, false if descending
+     * @returns `true` if ascending, `false` if descending
      */
     #setAttributes(trigger) {
         const asc = "data-asc";
@@ -43,11 +43,24 @@ export class TableSort extends Base {
     mount() {
         const tbody = this.getContent(HTMLTableSectionElement);
         for (const trigger of this.getTrigger()) {
-            trigger.addEventListener(this.event, () => {
+            trigger.tabIndex = 0;
+            trigger.role = "button";
+            const listener = () => {
+                const asc = this.#setAttributes(trigger);
                 Array.from(tbody.querySelectorAll("tr"))
-                    .sort(comparer(trigger, this.#setAttributes(trigger)))
+                    .sort(comparer(trigger, asc))
                     .forEach((tr) => tbody.appendChild(tr));
-            });
+                this.announce(`sorted table by ${trigger.textContent} in ${asc ? "ascending" : "descending"} order`);
+            };
+            trigger.addEventListener(this.event, listener);
+            if (this.event === "click") {
+                trigger.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        listener();
+                    }
+                });
+            }
         }
     }
 }
@@ -65,23 +78,9 @@ const comparer = (th, ascending) => {
                 return collator.compare(aVal, bVal);
             }
             else if (dataType === "boolean") {
-                /**
-                 * if value is one of these and type is boolean
-                 * it should be considered falsy
-                 * since actually `Boolean("false") === true`
-                 * @param val string pulled from the textContent or attr
-                 * @returns a boolean of the provided string
-                 */
-                const convertToBoolean = (val) => {
-                    const falsy = ["0", "false", "null", "undefined"];
-                    if (falsy.includes(val)) {
-                        return false;
-                    }
-                    return Boolean(val);
-                };
-                return convertToBoolean(aVal) === convertToBoolean(bVal)
+                return falsyBoolean(aVal) === falsyBoolean(bVal)
                     ? 0
-                    : convertToBoolean(aVal)
+                    : falsyBoolean(aVal)
                         ? -1
                         : 1;
             }
@@ -107,3 +106,16 @@ const getValue = (tr, i) => {
     }
     return "";
 };
+/**
+ * if value is one of these and type is boolean
+ * it should be considered falsy
+ * since actually `Boolean("false") === true`
+ * @param val string pulled from the textContent or attr
+ * @returns a boolean of the provided string
+ */
+const falsyBoolean = (val) => {
+    if (["0", "false", "null", "undefined"].includes(val)) {
+        return false;
+    }
+    return Boolean(val);
+};

package/dist/util/define.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Define a custom element to the registry. Checks if the element is
+ * defined and then names the element.
+ *
+ * @param name name of the custom element
+ * @param Constructor custom element constructor
+ */
+export declare const define: (name: string, Constructor: CustomElementConstructor) => void;

package/dist/util/define.js

@@ -0,0 +1,11 @@
+/**
+ * Define a custom element to the registry. Checks if the element is
+ * defined and then names the element.
+ *
+ * @param name name of the custom element
+ * @param Constructor custom element constructor
+ */
+export const define = (name, Constructor) => {
+    if (!customElements.get(name))
+        customElements.define(name, Constructor);
+};

package/dist/wakelock/define.js

@@ -0,0 +1,3 @@
+import { define } from "../util/define.js";
+import { WakeLock } from "./index.js";
+define("drab-wakelock", WakeLock);

package/{wakelock → dist/wakelock}/index.d.ts

@@ -1,9 +1,8 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
-export type WakeLockAttributes = Attributes<WakeLock> & Partial<{
-    "auto-lock": boolean;
-    locked: boolean;
-}>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type WakeLockAttributes = BaseAttributes & {
+    "auto-lock"?: boolean;
+    locked?: boolean;
+};
 /**
  * `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.
  *

package/{wakelock → dist/wakelock}/index.js

@@ -34,9 +34,11 @@ export class WakeLock extends Base {
         if (this.#wakeLockSupported() && document.visibilityState === "visible") {
             this.wakeLock = await navigator.wakeLock.request("screen");
             this.setAttribute("locked", "");
+            this.announce("screen wake lock activated");
             this.swapContent(false);
             this.wakeLock.addEventListener("release", () => {
                 this.removeAttribute("locked");
+                this.announce("screen wake lock deactivated");
                 this.swapContent(false);
                 if (!this.#autoLock) {
                     // set to null is required, used to determine if screen should be

package/dist/youtube/define.js

@@ -0,0 +1,3 @@
+import { define } from "../util/define.js";
+import { YouTube } from "./index.js";
+define("drab-youtube", YouTube);

package/{youtube → dist/youtube}/index.d.ts

@@ -1,6 +1,9 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
-export type YouTubeAttributes = Attributes<YouTube, "uid">;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type YouTubeAttributes = BaseAttributes & {
+    autoplay?: boolean;
+    start?: number;
+    uid: string;
+};
 /**
  * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
  */

package/{youtube → dist/youtube}/index.js

@@ -49,7 +49,6 @@ export class YouTube extends Base {
             "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
     }
     attributeChangedCallback() {
-        // BREAKING TODO: make consistent with other components - decide on observed attributes
         queueMicrotask(() => {
             this.iframe.src = `https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay ? "&autoplay=1" : ""}`;
         });

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.1.0",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {
@@ -11,192 +11,156 @@
 	"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"
+			"types": "./dist/define.d.ts",
+			"default": "./dist/define.js"
 		},
-		"./animate": {
-			"types": "./animate/index.d.ts",
-			"default": "./animate/index.js"
+		"./announcer": {
+			"types": "./dist/announcer/index.d.ts",
+			"default": "./dist/announcer/index.js"
 		},
-		"./animate/define": {
-			"types": "./animate/define.d.ts",
-			"default": "./animate/define.js"
+		"./announcer/define": {
+			"types": "./dist/announcer/define.d.ts",
+			"default": "./dist/announcer/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"
-		},
-		"./details/define": {
-			"types": "./details/define.d.ts",
-			"default": "./details/define.js"
+			"types": "./dist/contextmenu/define.d.ts",
+			"default": "./dist/contextmenu/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}};})();