npm - drab - Versions diffs - 5.4.2 → 6.1.0 - Mend

drab 5.4.2 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/dist/announcer/define.js +3 -0
package/dist/announcer/index.d.ts +49 -0
package/dist/announcer/index.js +80 -0
package/{base → dist/base}/copy/index.d.ts +4 -1
package/{base → dist/base}/copy/index.js +1 -0
package/dist/base/define.js +3 -0
package/{base → dist/base}/index.d.ts +16 -11
package/{base → dist/base}/index.js +19 -15
package/dist/contextmenu/define.js +3 -0
package/dist/contextmenu/index.d.ts +12 -0
package/{contextmenu → dist/contextmenu}/index.js +6 -12
package/dist/copy/define.js +3 -0
package/{copy → dist/copy}/index.d.ts +2 -3
package/dist/define.js +5 -0
package/dist/dialog/define.js +3 -0
package/{dialog → dist/dialog}/index.d.ts +7 -8
package/{dialog → dist/dialog}/index.js +3 -9
package/dist/editor/define.js +3 -0
package/{editor → dist/editor}/index.d.ts +7 -3
package/dist/fullscreen/define.js +3 -0
package/{fullscreen → dist/fullscreen}/index.d.ts +3 -7
package/{fullscreen → dist/fullscreen}/index.js +2 -3
package/dist/index.d.ts +13 -0
package/dist/index.js +13 -0
package/dist/intersect/define.js +3 -0
package/{intersect → dist/intersect}/index.d.ts +4 -5
package/dist/prefetch/define.js +3 -0
package/{prefetch → dist/prefetch}/index.d.ts +7 -10
package/dist/share/define.js +3 -0
package/{share → dist/share}/index.d.ts +2 -3
package/dist/tablesort/define.js +3 -0
package/{tablesort → dist/tablesort}/index.d.ts +6 -3
package/{tablesort → dist/tablesort}/index.js +33 -21
package/dist/util/define.d.ts +8 -0
package/dist/util/define.js +11 -0
package/dist/wakelock/define.js +3 -0
package/{wakelock → dist/wakelock}/index.d.ts +5 -6
package/{wakelock → dist/wakelock}/index.js +2 -0
package/dist/youtube/define.js +3 -0
package/{youtube → dist/youtube}/index.d.ts +6 -3
package/{youtube → dist/youtube}/index.js +0 -1
package/package.json +109 -145
package/LICENSE.md +0 -21
package/README.md +0 -49
package/animate/define.iife.js +0 -1
package/animate/define.js +0 -2
package/animate/index.d.ts +0 -57
package/animate/index.iife.js +0 -1
package/animate/index.js +0 -138
package/base/define.iife.js +0 -1
package/base/define.js +0 -2
package/base/index.iife.js +0 -1
package/breakpoint/define.iife.js +0 -1
package/breakpoint/define.js +0 -2
package/breakpoint/index.d.ts +0 -26
package/breakpoint/index.iife.js +0 -1
package/breakpoint/index.js +0 -55
package/contextmenu/define.iife.js +0 -1
package/contextmenu/define.js +0 -2
package/contextmenu/index.d.ts +0 -13
package/contextmenu/index.iife.js +0 -1
package/copy/define.iife.js +0 -1
package/copy/define.js +0 -2
package/copy/index.iife.js +0 -1
package/define.iife.js +0 -9
package/define.js +0 -4
package/details/define.iife.js +0 -1
package/details/define.js +0 -2
package/details/index.d.ts +0 -21
package/details/index.iife.js +0 -1
package/details/index.js +0 -46
package/dialog/define.iife.js +0 -1
package/dialog/define.js +0 -2
package/dialog/index.iife.js +0 -1
package/editor/define.iife.js +0 -9
package/editor/define.js +0 -2
package/editor/index.iife.js +0 -9
package/fullscreen/define.iife.js +0 -1
package/fullscreen/define.js +0 -2
package/fullscreen/index.iife.js +0 -1
package/index.d.ts +0 -17
package/index.iife.js +0 -9
package/index.js +0 -17
package/intersect/define.iife.js +0 -1
package/intersect/define.js +0 -2
package/intersect/index.iife.js +0 -1
package/popover/define.iife.js +0 -1
package/popover/define.js +0 -2
package/popover/index.d.ts +0 -25
package/popover/index.iife.js +0 -1
package/popover/index.js +0 -72
package/prefetch/define.iife.js +0 -1
package/prefetch/define.js +0 -2
package/prefetch/index.iife.js +0 -1
package/share/define.iife.js +0 -1
package/share/define.js +0 -2
package/share/index.iife.js +0 -1
package/tablesort/define.d.ts +0 -1
package/tablesort/define.iife.js +0 -1
package/tablesort/define.js +0 -2
package/tablesort/index.iife.js +0 -1
package/types/index.d.ts +0 -11
package/types/index.js +0 -1
package/wakelock/define.d.ts +0 -1
package/wakelock/define.iife.js +0 -1
package/wakelock/define.js +0 -2
package/wakelock/index.iife.js +0 -1
package/youtube/define.d.ts +0 -1
package/youtube/define.iife.js +0 -1
package/youtube/define.js +0 -2
package/youtube/index.iife.js +0 -1
/package/{animate → dist/announcer}/define.d.ts +0 -0
/package/{base → dist/base}/define.d.ts +0 -0
/package/{breakpoint → dist/contextmenu}/define.d.ts +0 -0
/package/{contextmenu → dist/copy}/define.d.ts +0 -0
/package/{copy → dist/copy}/index.js +0 -0
/package/{copy → dist}/define.d.ts +0 -0
/package/{define.d.ts → dist/dialog/define.d.ts} +0 -0
/package/{details → dist/editor}/define.d.ts +0 -0
/package/{editor → dist/editor}/index.js +0 -0
/package/{dialog → dist/fullscreen}/define.d.ts +0 -0
/package/{editor → dist/intersect}/define.d.ts +0 -0
/package/{intersect → dist/intersect}/index.js +0 -0
/package/{fullscreen → dist/prefetch}/define.d.ts +0 -0
/package/{prefetch → dist/prefetch}/index.js +0 -0
/package/{intersect → dist/share}/define.d.ts +0 -0
/package/{share → dist/share}/index.js +0 -0
/package/{popover → dist/tablesort}/define.d.ts +0 -0
/package/{prefetch → dist/wakelock}/define.d.ts +0 -0
/package/{share → dist/youtube}/define.d.ts +0 -0

