@lmvz-ds/components 0.25.0 → 0.27.0

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

@@ -0,0 +1,125 @@
+import { Host, h } from "@stencil/core";
+export class LmvzTab {
+    el;
+    mediaSlotEl;
+    value;
+    disabled = false;
+    selected = false;
+    vertical = false;
+    handleMediaSlotChange = () => {
+        this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
+    };
+    componentDidLoad() {
+        this.handleMediaSlotChange();
+        this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
+    }
+    render() {
+        return (h(Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, h("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, h("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), h("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+    }
+    static get is() { return "lmvz-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique value that identifies this tab within its `lmvz-tabs` parent.\nThe parent uses this to track the selected tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the tab is disabled.\nDisabled tabs are not activatable and are skipped by arrow-key navigation in `lmvz-tabs`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether this tab is currently selected.\nSet by the parent `lmvz-tabs` component \u2014 do not set manually."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` \u2014 do not set manually.\nWhen true the selection indicator moves to the inline-start edge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,58 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+*[hidden] {
+  display: none !important;
+}
+
+}
+:host {
+  display: inline-block;
+}
+.tablist {
+  display: inline-flex;
+  flex-direction: row;
+  background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  /* Horizontal overflow: tabs scroll when they overflow the container */
+  overflow: auto hidden;
+  /* Hide scrollbar visually while keeping scroll functionality */
+  scrollbar-width: none; /* Firefox */
+}
+.tablist::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+:host([has-icon-tabs]) .tablist {
+  gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  background: none;
+  border-radius: 0;
+}
+/* ── Vertical orientation ────────────────────────────────────────────────── */
+:host([orientation='vertical']) .tablist {
+  flex-direction: column;
+  overflow: visible auto;
+}
+/* The panels slot renders inline; individual panels control their own display */
+::slotted([role='tabpanel']) {
+  display: block;
+}
+::slotted([role='tabpanel'][hidden]) {
+  display: none;
+}

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

@@ -0,0 +1,399 @@
+import { Host, h } from "@stencil/core";
+import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let tabsIdCounter = 0;
+export class LmvzTabs extends ReactiveControllerHost {
+    el;
+    instanceId = ++tabsIdCounter;
+    tabSlotEl;
+    panelSlotEl;
+    focusController = new DirectionalFocusController(this, {
+        orientation: 'horizontal',
+        manageTabIndex: true,
+        enableHomeAndEnd: true,
+    });
+    value;
+    orientation = 'horizontal';
+    lmvzChange;
+    resolvedValue;
+    constructor() {
+        super();
+        this.addController(this.focusController);
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.syncOrientation();
+    }
+    componentDidLoad() {
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.handleTabSlotChange();
+        super.componentDidLoad();
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        super.disconnectedCallback();
+    }
+    handleValueChange(newValue) {
+        this.applySelection(newValue);
+    }
+    handleOrientationChange() {
+        this.syncOrientation();
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+    }
+    async activateTab(value) {
+        const tab = this.findTabByValue(value);
+        if (!tab || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    }
+    async getTabElements() {
+        return this.slottedTabs;
+    }
+    async setTabPanelIds(pairs) {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        pairs.forEach(([tabId, panelId], index) => {
+            const tab = tabs[index];
+            const panel = panels[index];
+            const btnId = `${tabId}-btn`;
+            if (tab) {
+                tab.id = tabId;
+                const btn = tab.shadowRoot?.querySelector('button');
+                if (btn) {
+                    btn.id = btnId;
+                    btn.setAttribute('aria-controls', panelId);
+                }
+            }
+            if (panel) {
+                panel.id = panelId;
+                panel.setAttribute('aria-labelledby', btnId);
+            }
+        });
+    }
+    get slottedTabs() {
+        return (this.tabSlotEl?.assignedElements({ flatten: false }) ?? []).filter((el) => el.tagName.toLowerCase() === 'lmvz-tab');
+    }
+    get slottedPanels() {
+        return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
+    }
+    handleTabSlotChange = () => {
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+        this.wireAriaIds();
+        this.applySelection(this.value);
+        this.updateIconTabsAttr();
+    };
+    handlePanelSlotChange = () => {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    };
+    handleTabReady = () => {
+        this.syncFocusTargets();
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+        this.updateIconTabsAttr();
+    };
+    updateIconTabsAttr() {
+        this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
+    }
+    syncFocusTargets() {
+        const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
+        this.focusController.updateElements(buttons);
+    }
+    syncOrientation() {
+        this.removeController(this.focusController);
+        this.focusController.hostDisconnected?.();
+        this.focusController = new DirectionalFocusController(this, {
+            orientation: this.orientation,
+            manageTabIndex: true,
+            enableHomeAndEnd: true,
+        });
+        this.addController(this.focusController);
+        if (this.el.isConnected) {
+            this.focusController.hostConnected?.();
+        }
+    }
+    syncTabOrientation() {
+        const isVertical = this.orientation === 'vertical';
+        this.slottedTabs.forEach((tab) => {
+            tab.toggleAttribute('vertical', isVertical);
+        });
+    }
+    wireAriaIds() {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        const prefix = `lmvz-tabs-${this.instanceId}`;
+        tabs.forEach((tab, index) => {
+            const tabId = tab.id || `${prefix}-tab-${index}`;
+            tab.id = tabId;
+            const panel = panels[index];
+            if (!panel)
+                return;
+            const panelId = panel.id || `${prefix}-panel-${index}`;
+            panel.id = panelId;
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn) {
+                btn.setAttribute('aria-controls', panelId);
+                btn.setAttribute('id', `${tabId}-btn`);
+            }
+            panel.setAttribute('role', panel.getAttribute('role') ?? 'tabpanel');
+            panel.setAttribute('aria-labelledby', `${tabId}-btn`);
+        });
+    }
+    applySelection(requested) {
+        const tabs = this.slottedTabs;
+        if (!tabs.length)
+            return;
+        let target = this.findTabByValue(requested);
+        if (!target || this.isTabDisabled(target)) {
+            target = this.findNearestEnabled(requested) ?? undefined;
+        }
+        if (!target)
+            return;
+        const effectiveValue = target.getAttribute('value') ?? '';
+        this.resolvedValue = effectiveValue;
+        if (this.value !== effectiveValue) {
+            this.value = effectiveValue;
+        }
+        tabs.forEach((tab) => {
+            const isSelected = tab.getAttribute('value') === effectiveValue;
+            tab.toggleAttribute('selected', isSelected);
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn)
+                btn.setAttribute('aria-selected', String(isSelected));
+        });
+        this.slottedPanels.forEach((panel, index) => {
+            const tab = tabs[index];
+            const isActive = tab?.getAttribute('value') === effectiveValue;
+            panel.toggleAttribute('hidden', !isActive);
+        });
+        const selectedBtn = target.shadowRoot?.querySelector('button');
+        if (selectedBtn) {
+            this.focusController.setCurrentElement(selectedBtn);
+        }
+    }
+    isTabDisabled(tab) {
+        return tab.hasAttribute('disabled') || !!tab.disabled;
+    }
+    findTabByValue(value) {
+        return this.slottedTabs.find((tab) => tab.getAttribute('value') === value);
+    }
+    findNearestEnabled(fromValue) {
+        const tabs = this.slottedTabs;
+        const fromIndex = tabs.findIndex((t) => t.getAttribute('value') === fromValue);
+        for (let offset = 1; offset < tabs.length; offset++) {
+            const next = tabs[(fromIndex + offset) % tabs.length];
+            if (next && !this.isTabDisabled(next))
+                return next;
+            const prev = tabs[(fromIndex - offset + tabs.length) % tabs.length];
+            if (prev && !this.isTabDisabled(prev))
+                return prev;
+        }
+        return undefined;
+    }
+    selectTab(value) {
+        if (value === this.resolvedValue)
+            return;
+        this.applySelection(value);
+        this.lmvzChange.emit({ value });
+    }
+    handleTabClick = (event) => {
+        const target = event.target;
+        const tab = target.closest('lmvz-tab');
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    };
+    handleKeydown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const active = this.el.ownerDocument.activeElement;
+        if (!active)
+            return;
+        let tab = null;
+        for (const t of this.slottedTabs) {
+            if (t === active) {
+                tab = t;
+                break;
+            }
+        }
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        event.preventDefault();
+        this.selectTab(value);
+    };
+    render() {
+        return (h(Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, h("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+    }
+    static get is() { return "lmvz-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The `value` of the currently selected tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'horizontal'"
+                        }],
+                    "text": "Layout and keyboard-navigation orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "resolvedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tab is activated.\nDetail: `{ value: string }`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "activateTab": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically activate a tab by value.\nDisabled tabs are ignored; emits `lmvzChange` on change.",
+                    "tags": []
+                }
+            },
+            "getTabElements": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement[]>"
+                },
+                "docs": {
+                    "text": "Returns all slotted `lmvz-tab` elements.\nExposed for external orchestration.",
+                    "tags": []
+                }
+            },
+            "setTabPanelIds": {
+                "complexType": {
+                    "signature": "(pairs: Array<[string, string]>) => Promise<void>",
+                    "parameters": [{
+                            "name": "pairs",
+                            "type": "[string, string][]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Wires `aria-controls` on each tab and `aria-labelledby` on each panel\nusing the provided ordered array of `[tabId, panelId]` pairs.\nCallers only need this for explicit control; `lmvz-tabs` wires positional\npairs automatically on `slotchange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "orientation",
+                "methodName": "handleOrientationChange"
+            }];
+    }
+}

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

@@ -40,7 +40,7 @@
 :host {
   display: inline-flex;
   align-items: center;
-  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
@@ -110,7 +110,7 @@ input {
   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 label {
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   cursor: pointer;

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

@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: '4bb633301740c3e69a836615e2266242980ac17a' }, h("span", { key: 'cc7188d8e2caff2968ad6c64c72565a71c89ec74', class: "track" }, h("input", { key: '867f7865711b9224b89f0f491df8a19589342729', 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: '426ee9f042afcc3d74b2137d2edbe95573b3c136', class: "thumb", "aria-hidden": "true" })), h("label", { key: '600cb22f2915d86edafa9ac57b77707055f6ae16', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, h("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, h("input", { key: 'afe04f4305744b3110092f9bfcbe8b4ee6f21c37', 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: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), h("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }

package/collection/index.js

@@ -1,3 +1,4 @@
 export * from '@lmvz-ds/aria-validation';
 export { chipSizes, chipTypes, iconSizes, iconWeights, inputTypes, textSizes } from './api/ds.constants';
 export * from './utils/public';
+export * from './components/lmvz-snackbar/public';

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

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '7c381821f1839fd61368f10878fcd77a89e3f6fc' }, h("lmvz-header", { key: '93d1b351824b01b0124e0c038c569f959f8a449a', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '96db71af9361829426af3cf431d481f5a2f6678a', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '0e0110287b032895b72b76f00226c95d795feeea', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '42edf9a666a8f3a6603d323190135607466ae75f', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '507b858cf867eb3568f470baeca0be664f717c46', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '7adaa0324fa4996965bc5d3a148dcc17238ce3ba', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'adb86d8a2fc921a5205f78c101beb51b8926a4be', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: 'bc65dc75f17dca9859234c29b327166da04ed37f', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '506530a75db127cb3aab58b3d9628af618c0e628', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '6618dfb601a99f6ef60631ff7ef51daaeb770aba', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '9bc773a8378b4dc711c6874675c0ffb6bda47335', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'c3becfeba08589f33a6530e77928121b88eb1aa0', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'a7ddd7b3f99d496591cccc79bebcaeec8a27db9f', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '16454fea1422c61ecdabf4190b494a993b7affd2', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '9b467e5187d1b7e39752554611c51ccb844f79da', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: '472abfaab29d554ecfa263b1f6b85d2c1990ceb1' }, h("lmvz-header", { key: '633622c96723608bfac8a9bc7ae9e1a972b105bf', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '15f74edb9e88bb246775d540c05cbdc81a3a618f', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6b82ecbd8e2ba53a68d5e05ca3f8ce8800b8dd5a', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '97922b8a6c0dfba9c5d5b410b1d55aa288e67e88', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'bacddd5a3fafecb3573a30dabff10a54f1996288', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'bbfba0969436a5c95338ff01163658df0b64d680', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '474927ef7491b1512f7849899859fddb6f368696', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '32ef36d6787e3368a4c4e36fdaf00f765192cc6d', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '58811b4b344a0168478ecda8fa7eee109ae51ea8', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '079715602610bd44465756e0b5a6daa0f67ea758', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '0c8b1d230579ab20e9dc9ef3b20c5f08a7a16d91', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '31408441bbfd25dd66b209526709280613e1fd48', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'e56d4b45f05d155561730d5298f7e6596eb8e64c', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '322f1858d41d8416ac8e4a073da348497d6f7557', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'd6b22f6b3e7357f9bf89b20463d146855feab625', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }