@sekiui/elements 0.1.2 → 0.1.4

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { buildOptionId } from "../../utils/select";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Option content
  * @slot selected-indicator - Custom selected indicator
@@ -9,11 +9,7 @@ export class SekiSelectOption {
     constructor() {
         /** Whether the option is disabled */
         this.disabled = false;
-        // ===========================
-        // Lifecycle
-        // ===========================
-        this.hasRegistered = false;
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
         /**
          * Refresh aria-selected/data-selected/data-focused directly on the
          * rendered DOM whenever the parent's value/focus state changes post-mount.
@@ -25,11 +21,14 @@ export class SekiSelectOption {
          * DOM directly here side-steps that entirely.
          */
         this.handleParentContextChange = () => {
+            const selectContext = this.getSelectContext();
+            if (selectContext && this.registeredVia !== selectContext.registerOption) {
+                this.registerWithParent(selectContext);
+            }
             const optionEl = this.el.querySelector('.option');
             if (!optionEl)
                 return;
             optionEl.id = this.optionId;
-            const selectContext = this.getSelectContext();
             const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
             const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
             optionEl.setAttribute('aria-selected', isSelected ? 'true' : 'false');
@@ -88,24 +87,22 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         return buildOptionId((_a = selectContext === null || selectContext === void 0 ? void 0 : selectContext.contentId) !== null && _a !== void 0 ? _a : 'select', this.value);
     }
+    connectedCallback() {
+        // Runs on first connect and after a DOM move. Registration happens in the
+        // context callback, so it also happens when this option upgrades before
+        // its seki-select (one-module-per-tag loading): the select's first
+        // publish from componentWillLoad triggers it (#323).
+        this.selectConsumer.connect(this.el);
+    }
     componentDidLoad() {
-        this.registerWithParent();
         this.refreshOptionId();
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentContextChange);
-    }
-    connectedCallback() {
-        // Re-register on reconnect (after a DOM move). componentDidLoad fires only
-        // once, so without this the option would stay unregistered after being moved.
-        // Parent registration is idempotent, so this never duplicates.
-        if (this.hasRegistered) {
-            this.registerWithParent();
-        }
     }
     disconnectedCallback() {
         // Unregister this option
         const selectContext = this.getSelectContext();
         selectContext === null || selectContext === void 0 ? void 0 : selectContext.unregisterOption(this.value);
-        this.contextSubscription.unsubscribe();
+        this.registeredVia = undefined;
+        this.selectConsumer.disconnect();
     }
     // If render() ran before the parent's selectContext was available (see the
     // 'select' fallback in optionId's getter above), the DOM id was baked in as
@@ -118,23 +115,24 @@ export class SekiSelectOption {
             optionEl.id = this.optionId;
         }
     }
