@sekiui/elements 0.0.81 → 0.0.83

package/dist/collection/components/carousel/seki-carousel-dots.js

@@ -73,10 +73,10 @@ export class SekiCarouselDots {
         // Initial state
         await this.updateState();
         // Listen for slide changes
-        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.parentCarousel.addEventListener('sekiSlideChange', this.handleSlideChange);
         this.unsubscribe = () => {
             var _a;
-            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiSlideChange', this.handleSlideChange);
         };
     }
     async updateState() {
@@ -88,7 +88,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: 'bd3c1c3112189f28d54d482f0fffce6cbe090d71', class: "carousel-dots" }, h("div", { key: '2a3fedff1c1ddf4eae91099b3053c3594194e99c', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: '177e32f3366f093b08997e67f61eafcd5149c543', class: "carousel-dots" }, h("div", { key: '2f2e62e001bb23f81d1d4c0d128da5681e4b3261', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
                 'carousel-dots__dot': true,
                 'carousel-dots__dot--active': index === this.selectedIndex,
             }, role: "tab", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index + 1}`, tabindex: index === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index), onKeyDown: (e) => this.handleKeyDown(e, index) }, h("span", { class: "carousel-dots__dot-inner" })))))));

package/dist/collection/components/carousel/seki-carousel-next.js

@@ -41,10 +41,10 @@ export class SekiCarouselNext {
         // Initial state
         await this.updateState();
         // Listen for slide changes
-        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.parentCarousel.addEventListener('sekiSlideChange', this.handleSlideChange);
         this.unsubscribe = () => {
             var _a;
-            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiSlideChange', this.handleSlideChange);
         };
     }
     async updateState() {
@@ -54,7 +54,7 @@ export class SekiCarouselNext {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: '9053780aa30fbb12f31a8a3f6e21cb88c3830db6', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '3cec362457512dcc35e4689c7cbe9be09c808b74', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '773bf46ed6baf45a4dba098f167f135cd7c5d8d7', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '760fce67ba7c60eef8be5d781d790a20e80fd3fa', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: '267ae3c889aa77f1b15a4f9b5e4aa3cf46dab2f7', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '5f50fac8181f643368c256530ec28996f5f8a164', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '878dac075db363ec2337615a3ec747fc1fc4a9f5', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '55e835953c60b00c8974cef4d3d2258ab8385b95', points: "9 18 15 12 9 6" })))));
     }
     static get is() { return "seki-carousel-next"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel-previous.js

@@ -41,10 +41,10 @@ export class SekiCarouselPrevious {
         // Initial state
         await this.updateState();
         // Listen for slide changes
-        this.parentCarousel.addEventListener('seki-slide-change', this.handleSlideChange);
+        this.parentCarousel.addEventListener('sekiSlideChange', this.handleSlideChange);
         this.unsubscribe = () => {
             var _a;
-            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('seki-slide-change', this.handleSlideChange);
+            (_a = this.parentCarousel) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiSlideChange', this.handleSlideChange);
         };
     }
     async updateState() {
@@ -54,7 +54,7 @@ export class SekiCarouselPrevious {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: 'd17472f9b95ee28bd1428ce441a848ed4677dd3f', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '0a8eb4b1d448e6b7ab417caacf29ccf356c6f389', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '444b771ffdecf2db2de226edac2121abce9ebdb6', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '0a06f076ac8a1183228330bfe74b4286f3ef99e9', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: '65561be0cf5c06eb26257de6801bb46f8362b3ac', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '55c66c69c07f951d2a11d55b368b769712dc37a4', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '46693095d37b5ac31662f836a12430afca78baaf', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '7409dd4ba65445aaa3018204522556d75b37ca5f', points: "15 18 9 12 15 6" })))));
     }
     static get is() { return "seki-carousel-previous"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel.js

@@ -44,6 +44,8 @@ export class SekiCarousel {
         this.emblaApi = null;
         this.autoplayInterval = null;
         this.viewportEl = null;
+        this.initRafId = null;
+        this.initRetries = 0;
         this.handleSelect = () => {
             this.updateState();
             this.slideChange.emit({
@@ -120,6 +122,10 @@ export class SekiCarousel {
         var _a;
         unregisterThemeSync(this.el);
         this.stopAutoplay();
+        if (this.initRafId !== null) {
+            cancelAnimationFrame(this.initRafId);
+            this.initRafId = null;
+        }
         (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     // =========================================================================
@@ -188,10 +194,20 @@ export class SekiCarousel {
         // Get the inner container (seki-carousel-content uses shadow: false)
         const containerEl = this.viewportEl.querySelector('.carousel-content');
         if (!containerEl) {
-            // Wait for content to render
-            requestAnimationFrame(() => this.initEmbla());
+            // Content child hasn't rendered yet. Retry next frame, but bail if the
+            // carousel was disconnected or we've exhausted the retry budget so this
+            // can never become an unbounded, uncancellable rAF loop.
+            if (!this.el.isConnected || this.initRetries >= SekiCarousel.MAX_INIT_RETRIES) {
+                this.initRafId = null;
+                return;
+            }
+            this.initRetries++;
+            this.initRafId = requestAnimationFrame(() => this.initEmbla());
             return;
         }
+        // Container found — reset retry bookkeeping.
+        this.initRetries = 0;
+        this.initRafId = null;
         const options = {
             loop: this.loop,
             startIndex: this.startIndex,
@@ -256,7 +272,7 @@ export class SekiCarousel {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '7e151bbdee88a944d2b9ad74bcbd93bd1f53104b', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: '5cc47d28a19c0d083f83d13f284764ee46e96b7e', class: "carousel__container" }, h("slot", { key: '93f7c9893c7e8998fd2afefd6cf11837ee6ca97d' })), h("div", { key: '8f6b20d9c4e4aa6522c49800e2733950ecc0f6ed', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+        return (h(Host, { key: 'af9fa29a7669fc4637111bb9efaf7c9f25c51603', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: 'a5ef6de3283f4e92496a5b0dd2ac34baf93ca22a', class: "carousel__container" }, h("slot", { key: 'ddbc533588e097e1dbb76f7867d1426a76cc55d9' })), h("div", { key: '393015fda7b8a47826f83408acb704f0f792964b', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
     }
     static get is() { return "seki-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -446,7 +462,7 @@ export class SekiCarousel {
     static get events() {
         return [{
                 "method": "slideChange",
-                "name": "seki-slide-change",
+                "name": "sekiSlideChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -576,3 +592,5 @@ export class SekiCarousel {
             }];
     }
 }
+// ~1s of frames at 60fps; enough for child content to render without spinning forever.
+SekiCarousel.MAX_INIT_RETRIES = 60;

package/dist/collection/components/collapsible/seki-collapsible-content.js

@@ -9,6 +9,9 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiCollapsibleContent {
     constructor() {
+        this.onCollapsibleOpenChange = () => {
+            this.syncWithContext();
+        };
         this._isOpen = false;
         this._isAnimating = false;
         this._contentHeight = 0;
@@ -42,9 +45,8 @@ export class SekiCollapsibleContent {
                 attributeFilter: ['data-state'],
             });
             // Also listen for custom events
-            parent.addEventListener('sekiOpenChange', () => {
-                this.syncWithContext();
-            });
+            this.collapsibleEl = parent;
+            this.collapsibleEl.addEventListener('sekiOpenChange', this.onCollapsibleOpenChange);
         }
     }
     syncWithContext() {
@@ -70,10 +72,12 @@ export class SekiCollapsibleContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
         if (this.observer) {
             this.observer.disconnect();
         }
+        (_a = this.collapsibleEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onCollapsibleOpenChange);
     }
     render() {
         var _a, _b;
@@ -91,11 +95,11 @@ export class SekiCollapsibleContent {
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: 'bf1ac3ee2b00d6350c7713b2de41f008a425af5b', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '5a3700546bbd8d0b85a955561c4c8239d01f871f', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: 'bd513b01e2255e613b63f87ae98dd0f6f4ef8492', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '787691395dd95623156e80c817198c57b0275e24', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
                 'collapsible-content': true,
                 'collapsible-content--open': this._isOpen,
                 'collapsible-content--animating': this._isAnimating,
-            }, style: contentStyle }, h("div", { key: '591a6ac8aecc5ea8a9a45eea4612f0ae9605b808', class: "collapsible-content-inner" }, h("slot", { key: 'cb29e456beec778419f3dd3409aa14c4ea2d2716' })))));
+            }, style: contentStyle }, h("div", { key: '6d40421fe1a88b650f97b781e9e7f84d96c49b08', class: "collapsible-content-inner" }, h("slot", { key: '34c249f5514a6952ae2b8ec9250cdfe81bbbfa0f' })))));
     }
     static get is() { return "seki-collapsible-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/combobox-item/seki-combobox-item.js

@@ -10,6 +10,7 @@ export class SekiComboboxItem {
         this.isSelected = false;
         this.isFocused = false;
         this.itemId = `combobox-item-${Math.random().toString(36).substr(2, 9)}`;
+        this.hasRegistered = false;
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -39,6 +40,11 @@ export class SekiComboboxItem {
     }
     connectedCallback() {
         registerThemeSync(this.el);
+        // Re-register on reconnect (after a DOM move). componentWillLoad fires only
+        // once; parent registration is idempotent so this never duplicates.
+        if (this.hasRegistered) {
+            this.registerWithContext();
+        }
     }
     disconnectedCallback() {
         unregisterThemeSync(this.el);
@@ -61,6 +67,7 @@ export class SekiComboboxItem {
                 disabled: this.disabled,
             };
             ctx.registerItem(item);
+            this.hasRegistered = true;
         }
     }
     updateState() {
@@ -71,12 +78,12 @@ export class SekiComboboxItem {
         }
     }
     render() {
-        return (h(Host, { key: '4c80e142ee793a4430187c253db78f446788f5b9' }, h("div", { key: '5a8ea6662345b5999f95033dcbdfe5f90401be7e', id: this.itemId, class: {
+        return (h(Host, { key: 'f319a878642420c67560fbf223202d61ad8fcbea' }, h("div", { key: '682f96162227071773c2450f63384d62b7e5c39e', id: this.itemId, class: {
                 'combobox-item': true,
                 'selected': this.isSelected,
                 'focused': this.isFocused,
                 'disabled': this.disabled,
-            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: '77efd44357fbd3ac3d7725920fe260ff5b3047eb' }), this.isSelected && (h("svg", { key: '039e83fd1f38fd81efc2c8100ff956786a0fed9a', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'cc36db3f5376cc1c7022bd1f383d6b3491c72e2e', points: "20 6 9 17 4 12" }))))));
+            }, role: "option", "aria-selected": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter }, h("slot", { key: 'f21ad109b3468aa420e57215ea4e3c3ea7152736' }), this.isSelected && (h("svg", { key: 'd7625ed734c9f90577793b9ed79182332dc7532b', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '649d4c36fc7f251c77a9a4197a8583f9188a2b64', points: "20 6 9 17 4 12" }))))));
     }
     static get is() { return "seki-combobox-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/command/seki-command-group.js

@@ -10,6 +10,10 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiCommandGroup {
     constructor() {
+        this.onCommandValueChange = () => {
+            // Small delay to allow items to update first
+            requestAnimationFrame(() => this.updateVisibility());
+        };
         /**
          * Show even when all items are filtered out
          */
@@ -35,19 +39,17 @@ export class SekiCommandGroup {
         this._hasVisibleItems = items.some((item) => { var _a, _b; return (_b = (_a = item.isVisible) === null || _a === void 0 ? void 0 : _a.call(item)) !== null && _b !== void 0 ? _b : true; });
     }
     componentDidLoad() {
-        const command = this.el.closest('seki-command');
-        if (command) {
-            command.addEventListener('sekiValueChange', () => {
-                // Small delay to allow items to update first
-                requestAnimationFrame(() => this.updateVisibility());
-            });
-        }
+        var _a, _b;
+        this.commandEl = (_a = this.el.closest('seki-command')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.commandEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onCommandValueChange);
     }
     connectedCallback() {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.commandEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onCommandValueChange);
     }
     render() {
         const shouldShow = this.forceMount || this._hasVisibleItems;

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

@@ -9,6 +9,18 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiContextMenuContent {
     constructor() {
+        this.onMenuOpenChange = () => {
+            var _a;
+            const context = this.getContext();
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (this._isOpen) {
+                this._focusedIndex = 0;
+                requestAnimationFrame(() => {
+                    this.updatePosition();
+                    this.focusItem(0);
+                });
+            }
+        };
         /**
          * Internal open state
          */
@@ -38,21 +50,9 @@ export class SekiContextMenuContent {
         this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
     }
     componentDidLoad() {
-        const menu = this.el.closest('seki-context-menu');
-        if (menu) {
-            menu.addEventListener('sekiOpenChange', () => {
-                var _a;
-                const context = this.getContext();
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (this._isOpen) {
-                    this._focusedIndex = 0;
-                    requestAnimationFrame(() => {
-                        this.updatePosition();
-                        this.focusItem(0);
-                    });
-                }
-            });
-        }
+        var _a, _b;
+        this.menuEl = (_a = this.el.closest('seki-context-menu')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -132,7 +132,9 @@ export class SekiContextMenuContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
         if (!this._isOpen) {

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

@@ -91,7 +91,11 @@ export class SekiContextMenu {
         }
     }
     setupClickOutside() {
-        setTimeout(() => {
+        // Clear any pending timeout/handler first so a rapid open→close→open cannot
+        // leave a leaked listener or double-schedule.
+        this.removeClickOutside();
+        this.clickOutsideTimeout = setTimeout(() => {
+            this.clickOutsideTimeout = undefined;
             this.clickOutsideHandler = (e) => {
                 const path = e.composedPath();
                 if (!path.includes(this.el)) {
@@ -102,6 +106,11 @@ export class SekiContextMenu {
         }, 0);
     }
     removeClickOutside() {
+        // Cancel a still-pending registration so it can't fire after close/disconnect.
+        if (this.clickOutsideTimeout !== undefined) {
+            clearTimeout(this.clickOutsideTimeout);
+            this.clickOutsideTimeout = undefined;
+        }
         if (this.clickOutsideHandler) {
             document.removeEventListener('click', this.clickOutsideHandler, { capture: true });
             this.clickOutsideHandler = undefined;
@@ -135,7 +144,7 @@ export class SekiContextMenu {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: '82ae20d56c6474122933af9d63cf7fd671d12787', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '9a976b7c139ebd532c0096d1e80ebce309c9cb85', part: "context-menu", class: "context-menu" }, h("slot", { key: '2257fc5c3a809e1083d8bc37999b0b2d6c6e474a' }))));
+        return (h(Host, { key: '5b5df7991cfde56635d4ace1d7f3728effac91fd', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '0ab469157d55ed82e05711a8a6f8d972b74bc4a1', part: "context-menu", class: "context-menu" }, h("slot", { key: '1ffbe73e2be43d3f3434e1712c47481c3dc62500' }))));
     }
     static get is() { return "seki-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/data-table/seki-data-table.css

@@ -771,9 +771,12 @@
   --seki-table-row-bg: var(--seki-background);
   --seki-table-row-bg-hover: var(--seki-muted);
   --seki-table-row-bg-selected: hsl(210, 100%, 96%);
+  --seki-table-row-bg-selected-hover: hsl(210, 100%, 94%);
   --seki-table-row-height: 48px;
   --seki-table-cell-padding: 0 12px;
   --seki-table-pagination-height: 52px;
+  /* Subtle focus ring shadow for the search input */
+  --seki-table-focus-ring: hsl(0, 0%, 3.9%, 0.1);
 }
 
 /* Screen reader only */
@@ -835,7 +838,7 @@
 
 .data-table__search-input:focus {
   border-color: var(--seki-ring);
-  box-shadow: 0 0 0 2px hsl(0, 0%, 3.9%, 0.1);
+  box-shadow: 0 0 0 2px var(--seki-table-focus-ring, hsl(0, 0%, 3.9%, 0.1));
 }
 
 .data-table__search-input::placeholder {
@@ -1252,10 +1255,7 @@
 
 :host([data-theme='dark']) {
   --seki-table-row-bg-selected: hsl(210, 50%, 20%);
-}
-
-:host([data-theme='dark']) .data-table__row--selected:hover {
-  background: hsl(210, 50%, 25%);
+  --seki-table-row-bg-selected-hover: hsl(210, 50%, 25%);
 }
 
 :host([data-theme='dark']) .data-table__th--sortable:hover,

package/dist/collection/components/data-table/seki-data-table.js

@@ -210,6 +210,9 @@ export class SekiDataTable {
     disconnectedCallback() {
         unregisterThemeSync(this.el);
         this.cleanupVirtualScroll();
+        // If the table is removed mid column-resize, tear down the document-level
+        // drag listeners so they don't leak and keep firing against a dead instance.
+        this.stopResize();
     }
     // =========================================================================
     // Watchers
@@ -422,10 +425,10 @@ export class SekiDataTable {
         const visibleColumns = this.getVisibleColumns();
         const totalPages = this.getTotalPages();
         const isLoading = this.state.loading || this.loading;
-        return (h(Host, { key: 'daac334a0c51a2c38d2462e69668b49b9cf0845f' }, h("div", { key: '320239a41874b49a54a36499ee9599203cc144fa', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: 'e8e5e43d6a5dedf533c988a423c02f97ff7695d7', class: "data-table__toolbar" }, this.searchable && (h("div", { key: '84315865dea83f917544b7b5046f3a537bf5091c', class: "data-table__search" }, h("input", { key: '1fb3f653e5a7b9d9112837fd217f9b373f1436d9', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '1ae069c19e0324d3a5b7563b4857e1dc5a182f1f', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: '19e524688fb1a3313038c28368305ce73cf5d418', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: 'a66bb36f6a964a7b3a7a93ba1c01753468f6eea3', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: 'ceecb98492c47a58e235bebf9d0d689b7efc1453', class: {
+        return (h(Host, { key: '28ceb869aa750654845f1ee4a8b4b8098104e6cf' }, h("div", { key: '9240e18c99fb45ce16c056081151b2f8bdc38132', class: "data-table" }, (this.searchable || this.columnPicker) && (h("div", { key: '31e765bf85d64761738c7aaea3c849050665453d', class: "data-table__toolbar" }, this.searchable && (h("div", { key: 'b708cb0661af64ced765e486a11fb64bd12c8696', class: "data-table__search" }, h("input", { key: 'd136d0e4974a28ac4171ef692fcd189570849937', type: "text", class: "data-table__search-input", placeholder: this.searchPlaceholder, value: this.searchInputValue, onInput: this.handleSearchInput }), this.searchInputValue && (h("button", { key: '7abf0715c25a2810122234bda065f0d52e71a314', type: "button", class: "data-table__search-clear", onClick: this.handleClearSearch, "aria-label": "Clear search" }, "\u00D7")))), h("div", { key: 'f12305514367874f1abc14124498fefe47faaf56', class: "data-table__toolbar-spacer" }), this.columnPicker && (h("button", { key: '90d9826e8bbe87d75c0bdb5a1125852249119eee', type: "button", class: "data-table__column-picker-btn" }, "Columns")))), h("div", { key: 'c563a0df32be909940680f39529117f9a60add23', class: {
                 'data-table__container': true,
                 'data-table__container--virtual': this.virtualScroll,
-            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '80a809c5b512f17ed773a40728b36d174c025896', class: "data-table__table", role: "grid" }, h("thead", { key: 'bb85f8ec33fbcc335869f8e5de2e204f0512741c', class: "data-table__head" }, h("tr", { key: '371a5747df1b723be42f75de681a80211af54f8a', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'ec51e2cbbb1922ee163814bf89bd4a6e0daf1e87', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '3e686e9d830035c7c95dc1978a63b353dbde72e0', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '8df31b80c23d2860932ee2a65cae7aa2e34a5388', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: '0bbf124d977839604872a9c538567d569d77d51e', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
+            }, ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, h("table", { key: '9f12f68eeaf360a362f6b32a10909fc22e8454aa', class: "data-table__table", role: "grid" }, h("thead", { key: '05394e9be4a94bf648be63ab15d8cd8b60f92bae', class: "data-table__head" }, h("tr", { key: '91e475902cf1d0f84ccdb07e73efea557a505540', class: "data-table__header-row", role: "row" }, this.selectable && (h("th", { key: 'bd98052d239f76b81ec73f46b1c7727a4d56d11b', class: "data-table__th data-table__th--checkbox", role: "columnheader" }, h("input", { key: '081bb7a3b26ea6755eba7b05d8664f7cc3f39701', type: "checkbox", class: "data-table__checkbox", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onChange: (e) => this.handleSelectAll(e.target.checked), "aria-label": "Select all rows" }))), this.expandable && (h("th", { key: '6be313fbacc1620a1803bc651655fc957d126a4a', class: "data-table__th data-table__th--expand", role: "columnheader" }, h("span", { key: 'a929282be3cf11031364886bde2db35538c863a6', class: "sr-only" }, "Expand"))), visibleColumns.map(column => {
             var _a, _b, _c;
             return (h("th", { key: column.field, class: {
                     'data-table__th': true,
@@ -441,7 +444,7 @@ export class SekiDataTable {
                     ? '↑'
                     : '↓'
                 : '↕'))), column.resizable && (h("div", { class: "data-table__resize-handle", onMouseDown: (e) => this.startResize(e, column) }))));
-        }))), h("tbody", { key: 'cb6c923b7757fe9687556c53621defce89ee7248', class: "data-table__body", style: this.virtualScroll
+        }))), h("tbody", { key: 'ea90c0cffef68f675dbcdb784f6af4c4736b481d', class: "data-table__body", style: this.virtualScroll
                 ? {
                     height: `${this.virtualScrollState.totalHeight}px`,
                     position: 'relative',
@@ -484,12 +487,12 @@ export class SekiDataTable {
                 /* Expanded content row */
                 isExpanded && this.renderExpandedRow && (h("tr", { key: `${rowKey}-expanded`, class: "data-table__row data-table__row--expanded-content" }, h("td", { class: "data-table__td data-table__td--expanded-content", colSpan: visibleColumns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0) }, h("div", { class: "data-table__expanded-content", innerHTML: this.renderExpandedRow(row) })))),
             ];
-        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: 'f935cd42e1b83fafe8599f817e6967a81f33bb6f', class: "data-table__loading-overlay" }, h("div", { key: '77b3a15b7699f06b706cdfac8c4f6c7ad27dd732', class: "data-table__loading" }, "Loading...")))), h("div", { key: '553c6094c40a7ab852fcc84b7af4b27c1bbe473c', class: "data-table__pagination" }, h("div", { key: 'c287f97df2f2391de1f003cc1f5bb68ec65fb135', class: "data-table__pagination-info" }, this.state.totalRows > 0
+        })))), isLoading && this.state.rows.length > 0 && (h("div", { key: '3048704d91f332dded81f17b86742bcc21724707', class: "data-table__loading-overlay" }, h("div", { key: '01b2096307846f9b789cbde6c8fcc0c249dd81d1', class: "data-table__loading" }, "Loading...")))), h("div", { key: 'd230704865900c12987432ffca17a54f7d8628fd', class: "data-table__pagination" }, h("div", { key: 'f88338d4c773e19d46ee577b22e6721a439a3806', class: "data-table__pagination-info" }, this.state.totalRows > 0
             ? `${this.state.page * this.state.pageSize + 1}-${Math.min((this.state.page + 1) * this.state.pageSize, this.state.totalRows)} of ${this.state.totalRows}`
-            : '0 results'), h("div", { key: '82992dabc9c7673409c3449bcc73d07156e41745', class: "data-table__pagination-controls" }, h("select", { key: '571b8039e8cc6719311d8ac03be984e2bacb53e1', class: "data-table__page-size", onChange: (e) => {
+            : '0 results'), h("div", { key: 'd9fa5a331c4f874aace2f7858c8ec1936fd74262', class: "data-table__pagination-controls" }, h("select", { key: 'b447f82c03c920f429b3d1ca0a9e0a5484baaa6a', class: "data-table__page-size", onChange: (e) => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 this.handlePageSizeChange(Number(e.target.value));
-            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '5104ef001a34d25f584f9fda57d16ad7c4719b41', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: 'fed06e6f73a10d00c360a8a5cb6911a6aa8abf0e', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '52b311be026f7b0781d22f53f78782fb82e44a80', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: '5e9ab2a1b7efece851a231fc4988cb018133eda1', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: 'cd203d0be8db372fe7b02aca12850ad8676d28f0', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
+            } }, this.parsePageSizeOptions().map(size => (h("option", { key: size, value: size, selected: size === this.state.pageSize }, size, " / page")))), h("button", { key: '8079ffcc411b0925aa3cf1f69dbebe545acfbf62', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(0), "aria-label": "First page" }, "\u00AB\u00AB"), h("button", { key: '8b29d574be3eac921126d3e1dd7a538f0e8eb3b1', type: "button", class: "data-table__page-btn", disabled: this.state.page === 0, onClick: () => this.handlePageChange(this.state.page - 1), "aria-label": "Previous page" }, "\u00AB"), h("span", { key: '3ae1c618a390d8ac90b59a2bfe942ec4f5da5673', class: "data-table__page-indicator" }, "Page ", this.state.page + 1, " of ", totalPages || 1), h("button", { key: 'f2ee6a74587fe35bc8e0d58da59ae4672b0e605f', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(this.state.page + 1), "aria-label": "Next page" }, "\u00BB"), h("button", { key: '7671cdf0a05cc1fb492f05ddef0b5c94b34285d5', type: "button", class: "data-table__page-btn", disabled: this.state.page >= totalPages - 1, onClick: () => this.handlePageChange(totalPages - 1), "aria-label": "Last page" }, "\u00BB\u00BB"))))));
     }
     static get is() { return "seki-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -864,7 +867,7 @@ export class SekiDataTable {
     static get events() {
         return [{
                 "method": "selectionChange",
-                "name": "seki-selection-change",
+                "name": "sekiSelectionChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -885,7 +888,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "rowExpand",
-                "name": "seki-row-expand",
+                "name": "sekiRowExpand",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -906,7 +909,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "rowClick",
-                "name": "seki-row-click",
+                "name": "sekiRowClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -927,7 +930,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "columnResize",
-                "name": "seki-column-resize",
+                "name": "sekiColumnResize",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -948,7 +951,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "columnReorder",
-                "name": "seki-column-reorder",
+                "name": "sekiColumnReorder",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -969,7 +972,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "columnsChange",
-                "name": "seki-columns-change",
+                "name": "sekiColumnsChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -990,7 +993,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "sortChange",
-                "name": "seki-sort-change",
+                "name": "sekiSortChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1011,7 +1014,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "filterChange",
-                "name": "seki-filter-change",
+                "name": "sekiFilterChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1032,7 +1035,7 @@ export class SekiDataTable {
                 }
             }, {
                 "method": "pageChange",
-                "name": "seki-page-change",
+                "name": "sekiPageChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dialog/seki-dialog-content.js

@@ -10,6 +10,23 @@ import { registerThemeSync, unregisterThemeSync } from "../../utils/theme-sync";
  */
 export class SekiDialogContent {
     constructor() {
+        this.onDialogOpenChange = () => {
+            var _a, _b;
+            const context = this.getContext();
+            const wasOpen = this._isOpen;
+            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+            if (!wasOpen && this._isOpen) {
+                this.previousActiveElement = document.activeElement;
+                requestAnimationFrame(() => {
+                    if (this.contentRef) {
+                        focusFirst(this.contentRef);
+                    }
+                });
+            }
+            else if (wasOpen && !this._isOpen) {
+                (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        };
         /**
          * Whether pressing Escape closes the dialog
          */
@@ -47,27 +64,10 @@ export class SekiDialogContent {
         }
     }
     componentDidLoad() {
+        var _a, _b;
         // Listen for context changes
-        const dialog = this.el.closest('seki-dialog');
-        if (dialog) {
-            dialog.addEventListener('sekiOpenChange', () => {
-                var _a, _b;
-                const context = this.getContext();
-                const wasOpen = this._isOpen;
-                this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-                if (!wasOpen && this._isOpen) {
-                    this.previousActiveElement = document.activeElement;
-                    requestAnimationFrame(() => {
-                        if (this.contentRef) {
-                            focusFirst(this.contentRef);
-                        }
-                    });
-                }
-                else if (wasOpen && !this._isOpen) {
-                    (_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-            });
-        }
+        this.dialogEl = (_a = this.el.closest('seki-dialog')) !== null && _a !== void 0 ? _a : undefined;
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     handleKeyDown(event) {
         if (!this._isOpen)
@@ -89,7 +89,9 @@ export class SekiDialogContent {
         registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         unregisterThemeSync(this.el);
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onDialogOpenChange);
     }
     render() {
         const context = this.getContext();