@sekiui/elements 0.1.5 → 0.1.6

package/dist/cdn/p-CaV98uQZ.js

@@ -1,429 +0,0 @@
-import { g as getDeepActiveElement$1 } from './p-DI1tqzsG.js';
-
-/**
- * Focus trap utility for dialog and modal components.
- *
- * These helpers walk the *composed* (flattened) tree rather than a single
- * shadow root. Dialog content is projected through a `<slot>`, so the actual
- * focusable elements live in the host's light DOM — and custom elements like
- * `seki-button` keep their focusable `<button>` inside their own shadow root.
- * A plain `container.querySelectorAll()` never sees either, which is why the
- * trap previously matched nothing.
- */
-const FOCUSABLE_SELECTOR = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])',
-    'audio[controls]',
-    'video[controls]',
-    '[contenteditable]:not([contenteditable="false"])',
-].join(', ');
-function isFocusableCandidate(el) {
-    return el instanceof HTMLElement && el.matches(FOCUSABLE_SELECTOR);
-}
-function isHidden(el) {
-    return (el.hidden === true ||
-        el.getAttribute('aria-hidden') === 'true');
-}
-/**
- * Recursively collect focusable elements in composed-tree (DOM) order,
- * descending through shadow roots and resolving `<slot>` assignments.
- */
-function collectFocusable(node, out) {
-    // Resolve slots to their assigned (projected) elements.
-    if (node.tagName === 'SLOT') {
-        const assigned = node.assignedElements({ flatten: true });
-        for (const el of assigned) {
-            collectFocusable(el, out);
-        }
-        return;
-    }
-    // Skip hidden subtrees entirely.
-    if (isHidden(node))
-        return;
-    if (isFocusableCandidate(node)) {
-        out.push(node);
-    }
-    // When an element hosts a shadow root, its rendered subtree is the shadow
-    // tree (light children only surface via slots inside it). Otherwise walk
-    // the light children directly.
-    const children = node.shadowRoot
-        ? Array.from(node.shadowRoot.children)
-        : Array.from(node.children);
-    for (const child of children) {
-        collectFocusable(child, out);
-    }
-}
-/**
- * Get all focusable elements within a container, crossing shadow-DOM and slot
- * boundaries so projected content and nested web components are included.
- */
-function getFocusableElements(container) {
-    var _a;
-    const out = [];
-    const root = (_a = container.shadowRoot) !== null && _a !== void 0 ? _a : container;
-    for (const child of Array.from(root.children)) {
-        collectFocusable(child, out);
-    }
-    return out;
-}
-/**
- * Resolve the deepest active element, descending into nested shadow roots.
- * `document.activeElement` only reports the outermost shadow host.
- */
-function getDeepActiveElement() {
-    var _a;
-    let active = document.activeElement;
-    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
-        active = active.shadowRoot.activeElement;
-    }
-    return active;
-}
-/**
- * Focus the first focusable element in a container.
- */
-function focusFirst(container) {
-    const focusables = getFocusableElements(container);
-    if (focusables.length > 0) {
-        focusables[0].focus();
-    }
-}
-/**
- * Trap focus within a container during Tab key navigation.
- */
-function trapFocus(container, event) {
-    if (event.key !== 'Tab')
-        return;
-    const focusables = getFocusableElements(container);
-    if (focusables.length === 0) {
-        // Nothing focusable inside — keep focus from escaping the modal.
-        event.preventDefault();
-        return;
-    }
-    const first = focusables[0];
-    const last = focusables[focusables.length - 1];
-    const active = getDeepActiveElement();
-    // `contains()` does not cross shadow boundaries, so detect "escaped" focus by
-    // membership in the composed focusables list instead.
-    const isInside = active !== null && focusables.indexOf(active) !== -1;
-    if (event.shiftKey) {
-        if (active === first || !isInside) {
-            event.preventDefault();
-            last.focus();
-        }
-    }
-    else {
-        if (active === last || !isInside) {
-            event.preventDefault();
-            first.focus();
-        }
-    }
-}
-
-/**
- * Overlay layer stack, modal focus handling and body scroll lock, shared by
- * every component that floats above the page and closes on Escape.
- *
- * ## Why this exists (#332)
- *
- * Each overlay used to listen for Escape on `window` by itself. All of those
- * listeners run for the same key press, so a popover inside a dialog closed
- * together with the dialog, and `stopPropagation()` in one handler did not stop
- * the others. Sheet and drawer also rendered `aria-modal="true"` without any
- * of the modal behaviour dialog had (focus moved in, Tab trapped, focus
- * restored, page scroll locked).
- *
- * ## Model (matches Radix DismissableLayer / FocusScope)
- *
- * - Every open overlay is an {@link OverlayLayer} on one document-wide stack,
- *   in the order the layers opened.
- * - One pair of `window` keydown listeners handles Escape: the layer that was
- *   on top when the key went down gets the key, nothing below it does. If an
- *   element-level handler inside that layer already closed it (a combobox input
- *   closing its list, a submenu calling `stopPropagation()`), the key is spent
- *   and no other layer closes.
- * - The topmost *modal* layer traps Tab inside its container. Modal layers
- *   also move focus in when they open, return it to the element that had it
- *   when they close, and lock body scroll. The lock is reference-counted, so a
- *   dialog closing inside an open sheet leaves the page locked.
- */
-// ---------------------------------------------------------------------------
-// Body scroll lock (reference-counted so stacked modals don't unlock early).
-// ---------------------------------------------------------------------------
-let scrollLockCount = 0;
-let savedOverflow = '';
-let savedPaddingRight = '';
-/**
- * Lock body scroll. Safe to nest: the lock is applied on the first call and
- * the original inline styles come back on the matching last unlock.
- */
-function lockBodyScroll() {
-    if (scrollLockCount === 0) {
-        savedOverflow = document.body.style.overflow;
-        savedPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.overflow = 'hidden';
-        if (scrollbarWidth > 0) {
-            document.body.style.paddingRight = `${scrollbarWidth}px`;
-        }
-    }
-    scrollLockCount++;
-}
-/** Release one lock taken with lockBodyScroll(). */
-function unlockBodyScroll() {
-    if (scrollLockCount === 0)
-        return;
-    scrollLockCount--;
-    if (scrollLockCount === 0) {
-        document.body.style.overflow = savedOverflow;
-        document.body.style.paddingRight = savedPaddingRight;
-    }
-}
-// ---------------------------------------------------------------------------
-// Layer stack
-// ---------------------------------------------------------------------------
-/**
- * Whether `node` is inside `ancestor` in the flat tree: follows slot
- * assignment (content projected into a panel's `<slot>`) and shadow hosts.
- */
-function flatTreeContains(ancestor, node) {
-    var _a, _b, _c;
-    let current = node;
-    while (current) {
-        if (current === ancestor)
-            return true;
-        current =
-            (_c = (_b = (_a = current.assignedSlot) !== null && _a !== void 0 ? _a : current.parentNode) !== null && _b !== void 0 ? _b : current.host) !== null && _c !== void 0 ? _c : null;
-    }
-    return false;
-}
-const stack = [];
-/** The layer that was on top when an Escape keydown started dispatching. */
-const escapeTarget = new WeakMap();
-function topLayer() {
-    return stack.length > 0 ? stack[stack.length - 1] : null;
-}
-function onKeydownCapture(event) {
-    if (event.key === 'Escape') {
-        escapeTarget.set(event, topLayer());
-    }
-}
-function onKeydownBubble(event) {
-    if (event.key === 'Escape') {
-        // Prefer the layer recorded before any element-level handler ran. If that
-        // layer has closed since, an inner handler consumed the key.
-        const layer = escapeTarget.has(event) ? escapeTarget.get(event) : topLayer();
-        if (layer && layer.isActive) {
-            layer.handleEscape(event);
-        }
-        return;
-    }
-    if (event.key === 'Tab') {
-        for (let i = stack.length - 1; i >= 0; i--) {
-            if (stack[i].isModal) {
-                stack[i].handleTab(event);
-                return;
-            }
-        }
-    }
-}
-/** Listen only while at least one layer is open. */
-function syncListeners() {
-    if (typeof window === 'undefined')
-        return;
-    if (stack.length > 0) {
-        // Adding the same listener twice is a no-op.
-        window.addEventListener('keydown', onKeydownCapture, true);
-        window.addEventListener('keydown', onKeydownBubble);
-    }
-    else {
-        window.removeEventListener('keydown', onKeydownCapture, true);
-        window.removeEventListener('keydown', onKeydownBubble);
-    }
-}
-/**
- * One overlay's place on the layer stack.
- *
- *   private layer = new OverlayLayer({ onEscape: () => this.close() });
- *   componentDidRender() { this.layer.setActive(this._isOpen); }
- *   disconnectedCallback() { this.layer.setActive(false); }
- *
- * Modal content parts call `setActive()` from the code path that sees the
- * open state change (so focus is captured before anything moves it) and
- * `didRender()` from componentDidRender, which moves focus in once the
- * container exists.
- */
-class OverlayLayer {
-    constructor(options = {}) {
-        this.options = options;
-        this.active = false;
-        this.modalActive = false;
-        this.returnFocusTo = null;
-        this.focusPending = false;
-    }
-    get isActive() {
-        return this.active;
-    }
-    /** Whether this layer is open and modal (traps focus, locks scroll). */
-    get isModal() {
-        return this.active && this.modalActive;
-    }
-    /** Activate or deactivate; idempotent, so it can be called on every render. */
-    setActive(active) {
-        if (active)
-            this.activate();
-        else
-            this.deactivate();
-    }
-    activate() {
-        if (this.active)
-            return;
-        this.active = true;
-        stack.push(this);
-        if (stack.length === 1)
-            syncListeners();
-        const modal = this.options.modal;
-        this.modalActive = typeof modal === 'function' ? modal() : !!modal;
-        if (this.modalActive) {
-            lockBodyScroll();
-            this.returnFocusTo = getDeepActiveElement$1();
-            this.focusPending = true;
-            // The container may already be rendered (e.g. re-activation after a DOM
-            // move); otherwise didRender() picks this up.
-            this.didRender();
-        }
-    }
-    deactivate() {
-        if (!this.active)
-            return;
-        this.active = false;
-        const index = stack.indexOf(this);
-        if (index !== -1)
-            stack.splice(index, 1);
-        if (stack.length === 0)
-            syncListeners();
-        if (this.modalActive) {
-            this.modalActive = false;
-            this.focusPending = false;
-            unlockBodyScroll();
-            this.restoreFocus();
-        }
-    }
-    /** Move focus into a modal layer once its container has rendered. */
-    didRender() {
-        var _a, _b;
-        if (!this.focusPending || !((_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a)))
-            return;
-        this.focusPending = false;
-        const run = () => {
-            var _a, _b, _c;
-            const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
-            if (!this.active || !container)
-                return;
-            // Something inside (e.g. an autofocus control) already has focus.
-            if (flatTreeContains(container, getDeepActiveElement$1()))
-                return;
-            if (getFocusableElements(container).length > 0) {
-                focusFirst(container);
-            }
-            else {
-                (_c = container.focus) === null || _c === void 0 ? void 0 : _c.call(container);
-            }
-        };
-        if (typeof requestAnimationFrame === 'function')
-            requestAnimationFrame(run);
-        else
-            run();
-    }
-    handleEscape(event) {
-        var _a, _b;
-        (_b = (_a = this.options).onEscape) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-    }
-    handleTab(event) {
-        var _a, _b;
-        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
-        if (container)
-            trapFocus(container, event);
-    }
-    restoreFocus() {
-        var _a, _b;
-        const target = this.returnFocusTo;
-        this.returnFocusTo = null;
-        if (!target || !target.isConnected)
-            return;
-        // Leave focus alone if it already moved somewhere outside this layer on
-        // purpose; return it when it is inside the closing layer or was dropped.
-        const active = getDeepActiveElement$1();
-        const container = (_b = (_a = this.options).container) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const dropped = !active || active === document.body;
-        if (dropped || (container && flatTreeContains(container, active))) {
-            target.focus();
-        }
-    }
-}
-// ---------------------------------------------------------------------------
-// Accessible name / description for dialog-like content parts (#357)
-// ---------------------------------------------------------------------------
-const CONTENT_PARTS = 'seki-dialog-content, seki-alert-dialog-content, seki-sheet-content, seki-drawer-content';
-const TITLE_PARTS = 'seki-dialog-title, seki-sheet-title';
-const DESCRIPTION_PARTS = 'seki-dialog-description, seki-sheet-description';
-function textOf(el) {
-    var _a;
-    return ((_a = el === null || el === void 0 ? void 0 : el.textContent) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
-}
-/**
- * Title and description text for a dialog-like content part.
- *
- * The `role="dialog"` element lives in the content part's shadow root, while
- * the title and description are separate custom elements in the light DOM. An
- * `aria-labelledby` id reference cannot cross that shadow boundary, so the
- * dialog had no accessible name or description. ARIA element reflection
- * (`ariaLabelledByElements`) can reach outward, but test tooling and older
- * engines don't follow it, so the content part mirrors the text into hidden
- * elements in its own shadow root and references those instead (the approach
- * `label-association.ts` takes for labels). A MutationObserver keeps the copy
- * in sync while the content is open.
- *
- * Only the title/description that belong to this content part count, not
- * those of an overlay nested inside it.
- */
-class DialogLabelSource {
-    constructor(onChange) {
-        this.onChange = onChange;
-        this.host = null;
-    }
-    find(selector) {
-        const host = this.host;
-        if (!host)
-            return null;
-        for (const el of Array.from(host.querySelectorAll(selector))) {
-            if (el.closest(CONTENT_PARTS) === host)
-                return el;
-        }
-        return null;
-    }
-    sync() {
-        this.onChange(textOf(this.find(TITLE_PARTS)), textOf(this.find(DESCRIPTION_PARTS)));
-    }
-    /** Start tracking the content part `host` (call when it opens). */
-    observe(host) {
-        if (this.host !== host)
-            this.disconnect();
-        this.host = host;
-        this.sync();
-        if (this.observer || typeof MutationObserver === 'undefined')
-            return;
-        this.observer = new MutationObserver(() => this.sync());
-        this.observer.observe(host, { childList: true, subtree: true, characterData: true });
-    }
-    disconnect() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.observer = undefined;
-    }
-}
-
-export { DialogLabelSource as D, OverlayLayer as O };

