@incursa/ui-kit 1.0.1 → 1.2.0

package/dist/web-components/controllers/focus.js

@@ -0,0 +1,101 @@
+const FOCUSABLE_SELECTOR = [
+    'a[href]:not([tabindex="-1"])',
+    'button:not([disabled]):not([tabindex="-1"])',
+    'input:not([disabled]):not([type="hidden"]):not([tabindex="-1"])',
+    'select:not([disabled]):not([tabindex="-1"])',
+    'textarea:not([disabled]):not([tabindex="-1"])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(", ");
+
+function getFocusableElements(root) {
+    if (!(root instanceof Element || root instanceof Document || root instanceof ShadowRoot)) {
+        return [];
+    }
+
+    return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR))
+        .filter((element) => element instanceof HTMLElement)
+        .filter((element) => !element.hasAttribute("inert"))
+        .filter((element) => element.offsetParent !== null || element === document.activeElement);
+}
+
+function getFirstFocusable(root) {
+    return getFocusableElements(root)[0] ?? null;
+}
+
+function getLastFocusable(root) {
+    const items = getFocusableElements(root);
+    return items.length ? items[items.length - 1] : null;
+}
+
+function focusFirst(root) {
+    const first = getFirstFocusable(root);
+    first?.focus();
+    return first;
+}
+
+function focusLast(root) {
+    const last = getLastFocusable(root);
+    last?.focus();
+    return last;
+}
+
+function trapTabKey(event, root) {
+    if (!(event instanceof KeyboardEvent) || event.key !== "Tab") {
+        return false;
+    }
+
+    const items = getFocusableElements(root);
+    if (!items.length) {
+        return false;
+    }
+
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+
+    if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+        return true;
+    }
+
+    if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+        return true;
+    }
+
+    return false;
+}
+
+function createFocusRestorer(fallback = null) {
+    const source = document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : (fallback instanceof HTMLElement ? fallback : null);
+
+    return () => {
+        if (source && source.isConnected) {
+            source.focus();
+            return source;
+        }
+
+        if (fallback instanceof HTMLElement && fallback.isConnected) {
+            fallback.focus();
+            return fallback;
+        }
+
+        return null;
+    };
+}
+
+export {
+    FOCUSABLE_SELECTOR,
+    createFocusRestorer,
+    focusFirst,
+    focusLast,
+    getFirstFocusable,
+    getFocusableElements,
+    getLastFocusable,
+    trapTabKey,
+};

package/dist/web-components/controllers/overlay.js

@@ -0,0 +1,128 @@
+import { createFocusRestorer, focusFirst, trapTabKey } from "./focus.js";
+
+function setOpenState(host, isOpen) {
+    host.toggleAttribute("open", Boolean(isOpen));
+    host.setAttribute("aria-hidden", isOpen ? "false" : "true");
+}
+
+function createOverlayController(host, options = {}) {
+    if (!(host instanceof HTMLElement)) {
+        throw new TypeError("Overlay controller host must be an HTMLElement.");
+    }
+
+    const panel = typeof options.getPanel === "function"
+        ? options.getPanel
+        : () => host;
+    const closeOnEscape = options.closeOnEscape !== false;
+    const trapFocus = options.trapFocus !== false;
+    let restoreFocus = null;
+    let isOpen = host.hasAttribute("open");
+
+    const onKeydown = (event) => {
+        if (!(event instanceof KeyboardEvent) || !isOpen) {
+            return;
+        }
+
+        if (closeOnEscape && event.key === "Escape") {
+            event.preventDefault();
+            api.close("escape");
+            return;
+        }
+
+        if (trapFocus) {
+            trapTabKey(event, panel());
+        }
+    };
+
+    const onPointerDown = (event) => {
+        if (!isOpen || options.closeOnOutsidePointerDown !== true) {
+            return;
+        }
+
+        const currentPanel = panel();
+        if (!(currentPanel instanceof HTMLElement)) {
+            return;
+        }
+
+        if (!currentPanel.contains(event.target)) {
+            api.close("outside-pointer");
+        }
+    };
+
+    function bind() {
+        document.addEventListener("keydown", onKeydown);
+        document.addEventListener("pointerdown", onPointerDown);
+    }
+
+    function unbind() {
+        document.removeEventListener("keydown", onKeydown);
+        document.removeEventListener("pointerdown", onPointerDown);
+    }
+
+    const api = {
+        get isOpen() {
+            return isOpen;
+        },
+        open(origin = "api") {
+            if (isOpen) {
+                return false;
+            }
+
+            isOpen = true;
+            restoreFocus = createFocusRestorer(options.fallbackFocus || null);
+            setOpenState(host, true);
+            bind();
+
+            if (typeof options.onOpen === "function") {
+                options.onOpen({ origin, host, panel: panel() });
+            }
+
+            if (options.focusFirst !== false) {
+                focusFirst(panel());
+            }
+
+            return true;
+        },
+        close(reason = "api") {
+            if (!isOpen) {
+                return false;
+            }
+
+            isOpen = false;
+            setOpenState(host, false);
+            unbind();
+
+            if (typeof options.onClose === "function") {
+                options.onClose({ reason, host, panel: panel() });
+            }
+
+            if (options.restoreFocus !== false) {
+                restoreFocus?.();
+            }
+
+            restoreFocus = null;
+            return true;
+        },
+        toggle(origin = "api") {
+            if (isOpen) {
+                this.close(origin);
+                return false;
+            }
+
+            this.open(origin);
+            return true;
+        },
+        dispose() {
+            unbind();
+            restoreFocus = null;
+        },
+    };
+
+    setOpenState(host, isOpen);
+    return api;
+}
+
+export {
+    createOverlayController,
+    setOpenState,
+};

