@lmvz-ds/components 0.17.1 → 0.18.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var ariaLoader = require('./aria-loader-BRxRUIyi.js');
-var index = require('./index-CH-YLRgg.js');
+var ariaLoader = require('./aria-loader-CfFuAbJn.js');
+var index = require('./index-C2yDXRqP.js');
 
 class AriaValidationController {
     host;
@@ -37,7 +37,7 @@ class AriaValidationController {
             this.observeSlot();
             return;
         }
-        if (!this.host.validationEl?.checkVisibility() || this.config?.validationTiming !== 'load') {
+        if (!this.host.validationEl?.checkVisibility?.() || this.config?.validationTiming !== 'load') {
             this.observeVisibilityOnce();
             return;
         }
@@ -59,32 +59,34 @@ class AriaValidationController {
         this.host.validationSlot?.addEventListener('slotchange', this.enqueueValidation.bind(this));
     }
     observeVisibilityOnce() {
-        window.setTimeout(() => {
-            if (!this.host.validationEl)
-                return;
-            this.visibilityObserver = new IntersectionObserver((entries) => {
-                for (const entry of entries) {
-                    if (entry.target !== this.host.validationEl)
-                        continue;
-                    if (!entry.isIntersecting)
-                        continue;
-                    this.checkLazyValidation();
-                    this.discardVisibilityObserver();
-                }
-            }, {
-                root: this.host.validationEl?.parentElement,
-                rootMargin: '0px',
-                threshold: 0.01,
+        {
+            window.setTimeout(() => {
+                if (!this.host.validationEl)
+                    return;
+                this.visibilityObserver = new IntersectionObserver((entries) => {
+                    for (const entry of entries) {
+                        if (entry.target !== this.host.validationEl)
+                            continue;
+                        if (!entry.isIntersecting)
+                            continue;
+                        this.checkLazyValidation();
+                        this.discardVisibilityObserver();
+                    }
+                }, {
+                    root: this.host.validationEl?.parentElement,
+                    rootMargin: '0px',
+                    threshold: 0.01,
+                });
+                this.visibilityObserver.observe(this.host.validationEl);
             });
-            this.visibilityObserver.observe(this.host.validationEl);
-        });
+        }
     }
     checkLazyValidation() {
         if (!this.elementLoaded)
             return;
         if (!this.config?.reValidateOnPropChanges && (this.elementQueued || this.elementValidated))
             return;
-        if (!this.host.validationEl?.checkVisibility())
+        if (!this.host.validationEl?.checkVisibility?.())
             return;
         this.enqueueValidation();
     }
@@ -138,10 +140,12 @@ class AriaValidationController {
         });
     }
     discardVisibilityObserver() {
-        if (!this.visibilityObserver)
-            return;
-        this.visibilityObserver.disconnect();
-        this.visibilityObserver = undefined;
+        {
+            if (!this.visibilityObserver)
+                return;
+            this.visibilityObserver.disconnect();
+            this.visibilityObserver = undefined;
+        }
     }
 }
 

package/collection/api/ds.constants.js

@@ -0,0 +1,7 @@
+export const variants = ['primary', 'secondary', 'tertiary'];
+export const scaleValues = ['small', 'default', 'large'];
+export const sizes = ['xs', 'sm', 'md', 'lg'];
+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'];

package/{dist/collection → collection}/collection-manifest.json

@@ -9,12 +9,12 @@
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
     "components/lmvz-select/lmvz-select.js",
-    "integration/header-integration.js"
+    "integration/header-integration/header-integration.js"
   ],
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.3",
+    "version": "4.43.4",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/{dist/collection → collection}/components/lmvz-action/lmvz-action.js

@@ -5,7 +5,7 @@ export class LmvzAction {
         this.actionClick.emit(event);
     }
     render() {
-        return (h(Host, { key: '00da873d80f00dc57e5a0d60f2b58a6c505e41f1', onClick: this._onClick.bind(this) }, h("slot", { key: '7938b5e172ef2b027180aac801b0d9962cd68fa5' })));
+        return (h(Host, { key: '15c0f20e08cd5019abfd3bb71ec69d175dc5ba48', onClick: this._onClick.bind(this) }, h("slot", { key: 'f71a7853168d1b66b0a50b0f971d140385530ac3' })));
     }
     static get is() { return "lmvz-action"; }
     static get encapsulation() { return "shadow"; }

