drab 6.3.0 → 6.4.1

package/dist/base/index.js

@@ -1,26 +1,8 @@
 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.
- *
- * By default, `trigger`s and `content` will be selected via the `data-trigger` and
- * `data-content` attributes. Alternatively, you can set the `trigger` or
- * `content` attribute to a CSS selector to change the default selector from
- * `[data-trigger]` or `[data-content]` to a selector of your choosing.
- * This can be useful if you have multiple elements within one another.
- *
- * Each element can have multiple `trigger`s, but will only have one `content`.
- */
-export class Base extends HTMLElement {
-    /**
-     * 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();
+import { validate } from "../util/validate.js";
+export const Trigger = (Super) => class Trigger extends Super {
+    constructor(...args) {
+        super(args);
     }
     /**
      * Event for the `trigger` to execute.
@@ -30,25 +12,32 @@ export class Base extends HTMLElement {
      * @default "click"
      */
     get event() {
-        return this.getAttribute("event") ?? "click";
+        return (this.getAttribute("event") ?? "click");
     }
     set event(value) {
         this.setAttribute("event", value);
     }
-    /**
-     * @param message message to announce to screen readers
-     */
-    announce(message) {
-        Base.#announcer.announce(message);
-    }
     getTrigger(instance = HTMLElement) {
         const triggers = this.querySelectorAll(this.getAttribute("trigger") ?? "[data-trigger]");
         for (const trigger of triggers)
-            this.#validate(trigger, instance);
+            validate(trigger, instance);
         return triggers;
     }
+    /**
+     * @param listener Listener to attach to all of the `trigger` elements.
+     */
+    triggerListener(listener, type = this.event, options) {
+        for (const trigger of this.getTrigger()) {
+            trigger.addEventListener(type, listener, options);
+        }
+    }
+};
+export const Content = (Super) => class Content extends Super {
+    constructor(...args) {
+        super(args);
+    }
     getContent(instance = HTMLElement) {
-        return this.#validate(this.querySelector(this.getAttribute("content") ?? "[data-content]"), instance);
+        return validate(this.querySelector(this.getAttribute("content") ?? "[data-content]"), instance);
     }
     /**
      * Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and
@@ -88,22 +77,26 @@ export class Base extends HTMLElement {
             }
         }
     }
+};
+export const Lifecycle = (Super) => class Lifecycle extends Super {
+    /** To clean up event listeners added to `document` when the element is removed. */
+    #listenerController = new AbortController();
+    constructor(...args) {
+        super(args);
+    }
     safeListener(type, listener, target = document.body, options = {}) {
         options.signal = this.#listenerController.signal;
         target.addEventListener(type, listener, options);
     }
     /**
-     * @param listener Listener to attach to all of the `trigger` elements.
-     */
-    triggerListener(listener, type = this.event, options) {
-        for (const trigger of this.getTrigger()) {
-            trigger.addEventListener(type, listener, options);
-        }
-    }
-    /**
-     * Passed into `queueMicrotask` in `connectedCallback`. It is overridden in each component that needs to run `connectedCallback`.
+     * Passed into `queueMicrotask` in `connectedCallback`.
+     * It is overridden in each component that needs to run `connectedCallback`.
      *
-     * The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn't necessary, but when client side rendering, the HTML within the custom element isn't available before `connectedCallback` is called. By waiting until the next microtask, the HTML content is available---then for example, listeners can be attached to elements inside.
+     * 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. */
@@ -119,14 +112,37 @@ export class Base extends HTMLElement {
         this.destroy();
         this.#listenerController.abort();
     }
+};
+export const Announce = (Super) => class Announce extends Super {
+    /**
+     * A single `Announcer` element to share between all drab elements to announce
+     * interactive changes.
+     */
+    static #announcer = Announcer.init();
+    constructor(...args) {
+        super(args);
+    }
     /**
-     * @param actual Element to validate.
-     * @param expected Constructor of the expected element.
-     * @returns If valid returns `actual` otherwise throws `TypeError`.
+     * @param message message to announce to screen readers
      */
-    #validate(actual, expected) {
-        if (!(actual instanceof expected))
-            throw new TypeError(`${actual} is not an instance of ${expected.name}.`);
-        return actual;
+    announce(message) {
+        Announce.#announcer.announce(message);
+    }
+};
+/**
+ * Each element in the library extends the `Base` class. It provides methods
+ * for selecting elements via HTML attributes along with other helpers.
+ *
+ * By default, `trigger`s and `content` will be selected via the `data-trigger` and
+ * `data-content` attributes. Alternatively, you can set the `trigger` or
+ * `content` attribute to a CSS selector to change the default selector from
+ * `[data-trigger]` or `[data-content]` to a selector of your choosing.
+ * This can be useful if you have multiple elements within one another.
+ *
+ * Each element can have multiple `trigger`s, but will only have one `content`.
+ */
+export class Base extends Trigger(Content(Lifecycle(Announce(HTMLElement)))) {
+    constructor() {
+        super();
     }
 }