package/dist/announcer/define.js ADDED Viewed

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

package/dist/announcer/index.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * Use the `Announcer` element to create a visually hidden ARIA live region
+ * that announces content changes to screen readers. Use this element when you
+ * need to announce changes to screen readers that something has changed. If changed
+ * element is visible on the page, add the appropriate ARIA live attribute to the
+ * visible element instead of using this announcer.
+ *
+ * It's recommended to create this element with JavaScript using the `Announcer.init` method,
+ * then you can reuse the same announcer throughout the application to
+ * [avoid duplicate regions](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#limit-the-number-of-live-regions-on-the-page)
+ * (see below).
+ *
+ * `aria-live`
+ *
+ * By default, the announcer is created with the
+ * [`polite` ARIA live attribute](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#1.-using-the-aria-live-attribute).
+ *
+ * @example
+ *
+ * ```ts
+ * import { Announcer } from "drab/announcer";
+ *
+ * // creates and appends a new announcer to the body element
+ * const announcer = Announcer.init();
+ *
+ * // create announcement
+ * announcer.announce("message");
+ * ```
+ *
+ * > The `Base` element creates a single `Announcer` to share between all elements
+ * > that can be accessed through `this.announce`. If you are using one of drab's other
+ * > elements you can call `announce` directly on the element to announce changes.
+ */
+export declare class Announcer extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    /**
+     * @param message message to announce to screen readers
+     */
+    announce(message: string): void;
+    /**
+     * Helper method to create a new `Announcer` element named `drab-announcer`
+     * and append the element to the `<body>` tag. If an announcer already exists
+     * on the page it will return the existing element.
+     *
+     * @returns the created or existing `Announcer` element
+     */
+    static init(): Announcer;
+}

package/dist/announcer/index.js ADDED Viewed

@@ -0,0 +1,80 @@
+import { define } from "../util/define.js";
+/**
+ * Use the `Announcer` element to create a visually hidden ARIA live region
+ * that announces content changes to screen readers. Use this element when you
+ * need to announce changes to screen readers that something has changed. If changed
+ * element is visible on the page, add the appropriate ARIA live attribute to the
+ * visible element instead of using this announcer.
+ *
+ * It's recommended to create this element with JavaScript using the `Announcer.init` method,
+ * then you can reuse the same announcer throughout the application to
+ * [avoid duplicate regions](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#limit-the-number-of-live-regions-on-the-page)
+ * (see below).
+ *
+ * `aria-live`
+ *
+ * By default, the announcer is created with the
+ * [`polite` ARIA live attribute](https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/#1.-using-the-aria-live-attribute).
+ *
+ * @example
+ *
+ * ```ts
+ * import { Announcer } from "drab/announcer";
+ *
+ * // creates and appends a new announcer to the body element
+ * const announcer = Announcer.init();
+ *
+ * // create announcement
+ * announcer.announce("message");
+ * ```
+ *
+ * > The `Base` element creates a single `Announcer` to share between all elements
+ * > that can be accessed through `this.announce`. If you are using one of drab's other
+ * > elements you can call `announce` directly on the element to announce changes.
+ */
+export class Announcer extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.style.position = "absolute";
+        this.style.width = "1px";
+        this.style.height = "1px";
+        this.style.padding = "0";
+        this.style.margin = "-1px";
+        this.style.overflow = "hidden";
+        this.style.clipPath = "rect(0, 0, 0, 0)";
+        this.style.whiteSpace = "nowrap";
+        this.style.borderWidth = "0";
+        if (!this.ariaLive)
+            this.ariaLive = "polite";
+    }
+    /**
+     * @param message message to announce to screen readers
+     */
+    announce(message) {
+        // this ensures multiple messages will be read in succession
+        const span = document.createElement("span");
+        span.textContent = message;
+        this.append(span);
+        // https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#empty-the-live-region-and-wait-a-bit-in-between-updates
+        setTimeout(() => span.remove(), 10000);
+    }
+    /**
+     * Helper method to create a new `Announcer` element named `drab-announcer`
+     * and append the element to the `<body>` tag. If an announcer already exists
+     * on the page it will return the existing element.
+     *
+     * @returns the created or existing `Announcer` element
+     */
+    static init() {
+        define("drab-announcer", this);
+        const name = "drab-announcer";
+        let announcer = document.querySelector(name);
+        if (!announcer) {
+            announcer = document.createElement(name);
+            document.body.append(announcer);
+        }
+        return announcer;
+    }
+}

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

