@lmvz-ds/components 0.36.0 → 0.37.0

package/collection/components/lmvz-select/lmvz-select.js

@@ -1,5 +1,6 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { ListboxController } from "../../utils/aria/listbox-controller";
 import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let selectIdCounter = 0;
 export class LmvzSelect extends ReactiveControllerHost {
@@ -7,54 +8,258 @@ export class LmvzSelect extends ReactiveControllerHost {
     get validationEl() {
         return this.el;
     }
+    internals;
     selectId = `lmvz-select-${selectIdCounter++}`;
-    nativeSelectEl;
+    triggerId = `${this.selectId}-trigger`;
+    popoverId = `${this.selectId}-listbox`;
+    triggerEl;
+    optionsSourceEl;
+    optionsMutationObserver;
+    initialValue;
+    initialValueCaptured = false;
+    flatOptions = [];
+    optionsById = new Map();
+    listboxController = new ListboxController({
+        onActiveChange: (id) => {
+            this.activeId = id;
+        },
+        onSelect: (id) => this.handleOptionSelect(id),
+        onClose: () => this.closePopover(),
+    });
+    get helperId() {
+        return this.helperText ? `${this.selectId}-helper` : undefined;
+    }
+    get showErrorMessage() {
+        return this.error && Boolean(this.errorMessage);
+    }
+    get errorId() {
+        return `${this.selectId}-error`;
+    }
+    get describedBy() {
+        const ids = [];
+        if (this.helperId)
+            ids.push(this.helperId);
+        if (this.showErrorMessage)
+            ids.push(this.errorId);
+        return ids.length > 0 ? ids.join(' ') : undefined;
+    }
     constructor() {
         super();
         this.addController(new AriaValidationController(this));
+        this.addController(this.listboxController);
     }
     lmvzChange;
     value;
     label;
     helperText;
+    nativeError = false;
+    errorFromProp = false;
+    get error() {
+        return this.errorFromProp || this.nativeError;
+    }
+    set error(value) {
+        this.errorFromProp = value;
+    }
+    errorMessage;
     disabled = false;
     required = false;
     name;
     size = 'default';
     highlighted = false;
     selectedLabel = '';
+    selectedId;
+    activeId;
+    isOpen = false;
+    optionGroups = [];
     get hasValue() {
         return Boolean(this.value);
     }
+    componentWillLoad() {
+        this.updateValidity();
+        super.componentWillLoad();
+    }
     componentDidLoad() {
-        this.syncSelectedLabel();
+        this.handleSlotChange();
+        this.observeSlottedOptionMutations();
+        this.updateValidity();
         super.componentDidLoad();
     }
+    disconnectedCallback() {
+        this.optionsMutationObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    observeSlottedOptionMutations() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.optionsMutationObserver?.disconnect();
+        this.optionsMutationObserver = new MutationObserver(this.handleSlotChange);
+        this.optionsMutationObserver.observe(this.el, {
+            attributes: true,
+            attributeFilter: ['disabled', 'selected', 'value', 'label'],
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    async focusTrigger() {
+        this.triggerEl?.focus();
+    }
+    async blurTrigger() {
+        this.triggerEl?.blur();
+    }
+    async checkValidity() {
+        return this.internals.checkValidity?.() ?? true;
+    }
+    async reportValidity() {
+        return this.internals.reportValidity?.() ?? true;
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage ?? '';
+    }
+    formAssociatedCallback(form) {
+        if (!form)
+            return;
+        this.internals.setFormValue?.(this.value ?? '');
+    }
+    formResetCallback() {
+        this.internals.setValidity?.({});
+        this.value = this.initialValue;
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
     handleValueChange(newValue) {
-        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
-            this.nativeSelectEl.value = newValue ?? '';
+        this.applySelectionFromValue();
+        if (this.selectedId && !this.isOpen) {
+            this.listboxController.setActiveId(this.selectedId);
+        }
+        this.internals.setFormValue?.(newValue ?? '');
+        this.updateValidity();
+    }
+    handleRequiredChange() {
+        this.updateValidity();
+    }
+    handleDisabledChange(disabled) {
+        if (!disabled)
+            return;
+        this.closePopover();
+        this.triggerEl?.blur();
+    }
+    handleSlotChange = () => {
+        const container = this.optionsSourceEl;
+        if (!container)
+            return;
+        const { flat, groups } = parseOptionElements(container, this.selectId);
+        this.flatOptions = flat;
+        this.optionsById = new Map(flat.map((option) => [option.id, option]));
+        this.optionGroups = groups;
+        if (!this.value) {
+            const preselected = flat.find((option) => option.selected && !option.disabled);
+            if (preselected) {
+                this.value = preselected.value;
+            }
+        }
+        this.applySelectionFromValue();
+        this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
+        if (!this.initialValueCaptured) {
+            this.initialValue = this.value;
+            this.initialValueCaptured = true;
+        }
+    };
+    applySelectionFromValue() {
+        const match = this.value ? this.flatOptions.find((option) => option.value === this.value) : undefined;
+        this.selectedId = match?.id;
+        this.selectedLabel = match?.label ?? '';
+        this.listboxController.setSelectedId(match?.id);
+    }
+    updateValidity() {
+        if (this.required && !this.value) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
+    handleOptionSelect(id) {
+        const option = this.optionsById.get(id);
+        if (!option)
+            return;
+        const isNewValue = option.value !== this.value;
+        this.value = option.value;
+        if (isNewValue) {
+            this.lmvzChange.emit(option.value);
         }
-        this.syncSelectedLabel();
+        this.closePopover();
     }
-    syncSelectedLabel() {
-        if (!this.nativeSelectEl)
+    handleOptionClick = (option) => {
+        if (option.disabled || this.disabled)
             return;
-        const idx = this.nativeSelectEl.selectedIndex;
-        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
-    }
-    handleChange = (event) => {
-        const select = event.target;
-        this.value = select.value;
-        this.syncSelectedLabel();
-        this.lmvzChange.emit(select.value);
+        this.listboxController.selectOption(option.id);
     };
+    handleLabelClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerEl?.focus();
+        this.openPopover();
+    };
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (this.isOpen) {
+            this.closePopover();
+        }
+        else {
+            this.openPopover();
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (!this.isOpen) {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.openPopover();
+            }
+            return;
+        }
+        this.listboxController.handleKeydown(event);
+    };
+    handleTriggerBlur = () => {
+        this.closePopover();
+    };
+    handlePopoverClose = () => {
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    };
+    openPopover() {
+        if (this.isOpen || this.disabled)
+            return;
+        this.isOpen = true;
+    }
+    closePopover() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.listboxController.clearTypeahead();
+    }
+    renderOptionGroups() {
+        return this.optionGroups.map((group, groupIndex) => group.label ? (h("div", { role: "group", "aria-label": group.label, key: `lmvz-select-group-${groupIndex}` }, group.options.map((option) => this.renderOption(option)))) : (group.options.map((option) => this.renderOption(option))));
+    }
+    renderOption(option) {
+        return (h("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": option.id === this.selectedId ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, option.label));
+    }
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: '764be3255f76406e66600e800da85d84de8a5b62', "data-highlighted": String(this.highlighted) }, h("div", { key: '81c6c1eb04d9062b142f30c201b3ec24feec8814', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '49199adcb31515ce4b4789f27cc2520805c29a3c', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'e7e02e878d8a130d61e426774d9d362a49e481a7', "aria-hidden": "true" }, " *")), h("div", { key: 'bc5ff1214d856a084918c8e68d1b1567a97b41bb', "aria-hidden": "true" }, h("span", { key: 'cc3513a16e4e621bc47f35c252e981bc25bc0d77' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'a34658592f038b9438808418cc106842d98e63d5', "aria-hidden": "true" }, " *")), h("span", { key: 'cd71dd492d758e7e53e6212cc9549ec4057abe3f' }, h("svg", { key: 'fa1ea83d316fa9280516316b695163634264151c', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '7750c64531e98cc5cdebafa1ecacf624945ab198', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '53a4e34ad1405447177675e67afcc2e9c18319cb', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '78ba2e2225d3d3b558c8a20f276f6fbbc0a670b8', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'bbc561f3f55dbc42b705f251fdc146b0496c72a1' }))), this.helperText && h("div", { key: '5bc860035c0ee46f62fefdb74d752b419bb19f7c', role: "status" }, this.helperText)));
+        return (h(Host, { key: '0bcc303a802db20a6be6558b8add53d0fa398493', "data-highlighted": String(this.highlighted) }, h("div", { key: 'e248f8277b4786b34dfd064cb9c7b70302cf018a', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '1c97c830d5782cadad98fb895d70c438031d3457', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '16157962846bffc111f5c672852f7b23e9ed2b73', "aria-hidden": "true" }, " *")), h("div", { key: 'bc5e3e6b335723cfd9872ff955a1e8d664d4eeb8', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": hasValue ? `${this.label}, ${this.selectedLabel}` : this.label, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: '620c6108f679c8e5563c0e21d7b89d71434c01a2' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'a2183941c7843bae3e9989f8e8b26be28fbbf6d7', "aria-hidden": "true" }, " *")), h("span", { key: 'b57e14bda44dc0de5a35623a5cb203b7f570c802', "aria-hidden": "true" }, h("svg", { key: '71ac319e398f07f7e65fe1f73f6d2a7c08b631a8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '80b4a978471251ee8d2cce2d74a48fad750db125', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '15528c9a3f1404c385f4eb865cf78ef5891dcb32', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'f1b833973497e6dfd2013522e067382c73baa7a1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '670bf62c50cbdd965342279b99e303614771ffa1', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: '849e35da09bff25896b08f275c265baa0ee12960', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'd01c2dca8767aa815d08d895f308c42150cc3263', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./lmvz-select.css"]
@@ -124,6 +329,47 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "reflect": false,
                 "attribute": "helper-text"
             },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the select is in an error state.\nWhen not set manually, this will automatically reflect native HTML5 validation state"
+                },
+                "getter": true,
+                "setter": true,
+                "reflect": true,
+                "attribute": "error"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed below the select field when error is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -182,11 +428,11 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Name attribute passed to the native select for form submission."
+                    "text": "Name attribute for form submission via ElementInternals."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "size": {
@@ -231,7 +477,7 @@ export class LmvzSelect extends ReactiveControllerHost {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` and `aria-selected` are intentionally not used here.\n`aria-pressed` is reserved for toggle-button roles; `aria-selected` is\nreserved for option/listbox roles. The `data-highlighted` attribute provides\nthe accessible contract without conflicting with native `<select>` semantics."
+                    "text": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` is intentionally not used here; it is reserved for toggle-button\nroles. `aria-selected` is reserved for this component's own `role=\"option\"` elements.\nThe `data-highlighted` attribute provides the accessible contract for this state."
                 },
                 "getter": false,
                 "setter": false,
@@ -243,7 +489,12 @@ export class LmvzSelect extends ReactiveControllerHost {
     }
     static get states() {
         return {
-            "selectedLabel": {}
+            "nativeError": {},
+            "selectedLabel": {},
+            "selectedId": {},
+            "activeId": {},
+            "isOpen": {},
+            "optionGroups": {}
         };
     }
     static get events() {
@@ -264,11 +515,151 @@ export class LmvzSelect extends ReactiveControllerHost {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusTrigger": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the combobox trigger.",
+                    "tags": []
+                }
+            },
+            "blurTrigger": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the combobox trigger.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the select satisfies its validation constraints.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports validation errors to the user.",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current validation message, if any.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleDisabledChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+function parseOptionElements(container, idPrefix) {
+    const flat = [];
+    const groups = [];
+    let looseGroup;
+    let optionIndex = 0;
+    const toOptionData = (optionEl, disabledOverride = false) => {
+        const option = optionEl;
+        const data = {
+            id: `${idPrefix}-option-${optionIndex++}`,
+            value: option.value,
+            label: (option.textContent ?? '').trim(),
+            disabled: disabledOverride || option.disabled,
+            selected: option.selected,
+        };
+        flat.push(data);
+        return data;
+    };
+    Array.from(container.children).forEach((child) => {
+        if (child.tagName === 'OPTGROUP') {
+            looseGroup = undefined;
+            const optgroup = child;
+            const options = Array.from(optgroup.querySelectorAll('option')).map((option) => toOptionData(option, optgroup.disabled));
+            groups.push({ label: optgroup.label || undefined, options });
+            return;
+        }
+        if (child.tagName === 'OPTION') {
+            if (!looseGroup) {
+                looseGroup = { label: undefined, options: [] };
+                groups.push(looseGroup);
+            }
+            looseGroup.options.push(toOptionData(child));
+        }
+    });
+    return { flat, groups };
 }

package/collection/components/lmvz-snackbar/lmvz-snackbar.js

@@ -58,7 +58,7 @@ export class LmvzSnackbar {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (h(Host, { key: '3526d31aa5842f2d4bf5b5b878a7ca03bb4bf731', class: this.animationClass }, h("lmvz-icon", { key: '52080f476e527c9af337eb1997db1b29a90fb5c0', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'a18eaf04ca959432fc76037efd24ecf1001bd798', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '3126781af40ea74854db8e7c2aa7e1fb1b632d38', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (h(Host, { key: 'f58c7657bf5511c72930dfc54ace4af1ff7f3554', class: this.animationClass }, h("lmvz-icon", { key: '8632b42b9b246bf58480fb17ca336ce5f0883845', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: '4ca56d2cdf29415c6d21cc50399dc28aebb8de99', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: 'd09043056b968421143aa180f464effcd7b781fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get is() { return "lmvz-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-spinner/lmvz-spinner.js

@@ -4,7 +4,7 @@ export class LmvzSpinner {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (h(Host, { key: '96a151ca5586df967f9973e73cfb7be458254dc4', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '27d404b929294aba50170e0ad4951c0c03d7a286', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'bcf47ee3a704f46ab4ec26de41dd859db17266e9', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (h(Host, { key: 'cf60fcf652f377a66596cc51138bb73f7465a4e7', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '121ab46a591242fbc0f1c3540e8f2a7b72c9582a', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'fe649394c9bd6e7a06113e9a50b595bb890a6fac', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
     static get is() { return "lmvz-spinner"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tab/lmvz-tab.css

@@ -29,6 +29,17 @@ hr {
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+  display: block;
+}
+
 }
 :host {
   display: inline-block;

package/collection/components/lmvz-tab/lmvz-tab.js

@@ -14,7 +14,7 @@ export class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (h(Host, { key: '992500dcc371efbeab4eb83fbcfb9745384fa423' }, h("button", { key: 'e346c88625b701636704e89b749971e6a016a3ff', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'ee0790e6f04c1c05fbbb7a624e0c791e1db24506', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '45b0c2c38dcec72ab02cd308e0301d1c912e96f7', class: "label" }, h("slot", { key: 'e31e6c8ade0c7b44684836c29fbb65464db7ae59' })), h("span", { key: '03016f465e673bf27261e8ceb5c3a6a1666551a7', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (h(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, h("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, h("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), h("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get is() { return "lmvz-tab"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tabs/lmvz-tabs.css

@@ -29,6 +29,17 @@ hr {
   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
 }
 
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+  display: block;
+}
+
 }
 :host {
   display: inline-block;

package/collection/components/lmvz-tabs/lmvz-tabs.js

@@ -235,7 +235,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '27d096ac6ed21fb72a5c6336c6f07ee2fe36bd92', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'c3b530f13cf6829e8519a678e577e8aa6bf1c3d6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '018641f52dfcab6dea884c95a5e550dbe60f74f6', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '6f7cce2b8e551683ba04c53ebae8233c3ef61969', part: "panels-container", class: "panels-container" }, h("slot", { key: '8e9f0c1e1866180a763dd41aa1974f5cf354fb44', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: '33205038c047420618800be3ef755e1d13a0127c', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'e803f772c5b187326fc80cfa2d3b9d74f6ee1df8', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '6871a7b6b26c6251ceb544c03b245450aa53373d', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '17721962da2ecf107a5b878dea996812c61be998', part: "panels-container", class: "panels-container" }, h("slot", { key: '485de66efc7812ecb2368a6b01b0d8ab63971497', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -53,6 +53,9 @@ export class LmvzToggle extends ReactiveControllerHost {
     async reportValidity() {
         return this.nativeInputElement?.reportValidity?.() ?? false;
     }
+    async getValidationMessage() {
+        return this.nativeInputElement?.validationMessage ?? '';
+    }
     async getInputElement() {
         if (!this.nativeInputElement) {
             await new Promise((resolve) => componentOnReady(this.el, resolve));
@@ -65,7 +68,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: 'bde08dcbd39c0c02602590bc0c536b5d671fa76e' }, h("span", { key: '2567f70f81014d8ab7b9073a0d59f33bfeeca6a5', class: "track" }, h("input", { key: '88c9fc7523489dd0decf5b5f3ddda604aadcf8a9', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '816fc007d7c87acc8ff0286eb861bd29059b44eb', class: "thumb", "aria-hidden": "true" })), h("label", { key: '9525cd785d2c6c3b6242c6f5eac215996b881873', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: 'a0e0272a8457ee6b07a102aa10e5a7c0292a55d9' }, h("span", { key: '5d14029bee4b66f5ed2ee1eb189a1d80a68abe3e', class: "track" }, h("input", { key: '926b1ca6065750717577ece30e8e78b9004ec0e8', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: 'bdee06bab6acba72d019134828f7415d7b347c49', class: "thumb", "aria-hidden": "true" })), h("label", { key: 'b8eaa9305352f7146bf95bb517766310517d60e6', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -321,6 +324,23 @@ export class LmvzToggle extends ReactiveControllerHost {
                     "tags": []
                 }
             },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current validation message, if any.",
+                    "tags": []
+                }
+            },
             "getInputElement": {
                 "complexType": {
                     "signature": "() => Promise<HTMLInputElement | undefined>",