package/{dist/collection → collection}/components/lmvz-button/lmvz-button.js

@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '9fb3bb6cc21e7d87fddb0313fd552e7070850881', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '906117a1bb57fcc7e66a79be73959331066886be', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '7028560eef75c978bea0ba3931100d4a6816ba37' }))));
+        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' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +104,7 @@ export class LmvzButton extends ReactiveControllerHost {
                         "Button": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Button",
+                            "id": "src/api/index.d.ts::Button",
                             "referenceLocation": "Button"
                         }
                     }
@@ -134,7 +134,7 @@ export class LmvzButton extends ReactiveControllerHost {
                         "Button": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Button",
+                            "id": "src/api/index.d.ts::Button",
                             "referenceLocation": "Button"
                         }
                     }
@@ -206,8 +206,8 @@ export class LmvzButton extends ReactiveControllerHost {
                     "references": {
                         "FormRef": {
                             "location": "import",
-                            "path": "../../utils/component",
-                            "id": "src/utils/component.ts::FormRef",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::FormRef",
                             "referenceLocation": "FormRef"
                         }
                     }

package/{dist/collection → collection}/components/lmvz-card/lmvz-card.js

@@ -19,7 +19,7 @@ export class LmvzCard {
         const imgStyle = {
             backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (h(Host, { key: 'fceb19eb0d7ad6c6aecfa6fbd5bb6425c7c3e312', role: "article" }, h("div", { key: '4cb516b5dee1f2f84f21984fa350f61fd83c771c', class: "top" }, h("div", { key: '713b2a3245d885a9b99f6c7d54a35053699c1be8', class: "image-wrapper", style: imgStyle }, h("div", { key: 'e8ea65e7f5d11a2335cab950d6bf02208d0b18a1', class: "chip-slot" }, h("slot", { key: 'e9a039742107fdf56216186ddcdf367c4432790b', name: "chip" })))), h("div", { key: '9549e46a1872e0edf298b79435d298aa1ae96a37', class: "bottom" }, h("header", { key: '3bbfb72ecec519d16380ae7e00da4b1ccb6f1cf3' }, h("h2", { key: 'f5a33e498893e61b407c10ab36c9a93b7eecf9f1', class: "title" }, this.cardTitle)), h("p", { key: '19709bb100d014369c836a5a7174772f2d095d2e', class: "description" }, this.description), h("div", { key: '06b5acab3c80cc91865f3aa39da32d42f470348e', class: "actions" }, h("button", { key: '4e954452ac9771359c881aa6b43f11e89e38aecf', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: 'b6a682bf95eb26468c450bed494290565288a515', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '70a526d1fafd8b7051f6e7107b35d6f594e10d68', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '46c2832b4f90b9eb222749632bc7ad59cd645e10', role: "article" }, h("div", { key: 'cc387fe96cff2dd04c24f75cf838a2bf6f438279', class: "top" }, h("div", { key: 'f9a54a5f81378ef4265e1d74c36c78af002e8874', class: "image-wrapper", style: imgStyle }, h("div", { key: '76daed00408f7ae9ee46977637ddcd3d4f846380', class: "chip-slot" }, h("slot", { key: '6ad522ef7428166b876d0218ef8d801c4ef337f1', name: "chip" })))), h("div", { key: '9c9799668ac199cfecbe10061e271d70d70e2d07', class: "bottom" }, h("header", { key: '1bec743235bea5c7ab163225ffbd7bc6cf11f754' }, h("h2", { key: '06f8e14153328bc5ca920e71e09d9343047c440c', class: "title" }, this.cardTitle)), h("p", { key: '86b95db4e6464ca3236b4a03798013c3580819bf', class: "description" }, this.description), h("div", { key: '553dc998d5318a4730196baa0b9baff3a0a3369f', class: "actions" }, h("button", { key: '7532d01b46769198c23a1b1015c187fdefce146a', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '633d679ae59b1896aa2a06e04b4564569cf27a7d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'b72c45f93d259502b9d7c5ffb19e292a53c60ec6', class: "icon-placeholder" }, "..."))))));
     }
     static get is() { return "lmvz-card"; }
     static get encapsulation() { return "scoped"; }

package/{dist/collection → collection}/components/lmvz-chip/lmvz-chip.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LmvzChip {
     text;
     render() {
-        return h(Host, { key: '134d510fe3a04b989b0005bf31358149a9661cb2' }, this.text);
+        return h(Host, { key: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

package/{dist/collection → collection}/components/lmvz-header/lmvz-header.js

@@ -1,8 +1,8 @@
 import { h, Host } from "@stencil/core";
-import logo from "../../assets/icons/Logo.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import logo from "../../assets/icons/Logo.svg";
 export class LmvzHeader extends ReactiveControllerHost {
     el;
     get validationEl() {
@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '3189d1bd21fb5bd8f30b27cbfb6e49648b0e70c4', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '57c27e85c0d6292f0c39a850bad5d59de4cf8743', class: "brand" }, h("slot", { key: '13ea794d470861e25dc249c3174d2a5f2ba25096', name: "brand" }, h("img", { key: '37bea67eea1a2971a7502f6e9a5a2a28d3eec114', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '59b1679357cd4dbef737f90f4b4ff5c80a4efa06', "aria-label": "Hauptnavigation" }, h("div", { key: '51ce71eed0f31ef4dbfbeb72dffed87797462487', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'ac3357828b95a5aa6261c611612fb76f55bf92ee', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'b78f2ad43e03f40d65c69674b94a295e72366c8e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'd2cc74ff24cf10f0f958cea986149f3f03054291', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'cc6e0c0a32e51d3fa0d7f1865023f03434458217', class: "actions" }, h("slot", { key: '8504df5d1970ac856a237cbb0dcce5a2707b7cab', name: "actions" }))));
+        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" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

package/{dist/collection → collection}/components/lmvz-icon/lmvz-icon.css

@@ -13,7 +13,7 @@
     display: block;
   }
 
-  svg > path {
+  svg path {
     stroke: var(--lmvz-icon-color);
     fill: none;
   }
@@ -55,27 +55,27 @@
 }
 
 :host([weight='light']) {
-  svg > path {
+  svg path {
     stroke-width: 1;
   }
 }
 
 :host([weight='medium']) {
-  svg > path {
+  svg path {
     /* TODO: use semantic token */
     stroke-width: 1.5;
   }
 }
 
 :host([weight='bold']) {
-  svg > path {
+  svg path {
     /* TODO: use semantic token */
     stroke-width: 2;
   }
 }
 
 :host([weight='filled']) {
-  svg > path {
+  svg path {
     stroke-width: 2;
     fill: var(--lmvz-icon-color);
   }

package/{dist/collection → collection}/components/lmvz-icon/lmvz-icon.js

@@ -1,8 +1,8 @@
+import { isValidSVG } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Build, h, Host } from "@stencil/core";
-import { Effect } from "effect";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { resolveIconSvg } from "../../utils/icons/icons";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
-import { emptyDefaultSvg, fetchIconSvg } from "./icons";
 export class LmvzIcon extends ReactiveControllerHost {
     intersectionObserver;
     ariaValidationController = new AriaValidationController(this);
@@ -11,6 +11,7 @@ export class LmvzIcon extends ReactiveControllerHost {
     icon;
     weight = 'medium';
     size = 'md';
+    iconset;
     iconData;
     visible = false;
     ariaLabel;
@@ -29,18 +30,25 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.connectedCallback();
     }
     disconnectedCallback() {
-        if (this.intersectionObserver) {
+        if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
             this.intersectionObserver.disconnect();
-            this.intersectionObserver = undefined;
         }
+        this.intersectionObserver = undefined;
         super.disconnectedCallback();
     }
     async loadIconPathData() {
-        const { icon, visible } = this;
+        const { icon, iconset, visible } = this;
         if (!Build.isBrowser || !icon || !visible) {
             return;
         }
-        this.iconData = await Effect.runPromise(fetchIconSvg(this.icon).pipe(Effect.tapError((error) => Effect.logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), Effect.catchAll(() => Effect.succeed(emptyDefaultSvg()))));
+        if (isValidSVG(icon)) {
+            this.iconData = icon;
+            return;
+        }
+        this.iconData = await resolveIconSvg({
+            icon,
+            iconset,
+        });
     }
     componentDidRender() {
         this.validationEl = this.el.querySelector('svg');
@@ -48,7 +56,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: '4ce6e3931a1c8bfa1ddd48c780d005d110902b19', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: '6022ed0e30bcdd13455ccaae65784ac70abcb349', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {
@@ -58,7 +66,9 @@ export class LmvzIcon extends ReactiveControllerHost {
         this.intersectionObserver = new IntersectionObserver((entries) => {
             entries.some((entry) => {
                 if (entry.isIntersecting) {
-                    this.intersectionObserver?.disconnect();
+                    if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
+                        this.intersectionObserver.disconnect();
+                    }
                     this.intersectionObserver = undefined;
                     callback();
                     return true;
@@ -80,21 +90,20 @@ export class LmvzIcon extends ReactiveControllerHost {
             "$": ["lmvz-icon.css"]
         };
     }
-    static get assetsDirs() { return ["../../assets/icons"]; }
     static get properties() {
         return {
             "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Icon.IconName",
-                    "resolved": "\"Logo\" | \"actions\" | \"adduser\" | \"alert\" | \"apple\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"book\" | \"bookmark\" | \"checkmark\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close-l\" | \"close-sm\" | \"cog\" | \"computer\" | \"dashboard\" | \"delete\" | \"download\" | \"edit\" | \"external\" | \"facebook\" | \"favorite\" | \"filter\" | \"group\" | \"hide\" | \"home\" | \"info\" | \"instagram\" | \"letter\" | \"linkedin\" | \"logout\" | \"map\" | \"minus\" | \"navigation\" | \"plus\" | \"qr-scan\" | \"question\" | \"reader\" | \"reset\" | \"school\" | \"search\" | \"send\" | \"settings\" | \"share\" | \"shopping-cart\" | \"show\" | \"snapchat\" | \"sort\" | \"speech-bubble\" | \"star\" | \"student\" | \"upload\" | \"user\" | \"warn-circle\" | \"warn-triangle\" | \"whatsapp\" | \"world\" | \"x\" | \"youtube\"",
+                    "original": "SVGString | string",
+                    "resolved": "string | string & Brand<\"SVG\">",
                     "references": {
-                        "Icon": {
+                        "SVGString": {
                             "location": "import",
-                            "path": "../../api",
-                            "id": "src/api/index.ts::Icon",
-                            "referenceLocation": "Icon"
+                            "path": "@lmvz-ds/lib-ts/validation/SVGString.d.ts",
+                            "id": "../../lib/ts/dist/validation/SVGString.d.ts::SVGString",
+                            "referenceLocation": "SVGString"
                         }
                     }
                 },
@@ -102,7 +111,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The name of the icon to display (required)."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -119,7 +128,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                         "Icon": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Icon",
+                            "id": "src/api/index.d.ts::Icon",
                             "referenceLocation": "Icon"
                         }
                     }
@@ -146,7 +155,7 @@ export class LmvzIcon extends ReactiveControllerHost {
                         "Icon": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Icon",
+                            "id": "src/api/index.d.ts::Icon",
                             "referenceLocation": "Icon"
                         }
                     }
@@ -163,6 +172,25 @@ export class LmvzIcon extends ReactiveControllerHost {
                 "attribute": "size",
                 "defaultValue": "'md'"
             },
+            "iconset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "iconset"
+            },
             "ariaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -195,6 +223,9 @@ export class LmvzIcon extends ReactiveControllerHost {
         return [{
                 "propName": "icon",
                 "methodName": "loadIconPathData"
+            }, {
+                "propName": "iconset",
+                "methodName": "loadIconPathData"
             }];
     }
 }

package/{dist/collection → 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: '97674bbf9a17f1533340f19f0643bc8695417da6', class: classNames('input-container', {
+        return (h("div", { key: '3f14adbe321717cdfe305dc623940acb8be194f8', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '51aee84c821a5ad8884981bae3c42d0ed29a1fc5', class: "input-wrapper" }, h("slot", { key: '589b38e7977f74f7037a71b6b530ea98750f3bee', name: "before-input" }), h("div", { key: 'f5856cfc71ceb9093ceaa1b60bb6f4d964dadc7f', class: "label-input-group" }, h("label", { key: 'fbd6bb71131cf7384a79ba6f4f606c430e326bef', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'd479254f9ac11a31278720d41e56db1300c06b15', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'bb7b43947207bebb31412aa0e0eb58a9fed98963', 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: 'a21d46103f1b0040e67e20b4faf016a2b2fdd4dc', name: "after-input" })), h("div", { key: '53adfecb08ab29d1636052061dc37dffcd697ab2', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: 'ea3406ebd72ef02a0f293ab01cf4cf9971687b30', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, 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)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -343,7 +343,7 @@ export class LmvzInput extends ReactiveControllerHost {
                         "Input": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Input",
+                            "id": "src/api/index.d.ts::Input",
                             "referenceLocation": "Input"
                         }
                     }
@@ -392,7 +392,7 @@ export class LmvzInput extends ReactiveControllerHost {
                         "Input": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Input",
+                            "id": "src/api/index.d.ts::Input",
                             "referenceLocation": "Input"
                         }
                     }
@@ -418,7 +418,7 @@ export class LmvzInput extends ReactiveControllerHost {
                         "Input": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Input",
+                            "id": "src/api/index.d.ts::Input",
                             "referenceLocation": "Input"
                         }
                     }
@@ -466,7 +466,7 @@ export class LmvzInput extends ReactiveControllerHost {
                         "Input": {
                             "location": "import",
                             "path": "../../api",
-                            "id": "src/api/index.ts::Input",
+                            "id": "src/api/index.d.ts::Input",
                             "referenceLocation": "Input"
                         }
                     }

package/{dist/collection → 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: '510ac59b18468ce9c65b866ae2767185f1b3da92' }, h("slot", { key: '7e032e0dab83f9bfbaa96ad2b78d8a5a58f978ab', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: '1a37d2873a29c713cf95c60070c8dcf045c9f8fc' }, h("slot", { key: 'c6578bcfdb9f0cebad095d80f0ed63cf663bf91e', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }

package/{dist/collection → 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: '7f4650d5971bb93dba48385df734e6b7a0b4f7eb' }, h("div", { key: '79d6234cd15f64c8bff787d715107e7e86145333', class: "select-wrapper" }, h("label", { key: '14d93469c6d309b68427ff7bfc2bd531c8f0ecf6', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'c8be809e09d768d6f73ccccdfbf0bf495869ac72', "aria-hidden": "true" }, " *")), h("div", { key: '1db5d44b44100342a4ca5feff648b61a0bdadb1a', "aria-hidden": "true" }, h("span", { key: '3fdc95aab9997a10f4ba42dabc3758aea0797a22' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '11aef8194551059130b6be5351587219a1e80f00', "aria-hidden": "true" }, " *")), h("span", { key: '8fc52ff3e46d7b52d8d5069a74ebf7bb0d981081' }, h("img", { key: '129dd4038772eba9313e1e322866c70408f4e2ad', src: chevronDownSvg, alt: "" }))), h("select", { key: '6eb6cf496e60b3c1bd9556e596cbef34d4da5a09', 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: '70d660e0bc7e4c127234ce77decf35d6fea7fe8d', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'e6cbc238c9c0cf8e8c31d0347a1f621272a94ca6' }))), this.helperText && h("div", { key: '432d405ee7338da46509ff207599b882a19ea44e', role: "status" }, this.helperText)));
+        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)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

package/collection/index.js

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

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

@@ -0,0 +1,51 @@
+import { LmvzOnDemandProvider } from "@lmvz-ds/icons/on-demand";
+import { h, Host } from "@stencil/core";
+import { registerIconProvider, typedIconFromSet } from "../../utils/public";
+export class HeaderIntegration {
+    activeNav;
+    constructor() {
+        registerIconProvider('lmvz', new LmvzOnDemandProvider());
+    }
+    activate(event) {
+        const target = event.currentTarget;
+        const navItem = target.closest('[slot="nav-primary"]');
+        if (!navItem)
+            return;
+        const navId = navItem.id;
+        if (!navId) {
+            console.warn('Nav item does not have an id:', navItem);
+            return;
+        }
+        console.log('Activating nav item:', navId);
+        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" })))));
+    }
+    static get is() { return "header-integration"; }
+    static get encapsulation() { return "shadow"; }
+    static get styles() { return ".active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }"; }
+    static get properties() {
+        return {
+            "activeNav": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-nav"
+            }
+        };
+    }
+}