@sekiui/elements 0.0.82 → 0.0.84

package/dist/cjs/seki-calendar.cjs.entry.js

@@ -16,6 +16,17 @@ 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.
+ */
+function isDateDisabled(date, options = {}) {
+    const { minDate = null, maxDate = null, disabledDates = [] } = options;
+    const disabledByRange = (minDate && index.dateFnsExports.isBefore(date, index.dateFnsExports.startOfDay(minDate))) ||
+        (maxDate && index.dateFnsExports.isAfter(date, index.dateFnsExports.startOfDay(maxDate)));
+    const disabledByList = disabledDates.some(d => index.dateFnsExports.isSameDay(date, d));
+    return Boolean(disabledByRange || disabledByList);
+}
 /**
  * Get all days to display in a calendar month grid (6 weeks)
  */
@@ -29,9 +40,6 @@ function getCalendarDays(month, options = {}) {
     const weeks = [];
     let currentWeek = [];
     for (const date of allDays) {
-        const isDisabledByRange = (minDate && index.dateFnsExports.isBefore(date, index.dateFnsExports.startOfDay(minDate))) ||
-            (maxDate && index.dateFnsExports.isAfter(date, index.dateFnsExports.startOfDay(maxDate)));
-        const isDisabledByList = disabledDates.some(d => index.dateFnsExports.isSameDay(date, d));
         const isSelected = selectedDate ? index.dateFnsExports.isSameDay(date, selectedDate) : false;
         let isInRange = false;
         let isRangeStart = false;
@@ -55,7 +63,7 @@ function getCalendarDays(month, options = {}) {
             isInRange,
             isRangeStart,
             isRangeEnd,
-            isDisabled: isDisabledByRange || isDisabledByList,
+            isDisabled: isDateDisabled(date, { minDate, maxDate, disabledDates }),
         };
         currentWeek.push(day);
         if (currentWeek.length === 7) {
@@ -198,9 +206,11 @@ const SekiCalendar = class {
             }
         };
         this.handleKeyDown = (event) => {
-            const selectedDate = this.parseDate(this.selected) ||
+            // Anchor navigation on the currently focused day first so arrow keys move
+            // the focus freely instead of snapping back to the selected date each press.
+            const selectedDate = this.focusedDate ||
+                this.parseDate(this.selected) ||
                 this.parseDate(this.rangeFrom) ||
-                this.focusedDate ||
                 new Date();
             let newDate = null;
             switch (event.key) {
@@ -220,6 +230,13 @@ const SekiCalendar = class {
                 case ' ':
                     if (this.focusedDate) {
                         event.preventDefault();
+                        // Compute the real disabled state so keyboard selection honours
+                        // min/max bounds and disabledDates, matching mouse behaviour.
+                        const isDisabled = isDateDisabled(this.focusedDate, {
+                            minDate: this.parseDate(this.minDate),
+                            maxDate: this.parseDate(this.maxDate),
+                            disabledDates: this.parseDateArray(this.disabledDates),
+                        });
                         this.handleDayClick({
                             date: this.focusedDate,
                             dayOfMonth: this.focusedDate.getDate(),
@@ -229,7 +246,7 @@ const SekiCalendar = class {
                             isInRange: false,
                             isRangeStart: false,
                             isRangeEnd: false,
-                            isDisabled: false,
+                            isDisabled,
                         });
                     }
                     return;
@@ -327,7 +344,7 @@ const SekiCalendar = class {
         });
         const monthLabel = getMonthLabel(this.displayMonth);
         const yearLabel = getYearLabel(this.displayMonth);
-        return (index$1.h("div", { key: '6dd085167df7ebde0ea2b2a78cb69c0cb08d189f', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, index$1.h("div", { key: '2039c31e71ac75793b76b9a232494d93a0728ff2', class: "seki-calendar__header" }, index$1.h("button", { key: '12cf036cd14c37c50e8fedf34e0dde5bdfca9097', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, index$1.h("svg", { key: 'a670a544036a499a6c50e3b2c2d7c04bd25890af', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index$1.h("path", { key: '44d54670790caf5a4028cbaf035840838689bb8b', d: "m15 18-6-6 6-6" }))), index$1.h("div", { key: 'ca6bdde6daa3f73aed96fcbaa1757f7ba6fd6231', class: "seki-calendar__heading" }, index$1.h("span", { key: 'ae1329a37c9b455d2bf1ee4e1c76dd497503ea46', class: "seki-calendar__month" }, monthLabel), index$1.h("span", { key: '886f09bd67d3b6616d57a109fce4777ae6198f26', class: "seki-calendar__year" }, yearLabel)), index$1.h("button", { key: '2eb3cd2d5285ee950f5d68085f168bf574c0b687', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, index$1.h("svg", { key: '1c0b77760c152a1a10fba28354e7187526451174', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index$1.h("path", { key: '9dbc344dff2b49deb80439b65f73af6033169a53', d: "m9 18 6-6-6-6" })))), index$1.h("table", { key: '39ade9c223d0c5304ce100aafcbb9788a798696a', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, index$1.h("thead", { key: '7607c9956a0a9e447ecdd9f845c0ddf0db4fc168' }, index$1.h("tr", { key: '7fbde7681b884ccf802350372b050d05901ff0ed', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (index$1.h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), index$1.h("tbody", { key: '029dd32bf9fd76f170d59318a60f1ab54d144e2a' }, weeks.map((week, weekIndex) => (index$1.h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (index$1.h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, index$1.h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
+        return (index$1.h("div", { key: '02f3870b94d5acf0966ee58f6df9c454debf0504', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, index$1.h("div", { key: '79966e3b0ddbe472309a4a93925efb39a71f7553', class: "seki-calendar__header" }, index$1.h("button", { key: '0defe4096d1c5e42e49c25e2b932fd90468b2314', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, index$1.h("svg", { key: '58496bf79b7acf41619d722013639ff3ad7620e4', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index$1.h("path", { key: 'f631919367d32c2f64d83237225c1405d287b7ec', d: "m15 18-6-6 6-6" }))), index$1.h("div", { key: '42ce8be0497074129c0cbc418962e8cd16aa421e', class: "seki-calendar__heading" }, index$1.h("span", { key: 'd8af2466b5593af31e1dfcac7aac63423ca89439', class: "seki-calendar__month" }, monthLabel), index$1.h("span", { key: '00d175575d2e077f4a748b15cddc2ad32a59f42d', class: "seki-calendar__year" }, yearLabel)), index$1.h("button", { key: 'd42e541f90f6f64a16dee27f0bd3b141cc51b09d', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, index$1.h("svg", { key: 'e22466278dc8b5c843423bc5e4d1919be87697ad', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index$1.h("path", { key: '7d45d7db43e300697412862dcb1a983ba7e2114e', d: "m9 18 6-6-6-6" })))), index$1.h("table", { key: '21a3537b31cc36f175f29f5187df536ef7f13d47', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, index$1.h("thead", { key: '976bf05093602c5297a295614bab28980c9929fb' }, index$1.h("tr", { key: '362733daf798b535d94a03e1c30d52c75aeac421', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (index$1.h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), index$1.h("tbody", { key: '2764ea48c5e32439655f1990702ba8eb5b6eb3e3' }, weeks.map((week, weekIndex) => (index$1.h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (index$1.h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, index$1.h("button", { type: "button", class: this.getDayClasses(day), tabIndex: day.isSelected || day.isToday ? 0 : -1, disabled: day.isDisabled, onClick: () => this.handleDayClick(day), "aria-label": day.date.toDateString() }, day.dayOfMonth)))))))))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-carousel-dots.cjs.entry.js

@@ -75,10 +75,10 @@ const SekiCarouselDots = class {
         // 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() {
@@ -90,7 +90,7 @@ const SekiCarouselDots = class {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (index.h(index.Host, { key: 'bd3c1c3112189f28d54d482f0fffce6cbe090d71', class: "carousel-dots" }, index.h("div", { key: '2a3fedff1c1ddf4eae91099b3053c3594194e99c', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index$1) => (index.h("button", { key: index$1, type: "button", class: {
+        return (index.h(index.Host, { key: '177e32f3366f093b08997e67f61eafcd5149c543', class: "carousel-dots" }, index.h("div", { key: '2f2e62e001bb23f81d1d4c0d128da5681e4b3261', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index$1) => (index.h("button", { key: index$1, type: "button", class: {
                 'carousel-dots__dot': true,
                 'carousel-dots__dot--active': index$1 === this.selectedIndex,
             }, role: "tab", "aria-selected": index$1 === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index$1 + 1}`, tabindex: index$1 === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index$1), onKeyDown: (e) => this.handleKeyDown(e, index$1) }, index.h("span", { class: "carousel-dots__dot-inner" })))))));

package/dist/cjs/seki-carousel-next.cjs.entry.js

@@ -43,10 +43,10 @@ const SekiCarouselNext = class {
         // 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() {
@@ -56,7 +56,7 @@ const SekiCarouselNext = class {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (index.h(index.Host, { key: '9053780aa30fbb12f31a8a3f6e21cb88c3830db6', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, index.h("button", { key: '3cec362457512dcc35e4689c7cbe9be09c808b74', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, index.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" }, index.h("polyline", { key: '760fce67ba7c60eef8be5d781d790a20e80fd3fa', points: "9 18 15 12 9 6" })))));
+        return (index.h(index.Host, { key: '267ae3c889aa77f1b15a4f9b5e4aa3cf46dab2f7', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, index.h("button", { key: '5f50fac8181f643368c256530ec28996f5f8a164', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, index.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" }, index.h("polyline", { key: '55e835953c60b00c8974cef4d3d2258ab8385b95', points: "9 18 15 12 9 6" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-carousel-previous.cjs.entry.js

@@ -43,10 +43,10 @@ const SekiCarouselPrevious = class {
         // 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() {
@@ -56,7 +56,7 @@ const SekiCarouselPrevious = class {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (index.h(index.Host, { key: 'd17472f9b95ee28bd1428ce441a848ed4677dd3f', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, index.h("button", { key: '0a8eb4b1d448e6b7ab417caacf29ccf356c6f389', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, index.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" }, index.h("polyline", { key: '0a06f076ac8a1183228330bfe74b4286f3ef99e9', points: "15 18 9 12 15 6" })))));
+        return (index.h(index.Host, { key: '65561be0cf5c06eb26257de6801bb46f8362b3ac', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, index.h("button", { key: '55c66c69c07f951d2a11d55b368b769712dc37a4', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, index.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" }, index.h("polyline", { key: '7409dd4ba65445aaa3018204522556d75b37ca5f', points: "15 18 9 12 15 6" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-carousel.cjs.entry.js

@@ -1676,7 +1676,7 @@ const sekiCarouselCss = ":host{--seki-carousel-gap:1rem;--seki-carousel-arrow-si
 const SekiCarousel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.slideChange = index.createEvent(this, "seki-slide-change");
+        this.slideChange = index.createEvent(this, "sekiSlideChange");
         // =========================================================================
         // Props
         // =========================================================================
@@ -1715,6 +1715,8 @@ const SekiCarousel = class {
         this.emblaApi = null;
         this.autoplayInterval = null;
         this.viewportEl = null;
+        this.initRafId = null;
+        this.initRetries = 0;
         this.handleSelect = () => {
             this.updateState();
             this.slideChange.emit({
@@ -1791,6 +1793,10 @@ const SekiCarousel = class {
         var _a;
         themeSync.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();
     }
     // =========================================================================
@@ -1859,10 +1865,20 @@ const SekiCarousel = class {
         // 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,
@@ -1927,7 +1943,7 @@ const SekiCarousel = class {
     // Render
     // =========================================================================
     render() {
-        return (index.h(index.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 }, index.h("div", { key: '5cc47d28a19c0d083f83d13f284764ee46e96b7e', class: "carousel__container" }, index.h("slot", { key: '93f7c9893c7e8998fd2afefd6cf11837ee6ca97d' })), index.h("div", { key: '8f6b20d9c4e4aa6522c49800e2733950ecc0f6ed', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+        return (index.h(index.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 }, index.h("div", { key: 'a5ef6de3283f4e92496a5b0dd2ac34baf93ca22a', class: "carousel__container" }, index.h("slot", { key: 'ddbc533588e097e1dbb76f7867d1426a76cc55d9' })), index.h("div", { key: '393015fda7b8a47826f83408acb704f0f792964b', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1937,6 +1953,8 @@ const SekiCarousel = class {
         "dragFree": ["handleOptionsChange"]
     }; }
 };
+// ~1s of frames at 60fps; enough for child content to render without spinning forever.
+SekiCarousel.MAX_INIT_RETRIES = 60;
 SekiCarousel.style = sekiCarouselCss;
 
 exports.seki_carousel = SekiCarousel;

package/dist/cjs/seki-collapsible-content.cjs.entry.js

@@ -8,6 +8,9 @@ const sekiCollapsibleContentCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--sek
 const SekiCollapsibleContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.onCollapsibleOpenChange = () => {
+            this.syncWithContext();
+        };
         this._isOpen = false;
         this._isAnimating = false;
         this._contentHeight = 0;
@@ -41,9 +44,8 @@ const SekiCollapsibleContent = class {
                 attributeFilter: ['data-state'],
             });
             // Also listen for custom events
-            parent.addEventListener('sekiOpenChange', () => {
-                this.syncWithContext();
-            });
+            this.collapsibleEl = parent;
+            this.collapsibleEl.addEventListener('sekiOpenChange', this.onCollapsibleOpenChange);
         }
     }
     syncWithContext() {
@@ -69,10 +71,12 @@ const SekiCollapsibleContent = class {
         themeSync.registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         themeSync.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;
@@ -90,11 +94,11 @@ const SekiCollapsibleContent = class {
         else {
             contentStyle.height = '0';
         }
-        return (index.h(index.Host, { key: 'bf1ac3ee2b00d6350c7713b2de41f008a425af5b', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: '5a3700546bbd8d0b85a955561c4c8239d01f871f', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (index.h(index.Host, { key: 'bd513b01e2255e613b63f87ae98dd0f6f4ef8492', "data-state": this._isOpen ? 'open' : 'closed' }, index.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 }, index.h("div", { key: '591a6ac8aecc5ea8a9a45eea4612f0ae9605b808', class: "collapsible-content-inner" }, index.h("slot", { key: 'cb29e456beec778419f3dd3409aa14c4ea2d2716' })))));
+            }, style: contentStyle }, index.h("div", { key: '6d40421fe1a88b650f97b781e9e7f84d96c49b08', class: "collapsible-content-inner" }, index.h("slot", { key: '34c249f5514a6952ae2b8ec9250cdfe81bbbfa0f' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/seki-combobox-item.cjs.entry.js

@@ -13,6 +13,7 @@ const SekiComboboxItem = class {
         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;
@@ -42,6 +43,11 @@ const SekiComboboxItem = class {
     }
     connectedCallback() {
         themeSync.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() {
         themeSync.unregisterThemeSync(this.el);
@@ -64,6 +70,7 @@ const SekiComboboxItem = class {
                 disabled: this.disabled,
             };
             ctx.registerItem(item);
+            this.hasRegistered = true;
         }
     }
     updateState() {
@@ -74,12 +81,12 @@ const SekiComboboxItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4c80e142ee793a4430187c253db78f446788f5b9' }, index.h("div", { key: '5a8ea6662345b5999f95033dcbdfe5f90401be7e', id: this.itemId, class: {
+        return (index.h(index.Host, { key: 'f319a878642420c67560fbf223202d61ad8fcbea' }, index.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 }, index.h("slot", { key: '77efd44357fbd3ac3d7725920fe260ff5b3047eb' }), this.isSelected && (index.h("svg", { key: '039e83fd1f38fd81efc2c8100ff956786a0fed9a', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.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 }, index.h("slot", { key: 'f21ad109b3468aa420e57215ea4e3c3ea7152736' }), this.isSelected && (index.h("svg", { key: 'd7625ed734c9f90577793b9ed79182332dc7532b', class: "check-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("polyline", { key: '649d4c36fc7f251c77a9a4197a8583f9188a2b64', points: "20 6 9 17 4 12" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/seki-command-group.cjs.entry.js

@@ -8,6 +8,10 @@ const sekiCommandGroupCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neut
 const SekiCommandGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.onCommandValueChange = () => {
+            // Small delay to allow items to update first
+            requestAnimationFrame(() => this.updateVisibility());
+        };
         /**
          * Show even when all items are filtered out
          */
@@ -33,19 +37,17 @@ const SekiCommandGroup = class {
         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() {
         themeSync.registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         themeSync.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/cjs/seki-context-menu-content.cjs.entry.js

@@ -8,6 +8,18 @@ const sekiContextMenuContentCss = ":host{--seki-neutral-50:hsl(0, 0%, 98%);--sek
 const SekiContextMenuContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        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
          */
@@ -37,21 +49,9 @@ const SekiContextMenuContent = class {
         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) {
@@ -131,7 +131,9 @@ const SekiContextMenuContent = class {
         themeSync.registerThemeSync(this.el);
     }
     disconnectedCallback() {
+        var _a;
         themeSync.unregisterThemeSync(this.el);
+        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
     }
     render() {
         if (!this._isOpen) {

package/dist/cjs/seki-context-menu.cjs.entry.js

@@ -92,7 +92,11 @@ const SekiContextMenu = class {
         }
     }
     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)) {
@@ -103,6 +107,11 @@ const SekiContextMenu = class {
         }, 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;
@@ -136,7 +145,7 @@ const SekiContextMenu = class {
         this.removeClickOutside();
     }
     render() {
-        return (index.h(index.Host, { key: '82ae20d56c6474122933af9d63cf7fd671d12787', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: '9a976b7c139ebd532c0096d1e80ebce309c9cb85', part: "context-menu", class: "context-menu" }, index.h("slot", { key: '2257fc5c3a809e1083d8bc37999b0b2d6c6e474a' }))));
+        return (index.h(index.Host, { key: '5b5df7991cfde56635d4ace1d7f3728effac91fd', "data-state": this._isOpen ? 'open' : 'closed' }, index.h("div", { key: '0ab469157d55ed82e05711a8a6f8d972b74bc4a1', part: "context-menu", class: "context-menu" }, index.h("slot", { key: '1ffbe73e2be43d3f3434e1712c47481c3dc62500' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {