@sekiui/elements 0.1.2 → 0.1.3

package/dist/collection/components/dropdown-menu/seki-dropdown-menu.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { composedContains, getDeepActiveElement } from "../../utils/menu-navigation";
 /**
  * Dropdown Menu component - context menu with items
  *
@@ -39,10 +40,12 @@ export class SekiDropdownMenu {
     openChanged(newValue) {
         this._isOpen = newValue;
         if (this._isOpen) {
+            this.returnFocusTo = getDeepActiveElement();
             this.setupClickOutside();
         }
         else {
             this.removeClickOutside();
+            this.restoreFocus();
         }
         // Programmatic `menuEl.open = x` must notify already-mounted children the
         // same way openMenu()/closeMenu() do (found during the #261 audit).
@@ -99,6 +102,25 @@ export class SekiDropdownMenu {
             this.closeMenu();
         }
     }
+    /**
+     * Return focus to the trigger (or whatever had focus when the menu opened)
+     * after the menu closes. Skipped when focus already moved somewhere outside
+     * the menu, e.g. the user clicked another focusable element.
+     */
+    restoreFocus() {
+        const content = this.el.querySelector('seki-dropdown-menu-content');
+        const active = getDeepActiveElement();
+        const focusInMenu = !active || active === document.body || (!!content && composedContains(content, active));
+        const previous = this.returnFocusTo;
+        this.returnFocusTo = undefined;
+        if (!focusInMenu)
+            return;
+        const trigger = this.el.querySelector('seki-dropdown-menu-trigger');
+        const target = previous && previous !== document.body && previous.isConnected && !(content && composedContains(content, previous))
+            ? previous
+            : trigger === null || trigger === void 0 ? void 0 : trigger.querySelector('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        target === null || target === void 0 ? void 0 : target.focus();
+    }
     setupClickOutside() {
         // Clear any pending timeout/handler first so a rapid open→close→open cannot
         // leave a leaked listener or double-schedule.
@@ -153,7 +175,7 @@ export class SekiDropdownMenu {
         this.removeClickOutside();
     }
     render() {
-        return (h(Host, { key: 'c0e2e2a03959e42f69fb687c4b8674523cb8206f', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '9210d19dfd727713f137b3ebdf93f86ed2153d31', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: 'ef57018b73ef42a8f0f411689d115a0358bafbfe' }))));
+        return (h(Host, { key: '5aa46bca99cbd85e5502c003931f26e36b612790', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: 'e7a528864da3024287324a32c85d15d52c23220e', part: "dropdown-menu", class: "dropdown-menu" }, h("slot", { key: 'c199df3c379535822edb7cf20a73da64f2f9b5c4' }))));
     }
     static get is() { return "seki-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ import { Host, h } from "@stencil/core";
  */
 export class SekiEmpty {
     render() {
-        return (h(Host, { key: '8e216b9cf08f891086ff834dfea2fbd54419a40e' }, h("div", { key: '5b3b7594d5c3df3a4a0ddf8e4eae636baa4159cb', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: 'e3b86de6eae76012c0d48134eb5e31e246659d20', class: "seki-empty__icon", part: "icon" }, h("slot", { key: '44413e591757d2a010d26c2d423538517f391407', name: "icon" })), this.heading && (h("h3", { key: '9ed112f7a228f408e1eb1acef87d403d9375e72e', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '4e9f6387c22d3a9089df6ffd36b0506388f11843', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '37c3572e328a542019a8e1682cc903fb949372de', class: "seki-empty__content", part: "content" }, h("slot", { key: 'd853d9233200b852335b7030f9f81e4c7f540b63' })), h("div", { key: '7b7f69b8f57e1dfaaafc10c9e5adbd28f4d36ca8', class: "seki-empty__action", part: "action" }, h("slot", { key: 'e992c763b281451fc1f829ef7c11b9034caedf50', name: "action" })))));
+        return (h(Host, { key: '5f412cfece32e3d1f8e0cdf36b5230665704bd05' }, h("div", { key: '8baf34fe27a7418bc25354fe982220615207bbcf', class: "seki-empty", part: "empty", role: "status" }, h("div", { key: '486918a0a49740a1c55ce2cb9afc793584eee26c', class: "seki-empty__icon", part: "icon" }, h("slot", { key: '875da7a7a3f9d9eb036f443c05da874612f25bd6', name: "icon" })), this.heading && (h("h3", { key: 'cb0e52fbe2f3b4f4059faa394064db432fefbc2a', class: "seki-empty__title", part: "title" }, this.heading)), this.description && (h("p", { key: '2be58514722b58bd79074c68ffca0117195d792e', class: "seki-empty__description", part: "description" }, this.description)), h("div", { key: '0c444d6b558e95eb548a628177a5189a7864954a', class: "seki-empty__content", part: "content" }, h("slot", { key: '0ba8cdb879551138e696ed0125de2d7d18481d0b' })), h("div", { key: 'fba4f83a754f8175a67eeb8ff27e333dbd698d45', class: "seki-empty__action", part: "action" }, h("slot", { key: 'e07313e7c9197d3bfe1532d9d5f8d7817d9b09a3', name: "action" })))));
     }
     static get is() { return "seki-empty"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class SekiField {
     }
     render() {
         const hasMultiple = this.hasMultipleControls();
-        return (h(Host, { key: '3e8cb8af3695f4679c99e548b7a8d5fe390d9075', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: 'ae2ef92cb8d2a8df641b333bfbec2bcbc9b3143f', class: "field" }, h("div", { key: '04ef1bafee80a43066ff8dcbf00f7d70dbba4a75', class: "field-label" }, h("slot", { key: '0a9d4f1dc7fe2a7d8a85c0acb8d095cf14f87233', name: "label" })), h("div", { key: 'd986e0f95988069ab855189f6c2a4f2f8c49d10c', class: "field-control" }, h("slot", { key: '8e96a205c5a3c594101dbc88c2718043b30e325f' })), h("div", { key: 'dd5dd36bb35e9e690789954b173d981f1978fbaa', class: "field-description" }, h("slot", { key: '1ca0a6eb01c468eb0ce80e3f261107d05f6890f3', name: "description" })), h("div", { key: '78b7ba058f6ecd393676141218efd711b556c91e', class: "field-error" }, h("slot", { key: 'd9c6623cda2de4ff79670806be7d424907785d9d', name: "error" })))));
+        return (h(Host, { key: '6d5c0dc39e92ad0783b6755035823a878ac95500', "data-orientation": this.orientation, "data-invalid": this.invalid ? '' : undefined, role: hasMultiple ? 'group' : undefined }, h("div", { key: '708937237bc63b11a1ba4746351810abb0f6904c', class: "field" }, h("div", { key: 'a077c2034ea590b714969c4ad6ebeddd6dfa9a28', class: "field-label" }, h("slot", { key: 'ba94a250be531af1be18a9d8ed9d0a145a5e49f0', name: "label" })), h("div", { key: '3a032748960267bd4f5919b44c4cd4d01a17fa00', class: "field-control" }, h("slot", { key: 'd5632dfb857dcfebe7f9b6f45354903561545be1' })), h("div", { key: '02f109075a54d838db01b7b760a8277911517cc2', class: "field-description" }, h("slot", { key: '553db4a5434be4277c2507f3af33ea940a8c04a4', name: "description" })), h("div", { key: '98941dfeac3b40136e39706595936829f1e94f6d', class: "field-error" }, h("slot", { key: 'ffd9f2c146073b12d302bfc026817bcb5b5405ef', name: "error" })))));
     }
     static get is() { return "seki-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class SekiFieldDescription {
         return this.componentId;
     }
     render() {
-        return (h("div", { key: '7dcd3f2ded081d952ec498805308e6d89d644b65', id: this.componentId, class: "description" }, h("slot", { key: 'cabc7002b8b8b2714cd77bf0bb530b5d107da932' })));
+        return (h("div", { key: '576382295b9ed414e1039bdc342ffee29b2d5531', id: this.componentId, class: "description" }, h("slot", { key: 'a5b79dba0790e1b69738889d61a48b44dacc5149' })));
     }
     static get is() { return "seki-field-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-error/seki-field-error.js

@@ -57,7 +57,7 @@ export class SekiFieldError {
     }
     render() {
         const style = this._visible ? {} : { display: 'none' };
-        return (h("div", { key: '0bdb96401638104e42d6be802cc5d997136c34a4', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: 'ca00b6eac2d88a4ab8a21ab458698e8964232e84' })));
+        return (h("div", { key: '44e891a1d8e637906933ece17fee66dec2ffb613', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '741fe900c84f9fa797ae58e7e8e6c58532fa0495' })));
     }
     static get is() { return "seki-field-error"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SekiFieldGroup {
         const style = {
             '--seki-field-group-gap': this.gap,
         };
-        return (h("div", { key: 'f674336b32a31deb9895afe4f3b7b40afd3a66e1', class: "field-group", style: style }, h("slot", { key: '0373b8f5d14f211d26d3a324da5db3140f924223' })));
+        return (h("div", { key: 'bcf7e18784e4f315bc6b4574ef639c154dcc8a24', class: "field-group", style: style }, h("slot", { key: '501913c4d4aa7f6e19f86d593279e439beb4e811' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-label/seki-field-label.js

@@ -9,7 +9,7 @@ export class SekiFieldLabel {
     }
     render() {
         const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: '833e8251b976202c5cd8090cfff13e11da9c10ed' }, labelProps), h("slot", { key: '8297e06835347162543b24031f72d6fc0170274f' }), this.required && h("span", { key: '6c1e0a03528c0294b47f83cb65564d70ade01a5c', class: "required-indicator" }, " *")));
+        return (h("label", Object.assign({ key: 'ff0853ec0cd7216d1357f6a67d31d477ed244c24' }, labelProps), h("slot", { key: 'caf0af6159cd63804748b99a66d20c1f40a23111' }), this.required && h("span", { key: '0628546ed8740017449a543dcb1b2bfa279ff254', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-legend/seki-field-legend.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiFieldLegend {
     render() {
-        return (h("legend", { key: '22f6f51379b519bc26834497183b38af18cd6458' }, h("slot", { key: '6b597982452b392d745d94dceb8808ff928a1dfd' })));
+        return (h("legend", { key: 'c14c84629f3c727c7ad791b12eee95dc858a0755' }, h("slot", { key: 'd60f085ed640d10ab60540203c4fedee245c3d7d' })));
     }
     static get is() { return "seki-field-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class SekiFieldset {
         this.disabled = false;
     }
     render() {
-        return (h("fieldset", { key: 'e9483655f9440b01e02233963dc7af96677e7ae9', disabled: this.disabled, class: "fieldset" }, h("slot", { key: 'd4131ebbfe94e985f3d1e5d2c97870e30b4dcf7d', name: "legend" }), h("div", { key: '28b91f73c7dcce6d5073349cd42ee8eb699f185a', class: "fieldset-content" }, h("slot", { key: '62b7ad096b8a3bf4c9bd315575784d7e0e0094fb' }))));
+        return (h("fieldset", { key: 'a8dbcc839ed3bd9f0ab171ab7e144259e0e21bb6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '0ecb3a16e59e70f0c2ac7d8bcfaa43da1709c8ea', name: "legend" }), h("div", { key: '9cd636d991d0f984f0262cb9c9fcfc4c11319698', class: "fieldset-content" }, h("slot", { key: '658de18e7c5f1a19b422be729091c57f475888eb' }))));
     }
     static get is() { return "seki-fieldset"; }
     static get encapsulation() { return "shadow"; }

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

@@ -124,7 +124,7 @@ export class SekiHoverCardTrigger {
         }
     }
     render() {
-        return (h(Host, { key: 'fae9927cd8cc2807257fb55b905f45e90b0e6a0d' }, h("span", { key: 'e4c8b4a08481a07604698e7a9b1225d8122abbe9', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: 'e611398a19d7798ee0eb11dd8ad5bf83e14f9007' }))));
+        return (h(Host, { key: '9462d58ce8e053ed887f31f1d7ab18741427cde8' }, h("span", { key: '5ea522dcfca85f250aef551f9528a455de3204ca', part: "trigger", class: "hover-card-trigger", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick }, h("slot", { key: '0d89d77b3ff786f60c7a5fdc12dd052611b4727c' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 export class SekiInput {
     constructor() {
         /**
@@ -30,21 +31,17 @@ export class SekiInput {
          */
         this.invalid = false;
         this.handleInput = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            // Only call setFormValue if internals is available (not in test environment)
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiInput.emit({ value: this.value, nativeEvent: event });
         };
         this.handleChange = (event) => {
+            var _a;
             const target = event.target;
             this.value = target.value;
-            // Only call setFormValue if internals is available (not in test environment)
-            if (this.internals && typeof this.internals.setFormValue === 'function') {
-                this.internals.setFormValue(this.value);
-            }
+            (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
             this.sekiChange.emit({ value: this.value, nativeEvent: event });
         };
         this.handleFocus = (event) => {
@@ -55,27 +52,58 @@ export class SekiInput {
             this.sekiBlur.emit({ value: target.value, nativeEvent: event });
         };
     }
-    // Form-associated lifecycle callbacks
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
     formResetCallback() {
-        this.value = '';
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue('');
-        }
+        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) {
-        this.value = state;
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(state);
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
+    }
+    /**
+     * Keep the inner inputEl and the form in step with a programmatic `el.value = x`
+     * without waiting for the next render, so `form.checkValidity()` and FormData
+     * read the new value immediately.
+     */
+    handleFormStateChange() {
+        var _a, _b, _c;
+        if (this.inputEl && this.inputEl.value !== ((_a = this.value) !== null && _a !== void 0 ? _a : '')) {
+            this.inputEl.value = (_b = this.value) !== null && _b !== void 0 ? _b : '';
         }
+        (_c = this.formControl) === null || _c === void 0 ? void 0 : _c.sync();
     }
     componentWillLoad() {
-        // Set initial form value
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.value || '');
-        }
+        var _a;
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => { var _a; return (_a = this.value) !== null && _a !== void 0 ? _a : ''; },
+            isEmpty: () => !this.value,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            isReadonly: () => this.readonly,
+            restore: initial => {
+                this.value = initial;
+            },
+            restoreState: state => {
+                this.value = typeof state === 'string' ? state : '';
+            },
+            // Mirror the inner control's own validity (required, minlength, ...) onto the host.
+            getNativeControl: () => this.inputEl,
+        });
+        this.formControl.captureInitial((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        this.formControl.sync();
+    }
+    componentDidRender() {
+        var _a;
+        // The inner control's constraint attributes were just updated by this render.
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        return (h("input", { key: '958583cf7f86eef7fbdf40253e95d7f925ec3f16', type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
+        return (h("input", { key: 'c80ba362f1672729688d2faa5aad3c24ea5680fe', ref: el => (this.inputEl = el), type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, name: this.name, autocomplete: this.autocomplete, min: this.min, max: this.max, step: this.step, pattern: this.pattern, minlength: this.minlength, maxlength: this.maxlength, class: `input input--${this.size}${this.invalid ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }));
     }
     static get is() { return "seki-input"; }
     static get encapsulation() { return "shadow"; }
@@ -529,5 +557,17 @@ export class SekiInput {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleFormStateChange"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }

package/dist/collection/components/input-group/seki-input-addon.js

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: '6bc1bcce31c2f70fcb554bf3aadb0e8c9782abba' }, h("div", { key: 'b2da0e782285d83cd5bd0fb1ae997dfd8567e59a', class: `addon addon--${this.size}` }, h("slot", { key: '71087ebe094e320976f8df34de66e9cbe8c9b038' }))));
+        return (h(Host, { key: 'c7074cb973c31da3445e116e04659984da389a67' }, h("div", { key: '91947802b154c0fdea29752dfcb6d8895d60f071', class: `addon addon--${this.size}` }, h("slot", { key: '16c554ff314d8bf805022f009dfccb48d8a700b3' }))));
     }
     static get is() { return "seki-input-addon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class SekiInputGroup {
         });
     }
     render() {
-        return (h(Host, { key: '3ca7596ab457ab6e9c5966913c405bb0cfc4a77b' }, h("div", { key: '6682c8dd522b6792df7d5c938d2023ddf7173f1f', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'a2512e4502f189dbb4b2eb1d4aa78709229873ac', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: 'fc2a9fb89ce4d35c26d71370e70449ae007876ab' }, h("div", { key: '892fda648fcc6ef0ca07be866eef38aedfc4beb3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'f6cb66ed84abcf5eb1113077f6c10cd727c89c73', onSlotchange: () => this.updateChildren() }))));
     }
     static get is() { return "seki-input-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-group.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpGroup {
     render() {
-        return (h("div", { key: '8d0dc972d3951f18d366e25dc1f108215956711e', class: "group", role: "group" }, h("slot", { key: '8d0426f6e61dc8d824bc6da6c6f5e6cd8ac540ee' })));
+        return (h("div", { key: '1f0aeb7a32007269564aeabd2485ce0c2243c0e5', class: "group", role: "group" }, h("slot", { key: 'eaf66792fbde8b08fda526f2cae06862a9e3ef97' })));
     }
     static get is() { return "seki-input-otp-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-separator.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SekiInputOtpSeparator {
     render() {
-        return (h("div", { key: 'e66c1345927dced2cded20874e8a132fce8d4d02', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '7c6a27e3f747bfad8f1a84728d418ec6ad61b441' }, h("span", { key: '86453e9b51a6a9c1eea661870feba072f0ece873', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: '0ba5502fc7bd9b31f971d60a97e3a2918347a9a1', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '110fa0a196358d6f0ffa09234ade3dda4733e4c7' }, h("span", { key: '5d20bcb216cea24e89ece238a2504507c4f3bedf', "aria-hidden": "true" }, "-"))));
     }
     static get is() { return "seki-input-otp-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp-slot.js

@@ -64,7 +64,7 @@ export class SekiInputOtpSlot {
             'slot--invalid': this.isInvalid,
             'slot--focused': this.hasFocus,
         };
-        return (h("div", { key: 'b9467e30551db6287efeb3e7a19a3dbed59ec09e', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '15d67df6effa6db7130b728368bba11022492035', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: '4ba5372ec0d062293f2ef1f6f49c30872f0fdfcf', class: "caret" })));
+        return (h("div", { key: '3f9f4d541c4c65699899c99be18e17f71ad05cc8', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '5a8b8d160ce2d6a98a9d2f6ed71a81456d29dfb5', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: 'c1b2a645b973427facb8843d47a24b759dacf881', class: "caret" })));
     }
     static get is() { return "seki-input-otp-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-otp/seki-input-otp.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { FormControl } from "../../utils/form-control";
 export class SekiInputOtp {
     constructor() {
         /**
@@ -144,10 +145,13 @@ export class SekiInputOtp {
         };
     }
     handleValueChange(newValue) {
-        // Update form value
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(newValue);
+        var _a;
+        // Update form value + validity. The inner input only picks the new value up on
+        // the next render, so push it now for `form.checkValidity()` to be current.
+        if (this.inputRef && this.inputRef.value !== newValue) {
+            this.inputRef.value = newValue;
         }
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
         // Notify slots
         this.sekiOtpStateChange.emit();
         // Check if complete
@@ -155,35 +159,53 @@ export class SekiInputOtp {
             this.sekiComplete.emit({ value: newValue });
         }
     }
+    handleFormStateChange() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
+    }
     handleStateChange() {
         this.sekiOtpStateChange.emit();
     }
     componentWillLoad() {
-        // Set initial form value
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.value || '');
-        }
+        this.formControl = new FormControl(this.el, this.internals, {
+            getFormValue: () => this.value || '',
+            isEmpty: () => !this.value,
+            isRequired: () => this.required,
+            isDisabled: () => this.disabled,
+            restore: initial => {
+                this.value = initial;
+                this._activeIndex = Math.min(initial.length, this.maxlength - 1);
+            },
+            restoreState: state => {
+                const next = typeof state === 'string' ? state : '';
+                this.value = next;
+                this._activeIndex = Math.min(next.length, this.maxlength - 1);
+            },
+            // The inner (visually hidden) input carries `required`; mirror its validity.
+            getNativeControl: () => this.inputRef,
+        });
+        this.formControl.captureInitial(this.value || '');
+        this.formControl.sync();
         // Set active index to end of current value
         this._activeIndex = Math.min(this.value.length, this.maxlength - 1);
     }
-    // Form-associated lifecycle callbacks
+    componentDidRender() {
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    // Form-associated lifecycle callbacks (all behaviour lives in FormControl)
     formResetCallback() {
-        this.value = '';
-        this._activeIndex = 0;
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue('');
-        }
+        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) {
-        this.value = state;
-        this._activeIndex = Math.min(state.length, this.maxlength - 1);
-        if (this.internals && typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(state);
-        }
+        var _a;
+        (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.restoreState(state);
     }
-    /**
-     * Focus the input at a specific index (called by slots)
-     */
     focusAtIndex(index) {
         var _a;
         if (this.disabled)
@@ -209,11 +231,11 @@ export class SekiInputOtp {
         const inputMode = this.pattern === 'digits' ? 'numeric' : 'text';
         const inputPattern = this.pattern === 'digits' ? '[0-9]*' : '[a-zA-Z0-9]*';
         const ariaLabelText = this.ariaLabel || `Enter ${this.maxlength}-digit code`;
-        return (h("div", { key: '11fb301a1a209062d36d16acfe74139faa3a9024', class: {
+        return (h("div", { key: 'd8f9c9735de8030cdc76eff544ebcb18c66ca2a8', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, onClick: this.handleContainerClick }, h("input", { key: '9d3b097a42a8af17d117f95f07e2a7033506780e', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: '1941c3ed1ba41924b51d8de3ea156868039b4db2' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: 'b5238c7570558d06ba41121dd7bc9c9ee2ff350f', ref: (el) => (this.inputRef = el), type: "text", inputMode: inputMode, autocomplete: this.autocomplete, pattern: inputPattern, maxLength: this.maxlength, value: this.value, disabled: this.disabled, required: this.required, name: this.name, class: "input-otp-hidden", "aria-label": ariaLabelText, "aria-describedby": this.ariaDescribedby, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("slot", { key: '3f13d03d8d93d87de9d9553eab7d5c48b7500a73' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }
@@ -523,6 +545,12 @@ export class SekiInputOtp {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleFormStateChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleFormStateChange"
             }, {
                 "propName": "disabled",
                 "methodName": "handleStateChange"

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

@@ -47,12 +47,12 @@ export class SekiItem {
     }
     render() {
         const isInteractive = this.interactive && !this.disabled;
-        return (h(Host, { key: 'e13fc2b8b393076daa973a3af728b734c3d27bb8', class: {
+        return (h(Host, { key: 'e60fd6bcfe9e94d042e37622f86313e555a10b94', class: {
                 'seki-item--active': this.active,
                 'seki-item--disabled': this.disabled,
                 'seki-item--inset': this.variant === 'inset',
                 'seki-item--interactive': isInteractive,
-            } }, h("div", { key: 'dfb650a896d7a144f47e48bed5501118a6f8d3e4', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'c65e68231ba3c208ec094d9249d86bf365c954b2', class: "seki-item__leading", part: "leading" }, h("slot", { key: '9390894a0b59470c4f4d6474d0b4e657d5a77a41', name: "leading" })), h("span", { key: 'c7c6540404d2aadac0b4003d1e2036c5bcb3111a', class: "seki-item__content", part: "content" }, h("slot", { key: '952fad5950d76d3cb8db37395b8920835da015fe' })), h("span", { key: '6962194ace260f6b2b9e0b3e9065cb0bafdec36c', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '9532b6b2f4bb186cb4f90bbc243f88b701ddaa46', name: "trailing" })))));
+            } }, h("div", { key: 'e547d2460512151a65e4fb3da298d141e053c80d', class: "seki-item", part: "item", role: isInteractive ? 'option' : undefined, tabindex: isInteractive ? 0 : -1, "aria-selected": this.active ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '0629d5b1d6d354898bf6dc47985614327a135646', class: "seki-item__leading", part: "leading" }, h("slot", { key: '97142ba739619a3c211da4e04b61e9700c9c059e', name: "leading" })), h("span", { key: '261b367fa19f359e86240dc54a544b0b849eb0a7', class: "seki-item__content", part: "content" }, h("slot", { key: 'af44ed6e5bef0ec718a6da42d346e35e6a292618' })), h("span", { key: 'fa9555c5bf60d1bc02d821449a345f6ab89d2374', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '352645ee437ef89f439600e552e2f7371bb0b7b2', name: "trailing" })))));
     }
     static get is() { return "seki-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SekiKbd {
         this.size = 'md';
     }
     render() {
-        return (h("kbd", { key: '7ce7546018405329b2eed9cebef3d6049fbf2d0c', class: `kbd kbd--${this.size}` }, h("slot", { key: '1bae2c5ef4a01ef76066537287a5dfcae01be9d6' })));
+        return (h("kbd", { key: 'c5e138b3e2c53dd57cee2a91356868c4a5b25415', class: `kbd kbd--${this.size}` }, h("slot", { key: '7467b6cc90306a0a2735fe1a92c6ca9300557cae' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,10 +23,10 @@ export class SekiLabel {
     }
     render() {
         const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: '466532427202f522784c29f0c05044e5730686bb', part: "label" }, labelProps, { class: {
+        return (h("label", Object.assign({ key: 'df80b45752def839bec876b26d32861f31404f55', part: "label" }, labelProps, { class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: 'bda42de9d580700d6865d6c19a15a8fd53aa12f4' }), this.required && h("span", { key: 'bb929cf661b25fd432d07891314b63420e5dabf4', class: "seki-label__required" }, " *")));
+            } }), h("slot", { key: '2ce1883422648de0ca9da12706a55c9749c5407f' }), this.required && h("span", { key: '2e89edc35b776623fb0f9203744c6a1adb8cd20f', class: "seki-label__required" }, " *")));
     }
     static get is() { return "seki-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,10 +19,10 @@ export class SekiMarkerContent {
         this.shimmer = false;
     }
     render() {
-        return (h("span", { key: '1b7b8a1a4633f873919c0328470dd31ba2f0b02e', class: {
+        return (h("span", { key: 'd88bfa837db737e298a5bc789ea75e1368d46ea1', class: {
                 'seki-marker-content': true,
                 'seki-marker-content--shimmer': !!this.shimmer,
-            }, part: "content" }, h("slot", { key: 'c4ed37e6b576b1a57223505c4f4738027334d2c2' })));
+            }, part: "content" }, h("slot", { key: '9e71f23c5bd96ab2cdac18bfc331b5a7d4dff96b' })));
     }
     static get is() { return "seki-marker-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/marker/seki-marker-icon.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class SekiMarkerIcon {
     render() {
-        return (h("span", { key: 'ade0d4d56dbe52e1e1a313960290e3c62941b6fe', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: '0ab54105cf95de0c32ffdf27150f96db48f29fb1' })));
+        return (h("span", { key: 'afb8eaa183cec8ce8b1188a5a9855217d4103871', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: 'adf541dba8e66c5158b511ac3b34144357e531b1' })));
     }
     static get is() { return "seki-marker-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,10 +33,10 @@ export class SekiMarker {
         }
     }
     render() {
-        return (h("div", { key: '046679ab9716fb7ed4363e977dcbb4db34aa1e0d', class: {
+        return (h("div", { key: '55b7a8634d9d01bc11543259b1ccc3ae63e92394', class: {
                 'seki-marker': true,
                 [`seki-marker--${this.variant}`]: !!this.variant,
-            }, part: "marker" }, h("slot", { key: '453d53d8e9e184b6608753c59579d8e43ef746ab' })));
+            }, part: "marker" }, h("slot", { key: '951dccaac4741f8354cf6a51a5f12cec0e9a807a' })));
     }
     static get is() { return "seki-marker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class SekiMenubarCheckbox {
         this._checked = this.checked;
     }
     render() {
-        return (h(Host, { key: '2c61506b61f785d642ff44b05a0b5f6b22232e7b' }, h("div", { key: '5c5cae2bdf49f089173424a25f4935e74cb8f9f7', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '5953781b01eaa150edff41854bc523651512881b' }, h("div", { key: '9436263dff8aa14dd3eda098804e8383844cd2fa', part: "item", role: "menuitemcheckbox", class: {
                 'menubar-checkbox': true,
                 'menubar-checkbox--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '5afcf73c4b25b43bb55b008875a0e38edf676e78', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: 'cbcec67c230a820ca1c19d64d5095f2667ab1eb2', 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("polyline", { key: '606bc2b24974ed54f715af847e587e1a4abdcccc', points: "20 6 9 17 4 12" })))), h("slot", { key: '7373cf73f6d0b8a6e8c6060d9689f1f1d1f0e6e3' }), this.shortcut && (h("span", { key: 'a8ff3007aac557c8b10798a1e1fa7f24344b51a8', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'ee65b51ebbbb46abaa602273a89b102ed351fd1c', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '69366a971cbd1d1f31f36a0778301893f50e8c44', 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("polyline", { key: '1c4e759552572eb12ca74872cac9e09e4f8e3f26', points: "20 6 9 17 4 12" })))), h("slot", { key: 'bf3e353fa5f0066c714d84a1917d2fc689736701' }), this.shortcut && (h("span", { key: '42dbe1da3886b116df4b4cee9063a852162a9742', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }