@sekiui/elements 0.1.3 → 0.1.5

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

@@ -42,10 +42,10 @@ export class SekiButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: '8803dd5326124b8fb38acf5c316b931f7b41b411' }, h("div", { key: 'cda7b60f189cfcb3c1b96c41b310ee10c7ce6e75', class: {
+        return (h(Host, { key: '3d5d3673d41b2a3e76fb6ef9b190825ed3e98ff1' }, h("div", { key: '4d6b61fde5378372379d92381eac855f25072c9e', class: {
                 'button-group': true,
                 [`button-group--${this.orientation}`]: true,
-            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '9bdeddb9d381b4c41af792a418ca3c29e484777b', onSlotchange: () => this.updateChildButtons() }))));
+            }, role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '12e74dc145d7e05f788399259086943509c6b7e0', onSlotchange: () => this.updateChildButtons() }))));
     }
     static get is() { return "seki-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { getCalendarDays, getWeekDays, getMonthLabel, getYearLabel, getPreviousMonth, getNextMonth, navigateDay, navigateWeek, isSameDay, isDateDisabled, startOfMonth, } from "../../utils/calendar/date-utils";
+import { getCalendarDays, parseDateInput, getWeekDays, getMonthLabel, getYearLabel, getPreviousMonth, getNextMonth, navigateDay, navigateWeek, isSameDay, isDateDisabled, startOfMonth, } from "../../utils/calendar/date-utils";
 /**
  * seki-calendar: A calendar component for date selection
  *
@@ -148,12 +148,7 @@ export class SekiCalendar {
         this.displayMonth = startOfMonth(initialDate);
     }
     parseDate(value) {
-        if (!value)
-            return null;
-        if (value instanceof Date)
-            return value;
-        const parsed = new Date(value);
-        return isNaN(parsed.getTime()) ? null : parsed;
+        return parseDateInput(value);
     }
     parseDateArray(dates) {
         if (!dates)
@@ -209,7 +204,7 @@ export class SekiCalendar {
         });
         const monthLabel = getMonthLabel(this.displayMonth);
         const yearLabel = getYearLabel(this.displayMonth);
-        return (h("div", { key: 'bfd52fe9a40150228e283122449538b673dd9d40', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: 'bbbe52488a17a40ed1a41ebb4cc0261550f4ac88', class: "seki-calendar__header" }, h("button", { key: 'ae848c1f4422f635f76c8fce932faa3472073f11', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: '5b46a7d52c1d905161c2865971f3ead1fff9de2b', 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" }, h("path", { key: '767d60a0aaac74df2a52ac064ecba59e49ea37aa', d: "m15 18-6-6 6-6" }))), h("div", { key: '692c0981eee9a295a35d1e3b1679550651cee4fa', class: "seki-calendar__heading" }, h("span", { key: 'b318a0caa0f3699c3965d199a5a700a1e5d6adbb', class: "seki-calendar__month" }, monthLabel), h("span", { key: 'b9c73d56c8cb4bf19e6afe4c09e25c8064629170', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '2e50c8c1cf8afa89ee733b8d0057d0a632121c03', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: 'c14a4ed0fad328fc682769176a86281f6c193a06', 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" }, h("path", { key: '7d31a25948a7e78b59641c09c5061de163bfb39b', d: "m9 18 6-6-6-6" })))), h("table", { key: '942705b3d825c4f304836ef62fcf98570b37029b', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '32d440a879b18d1cd0e9d2a175c96735f1ccdad1' }, h("tr", { key: 'b7fbe7e6545a3fe06acc8374670099973f1ec2d3', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: '2ab4013c03c6542ee37dca0f65edef2d4278f889' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, 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 (h("div", { key: '3ff942c12f873de967174bc08ef9eb1d039d169d', class: "seki-calendar", role: "application", "aria-label": "Calendar", onKeyDown: this.handleKeyDown }, h("div", { key: 'fa44c715cf38fafcd7bb3d92cb7218b79c3e72a7', class: "seki-calendar__header" }, h("button", { key: 'ef30d1647481bca3a0d675ae2730d6aa53504e76', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to previous month", onClick: this.handlePreviousMonth }, h("svg", { key: 'b4607305a9f1c866f66a53c61768b4a39ceb4b2a', 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" }, h("path", { key: '186e5f8b730dc3003b78d55ff042ba146c846f4d', d: "m15 18-6-6 6-6" }))), h("div", { key: '7c4d3a8f4fd1ae47fd12c7126bb0998ab0bb554b', class: "seki-calendar__heading" }, h("span", { key: '99c96d66a64aa795cb83b530b8822fd884076b8a', class: "seki-calendar__month" }, monthLabel), h("span", { key: '48b762d3e20423a38dbc7be0a31c2b91ac02cef0', class: "seki-calendar__year" }, yearLabel)), h("button", { key: '755f3f94902b33a002a7e64c8fc2fc0760c6f14d', type: "button", class: "seki-calendar__nav-button", "aria-label": "Go to next month", onClick: this.handleNextMonth }, h("svg", { key: '4cb0a5b2b406af723992f02f189b95488d61901b', 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" }, h("path", { key: 'd53a06afb459668bb5ac7be07caab1a42903638e', d: "m9 18 6-6-6-6" })))), h("table", { key: 'a1033e6d6fd7659b1317d98e639b8e31f0c84745', class: "seki-calendar__table", role: "grid", "aria-label": `${monthLabel} ${yearLabel}` }, h("thead", { key: '624f63ec98140e820f2ddb53f6e9bbcf71f64c2a' }, h("tr", { key: '79cdd33088fcf7793ec20f81784087de8db9199c', class: "seki-calendar__weekdays" }, this.weekDays.map(day => (h("th", { class: "seki-calendar__weekday", scope: "col", "aria-label": day }, day.slice(0, 2)))))), h("tbody", { key: 'dcfd82edcce5b87df9e2c077e510daca812ab2ed' }, weeks.map((week, weekIndex) => (h("tr", { key: weekIndex, class: "seki-calendar__week" }, week.map((day, dayIndex) => (h("td", { key: dayIndex, class: "seki-calendar__cell", role: "gridcell", "aria-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "aria-disabled": day.isDisabled }, 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)))))))))));
     }
     static get is() { return "seki-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-action.js

@@ -10,7 +10,7 @@ import { h } from "@stencil/core";
  */
 export class CardAction {
     render() {
-        return (h("div", { key: '425ed03298cbae0fa57ba231df2b91ae47661b63', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '82ba095024dc5e9ede66586a89dd3b3b13f6892f' })));
+        return (h("div", { key: '69c440ad542435f2a605089184ccb91420343c64', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '59a863c441ab65d42d3e6ce6086ae0988b2ee7fe' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h("div", { key: 'f28a568f4c357e1d0a5d4ffa4ee34dd2815f0134', class: `card-content ${this.class || ''}` }, h("slot", { key: '4566aa37672cae9b273faf9b2b4b78958e7eddcb' })));
+        return (h("div", { key: '8b66f98648f90b7a7b1e3f8c1fd763d366e4f05a', class: `card-content ${this.class || ''}` }, h("slot", { key: 'd6c231b1456b52d61e5f02d3d874cc3768db7267' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-description.js

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class CardDescription {
     render() {
-        return (h("p", { key: '4b5a4ba12742af7713c43d87aee4b40ed5fc8191', class: `card-description ${this.class || ''}` }, h("slot", { key: 'bc2906286ea0ca7c6d54fc9ca942dc9f1f87dc87' })));
+        return (h("p", { key: 'dfe716748196dbee9a7cbca4e3c149c6136bce75', class: `card-description ${this.class || ''}` }, h("slot", { key: '83721108c0d34fb8323634462fd2bbcfb33a089c' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-footer.js

@@ -18,7 +18,7 @@ export class CardFooter {
         this.alignment = 'flex-start';
     }
     render() {
-        return (h("footer", { key: 'c411a90d477429ca1a0cc146d3b7340715cb0cd5', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'b49605e15ce186aeb2e78a008123e4927c582fa7' })));
+        return (h("footer", { key: 'd5a094e6d4dff560031511c7a2fb016b5e918fc6', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '83c0ec86220acc85f75c03745fc613d9a537e4ae' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-header.js

@@ -14,7 +14,7 @@ import { h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h("header", { key: 'df699337f7aa48c43cd25b93701f162c4fa56e72', class: `card-header ${this.class || ''}` }, h("slot", { key: 'b03c5313519bd69e7abbb037f63cb7a488ac703a' })));
+        return (h("header", { key: 'b78a0a09a923fb6c91b1b2254766e4f3033bf884', class: `card-header ${this.class || ''}` }, h("slot", { key: '5355c224c06bc0330b970d1086062414224c6b2e' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  */
 export class Card {
     render() {
-        return (h("section", { key: '4900d0acf11d8d1e6778e119086b5453c50bec9d', class: this.class }, h("slot", { key: '059d95941c30c6799aadefef8c9d932d7bac814a' })));
+        return (h("section", { key: '748d3c87761fa8666da2b9118993514625366e91', class: this.class }, h("slot", { key: '3b94648d96373fab1188521e4138c2883d41ddb5' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCarouselContent {
     render() {
-        return (h(Host, { key: 'c51da2886b137c940c6c1f94b51cb5d83a6ea07e', class: "carousel-content-host" }, h("div", { key: '5ccc44120e7c27aa3a1b0eea7e8249bc0659d6d1', class: "carousel-content" }, h("slot", { key: 'b830fb110872a0489e3cb0bfd42e381dc3dff92d' }))));
+        return (h(Host, { key: '9716ba35ecc9f32b0dbd77860d6a950a95aaee7c', class: "carousel-content-host" }, h("div", { key: 'dcc81919579a08671d39e5baf15a1ace303fb44d', class: "carousel-content" }, h("slot", { key: '1b5a5dca2f1dfa73923ba704d180bfa245dc54d9' }))));
     }
     static get is() { return "seki-carousel-content"; }
     static get encapsulation() { return "scoped"; }

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

@@ -86,7 +86,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: 'ba7d20e42a573cdc43eb4457a93296e9cc94d0d0', class: "carousel-dots" }, h("div", { key: 'd2ebaba1d1fdc6a1fa9d9c033417b7505fded3ce', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: '97f777df27a93b8f1432fe1a378bda11dbf17129', class: "carousel-dots" }, h("div", { key: 'f1aa7fc9c0867bdcf226a8d0f9fdaa34e9ae9acf', 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-item.js

@@ -13,7 +13,7 @@ export class SekiCarouselItem {
         this.basis = '100%';
     }
     render() {
-        return (h(Host, { key: '7b6e3eabeedcb73b042a676776809eaceee7e296', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: '7666e0ecf838abb429dfb06c6e28866e4a88f077' })));
+        return (h(Host, { key: 'f72819711d437373ac9b4bb30da9c12cedc14c0e', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'cba1803e0aafa6221509ca87a504969127ce2146' })));
     }
     static get is() { return "seki-carousel-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class SekiCarouselNext {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: '3e9580ad2e7fd152be46658bd1ce5b8ea9858c34', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '31f4c690354887235ff28ffdfb12427a409cdef1', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '63ab340e435f1e3741b4a3302df4b701de7417bf', 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: '4ca2a2ee50ccc878c574cc57b531b7ed1612b754', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: 'a1c51704736621df1e56fc6f0db793a16d91e639', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '909deba5e05e57c2f91fbef30412f62577051740', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '4c7d65bc493a0060b48b54120b3fdf40bb555638', 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: '6ece871a39432e6692b07f5f7a61749178a21359', 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

@@ -50,7 +50,7 @@ export class SekiCarouselPrevious {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: '067fa85a1f7912a646a39c4dbab891e74467ea69', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: 'd3568857d419beb3fd611be5a658f1709361e185', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: 'c0962ecbb773310923726c80f3ec12dc452cc0c8', 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: '6761cfc04a57e924773c62c1e0a971a1820bf34d', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: '1988cb8e5c4ca3955891295644686e6b0653597c', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '1dff73ae64fbd1be2ccc2bfa07846ac9d2a63c01', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '6913b7a4cf73492f125ed659f575010a56fc62b6', 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: '070755d399f83c53da165bf5f1c99e4199b3c2bd', points: "15 18 9 12 15 6" })))));
     }
     static get is() { return "seki-carousel-previous"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class SekiChart {
             height: this.height,
             position: 'relative',
         };
-        return (h(Host, { key: '9b51f46ff2fe5292aa34f36eda72f6d75ffb10ba' }, h("div", { key: 'e6a18a59968d2fa9451ad9e2d192afb2cb746c5c', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: 'e33b02f36b6fa58c5cf3f22f2bd6121d5b6ddabd', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
+        return (h(Host, { key: '4985b8b7ad50c574a44003f6d01ca3ecc2254a9c' }, h("div", { key: 'ba45b7faba0ea63f0024dd0928bd92021897222f', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: '62064edc687d5f27c9734a94a105b7a070a0709f', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
     }
     getAriaLabel() {
         var _a, _b;
@@ -450,7 +450,7 @@ export class SekiChart {
                 "mutable": true,
                 "complexType": {
                     "original": "ChartOptions",
-                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; scatter: LineControllerDatasetOptions; }> | undefined; indexAxis?: \"x\" | \"y\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
+                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; scatter: LineControllerDatasetOptions; }> | undefined; indexAxis?: \"y\" | \"x\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | BubbleDataPoint | [number, number] | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
                     "references": {
                         "ChartOptions": {
                             "location": "import",

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

@@ -146,7 +146,7 @@ export class SekiCheckbox {
     render() {
         const isChecked = this.isChecked;
         const dataState = this.indeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: '206798be298ac0a0200eb08a6c9ebfd3635576bb', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '6e40bfe2da599d6811b3c0a26db0b74080832cce', type: "button", role: "checkbox", class: "checkbox", ref: el => (this.buttonEl = el), part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '797a4f65d55c230d9e7c175d4e4837b7650305f0', class: "indicator", part: "indicator" }, this.indeterminate ? (
+        return (h(Host, { key: 'ab4adc3120d5c8a808eeef0086226cc1f056f73f', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '3841c17fc35e20eb86136becff206bcfed621703', type: "button", role: "checkbox", class: "checkbox", ref: el => (this.buttonEl = el), part: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, "aria-description": this.ariaDescription || undefined, "aria-invalid": this.ariaInvalid === 'true' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, disabled: this.disabled, onClick: this.handleClick }, (isChecked || this.indeterminate) && (h("span", { key: '0e66ef4b7efed8a922d8e5546cfcb62cade5067b', class: "indicator", part: "indicator" }, this.indeterminate ? (
         // Minus icon for indeterminate state
         h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))) : (
         // Checkmark icon for checked state
@@ -342,6 +342,44 @@ export class SekiCheckbox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-describedby"
+            },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
             }
         };
     }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Collapsible content container with animated height transition
  *
@@ -8,52 +9,38 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCollapsibleContent {
     constructor() {
-        this.onCollapsibleOpenChange = () => {
-            this.syncWithContext();
-        };
+        this.collapsibleConsumer = new ContextConsumer('seki-collapsible', '_collapsibleContext', () => this.syncWithContext());
         this._isOpen = false;
         this._isAnimating = false;
         this._contentHeight = 0;
+        this._contentId = '';
+        this._triggerId = '';
     }
     getContext() {
-        const parent = this.el.closest('seki-collapsible');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return parent ? parent._collapsibleContext : null;
+        return this.collapsibleConsumer.context;
     }
-    componentWillLoad() {
-        var _a;
-        const context = this.getContext();
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+    connectedCallback() {
+        this.collapsibleConsumer.connect(this.el);
     }
     componentDidLoad() {
         // Initial height measurement
         if (this.contentRef && this._isOpen) {
             this._contentHeight = this.contentRef.scrollHeight;
         }
-        // Observe parent for context changes
-        this.setupObserver();
-    }
-    setupObserver() {
-        const parent = this.el.closest('seki-collapsible');
-        if (parent) {
-            this.observer = new MutationObserver(() => {
-                this.syncWithContext();
-            });
-            this.observer.observe(parent, {
-                attributes: true,
-                attributeFilter: ['data-state'],
-            });
-            // Also listen for custom events
-            this.collapsibleEl = parent;
-            this.collapsibleEl.addEventListener('sekiOpenChange', this.onCollapsibleOpenChange);
-        }
     }
     syncWithContext() {
         const context = this.getContext();
         if (context) {
             const wasOpen = this._isOpen;
             const isNowOpen = context.isOpen;
-            if (wasOpen !== isNowOpen) {
+            this._contentId = context.contentId;
+            this._triggerId = context.triggerId;
+            if (!this.contentRef) {
+                // Not rendered yet (first read on connect): take the state as-is,
+                // there is nothing to animate from.
+                this._isOpen = isNowOpen;
+            }
+            else if (wasOpen !== isNowOpen) {
                 this._isAnimating = true;
                 // Measure content height before animation
                 if (this.contentRef) {
@@ -68,17 +55,11 @@ export class SekiCollapsibleContent {
         }
     }
     disconnectedCallback() {
-        var _a;
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-        (_a = this.collapsibleEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onCollapsibleOpenChange);
+        this.collapsibleConsumer.disconnect();
     }
     render() {
-        var _a, _b;
-        const context = this.getContext();
-        const contentId = (_a = context === null || context === void 0 ? void 0 : context.contentId) !== null && _a !== void 0 ? _a : '';
-        const triggerId = (_b = context === null || context === void 0 ? void 0 : context.triggerId) !== null && _b !== void 0 ? _b : '';
+        const contentId = this._contentId;
+        const triggerId = this._triggerId;
         // Calculate styles for animation
         const contentStyle = {};
         if (this._isAnimating) {
@@ -90,11 +71,11 @@ export class SekiCollapsibleContent {
         else {
             contentStyle.height = '0';
         }
-        return (h(Host, { key: 'c177c168194004d1b40aad9f1e6d0d4595921798', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'c0274c0b68491a7451a9841f4f45bf2cf263ae20', ref: (el) => (this.contentRef = el), part: "content", id: contentId, role: "region", "aria-labelledby": triggerId, "aria-hidden": !this._isOpen, class: {
+        return (h(Host, { key: '4d5f8a8cca9930333c8fe5bba7d08bc6a5d541c3', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'f0c306dcc9981681c275f47f12afef5b6120b183', 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: '523183861b272f71d69d7676776ef097b95462e5', class: "collapsible-content-inner" }, h("slot", { key: '73adc7932b0479e868844c7fc4b9ff160c498ec7' })))));
+            }, style: contentStyle }, h("div", { key: '7172049f4f05ff0fd976f545c345fd7d952a37d5', class: "collapsible-content-inner" }, h("slot", { key: '57362da74dcc7c61cadc21cd1a49e9e56f8d4460' })))));
     }
     static get is() { return "seki-collapsible-content"; }
     static get encapsulation() { return "shadow"; }
@@ -112,7 +93,9 @@ export class SekiCollapsibleContent {
         return {
             "_isOpen": {},
             "_isAnimating": {},
-            "_contentHeight": {}
+            "_contentHeight": {},
+            "_contentId": {},
+            "_triggerId": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Trigger button for Collapsible component
  *
@@ -12,11 +13,25 @@ export class SekiCollapsibleTrigger {
          * Render as child - wraps content in a button or uses slotted element
          */
         this.asChild = false;
+        /**
+         * Snapshot of the parent's context. Held in @State (rather than read during
+         * render) so that a parent change re-renders the trigger: before #323 the
+         * trigger read the context only while rendering and never re-rendered, so
+         * aria-expanded stayed "false" after the content opened.
+         */
+        this._context = null;
+        this.collapsibleConsumer = new ContextConsumer('seki-collapsible', '_collapsibleContext', context => {
+            this._context = context ? Object.assign({}, context) : null;
+        });
+    }
+    connectedCallback() {
+        this.collapsibleConsumer.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.collapsibleConsumer.disconnect();
     }
     getContext() {
-        const parent = this.el.closest('seki-collapsible');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return parent ? parent._collapsibleContext : null;
+        return this.collapsibleConsumer.context;
     }
     handleClick() {
         const context = this.getContext();
@@ -35,7 +50,7 @@ export class SekiCollapsibleTrigger {
     }
     render() {
         var _a, _b, _c, _d;
-        const context = this.getContext();
+        const context = this._context;
         const isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
         const disabled = (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : false;
         const contentId = (_c = context === null || context === void 0 ? void 0 : context.contentId) !== null && _c !== void 0 ? _c : '';
@@ -81,6 +96,11 @@ export class SekiCollapsibleTrigger {
             }
         };
     }
+    static get states() {
+        return {
+            "_context": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * @slot - The collapsible content (trigger and content)
  *
@@ -27,9 +28,19 @@ export class SekiCollapsible {
     componentWillLoad() {
         // Initialize with defaultOpen or open prop
         this._isOpen = this.open || this.defaultOpen;
+        // Publish before the first render so `<seki-collapsible open>` reaches the
+        // trigger and content at first paint (#323).
+        this.updateContext();
     }
     openChanged(newValue) {
+        if (newValue === this._isOpen)
+            return;
         this._isOpen = newValue;
+        this.updateContext();
+        this.sekiOpenChange.emit(newValue);
+    }
+    disabledChanged() {
+        this.updateContext();
     }
     /**
      * Toggle the collapsible open state
@@ -70,15 +81,8 @@ export class SekiCollapsible {
     get triggerId() {
         return `seki-collapsible-trigger-${this.instanceId}`;
     }
-    componentDidLoad() {
-        this.updateContext();
-    }
-    componentDidUpdate() {
-        this.updateContext();
-    }
     updateContext() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._collapsibleContext = this.getContext();
+        publishContext(this.el, '_collapsibleContext', this.getContext(), this.collapsibleContextChange);
     }
     getContext() {
         return {
@@ -90,7 +94,7 @@ export class SekiCollapsible {
         };
     }
     render() {
-        return (h(Host, { key: '9434ff084e0c2c680323036a2fd5e0718c7a5ec4', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'f83248fb6c62c5b9008389d35686b5ebd1858916', part: "collapsible", class: "collapsible" }, h("slot", { key: '804b2e5188aeaef8d57bc88c418ee745bdf296cd' }))));
+        return (h(Host, { key: '55ea2af68b1670243a5a18c87d4ed00ec71dcd51', "data-state": this._isOpen ? 'open' : 'closed', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: '2cc3c7490b0fb03dbd113fbadbda30995fd7d093', part: "collapsible", class: "collapsible" }, h("slot", { key: '46c10e1bf1fe8d80a101ffc49fb3c6868a386b1c' }))));
     }
     static get is() { return "seki-collapsible"; }
     static get encapsulation() { return "shadow"; }
@@ -189,6 +193,21 @@ export class SekiCollapsible {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "collapsibleContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies collapsible parts that `_collapsibleContext` changed.\nNot part of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -251,6 +270,9 @@ export class SekiCollapsible {
         return [{
                 "propName": "open",
                 "methodName": "openChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }];
     }
 }

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * @slot - Content containing seki-combobox-input and seki-combobox-content
  */
@@ -36,6 +37,19 @@ export class SekiCombobox {
         this.inputId = `combobox-input-${Math.random().toString(36).substr(2, 9)}`;
         this.triggerId = `combobox-trigger-${Math.random().toString(36).substr(2, 9)}`;
         this.debounceTimeoutId = null;
+        /**
+         * Place on the overlay stack (utils/overlay.ts). The input already closes
+         * the list on Escape; registering the open list as a layer keeps that key
+         * from also closing an enclosing dialog or sheet (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.handleOpenChange(false);
+                }
+            },
+        });
         this.handleClickOutside = (event) => {
             if (!this.isOpen)
                 return;
@@ -58,9 +72,9 @@ export class SekiCombobox {
         };
         this.handleValueChange = (newValue) => {
             this.internalValue = newValue;
-            if (this.value !== undefined) {
-                this.value = newValue;
-            }
+            // Always mirror the selection onto `value` so el.value reads back the
+            // user's pick in uncontrolled mode too (#339).
+            this.value = newValue;
             const selectedItems = this.getSelectedItems();
             if (this.multiple && Array.isArray(newValue)) {
                 this.sekiChange.emit({
@@ -188,8 +202,10 @@ export class SekiCombobox {
     }
     componentDidRender() {
         this.updateContextOnElement();
+        this.layer.setActive(this.isOpen);
     }
     disconnectedCallback() {
+        this.layer.setActive(false);
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener, true);
         }
@@ -345,7 +361,7 @@ export class SekiCombobox {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: '247432db7e1809d49306e4b1756aa521660de718', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: '12aed9d9f83683d603df1199c58d2370fb82855c', class: "combobox-container" }, h("slot", { key: 'dd7402eb5fd0cd962c49a8832d34d7bb5e22f388' }))));
+        return (h(Host, { key: 'dcd00e406ef681ef98ace6eb4f6c5fa556283ddb', role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": this.listboxId, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "aria-describedby": this.ariaDescribedby }, h("div", { key: '941163234f2d941d697214ff58c1c6d14264cf1c', class: "combobox-container" }, h("slot", { key: 'b9993d891965c09ede6286908380a3334124979a' }))));
     }
     static get is() { return "seki-combobox"; }
     static get encapsulation() { return "shadow"; }