drab 6.2.1 → 6.3.0

package/dist/announcer/index.d.ts

@@ -10,6 +10,8 @@
  * [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).
  *
+ * ### Attributes
+ *
  * `aria-live`
  *
  * By default, the announcer is created with the

package/dist/announcer/index.js

@@ -11,6 +11,8 @@ import { define } from "../util/define.js";
  * [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).
  *
+ * ### Attributes
+ *
  * `aria-live`
  *
  * By default, the announcer is created with the

package/dist/base/index.d.ts

@@ -3,6 +3,7 @@ export type BaseAttributes = {
     content?: string;
     swap?: string;
 };
+type Constructor<T> = new (...args: any[]) => T;
 /**
  * Each element in the library extends the `Base` class. It provides methods
  * for selecting elements via HTML attributes along with other helpers.
@@ -32,19 +33,21 @@ export declare class Base extends HTMLElement {
      */
     announce(message: string): void;
     /**
+     * @param instance The instance of the desired element to validate against,
+     * ex: `HTMLButtonElement`. Defaults to `HTMLElement`.
      * @returns All of the elements that match the `trigger` selector.
      * @default this.querySelectorAll("[data-trigger]")
      */
-    getTrigger<T extends HTMLElement = HTMLElement>(): NodeListOf<T>;
+    getTrigger<T extends HTMLElement>(instance: Constructor<T>): NodeListOf<T>;
+    getTrigger(): NodeListOf<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]")
      */
-    getContent<T extends HTMLElement = HTMLElement>(instance?: {
-        new (): T;
-    }): T;
+    getContent<T extends HTMLElement>(instance: Constructor<T>): T;
+    getContent(): HTMLElement;
     /**
      * Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and
      * swaps `this.content()` with the content of the element found.
@@ -84,3 +87,4 @@ export declare class Base extends HTMLElement {
     /** Called when custom element is removed from the page. */
     disconnectedCallback(): void;
 }
+export {};

package/dist/base/index.js

@@ -30,7 +30,7 @@ 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);
@@ -41,25 +41,14 @@ export class Base extends HTMLElement {
     announce(message) {
         Base.#announcer.announce(message);
     }
-    /**
-     * @returns All of the elements that match the `trigger` selector.
-     * @default this.querySelectorAll("[data-trigger]")
-     */
-    getTrigger() {
+    getTrigger(instance = HTMLElement) {
         const triggers = this.querySelectorAll(this.getAttribute("trigger") ?? "[data-trigger]");
+        for (const trigger of triggers)
+            this.#validate(trigger, instance);
         return triggers;
     }
-    /**
-     * @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]")
-     */
     getContent(instance = HTMLElement) {
-        const content = this.querySelector(this.getAttribute("content") ?? "[data-content]");
-        if (content instanceof instance)
-            return content;
-        throw new Error("Content not found");
+        return this.#validate(this.querySelector(this.getAttribute("content") ?? "[data-content]"), instance);
     }
     /**
      * Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and
@@ -130,4 +119,14 @@ export class Base extends HTMLElement {
         this.destroy();
         this.#listenerController.abort();
     }
+    /**
+     * @param actual Element to validate.
+     * @param expected Constructor of the expected element.
+     * @returns If valid returns `actual` otherwise throws `TypeError`.
+     */
+    #validate(actual, expected) {
+        if (!(actual instanceof expected))
+            throw new TypeError(`${actual} is not an instance of ${expected.name}.`);
+        return actual;
+    }
 }

package/dist/contextmenu/index.d.ts

@@ -6,7 +6,7 @@ export type ContextMenuAttributes = BaseAttributes;
 export declare class ContextMenu extends Base {
     #private;
     constructor();
-    show(e: MouseEvent | TouchEvent): Promise<void>;
-    hide(): Promise<void>;
+    show(e: MouseEvent | TouchEvent): void;
+    hide(): void;
     mount(): void;
 }

package/dist/contextmenu/index.js