@@ -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}/copy/index.js RENAMED Viewed

@@ -19,6 +19,7 @@ export class BaseCopy extends Base {
      * @param text The `text` to share
      */
     async copy(text = this.value) {
+        this.announce(`copied ${text} to clipboard`);
         await navigator.clipboard.writeText(text);
         this.swapContent();
     }

package/dist/base/define.js ADDED Viewed

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

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

@@ -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.
@@ -22,14 +27,18 @@ export declare class Base extends HTMLElement {
      */
     get event(): keyof HTMLElementEventMap;
     set event(value: keyof HTMLElementEventMap);
+    /**
+     * @param message message to announce to screen readers
+     */
+    announce(message: string): void;
     /**
      * @returns All of the elements that match the `trigger` selector.
      * @default this.querySelectorAll("[data-trigger]")
      */
     getTrigger<T extends HTMLElement = HTMLElement>(): NodeListOf<T>;
     /**
-     * @param instance The instance of the desired element, ex: `HTMLDialogElement`.
-     * Defaults to `HTMLElement`.
+     * @param instance The instance of the desired element to validate against,
+     * ex: `HTMLDialogElement`. Defaults to `HTMLElement`.
      * @returns The element that matches the `content` selector.
      * @default this.querySelector("[data-content]")
      */
@@ -40,10 +49,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.
@@ -62,16 +71,12 @@ export declare class Base extends HTMLElement {
      * 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;
-    /**
-     * Called when custom element is added to the page.
-     */
+    /** Called when custom element is added to the page. */
     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;
-    /**
-     * Called when custom element is removed from the page.
-     */
+    /** Called when custom element is removed from the page. */
     disconnectedCallback(): void;
 }

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

@@ -1,3 +1,4 @@
+import { Announcer } from "../announcer/index.js";
 /**
  * Each element in the library extends the `Base` class. It provides methods
  * for selecting elements via HTML attributes along with other helpers.
@@ -12,8 +13,11 @@
  */
 export class Base extends HTMLElement {
     /**
-     * To clean up event listeners added to `document` when the element is removed.
+     * A single `Announcer` element to share between all drab elements to announce
+     * interactive changes.
      */
+    static #announcer = Announcer.init();
+    /** To clean up event listeners added to `document` when the element is removed. */
     #listenerController = new AbortController();
     constructor() {
         super();
@@ -31,6 +35,12 @@ export class Base extends HTMLElement {
     set event(value) {
         this.setAttribute("event", value);
     }
+    /**
+     * @param message message to announce to screen readers
+     */
+    announce(message) {
+        Base.#announcer.announce(message);
+    }
     /**
      * @returns All of the elements that match the `trigger` selector.
      * @default this.querySelectorAll("[data-trigger]")
@@ -40,8 +50,8 @@ export class Base extends HTMLElement {
         return triggers;
     }
     /**
-     * @param instance The instance of the desired element, ex: `HTMLDialogElement`.
-     * Defaults to `HTMLElement`.
+     * @param instance The instance of the desired element to validate against,
+     * ex: `HTMLDialogElement`. Defaults to `HTMLElement`.
      * @returns The element that matches the `content` selector.
      * @default this.querySelector("[data-content]")
      */
@@ -55,12 +65,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 +95,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);
             }
         }
     }
@@ -117,9 +125,7 @@ export class Base extends HTMLElement {
      * 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() { }
-    /**
-     * Called when custom element is added to the page.
-     */
+    /** Called when custom element is added to the page. */
     connectedCallback() {
         queueMicrotask(() => this.mount());
     }
@@ -127,9 +133,7 @@ export class Base extends HTMLElement {
      * Passed into `disconnectedCallback`, since `Base` needs to run `disconnectedCallback` as well. It is overridden in each element that needs to run `disconnectedCallback`.
      */
     destroy() { }
-    /**
-     * Called when custom element is removed from the page.
-     */
+    /** Called when custom element is removed from the page. */
     disconnectedCallback() {
         this.destroy();
         this.#listenerController.abort();

package/dist/contextmenu/define.js ADDED Viewed

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

package/dist/contextmenu/index.d.ts ADDED Viewed

@@ -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 RENAMED Viewed

@@ -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/dist/copy/define.js ADDED Viewed

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

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

@@ -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 ADDED Viewed

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

package/dist/dialog/define.js ADDED Viewed

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

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

@@ -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 RENAMED Viewed

@@ -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() {
@@ -38,15 +38,9 @@ export class Dialog extends Animate {
     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/dist/editor/define.js ADDED Viewed

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

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

@@ -1,6 +1,10 @@
-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;
+export type EditorTriggerAttributes = {
+    "data-value": string;
+    "data-key": string;
+    "data-type": "block" | "wrap" | "inline";
+};
 /**
  * A piece of content to insert into the `textarea`.
  */

package/dist/fullscreen/define.js ADDED Viewed

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

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

@@ -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 RENAMED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,13 @@
+export * from "./announcer/index.js";
+export * from "./base/index.js";
+export * from "./contextmenu/index.js";
+export * from "./copy/index.js";
+export * from "./dialog/index.js";
+export * from "./editor/index.js";
+export * from "./fullscreen/index.js";
+export * from "./intersect/index.js";
+export * from "./prefetch/index.js";
+export * from "./share/index.js";
+export * from "./tablesort/index.js";
+export * from "./wakelock/index.js";
+export * from "./youtube/index.js";

package/dist/index.js ADDED Viewed

@@ -0,0 +1,13 @@
+export * from "./announcer/index.js";
+export * from "./base/index.js";
+export * from "./contextmenu/index.js";
+export * from "./copy/index.js";
+export * from "./dialog/index.js";
+export * from "./editor/index.js";
+export * from "./fullscreen/index.js";
+export * from "./intersect/index.js";
+export * from "./prefetch/index.js";
+export * from "./share/index.js";
+export * from "./tablesort/index.js";
+export * from "./wakelock/index.js";
+export * from "./youtube/index.js";

package/dist/intersect/define.js ADDED Viewed

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

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

@@ -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/dist/prefetch/define.js ADDED Viewed

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

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

@@ -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/dist/share/define.js ADDED Viewed

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

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

@@ -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/dist/tablesort/define.js ADDED Viewed

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