@lmvz-ds/components 0.18.2 → 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.css

@@ -1,3 +1,86 @@
 :host {
-  display: block;
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+
+  padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  border: 1px solid var(--lmvz-chip-border-color);
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+    Router);
+  background-color: var(--lmvz-chip-background-color);
+  color: var(--lmvz-chip-foreground-color);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+
+  /* enable truncated content */
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+
+  > .content-overflow-wrapper {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+:host([size='small']) {
+  padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
+    Router);
+  gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+}
+
+::slotted(*) {
+  /* non-inline contents are forbidden for chips */
+  /* TODO: validate using ARIA validation tooling, instead of overriding styles */
+  display: inline;
+  white-space: inherit;
+}
+
+::slotted(lmvz-icon) {
+  --lmvz-component-color: var(--lmvz-chip-foreground-color);
+  --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+}
+
+:host([size='small']) ::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+}
+
+:host([type='active']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+
+:host([type='warning']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+}
+
+:host([type='success']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+}
+
+:host([type='error']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+
+:host([type='neutral']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
 }

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

@@ -1,8 +1,54 @@
+import { debounce } from "@lmvz-ds/lib-ts/stream/debounce.js";
 import { Host, h } from "@stencil/core";
-export class LmvzChip {
-    text;
+import { chipSizes, chipTypes } from "../../api/ds.constants.js";
+import { AriaValidationController, isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+export class LmvzChip extends ReactiveControllerHost {
+    ariaValidationController = new AriaValidationController(this);
+    beforeSlot;
+    defaultSlot;
+    afterSlot;
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    type = 'active';
+    size = 'default';
+    constructor() {
+        super();
+        this.addController(this.ariaValidationController);
+    }
+    normalizeType(value) {
+        const normalizedType = chipTypes.includes(value) ? value : 'active';
+        if (normalizedType !== this.type) {
+            this.type = normalizedType;
+        }
+    }
+    normalizeSize(value) {
+        const normalizedSize = chipSizes.includes(value) ? value : 'default';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeType(this.type);
+        this.normalizeSize(this.size);
+        super.componentWillLoad();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.checkContent();
+    }
+    checkContent = debounce(() => {
+        if (!isAriaValidationEnabled)
+            return;
+        const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
+        if (!elements.length) {
+            console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
+        }
+    }, 500);
     render() {
-        return h(Host, { key: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
+        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"; }
@@ -18,25 +64,76 @@ export class LmvzChip {
     }
     static get properties() {
         return {
-            "text": {
+            "type": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Chip.Type",
+                    "resolved": "\"active\" | \"error\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "Chip": {
+                            "location": "import",
+                            "path": "../../api/ds.constants.js",
+                            "id": "src/api/ds.constants.ts::Chip",
+                            "referenceLocation": "Chip"
+                        }
+                    }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "'active'"
+                        }],
+                    "text": "Semantic variant of the chip.\nInvalid values are normalized to `active` at runtime."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "text"
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'active'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Chip.Size",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {
+                        "Chip": {
+                            "location": "import",
+                            "path": "../../api/ds.constants.js",
+                            "id": "src/api/ds.constants.ts::Chip",
+                            "referenceLocation": "Chip"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Size variant of the chip.\nInvalid values are normalized to `default` at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'default'"
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "normalizeType"
+            }, {
+                "propName": "size",
+                "methodName": "normalizeSize"
+            }];
+    }
 }

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

@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '96626b8d29cdefc8ed97a7bb68a689ff6155d2c7', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '41ac004bdc6c2c6a1f8e3d293f6b0c3727c27aff', class: "brand" }, h("slot", { key: '8e33150a54c8b8070b22db51c8584e06dd06dd5c', name: "brand" }, h("img", { key: '889955c7335d64f2c8d0b2e032db3dd64a27cbd2', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '37b6ef465d320c325e0c830bcc91ea3a575d2690', "aria-label": "Hauptnavigation" }, h("div", { key: '7a0ec1a78d6eee3b3e37f55f872806b0791c2156', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'e0403633c6acd137c94b1552cc7f08e3549550d3', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '4e377f38a0b94a766f9001174729e5763fa0a194', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '368e461f239498c706a3c9bb27a7b05de2b79cac', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '8ffaf8d6f1254644b48dc0a40b9f552339ecc690', class: "actions" }, h("slot", { key: '5b679885e4fa111d66e993458ab7f5092d8179d4', 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"; }
@@ -132,7 +132,7 @@ export class LmvzHeader extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Id of the currently active primary navigation item.\nAlso determines which `connect-nav-*` secondary slot is shown."
                 },
                 "getter": false,
                 "setter": false,