@sekiui/elements 0.1.2 → 0.1.3

package/dist/collection/components/pagination/seki-pagination-ellipsis.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPaginationEllipsis {
     render() {
-        return (h("span", { key: '5ae0cf12111276fd4920fe7c0868d2a0796b2e0a', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: 'c56af2a5b4317d97b8e8cf8daa606e9e6bc1c4b4', 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", "aria-hidden": "true" }, h("circle", { key: '58450f9202ac226d5b493f33b71897e19e597827', cx: "12", cy: "12", r: "1" }), h("circle", { key: '9b9a350729e3e7b2443d385a8a93e41cf243931e', cx: "19", cy: "12", r: "1" }), h("circle", { key: 'c5e37998fa3592f698fb549164471b24a3259668', cx: "5", cy: "12", r: "1" })), h("span", { key: '79f7478598dbb0d0b84b0092c8f6b27d2ea24805', class: "sr-only" }, "More pages")));
+        return (h("span", { key: '4a46896bef2fe178314b6a66c093a6ff6480d556', "aria-hidden": "true", class: "seki-pagination-ellipsis", part: "ellipsis" }, h("svg", { key: '23cd560f34e544083fd5cc76e6f7c1e9bceba40d', 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", "aria-hidden": "true" }, h("circle", { key: '5111a3cfdd1484b9f94272eb98f1cfd10d13e310', cx: "12", cy: "12", r: "1" }), h("circle", { key: '93c2c8d22962fdf68f0af2809d8ad329827a3b2a', cx: "19", cy: "12", r: "1" }), h("circle", { key: '05add43c30efc845d3526f39c5bcd1cf2c39ed81', cx: "5", cy: "12", r: "1" })), h("span", { key: 'd136c488671089c979a19cd26055336a43354ea9', class: "sr-only" }, "More pages")));
     }
     static get is() { return "seki-pagination-ellipsis"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPaginationItem {
     render() {
-        return (h("li", { key: '00099c4b274e0ccda892674a3ed32ea13fc91625', class: "seki-pagination-item", part: "item" }, h("slot", { key: '5d9895e1eec4b7c08403e2aa203cc0d7e93e6a90' })));
+        return (h("li", { key: 'aa0dbdf9ff896e7cb6bb9df819a2183c86e76a03', class: "seki-pagination-item", part: "item" }, h("slot", { key: '77dce23442b37d646ad299e2712fe953943e362b' })));
     }
     static get is() { return "seki-pagination-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/seki-pagination-link.js

@@ -17,11 +17,11 @@ export class SekiPaginationLink {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '329d1c08776df50eb954806257dd9385624f5c55', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: 'f8c88be17b2ce3f1c558de14ea8c2b0c08acde1b', href: this.href && !this.disabled ? this.href : undefined, "aria-current": this.active ? 'page' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-link--active': !!this.active,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "link" }, h("slot", { key: 'a6f7fad1362d327c3f8e12459856f155cf84c3a2' })));
+            }, part: "link" }, h("slot", { key: '835bd6b16a5ce4d846febe2632107f6049208d1e' })));
     }
     static get is() { return "seki-pagination-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,11 @@ export class SekiPaginationNext {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '8f7f2d0225bd5439ff186fdc1e1cae8d46c0b4e1', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: '5fa678b9bf3614f0fb260169b6d9b9de5aa07da5', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to next page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "next" }, h("span", { key: 'abdf9a7fa50c4923bcc188427e0d4ca13008dfc0' }, "Next"), h("svg", { key: '9358ed8e07f35d131a7fd4a43bff283b8e47eaa2', 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", "aria-hidden": "true" }, h("path", { key: '53ff69937b403187ffd4838fa8cce73c6b6d0b86', d: "m9 18 6-6-6-6" }))));
+            }, part: "next" }, h("span", { key: 'e34aa0858c3ab2bafdc7240bf225f3615fe4a951' }, "Next"), h("svg", { key: '26cefe2d929a633e68a5a3f144a862a6d313de85', 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", "aria-hidden": "true" }, h("path", { key: '4cf4ff63f382dfd6f5cfce6c2099ea1539d08253', d: "m9 18 6-6-6-6" }))));
     }
     static get is() { return "seki-pagination-next"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,11 +13,11 @@ export class SekiPaginationPrevious {
     }
     render() {
         const Tag = this.href && !this.disabled ? 'a' : 'span';
-        return (h(Tag, { key: '83d5cc22afe0695c454f3c44aef7dc5a47dda610', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
+        return (h(Tag, { key: 'cc592702e87b4a1fc4dd9ab047fe53ac018173ba', href: this.href && !this.disabled ? this.href : undefined, "aria-label": "Go to previous page", "aria-disabled": this.disabled ? 'true' : undefined, class: {
                 'seki-pagination-link': true,
                 'seki-pagination-nav': true,
                 'seki-pagination-link--disabled': !!this.disabled,
-            }, part: "previous" }, h("svg", { key: '495c14c039ce1619c37ca36180e011ecad004b70', 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", "aria-hidden": "true" }, h("path", { key: '92c348f5d1716b0201e16ca468c92e68adbce241', d: "m15 18-6-6 6-6" })), h("span", { key: '69f9eae6ff7599e453871b3a26ca28a2511d95bf' }, "Previous")));
+            }, part: "previous" }, h("svg", { key: '82d44d0c82b9aa43440ebbe327112b14387f431d', 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", "aria-hidden": "true" }, h("path", { key: 'f48185516c545f947f4ea27cd2cda63c0ba76fc3', d: "m15 18-6-6 6-6" })), h("span", { key: '9f73300b5d8e6d221d20936db767899de0888af2' }, "Previous")));
     }
     static get is() { return "seki-pagination-previous"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ import { h } from "@stencil/core";
  */
 export class SekiPagination {
     render() {
-        return (h("nav", { key: 'db0844f5037cad2e43c8f5a907ada6bf089225f6', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '36edc5cc1ce6277529c7ff134cd200b7ff54d999' })));
+        return (h("nav", { key: '7e6002c4f74510148eca79aa1956c4c743ff4edc', role: "navigation", "aria-label": "pagination", class: "seki-pagination", part: "pagination" }, h("slot", { key: '14245330500261a43ea88a527579af5851723054' })));
     }
     static get is() { return "seki-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/seki-popover-close.js

@@ -11,7 +11,7 @@ export class SekiPopoverClose {
         this.closePopover.emit();
     }
     render() {
-        return (h(Host, { key: '70246a52116b8a74792a114e3307e3e741753ccc' }, h("button", { key: 'e590364136dd07e4a039b93d72f1ff12dd94cd26', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '3299d0593673eaf4452c11491ff49387a26811d1' }, h("svg", { key: '02610e13500ecc7a7298bf9c107ce4c1989d961f', 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: 'e61e40e09cfc740f5c3fa071b6b81af8633b6ded', d: "M18 6 6 18" }), h("path", { key: '9ada4a23c487ca1d3500c51d0ce35356cb48ba82', d: "m6 6 12 12" }))))));
+        return (h(Host, { key: '2e319063d318d91845c901f33d783f5a1a57a7e0' }, h("button", { key: '3747a565a121c9c6ff1dda91a0cb4cfeb2f1e153', part: "close", type: "button", class: "popover-close", "aria-label": "Close" }, h("slot", { key: '038c53260e062b0ffdfcfba147ede70ba60e73c5' }, h("svg", { key: '4df793633a13578370b0c64d6144317faa80e284', 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: '24fbad124008c1a48650c3e589eaedf697c5a133', d: "M18 6 6 18" }), h("path", { key: '98d74b90d280f45b7a401aabf9ea56271484fe61', d: "m6 6 12 12" }))))));
     }
     static get is() { return "seki-popover-close"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class SekiPopoverTrigger {
         this.triggerClick.emit();
     }
     render() {
-        return (h(Host, { key: 'ae6f983fdd40ffcee7cc0e60f3290fe19cf965f7' }, h("span", { key: '8bdd7bd35635819c50e773f73536ea63012eb42c', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'ed5dd263bc2e10bfb4b2924e4ebf5901bba5e185' }))));
+        return (h(Host, { key: '27bb74ff57019219dd2d967dc7753bc9ef75e578' }, h("span", { key: '6d9221c17895112c4896d1edb5c3050e1ce9d7a5', part: "trigger", class: "popover-trigger" }, h("slot", { key: 'e02f2210b1c7bc3e745973486d1744552100a59d' }))));
     }
     static get is() { return "seki-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class SekiProgress {
         const state = this.getState();
         const percentage = this.getPercentage();
         const isIndeterminate = state === 'indeterminate';
-        return (h("div", { key: '579dc69827da25a425f4cbc41dfa8c36753a6c86', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: 'bd36b1562e3cc3612699710c1685d95001b275fc', class: {
+        return (h("div", { key: '50654fb987c08ffbb70070bcdd4de6ad2cfcee40', class: "seki-progress", role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-valuetext": this.getValueLabel(), "aria-label": this.ariaLabel, "data-state": state, "data-value": this.value, "data-max": this.max }, h("div", { key: '5f7763f0ed0eaa4d30abe034595a5bc84d9dbd81', class: {
                 'seki-progress__indicator': true,
                 'seki-progress__indicator--indeterminate': isIndeterminate,
             }, "data-state": state, "data-value": this.value, "data-max": this.max, style: {

package/dist/collection/components/radio-group/seki-radio-group-item.js

@@ -47,7 +47,7 @@ export class SekiRadioGroupItem {
     }
     render() {
         const dataState = this.checked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'b060b73e40b195094b94911386e07d82c665a70c', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: 'f279b9547fe842d25ab721922e062406ba915c55', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '00d3b0c8663df405d8308a192a6e629e879cc6b9', class: "indicator", part: "indicator" })))));
+        return (h(Host, { key: 'eeb5fc7e9ca03c9abd46c416841ceea3f8f0e02a', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("button", { key: '68df8ecdc6e2b0fa9815ee41c3b15141275db38e', type: "button", role: "radio", class: "radio", part: "radio", ref: el => this.buttonEl = el, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined, tabindex: this.checked ? 0 : -1, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.checked && (h("span", { key: '8716c8b1bf4169f1035a86d8a46eb218377d4baf', class: "indicator", part: "indicator" })))));
     }
     static get is() { return "seki-radio-group-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-radio-group
  * @description A set of radio buttons where only one can be selected at a time.
@@ -29,6 +30,44 @@ export class SekiRadioGroup {
         // `value` in markup is the *initial* selection, not a permanent lock — see
         // valueChanged() for how a controlling host keeps authority.
         this.internalValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue;
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => (this.selectedValue ? this.selectedValue : null),
+            isEmpty: () => !this.selectedValue,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please select one of these options.',
+            getAnchor: () => this.getRadioItems().find(item => !item.disabled),
+            restore: initial => {
+                this.internalValue = initial;
+                this.value = initial;
+                this.updateChildItems();
+            },
+            restoreState: state => {
+                const next = typeof state === 'string' ? state : undefined;
+                this.internalValue = next;
+                this.value = next;
+                this.updateChildItems();
+            },
+        });
+        this.formControl.captureInitial(this.internalValue);
+        this.formControl.sync();
+    }
+    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);
     }
     /**
      * Mirror an externally-assigned `value` onto the rendered selection. This is
@@ -36,10 +75,12 @@ export class SekiRadioGroup {
      * writing the old value back to reject a selection) always wins.
      */
     valueChanged(newValue) {
+        var _a;
         if (newValue !== undefined && newValue !== this.internalValue) {
             this.internalValue = newValue;
             this.updateChildItems();
         }
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     /**
      * Get current selected value
@@ -51,6 +92,7 @@ export class SekiRadioGroup {
      * Handle radio item selection
      */
     handleRadioSelect(event) {
+        var _a;
         event.stopPropagation();
         if (this.disabled) {
             return;
@@ -60,6 +102,7 @@ export class SekiRadioGroup {
         // Keep the public property readable for consumers (`el.value`) and let a
         // controlled host overwrite it from the sekiChange handler below.
         this.value = newValue;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
         this.sekiChange.emit({ value: newValue });
         // Update all child radio items
         this.updateChildItems();
@@ -68,6 +111,7 @@ export class SekiRadioGroup {
      * Handle keyboard navigation
      */
     handleKeyDown(event) {
+        var _a;
         if (this.disabled) {
             return;
         }
@@ -105,6 +149,7 @@ export class SekiRadioGroup {
             // Select the focused item
             this.internalValue = nextItem.value;
             this.value = nextItem.value;
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ value: nextItem.value });
             this.updateChildItems();
         }
@@ -135,10 +180,11 @@ export class SekiRadioGroup {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: 'acfdba96bdc6300fcbc3d96ba90982f0b07b46ba', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: 'b2b4fb6827d7a056b51675aa2930f06777dd3bab' }), this.name && this.selectedValue && (h("input", { key: '03e9662873194ab74be761ca2e350633a88eb21b', type: "hidden", name: this.name, value: this.selectedValue }))));
+        return (h(Host, { key: '68c46542431391dbffba9ca0186a99a9a308da61', role: "radiogroup", "aria-label": this.ariaLabel, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : null }, h("slot", { key: '5e688548a968a174bba849ba10dc312922964e45' })));
     }
     static get is() { return "seki-radio-group"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-radio-group.css"]
@@ -315,6 +361,12 @@ export class SekiRadioGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleFormStateChange"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];
@@ -334,4 +386,5 @@ export class SekiRadioGroup {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { publishContext } from "../../utils/context-bridge";
+import { FormControl } from "../../utils/form-control";
 /**
  * @slot - Content containing seki-select-trigger and seki-select-content
  */
@@ -173,6 +174,30 @@ export class SekiSelect {
         }
         // Expose context on the element for child components
         this.el.selectContext = this.buildSelectContext();
+        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 trigger = this.el.querySelector('seki-select-trigger');
+                return (_b = (_a = trigger === null || trigger === void 0 ? void 0 : trigger.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) !== null && _b !== void 0 ? _b : trigger;
+            },
+            restore: initial => this.setValueFromForm(initial),
+            restoreState: state => {
+                if (this.multiple) {
+                    // A multiple select 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 select was authored with.
+        this.formControl.captureInitial(Array.isArray(this.internalValue) ? [...this.internalValue] : this.internalValue);
         // Seed the form value so an unchanged select still submits its initial value.
         this.syncFormValue();
     }
@@ -215,42 +240,59 @@ export class SekiSelect {
     handleDisabledChange() {
         this.syncFormValue();
     }
-    handleFocusedOptionValueChange() {
-        this.updateContextOnElement();
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
+    formResetCallback() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.reset();
     }
-    updateContextOnElement() {
-        publishContext(this.el, 'selectContext', this.buildSelectContext(), this.sekiSelectContextChange);
+    formDisabledCallback(disabled) {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.setFieldsetDisabled(disabled);
     }
-    /**
-     * Mirror the current selection into the associated form via ElementInternals.
-     * Replaces the previous hidden native control, which lived inside the shadow
-     * root and therefore never participated in form submission.
-     */
-    syncFormValue() {
-        if (!this.internals || typeof this.internals.setFormValue !== 'function') {
-            return;
-        }
-        // Disabled controls do not contribute a value to the form.
-        if (this.disabled) {
-            this.internals.setFormValue(null);
-            return;
+    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;
+        if (this.value !== undefined) {
+            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) {
-                this.internals.setFormValue(null);
-                return;
+                return null;
             }
             const formData = new FormData();
             for (const val of values) {
                 formData.append(this.name, String(val));
             }
-            this.internals.setFormValue(formData);
-        }
-        else {
-            const value = this.internalValue;
-            this.internals.setFormValue(value === '' || value === undefined || value === null ? null : String(value));
+            return formData;
         }
+        return this.isValueEmpty() ? null : String(this.internalValue);
+    }
+    handleFocusedOptionValueChange() {
+        this.updateContextOnElement();
+    }
+    updateContextOnElement() {
+        publishContext(this.el, 'selectContext', this.buildSelectContext(), this.sekiSelectContextChange);
+    }
+    /**
+     * Mirror the current selection into the associated form via ElementInternals.
+     * Replaces the previous hidden native control, which lived inside the shadow
+     * root and therefore never participated in form submission.
+     */
+    syncFormValue() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     // ===========================
     // Methods
@@ -392,7 +434,7 @@ export class SekiSelect {
     // Render
     // ===========================
     render() {
-        return (h(Host, { key: 'd8510bb454e952f086e7bdab84121e4bd15b829d' }, h("slot", { key: '3cdb05ad6c95045d602fd6460f399bd37407a089' })));
+        return (h(Host, { key: '4bbdea0f347a629e01cd64d25b1ec222830bc777' }, h("slot", { key: '34bc204bde0f36e54d2aeef2163b7d33ead2b955' })));
     }
     static get is() { return "seki-select"; }
     static get encapsulation() { return "shadow"; }
@@ -922,6 +964,15 @@ export class SekiSelect {
             }, {
                 "propName": "disabled",
                 "methodName": "handleDisabledChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "name",
+                "methodName": "handleDisabledChange"
             }, {
                 "propName": "focusedOptionValue",
                 "methodName": "handleFocusedOptionValueChange"

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-slider
  * @description An input where the user selects a value from within a given range.
@@ -114,8 +115,42 @@ export class SekiSlider {
         // Seed internal value from `value` when authored, else `defaultValue`, else min.
         const seed = (_b = (_a = this.value) !== null && _a !== void 0 ? _a : this.defaultValue) !== null && _b !== void 0 ? _b : this.min;
         this.internalValue = this.clampValue(seed);
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => (this.name ? this.currentValue.toString() : null),
+            // A slider always has a value (it is clamped into [min, max]) and has no
+            // `required` prop, so it never reports valueMissing.
+            isEmpty: () => false,
+            isDisabled: () => this.disabled,
+            getAnchor: () => this.thumbEl,
+            restore: initial => {
+                this.internalValue = this.clampValue(initial);
+                this.value = this.internalValue;
+            },
+            restoreState: state => {
+                const n = typeof state === 'string' ? Number(state) : NaN;
+                if (!Number.isNaN(n)) {
+                    this.internalValue = this.clampValue(n);
+                    this.value = this.internalValue;
+                }
+            },
+        });
+        // form.reset() goes back to the value the slider was authored with.
+        this.formControl.captureInitial(this.internalValue);
         this.syncFormValue();
     }
+    // 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);
+    }
     /**
      * Mirror an externally-assigned `value` onto the rendered value. This is what
      * keeps controlled usage working: a consumer writing `el.value = n` (or writing
@@ -139,18 +174,9 @@ export class SekiSlider {
      * therefore never participated in form submission.
      */
     syncFormValue() {
-        if (!this.internals || typeof this.internals.setFormValue !== 'function') {
-            return;
-        }
-        if (this.disabled || !this.name) {
-            this.internals.setFormValue(null);
-            return;
-        }
-        this.internals.setFormValue(this.currentValue.toString());
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
-    /**
-     * Get current value (controlled vs uncontrolled), clamped to valid range
-     */
     get currentValue() {
         return this.clampValue(this.internalValue);
     }
@@ -280,7 +306,7 @@ export class SekiSlider {
         const thumbStyle = isVertical
             ? { bottom: `${percentage}%` }
             : { left: `${percentage}%` };
-        return (h(Host, { key: 'd0c29dde458bec9d52ae7e4f79ceaa449443cc43', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '01697db420da065073af0c031e99bbe827bcbcdf', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '9ce1800b259a09c6aa2a1deac94f745f30d49069', class: "track", part: "track" }, h("div", { key: '8dfddcb79871b068867b0563f67ffe893493cc63', class: "range", part: "range", style: rangeStyle })), h("div", { key: '8fcce8ba09fc0018734c627bb94144431ed19240', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined }))));
+        return (h(Host, { key: 'c60f2f23212de7a70bd0b7980692df677f6e1fca', "data-disabled": this.disabled ? '' : null, "data-orientation": this.orientation }, h("div", { key: '48f1ff8956d509a308798ef6f119f72180ddbfde', class: "slider", part: "slider", ref: el => this.trackEl = el, onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }, h("div", { key: '491c9bca41713f8503bbd37377ab840dfe4de027', class: "track", part: "track" }, h("div", { key: '436108700d75865c18d17250efa05ca882b4a2a0', class: "range", part: "range", style: rangeStyle })), h("div", { key: 'a833fe28d0521b372b8b9327e98e37f4ed322f99', class: "thumb", part: "thumb", ref: el => this.thumbEl = el, style: thumbStyle, role: "slider", tabindex: this.disabled ? -1 : 0, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.currentValue, "aria-orientation": this.orientation, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-describedby": this.ariaDescribedby || undefined }))));
     }
     static get is() { return "seki-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 /**
  * @component seki-switch
  * @description An accessible toggle control for binary on/off states with full keyboard navigation,
@@ -35,6 +36,7 @@ export class SekiSwitch {
          * Toggle switch state and emit event
          */
         this.toggle = () => {
+            var _a;
             if (this.disabled) {
                 return;
             }
@@ -43,6 +45,7 @@ export class SekiSwitch {
             // Keep the public property readable for consumers (`el.checked`) and let a
             // controlled host overwrite it from the sekiChange handler below.
             this.checked = newCheckedState;
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ checked: newCheckedState });
         };
         /**
@@ -58,6 +61,43 @@ export class SekiSwitch {
     componentWillLoad() {
         var _a;
         this.internalChecked = (_a = this.checked) !== null && _a !== void 0 ? _a : this.defaultChecked;
+        this.formControl = new FormControl(this.el, this.internals, {
+            // Submits `value` (default 'on') when on, nothing when off - like a checkbox.
+            getFormValue: () => (this.isChecked ? this.value : null),
+            // Native checkbox semantics: `required` means "must be on".
+            isEmpty: () => !this.isChecked,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            requiredMessage: 'Please turn this switch on if you want to proceed.',
+            getAnchor: () => this.switchEl,
+            restore: initial => {
+                this.internalChecked = initial;
+                this.checked = initial;
+            },
+            restoreState: state => {
+                this.internalChecked = state !== null;
+                this.checked = this.internalChecked;
+            },
+        });
+        this.formControl.captureInitial(this.internalChecked);
+        this.formControl.sync();
+    }
+    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);
     }
     /**
      * Mirror externally-assigned `checked` onto the rendered state. This is what
@@ -65,9 +105,11 @@ export class SekiSwitch {
      * writing the old value back to reject a toggle) always wins.
      */
     checkedChanged(newValue) {
+        var _a;
         if (newValue !== undefined && newValue !== this.internalChecked) {
             this.internalChecked = newValue;
         }
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     /**
      * Get current checked state
@@ -91,10 +133,11 @@ export class SekiSwitch {
     render() {
         const isChecked = this.isChecked;
         const dataState = isChecked ? 'checked' : 'unchecked';
-        return (h(Host, { key: 'b4f3cc320e1fd430c2c602a87ce190bd3d6cdeff', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '852044f25a271541d45a4ac3b7f709b8506263a8', class: "switch", part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: 'dcc403fde86719e192fca98d5e9a2be82041b5db', class: "thumb", part: "thumb" })), this.name && (h("input", { key: '8f041a2aaa3019987de60e872a14856d5a7de2bb', type: "checkbox", name: this.name, value: this.value, checked: isChecked, required: this.required, disabled: this.disabled, style: { display: 'none' }, tabindex: -1, "aria-hidden": "true" }))));
+        return (h(Host, { key: '983eb8c2197906c08015b1ba03c990ba45d63b50', "data-state": dataState, "data-disabled": this.disabled ? '' : null }, h("div", { key: '4cf34435488f7dc545572a8d20509d9c12e08f06', class: "switch", ref: el => (this.switchEl = el), part: "switch", role: "switch", "aria-checked": isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel || undefined, "aria-required": this.required ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick }, h("span", { key: 'f637e58d2af875cac10ef3b2dc073c4deb8e574f', class: "thumb", part: "thumb" }))));
     }
     static get is() { return "seki-switch"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["seki-switch.css"]
@@ -296,6 +339,15 @@ export class SekiSwitch {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleFormStateChange"
+            }, {
                 "propName": "checked",
                 "methodName": "checkedChanged"
             }];
@@ -309,4 +361,5 @@ export class SekiSwitch {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }