@sekiui/elements 0.1.3 → 0.1.5

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: '576382295b9ed414e1039bdc342ffee29b2d5531', id: this.componentId, class: "description" }, h("slot", { key: 'a5b79dba0790e1b69738889d61a48b44dacc5149' })));
+        return (h("div", { key: '1d0ae69c4ef0d62e3a8c838baae3def3c5b40241', id: this.componentId, class: "description" }, h("slot", { key: 'b1dedec7a7691d0c6de1334cfe8edbcea50a5e70' })));
     }
     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: '44e891a1d8e637906933ece17fee66dec2ffb613', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '741fe900c84f9fa797ae58e7e8e6c58532fa0495' })));
+        return (h("div", { key: '2b32f6a3fcf0f40c656217eb66d91136e59b26dd', id: this.componentId, class: "error", "aria-live": "polite", style: style }, h("slot", { key: '679c15ed40b2b09267c85d354db5d129d295ba29' })));
     }
     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: 'bcf7e18784e4f315bc6b4574ef639c154dcc8a24', class: "field-group", style: style }, h("slot", { key: '501913c4d4aa7f6e19f86d593279e439beb4e811' })));
+        return (h("div", { key: 'edf85ce8fd761153d58e9ff90149242ceac4882b', class: "field-group", style: style }, h("slot", { key: '6198f3a3e815c2c5288f4ccec11604e9f227aced' })));
     }
     static get is() { return "seki-field-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LabelBinding } from "../../utils/label-association";
 export class SekiFieldLabel {
     constructor() {
         /**
@@ -7,9 +8,29 @@ export class SekiFieldLabel {
          */
         this.required = false;
     }
+    onForChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event) {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.handleClick(event);
+    }
+    connectedCallback() {
+        this.binding = new LabelBinding(this.el, () => this.htmlFor);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+        (_b = this.binding) === null || _b === void 0 ? void 0 : _b.observe();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        const labelProps = this.htmlFor ? { for: this.htmlFor } : {};
-        return (h("label", Object.assign({ key: 'ff0853ec0cd7216d1357f6a67d31d477ed244c24' }, labelProps), h("slot", { key: 'caf0af6159cd63804748b99a66d20c1f40a23111' }), this.required && h("span", { key: '0628546ed8740017449a543dcb1b2bfa279ff254', class: "required-indicator" }, " *")));
+        return (h("label", { key: 'e61bee3d97e492d88d45b6c46e2dc2ee1d0c21f7' }, h("slot", { key: '78ce2f61a8e49bbee2eee4aae0d973ba12090bdb', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: '4afad8c8a9912bac396bad34f850d83be20f6786', class: "required-indicator" }, " *")));
     }
     static get is() { return "seki-field-label"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +58,7 @@ export class SekiFieldLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "ID of the form control this label is for\nSets the `for` attribute on the label element"
+                    "text": "ID of the form control this label is for\nResolved in the label's own root node (not this component's shadow root), so it\nreaches light-DOM controls. Falls back to the control nested in the label."
                 },
                 "getter": false,
                 "setter": false,
@@ -67,4 +88,19 @@ export class SekiFieldLabel {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "htmlFor",
+                "methodName": "onForChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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: 'c14c84629f3c727c7ad791b12eee95dc858a0755' }, h("slot", { key: 'd60f085ed640d10ab60540203c4fedee245c3d7d' })));
+        return (h("legend", { key: '8d11800c3ff3408e103f13ccb617911b28855855' }, h("slot", { key: '97e7d4e70a738092f708716cf5c9c38ea6155f9f' })));
     }
     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: 'a8dbcc839ed3bd9f0ab171ab7e144259e0e21bb6', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '0ecb3a16e59e70f0c2ac7d8bcfaa43da1709c8ea', name: "legend" }), h("div", { key: '9cd636d991d0f984f0262cb9c9fcfc4c11319698', class: "fieldset-content" }, h("slot", { key: '658de18e7c5f1a19b422be729091c57f475888eb' }))));
+        return (h("fieldset", { key: '585d494005fbe79e54a5a7823a0904ca396d4910', disabled: this.disabled, class: "fieldset" }, h("slot", { key: '54f8949c4e082781d6cf9ff34c745cedb34269a2', name: "legend" }), h("div", { key: '310ef349628daaa64feecf4e366e522bc0d252a0', class: "fieldset-content" }, h("slot", { key: '65f973f69f1aabf76d956c143845887cca330d03' }))));
     }
     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: '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' }))));
