drab 5.4.1 → 6.0.0

package/{base → dist/base}/copy/index.d.ts

@@ -1,4 +1,7 @@
-import { Base } from "../index.js";
+import { Base, type BaseAttributes } from "../index.js";
+export type BaseCopyAttributes = BaseAttributes & {
+    value: string;
+};
 export declare class BaseCopy extends Base {
     constructor();
     /**

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

@@ -1,3 +1,8 @@
+export type BaseAttributes = {
+    trigger?: string;
+    content?: string;
+    swap?: string;
+};
 /**
  * Each element in the library extends the `Base` class. It provides methods
  * for selecting elements via HTML attributes along with other helpers.
@@ -40,10 +45,10 @@ export declare class Base extends HTMLElement {
      * 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
+     * @param revert Wait time (ms) before swapping back, set to `false` to not revert.
+     * default: `800`
      */
-    swapContent(revert?: boolean, delay?: number): void;
+    swapContent(revert?: number | false): void;
     /**
      * Wrapper around `document.body.addEventListener` that ensures when the
      * element is removed from the DOM, these event listeners are cleaned up.

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

@@ -55,12 +55,10 @@ export class Base extends HTMLElement {
      * 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
+     * @param revert Wait time (ms) before swapping back, set to `false` to not revert.
+     * default: `800`
      */
-    swapContent(revert = true, delay = 800) {
-        // BREAKING TODO: `revert` and `delay` -- these could be one parameter
-        // revert: number = 800
+    swapContent(revert = 800) {
         /** The swap element, used to hold the replacement contents. */
         const swap = this.querySelector(this.getAttribute("swap") ?? "[data-swap]");
         if (swap) {
@@ -87,7 +85,7 @@ export class Base extends HTMLElement {
             this.getContent().replaceChildren(...placeholder);
             if (revert) {
                 // wait and then run again to swap back
-                setTimeout(() => this.swapContent(false), delay);
+                setTimeout(() => this.swapContent(0), revert);
             }
         }
     }

package/dist/contextmenu/index.d.ts

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

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

@@ -1,8 +1,8 @@
-import { Animate } from "../animate/index.js";
+import { Base } from "../base/index.js";
 /**
  * Displays content when the `trigger` element is right clicked, or long pressed on mobile.
  */
-export class ContextMenu extends Animate {
+export class ContextMenu extends Base {
     /** Tracks the long press duration on mobile. */
     #touchTimer;
     constructor() {
@@ -17,12 +17,12 @@ export class ContextMenu extends Animate {
         // find coordinates of the click
         const scrollY = window.scrollY;
         const scrollX = window.scrollX;
-        const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0]?.clientX ?? 0;
-        const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0]?.clientY ?? 0;
+        const clientX = e instanceof MouseEvent ? e.clientX : (e.touches[0]?.clientX ?? 0);
+        const clientY = e instanceof MouseEvent ? e.clientY : (e.touches[0]?.clientY ?? 0);
         let x = clientX + scrollX;
         let y = clientY + scrollY;
         this.getContent().style.position = "absolute";
-        this.getContent().style.display = "block";
+        this.getContent().setAttribute("data-open", "");
         const offsetWidth = this.getContent().offsetWidth + 24;
         const offsetHeight = this.getContent().offsetHeight + 6;
         const innerWidth = window.innerWidth;
@@ -35,15 +35,9 @@ export class ContextMenu extends Animate {
             y = scrollY + innerHeight - offsetHeight;
         }
         this.#coordinates = { x, y };
-        await this.animateElement();
     }
     async hide() {
-        if (this.getContent().style.display !== "none") {
-            await this.animateElement({
-                options: { direction: "reverse" },
-            });
-            this.getContent().style.display = "none";
-        }
+        this.getContent().removeAttribute("data-open");
     }
     mount() {
         // mouse

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

@@ -1,6 +1,5 @@
-import { BaseCopy } from "../base/copy/index.js";
-import type { Attributes } from "../types/index.js";
-export type CopyAttributes = Attributes<Copy, "value">;
+import { BaseCopy, type BaseCopyAttributes } from "../base/copy/index.js";
+export type CopyAttributes = BaseCopyAttributes;
 /**
  * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
  * to copy text.

package/dist/define.js

@@ -0,0 +1,4 @@
+import * as elements from "./index.js";
+for (const [key, value] of Object.entries(elements)) {
+    customElements.define(`drab-${key.toLowerCase()}`, value);
+}

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

@@ -1,11 +1,10 @@
-import { Animate, type AnimateAttributes } from "../animate/index.js";
-import type { Attributes } from "../types/index.js";
-export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<{
-    "click-outside-close": boolean;
-    "remove-body-scroll": boolean;
-}>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type DialogAttributes = BaseAttributes & {
+    "click-outside-close"?: boolean;
+    "remove-body-scroll"?: boolean;
+};
 /**
- * Provides triggers and animations for the `HTMLDialogElement`.
+ * Provides triggers for the `HTMLDialogElement`.
  *
  * `click-outside-close`
  *
@@ -17,7 +16,7 @@ export type DialogAttributes = Attributes<Dialog> & AnimateAttributes & Partial<
  * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
  * is open.
  */
-export declare class Dialog extends Animate {
+export declare class Dialog extends Base {
     #private;
     constructor();
     /** The `HTMLDialogElement` within the element. */

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

@@ -1,6 +1,6 @@
-import { Animate } from "../animate/index.js";
+import { Base } from "../base/index.js";
 /**
- * Provides triggers and animations for the `HTMLDialogElement`.
+ * Provides triggers for the `HTMLDialogElement`.
  *
  * `click-outside-close`
  *
@@ -12,7 +12,7 @@ import { Animate } from "../animate/index.js";
  * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
  * is open.
  */
-export class Dialog extends Animate {
+export class Dialog extends Base {
     /** The initial margin-right value of the body element. */
     #initialBodyMarginRight = parseInt(getComputedStyle(document.body).marginRight);
     constructor() {
@@ -22,38 +22,25 @@ export class Dialog extends Animate {
     get dialog() {
         return this.getContent(HTMLDialogElement);
     }
-    /** The width of the scrollbar---used for when the scroll is removed. */
-    get #scrollbarWidth() {
-        return window.innerWidth - document.documentElement.clientWidth;
-    }
-    set #bodyMarginRight(margin) {
-        document.body.style.marginRight = `${margin}px`;
-    }
-    set #bodyOverflow(overflow) {
-        document.body.style.overflow = overflow;
-    }
     /** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
     #toggleBodyScroll(show) {
         if (this.hasAttribute("remove-body-scroll")) {
-            this.#bodyMarginRight = show
-                ? this.#initialBodyMarginRight + this.#scrollbarWidth
-                : this.#initialBodyMarginRight;
-            this.#bodyOverflow = show ? "hidden" : "";
+            document.body.style.marginRight = `${show
+                ? this.#initialBodyMarginRight +
+                    // scrollbar width
+                    window.innerWidth -
+                    document.documentElement.clientWidth
+                : this.#initialBodyMarginRight}px`;
+            document.body.style.overflow = show ? "hidden" : "";
         }
     }
     /** `HTMLDialogElement.showModal()` with animation. */
     async show() {
         this.dialog.showModal();
         this.#toggleBodyScroll(true);
-        await this.animateElement();
     }
     /** `HTMLDialogElement.close()` with animation. */
     async close() {
-        await this.animateElement({
-            options: {
-                direction: "reverse",
-            },
-        });
         this.#toggleBodyScroll(false);
         this.dialog.close();
     }

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

@@ -1,6 +1,5 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
-export type EditorAttributes = Attributes<Editor>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type EditorAttributes = BaseAttributes;
 /**
  * A piece of content to insert into the `textarea`.
  */

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

@@ -1,21 +1,17 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
-export type FullscreenAttributes = Attributes<Fullscreen>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type FullscreenAttributes = BaseAttributes;
 /**
  * Toggles the `documentElement` or `content` element to fullscreen mode.
  *
  * Disables the `trigger` if fullscreen is not supported.
  */
 export declare class Fullscreen extends Base {
+    #private;
     constructor();
     /**
      * @returns `true` if fullscreen is currently enabled.
      */
     isFullscreen(): boolean;
-    /**
-     * @returns `true` if fullscreen is supported.
-     */
-    fullscreenSupported(): boolean;
     /** Enables or disables fullscreen mode based on the current state. */
     toggle(): void;
     mount(): void;

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

@@ -17,8 +17,7 @@ export class Fullscreen extends Base {
     /**
      * @returns `true` if fullscreen is supported.
      */
-    fullscreenSupported() {
-        // BREAKING TODO: make private like in WakeLock
+    #fullscreenSupported() {
         return Boolean(document.documentElement.requestFullscreen);
     }
     /** Enables or disables fullscreen mode based on the current state. */
@@ -38,7 +37,7 @@ export class Fullscreen extends Base {
     mount() {
         this.triggerListener(() => this.toggle());
         for (const trigger of this.getTrigger()) {
-            if (!this.fullscreenSupported() && "disabled" in trigger) {
+            if (!this.#fullscreenSupported() && "disabled" in trigger) {
                 trigger.disabled = true;
             }
         }

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { Base, type BaseAttributes } from "./base/index.js";
+export { ContextMenu, type ContextMenuAttributes, } from "./contextmenu/index.js";
+export { Copy, type CopyAttributes } from "./copy/index.js";
+export { Dialog, type DialogAttributes } from "./dialog/index.js";
+export { Editor, type EditorAttributes } from "./editor/index.js";
+export { Fullscreen, type FullscreenAttributes } from "./fullscreen/index.js";
+export { Intersect, type IntersectAttributes } from "./intersect/index.js";
+export { Prefetch, type PrefetchAttributes } from "./prefetch/index.js";
+export { Share, type ShareAttributes } from "./share/index.js";
+export { TableSort, type TableSortAttributes } from "./tablesort/index.js";
+export { WakeLock, type WakeLockAttributes } from "./wakelock/index.js";
+export { YouTube, type YouTubeAttributes } from "./youtube/index.js";

package/dist/index.js

@@ -0,0 +1,12 @@
+export { Base } from "./base/index.js";
+export { ContextMenu, } from "./contextmenu/index.js";
+export { Copy } from "./copy/index.js";
+export { Dialog } from "./dialog/index.js";
+export { Editor } from "./editor/index.js";
+export { Fullscreen } from "./fullscreen/index.js";
+export { Intersect } from "./intersect/index.js";
+export { Prefetch } from "./prefetch/index.js";
+export { Share } from "./share/index.js";
+export { TableSort } from "./tablesort/index.js";
+export { WakeLock } from "./wakelock/index.js";
+export { YouTube } from "./youtube/index.js";

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

@@ -1,8 +1,7 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
-export type IntersectAttributes = Attributes<Intersect> & Partial<{
-    threshold: number;
-}>;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type IntersectAttributes = BaseAttributes & {
+    threshold?: number;
+};
 type IntersectCallback = () => any;
 /**
  * Uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to add a `data-intersect` attribute to `content` when the `trigger` is intersecting.

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

@@ -1,11 +1,10 @@
-import { Base } from "../base/index.js";
-import type { Attributes } from "../types/index.js";
+import { Base, type BaseAttributes } from "../base/index.js";
 type Strategy = "hover" | "load" | "visible";
-export type PrefetchAttributes = Attributes<Prefetch> & Partial<{
-    strategy: Strategy;
-    prerender: boolean;
-    url: string;
-}>;
+export type PrefetchAttributes = BaseAttributes & {
+    strategy?: Strategy;
+    prerender?: boolean;
+    url?: string;
+};
 /**
  * The `Prefetch` element can prefetch a url, or enhance the `HTMLAnchorElement` by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).
  *
@@ -60,9 +59,7 @@ export declare class Prefetch extends Base {
     prefetch(options?: {
         /** The anchors to prefetch. Defaults to `trigger` elements. */
         anchors?: NodeListOf<HTMLAnchorElement>;
-        /**
-         * Uses the Speculation Rules API when supported to prerender on the client.
-         */
+        /** Uses the Speculation Rules API when supported to prerender on the client. */
         prerender?: boolean;
         /**
          * Determines when the prefetch takes place.

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

@@ -1,6 +1,5 @@
-import { BaseCopy } from "../base/copy/index.js";
-import type { Attributes } from "../types/index.js";
-export type ShareAttributes = Attributes<Share, "value">;
+import { BaseCopy, type BaseCopyAttributes } from "../base/copy/index.js";
+export type ShareAttributes = BaseCopyAttributes;
 /**
  * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share a url. If `share` is not supported, falls back to copy the text instead.
  */

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

@@ -1,6 +1,5 @@
-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;
 /**
  * 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`

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/{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" : ""}`;
         });