@sekiui/elements 0.0.82 → 0.0.84

package/dist/collection/utils/calendar/date-utils.js

@@ -11,6 +11,17 @@ export function getWeekDays(weekStartsOn = 0) {
     }
     return days;
 }
+/**
+ * Whether a date is disabled by the min/max bounds or the explicit disabled list.
+ * Single source of truth shared by the grid generator and keyboard handlers.
+ */
+export function isDateDisabled(date, options = {}) {
+    const { minDate = null, maxDate = null, disabledDates = [] } = options;
+    const disabledByRange = (minDate && isBefore(date, startOfDay(minDate))) ||
+        (maxDate && isAfter(date, startOfDay(maxDate)));
+    const disabledByList = disabledDates.some(d => isSameDay(date, d));
+    return Boolean(disabledByRange || disabledByList);
+}
 /**
  * Get all days to display in a calendar month grid (6 weeks)
  */
@@ -24,9 +35,6 @@ export function getCalendarDays(month, options = {}) {
     const weeks = [];
     let currentWeek = [];
     for (const date of allDays) {
-        const isDisabledByRange = (minDate && isBefore(date, startOfDay(minDate))) ||
-            (maxDate && isAfter(date, startOfDay(maxDate)));
-        const isDisabledByList = disabledDates.some(d => isSameDay(date, d));
         const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
         let isInRange = false;
         let isRangeStart = false;
@@ -50,7 +58,7 @@ export function getCalendarDays(month, options = {}) {
             isInRange,
             isRangeStart,
             isRangeEnd,
-            isDisabled: isDisabledByRange || isDisabledByList,
+            isDisabled: isDateDisabled(date, { minDate, maxDate, disabledDates }),
         };
         currentWeek.push(day);
         if (currentWeek.length === 7) {

package/dist/collection/utils/dialog/focus-trap.js

@@ -1,23 +1,87 @@
 /**
- * Focus trap utility for dialog and modal components
+ * 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])',
-    '[href]',
     '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
+ * Get all focusable elements within a container, crossing shadow-DOM and slot
+ * boundaries so projected content and nested web components are included.
  */
 export function getFocusableElements(container) {
-    const elements = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-    return elements.filter(el => !el.closest('[hidden]') && !el.closest('[aria-hidden="true"]'));
+    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
+ * Focus the first focusable element in a container.
  */
 export function focusFirst(container) {
     const focusables = getFocusableElements(container);
@@ -26,7 +90,7 @@ export function focusFirst(container) {
     }
 }
 /**
- * Focus the last focusable element in a container
+ * Focus the last focusable element in a container.
  */
 export function focusLast(container) {
     const focusables = getFocusableElements(container);
@@ -35,44 +99,69 @@ export function focusLast(container) {
     }
 }
 /**
- * Trap focus within a container during Tab key navigation
+ * Trap focus within a container during Tab key navigation.
  */
 export function trapFocus(container, event) {
     if (event.key !== 'Tab')
         return;
     const focusables = getFocusableElements(container);
-    if (focusables.length === 0)
+    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 = document.activeElement;
+    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) {
-        // Shift+Tab: if on first element, go to last
-        if (active === first || !container.contains(active)) {
+        if (active === first || !isInside) {
             event.preventDefault();
             last.focus();
         }
     }
     else {
-        // Tab: if on last element, go to first
-        if (active === last || !container.contains(active)) {
+        if (active === last || !isInside) {
             event.preventDefault();
             first.focus();
         }
     }
 }
+// ---------------------------------------------------------------------------
+// Body scroll lock (reference-counted so stacked modals don't unlock early).
+// ---------------------------------------------------------------------------
+let scrollLockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
 /**
- * Lock body scroll when modal is open
+ * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
+ * on the first call and the original inline styles are restored on the last
+ * matching unlock.
  */
 export function lockBodyScroll() {
-    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.overflow = 'hidden';
-    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    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++;
 }
 /**
- * Unlock body scroll when modal is closed
+ * Unlock body scroll when a modal closes. Only the final unlock restores the
+ * original inline styles.
  */
 export function unlockBodyScroll() {
-    document.body.style.overflow = '';
-    document.body.style.paddingRight = '';
+    if (scrollLockCount === 0)
+        return;
+    scrollLockCount--;
+    if (scrollLockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+    }
 }

package/dist/collection/utils/positioning.js

@@ -0,0 +1,61 @@
+/**
+ * Shared anchored-positioning math for popover-like overlays (popover,
+ * dropdown-menu, menubar content). Computes a fixed-position {top,left} for a
+ * floating element relative to a trigger, given a side + alignment + offsets,
+ * then clamps the result into the viewport.
+ *
+ * This is the simple "place + clamp" strategy (no side flipping). Components
+ * that flip based on available space (e.g. hover-card, tooltip 'auto') keep
+ * their own collision logic.
+ */
+export function computeAnchoredPosition(triggerRect, contentRect, options) {
+    const { side, align, sideOffset = 0, alignOffset = 0, viewport = { width: window.innerWidth, height: window.innerHeight }, margin = 8, } = options;
+    let top = 0;
+    let left = 0;
+    // Position along the side axis.
+    switch (side) {
+        case 'top':
+            top = triggerRect.top - contentRect.height - sideOffset;
+            break;
+        case 'bottom':
+            top = triggerRect.bottom + sideOffset;
+            break;
+        case 'left':
+            left = triggerRect.left - contentRect.width - sideOffset;
+            break;
+        case 'right':
+            left = triggerRect.right + sideOffset;
+            break;
+    }
+    // Position along the alignment (cross) axis.
+    if (side === 'top' || side === 'bottom') {
+        switch (align) {
+            case 'start':
+                left = triggerRect.left + alignOffset;
+                break;
+            case 'center':
+                left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + alignOffset;
+                break;
+            case 'end':
+                left = triggerRect.right - contentRect.width + alignOffset;
+                break;
+        }
+    }
+    else {
+        switch (align) {
+            case 'start':
+                top = triggerRect.top + alignOffset;
+                break;
+            case 'center':
+                top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + alignOffset;
+                break;
+            case 'end':
+                top = triggerRect.bottom - contentRect.height + alignOffset;
+                break;
+        }
+    }
+    // Clamp into the viewport.
+    left = Math.max(margin, Math.min(left, viewport.width - contentRect.width - margin));
+    top = Math.max(margin, Math.min(top, viewport.height - contentRect.height - margin));
+    return { top, left, side };
+}

package/dist/components/p-BgtjDG0h.js

@@ -0,0 +1,45 @@
+const NOOP_MIRROR = { disconnect() { } };
+function mirrorAncestorAttributes(host, ancestorSelector, attributes, options = {}) {
+    const ancestor = host.closest(ancestorSelector);
+    if (!ancestor)
+        return NOOP_MIRROR;
+    const sync = () => {
+        for (const attr of attributes) {
+            const value = ancestor.getAttribute(attr);
+            if (value === null) {
+                host.removeAttribute(attr);
+            }
+            else {
+                host.setAttribute(attr, value);
+            }
+        }
+    };
+    // Reflect current state, then keep it in sync with future attribute changes.
+    sync();
+    // MutationObserver is absent in non-DOM/test environments; the initial sync
+    // still runs, we just skip live updates there.
+    let observer;
+    if (typeof MutationObserver !== 'undefined') {
+        observer = new MutationObserver(sync);
+        observer.observe(ancestor, { attributes: true, attributeFilter: attributes });
+    }
+    let onEnter;
+    let onLeave;
+    if (options.trackHover) {
+        onEnter = () => host.setAttribute('data-parent-hover', '');
+        onLeave = () => host.removeAttribute('data-parent-hover');
+        ancestor.addEventListener('mouseenter', onEnter);
+        ancestor.addEventListener('mouseleave', onLeave);
+    }
+    return {
+        disconnect() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            if (onEnter)
+                ancestor.removeEventListener('mouseenter', onEnter);
+            if (onLeave)
+                ancestor.removeEventListener('mouseleave', onLeave);
+        },
+    };
+}
+
+export { mirrorAncestorAttributes as m };

package/dist/components/{p-tgCyk_Am.js → p-C87BOunl.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, d as registerThemeSync, u as unregisterThemeSync, h, e as Host } from './p-CmYbI_bV.js';
-import { l as lockBodyScroll, u as unlockBodyScroll } from './p-CP7ZtKCE.js';
+import { l as lockBodyScroll, u as unlockBodyScroll } from './p-D50kwTtW.js';
 
 const sekiDialogCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%);--seki-chart-1:hsl(12, 76%, 61%);--seki-chart-2:hsl(173, 58%, 39%);--seki-chart-3:hsl(197, 37%, 24%);--seki-chart-4:hsl(43, 74%, 66%);--seki-chart-5:hsl(27, 87%, 67%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n    Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-none:1;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{--seki-sidebar-width:16rem;--seki-sidebar-width-icon:3rem;--seki-sidebar-width-mobile:18rem;--seki-sidebar-background:hsl(0, 0%, 98%);--seki-sidebar-foreground:hsl(240, 5.3%, 26.1%);--seki-sidebar-primary:hsl(240, 5.9%, 10%);--seki-sidebar-primary-foreground:hsl(0, 0%, 98%);--seki-sidebar-accent:hsl(240, 4.8%, 95.9%);--seki-sidebar-accent-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-border:hsl(220, 13%, 91%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 3.8%, 46.1%);--seki-sidebar-menu-button-height:2rem;--seki-sidebar-menu-button-height-lg:3rem;--seki-sidebar-menu-button-padding:0.5rem;--seki-sidebar-menu-button-gap:0.5rem;--seki-sidebar-menu-button-radius:var(--seki-radius-md, 0.375rem);--seki-sidebar-menu-sub-padding-left:1.75rem;--seki-sidebar-menu-sub-border-width:1px;--seki-sidebar-group-padding:0.5rem;--seki-sidebar-group-label-height:2rem;--seki-sidebar-group-label-padding:0.5rem;--seki-sidebar-header-height:auto;--seki-sidebar-footer-height:auto;--seki-sidebar-header-padding:0.5rem;--seki-sidebar-footer-padding:0.5rem;--seki-sidebar-content-padding:0.5rem;--seki-sidebar-rail-width:1rem;--seki-sidebar-transition-duration:200ms;--seki-sidebar-transition-timing:ease-in-out;--seki-sidebar-mobile-breakpoint:768px;--seki-sidebar-overlay-bg:hsla(0, 0%, 0%, 0.8)}:host([data-theme='dark']){--seki-sidebar-background:hsl(240, 5.9%, 10%);--seki-sidebar-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-primary:hsl(0, 0%, 98%);--seki-sidebar-primary-foreground:hsl(240, 5.9%, 10%);--seki-sidebar-accent:hsl(240, 3.7%, 15.9%);--seki-sidebar-accent-foreground:hsl(240, 4.8%, 95.9%);--seki-sidebar-border:hsl(240, 3.7%, 15.9%);--seki-sidebar-ring:hsl(217.2, 91.2%, 59.8%);--seki-sidebar-muted-foreground:hsl(240, 5%, 64.9%)}:host{--seki-animation-fast:150ms;--seki-animation-normal:200ms;--seki-animation-slow:300ms;--seki-ease-in:cubic-bezier(0.4, 0, 1, 1);--seki-ease-out:cubic-bezier(0, 0, 0.2, 1);--seki-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--seki-accordion-content-height:auto}@keyframes seki-fade-in{from{opacity:0}to{opacity:1}}@keyframes seki-fade-out{from{opacity:1}to{opacity:0}}@keyframes seki-scale-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes seki-scale-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.95)}}@keyframes seki-slide-in-from-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-top{from{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes seki-slide-in-from-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes seki-slide-out-to-bottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes seki-slide-in-from-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes seki-slide-in-from-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes seki-slide-out-to-right{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes seki-accordion-down{from{height:0;opacity:0}to{height:var(--seki-accordion-content-height);opacity:1}}@keyframes seki-accordion-up{from{height:var(--seki-accordion-content-height);opacity:1}to{height:0;opacity:0}}@keyframes seki-zoom-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}@keyframes seki-zoom-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.96)}}@keyframes seki-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes seki-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes seki-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}@keyframes seki-collapsible-open{from{height:0;overflow:hidden}to{height:var(--seki-collapsible-content-height, auto)}}@keyframes seki-collapsible-close{from{height:var(--seki-collapsible-content-height, auto)}to{height:0;overflow:hidden}}@keyframes seki-toast-slide-in-right{from{transform:translateX(calc(100% + 1rem))}to{transform:translateX(0)}}@keyframes seki-toast-slide-out-right{from{transform:translateX(0)}to{transform:translateX(calc(100% + 1rem))}}@keyframes seki-toast-swipe-out{from{transform:translateX(var(--seki-toast-swipe-end-x, 0))}to{transform:translateX(calc(100% + 1rem))}}.seki-animate-fade-in{animation:seki-fade-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-fade-out{animation:seki-fade-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-scale-in{animation:seki-scale-in var(--seki-animation-normal) var(--seki-ease-out)}.seki-animate-scale-out{animation:seki-scale-out var(--seki-animation-normal) var(--seki-ease-in)}.seki-animate-spin{animation:seki-spin 1s linear infinite}.seki-animate-pulse{animation:seki-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.seki-animate-bounce{animation:seki-bounce 1s infinite}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}:host{display:contents}.dialog{display:contents}";
 
@@ -32,6 +32,16 @@ const SekiDialog = /*@__PURE__*/ proxyCustomElement(class SekiDialog extends H {
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
     }
+    handleOpenPropChange(newValue) {
+        // Honour controlled `open` updates after first render. Without this, setting
+        // dialog.open = true later did nothing (open was only read in componentWillLoad).
+        if (newValue && !this._isOpen) {
+            this.openDialog();
+        }
+        else if (!newValue && this._isOpen) {
+            this.closeDialog();
+        }
+    }
     get titleId() {
         return `seki-dialog-title-${this.instanceId}`;
     }
@@ -105,9 +115,12 @@ const SekiDialog = /*@__PURE__*/ proxyCustomElement(class SekiDialog extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'b26d6665d7cbd7cb94f53e78855c7e0018c38c8d', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '416347fc9cd44970c3a5dec4bc562692f36562d4', part: "dialog", class: "dialog" }, h("slot", { key: '116af2368448782b7c65af0bf039a8f2186d508c' }))));
+        return (h(Host, { key: '185a05b13663a81dc152b76009f9befd201ec8db', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'b172f05f25d1ee05dc43e2b50e95a6c1c0e8ad60', part: "dialog", class: "dialog" }, h("slot", { key: '5d73235cd76ea9b95b793661940553bc0685ed96' }))));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenPropChange"]
+    }; }
     static get style() { return sekiDialogCss; }
 }, [257, "seki-dialog", {
         "open": [1540],
@@ -116,7 +129,9 @@ const SekiDialog = /*@__PURE__*/ proxyCustomElement(class SekiDialog extends H {
         "_isOpen": [32],
         "openDialog": [64],
         "closeDialog": [64]
-    }, [[0, "sekiDialogTriggerClick", "handleTriggerClick"], [0, "sekiDialogClose", "handleCloseRequest"]]]);
+    }, [[0, "sekiDialogTriggerClick", "handleTriggerClick"], [0, "sekiDialogClose", "handleCloseRequest"]], {
+        "open": ["handleOpenPropChange"]
+    }]);
 SekiDialog.instanceCount = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-JT4r_mV0.js → p-CSf6znuo.js}