+        return (h(Host, { key: '32dae264e134487c7a81bcbc4cf2c4e02fbd2c3c' }, h("span", { key: 'b46dda7c7a42086d4f0abd1dced54b4160c55a21', 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: '0d7667574dbb5aebe2bd824b5e68c79e477c9ad1' }))));
     }
     static get is() { return "seki-hover-card-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { OverlayLayer } from "../../utils/overlay";
 /**
  * Hover Card Container Component
  *
@@ -123,6 +124,19 @@ export class SekiHoverCard {
                 this.closeTimer = null;
             }
         };
+        /**
+         * Place on the overlay stack (utils/overlay.ts): Escape reaches this
+         * component only when nothing is open on top of it, so one key press closes
+         * one layer (#332).
+         */
+        this.layer = new OverlayLayer({
+            onEscape: (event) => {
+                if (this._isOpen) {
+                    event.preventDefault();
+                    this.closeAndFocusTrigger();
+                }
+            },
+        });
     }
     componentWillLoad() {
         // `disabled` wins over a requested initial open state.
@@ -257,12 +271,8 @@ export class SekiHoverCard {
     handleCancelClose() {
         this.cancelClose();
     }
-    // Listen for Escape key to close the hover card
-    handleKeyDown(event) {
-        if (this._isOpen && event.key === 'Escape') {
-            event.preventDefault();
-            this.closeAndFocusTrigger();
-        }
+    componentDidRender() {
+        this.layer.setActive(this._isOpen);
     }
     componentDidLoad() {
         this.updateContext();
@@ -276,9 +286,10 @@ export class SekiHoverCard {
         this.cancelClose();
         // Clean up scroll listener
         this.removeScrollListener();
+        this.layer.setActive(false);
     }
     render() {
-        return (h(Host, { key: '963edd7c2f5b74e79ae6046a7d99e3e541307382', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '119ed497c413b30042e2fda8a4eb3e4a7938b55b', class: "hover-card" }, h("slot", { key: '8b27c6f348da84239f3fe8b14d90e532d81dafa8' }))));
+        return (h(Host, { key: '2c9f5dd4788bc39af9881cc5a4d4f4e400347e10', "data-state": this._isOpen ? 'open' : 'closed' }, h("div", { key: '0f8f5ed75e8049fd30df5a312e474cbf40d44e69', class: "hover-card" }, h("slot", { key: 'c5d4bf92063b24e49679e49837d11cc96a969f2f' }))));
     }
     static get is() { return "seki-hover-card"; }
     static get encapsulation() { return "shadow"; }
@@ -565,12 +576,6 @@ export class SekiHoverCard {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -103,7 +103,7 @@ export class SekiInput {
         (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.sync();
     }
     render() {
-        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 }));
+        return (h("input", { key: 'cc8d5fddec8d4164b4fab439779087133ec81f83', 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 || this.ariaInvalid === 'true' ? ' input--invalid' : ''}`, "aria-label": this.ariaLabel, "aria-describedby": this.ariaDescribedby, "aria-description": this.ariaDescription, "aria-invalid": this.invalid || this.ariaInvalid === 'true' ? '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"; }
@@ -468,6 +468,44 @@ export class SekiInput {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-describedby"
+            },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
             }
         };
     }

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

@@ -7,7 +7,7 @@ export class SekiInputAddon {
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'c7074cb973c31da3445e116e04659984da389a67' }, h("div", { key: '91947802b154c0fdea29752dfcb6d8895d60f071', class: `addon addon--${this.size}` }, h("slot", { key: '16c554ff314d8bf805022f009dfccb48d8a700b3' }))));
+        return (h(Host, { key: '675310be4b793bcabb26a9c7a91700c0f552aa0f' }, h("div", { key: '452965ce5b41eb9548a71457c1048e75e4008a41', class: `addon addon--${this.size}` }, h("slot", { key: '57e2f786b21ee1ca1288634fd6f337f5cc1bdf3d' }))));
     }
     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: 'fc2a9fb89ce4d35c26d71370e70449ae007876ab' }, h("div", { key: '892fda648fcc6ef0ca07be866eef38aedfc4beb3', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: 'f6cb66ed84abcf5eb1113077f6c10cd727c89c73', onSlotchange: () => this.updateChildren() }))));
+        return (h(Host, { key: '5d80edff320e0cb88756c35b0ea0b46b8bfca5c7' }, h("div", { key: '6ebed869c80e654900d3aecb0f4e11deda8ac412', class: "input-group", role: "group", "aria-label": this.ariaLabel }, h("slot", { key: '71fcba34ca5c417a36c65b244f0869d04d825658', 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: '1f0aeb7a32007269564aeabd2485ce0c2243c0e5', class: "group", role: "group" }, h("slot", { key: 'eaf66792fbde8b08fda526f2cae06862a9e3ef97' })));
+        return (h("div", { key: 'b9707e74793434783585cf1b1d7536d27f22a214', class: "group", role: "group" }, h("slot", { key: 'a51afb10a72e3ba236f43e08198dcd0db6f16c6e' })));
     }
     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: '0ba5502fc7bd9b31f971d60a97e3a2918347a9a1', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: '110fa0a196358d6f0ffa09234ade3dda4733e4c7' }, h("span", { key: '5d20bcb216cea24e89ece238a2504507c4f3bedf', "aria-hidden": "true" }, "-"))));
+        return (h("div", { key: '7556636fca1784fbe295e9f73c65d5ebc194f418', role: "separator", "aria-orientation": "vertical", class: "separator" }, h("slot", { key: 'e8eee494b70af54552bff03c651d7fc2511f4a08' }, h("span", { key: '0b675997a21fd05d73799fef45930ad86af360a6', "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: '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" })));
+        return (h("div", { key: '89a73d5cff25eda795d9935c2ee3bfbc1b5f0f99', class: classes, "aria-hidden": "true", onClick: this.handleClick }, h("span", { key: '3145766a9ce5f6a680b1025eed1fa62a8fd02d09', class: "char" }, this.getDisplayChar()), this.isActive && h("span", { key: 'f73009e536e15654f5c7a758629e60bd19d46724', 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

@@ -231,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: 'd8f9c9735de8030cdc76eff544ebcb18c66ca2a8', class: {
+        return (h("div", { key: 'bf66388fec20c808149ad793a869072343d09a8b', class: {
                 'input-otp-container': true,
                 'input-otp-container--disabled': this.disabled,
                 'input-otp-container--invalid': this.invalid,
-            }, 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' })));
+            }, onClick: this.handleContainerClick }, h("input", { key: 'a98b49086d2966e5c1c5e0b5aa7bdc9e526de5ea', 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-description": this.ariaDescription, "aria-invalid": this.invalid || this.ariaInvalid === 'true' ? '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: 'd18e2d9db483d27b123e2940a36b8d83c222e833' })));
     }
     static get is() { return "seki-input-otp"; }
     static get encapsulation() { return "shadow"; }
@@ -468,6 +468,44 @@ export class SekiInputOtp {
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria-describedby"
+            },
+            "ariaDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that describes this control. Set by `seki-field` from its description\n(and error) slot, because an `aria-describedby` id cannot cross the shadow\nboundary to the inner element (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-description"
+            },
+            "ariaInvalid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control invalid for assistive technology. Set by `seki-field` (#358)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-invalid"
             }
         };
     }

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

@@ -47,12 +47,12 @@ export class SekiItem {
     }
     render() {
         const isInteractive = this.interactive && !this.disabled;
-        return (h(Host, { key: 'e60fd6bcfe9e94d042e37622f86313e555a10b94', class: {
+        return (h(Host, { key: 'a4aca5f571f888770a9d58c3002c3d376eeeafc6', class: {
                 'seki-item--active': this.active,
                 'seki-item--disabled': this.disabled,
                 'seki-item--inset': this.variant === 'inset',
                 'seki-item--interactive': isInteractive,
-            } }, 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" })))));
+            } }, h("div", { key: '146d79fcc58d7454bf01e7081ecb4451cf0e3485', 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: '2f061a05ccd0245af63f633ddea6e66f732386b9', class: "seki-item__leading", part: "leading" }, h("slot", { key: '588132b910dc3442f404e8c8d8d07f9c3f38434e', name: "leading" })), h("span", { key: '58c0f484fef794f0be0666ecf5f3d97b72e6db8a', class: "seki-item__content", part: "content" }, h("slot", { key: 'dc4c7c24ed7b067e1df2e766b4bac3441a5c79ae' })), h("span", { key: 'd1b99516bf430e0f00e47e2b6106d3ea23e42b72', class: "seki-item__trailing", part: "trailing" }, h("slot", { key: '85dea054f33a82604249f52fa0fa02ea7c7873c7', 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: 'c5e138b3e2c53dd57cee2a91356868c4a5b25415', class: `kbd kbd--${this.size}` }, h("slot", { key: '7467b6cc90306a0a2735fe1a92c6ca9300557cae' })));
+        return (h("kbd", { key: 'fe8411a9e283c7a5454986dcb007dc23cd62a5a8', class: `kbd kbd--${this.size}` }, h("slot", { key: '569f2551eded18484366535b79920b70aef8e703' })));
     }
     static get is() { return "seki-kbd"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { LabelBinding } from "../../utils/label-association";
 /**
  * seki-label: A styled label component for form elements
  *
@@ -21,12 +22,32 @@ export class SekiLabel {
          */
         this.disabled = false;
     }
+    onForChange() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+    }
+    /** Forward clicks to the labelled control (see utils/label-association.ts). */
+    onClick(event) {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.handleClick(event);
+    }
+    connectedCallback() {
+        this.binding = new LabelBinding(this.el, () => this.for);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync();
+        (_b = this.binding) === null || _b === void 0 ? void 0 : _b.observe();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.binding) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     render() {
-        const labelProps = this.for ? { for: this.for } : {};
-        return (h("label", Object.assign({ key: 'df80b45752def839bec876b26d32861f31404f55', part: "label" }, labelProps, { class: {
+        return (h("label", { key: '1aa6ed2ae6c1c16812dd07aa81b88c0df0790b02', part: "label", class: {
                 'seki-label': true,
                 'seki-label--disabled': !!this.disabled,
-            } }), h("slot", { key: '2ce1883422648de0ca9da12706a55c9749c5407f' }), this.required && h("span", { key: '2e89edc35b776623fb0f9203744c6a1adb8cd20f', class: "seki-label__required" }, " *")));
+            } }, h("slot", { key: 'a2da93efc7cca1b92d6001b071f5bfa3971f2a8d', onSlotchange: () => { var _a; return (_a = this.binding) === null || _a === void 0 ? void 0 : _a.sync(); } }), this.required && h("span", { key: '81a2056abc5499c86d889ece899797b2fdea437e', class: "seki-label__required" }, " *")));
     }
     static get is() { return "seki-label"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +75,7 @@ export class SekiLabel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The ID of the form element this label is associated with.\nMaps to the `htmlFor` attribute on the inner `<label>` element."
+                    "text": "The ID of the form element this label is associated with. Resolved in the\nlabel's own root node (document or shadow root), not in this component's\nshadow root, so it reaches light-DOM controls. Without it, the first control\nnested inside the label is used."
                 },
                 "getter": false,
                 "setter": false,
@@ -110,4 +131,19 @@ export class SekiLabel {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "onForChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -19,10 +19,10 @@ export class SekiMarkerContent {
         this.shimmer = false;
     }
     render() {
-        return (h("span", { key: 'd88bfa837db737e298a5bc789ea75e1368d46ea1', class: {
+        return (h("span", { key: 'a5e0c2916216e19cfa65d80f875bab089a1f1e06', class: {
                 'seki-marker-content': true,
                 'seki-marker-content--shimmer': !!this.shimmer,
-            }, part: "content" }, h("slot", { key: '9e71f23c5bd96ab2cdac18bfc331b5a7d4dff96b' })));
+            }, part: "content" }, h("slot", { key: '9ff1e39c675198a3f59cdd4e0d003d221d7cfa24' })));
     }
     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: 'afb8eaa183cec8ce8b1188a5a9855217d4103871', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: 'adf541dba8e66c5158b511ac3b34144357e531b1' })));
+        return (h("span", { key: '6a965dcd5e8c3e63d5c7dd3c1ee923ef1c8d988e', class: "seki-marker-icon", "aria-hidden": "true", part: "icon" }, h("slot", { key: '9067720b934b4fe6adc103f58a78ddd19ce61fa7' })));
     }
     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: '55b7a8634d9d01bc11543259b1ccc3ae63e92394', class: {
+        return (h("div", { key: '5b0c6343e1366845a3edf1985688437cff61800d', class: {
                 'seki-marker': true,
                 [`seki-marker--${this.variant}`]: !!this.variant,
-            }, part: "marker" }, h("slot", { key: '951dccaac4741f8354cf6a51a5f12cec0e9a807a' })));
+            }, part: "marker" }, h("slot", { key: 'b145c1a4ad4af88915a6a7399c3e686fa9cfd905' })));
     }
     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: '5953781b01eaa150edff41854bc523651512881b' }, h("div", { key: '9436263dff8aa14dd3eda098804e8383844cd2fa', part: "item", role: "menuitemcheckbox", class: {
+        return (h(Host, { key: '83b010f7a8a2d1c613b9eed6f0a64d7e03d38bb5' }, h("div", { key: '6cc6ab3b13365ccac67bafe1cbfc584073b60b22', 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: '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)))));
+            }, 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: 'af2d4ce9a9f42de58eef2a1bc70014de85efaa6b', part: "indicator", class: "menubar-checkbox__indicator" }, this._checked && (h("svg", { key: '9983a7601800c7a2faaf1f671b9b3b68f08c4327', 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: 'ef75d08b1be4e266c5876c33ba6f8a1f2741d467', points: "20 6 9 17 4 12" })))), h("slot", { key: 'f549b5baeb0d496966e6d08b4a6bc7bd0ae84832' }), this.shortcut && (h("span", { key: '1171ebda703013f01ee9b7773139dd3607c889a3', part: "shortcut", class: "menubar-checkbox-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarGroup {
     render() {
-        return (h(Host, { key: '38acaa7c61643b164fda694d374eeaa2f4e6810e' }, h("div", { key: '91cef31ecb1d748b756a01d88bd286a06000bb6d', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '5cd58a8aaae037d790a5890e808211841b30d9e5', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: '5422b6c864256077260e81ae9229152d4da6d5ae' }))));
+        return (h(Host, { key: '0c4a88b838326de3397484c7d43da04213f20c98' }, h("div", { key: '1f6b04141c2ee681cc6338f720b53dc42a384b90', part: "group", role: "group", class: "menubar-group" }, this.label && (h("div", { key: '67c59aaa1750b69956ab7af038650c6f389a7a6f', part: "label", class: "menubar-group-label" }, this.label)), h("slot", { key: '954b2ac101c9fd34144823468eb9c6284585b669' }))));
     }
     static get is() { return "seki-menubar-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,11 +39,11 @@ export class SekiMenubarItem {
         return menubar ? menubar._menubarContext : null;
     }
     render() {
-        return (h(Host, { key: 'bc62601e3312e5cffa88790eefe0ca22af978fb1' }, h("div", { key: '34837da09a7949108ef0334fc544a06d5ad6545e', part: "item", role: "menuitem", class: {
+        return (h(Host, { key: 'b542fb8a97cb3122a86699c0dd0dabe3802b9db9' }, h("div", { key: 'd7008fc0c95f85d6ba94a1679bc33c8230e648e4', part: "item", role: "menuitem", class: {
                 'menubar-item': true,
                 'menubar-item--disabled': this.disabled,
                 'menubar-item--inset': this.inset,
-            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'da60510d9dbe188d7c5318b5b54e69855aca8ef3' }), this.shortcut && (h("span", { key: '797c8ef1dcc3fe63d85f347e6d6af3644cfb613b', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: 'c0a574e8594cdef298982311a8ad3238c71b5391' }), this.shortcut && (h("span", { key: 'c32a67315b552abab274757fb436e8ebcad1f409', part: "shortcut", class: "menubar-item-shortcut" }, this.shortcut)))));
     }
     static get is() { return "seki-menubar-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class SekiMenubarMenu {
         }
     }
     render() {
-        return (h(Host, { key: '80b78376db374c1bdcc44c50bb25fb7703f36043' }, h("div", { key: 'a6c7728c1b8ebb658ee06b3fb9e0a94a100bc793', part: "menu", class: "menubar-menu" }, h("slot", { key: '07b73966726e704b585889e90b9948c855d46084' }))));
+        return (h(Host, { key: '8a0f5b4f08822ff4c3c25392cfccedb2369ebc1b' }, h("div", { key: '845cd038814fd35605764688d9a1bb1577d694d4', part: "menu", class: "menubar-menu" }, h("slot", { key: '1cb505480bf5e853a7e6b206d3b666a2b57238ac' }))));
     }
     static get is() { return "seki-menubar-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class SekiMenubarRadioGroup {
         this._radioGroupContext.setValue(event.detail);
     }
     render() {
-        return (h(Host, { key: '097fecb2abb21cb37508abc3649334fa7c950426' }, h("div", { key: '5c88810e69c01c29560debeeab3b38f46003d658', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: '3387d347908d8c3f6f193889421650a2df86d6dd' }))));
+        return (h(Host, { key: '497606d5a6f395987bae63c1a427d7303bdce563' }, h("div", { key: '8b0cd99faf33858d0ee7d41e65dbaf4b2884bca5', part: "group", role: "group", class: "menubar-radio-group" }, h("slot", { key: 'bad3f1f67de133dedbb283f4725d4626a1535b23' }))));
     }
     static get is() { return "seki-menubar-radio-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,10 +51,10 @@ export class SekiMenubarRadio {
         (_a = this.radioGroupEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('sekiValueChange', this.onRadioGroupValueChange);
     }
     render() {
-        return (h(Host, { key: 'f8bf4c6d5d0125c2d1911df1cce1ae9b0ae13631' }, h("div", { key: '1257972e3f286c2e96d1b3c5a271365dc625e407', part: "item", role: "menuitemradio", class: {
+        return (h(Host, { key: 'd90fd04e602749b7d76d2e45cfd561a514e651a3' }, h("div", { key: 'def43c84e1d370cd53cfde838526fc3cba89f375', part: "item", role: "menuitemradio", class: {
                 'menubar-radio': true,
                 'menubar-radio--disabled': this.disabled,
-            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'da4d08d1bad7ec82f7221cf87d8f2bc87562086a', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: 'b49b2e3095900d0eef1165425e11f3bf6e8b4d37', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: 'ea138fc97b5935a66abd5ea87d329fca80abeb02', cx: "12", cy: "12", r: "4" })))), h("slot", { key: 'ff8dbef5ba7278eff0abb8c8a5bbef674103860d' }))));
+            }, tabindex: this.disabled ? -1 : 0, "aria-checked": this._isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a265331ec44d07bd3a16f8de22c9c747bb7fe937', part: "indicator", class: "menubar-radio__indicator" }, this._isChecked && (h("svg", { key: '368674d212d1dfa673942805e0c1901f2bd00435', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, h("circle", { key: '80db75e785e41b8cbab6e0b35454dbb37e9c89dc', cx: "12", cy: "12", r: "4" })))), h("slot", { key: '57090266236fe16a4d7ea2ff24cbcf97f59a8d6a' }))));
     }
     static get is() { return "seki-menubar-radio"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarSeparator {
     render() {
-        return (h(Host, { key: 'b45f0e4da2f60089eb0c0039dfbfdbf49d3490db' }, h("div", { key: '1255b0e1af0745f9068b23afe33c9eaf4ab6e1db', part: "separator", role: "separator", class: "menubar-separator" })));
+        return (h(Host, { key: '51a1b758b324f5124535dcac29aaf7de41f12af6' }, h("div", { key: '527e03b8e8e1ab12ad3fee39a0624700e8e03130', part: "separator", role: "separator", class: "menubar-separator" })));
     }
     static get is() { return "seki-menubar-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiMenubarShortcut {
     render() {
-        return (h(Host, { key: '86b97e0bdfcacbd7632b249805fdcbd3079d5d24' }, h("span", { key: 'bc26a4928805a37d41f057b7b0134ee0a3d77fb4', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: '05323c54d5b39c62bd4e390f7ea1a0f5cdfeafec' }))));
+        return (h(Host, { key: 'dbef0849eaa2660f44028cb44fa6666dcc1835f1' }, h("span", { key: '82fd1ffe6c9d1dfc4458d47358472eaec9e790ae', part: "shortcut", class: "menubar-shortcut" }, h("slot", { key: '7c096f1cc52142eabb5650a951d890fbcd5e0f5b' }))));
     }
     static get is() { return "seki-menubar-shortcut"; }
     static get encapsulation() { return "shadow"; }