@@ -13,7 +13,7 @@ export class ContextMenu extends Base {
         this.getContent().style.left = `${value.x}px`;
         this.getContent().style.top = `${value.y}px`;
     }
-    async show(e) {
+    show(e) {
         // find coordinates of the click
         const scrollY = window.scrollY;
         const scrollX = window.scrollX;
@@ -36,7 +36,7 @@ export class ContextMenu extends Base {
         }
         this.#coordinates = { x, y };
     }
-    async hide() {
+    hide() {
         this.getContent().removeAttribute("data-open");
     }
     mount() {
@@ -57,9 +57,8 @@ export class ContextMenu extends Base {
         this.triggerListener(resetTimer, "touchcancel", { passive: true });
         // keyboard
         this.safeListener("keydown", (e) => {
-            if (e.key === "Escape") {
+            if (e.key === "Escape")
                 this.hide();
-            }
         });
     }
 }

package/dist/copy/index.d.ts

@@ -1,10 +1,30 @@
-import { BaseCopy, type BaseCopyAttributes } from "../base/copy/index.js";
-export type CopyAttributes = BaseCopyAttributes;
+import { Base, type BaseAttributes } from "../base/index.js";
+export type CopyAttributes = BaseAttributes & {
+    value: string;
+};
 /**
- * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
+ * Uses the
+ * [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
  * to copy text.
+ *
+ * ### Attributes
+ *
+ * `value`
+ *
+ * Text to copy.
  */
-export declare class Copy extends BaseCopy {
+export declare class Copy extends Base {
     constructor();
+    /**
+     * The value to copy.
+     *
+     * @default ""
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * @param value The `value` to copy
+     */
+    copy(value?: string): Promise<void>;
     mount(): void;
 }

package/dist/copy/index.js

@@ -1,13 +1,39 @@
-import { BaseCopy } from "../base/copy/index.js";
+import { Base } from "../base/index.js";
 /**
- * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
+ * Uses the
+ * [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)
  * to copy text.
+ *
+ * ### Attributes
+ *
+ * `value`
+ *
+ * Text to copy.
  */
-export class Copy extends BaseCopy {
+export class Copy extends Base {
     constructor() {
         super();
     }
+    /**
+     * The value to copy.
+     *
+     * @default ""
+     */
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    /**
+     * @param value The `value` to copy
+     */
+    copy(value = this.value) {
+        this.announce(`copied ${value} to clipboard`);
+        this.swapContent();
+        return navigator.clipboard.writeText(value);
+    }
     mount() {
-        this.triggerListener(async () => await this.copy());
+        this.triggerListener(() => this.copy());
     }
 }

package/dist/dialog/index.d.ts

@@ -11,6 +11,8 @@ export type DialogAttributes = BaseAttributes & {
  * By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
  * Add a `click-outside-close` attribute to close when the user clicks outside.
  *
+ * ### Attributes
+ *
  * `remove-body-scroll`
  *
  * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
@@ -22,10 +24,10 @@ export declare class Dialog extends Base {
     /** The `HTMLDialogElement` within the element. */
     get dialog(): HTMLDialogElement;
     /** `HTMLDialogElement.showModal()` with animation. */
-    show(): Promise<void>;
+    show(): void;
     /** `HTMLDialogElement.close()` with animation. */
-    close(): Promise<void>;
+    close(): void;
     /** `show` or `close` depending on the dialog's `open` attribute. */
-    toggle(): Promise<void>;
+    toggle(): void;
     mount(): void;
 }

package/dist/dialog/index.js

@@ -7,6 +7,8 @@ import { Base } from "../base/index.js";
  * By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
  * Add a `click-outside-close` attribute to close when the user clicks outside.
  *
+ * ### Attributes
+ *
  * `remove-body-scroll`
  *
  * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
@@ -35,17 +37,17 @@ export class Dialog extends Base {
         }
     }
     /** `HTMLDialogElement.showModal()` with animation. */
-    async show() {
+    show() {
         this.dialog.showModal();
         this.#toggleBodyScroll(true);
     }
     /** `HTMLDialogElement.close()` with animation. */
-    async close() {
+    close() {
         this.#toggleBodyScroll(false);
         this.dialog.close();
     }
     /** `show` or `close` depending on the dialog's `open` attribute. */
-    async toggle() {
+    toggle() {
         if (this.dialog.open)
             this.close();
         else

package/dist/editor/index.d.ts

@@ -19,6 +19,23 @@ export type ContentElement = {
 /**
  * Enhances the `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `text` value is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
  *
+ * - Automatically adds closing characters for `keyPairs`. For example, when
+ * typing `(`, `)` will be inserted and typed over when reached. All content
+ * with `data-type="wrap"` is also added to `keyPairs`.
+ * - Highlights the first word of the text inserted if it contains letters.
+ * - Automatically increments/decrements ordered lists.
+ * - Adds the starting character to the next line for `block` content.
+ * - On double click, highlight is corrected to only highlight the current word
+ * without space around it.
+ * - `tab` key will indent or dedent (+shift) instead of focus change if the
+ * selection is within a code block (three backticks).
+ * - When text is highlighted and a `wrap` character `keyPair` is typed, the
+ * highlighted text will be wrapped with the character instead of removing it.
+ * For example, if a word is highlighted and the `"` character is typed, the
+ * work will be surrounded by `"`s.
+ *
+ * ### Trigger attributes
+ *
  * `data-value`
  *
  * Set the value of the text to be inserted using the `data-value` attribute on the `trigger`.
@@ -35,15 +52,6 @@ export type ContentElement = {
  *
  * Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
  *
- * Other features:
- *
- * - Automatically adds closing characters for `keyPairs`. For example, when typing `(`, `)` will be inserted and typed over when reached. All content with `data-type="wrap"` is also added to `keyPairs`.
- * - Highlights the first word of the text inserted if it contains letters.
- * - Automatically increments/decrements ordered lists.
- * - Adds the starting character to the next line for `block` content.
- * - On double click, highlight is corrected to only highlight the current word without space around it.
- * - `tab` key will indent or dedent (+shift) instead of focus change if the selection is within a code block (three backticks).
- * - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
  */
 export declare class Editor extends Base {
     #private;

package/dist/editor/index.js

@@ -2,6 +2,23 @@ import { Base } from "../base/index.js";
 /**
  * Enhances the `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `text` value is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
  *
+ * - Automatically adds closing characters for `keyPairs`. For example, when
+ * typing `(`, `)` will be inserted and typed over when reached. All content
+ * with `data-type="wrap"` is also added to `keyPairs`.
+ * - Highlights the first word of the text inserted if it contains letters.
+ * - Automatically increments/decrements ordered lists.
+ * - Adds the starting character to the next line for `block` content.
+ * - On double click, highlight is corrected to only highlight the current word
+ * without space around it.
+ * - `tab` key will indent or dedent (+shift) instead of focus change if the
+ * selection is within a code block (three backticks).
+ * - When text is highlighted and a `wrap` character `keyPair` is typed, the
+ * highlighted text will be wrapped with the character instead of removing it.
+ * For example, if a word is highlighted and the `"` character is typed, the
+ * work will be surrounded by `"`s.
+ *
+ * ### Trigger attributes
+ *
  * `data-value`
  *
  * Set the value of the text to be inserted using the `data-value` attribute on the `trigger`.
@@ -18,15 +35,6 @@ import { Base } from "../base/index.js";
  *
  * Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
  *
- * Other features:
- *
- * - Automatically adds closing characters for `keyPairs`. For example, when typing `(`, `)` will be inserted and typed over when reached. All content with `data-type="wrap"` is also added to `keyPairs`.
- * - Highlights the first word of the text inserted if it contains letters.
- * - Automatically increments/decrements ordered lists.
- * - Adds the starting character to the next line for `block` content.
- * - On double click, highlight is corrected to only highlight the current word without space around it.
- * - `tab` key will indent or dedent (+shift) instead of focus change if the selection is within a code block (three backticks).
- * - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
  */
 export class Editor extends Base {
     /** Array of `keyPair` characters that have been opened. */

package/dist/index.d.ts

@@ -9,5 +9,6 @@ export * from "./intersect/index.js";
 export * from "./prefetch/index.js";
 export * from "./share/index.js";
 export * from "./tablesort/index.js";
+export * from "./tabs/index.js";
 export * from "./wakelock/index.js";
 export * from "./youtube/index.js";

package/dist/index.js

@@ -9,5 +9,6 @@ export * from "./intersect/index.js";
 export * from "./prefetch/index.js";
 export * from "./share/index.js";
 export * from "./tablesort/index.js";
+export * from "./tabs/index.js";
 export * from "./wakelock/index.js";
 export * from "./youtube/index.js";

package/dist/intersect/index.d.ts

@@ -8,6 +8,8 @@ type IntersectCallback = () => any;
  *
  * Use `onIntersect` and `onExit` to customize further with JavaScript.
  *
+ * ### Attributes
+ *
  * `threshold`
  *
  * Specify a `threshold` between `0` and `1` to determine how much of the `trigger` should be visible for the intersection to occur.

package/dist/intersect/index.js

@@ -4,6 +4,8 @@ import { Base } from "../base/index.js";
  *
  * Use `onIntersect` and `onExit` to customize further with JavaScript.
  *
+ * ### Attributes
+ *
  * `threshold`
  *
  * Specify a `threshold` between `0` and `1` to determine how much of the `trigger` should be visible for the intersection to occur.

package/dist/prefetch/index.d.ts

@@ -10,6 +10,8 @@ export type PrefetchAttributes = BaseAttributes & {
  *
  * If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router.
  *
+ * ### Attributes
+ *
  * `strategy`
  *
  * Set the `strategy` attribute to specify the when the prefetch will take place.

package/dist/prefetch/index.js

@@ -4,6 +4,8 @@ import { Base } from "../base/index.js";
  *
  * If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework's feature instead of this element to ensure prefetching is working in accordance with the router.
  *
+ * ### Attributes
+ *
  * `strategy`
  *
  * Set the `strategy` attribute to specify the when the prefetch will take place.
@@ -88,12 +90,12 @@ export class Prefetch extends Base {
      * @param options Prefetch options.
      */
     prefetch(options = {
-        anchors: this.getTrigger(),
+        anchors: this.getTrigger(HTMLAnchorElement),
         prerender: this.#prerender,
         strategy: this.#strategy,
     }) {
         // defaults if partially defined
-        const { anchors = this.getTrigger(), prerender = this.#prerender, strategy = this.#strategy, } = options;
+        const { anchors = this.getTrigger(HTMLAnchorElement), prerender = this.#prerender, strategy = this.#strategy, } = options;
         let prefetchTimer;
         /**
          * @param delay ms delay - for `hover`

package/dist/share/index.d.ts

@@ -1,15 +1,21 @@
-import { BaseCopy, type BaseCopyAttributes } from "../base/copy/index.js";
-export type ShareAttributes = BaseCopyAttributes;
+import { Copy, type CopyAttributes } from "../copy/index.js";
+export type ShareAttributes = CopyAttributes;
 /**
- * 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.
+ * 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.
+ *
+ * ### Attributes
+ *
+ * `value`
+ *
+ * Text to share.
  */
-export declare class Share extends BaseCopy {
+export declare class Share extends Copy {
     constructor();
     /**
      * Shares or copies the `value`.
      * @param url The `url` to share, defaults to `this.value`
-     * @returns An object containing a `result` - whether the `url` was copied or shared
-     * depending on browser support.
      */
     share(url?: string): Promise<void>;
     mount(): void;

package/dist/share/index.js

@@ -1,34 +1,33 @@
-import { BaseCopy } from "../base/copy/index.js";
+import { Copy } from "../copy/index.js";
 /**
- * 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.
+ * 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.
+ *
+ * ### Attributes
+ *
+ * `value`
+ *
+ * Text to share.
  */
-export class Share extends BaseCopy {
+export class Share extends Copy {
     constructor() {
         super();
     }
     /**
      * Shares or copies the `value`.
      * @param url The `url` to share, defaults to `this.value`
-     * @returns An object containing a `result` - whether the `url` was copied or shared
-     * depending on browser support.
      */
-    async share(url = this.value) {
+    share(url = this.value) {
         if (navigator.canShare && navigator.canShare({ url })) {
-            try {
-                await navigator.share({ url });
-            }
-            catch (error) {
-                if (error?.name !== "AbortError") {
-                    console.error(error);
-                }
-            }
+            return navigator.share({ url });
         }
         else {
             // progressively enhance, copy the link
-            this.copy();
+            return this.copy();
         }
     }
     mount() {
-        this.triggerListener(async () => await this.share());
+        this.triggerListener(() => this.share());
     }
 }

package/dist/tablesort/index.js

@@ -16,6 +16,9 @@ export class TableSort extends Base {
     constructor() {
         super();
     }
+    get #th() {
+        return this.getTrigger(HTMLTableCellElement);
+    }
     /**
      * Removes `data-asc` or `data-desc` from other triggers then sets the correct attribute on the selected trigger.
      *
@@ -25,7 +28,7 @@ export class TableSort extends Base {
     #setAttributes(trigger) {
         const asc = "data-asc";
         const desc = "data-desc";
-        for (const t of this.getTrigger()) {
+        for (const t of this.getTrigger(HTMLTableCellElement)) {
             if (t !== trigger) {
                 t.removeAttribute(asc);
                 t.removeAttribute(desc);
@@ -42,7 +45,7 @@ export class TableSort extends Base {
     }
     mount() {
         const tbody = this.getContent(HTMLTableSectionElement);
-        for (const trigger of this.getTrigger()) {
+        for (const trigger of this.#th) {
             trigger.tabIndex = 0;
             trigger.role = "button";
             const listener = () => {

package/dist/tabs/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tabs/define.js

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

package/dist/tabs/index.d.ts

@@ -0,0 +1,37 @@
+import { Base, type BaseAttributes } from "../base/index.js";
+export type TabAttributes = BaseAttributes & {
+    orientation?: "horizontal" | "vertical";
+};
+/**
+ * Progressively enhance a list of links and content to be tabs by
+ * wrapping with the `Tabs` element. Each `trigger` should be an
+ * `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
+ * > CSS to prevent layout shift when JS is loaded.
+ *
+ * This element is based on
+ * [Chris Ferdinandi's Toggle Tabs](https://gomakethings.com/a-web-component-ui-library-for-people-who-love-html/#toggle-tabs)
+ * design.
+ *
+ * [ARIA Reference](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+ *
+ * - Sets the correct ARIA attributes on each element.
+ * - Supports keyboard navigation based on the `orientation` attribute.
+ * - First tab is selected by default if no `aria-selected="true"` attribute is
+ * found on another tab.
+ * - `tablist` is calculated based on the deepest common parent of the tabs,
+ * throws an error if not found.
+ *
+ * ### Attributes
+ *
+ * `orientation`
+ *
+ * Set `orientation="vertical"` if the `tablist` element is displayed vertically.
+ */
+export declare class Tabs extends Base {
+    #private;
+    constructor();
+    mount(): void;
+}

package/dist/tabs/index.js

@@ -0,0 +1,147 @@
+import { Base } from "../base/index.js";
+/**
+ * Progressively enhance a list of links and content to be tabs by
+ * wrapping with the `Tabs` element. Each `trigger` should be an
+ * `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
+ * > CSS to prevent layout shift when JS is loaded.
+ *
+ * This element is based on
+ * [Chris Ferdinandi's Toggle Tabs](https://gomakethings.com/a-web-component-ui-library-for-people-who-love-html/#toggle-tabs)
+ * design.
+ *
+ * [ARIA Reference](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+ *
+ * - Sets the correct ARIA attributes on each element.
+ * - Supports keyboard navigation based on the `orientation` attribute.
+ * - First tab is selected by default if no `aria-selected="true"` attribute is
+ * found on another tab.
+ * - `tablist` is calculated based on the deepest common parent of the tabs,
+ * throws an error if not found.
+ *
+ * ### Attributes
+ *
+ * `orientation`
+ *
+ * Set `orientation="vertical"` if the `tablist` element is displayed vertically.
+ */
+export class Tabs extends Base {
+    /** Supported keys for keyboard navigation. */
+    #keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"];
+    /** Currently selected tab. */
+    #selected = { index: 0 };
+    constructor() {
+        super();
+    }
+    /** User provided orientation of the `tablist`. */
+    get #orientation() {
+        return this.getAttribute("orientation") ?? "horizontal";
+    }
+    get #tabs() {
+        return this.getTrigger(HTMLAnchorElement);
+    }
+    /**
+     * @param tab
+     * @returns The ancestors of the tab up to `this`.
+     */
+    #ancestors(tab) {
+        const ancestors = new Set();
+        let current = tab;
+        while ((current = current?.parentElement) && current !== this) {
+            ancestors.add(current);
+        }
+        return ancestors;
+    }
+    /** A map of each `tab` and its corresponding `panel`. */
+    get #map() {
+        const map = new Map();
+        for (const tab of this.#tabs) {
+            const panel = this.querySelector(tab.hash);
+            if (!(panel instanceof HTMLElement))
+                throw new Error(`Tabs: No HTMLElement with ID of ${tab.hash} found.`);
+            map.set(tab, panel);
+        }
+        return map;
+    }
+    mount() {
+        // create tablist
+        const [first, ...rest] = this.#tabs;
+        let common = this.#ancestors(first);
+        for (let i = 0; i < rest.length; i++) {
+            common = common.intersection(this.#ancestors(rest[i]));
+        }
+        const [tablist] = common;
+        if (!tablist)
+            throw new Error("Tabs: No common parent element found for triggers.");
+        tablist.role = "tablist";
+        tablist.ariaOrientation = this.#orientation;
+        // enhance tabs/panels
+        let index = 0;
+        for (const [tab, panel] of this.#map) {
+            tab.role = "tab";
+            tab.id = `tab-${panel.id}`;
+            tab.setAttribute("aria-controls", panel.id);
+            if (tab.ariaSelected)
+                this.#selected = { tab, index };
+            panel.role = "tabpanel";
+            panel.setAttribute("aria-labelledby", tab.id);
+            tab.addEventListener(this.event, (e) => {
+                e.preventDefault();
+                for (const [t, p] of this.#map) {
+                    if (t === tab) {
+                        // show current
+                        t.ariaSelected = "true";
+                        t.tabIndex = 0;
+                        p.hidden = false;
+                    }
+                    else {
+                        // hide others
+                        t.ariaSelected = "false";
+                        t.tabIndex = -1;
+                        p.hidden = true;
+                    }
+                }
+            });
+            index++;
+        }
+        // fallback to first
+        if (!this.#selected.tab)
+            this.#selected.tab = this.#tabs[0];
+        // select the current tab
+        this.#selected.tab?.click();
+        // handle keyboard navigation
+        this.addEventListener("keydown", (e) => {
+            const i = this.#keys.indexOf(e.key);
+            if (i === -1)
+                return;
+            const previousIndex = this.#selected.index;
+            const vertical = this.#orientation === "vertical";
+            if (((!vertical && i === 0) || (vertical && i === 1)) &&
+                this.#tabs[this.#selected.index + 1]) {
+                // next
+                this.#selected.tab = this.#tabs[++this.#selected.index];
+            }
+            else if (((!vertical && i === 2) || (vertical && i === 3)) &&
+                this.#tabs[this.#selected.index - 1]) {
+                // previous
+                this.#selected.tab = this.#tabs[--this.#selected.index];
+            }
+            else if (i === 4) {
+                // home
+                this.#selected = { tab: this.#tabs[0], index: 0 };
+            }
+            else if (i === 5) {
+                // end
+                const index = this.#tabs.length - 1;
+                this.#selected = { tab: this.#tabs[index], index };
+            }
+            if (this.#selected.index === previousIndex)
+                return;
+            e.preventDefault();
+            this.#selected.tab?.click();
+            this.#selected.tab?.focus();
+        });
+    }
+}

package/dist/wakelock/index.d.ts

@@ -4,19 +4,29 @@ export type WakeLockAttributes = BaseAttributes & {
     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.
+ * `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.
  *
- * - WakeLock can be toggled with a `trigger`, or will be requested if the element has a `locked` attribute when connected.
  * - Use `content` and `swap` elements to adjust the UI based on the current state.
  * - `request` and `release` methods are provided to set the WakeLock with JavaScript.
  * - `trigger` is disabled if not supported.
  * - WakeLock is released when the element is removed from the DOM.
  *
+ * ### Attributes
+ *
  * `auto-lock`
  *
- * - By default, the WakeLock will be released when the tab is not active. Use the `auto-lock` attribute to automatically request the WakeLock when the user views the tab again.
+ * By default, the WakeLock will be released when the tab is not active. Use the
+ * `auto-lock` attribute to automatically request the WakeLock when the user views
+ * the tab again.
  *
+ * `locked`
  *
+ * WakeLock can be toggled with a `trigger`, or will be requested if the element has
+ * a `locked` attribute when connected.
  */
 export declare class WakeLock extends Base {
     #private;

package/dist/wakelock/index.js

@@ -1,18 +1,28 @@
 import { Base } from "../base/index.js";
 /**
- * `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.
+ * `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.
  *
- * - WakeLock can be toggled with a `trigger`, or will be requested if the element has a `locked` attribute when connected.
  * - Use `content` and `swap` elements to adjust the UI based on the current state.
  * - `request` and `release` methods are provided to set the WakeLock with JavaScript.
  * - `trigger` is disabled if not supported.
  * - WakeLock is released when the element is removed from the DOM.
  *
+ * ### Attributes
+ *
  * `auto-lock`
  *
- * - By default, the WakeLock will be released when the tab is not active. Use the `auto-lock` attribute to automatically request the WakeLock when the user views the tab again.
+ * By default, the WakeLock will be released when the tab is not active. Use the
+ * `auto-lock` attribute to automatically request the WakeLock when the user views
+ * the tab again.
  *
+ * `locked`
  *
+ * WakeLock can be toggled with a `trigger`, or will be requested if the element has
+ * a `locked` attribute when connected.
  */
 export class WakeLock extends Base {
     wakeLock = null;

package/package.json

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

package/dist/base/copy/index.d.ts

@@ -1,19 +0,0 @@
-import { Base, type BaseAttributes } from "../index.js";
-export type BaseCopyAttributes = BaseAttributes & {
-    value: string;
-};
-export declare class BaseCopy extends Base {
-    constructor();
-    /**
-     * The value to copy or share.
-     *
-     * @default "" the empty string
-     */
-    get value(): string;
-    set value(value: string);
-    /**
-     * Copies the `text`.
-     * @param text The `text` to share
-     */
-    copy(text?: string): Promise<void>;
-}

package/dist/base/copy/index.js

@@ -1,26 +0,0 @@
-import { Base } from "../index.js";
-export class BaseCopy extends Base {
-    constructor() {
-        super();
-    }
-    /**
-     * The value to copy or share.
-     *
-     * @default "" the empty string
-     */
-    get value() {
-        return this.getAttribute("value") ?? "";
-    }
-    set value(value) {
-        this.setAttribute("value", value);
-    }
-    /**
-     * Copies the `text`.
-     * @param text The `text` to share
-     */
-    async copy(text = this.value) {
-        this.announce(`copied ${text} to clipboard`);
-        await navigator.clipboard.writeText(text);
-        this.swapContent();
-    }
-}