package/dist/web-components/controllers/selection.js

@@ -0,0 +1,145 @@
+function clampIndex(value, length) {
+    if (!length) {
+        return -1;
+    }
+
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+
+    if (value < 0) {
+        return 0;
+    }
+
+    if (value >= length) {
+        return length - 1;
+    }
+
+    return value;
+}
+
+function resolveNextIndex(currentIndex, key, length, orientation = "horizontal") {
+    const horizontal = orientation === "horizontal";
+    const vertical = orientation === "vertical";
+
+    if (!length) {
+        return -1;
+    }
+
+    if (key === "Home") {
+        return 0;
+    }
+
+    if (key === "End") {
+        return length - 1;
+    }
+
+    if ((horizontal && key === "ArrowRight") || (vertical && key === "ArrowDown")) {
+        return (currentIndex + 1 + length) % length;
+    }
+
+    if ((horizontal && key === "ArrowLeft") || (vertical && key === "ArrowUp")) {
+        return (currentIndex - 1 + length) % length;
+    }
+
+    return currentIndex;
+}
+
+function updateRovingTabIndex(items, activeIndex) {
+    items.forEach((item, index) => {
+        if (!(item instanceof HTMLElement)) {
+            return;
+        }
+
+        item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+}
+
+function createRovingSelection(options) {
+    const getItems = typeof options.getItems === "function"
+        ? options.getItems
+        : () => [];
+    const onChange = typeof options.onChange === "function"
+        ? options.onChange
+        : () => {};
+    const orientation = options.orientation || "horizontal";
+    const activation = options.activation || "auto";
+    let selectedIndex = Number.isFinite(options.initialIndex) ? options.initialIndex : 0;
+
+    function getNormalizedItems() {
+        return getItems().filter((item) => item instanceof HTMLElement);
+    }
+
+    function setSelectedIndex(nextIndex, origin = "api") {
+        const items = getNormalizedItems();
+        if (!items.length) {
+            selectedIndex = -1;
+            return -1;
+        }
+
+        selectedIndex = clampIndex(nextIndex, items.length);
+        updateRovingTabIndex(items, selectedIndex);
+        onChange({
+            index: selectedIndex,
+            item: items[selectedIndex],
+            items,
+            origin,
+        });
+        return selectedIndex;
+    }
+
+    function moveByKey(key, event = null) {
+        const items = getNormalizedItems();
+        if (!items.length) {
+            return -1;
+        }
+
+        const normalizedCurrent = clampIndex(selectedIndex, items.length);
+        const nextIndex = resolveNextIndex(normalizedCurrent, key, items.length, orientation);
+        if (nextIndex === normalizedCurrent) {
+            return normalizedCurrent;
+        }
+
+        if (event instanceof KeyboardEvent) {
+            event.preventDefault();
+        }
+
+        setSelectedIndex(nextIndex, "keyboard");
+        items[nextIndex]?.focus();
+
+        if (activation === "manual") {
+            return nextIndex;
+        }
+
+        return nextIndex;
+    }
+
+    function sync() {
+        const items = getNormalizedItems();
+        if (!items.length) {
+            selectedIndex = -1;
+            return -1;
+        }
+
+        return setSelectedIndex(clampIndex(selectedIndex, items.length), "sync");
+    }
+
+    return {
+        get index() {
+            return selectedIndex;
+        },
+        get items() {
+            return getNormalizedItems();
+        },
+        setSelectedIndex,
+        moveByKey,
+        sync,
+    };
+}
+
+export {
+    clampIndex,
+    createRovingSelection,
+    resolveNextIndex,
+    updateRovingTabIndex,
+};

package/dist/web-components/controllers/theme.js

@@ -0,0 +1,173 @@
+import { dispatchComponentEvent } from "../shared.js";
+
+const DEFAULT_STORAGE_KEY = "inc-theme-mode";
+const THEME_MODES = ["light", "dark", "system"];
+
+function isThemeMode(value) {
+    return THEME_MODES.includes(value);
+}
+
+function resolveSystemTheme() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return "light";
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolveThemeMode(mode) {
+    return mode === "system" ? resolveSystemTheme() : mode;
+}
+
+function getThemeRoot() {
+    return typeof document !== "undefined" ? document.documentElement : null;
+}
+
+function getStoredThemeMode(storageKey = DEFAULT_STORAGE_KEY) {
+    try {
+        const value = window.localStorage.getItem(storageKey);
+        return isThemeMode(value) ? value : null;
+    } catch {
+        return null;
+    }
+}
+
+function persistThemeMode(mode, storageKey = DEFAULT_STORAGE_KEY) {
+    try {
+        if (mode === "system") {
+            window.localStorage.removeItem(storageKey);
+            return;
+        }
+
+        window.localStorage.setItem(storageKey, mode);
+    } catch {
+        // Ignore storage restrictions.
+    }
+}
+
+function applyRootTheme(mode, options = {}) {
+    const root = getThemeRoot();
+    if (!(root instanceof HTMLElement)) {
+        return { mode: "system", resolved: "light" };
+    }
+
+    const nextMode = isThemeMode(mode) ? mode : "system";
+    const resolved = resolveThemeMode(nextMode);
+    root.setAttribute("data-inc-theme-mode", nextMode);
+    root.setAttribute("data-bs-theme", resolved);
+    root.style.colorScheme = resolved;
+    root.dataset.incThemeModeState = nextMode;
+    root.dataset.incThemeResolved = resolved;
+
+    if (options.persist !== false) {
+        persistThemeMode(nextMode, options.storageKey);
+    }
+
+    if (options.dispatch !== false) {
+        dispatchComponentEvent(root, "inc-theme-change", {
+            mode: nextMode,
+            resolved,
+        });
+    }
+
+    return { mode: nextMode, resolved };
+}
+
+function getRootThemeState() {
+    const root = getThemeRoot();
+    if (!(root instanceof HTMLElement)) {
+        return { mode: "system", resolved: "light" };
+    }
+
+    const configuredMode = root.getAttribute("data-inc-theme-mode")
+        || root.dataset.incThemeMode
+        || getStoredThemeMode()
+        || "system";
+    const mode = isThemeMode(configuredMode) ? configuredMode : "system";
+
+    return {
+        mode,
+        resolved: resolveThemeMode(mode),
+    };
+}
+
+function getLegacyThemeBridge() {
+    if (typeof window === "undefined") {
+        return null;
+    }
+
+    const legacy = window.IncTheme;
+    if (!legacy || typeof legacy !== "object") {
+        return null;
+    }
+
+    if (typeof legacy.setMode !== "function" || typeof legacy.cycleMode !== "function") {
+        return null;
+    }
+
+    return legacy;
+}
+
+function createThemeController(options = {}) {
+    const storageKey = options.storageKey || DEFAULT_STORAGE_KEY;
+    const preferLegacyBridge = options.preferLegacyBridge !== false;
+    let state = getRootThemeState();
+
+    function apply(mode, applyOptions = {}) {
+        const legacy = preferLegacyBridge ? getLegacyThemeBridge() : null;
+        if (legacy && applyOptions.useLegacyBridge !== false) {
+            legacy.setMode(mode);
+            state = {
+                mode: legacy.getMode(),
+                resolved: legacy.getResolvedTheme(),
+            };
+            return state;
+        }
+
+        state = applyRootTheme(mode, {
+            storageKey,
+            persist: applyOptions.persist,
+            dispatch: applyOptions.dispatch,
+        });
+        return state;
+    }
+
+    return {
+        getMode() {
+            return state.mode;
+        },
+        getResolvedTheme() {
+            return state.resolved;
+        },
+        initialize() {
+            const initialMode = getStoredThemeMode(storageKey)
+                || getThemeRoot()?.getAttribute("data-inc-theme-mode")
+                || "system";
+            return apply(initialMode, { persist: false });
+        },
+        setMode(mode) {
+            return apply(mode);
+        },
+        cycleMode() {
+            const index = THEME_MODES.indexOf(state.mode);
+            const nextMode = THEME_MODES[(index + 1) % THEME_MODES.length];
+            return apply(nextMode);
+        },
+        syncFromRoot() {
+            state = getRootThemeState();
+            return state;
+        },
+    };
+}
+
+export {
+    DEFAULT_STORAGE_KEY,
+    THEME_MODES,
+    applyRootTheme,
+    createThemeController,
+    getRootThemeState,
+    getStoredThemeMode,
+    isThemeMode,
+    resolveSystemTheme,
+    resolveThemeMode,
+};