@sekiui/elements 0.1.5 → 0.1.6

package/dist/collection/components/message-scroller/seki-message-scroller.js

@@ -82,17 +82,105 @@ export class SekiMessageScroller {
         this.anchorRefOffset = 0;
         this.scrollRaf = null;
         this.mounted = false;
+        this.loaded = false;
+        this.restoring = false;
+        this.lastScrollTop = 0;
+        this.followedScrollTop = -1;
+        this.viewportBound = false;
+        this.contentObserved = false;
+        this.initialScheduled = false;
+        this.hostObserver = null;
+        /**
+         * Idempotent: (re)discover the viewport/content elements and (re)attach the
+         * scroll listener and observers when they changed (or were torn down).
+         * Called on load, on reconnect, and whenever descendants change so children
+         * that arrive late are picked up.
+         */
+        this.setup = () => {
+            var _a, _b, _c;
+            if (!this.loaded || !this.el.isConnected)
+                return;
+            const viewport = this.el.querySelector('seki-message-scroller-viewport');
+            const content = this.el.querySelector('seki-message-scroller-content');
+            if (!this.hostObserver && typeof MutationObserver !== 'undefined') {
+                // Viewport/content are nested descendants, so slotchange on the host slot
+                // alone misses a content element added inside an existing viewport.
+                this.hostObserver = new MutationObserver(this.setup);
+                this.hostObserver.observe(this.el, { childList: true, subtree: true });
+            }
+            if (viewport !== this.viewportEl || !this.viewportBound) {
+                (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
+                this.viewportEl = viewport;
+                this.viewportBound = false;
+            }
+            if (this.viewportEl && !this.viewportBound) {
+                this.viewportEl.addEventListener('scroll', this.handleScroll, { passive: true });
+                this.viewportBound = true;
+            }
+            if (content !== this.contentEl || !this.contentObserved) {
+                (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+                (_c = this.mutationObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+                this.resizeObserver = null;
+                this.mutationObserver = null;
+                this.contentEl = content;
+                this.contentObserved = false;
+            }
+            if (this.contentEl && !this.contentObserved) {
+                if (typeof ResizeObserver !== 'undefined') {
+                    this.resizeObserver = new ResizeObserver(this.handleContentResize);
+                    this.resizeObserver.observe(this.contentEl);
+                }
+                if (typeof MutationObserver !== 'undefined') {
+                    this.mutationObserver = new MutationObserver(this.handleContentMutation);
+                    this.mutationObserver.observe(this.contentEl, { childList: true, subtree: true });
+                }
+                this.contentObserved = true;
+                // Rows may already be present (late content, or a reconnect).
+                if (this.mounted) {
+                    this.snapshotAnchorRef();
+                    this.syncEdgeState();
+                }
+            }
+            if (this.mounted && this.viewportEl && this.trackVisibility && !this.intersectionObserver) {
+                this.setupVisibility();
+            }
+            // Initial scroll position is one-shot: run once, as soon as a viewport exists.
+            if (this.viewportEl && !this.initialScheduled) {
+                this.initialScheduled = true;
+                const runInitial = () => {
+                    this.applyInitialPosition();
+                    this.snapshotAnchorRef();
+                    this.engaged = this.autoScroll && this.getEdge().atEnd;
+                    this.syncEdgeState(true);
+                    this.setupVisibility();
+                    this.mounted = true;
+                };
+                if (typeof requestAnimationFrame !== 'undefined') {
+                    requestAnimationFrame(runInitial);
+                }
+                else
+                    setTimeout(runInitial, 0);
+            }
+        };
         // =========================================================================
         // Scroll / observation handlers (imperative)
         // =========================================================================
         this.handleScroll = () => {
+            if (this.restoring)
+                return;
+            if (this.viewportEl)
+                this.lastScrollTop = this.viewportEl.scrollTop;
             if (this.scrollRaf !== null)
                 return;
             this.scrollRaf = requestAnimationFrame(() => {
                 this.scrollRaf = null;
                 // Derive engagement purely from position: at the live edge => follow;
                 // scrolled up => disengage. Re-reaching the bottom re-engages.
-                this.engaged = this.autoScroll && this.getEdge().atEnd;
+                // A scroll we issued ourselves to follow output is not a user scroll-up,
+                // even if content grew again before this frame (would otherwise drop follow).
+                const ours = this.viewportEl !== null && Math.abs(this.viewportEl.scrollTop - this.followedScrollTop) < 1;
+                if (!ours)
+                    this.engaged = this.autoScroll && this.getEdge().atEnd;
                 this.snapshotAnchorRef();
                 this.syncEdgeState();
                 this.updateVisibility();
@@ -157,46 +245,63 @@ export class SekiMessageScroller {
     // =========================================================================
     // Lifecycle
     // =========================================================================
-    componentDidLoad() {
-        this.viewportEl = this.el.querySelector('seki-message-scroller-viewport');
-        this.contentEl = this.el.querySelector('seki-message-scroller-content');
-        if (this.viewportEl) {
-            this.viewportEl.addEventListener('scroll', this.handleScroll, { passive: true });
+    connectedCallback() {
+        // Reconnect after a DOM move: componentDidLoad does not run again, but
+        // disconnectedCallback tore the listeners/observers down.
+        if (this.loaded) {
+            this.setup();
+            this.restoreAfterMove();
         }
-        if (this.contentEl) {
-            if (typeof ResizeObserver !== 'undefined') {
-                this.resizeObserver = new ResizeObserver(this.handleContentResize);
-                this.resizeObserver.observe(this.contentEl);
-            }
-            if (typeof MutationObserver !== 'undefined') {
-                this.mutationObserver = new MutationObserver(this.handleContentMutation);
-                this.mutationObserver.observe(this.contentEl, { childList: true, subtree: true });
-            }
-        }
-        // Apply the initial scroll position after layout has settled.
-        const runInitial = () => {
-            this.applyInitialPosition();
+    }
+    componentDidLoad() {
+        this.loaded = true;
+        this.setup();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    /**
+     * Detaching an element resets its descendants' scroll offsets to 0. Put the
+     * reader back where they were: the live edge if they were following, else
+     * the last offset we saw. Scroll events from the reset are ignored meanwhile.
+     */
+    restoreAfterMove() {
+        if (!this.mounted)
+            return;
+        this.restoring = true;
+        const restore = () => {
+            this.restoring = false;
+            if (!this.viewportEl)
+                return;
+            if (this.engaged)
+                this.scrollViewportToEnd();
+            else
+                this.viewportEl.scrollTop = this.lastScrollTop;
             this.snapshotAnchorRef();
-            this.engaged = this.autoScroll && this.getEdge().atEnd;
-            this.syncEdgeState(true);
-            this.setupVisibility();
-            this.mounted = true;
+            this.syncEdgeState();
         };
         if (typeof requestAnimationFrame !== 'undefined')
-            requestAnimationFrame(runInitial);
+            requestAnimationFrame(restore);
         else
-            setTimeout(runInitial, 0);
+            setTimeout(restore, 0);
     }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        if (this.viewportEl) {
-            this.viewportEl.removeEventListener('scroll', this.handleScroll);
-        }
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        (_c = this.intersectionObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-        if (this.scrollRaf !== null)
+    teardown() {
+        var _a, _b, _c, _d, _e;
+        (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
+        this.viewportBound = false;
+        (_b = this.hostObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.hostObserver = null;
+        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+        this.resizeObserver = null;
+        (_d = this.mutationObserver) === null || _d === void 0 ? void 0 : _d.disconnect();
+        this.mutationObserver = null;
+        this.contentObserved = false;
+        (_e = this.intersectionObserver) === null || _e === void 0 ? void 0 : _e.disconnect();
+        this.intersectionObserver = null;
+        if (this.scrollRaf !== null) {
             cancelAnimationFrame(this.scrollRaf);
+            this.scrollRaf = null;
+        }
     }
     // =========================================================================
     // Public Methods
@@ -269,6 +374,7 @@ export class SekiMessageScroller {
         if (!this.viewportEl)
             return;
         this.viewportEl.scrollTop = this.viewportEl.scrollHeight;
+        this.followedScrollTop = this.viewportEl.scrollTop;
     }
     applyInitialPosition() {
         if (!this.viewportEl)
@@ -379,7 +485,7 @@ export class SekiMessageScroller {
         this.visibilityChange.emit({ currentAnchorId, visibleMessageIds: orderedVisible });
     }
     render() {
-        return (h(Host, { key: 'c3a0252572aeb9a10a115818b77ac0f78af4c457' }, h("slot", { key: 'bc705e12f55fd44f184a8204c2f6fe19d33c28fe' })));
+        return (h(Host, { key: 'ed071093a743d3e1cec68d4d3a2d9e88ceda8b74' }, h("slot", { key: 'd77a01faf0f49972c94946930bb5a35dfe1b1926', onSlotchange: this.setup })));
     }
     static get is() { return "seki-message-scroller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/native-select/seki-native-select.css

@@ -334,6 +334,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights

package/dist/collection/components/navigation-menu/seki-navigation-menu-content.js

@@ -22,6 +22,9 @@ export class SekiNavigationMenuContent {
         /** Whether in mobile mode */
         this.isMobile = false;
         this.itemContextSubscription = { parent: null, unsubscribe: () => { } };
+        // componentDidLoad runs once, but disconnectedCallback tears down on every
+        // DOM move, so set up again when an already-loaded element reconnects (#333).
+        this.hasLoaded = false;
         this.handleItemContextChange = () => {
             const item = this.el.closest('seki-navigation-menu-item');
             const context = item === null || item === void 0 ? void 0 : item.navigationMenuItemContext;
@@ -71,12 +74,21 @@ export class SekiNavigationMenuContent {
         this.findParentElements();
     }
     componentDidLoad() {
+        this.hasLoaded = true;
+        this.attach();
+    }
+    attach() {
         this.setupContentInteractions();
+        this.itemContextSubscription.unsubscribe();
         this.itemContextSubscription = subscribeToContextChange(this.el, 'seki-navigation-menu-item', this.handleItemContextChange);
         this.handleItemContextChange();
     }
     connectedCallback() {
         this.itemAttrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu-item', ['data-mobile-expanded']);
+        if (this.hasLoaded) {
+            this.findParentElements();
+            this.attach();
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -182,7 +194,9 @@ export class SekiNavigationMenuContent {
     }
     focusParentTrigger() {
         var _a, _b;
-        const trigger = (_a = this.parentItem) === null || _a === void 0 ? void 0 : _a.el.querySelector('seki-navigation-menu-trigger');
+        // Query the item element itself: under the lazy loader `parentItem` is the
+        // host element, which has no `el`, so `parentItem.el` threw on Escape.
+        const trigger = (_a = this.el.closest('seki-navigation-menu-item')) === null || _a === void 0 ? void 0 : _a.querySelector('seki-navigation-menu-trigger');
         if (trigger) {
             const button = (_b = trigger.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
             button === null || button === void 0 ? void 0 : button.focus();
@@ -205,13 +219,13 @@ export class SekiNavigationMenuContent {
         if (this.layout === 'grid') {
             customStyles['--content-columns'] = String(this.columns);
         }
-        return (h(Host, { key: '2a0fcc6fb5cbbcf000d4ea056be222490fb372ba', class: {
+        return (h(Host, { key: '9da8495cfca9ab57d571161dc0ea7e93f1c41216', class: {
                 'navigation-menu-content': true,
                 'navigation-menu-content--open': this.isOpen,
                 'navigation-menu-content--mobile': this.isMobile,
                 [`navigation-menu-content--layout-${this.layout}`]: true,
                 [`navigation-menu-content--align-${this.align}`]: true,
-            }, "data-mobile": this.isMobile ? '' : undefined, style: customStyles }, h("div", { key: 'f4c976634a69898ec65aa4888feb227835c2eea1', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: 'ad0a5047065b878b826d9f253e7ce04bfe9a9a69' }))));
+            }, "data-mobile": this.isMobile ? '' : undefined, style: customStyles }, h("div", { key: 'f6b3e156b17b847c7b8911d1fbd541edb12bf262', id: `content-${itemId}`, class: "navigation-menu-content__inner", role: "menu", "aria-labelledby": `trigger-${itemId}` }, h("slot", { key: '89880249c15fa7fc9ad8d0dc3986f1210b20436e' }))));
     }
     static get is() { return "seki-navigation-menu-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-item.js

@@ -18,6 +18,9 @@ export class SekiNavigationMenuItem {
         /** Whether mobile accordion is expanded */
         this.mobileExpanded = false;
         this.menuContextSubscription = { parent: null, unsubscribe: () => { } };
+        // componentDidLoad runs once, but disconnectedCallback tears down on every
+        // DOM move, so set up again when an already-loaded element reconnects (#333).
+        this.hasLoaded = false;
         this.handleMenuContextChange = () => {
             const menu = this.el.closest('seki-navigation-menu');
             const context = menu === null || menu === void 0 ? void 0 : menu.navigationMenuContext;
@@ -36,7 +39,14 @@ export class SekiNavigationMenuItem {
         }
         this.findParentMenu();
     }
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.findParentMenu();
+        this.registerWithParent();
+    }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.registerWithParent();
     }
     disconnectedCallback() {
@@ -73,6 +83,7 @@ export class SekiNavigationMenuItem {
         publishContext(this.el, 'navigationMenuItemContext', { isOpen: this.isOpen, isMobile: this.isMobile }, this.itemContextChange);
     }
     registerWithParent() {
+        this.menuContextSubscription.unsubscribe();
         this.menuContextSubscription = subscribeToContextChange(this.el, 'seki-navigation-menu', this.handleMenuContextChange);
         // Resync immediately so this item starts correct even if it mounts after
         // the menu already has an open item / is already in mobile mode.
@@ -101,12 +112,12 @@ export class SekiNavigationMenuItem {
         return this.parentMenu;
     }
     render() {
-        return (h(Host, { key: '3586cea4df93f1934b0e28382cb5f1ffbc1e6afe', class: {
+        return (h(Host, { key: '3d6251d7c1969dcb71909d193aa9022ad1a28f4f', class: {
                 'navigation-menu-item': true,
                 'navigation-menu-item--open': this.isOpen,
                 'navigation-menu-item--mobile': this.isMobile,
                 'navigation-menu-item--mobile-expanded': this.mobileExpanded,
-            }, "data-item-id": this.itemId, "data-mobile-expanded": this.mobileExpanded ? '' : undefined }, h("li", { key: 'bbeebfa762fc7de6d72833eb8c4bbfb9e9fcb110', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: '196860f245f0bec3b4371c4f781533b0f852c657' }))));
+            }, "data-item-id": this.itemId, "data-mobile-expanded": this.mobileExpanded ? '' : undefined }, h("li", { key: 'a0b748f0295a921b5ec692df30b6f1f43e56401f', class: "navigation-menu-item__container", role: "none" }, h("slot", { key: 'dddb2c123047b04d81ea21d0ba9da70efecb5731' }))));
     }
     static get is() { return "seki-navigation-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-list.js

@@ -6,6 +6,9 @@ export class SekiNavigationMenuList {
         this.isMobile = false;
         /** Current focused trigger index */
         this.focusedIndex = 0;
+        // componentDidLoad runs once, but disconnectedCallback tears down on every
+        // DOM move, so set up again when an already-loaded element reconnects (#333).
+        this.hasLoaded = false;
         this.handleKeyDown = (event) => {
             const triggers = this.getTriggers();
             if (triggers.length === 0)
@@ -31,10 +34,14 @@ export class SekiNavigationMenuList {
         };
     }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.setupKeyboardNavigation();
     }
     connectedCallback() {
         this.attrMirror = mirrorAncestorAttributes(this.el, 'seki-navigation-menu', ['data-mobile']);
+        // addEventListener ignores a duplicate of the same handler.
+        if (this.hasLoaded)
+            this.setupKeyboardNavigation();
     }
     disconnectedCallback() {
         var _a;
@@ -103,7 +110,7 @@ export class SekiNavigationMenuList {
         this.focusedIndex = index;
     }
     render() {
-        return (h(Host, { key: '7c8d4112c3bf01fc49d46fc58072255b48b7704f' }, h("ul", { key: 'a7cb204d2cb8aff99fdba6205d766d612570b611', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '384fa6c10772c26c0776fd3504662e62705cec27' }))));
+        return (h(Host, { key: '57c5699675e1262171dee7701014ce7cac8173ee' }, h("ul", { key: '01f25f51e1efcc3788602fba02f9592f6266095f', class: "navigation-menu-list", role: "menubar" }, h("slot", { key: '78b51909dede624e7a0d8aff8f00fca14d65ca9f' }))));
     }
     static get is() { return "seki-navigation-menu-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-trigger.js

@@ -16,6 +16,9 @@ export class SekiNavigationMenuTrigger {
         this.isMobile = false;
         this.isTouchDevice = false;
         this.itemContextSubscription = { parent: null, unsubscribe: () => { } };
+        // componentDidLoad runs once, but disconnectedCallback tears down on every
+        // DOM move, so set up again when an already-loaded element reconnects (#333).
+        this.hasLoaded = false;
         this.handleItemContextChange = () => {
             const item = this.el.closest('seki-navigation-menu-item');
             const context = item === null || item === void 0 ? void 0 : item.navigationMenuItemContext;
@@ -113,7 +116,18 @@ export class SekiNavigationMenuTrigger {
         this.findParentElements();
         this.detectTouchDevice();
     }
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.findParentElements();
+        this.subscribeToItem();
+    }
     componentDidLoad() {
+        this.hasLoaded = true;
+        this.subscribeToItem();
+    }
+    subscribeToItem() {
+        this.itemContextSubscription.unsubscribe();
         this.itemContextSubscription = subscribeToContextChange(this.el, 'seki-navigation-menu-item', this.handleItemContextChange);
         this.handleItemContextChange();
     }
@@ -155,7 +169,8 @@ export class SekiNavigationMenuTrigger {
         // Allow content to render first
         requestAnimationFrame(() => {
             var _a, _b;
-            const content = (_a = this.parentItem) === null || _a === void 0 ? void 0 : _a.el.querySelector('seki-navigation-menu-content');
+            // `parentItem` is the host element under the lazy loader (no `el`).
+            const content = (_a = this.el.closest('seki-navigation-menu-item')) === null || _a === void 0 ? void 0 : _a.querySelector('seki-navigation-menu-content');
             if (content) {
                 const firstLink = content.querySelector('seki-navigation-menu-link');
                 if (firstLink) {
@@ -170,12 +185,12 @@ export class SekiNavigationMenuTrigger {
     }
     render() {
         const itemId = this.getItemId();
-        return (h(Host, { key: '3f8474f05e9eeb0aa7581397417d3022de0ce599', class: {
+        return (h(Host, { key: '62f1f940722af46e8c18394ecdbc70721acd0576', class: {
                 'navigation-menu-trigger': true,
                 'navigation-menu-trigger--open': this.isOpen,
                 'navigation-menu-trigger--disabled': this.disabled,
                 'navigation-menu-trigger--mobile': this.isMobile,
-            } }, h("button", { key: '348ada3dffa6e6d3d66346d67460fe7bfe957125', type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: 'e53f5e0b209f7dd5bd6b85285809b14ff9f5624e', class: "navigation-menu-trigger__label" }, h("slot", { key: '777910a3d8e0d4c06ebe372542516f1458277370' })), h("svg", { key: 'd507fc70e02c0e7ee73ee38314b86cd8026454ac', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a975f7dffdc86730b7345ec46c2f4a9d4f4fea77', points: "2 4 6 8 10 4" })))));
+            } }, h("button", { key: 'd5c2bb389c678e3aa1e135f758220223cb381fcf', type: "button", class: "navigation-menu-trigger__button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": String(this.isOpen), "aria-controls": `content-${itemId}`, disabled: this.disabled, tabindex: this.isOpen ? '0' : '-1', onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("span", { key: '30810edb2410c8a038dcb16eb301e21c4b808ee1', class: "navigation-menu-trigger__label" }, h("slot", { key: '96d7e29c408921a22230293e9beb9735306ca5dd' })), h("svg", { key: 'cabd313b584f491e0cfcebf5f9783fca7a8075d1', class: "navigation-menu-trigger__chevron", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '8db212511941913b02c2304851a7b5b96fc713ef', points: "2 4 6 8 10 4" })))));
     }
     static get is() { return "seki-navigation-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu-viewport.css

@@ -30,7 +30,7 @@
   transform: translateX(-50%);
   z-index: 41;
   color: var(--seki-background);
-  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
+  filter: drop-shadow(var(--seki-drop-shadow-up, 0 -2px 2px rgb(0 0 0 / 0.05)));
   transition: left 200ms ease;
 }
 

package/dist/collection/components/navigation-menu/seki-navigation-menu-viewport.js

@@ -19,11 +19,21 @@ export class SekiNavigationMenuViewport {
         this.contentOffset = 0;
         /** Current content height for animation */
         this.contentHeight = 0;
+        // =========================================================================
+        // Lifecycle
+        // =========================================================================
+        // componentDidLoad runs once, but disconnectedCallback tears down on every
+        // DOM move, so set up again when an already-loaded element reconnects (#333).
+        this.hasLoaded = false;
+    }
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.cleanupResizeObserver();
+        this.setupResizeObserver();
     }
-    // =========================================================================
-    // Lifecycle
-    // =========================================================================
     componentDidLoad() {
+        this.hasLoaded = true;
         this.setupResizeObserver();
     }
     disconnectedCallback() {
@@ -138,14 +148,14 @@ export class SekiNavigationMenuViewport {
         return h("slot", null);
     }
     render() {
-        return (h(Host, { key: '9a7a71359bd65aed23c51aa4849e29af0167e69e', class: {
+        return (h(Host, { key: '7a94b4d2db053be5fca871b20994cdf407976dfc', 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: 'f2d1f7a4e9188e5ade10d9d6352a2e07dffacf3f', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '2b05e0ee187d7e1085fc17109d8464bdd36baf40', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: '758ca94b027abc70d9f811d6e7592a83ea102914', points: "10,0 20,10 0,10" }))), h("div", { key: '35add8a4203a528e1772567157187aca1afe2605', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
+            } }, h("div", { key: '4eea023ed6510411f38d6bb773bf807011bc3840', class: "navigation-menu-viewport__indicator" }, h("svg", { key: '391243d3c8507846005cae7da2a548b3e930c3bb', width: "20", height: "10", viewBox: "0 0 20 10", fill: "currentColor" }, h("polygon", { key: 'b4f437bf39c0b59dcbada90b5c4dea54b2dc3a20', points: "10,0 20,10 0,10" }))), h("div", { key: '2b29dda79e4e08adfb22199e896459c1f0e22612', ref: el => (this.contentRef = el), class: "navigation-menu-viewport__content" }, this.renderContent())));
     }
     static get is() { return "seki-navigation-menu-viewport"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-menu/seki-navigation-menu.css

@@ -328,6 +328,33 @@
   --seki-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
+/*
+ * Component-specific elevations. Values are the shadows the components shipped
+ * with before they were tokenised, so rendering is unchanged. Components must
+ * reference these (with a fallback) instead of writing rgb(0 0 0 / x) literals;
+ * tests/integration/dark-mode-compliance.spec.ts enforces that.
+ */
+:host {
+  /* Tabs active trigger (Tailwind "shadow") */
+  --seki-shadow-xs-plus: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  /* Card resting / hover, slider thumb */
+  --seki-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-card-hover: 0 4px 6px 0 rgb(0 0 0 / 0.1);
+  --seki-shadow-thumb-hover: 0 2px 6px 0 rgb(0 0 0 / 0.15);
+  /* Floating surfaces: toast, carousel buttons */
+  --seki-shadow-floating: 0 4px 12px 0 rgb(0 0 0 / 0.15);
+  --seki-shadow-floating-sm: 0 2px 8px 0 rgb(0 0 0 / 0.1);
+  /* Modal surfaces: dialog, alert-dialog, sheet; drawer rises from the bottom */
+  --seki-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --seki-shadow-overlay-top: 0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 -4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Argument of filter: drop-shadow() (navigation-menu viewport arrow) */
+  --seki-drop-shadow-up: 0 -2px 2px rgb(0 0 0 / 0.05);
+
+  /* Scrims behind modal surfaces */
+  --seki-overlay: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
+  --seki-overlay-strong: rgb(0 0 0 / 0.8);
+}
+
 /**
  * SekiUI Design Tokens - Typography
  * System font stacks, sizes, weights, line heights
@@ -819,7 +846,7 @@
 .navigation-menu__sheet-backdrop {
   position: fixed;
   inset: 0;
-  background-color: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
+  background-color: var(--seki-overlay, light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7)));
   z-index: 40;
   animation: fadeIn var(--seki-nav-animation-duration) ease;
 }

package/dist/collection/components/navigation-menu/seki-navigation-menu.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
+import { OverlayLayer } from "../../utils/overlay";
 export class SekiNavigationMenu {
     constructor() {
         // =========================================================================
@@ -23,6 +24,25 @@ export class SekiNavigationMenu {
         /** Whether mobile sheet is open */
         this.mobileSheetOpen = false;
         this.registeredItems = new Map();
+        this.hasLoaded = false;
+        /**
+         * Non-modal place on the shared overlay stack (utils/overlay.ts) while a
+         * menu item or the mobile sheet is open. Escape goes to the topmost open
+         * layer only, so inside a dialog one Escape closes the menu and leaves the
+         * dialog open; before this the dialog (the only layer on the stack) closed
+         * on the same key press. Opened after the dialog, the menu sits above it.
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                event.preventDefault();
+                if (this.activeItem) {
+                    this.closeItem();
+                }
+                else if (this.mobileSheetOpen) {
+                    this.handleSheetClose();
+                }
+            },
+        });
         this.clickOutsideHandler = (event) => {
             const target = event.target;
             if (!this.el.contains(target)) {
@@ -46,13 +66,30 @@ export class SekiNavigationMenu {
     componentWillLoad() {
         this.checkMobileBreakpoint();
     }
+    // componentDidLoad runs once, but disconnectedCallback tears down on every
+    // DOM move, so set up again when an already-loaded menu reconnects (#333).
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.setupResizeObserver();
+        this.setupClickOutside();
+        this.syncLayer();
+    }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.setupResizeObserver();
         this.setupClickOutside();
     }
     disconnectedCallback() {
         this.cleanupResizeObserver();
         this.cleanupClickOutside();
+        this.layer.setActive(false);
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    syncLayer() {
+        this.layer.setActive(this.el.isConnected && (this.activeItem !== null || this.mobileSheetOpen));
     }
     // =========================================================================
     // Public Methods
@@ -88,6 +125,7 @@ export class SekiNavigationMenu {
     setupResizeObserver() {
         if (typeof ResizeObserver === 'undefined')
             return;
+        this.cleanupResizeObserver();
         this.resizeObserver = new ResizeObserver(() => {
             this.checkMobileBreakpoint();
         });
@@ -210,10 +248,10 @@ export class SekiNavigationMenu {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '6404804c3b5b8b5e3b164d1eb1df5e7727a7f04a', class: {
+        return (h(Host, { key: '2cda8d62f811b812745a2f011bf8f2e6a5ddd569', class: {
                 'navigation-menu': true,
                 'navigation-menu--mobile': this.isMobile,
-            }, "data-mobile": this.isMobile ? '' : undefined }, h("nav", { key: '676909a20446d14d08ac8b2ebaf0090368e282e2', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
+            }, "data-mobile": this.isMobile ? '' : undefined }, h("nav", { key: '1c612eae2bda8bd9b9945a2bc8311778c4190746', class: "navigation-menu__nav", role: "navigation", "aria-label": this.ariaLabel }, this.isMobile ? this.renderMobileNav() : this.renderDesktopNav())));
     }
     renderDesktopNav() {
         return [
@@ -551,4 +589,13 @@ export class SekiNavigationMenu {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeItem",
+                "methodName": "syncLayer"
+            }, {
+                "propName": "mobileSheetOpen",
+                "methodName": "syncLayer"
+            }];
+    }
 }