package/dist/cdn/p-DI1tqzsG.js

@@ -1,157 +0,0 @@
-/**
- * Shared keyboard navigation for menu-like content (dropdown-menu,
- * context-menu, menubar).
- *
- * Menu items are *slotted light-DOM children* of the `*-content` host, so they
- * must be collected from the host (`el.querySelectorAll`), never from a node
- * inside the content's own shadow root (#322). Each item renders its focus
- * target (`[role^="menuitem"]`) in its own shadow root, so focusing an item
- * means focusing that inner element, not the host.
- */
-/** Roles of the focus target an item renders in its shadow root. */
-const FOCUS_TARGET = '[role^="menuitem"]';
-function isDisabled(el) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return el.hasAttribute('disabled') || el.disabled === true;
-}
-/** Nearest submenu container of an item, or null for top-level items. */
-function scopeOf(el, cfg) {
-    return el.closest(cfg.subContentSelector);
-}
-/** All item hosts under `root` (any scope), including disabled ones. */
-function allItems(root, cfg) {
-    return Array.from(root.querySelectorAll(cfg.itemSelector));
-}
-/** Enabled items under `root` that share the given submenu scope. */
-function getMenuItems(root, cfg, scope = null) {
-    return allItems(root, cfg).filter((el) => !isDisabled(el) && scopeOf(el, cfg) === scope);
-}
-/** Focus an item by focusing its inner `[role=menuitem*]` element. */
-function focusMenuItem(item) {
-    var _a, _b;
-    if (!item)
-        return;
-    const target = (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUS_TARGET)) !== null && _b !== void 0 ? _b : item;
-    target.focus();
-}
-/**
- * Focus an item, retrying for a few frames until it is actually focused. A
- * submenu's content only renders its slot once it is open, so the items are
- * not focusable on the very frame the open was requested.
- */
-function focusMenuItemWhenReady(item, framesLeft = 10) {
-    var _a, _b;
-    if (!item)
-        return;
-    focusMenuItem(item);
-    const target = (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(FOCUS_TARGET)) !== null && _b !== void 0 ? _b : item;
-    if (framesLeft > 0 && getDeepActiveElement() !== target) {
-        requestAnimationFrame(() => focusMenuItemWhenReady(item, framesLeft - 1));
-    }
-}
-/**
- * Focus the first enabled top-level item. Waits for the item to be upgraded
- * and rendered (and for the content's slot to render) first, so it works when tags are defined one at a time (#314).
- */
-async function focusFirstMenuItem(root, cfg) {
-    const first = getMenuItems(root, cfg)[0];
-    if (!first)
-        return;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ready = first.componentOnReady;
-    if (typeof ready === 'function') {
-        try {
-            await ready.call(first);
-        }
-        catch (_a) {
-            /* fall through and focus whatever is there */
-        }
-    }
-    focusMenuItemWhenReady(first);
-}
-/** Deepest focused element, looking through shadow roots. */
-function getDeepActiveElement() {
-    var _a, _b;
-    let active = document.activeElement;
-    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
-        active = active.shadowRoot.activeElement;
-    }
-    return (_b = active) !== null && _b !== void 0 ? _b : null;
-}
-/** True when `node` is `ancestor` or a descendant of it, crossing shadow boundaries. */
-function composedContains(ancestor, node) {
-    var _a, _b;
-    let current = node;
-    while (current) {
-        if (current === ancestor)
-            return true;
-        current = (_b = (_a = current.parentNode) !== null && _a !== void 0 ? _a : current.host) !== null && _b !== void 0 ? _b : null;
-    }
-    return false;
-}
-function clearTypeahead(state) {
-    if (state.timer)
-        clearTimeout(state.timer);
-    state.timer = undefined;
-    state.buffer = '';
-}
-/**
- * Handle ArrowDown / ArrowUp / Home / End / type-ahead for a menu. The current
- * item is derived from the event itself, so mouse hover, click and Tab focus
- * can never put a "focused index" out of sync with the DOM.
- *
- * Enter / Space are intentionally NOT handled here: every item activates
- * itself from its own keydown handler, and doing it twice would select twice.
- */
-function handleMenuKeyDown(event, root, cfg, typeahead) {
-    var _a;
-    const everyItem = allItems(root, cfg);
-    const target = (_a = event.composedPath().find((n) => n instanceof HTMLElement && everyItem.includes(n))) !== null && _a !== void 0 ? _a : null;
-    const scope = target ? scopeOf(target, cfg) : null;
-    const items = getMenuItems(root, cfg, scope);
-    const result = { target, inSubmenu: scope !== null, handled: false };
-    if (event.altKey || event.ctrlKey || event.metaKey || items.length === 0)
-        return result;
-    const current = target ? items.indexOf(target) : -1;
-    let next = -1;
-    switch (event.key) {
-        case 'ArrowDown':
-            next = current < 0 ? 0 : (current + 1) % items.length;
-            break;
-        case 'ArrowUp':
-            next = current <= 0 ? items.length - 1 : current - 1;
-            break;
-        case 'Home':
-            next = 0;
-            break;
-        case 'End':
-            next = items.length - 1;
-            break;
-        default: {
-            if (event.key.length !== 1 || event.key === ' ')
-                return result;
-            if (typeahead.timer)
-                clearTimeout(typeahead.timer);
-            typeahead.buffer += event.key.toLowerCase();
-            typeahead.timer = setTimeout(() => clearTypeahead(typeahead), 500);
-            // Typing one character repeatedly cycles through the items starting with it.
-            const repeated = typeahead.buffer.length > 1 && typeahead.buffer.split('').every((c) => c === typeahead.buffer[0]);
-            const needle = repeated ? typeahead.buffer[0] : typeahead.buffer;
-            const start = typeahead.buffer.length === 1 || repeated ? current + 1 : Math.max(current, 0);
-            const ordered = [...items.slice(start), ...items.slice(0, start)];
-            const hit = ordered.find((el) => { var _a; return ((_a = el.textContent) !== null && _a !== void 0 ? _a : '').trim().toLowerCase().startsWith(needle); });
-            result.handled = true;
-            if (hit) {
-                event.preventDefault();
-                focusMenuItem(hit);
-            }
-            return result;
-        }
-    }
-    event.preventDefault();
-    focusMenuItem(items[next]);
-    result.handled = true;
-    return result;
-}
-
-export { clearTypeahead as a, focusMenuItem as b, composedContains as c, focusMenuItemWhenReady as d, focusFirstMenuItem as f, getDeepActiveElement as g, handleMenuKeyDown as h };