drab 6.2.2 → 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

@@ -41,24 +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() {
-        return this.querySelectorAll(this.getAttribute("trigger") ?? "[data-trigger]");
+    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
@@ -129,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/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

@@ -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,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 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.2",
+	"version": "6.3.0",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {