@lmvz-ds/components 0.18.2 → 0.19.0

package/cjs/lmvz-select.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 require('./aria-loader-CfFuAbJn.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: '7d1abb943f79e90451b43c9221801b80a2f61346' }, index.h("div", { key: 'ded3e45246ab38e89d444c59239cdc63a2c4d4fc', class: "select-wrapper" }, index.h("label", { key: 'cb68ff79976c2fb55d4cc827f9e90ba2597a8a43', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: 'ab77eaea1645b95d90f00ffb609bbd7a1704f7bc', "aria-hidden": "true" }, " *")), index.h("div", { key: '45cee00478a6cc31c10dddf69d8e6687fc8f440d', "aria-hidden": "true" }, index.h("span", { key: '0c5d425ea8843234aa6abd94a207377e2a675686' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'ebef5322371ee0253b50dd801b80cbb6402c067a', "aria-hidden": "true" }, " *")), index.h("span", { key: 'a12d31dc29563444f728133f181b48914d31705b' }, index.h("img", { key: 'dd3f175d1ca2b9ccc6c2bfa2075e5da62016a896', src: chevronDownSvg, alt: "" }))), index.h("select", { key: 'a196f3b824177d1b45971c38341bf6a2939dda82', 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 && index.h("option", { key: '536cc559def0e9ffa4b2150693ece9a597c238d1', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'ad9fed96b9f8c1d8257511bb1d5ab5ee756973ce' }))), this.helperText && index.h("div", { key: '4723b44d781c900be5aae7ece2a0be04b6c744b9', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: 'b9f6211fec35e7c03cc9c462cb1f8eb60fc6c96c' }, index.h("div", { key: '43d22daa1492f87f89f9479687b82ee893f10faa', class: "select-wrapper" }, index.h("label", { key: 'cf399d80e31a345cea60286db4aea2d7dd7973d1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '6bdd8e0d652f126eb1c64c2a647ac0816cc61b05', "aria-hidden": "true" }, " *")), index.h("div", { key: '5d8497c64e197a71003a0c8e11149993fcefd684', "aria-hidden": "true" }, index.h("span", { key: '95b73705ad81d000ce415a377002e4ae4d63aae6' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '2ff855f0fa89d3c66c59a176f855fdbf18ecb6c2', "aria-hidden": "true" }, " *")), index.h("span", { key: 'a66d4ec65c95b1463223c07aecb17d65a45c6b24' }, index.h("img", { key: '4cd21532ff13a3ecbd229cd79d0a3fa7b3eafc60', src: chevronDownSvg, alt: "" }))), index.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 && index.h("option", { key: '5c5fa4d5e3b120a0085f6fc408d20a56f6547441', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'e11909e901624af7d9d5275f2e9715007960eab9' }))), this.helperText && index.h("div", { key: 'fa0d06d3294f303081fd5ffb9aeaff6a8e297901', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

package/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[513,"lmvz-chip",{"text":[1]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/{reactive-controller-host-CtaVAiYJ.js → reactive-controller-host-Bi9eu2bV.js}

@@ -158,34 +158,34 @@ class ReactiveControllerHost {
         this.controllers.delete(controller);
     }
     get activeControllers() {
-        return Array.from(this.controllers).filter(controller => !controller.disabled);
+        return Array.from(this.controllers).filter((controller) => !controller.disabled);
     }
     connectedCallback() {
         if (!this.controllers.size) {
             console.warn('ReactiveControllerHost connected with no controllers registered.', this);
         }
-        this.activeControllers.forEach(controller => controller.hostConnected?.());
+        this.activeControllers.forEach((controller) => controller.hostConnected?.());
     }
     disconnectedCallback() {
-        this.activeControllers.forEach(controller => controller.hostDisconnected?.());
+        this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
     }
     componentWillLoad() {
-        this.activeControllers.forEach(controller => controller.hostWillLoad?.());
+        this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
     }
     componentDidLoad() {
-        this.activeControllers.forEach(controller => controller.hostDidLoad?.());
+        this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
     }
     componentWillRender() {
-        this.activeControllers.forEach(controller => controller.hostWillRender?.());
+        this.activeControllers.forEach((controller) => controller.hostWillRender?.());
     }
     componentDidRender() {
-        this.activeControllers.forEach(controller => controller.hostDidRender?.());
+        this.activeControllers.forEach((controller) => controller.hostDidRender?.());
     }
     componentWillUpdate() {
-        this.activeControllers.forEach(controller => controller.hostWillUpdate?.());
+        this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
     }
     componentDidUpdate() {
-        this.activeControllers.forEach(controller => controller.hostDidUpdate?.());
+        this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
     }
 }
 

package/collection/api/ds.constants.js

@@ -5,3 +5,5 @@ export const textSizes = [...sizes, 'xl'];
 export const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
 export const iconSizes = [...sizes, 'inherit'];
 export const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
+export const chipSizes = ['default', 'small'];

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

@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '2897a943aca62561b0e78b5b3f2b7b85d76f4e78', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '92555224e33b00fb2602fdb2d19075145c0d9097', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '637a03a73db84a63bf1e3165d57c474151f87783' }))));
+        return (h(Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -188,8 +188,11 @@ export class LmvzButton extends ReactiveControllerHost {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "'button'"
+                        }],
+                    "text": "Native button type forwarded to the internal `<button>` element.\nUse `submit` to trigger form submission."
                 },
                 "getter": false,
                 "setter": false,

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: '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() })));
     }
     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: '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" }))));
     }
     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,

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

@@ -3,6 +3,10 @@
    * @prop --lmvz-icon-color: The icon's color. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone.
    */
   --lmvz-icon-color: var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));
+  /**
+    * @prop --lmvz-icon-size: The icon's size. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone.
+    */
+  --lmvz-icon-size: var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
 
   display: inline-block;
 
@@ -11,6 +15,8 @@
 
   svg {
     display: block;
+    height: var(--lmvz-icon-size);
+    width: auto;
   }
 
   svg path {
@@ -21,36 +27,31 @@
 
 :host([size='xs']) {
   svg {
-    width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-    height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   }
 }
 
 :host([size='sm']) {
   svg {
-    width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
-    height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
   }
 }
 
 :host([size='md']) {
   svg {
-    width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-    height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   }
 }
 
 :host([size='lg']) {
   svg {
-    width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
-    height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
+    --lmvz-icon-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));
   }
 }
 
 :host([size='inherit']) {
   svg {
-    width: inherit;
-    height: inherit;
+    height: var(--lmvz-component-size, inherit);
   }
 }
 

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

@@ -1,5 +1,6 @@
-import { isValidSVG } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { createValidSVGString, isValidSVG } 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,7 +43,7 @@ export class LmvzIcon extends ReactiveControllerHost {
             return;
         }
         if (isValidSVG(icon)) {
-            this.iconData = icon;
+            this.iconData = await Micro.runPromise(createValidSVGString(icon));
             return;
         }
         this.iconData = await resolveIconSvg({
@@ -56,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: '6022ed0e30bcdd13455ccaae65784ac70abcb349', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: 'c1e952e00df287c66c49eb043408514c07c3dc39', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
@@ -111,7 +112,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the (default) iconset."
+                    "text": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the chosen {@link iconset}."
                 },
                 "getter": false,
                 "setter": false,
@@ -184,7 +185,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name."
+                    "text": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.\n\nWill try to resolve from the default iconset if not provided."
                 },
                 "getter": false,
                 "setter": false,
