drab 6.2.2 → 6.4.0

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,35 +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)
+            validate(trigger, instance);
+        return triggers;
     }
     /**
-     * @returns All of the elements that match the `trigger` selector.
-     * @default this.querySelectorAll("[data-trigger]")
+     * @param listener Listener to attach to all of the `trigger` elements.
      */
-    getTrigger() {
-        return this.querySelectorAll(this.getAttribute("trigger") ?? "[data-trigger]");
+    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);
     }
-    /**
-     * @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 validate(this.querySelector(this.getAttribute("content") ?? "[data-content]"), instance);
     }
     /**
      * Finds the `HTMLElement | HTMLTemplateElement` via the `swap` selector and
@@ -98,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. */
@@ -129,4 +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 message message to announce to screen readers
+     */
+    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.d.ts

@@ -3,8 +3,15 @@ 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 Base {
     constructor();

package/dist/copy/index.js

@@ -1,7 +1,14 @@
 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 Base {
     constructor() {

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

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

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

@@ -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";
@@ -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

@@ -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";
@@ -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,8 +1,15 @@
 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)
+ * 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 Copy {
     constructor();

package/dist/share/index.js

@@ -1,7 +1,14 @@
 import { Copy } from "../copy/index.js";
 /**
- * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
+ * 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 Copy {
     constructor() {

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 `panel`s 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 `panel`s 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/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;
+};