@sekiui/elements 0.1.6 → 0.1.7

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

@@ -1,4 +1,7 @@
 import { h, Host } from "@stencil/core";
+import { getAccordionIds, resolveAccordionIds } from "./accordion-ids";
+import { claimHostId } from "../../utils/host-id";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * Trigger button for accordion item - click to toggle
  *
@@ -10,21 +13,32 @@ import { h, Host } from "@stencil/core";
 export class SekiAccordionTrigger {
     constructor() {
         this._isOpen = false;
-        this.onAccordionValueChange = () => {
-            var _a;
-            const context = this.getItemContext();
-            this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
-        };
+        this._disabled = false;
+        this.accordion = new ContextConsumer('seki-accordion', '_accordionContext', (ctx) => {
+            var _a, _b;
+            this._isOpen = this.readIsOpen();
+            // Derived from the accordion and the item's attribute (what handleClick
+            // checks), not from the item's cached context, which may not exist yet when
+            // the item upgrades after this trigger.
+            const item = this.el.closest('seki-accordion-item');
+            this._disabled = ((_a = item === null || item === void 0 ? void 0 : item.hasAttribute('disabled')) !== null && _a !== void 0 ? _a : false) || ((_b = ctx === null || ctx === void 0 ? void 0 : ctx.disabled) !== null && _b !== void 0 ? _b : false);
+        });
+    }
+    // Read open state straight from the accordion: the item's cached context may
+    // not have been refreshed yet when this listener runs.
+    readIsOpen() {
+        var _a, _b, _c;
+        const value = (_a = this.el.closest('seki-accordion-item')) === null || _a === void 0 ? void 0 : _a.getAttribute('value');
+        const ctx = this.accordion.context;
+        return value && ctx ? ctx.isItemOpen(value) : ((_c = (_b = this.getItemContext()) === null || _b === void 0 ? void 0 : _b.isOpen) !== null && _c !== void 0 ? _c : false);
     }
     getItemContext() {
         const item = this.el.closest('seki-accordion-item');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return item ? item._accordionItemContext : null;
     }
-    componentWillRender() {
-        var _a;
-        const context = this.getItemContext();
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+    connectedCallback() {
+        this.accordion.connect(this.el);
     }
     handleClick() {
         // Direct method call - no closures, no timing issues
@@ -105,29 +119,23 @@ export class SekiAccordionTrigger {
         const triggers = this.getAllTriggers();
         (_a = triggers[triggers.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    componentDidLoad() {
-        var _a, _b;
-        // Listen for value changes from parent accordion
-        this.accordionEl = (_a = this.el.closest('seki-accordion')) !== null && _a !== void 0 ? _a : undefined;
-        (_b = this.accordionEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sekiValueChange', this.onAccordionValueChange);
-    }
     disconnectedCallback() {
-        var _a;
-        (_a = this.accordionEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onAccordionValueChange);
+        this.accordion.disconnect();
     }
     render() {
-        var _a, _b, _c, _d;
-        const context = this.getItemContext();
-        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 : '';
-        const triggerId = (_d = context === null || context === void 0 ? void 0 : context.triggerId) !== null && _d !== void 0 ? _d : '';
-        return (h(Host, { key: 'ecc2cf4c4c44872c22755937e4056f2c5e6dbc8e', "data-state": isOpen ? 'open' : 'closed', "data-disabled": disabled ? '' : undefined, tabindex: disabled ? -1 : 0, role: "button" }, h("button", { key: '03e96da86d67bd9ff1d0630c312658d81e20cee0', part: "trigger", type: "button", id: triggerId, class: "accordion-trigger", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": contentId, disabled: disabled,
-            // The host is the single tab stop and handles the keyboard.
-            tabindex: -1 }, h("slot", { key: 'b2040f79657b46c4b081f2c1a72d6f81521766d4' }), h("svg", { key: 'bda6e302ee1d4e723b17a7807c0d2c8c879241a7', part: "icon", class: {
+        const isOpen = this._isOpen;
+        const disabled = this._disabled;
+        // IDREFs cannot cross shadow roots, so the id / aria-controls / aria-expanded
+        // live on this light-DOM host and point at the content host. An author id on
+        // either host is kept.
+        const item = this.el.closest('seki-accordion-item');
+        const ids = getAccordionIds(item);
+        const hostId = claimHostId(this.el, ids.triggerId);
+        const { contentId } = resolveAccordionIds(item);
+        return (h(Host, { key: 'e8460b73584f77661d9ef18d0b84042ccce84545', id: hostId, "data-state": isOpen ? 'open' : 'closed', "data-disabled": disabled ? '' : undefined, tabindex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": contentId, "aria-disabled": disabled ? 'true' : undefined }, h("div", { key: '025c1edaf275243cc2364db8d8e9cf2d19b23acd', part: "trigger", class: "accordion-trigger" }, h("slot", { key: '859a324fb14c061aea66533206a155c5080cb172' }), h("svg", { key: '87a6a132ee575ef3a7702d2a4873c9d8f6d5885e', part: "icon", class: {
                 'accordion-chevron': true,
                 'accordion-chevron--open': isOpen,
-            }, 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: '2507810e95127aee8bf85af8f4930e2644975625', d: "m6 9 6 6 6-6" })))));
+            }, 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: '849c07b8fa675659f8bb7cb035dde02820796cfd', d: "m6 9 6 6 6-6" })))));
     }
     static get is() { return "seki-accordion-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +151,8 @@ export class SekiAccordionTrigger {
     }
     static get states() {
         return {
-            "_isOpen": {}
+            "_isOpen": {},
+            "_disabled": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * Accordion root component that manages expanded state of items
  *
@@ -32,10 +33,14 @@ export class SekiAccordion {
         if (initialValue) {
             this._openItems = Array.isArray(initialValue) ? [...initialValue] : [initialValue];
         }
+        // Parts already upgraded hear this; parts that upgrade later read it when
+        // they connect (#384).
+        this.publish();
     }
     valueChanged(newValue) {
         if (newValue !== undefined) {
             this._openItems = Array.isArray(newValue) ? [...newValue] : [newValue];
+            this.publish();
             // Programmatic `accordionEl.value = x` must notify already-mounted
             // children the same way toggleItem() does (found during #261 audit).
             this.sekiValueChange.emit(newValue);
@@ -53,6 +58,7 @@ export class SekiAccordion {
                 // Only close if collapsible
                 if (this.collapsible) {
                     this._openItems = [];
+                    this.publish();
                     // Unlike the open/multiple-mode branches below, this direct emit
                     // must stay: @Watch('value')'s handler skips emitting when
                     // newValue is undefined (a pre-existing guard), so this is the
@@ -82,9 +88,10 @@ export class SekiAccordion {
             // separate emit needed (found during #268).
             this.value = [...this._openItems];
         }
-        // Update context for child components
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._accordionContext = this.getContext();
+        this.publish();
+    }
+    publish() {
+        publishContext(this.el, '_accordionContext', this.getContext(), this.contextChange);
     }
     isItemOpen(itemValue) {
         return this._openItems.includes(itemValue);
@@ -99,16 +106,11 @@ export class SekiAccordion {
             isItemOpen: (itemValue) => this.isItemOpen(itemValue),
         };
     }
-    componentDidLoad() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._accordionContext = this.getContext();
-    }
-    componentDidUpdate() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._accordionContext = this.getContext();
+    settingsChanged() {
+        this.publish();
     }
     render() {
-        return (h(Host, { key: '1b5ed02b2fc9c58659f70b4ef98b7624623a9477', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'e9f375c32d554de4024996920b4cf58bff77b954', part: "accordion", class: "accordion" }, h("slot", { key: '635d3cb635711653bc0951f1c4088746ecdcaab8' }))));
+        return (h(Host, { key: '604f9f0845c8c3facd643ccf8eab22139443ed97', "data-disabled": this.disabled ? '' : undefined }, h("div", { key: 'fee00af3c001cd0553d17021df330e62096d3413', part: "accordion", class: "accordion" }, h("slot", { key: 'b1c5b80cb3fda3015b2bfebef43d174897cd085f' }))));
     }
     static get is() { return "seki-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +247,24 @@ export class SekiAccordion {
                     "resolved": "string | string[]",
                     "references": {}
                 }
+            }, {
+                "method": "contextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Internal: notifies accordion parts that the published context changed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -277,6 +297,15 @@ export class SekiAccordion {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "settingsChanged"
+            }, {
+                "propName": "collapsible",
+                "methodName": "settingsChanged"
+            }, {
+                "propName": "type",
+                "methodName": "settingsChanged"
             }];
     }
 }

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { subscribeToContextChange } from "../../utils/context-bridge";
 import { whenDefined } from "../../utils/when-defined";
+import { isRtl } from "../../utils/direction";
 /**
  * Dot indicators for carousel navigation.
  * Automatically syncs with parent seki-carousel.
@@ -25,26 +26,33 @@ export class SekiCarouselDots {
             if (!dots)
                 return;
             let targetIndex = null;
+            // Dots are laid out in the inline direction, so Left/Right are visual:
+            // in RTL the next dot is to the left.
+            const rtl = isRtl(this.el);
+            const prevKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            const nextKey = rtl ? 'ArrowLeft' : 'ArrowRight';
             switch (event.key) {
-                case 'ArrowLeft':
+                case prevKey:
                 case 'ArrowUp':
-                    event.preventDefault();
                     targetIndex = index > 0 ? index - 1 : this.scrollSnapCount - 1;
                     break;
-                case 'ArrowRight':
+                case nextKey:
                 case 'ArrowDown':
-                    event.preventDefault();
                     targetIndex = index < this.scrollSnapCount - 1 ? index + 1 : 0;
                     break;
                 case 'Home':
-                    event.preventDefault();
                     targetIndex = 0;
                     break;
                 case 'End':
-                    event.preventDefault();
                     targetIndex = this.scrollSnapCount - 1;
                     break;
             }
+            if (targetIndex !== null) {
+                event.preventDefault();
+                // The dots sit inside <seki-carousel>, whose own arrow-key handler would
+                // otherwise advance a second time.
+                event.stopPropagation();
+            }
             if (targetIndex !== null) {
                 (_b = dots[targetIndex]) === null || _b === void 0 ? void 0 : _b.focus();
                 this.handleDotClick(targetIndex);
@@ -91,7 +99,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: '56d50497d6c68d6533d9d42544b3093a58d96a93', class: "carousel-dots" }, h("div", { key: 'eb9da4064571b863d0a214a9189725606aa6367f', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: '54e11889da62fbd901a297bbc733af13c3920efc', class: "carousel-dots" }, h("div", { key: 'e14079fbfcef9b48cac10deaae16ebefbb949b38', 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-navigation.css

@@ -9,11 +9,11 @@
 }
 
 :host(.carousel-nav--prev) {
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
 }
 
 :host(.carousel-nav--next) {
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
 }
 
 .carousel-nav__button {
@@ -56,14 +56,19 @@
   flex-shrink: 0;
 }
 
+/* Chevrons point along the inline direction, so mirror them in RTL. */
+.carousel-nav__icon:dir(rtl) {
+  transform: scaleX(-1);
+}
+
 /* Responsive: hide on very small screens if needed */
 @media (max-width: 480px) {
   :host(.carousel-nav--prev) {
-    left: 0.25rem;
+    inset-inline-start: 0.25rem;
   }
 
   :host(.carousel-nav--next) {
-    right: 0.25rem;
+    inset-inline-end: 0.25rem;
   }
 
   .carousel-nav__button {

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { isDefined, whenDefined } from "../../utils/when-defined";
+import { isRtl } from "../../utils/direction";
 // Lazily loaded so embla-carousel (an optional peer dependency, see #263)
 // isn't pulled into any bundle unless a <seki-carousel> actually renders.
 // Module-scope cache shared across every seki-carousel instance on the page.
@@ -66,6 +67,16 @@ export class SekiCarousel {
         /** Slide to come back to when Embla is re-created after a move or option change. */
         this.resumeIndex = null;
         this.waitedForContentDefinition = false;
+        /** Direction Embla was created with; compared on `dir` changes (#381). */
+        this.appliedRtl = null;
+        this.dirObserver = null;
+        this.handleDirectionChange = () => {
+            if (!this.emblaApi || this.appliedRtl === null || isRtl(this.el) === this.appliedRtl)
+                return;
+            // teardownEmbla() records the selected slide in resumeIndex.
+            this.teardownEmbla();
+            this.initEmbla();
+        };
         this.handleSelect = () => {
             this.updateState();
             this.slideChange.emit({
@@ -108,23 +119,31 @@ export class SekiCarousel {
             }
         };
         this.handleKeyDown = (event) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
+            // Arrow keys are visual: in RTL the next slide is to the left.
+            const rtl = isRtl(this.el);
             switch (event.key) {
                 case 'ArrowLeft':
                     event.preventDefault();
-                    (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev();
+                    if (rtl)
+                        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollNext();
+                    else
+                        (_b = this.emblaApi) === null || _b === void 0 ? void 0 : _b.scrollPrev();
                     break;
                 case 'ArrowRight':
                     event.preventDefault();
-                    (_b = this.emblaApi) === null || _b === void 0 ? void 0 : _b.scrollNext();
+                    if (rtl)
+                        (_c = this.emblaApi) === null || _c === void 0 ? void 0 : _c.scrollPrev();
+                    else
+                        (_d = this.emblaApi) === null || _d === void 0 ? void 0 : _d.scrollNext();
                     break;
                 case 'Home':
                     event.preventDefault();
-                    (_c = this.emblaApi) === null || _c === void 0 ? void 0 : _c.scrollTo(0);
+                    (_e = this.emblaApi) === null || _e === void 0 ? void 0 : _e.scrollTo(0);
                     break;
                 case 'End':
                     event.preventDefault();
-                    (_d = this.emblaApi) === null || _d === void 0 ? void 0 : _d.scrollTo(this.scrollSnapCount - 1);
+                    (_f = this.emblaApi) === null || _f === void 0 ? void 0 : _f.scrollTo(this.scrollSnapCount - 1);
                     break;
             }
         };
@@ -137,6 +156,7 @@ export class SekiCarousel {
     // once, so a carousel that is moved in the DOM (keyed lists, portals,
     // drag-and-drop) is set up again from connectedCallback (#333).
     connectedCallback() {
+        this.observeDirection();
         if (this.hasLoaded)
             this.initEmbla();
     }
@@ -145,6 +165,9 @@ export class SekiCarousel {
         this.initEmbla();
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.dirObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.dirObserver = null;
         this.teardownEmbla();
     }
     // =========================================================================
@@ -204,6 +227,24 @@ export class SekiCarousel {
     // =========================================================================
     // Private Methods
     // =========================================================================
+    /**
+     * Embla's `direction` is fixed at creation, so watch the `dir` attribute of
+     * every ancestor (crossing shadow roots) and re-create Embla when the computed
+     * direction actually flips. Attribute-filtered and non-subtree, so it is cheap.
+     */
+    observeDirection() {
+        var _a, _b, _c;
+        (_a = this.dirObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.dirObserver = new MutationObserver(this.handleDirectionChange);
+        let node = this.el;
+        while (node) {
+            if (node.nodeType === Node.ELEMENT_NODE)
+                this.dirObserver.observe(node, { attributes: true, attributeFilter: ['dir'] });
+            node = (_c = (_b = node.parentNode) !== null && _b !== void 0 ? _b : node.host) !== null && _c !== void 0 ? _c : null;
+        }
+    }
     /** Stop autoplay, cancel a pending init and destroy Embla. Idempotent. */
     teardownEmbla() {
         this.initGeneration++;
@@ -262,6 +303,7 @@ export class SekiCarousel {
         // Container found — reset retry bookkeeping.
         this.initRetries = 0;
         this.initRafId = null;
+        const rtl = isRtl(this.el);
         const options = {
             loop: this.loop,
             // Keep the current slide when re-created (DOM move, option change).
@@ -269,6 +311,8 @@ export class SekiCarousel {
             slidesToScroll: this.slidesToScroll,
             dragFree: this.dragFree,
             containScroll: 'trimSnaps',
+            // Slides flow right-to-left under dir="rtl"; embla must scroll to match.
+            direction: rtl ? 'rtl' : 'ltr',
         };
         let EmblaCarousel;
         try {
@@ -283,6 +327,7 @@ export class SekiCarousel {
         if (!this.el.isConnected || !this.viewportEl || generation !== this.initGeneration || this.emblaApi)
             return;
         this.emblaApi = EmblaCarousel(this.viewportEl, options);
+        this.appliedRtl = rtl;
         // Set up event listeners
         this.emblaApi.on('select', this.handleSelect);
         this.emblaApi.on('reInit', this.handleReInit);
@@ -342,7 +387,7 @@ export class SekiCarousel {
     // Render
     // =========================================================================
     render() {
-        return (h(Host, { key: '2f0a761a9c673b84aecb4733676d0baf60c9b7a6', 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: 'd2c07222335e50b5ff119989444d5389e3e4f6d3', class: "carousel__container" }, h("slot", { key: '1581ad7b8a049b9efaa0941f284e0e9d04a53a5d' })), h("div", { key: '56edee3b1ed6f6729eed4cb7ebf9c024db351be6', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+        return (h(Host, { key: 'b55deaf2dd34be409d82b9edc6171bd17e479fa5', 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: '4e24a73b01d4f839d8f1f7feb2957664016cb6ad', class: "carousel__container" }, h("slot", { key: '0ba983eb5c01d434a5fa25073dcccdc58c8c35d3' })), h("div", { key: 'f1a62d565f8f6cda368ac6d15c95c53e1598bed6', 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"; }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
 import { OverlayLayer } from "../../utils/overlay";
+import { FormControl } from "../../utils/form-control";
 /**
  * @slot - Content containing seki-combobox-input and seki-combobox-content
  */
@@ -193,6 +194,32 @@ export class SekiCombobox {
         }
         // Expose context
         this.updateContextOnElement();
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => this.getFormValue(),
+            isEmpty: () => this.isValueEmpty(),
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please select an item in the list.',
+            getAnchor: () => {
+                var _a, _b;
+                const input = this.el.querySelector('seki-combobox-input');
+                return (_b = (_a = input === null || input === void 0 ? void 0 : input.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) !== null && _b !== void 0 ? _b : input;
+            },
+            restore: initial => this.setValueFromForm(initial),
+            restoreState: state => {
+                if (this.multiple) {
+                    // A multiple combobox submits FormData; recover its entries for our name.
+                    this.setValueFromForm(state instanceof FormData && this.name ? state.getAll(this.name).map(String) : []);
+                }
+                else {
+                    this.setValueFromForm(typeof state === 'string' ? state : '');
+                }
+            },
+        });
+        // form.reset() goes back to the selection the combobox was authored with.
+        this.formControl.captureInitial(Array.isArray(this.internalValue) ? [...this.internalValue] : this.internalValue);
+        // Seed the form value so an unchanged combobox still submits its initial value.
+        this.formControl.sync();
     }
     componentDidLoad() {
         this.updateContextOnElement();
@@ -219,6 +246,45 @@ export class SekiCombobox {
         }
         this.updateContextOnElement();
     }
+    handleFormStateChange() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
+    formResetCallback() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
+    }
+    formStateRestoreCallback(state) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
+    /** Put the selection back to `next` without emitting `sekiChange` (reset is not a user edit). */
+    setValueFromForm(next) {
+        const value = Array.isArray(next) ? [...next] : next;
+        this.internalValue = value;
+        this.value = value;
+    }
+    isValueEmpty() {
+        const v = this.internalValue;
+        return Array.isArray(v) ? v.length === 0 : v === '' || v === undefined || v === null;
+    }
+    getFormValue() {
+        if (this.multiple) {
+            const values = Array.isArray(this.internalValue) ? this.internalValue : [];
+            if (!this.name || values.length === 0)
+                return null;
+            const formData = new FormData();
+            for (const val of values)
+                formData.append(this.name, String(val));
+            return formData;
+        }
+        return this.isValueEmpty() ? null : String(this.internalValue);
+    }
     handleOpenPropChange(newOpen) {
         if (newOpen !== undefined) {
             this.isOpen = newOpen;
@@ -361,10 +427,11 @@ export class SekiCombobox {
     // Render
     // ===========================
     render() {
-        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' }))));
+        return (h(Host, { key: 'b25ca5b559cb21768c5b9a6393bcee483dd40b1d', 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: '2866fe0ec4d3d84b8568e4bcedc2a38aa2cd0047', class: "combobox-container" }, h("slot", { key: '630ea691c0b83e8b7aa7cefa8ae5704fa8a91017' }))));
     }
     static get is() { return "seki-combobox"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-combobox.css"]
@@ -596,6 +663,25 @@ export class SekiCombobox {
                 "attribute": "required",
                 "defaultValue": "false"
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -886,6 +972,21 @@ export class SekiCombobox {
         return [{
                 "propName": "value",
                 "methodName": "handleValuePropChange"
+            }, {
+                "propName": "internalValue",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "name",
+                "methodName": "handleFormStateChange"
             }, {
                 "propName": "open",
                 "methodName": "handleOpenPropChange"
@@ -915,4 +1016,5 @@ export class SekiCombobox {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { clearTypeahead, focusFirstMenuItem, handleMenuKeyDown } from "../../utils/menu-navigation";
+import { ContextConsumer } from "../../utils/context-bridge";
 const NAV_CONFIG = {
     itemSelector: 'seki-dropdown-menu-item, seki-dropdown-menu-checkbox, seki-dropdown-menu-radio, seki-dropdown-menu-sub',
     subContentSelector: 'seki-dropdown-menu-sub [slot="content"]',
@@ -14,17 +15,20 @@ const NAV_CONFIG = {
 export class SekiContextMenuContent {
     constructor() {
         this.typeahead = { buffer: '' };
-        this.onMenuOpenChange = () => {
+        this.hasLoaded = false;
+        this.menu = new ContextConsumer('seki-context-menu', '_contextMenuContext', (context) => {
             var _a;
-            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 (this._isOpen) {
+            // Focus the first item when the menu opens after mount; an initially open
+            // menu keeps focus where it is, as before.
+            if (this.hasLoaded && this._isOpen && !wasOpen) {
                 requestAnimationFrame(() => {
                     this.updatePosition();
                     void focusFirstMenuItem(this.el, NAV_CONFIG);
                 });
             }
-        };
+        });
         /**
          * Internal open state
          */
@@ -35,19 +39,13 @@ export class SekiContextMenuContent {
         this._position = { top: '0', left: '0' };
     }
     getContext() {
-        const menu = this.el.closest('seki-context-menu');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return menu ? menu._contextMenuContext : null;
+        return this.menu.context;
     }
-    componentWillRender() {
-        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.menu.connect(this.el);
     }
     componentDidLoad() {
-        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);
+        this.hasLoaded = true;
     }
     componentDidRender() {
         if (this._isOpen) {
@@ -99,9 +97,8 @@ export class SekiContextMenuContent {
         this._position = next;
     }
     disconnectedCallback() {
-        var _a;
         clearTypeahead(this.typeahead);
-        (_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiOpenChange', this.onMenuOpenChange);
+        this.menu.disconnect();
     }
     render() {
         if (!this._isOpen) {