package/dist/copy/index.js

@@ -29,7 +29,7 @@ export class Copy extends Base {
      * @param value The `value` to copy
      */
     copy(value = this.value) {
-        this.announce(`copied ${value} to clipboard`);
+        this.announce("copied text to clipboard");
         this.swapContent();
         return navigator.clipboard.writeText(value);
     }

package/dist/dialog/index.d.ts

@@ -23,9 +23,9 @@ export declare class Dialog extends Base {
     constructor();
     /** The `HTMLDialogElement` within the element. */
     get dialog(): HTMLDialogElement;
-    /** `HTMLDialogElement.showModal()` with animation. */
+    /** Wraps `HTMLDialogElement.showModal()`. */
     show(): void;
-    /** `HTMLDialogElement.close()` with animation. */
+    /** Wraps `HTMLDialogElement.close()`. */
     close(): void;
     /** `show` or `close` depending on the dialog's `open` attribute. */
     toggle(): void;

package/dist/dialog/index.js

@@ -15,7 +15,6 @@ import { Base } from "../base/index.js";
  * is open.
  */
 export class Dialog extends Base {
-    /** The initial margin-right value of the body element. */
     #initialBodyMarginRight = parseInt(getComputedStyle(document.body).marginRight);
     constructor() {
         super();
@@ -36,12 +35,12 @@ export class Dialog extends Base {
             document.body.style.overflow = show ? "hidden" : "";
         }
     }
-    /** `HTMLDialogElement.showModal()` with animation. */
+    /** Wraps `HTMLDialogElement.showModal()`. */
     show() {
         this.dialog.showModal();
         this.#toggleBodyScroll(true);
     }
-    /** `HTMLDialogElement.close()` with animation. */
+    /** Wraps `HTMLDialogElement.close()`. */
     close() {
         this.#toggleBodyScroll(false);
         this.dialog.close();
@@ -57,7 +56,6 @@ export class Dialog extends Base {
         this.triggerListener(() => this.toggle());
         this.safeListener("keydown", (e) => {
             if (e.key === "Escape" && this.dialog.open) {
-                // to execute animation
                 e.preventDefault();
                 this.close();
             }

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./announcer/index.js";
-export * from "./base/index.js";
+export { Base, type BaseAttributes } from "./base/index.js";
 export * from "./contextmenu/index.js";
 export * from "./copy/index.js";
 export * from "./dialog/index.js";

package/dist/index.js

@@ -1,5 +1,5 @@
 export * from "./announcer/index.js";
-export * from "./base/index.js";
+export { Base } from "./base/index.js";
 export * from "./contextmenu/index.js";
 export * from "./copy/index.js";
 export * from "./dialog/index.js";

package/dist/tabs/index.d.ts

@@ -8,7 +8,7 @@ export type TabAttributes = BaseAttributes & {
  * `HTMLAnchorElement` with the `href` attribute set to the `id` of the
  * corresponding tab panel.
  *
- * > Tip: Set the `height` of the element the panels are contained in with
+ * > Tip: Set the `height` of the element the `panel`s are contained in with
  * > CSS to prevent layout shift when JS is loaded.
  *
  * This element is based on

package/dist/tabs/index.js

@@ -5,7 +5,7 @@ import { Base } from "../base/index.js";
  * `HTMLAnchorElement` with the `href` attribute set to the `id` of the
  * corresponding tab panel.
  *
- * > Tip: Set the `height` of the element the panels are contained in with
+ * > Tip: Set the `height` of the element the `panel`s are contained in with
  * > CSS to prevent layout shift when JS is loaded.
  *
  * This element is based on

package/dist/util/validate.d.ts

@@ -0,0 +1,7 @@
+import type { Constructor } from "../base/index.js";
+/**
+ * @param actual Element to validate.
+ * @param expected Constructor of the expected element.
+ * @returns If valid returns `actual` otherwise throws `TypeError`.
+ */
+export declare const validate: <T extends HTMLElement>(actual: unknown, expected: Constructor<T>) => T;

package/dist/util/validate.js

@@ -0,0 +1,10 @@
+/**
+ * @param actual Element to validate.
+ * @param expected Constructor of the expected element.
+ * @returns If valid returns `actual` otherwise throws `TypeError`.
+ */
+export const validate = (actual, expected) => {
+    if (!(actual instanceof expected))
+        throw new TypeError(`${actual} is not an instance of ${expected.name}.`);
+    return actual;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "drab",
 	"description": "Interactivity for You",
-	"version": "6.3.0",
+	"version": "6.4.1",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {