@lmvz-ds/components 0.19.0 → 0.20.0

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

@@ -0,0 +1,424 @@
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { h, Host } from "@stencil/core";
+import checkmark from "../../assets/icons/checkmark.svg";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmark);
+let checkboxIdCounter = 0;
+export class LmvzCheckbox extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInput;
+    checkboxId = `lmvz-checkbox-${checkboxIdCounter++}`;
+    initialChecked = false;
+    get helperId() {
+        return this.helperText ? `${this.checkboxId}-helper` : undefined;
+    }
+    get errorId() {
+        return this.errorMessage ? `${this.checkboxId}-error` : undefined;
+    }
+    get ariaDescribedBy() {
+        const ids = [this.errorId, this.helperId].filter(Boolean);
+        return ids.length > 0 ? ids.join(' ') : undefined;
+    }
+    label;
+    checked = false;
+    value = 'on';
+    name;
+    disabled = false;
+    required = false;
+    error = false;
+    errorMessage;
+    helperText;
+    form;
+    autofocus = false;
+    checkedState = false;
+    handleCheckedChange(val) {
+        this.checkedState = val;
+        this.internals.setFormValue?.(val ? (this.value ?? 'on') : null);
+    }
+    lmvzChange;
+    async focusInput() {
+        this.nativeInput?.focus();
+    }
+    async checkValidity() {
+        return this.internals?.checkValidity() ?? true;
+    }
+    async reportValidity() {
+        return this.internals?.reportValidity() ?? true;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this, {
+            reValidateOnPropChanges: true,
+        }));
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.checkedState = this.checked;
+        this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
+        super.componentWillLoad();
+    }
+    componentWillRender() {
+        if (this.error && !this.errorMessage) {
+            console.warn('lmvz-checkbox: error=true set without errorMessage — no visual-only error state is rendered. Provide errorMessage to communicate the error to users.');
+        }
+        super.componentWillRender();
+    }
+    formAssociatedCallback() {
+        this.internals.setFormValue?.(this.checked ? (this.value ?? 'on') : null);
+    }
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === (this.value ?? 'on');
+    }
+    handleChange = (event) => {
+        const input = event.target;
+        this.checked = input.checked;
+        this.lmvzChange.emit(this.checked);
+    };
+    render() {
+        return (h(Host, { key: '6014c885305bc9824f7a6d4f0ba8c642125f3a5b' }, h("div", { key: 'cbc6de2b684acfb00b77a366e707d73de74a0b8a', class: "pill" }, h("input", { key: '5b442512b6cab2e60a1d62fd40e4c868b1bf87ac', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '09c534b7c5642c620129ea05a4468bd584c56ce7', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: 'eaa49e1a60054f8efc62ade0446a4704f0bb46e9', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '8fb836d71cbb3d4eadaf67284f5bb52906549275', class: "content" }, h("label", { key: '8df862f11e9885158264908fdac6599f21ecba07', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '1e45e6177774e937311cddacd1a3d3379c9c6af5', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '83fc1f7cd6828973e52ef27604f12f94f41d7f4b', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+    }
+    static get is() { return "lmvz-checkbox"; }
+    static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the checkbox. Required for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the checkbox is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'on'"
+                        }],
+                    "text": "Form submission value when checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission via ElementInternals."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the checkbox is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the checkbox is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the checkbox is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed when error is true. Required when error=true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / description text displayed below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form id to associate with (for out-of-form usage)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the checkbox should autofocus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checkedState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the checkbox checked state changes.\nEvent detail contains the new checked boolean value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native checkbox input.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the checkbox 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": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: 'd34b677a3f6ac2cdb53453c774badb837a3b9e25', type: this.type, size: this.size }, h("slot", { key: 'c6f8beea28cd847f8d8b7c7a075c774f58e39262', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'be784ef977bc1d0eae2fd2d9377642636bd325bc', class: "content-overflow-wrapper" }, h("slot", { key: '3730f2902bcae7917979dedd91264670fbff00de', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'f827a03e407385c7bdfd483073453d97f6f73afb', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: 'c77e8ae55531eefb31dd37b41b4851746a78f077', type: this.type, size: this.size }, h("slot", { key: '3f4d0a8feb887080172d11facc01afbe730b2726', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '6ec135ebcb32f15fea342379ac2b1dfebbe76fa6', class: "content-overflow-wrapper" }, h("slot", { key: '053afb88e2d6702428aab195bfcec6aff6d9c55f', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'ed51db073a512a32d12da59dee285708b83ae87b', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '74061d97a6d4cdec1f445a91b9e819bb12565681', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'af7f08ff48a20b7d36df5ee233da7027cd30a047', class: "brand" }, h("slot", { key: '46be4fcf2798ac374ac967bc2742260c4d7e082b', name: "brand" }, h("img", { key: '3ee79f9732758a6ca5dd6e8264c67707917b358b', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '8f37883454544a384bb35a151c4e24bb12c35f40', "aria-label": "Hauptnavigation" }, h("div", { key: 'a3166ad7e924dd72148d05c01160c889c8f07529', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'aa600791e4d8f3463fefbc3b366831e3b3a3eaac', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '6471256967f4d14c454205a330b2a97ecfcad7a8', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '1b9b461b958e76184938a1c65d032b296894e2dd', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '019d87472272df09ce99eeed405771229f326f1a', class: "actions" }, h("slot", { key: '18035fb0a51a26c96dc687547d17d57118a88e87', name: "actions" }))));
+        return (h(Host, { key: '87ecb9948039ea2f4b998bf35865e5839708a65c', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4f1ae09b1a3e0a9c3eb12659b3952eef34cbd67b', class: "brand" }, h("slot", { key: '99c03f87f0b3462d9b44835ba34ee05c75373b22', name: "brand" }, h("img", { key: '1616ce8464c2e798a53bc7c879385e3882e4d32f', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'ff7c56dbc9e80ba9a0757683069e1cba168abcb6', "aria-label": "Hauptnavigation" }, h("div", { key: 'a3bb67d788b936422992b066431c73098ff2aa11', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'e85b93f943c6d97bd5a7fa6f75e4855785d09ec5', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'e9efcfc5d3a8cb991c255b32b205924dafb5aaf6', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '7314e6a72705d48b347fa30945b1d5513b87bfd3', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'aee503cddbf8964833934e594caf5faa6e073a02', class: "actions" }, h("slot", { key: '5c1b15c0507ef24f67e37cd1652b4cc5ce4cc104', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,5 @@
-import { createValidSVGString, isValidSVG } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { parseSvgString } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Build, h, Host } from "@stencil/core";
-import { Micro } from "effect";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { resolveIconSvg } from "../../utils/icons/icons";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
@@ -42,8 +41,9 @@ export class LmvzIcon extends ReactiveControllerHost {
         if (!Build.isBrowser || !icon || !visible) {
             return;
         }
-        if (isValidSVG(icon)) {
-            this.iconData = await Micro.runPromise(createValidSVGString(icon));
+        const maybeIcon = parseSvgString(icon);
+        if (maybeIcon) {
+            this.iconData = maybeIcon;
             return;
         }
         this.iconData = await resolveIconSvg({
@@ -57,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: 'c1e952e00df287c66c49eb043408514c07c3dc39', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: 'e76fe28500b3545b8917ecdad590da5bc04ed38f', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {

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

@@ -150,9 +150,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '22be29e5fcd4976fc6c4d125781be00acef0b359', class: classNames('input-container', {
+        return (h("div", { key: '3cbfee5fccbb5efe1bfb9c6622653e11d4896615', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: 'ffeb620419316976e800b16b4a9fd9538f1efd26', class: "input-wrapper" }, h("slot", { key: '2a1a67f7fde0232b2bb5ce3cc228b869e5ac3516', name: "before-input" }), h("div", { key: '3bbe623cae67d376c60a28306164293a712b1bb5', class: "label-input-group" }, h("label", { key: 'c260b3eb249d5c785fe3b6e223c7428a8c147f50', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'f43dd77efe7e319428dd72ec8933b7587635e767', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'eeb821a74a5ac7aab3fab65a48a37d21a22744e6', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'dd36a212c05c43ab2a8249750c14a7475b6d65d3', name: "after-input" })), h("div", { key: 'c2aedd67036faf4d3dc459c3c1fab8d07ee5a991', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '01d2a6d6df9b3804a595711c7b57b6177d311c39', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: '2712b0d5eda0ca1d4da70f362047df07acf922a5', class: "input-wrapper" }, h("slot", { key: '992bc86de6b3bdd3cdbac1c000d38a338e6e4474', name: "before-input" }), h("div", { key: '35ace7d889667f5d09eea76dcba161f8711c9b1c', class: "label-input-group" }, h("label", { key: '28520dddf331d35ba75283673aa81e0046628907', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b91766b86b1bc68ce3dbb4b734ee4aa40fe0759b', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'ed7cd4b64091256df1c3b939c1e22d6082fe58b9', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: '1e42c305b8e554fadd7c50fbbb54ea234c734b0a', name: "after-input" })), h("div", { key: '190a1a92971a717f3ef594615fbe4dd0c9a72493', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '4d07b45a51d3733caf09a1bbc56ae6f51411ecbc', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -62,6 +62,6 @@
   z-index: 1;
 }
 :host([aria-expanded='true']) {
-  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f1f9fe);
   --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }

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

@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (h(Host, { key: '0878343aec1c98c16c073c6cdd3382ee5c980799' }, h("slot", { key: 'f7a87d4c9d786bb4686d406d4313e9b5d79701d6', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: 'a87116fba2d35c612e590c6b4e12c03b60d1ef0e' }, h("slot", { key: 'b302049db0b5818d4d7f90c043eb5c3caf48ca1b', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -50,7 +50,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: 'b9f6211fec35e7c03cc9c462cb1f8eb60fc6c96c' }, h("div", { key: '43d22daa1492f87f89f9479687b82ee893f10faa', class: "select-wrapper" }, h("label", { key: 'cf399d80e31a345cea60286db4aea2d7dd7973d1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '6bdd8e0d652f126eb1c64c2a647ac0816cc61b05', "aria-hidden": "true" }, " *")), h("div", { key: '5d8497c64e197a71003a0c8e11149993fcefd684', "aria-hidden": "true" }, h("span", { key: '95b73705ad81d000ce415a377002e4ae4d63aae6' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '2ff855f0fa89d3c66c59a176f855fdbf18ecb6c2', "aria-hidden": "true" }, " *")), h("span", { key: 'a66d4ec65c95b1463223c07aecb17d65a45c6b24' }, h("img", { key: '4cd21532ff13a3ecbd229cd79d0a3fa7b3eafc60', src: chevronDownSvg, alt: "" }))), h("select", { key: '2a9e46e29f8ef7d116989b58abfacee840dd2275', 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: '5c5fa4d5e3b120a0085f6fc408d20a56f6547441', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'e11909e901624af7d9d5275f2e9715007960eab9' }))), this.helperText && h("div", { key: 'fa0d06d3294f303081fd5ffb9aeaff6a8e297901', role: "status" }, this.helperText)));
+        return (h(Host, { key: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, h("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, h("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), h("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, h("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), h("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, h("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), h("select", { key: '841c86f1d340cd36475a7757e9cad5f33aeac710', 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: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && h("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

package/collection/integration/header-integration/header-integration.js

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: 'c34834b520d3afa96808822af5e54f8b6f0bff93' }, h("lmvz-header", { key: '044a5a293052e2c850623e38a49a32ce6df599bf', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '37b0bf2ed85fd36bbf98e4701d03e5f0786d8989', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '7c8d2de074662a27b72bea957c836fcc354ee1d9', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '64f27e03234382ccc0cfa52b8e71537fb6f67bc3', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '5d4f53495f8ce7d10940598a0c97e767b857ec58', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'f74f6e81fc894c0ff9882e32af9e6c01c388cb54', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'b4be5b1a26f47d6163811ad273bc1d556e2f5230', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '376bc7fa9720ff23cf596c990ab611de9721b512', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '4b74f0bc6c470d91193370b17bcc985bd530997c', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '3918a6354633b65e3fcad1fddca2e540a84356e3', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '9d2fdf3bf79a49c2c69447c37e1e0c324fbfaebe', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '8724a35093a6e5e100b55355f5490e5aed510bb8', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'cbf0ac1cd107415949b7f2e7ea9ee188211a3e80', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '68d6b62bdcae2250e9385663358b1c10a7a58afc', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '38eb509264c242cad252f6bd633b48747c4c71ca', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '83ffaf59132a1890e428eda0d86ce42e200b3dd0' }, h("lmvz-header", { key: '43400e9ceaff3b4df1d4f9cf1019e07464222cbe', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '00f199bf22fe04763b94cb0a8915d77d6f42c073', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '32b5ac9a962b1c0f6d4eca27f50442088edcccf8', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: 'ddbd5ff9c0cb2c6eca762e8b259f3b6c9f54ad4e', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '86ec5784b091c691759e516dc061bde41bf25d42', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '9af310fcad4eee7ae42025c0a0e562e2db762958', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '5d8e64e95b9d7187bff280bf7acb8b73e80de940', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '42f40b68ee3b27323a3802ebabe4d6b61e742b92', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '2fd1777696e789a89a5775f41b8dd9e8946de0f6', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: 'da08ce4e9d54f675c7da39ebd963b5830185e299', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '82e074c463ca9115fef3ffffc34646f9f91135d6', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '0abaf7cb24e699e0a71c407dc02b671e588ff777', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '01146d2a899330f39538df782c14fad3ab440174', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '8654a845ae45439ea4be43357e0cc3dba38ad34d', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '39754f979f8d7616afcad9ff87f94820e6ad166c', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/utils/icons/icons.js

@@ -1,16 +1,5 @@
-import { createValidSVGString, SVGString as SVGFactory } from "@lmvz-ds/lib-ts/validation/svg.js";
-import { Micro } from "effect";
+import { emptyDefaultSvg, toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { getRegisteredIconProvider } from "./icons-registry";
-export const emptyDefaultSvg = () => SVGFactory(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
-async function toValidSvgStringWithFallback(value) {
-    try {
-        return await Micro.runPromise(createValidSVGString(value));
-    }
-    catch {
-        console.error('Invalid SVG string:', value);
-        return emptyDefaultSvg();
-    }
-}
 export async function resolveIconSvg(options) {
     const { icon, iconset } = options;
     const iconSvg = await (async () => {
@@ -25,7 +14,7 @@ export async function resolveIconSvg(options) {
                 console.warn(`Icon "${icon}"${iconset ? ` from set "${iconset}"` : ''} not found in provider. Using default icon.`);
                 return;
             }
-            const validated = await toValidSvgStringWithFallback(resolved.svg);
+            const validated = toValidSvgStringWithFallback(resolved.svg);
             if (validated) {
                 return validated;
             }

package/collection/utils/icons/icons.unit.js

@@ -1,6 +1,6 @@
-import { SVGString } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { emptyDefaultSvg, SVGString } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "@stencil/vitest";
-import { emptyDefaultSvg, resolveIconSvg } from "./icons";
+import { resolveIconSvg } from "./icons";
 import { registerIconProvider } from "./icons-registry";
 const fetchMock = vi.fn();
 describe('icon utils:', () => {
@@ -20,18 +20,6 @@ describe('icon utils:', () => {
         fetchMock.mockReset();
         vi.stubGlobal('fetch', fetchMock);
     });
-    const validSvg = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"></svg>';
-    const invalidSvg = '<div>not an svg</div>';
-    test('SVGString branding enforces valid SVG', () => {
-        expect(() => SVGString(validSvg)).not.toThrow();
-        expect(() => SVGString(invalidSvg)).toThrow();
-        expect(() => SVGString('')).toThrow();
-        expect(() => SVGString(123)).toThrow();
-    });
-    test('emptyDefaultSvg is a valid branded SVGString', () => {
-        expect(() => SVGString(emptyDefaultSvg())).not.toThrow();
-        expect(emptyDefaultSvg()).toContain('<svg');
-    });
     test('resolveIconSvg fails loading "book" with no iconset/provider and falls back to default', async () => {
         const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
         const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
@@ -46,7 +34,7 @@ describe('icon utils:', () => {
         registerIconProvider('test-set-success', {
             resolve(name) {
                 if (name === 'test-icon') {
-                    return { name, svg: validSvg };
+                    return { name, svg: emptyDefaultSvg() };
                 }
                 return undefined;
             },

package/components/index.d.ts

@@ -5,6 +5,8 @@ export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmv
 export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
 export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
 export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
+export { LmvzCheckbox as LmvzCheckbox } from '../../types/components/lmvz-checkbox/lmvz-checkbox';
+export { defineCustomElement as defineCustomElementLmvzCheckbox } from './lmvz-checkbox';
 export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
 export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
 export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';

package/components/index.d.ts.bak

@@ -5,6 +5,8 @@ export { LmvzButton as LmvzButton } from '../../types/components/lmvz-button/lmv
 export { defineCustomElement as defineCustomElementLmvzButton } from './lmvz-button';
 export { LmvzCard as LmvzCard } from '../../types/components/lmvz-card/lmvz-card';
 export { defineCustomElement as defineCustomElementLmvzCard } from './lmvz-card';
+export { LmvzCheckbox as LmvzCheckbox } from '../../types/components/lmvz-checkbox/lmvz-checkbox';
+export { defineCustomElement as defineCustomElementLmvzCheckbox } from './lmvz-checkbox';
 export { LmvzChip as LmvzChip } from '../../types/components/lmvz-chip/lmvz-chip';
 export { defineCustomElement as defineCustomElementLmvzChip } from './lmvz-chip';
 export { LmvzHeader as LmvzHeader } from '../../types/components/lmvz-header/lmvz-header';