-    registerWithParent() {
+    registerWithParent(selectContext) {
         var _a;
-        const selectContext = this.getSelectContext();
         const displayLabel = this.label || ((_a = this.el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        selectContext === null || selectContext === void 0 ? void 0 : selectContext.registerOption({
+        // Record first: registerOption republishes the context synchronously,
+        // which re-enters handleParentContextChange.
+        this.registeredVia = selectContext.registerOption;
+        selectContext.registerOption({
             value: this.value,
             label: displayLabel,
             disabled: this.disabled,
         });
-        this.hasRegistered = true;
     }
     // ===========================
     // Helpers
     // ===========================
     getSelectContext() {
-        const parent = this.el.closest('seki-select');
-        return parent === null || parent === void 0 ? void 0 : parent.selectContext;
+        var _a;
+        return (_a = this.selectConsumer.context) !== null && _a !== void 0 ? _a : undefined;
     }
     // ===========================
     // Render
@@ -143,7 +141,7 @@ export class SekiSelectOption {
         const selectContext = this.getSelectContext();
         const isSelected = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.isValueSelected(this.value)) || false;
         const isFocused = (selectContext === null || selectContext === void 0 ? void 0 : selectContext.focusedOptionValue) === this.value;
-        return (h(Host, { key: '86147b4b19997cbfaef666b2d62fd39819f33002' }, h("div", { key: '95065a78bc3326835b77c185236962dbb9e66613', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '77fa027a9145e613ab1960d194b509b884da3e0d', class: "option-label" }, h("slot", { key: 'a7c154b3d850fcc57cefe67e95273e2226d75200' })), h("span", { key: '8641aa8a4022301c6bdf240c1cabef40ae7d5854', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '209de66adb71a977fb4e1e4d98947c00f47f7bf1', name: "selected-indicator" }, h("svg", { key: 'b633b7d5825def081cd3e9dd1d05d69530251481', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4d95adba982542c07693b871abc831f364f8de06', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '0c513bf5a4f3d1b462836bb8abd08017f5b75880' }, h("div", { key: '7a4a9008d7c14d016ee2747e0a18ed6e94d769aa', class: "option", role: "option", id: this.optionId, onClick: this.handleOptionClick, onFocus: this.handleOptionFocus, onKeyDown: this.handleOptionKeyDown, "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, "data-selected": isSelected ? 'true' : undefined, "data-focused": isFocused ? 'true' : undefined, "data-disabled": this.disabled ? 'true' : undefined, tabindex: -1 }, h("span", { key: '6660252c5c42e3e3fe297a734aecacf45bb9afab', class: "option-label" }, h("slot", { key: 'ab3c1a534982cdbe6dc75dc6174ecea320a1f21b' })), h("span", { key: 'a8bf08a92e88a1b3c0f61a2d5ec312f5b9f34b7f', class: "option-indicator", "aria-hidden": "true" }, h("slot", { key: '3e9b9d8ecdb242fdfaf6b0ff5a431f9b8ea6bd67', name: "selected-indicator" }, h("svg", { key: '238a90118e217381e39951d5b92859f759488075', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '08be34c46c3017035ff9f281f433ffa9f91c7d06', d: "M10 3L4.5 8.5L2 6", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "seki-select-option"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { buildOptionId } from "../../utils/select";
-import { subscribeToContextChange } from "../../utils/context-bridge";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * @slot - Custom trigger content
  * @slot pill - Custom pill rendering in multi-select mode
@@ -11,16 +11,16 @@ export class SekiSelectTrigger {
         // ===========================
         // Lifecycle
         // ===========================
-        this.contextSubscription = { parent: null, unsubscribe: () => { } };
+        // One consumer covers value, open, focus, disabled and option registration:
+        // seki-select republishes on each of them. connect() reads the context right
+        // away, so a trigger that connects after the select already published still
+        // starts from the current value.
+        this.selectConsumer = new ContextConsumer('seki-select', 'selectContext', () => this.handleParentContextChange());
         // ===========================
         // Parent Event Listeners
         // ===========================
-        this.handleParentOpenChange = () => {
-            // Force re-render when parent's open state changes
-            this.forceUpdate++;
-        };
-        this.handleParentValueChange = () => {
-            // Force re-render when parent's value changes
+        this.handleParentContextChange = () => {
+            // Force re-render when the parent's context changes
             this.forceUpdate++;
         };
         // ===========================
@@ -47,42 +47,36 @@ export class SekiSelectTrigger {
             }
         };
     }
-    componentDidLoad() {
-        // Manually attach event listeners to ensure they work
-        if (this.buttonRef) {
-            this.buttonRef.addEventListener('click', this.handleButtonClick);
-            this.buttonRef.addEventListener('keydown', this.handleButtonKeyDown);
-        }
-        // Listen for state changes from parent
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.addEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.addEventListener('sekiChange', this.handleParentValueChange);
-        }
-        // sekiChange only fires for user-driven selection; programmatic value/
-        // focus/disabled changes (e.g. controlled-mode `select.value = x`) only
-        // emit the shared context-change event, so this needs its own subscription too.
-        this.contextSubscription = subscribeToContextChange(this.el, 'seki-select', this.handleParentValueChange);
+    connectedCallback() {
+        this.selectConsumer.connect(this.el);
     }
     disconnectedCallback() {
-        // Clean up event listeners
-        if (this.buttonRef) {
-            this.buttonRef.removeEventListener('click', this.handleButtonClick);
-            this.buttonRef.removeEventListener('keydown', this.handleButtonKeyDown);
-        }
-        const parent = this.el.closest('seki-select');
-        if (parent) {
-            parent.removeEventListener('sekiOpenChange', this.handleParentOpenChange);
-            parent.removeEventListener('sekiChange', this.handleParentValueChange);
-        }
-        this.contextSubscription.unsubscribe();
+        // The button's own listeners need no cleanup: they live and die with it.
+        this.selectConsumer.disconnect();
+    }
+    /**
+     * Listeners follow the button element itself: the button only exists once a
+     * context is available (the first render may be the "Loading..." fallback
+     * when this trigger upgrades before its seki-select), so binding once in
+     * componentDidLoad could miss it entirely.
+     */
+    setButtonRef(ref) {
+        var _a, _b;
+        const el = ref !== null && ref !== void 0 ? ref : undefined;
+        if (el === this.buttonRef)
+            return;
+        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleButtonClick);
+        (_b = this.buttonRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('keydown', this.handleButtonKeyDown);
+        this.buttonRef = el;
+        el === null || el === void 0 ? void 0 : el.addEventListener('click', this.handleButtonClick);
+        el === null || el === void 0 ? void 0 : el.addEventListener('keydown', this.handleButtonKeyDown);
     }
     // ===========================
     // Helpers
     // ===========================
     getSelectContext() {
-        const parent = this.el.closest('seki-select');
-        return parent === null || parent === void 0 ? void 0 : parent.selectContext;
+        var _a;
+        return (_a = this.selectConsumer.context) !== null && _a !== void 0 ? _a : undefined;
     }
     renderPlaceholder() {
         const parent = this.el.closest('seki-select');
@@ -121,7 +115,7 @@ export class SekiSelectTrigger {
         }
         const isOpen = selectContext.open;
         const isDisabled = selectContext.disabled;
-        return (h(Host, null, h("button", { ref: (el) => (this.buttonRef = el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
+        return (h(Host, null, h("button", { ref: (el) => this.setButtonRef(el), type: "button", class: "trigger-button", role: "combobox", "aria-expanded": isOpen ? 'true' : 'false', "aria-controls": selectContext.contentId, "aria-activedescendant": selectContext.focusedOptionValue !== null
                 ? buildOptionId(selectContext.contentId, selectContext.focusedOptionValue)
                 : undefined, "aria-label": selectContext.ariaLabel, "aria-labelledby": selectContext.ariaLabelledby, "aria-disabled": isDisabled ? 'true' : undefined, disabled: isDisabled, "data-disabled": isDisabled ? 'true' : undefined, "data-state": isOpen ? 'open' : 'closed' }, selectContext.multiple
             ? this.renderMultiValue(selectContext)

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { ContextConsumer } from "../../utils/context-bridge";
 /**
  * seki-sheet-content: Container for sheet content
  *
@@ -16,39 +17,33 @@ export class SekiSheetContent {
          * seki-sheet parent (e.g. mounted standalone).
          */
         this._isOpen = true;
+        this.sheetConsumer = new ContextConsumer('seki-sheet', '_sheetContext', () => this.syncOpenState());
         this.handleCloseClick = () => {
             this.closeSheet.emit();
         };
-        this.onSheetOpenChange = () => {
-            this.syncOpenState();
-        };
     }
+    /**
+     * Re-read the parent's open state. Runs once on connect (picking up a sheet
+     * that is already open, e.g. `<seki-sheet open>`) and on every publish.
+     */
     syncOpenState() {
-        var _a;
-        if (!this.sheetEl)
+        var _a, _b;
+        // No seki-sheet parent: stay open (standalone use).
+        if (!this.sheetConsumer.parent)
             return;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const context = this.sheetEl._sheetContext;
-        this._isOpen = (_a = context === null || context === void 0 ? void 0 : context.isOpen) !== null && _a !== void 0 ? _a : false;
+        this._isOpen = (_b = (_a = this.sheetConsumer.context) === null || _a === void 0 ? void 0 : _a.isOpen) !== null && _b !== void 0 ? _b : false;
     }
-    componentWillLoad() {
-        var _a;
-        this.sheetEl = (_a = this.el.closest('seki-sheet')) !== null && _a !== void 0 ? _a : undefined;
-        // Propagate side attribute to parent for CSS targeting
-        if (this.sheetEl) {
-            this.sheetEl.setAttribute('data-side', this.side || 'right');
-            this.syncOpenState();
-        }
-    }
-    componentDidLoad() {
-        var _a, _b;
-        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.addEventListener('sheetOpen', this.onSheetOpenChange);
-        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.addEventListener('sheetClose', this.onSheetOpenChange);
+    connectedCallback() {
+        this.sheetConsumer.connect(this.el);
+        this.propagateSide();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.sheetEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sheetOpen', this.onSheetOpenChange);
-        (_b = this.sheetEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('sheetClose', this.onSheetOpenChange);
+        this.sheetConsumer.disconnect();
+    }
+    /** Propagate the side attribute to the parent for CSS targeting. */
+    propagateSide() {
+        var _a;
+        (_a = this.sheetConsumer.parent) === null || _a === void 0 ? void 0 : _a.setAttribute('data-side', this.side || 'right');
     }
     render() {
         if (!this._isOpen) {
@@ -128,4 +123,10 @@ export class SekiSheetContent {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "side",
+                "methodName": "propagateSide"
+            }];
+    }
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { publishContext } from "../../utils/context-bridge";
 /**
  * seki-sheet: Root sheet component (slide-out panel)
  *
@@ -36,8 +37,8 @@ export class SekiSheet {
     componentWillLoad() {
         this._isOpen = this.open || this.defaultOpen;
         this.open = this._isOpen;
-    }
-    componentDidLoad() {
+        // Publish before the first render so `<seki-sheet open>` shows its content
+        // at first paint (#323).
         this.updateContext();
     }
     handleOpenPropChange(newValue) {
@@ -89,9 +90,8 @@ export class SekiSheet {
     }
     updateContext() {
         // seki-sheet-content has no other way to know this sheet's open state — it
-        // reads this off the host element via closest('seki-sheet').
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.el._sheetContext = { isOpen: this._isOpen };
+        // reads this off the host element (see consumeContext in context-bridge).
+        publishContext(this.el, '_sheetContext', { isOpen: this._isOpen }, this.sheetContextChange);
     }
     handleTriggerClick() {
         this.toggleSheet();
@@ -105,10 +105,10 @@ export class SekiSheet {
         }
     }
     render() {
-        return (h("div", { key: 'a368d95081a628a104171c11b046a5acaf0c5a61', class: {
+        return (h("div", { key: 'dda645ffb1445b876a53d3713777ed25e7f85998', class: {
                 'seki-sheet': true,
                 'seki-sheet--open': this._isOpen,
-            }, part: "sheet" }, h("slot", { key: '29b5012870238b5859216c681db33b13e88185d0' }), this._isOpen && (h("div", { key: '6914c57abd54a1d3b02458708955d9c13ba98db1', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
+            }, part: "sheet" }, h("slot", { key: '8c7fca42b42eb4c81ce3a4ab7f01d9ddf284a469' }), this._isOpen && (h("div", { key: '2fc1c0d783f8f39656ace7f065d326d4a70c2da6', class: "seki-sheet-overlay", part: "overlay", onClick: () => this.closeSheet() }))));
     }
     static get is() { return "seki-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -217,6 +217,21 @@ export class SekiSheet {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "sheetContextChange",
+                "name": "sekiContextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal: notifies seki-sheet-content that `_sheetContext` changed. Not\npart of the public API; listen to `sekiOpenChange` instead."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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"; }
 }