@lmfaole/basics 0.3.0 → 0.4.0

package/components/basic-toast/index.js

@@ -0,0 +1,429 @@
+const ElementBase = globalThis.Element ?? class {};
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const HTMLButtonElementBase = globalThis.HTMLButtonElement ?? class {};
+
+export const TOAST_TAG_NAME = "basic-toast";
+
+const DEFAULT_DURATION = 5000;
+const DEFAULT_LABEL = "Toast";
+const DEFAULT_LIVE = "polite";
+const PANEL_SELECTOR = "[data-toast-panel]";
+const TITLE_SELECTOR = "[data-toast-title]";
+const OPEN_SELECTOR = "[data-toast-open]";
+const CLOSE_SELECTOR = "[data-toast-close]";
+const MANAGED_LABEL_ATTRIBUTE = "data-basic-toast-managed-label";
+const MANAGED_LABELLEDBY_ATTRIBUTE = "data-basic-toast-managed-labelledby";
+const MANAGED_POPOVER_ATTRIBUTE = "data-basic-toast-managed-popover";
+
+let nextToastInstanceId = 1;
+
+function collectOwnedElements(root, scope, selector) {
+    return Array.from(scope.querySelectorAll(selector)).filter(
+        (element) => element instanceof HTMLElementBase && element.closest(TOAST_TAG_NAME) === root,
+    );
+}
+
+function supportsToastPopover(panel) {
+    return panel instanceof HTMLElementBase
+        && typeof panel.showPopover === "function"
+        && typeof panel.hidePopover === "function";
+}
+
+function isToastPanelOpen(panel) {
+    if (!(panel instanceof HTMLElementBase)) {
+        return false;
+    }
+
+    try {
+        return panel.matches(":popover-open");
+    } catch {
+        return panel.hasAttribute("data-open") || !panel.hidden;
+    }
+}
+
+export function normalizeToastLabel(value) {
+    return value?.trim() || DEFAULT_LABEL;
+}
+
+export function normalizeToastLive(value) {
+    const normalized = value?.trim().toLowerCase();
+    return normalized === "assertive" ? "assertive" : DEFAULT_LIVE;
+}
+
+export function getToastRoleForLive(value) {
+    return normalizeToastLive(value) === "assertive" ? "alert" : "status";
+}
+
+export function normalizeToastDuration(value) {
+    if (value == null || value.trim() === "") {
+        return DEFAULT_DURATION;
+    }
+
+    const parsed = Number.parseInt(value, 10);
+
+    if (Number.isInteger(parsed) && parsed >= 0) {
+        return parsed;
+    }
+
+    return DEFAULT_DURATION;
+}
+
+export function normalizeToastOpen(value) {
+    if (value == null) {
+        return false;
+    }
+
+    const normalized = value.trim().toLowerCase();
+    return normalized === "" || normalized === "true" || normalized === "1";
+}
+
+export class ToastElement extends HTMLElementBase {
+    static observedAttributes = ["data-duration", "data-label", "data-live", "data-open"];
+
+    #instanceId = `${TOAST_TAG_NAME}-${nextToastInstanceId++}`;
+    #panel = null;
+    #panelWithEvents = null;
+    #title = null;
+    #openButtons = [];
+    #closeButtons = [];
+    #restoreFocusTo = null;
+    #dismissTimer = 0;
+    #eventsBound = false;
+
+    connectedCallback() {
+        if (!this.#eventsBound) {
+            this.addEventListener("click", this.#handleClick);
+            this.addEventListener("keydown", this.#handleKeyDown);
+            this.#eventsBound = true;
+        }
+
+        this.#sync();
+    }
+
+    disconnectedCallback() {
+        if (!this.#eventsBound) {
+            return;
+        }
+
+        this.removeEventListener("click", this.#handleClick);
+        this.removeEventListener("keydown", this.#handleKeyDown);
+        this.#eventsBound = false;
+        this.#syncPanelEvents(null);
+        this.#clearDismissTimer();
+    }
+
+    attributeChangedCallback() {
+        this.#sync();
+    }
+
+    show(opener = null) {
+        this.#sync();
+
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            return false;
+        }
+
+        const fallbackOpener = opener instanceof HTMLElementBase
+            ? opener
+            : this.ownerDocument?.activeElement instanceof HTMLElementBase
+                ? this.ownerDocument.activeElement
+                : null;
+
+        this.#restoreFocusTo = fallbackOpener;
+        this.toggleAttribute("data-open", true);
+        this.#syncOpenState();
+        return true;
+    }
+
+    hide() {
+        if (!(this.#panel instanceof HTMLElementBase) || !this.#isOpen()) {
+            return false;
+        }
+
+        const shouldRestoreFocus = this.#panel.contains(this.ownerDocument?.activeElement);
+
+        this.toggleAttribute("data-open", false);
+        this.#syncOpenState();
+
+        if (
+            shouldRestoreFocus
+            && this.#restoreFocusTo instanceof HTMLElementBase
+            && this.#restoreFocusTo.isConnected
+        ) {
+            this.#restoreFocusTo.focus();
+        }
+
+        this.#restoreFocusTo = null;
+        return true;
+    }
+
+    toggle(opener = null) {
+        if (this.#isOpen()) {
+            return this.hide();
+        }
+
+        return this.show(opener);
+    }
+
+    #handleClick = (event) => {
+        if (!(event.target instanceof ElementBase)) {
+            return;
+        }
+
+        const openButton = event.target.closest(OPEN_SELECTOR);
+
+        if (
+            openButton instanceof HTMLElementBase
+            && openButton.closest(TOAST_TAG_NAME) === this
+        ) {
+            event.preventDefault();
+            this.toggle(openButton);
+            return;
+        }
+
+        const closeButton = event.target.closest(CLOSE_SELECTOR);
+
+        if (
+            closeButton instanceof HTMLElementBase
+            && closeButton.closest(TOAST_TAG_NAME) === this
+        ) {
+            event.preventDefault();
+            this.hide();
+        }
+    };
+
+    #handleKeyDown = (event) => {
+        if (
+            event.key !== "Escape"
+            || !(event.target instanceof ElementBase)
+            || event.target.closest(TOAST_TAG_NAME) !== this
+            || !(this.#panel instanceof HTMLElementBase)
+            || !this.#isOpen()
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+        this.hide();
+    };
+
+    #handlePanelToggle = () => {
+        this.#syncStateFromPanel();
+    };
+
+    #sync() {
+        const nextPanel = collectOwnedElements(this, this, PANEL_SELECTOR)[0] ?? null;
+        const nextTitle = collectOwnedElements(this, this, TITLE_SELECTOR)[0] ?? null;
+
+        this.#syncPanelEvents(nextPanel instanceof HTMLElementBase ? nextPanel : null);
+        this.#panel = nextPanel instanceof HTMLElementBase ? nextPanel : null;
+        this.#title = nextTitle instanceof HTMLElementBase ? nextTitle : null;
+        this.#openButtons = collectOwnedElements(this, this, OPEN_SELECTOR);
+        this.#closeButtons = collectOwnedElements(this, this, CLOSE_SELECTOR);
+        this.#applyState();
+    }
+
+    #syncPanelEvents(nextPanel) {
+        if (this.#panelWithEvents === nextPanel) {
+            return;
+        }
+
+        if (this.#panelWithEvents instanceof HTMLElementBase) {
+            this.#panelWithEvents.removeEventListener("toggle", this.#handlePanelToggle);
+        }
+
+        if (nextPanel instanceof HTMLElementBase) {
+            nextPanel.addEventListener("toggle", this.#handlePanelToggle);
+        }
+
+        this.#panelWithEvents = nextPanel;
+    }
+
+    #shouldBeOpen() {
+        return normalizeToastOpen(this.getAttribute("data-open"));
+    }
+
+    #isOpen() {
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            return false;
+        }
+
+        if (supportsToastPopover(this.#panel)) {
+            return isToastPanelOpen(this.#panel);
+        }
+
+        return !this.#panel.hidden;
+    }
+
+    #applyState() {
+        for (const button of [...this.#openButtons, ...this.#closeButtons]) {
+            if (button instanceof HTMLButtonElementBase && !button.hasAttribute("type")) {
+                button.type = "button";
+            }
+        }
+
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            this.#clearDismissTimer();
+            return;
+        }
+
+        const baseId = this.id || this.#instanceId;
+
+        if (this.#title instanceof HTMLElementBase && !this.#title.id) {
+            this.#title.id = `${baseId}-title`;
+        }
+
+        this.#panel.setAttribute("role", getToastRoleForLive(this.getAttribute("data-live")));
+        this.#panel.setAttribute("aria-live", normalizeToastLive(this.getAttribute("data-live")));
+        this.#panel.setAttribute("aria-atomic", "true");
+        this.#syncAccessibleLabel();
+        this.#syncPopoverState();
+        this.#syncOpenState();
+    }
+
+    #scheduleDismiss() {
+        this.#clearDismissTimer();
+
+        if (typeof window === "undefined") {
+            return;
+        }
+
+        const duration = normalizeToastDuration(this.getAttribute("data-duration"));
+
+        if (duration === 0) {
+            return;
+        }
+
+        this.#dismissTimer = window.setTimeout(() => {
+            this.#dismissTimer = 0;
+            this.hide();
+        }, duration);
+    }
+
+    #clearDismissTimer() {
+        if (this.#dismissTimer === 0 || typeof window === "undefined") {
+            return;
+        }
+
+        window.clearTimeout(this.#dismissTimer);
+        this.#dismissTimer = 0;
+    }
+
+    #syncPopoverState() {
+        if (!(this.#panel instanceof HTMLElementBase) || !supportsToastPopover(this.#panel)) {
+            return;
+        }
+
+        if (!this.#panel.hasAttribute("popover")) {
+            this.#panel.setAttribute("popover", "manual");
+            this.#panel.setAttribute(MANAGED_POPOVER_ATTRIBUTE, "");
+        }
+    }
+
+    #syncOpenState() {
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            this.#clearDismissTimer();
+            return;
+        }
+
+        const open = this.#shouldBeOpen();
+
+        if (supportsToastPopover(this.#panel)) {
+            this.#panel.hidden = false;
+
+            try {
+                if (open && !isToastPanelOpen(this.#panel)) {
+                    this.#panel.showPopover();
+                } else if (!open && isToastPanelOpen(this.#panel)) {
+                    this.#panel.hidePopover();
+                }
+            } catch {
+                this.#panel.hidden = !open;
+            }
+        } else {
+            this.#panel.hidden = !open;
+        }
+
+        this.#syncStateFromPanel();
+    }
+
+    #syncStateFromPanel() {
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            this.#clearDismissTimer();
+            return;
+        }
+
+        const open = supportsToastPopover(this.#panel)
+            ? isToastPanelOpen(this.#panel)
+            : !this.#panel.hidden;
+
+        this.#panel.hidden = !open;
+        this.#panel.toggleAttribute("data-open", open);
+        this.toggleAttribute("data-open", open);
+
+        if (open) {
+            this.#scheduleDismiss();
+        } else {
+            this.#clearDismissTimer();
+        }
+    }
+
+    #syncAccessibleLabel() {
+        if (!(this.#panel instanceof HTMLElementBase)) {
+            return;
+        }
+
+        const nextLabel = normalizeToastLabel(this.getAttribute("data-label"));
+        const hasManagedLabelledBy = this.#panel.hasAttribute(MANAGED_LABELLEDBY_ATTRIBUTE);
+
+        if (
+            this.#panel.hasAttribute(MANAGED_LABEL_ATTRIBUTE)
+            && this.#panel.getAttribute("aria-label") !== nextLabel
+        ) {
+            this.#panel.removeAttribute("aria-label");
+            this.#panel.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+        }
+
+        if (this.#title?.id) {
+            if (this.#panel.hasAttribute(MANAGED_LABEL_ATTRIBUTE)) {
+                this.#panel.removeAttribute("aria-label");
+                this.#panel.removeAttribute(MANAGED_LABEL_ATTRIBUTE);
+            }
+
+            if (!this.#panel.hasAttribute("aria-labelledby") || hasManagedLabelledBy) {
+                this.#panel.setAttribute("aria-labelledby", this.#title.id);
+                this.#panel.setAttribute(MANAGED_LABELLEDBY_ATTRIBUTE, "");
+            }
+
+            return;
+        }
+
+        if (hasManagedLabelledBy) {
+            this.#panel.removeAttribute("aria-labelledby");
+            this.#panel.removeAttribute(MANAGED_LABELLEDBY_ATTRIBUTE);
+        }
+
+        const hasOwnAriaLabel = this.#panel.hasAttribute("aria-label")
+            && !this.#panel.hasAttribute(MANAGED_LABEL_ATTRIBUTE);
+        const hasOwnLabelledBy = this.#panel.hasAttribute("aria-labelledby");
+
+        if (hasOwnAriaLabel || hasOwnLabelledBy) {
+            return;
+        }
+
+        this.#panel.setAttribute("aria-label", nextLabel);
+        this.#panel.setAttribute(MANAGED_LABEL_ATTRIBUTE, "");
+    }
+}
+
+export function defineToast(registry = globalThis.customElements) {
+    if (!registry?.get || !registry?.define) {
+        return ToastElement;
+    }
+
+    if (!registry.get(TOAST_TAG_NAME)) {
+        registry.define(TOAST_TAG_NAME, ToastElement);
+    }
+
+    return ToastElement;
+}

package/components/basic-toast/register.d.ts

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

package/components/basic-toast/register.js

@@ -0,0 +1,3 @@
+import { defineToast } from "./index.js";
+
+defineToast();

package/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/basic-alert";
 export * from "./components/basic-accordion";
 export * from "./components/basic-dialog";
 export * from "./components/basic-popover";
@@ -5,3 +6,4 @@ export * from "./components/basic-summary-table";
 export * from "./components/basic-table";
 export * from "./components/basic-toc";
 export * from "./components/basic-tabs";
+export * from "./components/basic-toast";

package/index.js

@@ -1,3 +1,4 @@
+export * from "./components/basic-alert/index.js";
 export * from "./components/basic-accordion/index.js";
 export * from "./components/basic-dialog/index.js";
 export * from "./components/basic-popover/index.js";
@@ -5,3 +6,4 @@ export * from "./components/basic-summary-table/index.js";
 export * from "./components/basic-table/index.js";
 export * from "./components/basic-toc/index.js";
 export * from "./components/basic-tabs/index.js";
+export * from "./components/basic-toast/index.js";

package/package.json

@@ -1,92 +1,57 @@
 {
   "name": "@lmfaole/basics",
-  "version": "0.3.0",
-  "description": "Simple unstyled custom elements and DOM helpers.",
+  "version": "0.4.0",
+  "description": "Simple custom elements and DOM helpers with optional starter styles.",
   "type": "module",
   "sideEffects": [
+    "./basic-styling/**/*.css",
+    "./components/basic-alert/register.js",
     "./components/basic-accordion/register.js",
     "./components/basic-dialog/register.js",
     "./components/basic-popover/register.js",
     "./components/basic-summary-table/register.js",
     "./components/basic-table/register.js",
     "./components/basic-toc/register.js",
-    "./components/basic-tabs/register.js"
+    "./components/basic-tabs/register.js",
+    "./components/basic-toast/register.js"
   ],
   "exports": {
     ".": {
       "types": "./index.d.ts",
       "import": "./index.js"
     },
-    "./components/basic-accordion": {
-      "types": "./components/basic-accordion/index.d.ts",
-      "import": "./components/basic-accordion/index.js"
+    "./basic-styling": "./basic-styling/index.css",
+    "./basic-styling/*.css": "./basic-styling/*.css",
+    "./basic-styling/components/*.css": "./basic-styling/components/*.css",
+    "./basic-styling/tokens/*.css": "./basic-styling/tokens/*.css",
+    "./basic-styling/tokens/*.json": "./basic-styling/tokens/*.json",
+    "./components/*/register": {
+      "types": "./components/*/register.d.ts",
+      "import": "./components/*/register.js"
     },
-    "./components/basic-accordion/register": {
-      "types": "./components/basic-accordion/register.d.ts",
-      "import": "./components/basic-accordion/register.js"
-    },
-    "./components/basic-dialog": {
-      "types": "./components/basic-dialog/index.d.ts",
-      "import": "./components/basic-dialog/index.js"
-    },
-    "./components/basic-dialog/register": {
-      "types": "./components/basic-dialog/register.d.ts",
-      "import": "./components/basic-dialog/register.js"
-    },
-    "./components/basic-popover": {
-      "types": "./components/basic-popover/index.d.ts",
-      "import": "./components/basic-popover/index.js"
-    },
-    "./components/basic-popover/register": {
-      "types": "./components/basic-popover/register.d.ts",
-      "import": "./components/basic-popover/register.js"
-    },
-    "./components/basic-summary-table": {
-      "types": "./components/basic-summary-table/index.d.ts",
-      "import": "./components/basic-summary-table/index.js"
-    },
-    "./components/basic-summary-table/register": {
-      "types": "./components/basic-summary-table/register.d.ts",
-      "import": "./components/basic-summary-table/register.js"
-    },
-    "./components/basic-table": {
-      "types": "./components/basic-table/index.d.ts",
-      "import": "./components/basic-table/index.js"
-    },
-    "./components/basic-table/register": {
-      "types": "./components/basic-table/register.d.ts",
-      "import": "./components/basic-table/register.js"
-    },
-    "./components/basic-toc": {
-      "types": "./components/basic-toc/index.d.ts",
-      "import": "./components/basic-toc/index.js"
-    },
-    "./components/basic-toc/register": {
-      "types": "./components/basic-toc/register.d.ts",
-      "import": "./components/basic-toc/register.js"
-    },
-    "./components/basic-tabs": {
-      "types": "./components/basic-tabs/index.d.ts",
-      "import": "./components/basic-tabs/index.js"
-    },
-    "./components/basic-tabs/register": {
-      "types": "./components/basic-tabs/register.d.ts",
-      "import": "./components/basic-tabs/register.js"
+    "./components/*": {
+      "types": "./components/*/index.d.ts",
+      "import": "./components/*/index.js"
     }
   },
   "files": [
     "README.md",
     "index.js",
     "index.d.ts",
+    "basic-styling/**/*.css",
+    "basic-styling/**/*.json",
     "components/*/index.js",
     "components/*/index.d.ts",
     "components/*/register.js",
     "components/*/register.d.ts"
   ],
   "keywords": [
+    "alert",
     "accordion",
     "custom-element",
     "dialog",
+    "toast",
+    "notification",
     "basic-summary-table",
     "basic-tabs",
     "basic-table",