@@ -203,7 +204,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name for assistive technology.\nLeave unset for decorative icons so the icon stays hidden from the accessibility tree."
                 },
                 "getter": false,
                 "setter": false,

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: '3f14adbe321717cdfe305dc623940acb8be194f8', class: classNames('input-container', {
+        return (h("div", { key: '22be29e5fcd4976fc6c4d125781be00acef0b359', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '2cc559cc0ff4da1f8418c510188bcbb93b42da02', class: "input-wrapper" }, h("slot", { key: 'b41a5179b6d8651a9b60777718f92b32f80fda89', name: "before-input" }), h("div", { key: '4ac81c8d277d6592e1d84f4b3abfffef03843a9c', class: "label-input-group" }, h("label", { key: '80b272c3b069a246dcbf26812d2281e436c6cdfa', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'eb00d3be1a3eddd0661df74cfb2d4b95c75f5eea', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '6192c875976e7d21003de29badabd5a910ed0c17', 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: '9a908984ecebead7f08bbd88ed57fa8f30a69b67', name: "after-input" })), h("div", { key: 'abe658929d955042358ff24ea2267ae5b7b3484d', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '61c689c7d8ab3bbb7c62dc7a227c35441b4bbbd8', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, 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)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -701,7 +701,7 @@ export class LmvzInput extends ReactiveControllerHost {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted whenever the input value changes.\nEvent detail contains the current value."
                 },
                 "complexType": {
                     "original": "string",
@@ -729,7 +729,7 @@ export class LmvzInput extends ReactiveControllerHost {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the value programmatically and emits `lmvzInput` with the new value.",
                     "tags": []
                 }
             },

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: '1a37d2873a29c713cf95c60070c8dcf045c9f8fc' }, h("slot", { key: 'c6578bcfdb9f0cebad095d80f0ed63cf663bf91e', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: '0878343aec1c98c16c073c6cdd3382ee5c980799' }, h("slot", { key: 'f7a87d4c9d786bb4686d406d4313e9b5d79701d6', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }
@@ -48,8 +48,11 @@ export class LmvzMenuItem extends ReactiveControllerHost {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "'menuitem'"
+                        }],
+                    "text": "Accessibility role exposed by the host element."
                 },
                 "getter": true,
                 "setter": false,
@@ -68,8 +71,11 @@ export class LmvzMenuItem extends ReactiveControllerHost {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "Keeps the host focusable for keyboard navigation inside `lmvz-header`."
                 },
                 "getter": true,
                 "setter": false,

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: '7d1abb943f79e90451b43c9221801b80a2f61346' }, h("div", { key: 'ded3e45246ab38e89d444c59239cdc63a2c4d4fc', class: "select-wrapper" }, h("label", { key: 'cb68ff79976c2fb55d4cc827f9e90ba2597a8a43', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'ab77eaea1645b95d90f00ffb609bbd7a1704f7bc', "aria-hidden": "true" }, " *")), h("div", { key: '45cee00478a6cc31c10dddf69d8e6687fc8f440d', "aria-hidden": "true" }, h("span", { key: '0c5d425ea8843234aa6abd94a207377e2a675686' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'ebef5322371ee0253b50dd801b80cbb6402c067a', "aria-hidden": "true" }, " *")), h("span", { key: 'a12d31dc29563444f728133f181b48914d31705b' }, h("img", { key: 'dd3f175d1ca2b9ccc6c2bfa2075e5da62016a896', src: chevronDownSvg, alt: "" }))), h("select", { key: 'a196f3b824177d1b45971c38341bf6a2939dda82', 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: '536cc559def0e9ffa4b2150693ece9a597c238d1', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'ad9fed96b9f8c1d8257511bb1d5ab5ee756973ce' }))), this.helperText && h("div", { key: '4723b44d781c900be5aae7ece2a0be04b6c744b9', role: "status" }, this.helperText)));
+        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)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

package/collection/index.js

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

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

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '0a3908f0f3d84284afd64773a256b4fda818fd0c' }, h("lmvz-header", { key: '618e855ba5dda9056d55b82a4b162c730abd4a28', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'f65954cceeb98a5a6e09af7d8d0fd3997765d329', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6d826ec9d509eba7d698bb7cc0e18b542856d824', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '45ebdab853640539643f78c8e070a569bb16348f', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '1bbb9d73614f01054d592e63fa455153a86f9508', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '3b60360fb264ada58cb8667e860a9009d26dafad', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'dd01522ebe1e4d110f645476ba696864f546247e', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '11e04037ea5d1f14ff8b3c166cc212554c736d06', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '32d13093b3c42b125cdb6ca8d8e51da8f58856d3', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '842a7ac6e7d5205483b93b06bb50e8abf8bb22f8', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '60749db9c1706e50661630786bd3415f5cc315be', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'e81697a20343fbba1d2e7e378c83b19543222b53', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '789a3e28b7ba0d1f24937866fa1f82d4c55bd48f', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '2239f72674551d5fb495d4a79e3fcd53a126f6c1', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '64f2ca4135431efac7702b4dd1e59fdfd1ed733d', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        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" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/utils/aria/aria-validation-controller.js

@@ -1,5 +1,6 @@
 import { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, enableAriaValidation, isAriaValidationEnabled, queueValidation, useVerboseLogging, } from "@lmvz-ds/aria-validation";
 import { Build } from "@stencil/core";
+export { isAriaValidationEnabled } from '@lmvz-ds/aria-validation';
 if (Build.isDev && Build.isBrowser) {
     enableAriaValidation();
 }