@@ -150,14 +150,14 @@ const SekiNavigationMenuViewport = /*@__PURE__*/ proxyCustomElement(class SekiNa
         return h("slot", null);
     }
     render() {
-        return (h(Host, { key: 'd6488e7ee474b8a5c14bda3c4354a18c8f95e2bd', class: {
+        return (h(Host, { key: 'c863186fc1f5fa38f62d722497f1eca6564175ff', class: {
                 'navigation-menu-viewport': true,
                 'navigation-menu-viewport--visible': this.isVisible,
             }, style: {
                 '--indicator-left': `${this.indicatorLeft}px`,
                 '--content-offset': `${this.contentOffset}px`,
                 '--content-height': `${this.contentHeight}px`,
-            } }, h("div", { key: 'c154a11e43e35c612c8516ce48e90ce963f120cd', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '20963cf39499036ed89db44f1b34cf6b3064e3c8', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: 'd69af8e0581c22acf673595deef3bdce3aa12189', points: "10,0 20,10 0,10" }))), h("div", { key: '558cd698c2a894070a80b137e36dc62d25977043', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
+            } }, h("div", { key: '558ad311e9ee87bce50b1caaebbd438ef4f4ffa0', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '187cb7822a78f9ec991c403c1c0d255ef1c93434', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: '6a2cb9eb92b18a5815dfc433066f24bc4bb80d76', points: "10,0 20,10 0,10" }))), h("div", { key: '2aaa62ba0e22c828ef21bc4196b78ef78f60faf9', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/p-D50kwTtW.js

@@ -0,0 +1,160 @@
+/**
+ * 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();
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Body scroll lock (reference-counted so stacked modals don't unlock early).
+// ---------------------------------------------------------------------------
+let scrollLockCount = 0;
+let savedOverflow = '';
+let savedPaddingRight = '';
+/**
+ * Lock body scroll when a modal opens. Safe to nest: the lock is only applied
+ * on the first call and the original inline styles are restored on the last
+ * matching 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++;
+}
+/**
+ * Unlock body scroll when a modal closes. Only the final unlock restores the
+ * original inline styles.
+ */
+function unlockBodyScroll() {
+    if (scrollLockCount === 0)
+        return;
+    scrollLockCount--;
+    if (scrollLockCount === 0) {
+        document.body.style.overflow = savedOverflow;
+        document.body.style.paddingRight = savedPaddingRight;
+    }
+}
+
+export { focusFirst as f, lockBodyScroll as l, trapFocus as t, unlockBodyScroll as u };