@lmvz-ds/components 0.17.3 → 0.18.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var ariaLoader = require('./aria-loader-W9Zvc9e-.js');
+var ariaLoader = require('./aria-loader-CfFuAbJn.js');
 var index = require('./index-C2yDXRqP.js');
 
 class AriaValidationController {
@@ -59,25 +59,27 @@ 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)
@@ -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

@@ -5,69 +5,3 @@ 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 iconNames = [
-    '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',
-];

package/collection/collection-manifest.json

@@ -9,7 +9,7 @@
     "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": {

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

@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: 'c6f44d3765d579e04ab91272747035d8589e2ff2', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '9d48dfc7a6a23df1eda46e9c9035520789a08d4c', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '95e9fb932e477c7d6e933d2c00e6a3728e55c256' }))));
+        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/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: '35883b5d4a92d10b5b010d822fb2233604464f9b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '6fdec3af75bab2b076651b8cfef4aec8e23326a6', class: "brand" }, h("slot", { key: '3127b4223b8bebfe425efc7ce45626f37fbf76b9', name: "brand" }, h("img", { key: '20b3dd598e320c6950fb08bbd55dd80c47552eaf', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'c3bf07f78930085c1a7b89421506bcd41d139911', "aria-label": "Hauptnavigation" }, h("div", { key: 'fbc5199080f52da4f10c8c14fbbc0877ecc5f31c', role: "menubar", class: "primary-menubar" }, h("slot", { key: '4210d213dcf7a1a27a73f2a9cf7ff97fec62f0db', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '7b91c269f75e1245f75d471ec5bb7eeabfe1094d', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'e23eb0f222b49d912bb45870df6d9b0d01f43788', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '4b19026d5b2e54aa7aed072ce57de4acaa75cb4f', class: "actions" }, h("slot", { key: '8f02d5d178bb60b40604fcd1be74d373d89c911f', 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/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/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: 'f5c2f8025d0e9598d903e72770ebca6cad01961c', 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/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: '195e2c5046d48d01f4912993bde3c8d2b3a73d1d', class: classNames('input-container', {
+        return (h("div", { key: '3f14adbe321717cdfe305dc623940acb8be194f8', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '66bc3deab063a309eefc0de5ebf7f54331c9190c', class: "input-wrapper" }, h("slot", { key: 'fac318070421d526bb09ba0dd0efdecf8964d952', name: "before-input" }), h("div", { key: '1945152dc010d571c5886f222332b057e89e496c', class: "label-input-group" }, h("label", { key: 'd57392c2c83b1e5f362dd33fa9d060e570417f3f', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '507603a50eb08f0f4f5e2b87b2550fe6b657c4d4', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '0fe916fef48618331806142c0d3500d9e6dec9cb', 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: 'b415bedde58862e5bd7621f73a1d77bc478850a3', name: "after-input" })), h("div", { key: 'bc0e07f5243417f4c632eb2f7976dc944fdbf17a', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '62e2267453b92edd47077b233cb231a1deecedc4', 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/collection/index.js

@@ -1,4 +1,3 @@
 export * from '@lmvz-ds/aria-validation';
-export * from './api';
-export * from './components/lmvz-icon/public';
+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"
+            }
+        };
+    }
+}

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

@@ -1,6 +1,6 @@
 import { ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, enableAriaValidation, isAriaValidationEnabled, queueValidation, useVerboseLogging, } from "@lmvz-ds/aria-validation";
 import { Build } from "@stencil/core";
-if (Build.isDev) {
+if (Build.isDev && Build.isBrowser) {
     enableAriaValidation();
 }
 export class AriaValidationController {
@@ -59,25 +59,27 @@ export 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,
+        if (Build.isBrowser) {
+            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)
@@ -138,9 +140,11 @@ export class AriaValidationController {
         });
     }
     discardVisibilityObserver() {
-        if (!this.visibilityObserver)
-            return;
-        this.visibilityObserver.disconnect();
-        this.visibilityObserver = undefined;
+        if (Build.isBrowser) {
+            if (!this.visibilityObserver)
+                return;
+            this.visibilityObserver.disconnect();
+            this.visibilityObserver = undefined;
+        }
     }
 }

package/collection/utils/http.js

@@ -1,24 +1,21 @@
-import { Data, Micro as Effect } from "effect";
-export class FetchError extends Data.TaggedError('FetchError') {
+import { Micro } from "effect";
+export class FetchError extends Micro.TaggedError('FetchError') {
 }
-export class NotFoundError extends Data.TaggedError('NotFoundError') {
+export class NotFoundError extends Micro.TaggedError('NotFoundError') {
 }
-export const httpClient = (input, init) => Effect.gen(function* () {
-    const response = yield* Effect.tryPromise({
+export const httpClient = (input, init) => Micro.gen(function* () {
+    const response = yield* Micro.tryPromise({
         try: () => fetch(input, init),
-        catch: error => new FetchError({ cause: error }),
+        catch: (error) => new FetchError({ cause: error }),
     });
     if (response.status === 404) {
-        return yield* Effect.fail(new NotFoundError({ url: response.url }));
+        return yield* Micro.fail(new NotFoundError({ url: response.url }));
     }
     return response;
 });
-export class ResponseTextError extends Data.TaggedError('ResponseTextError') {
-    constructor(error) {
-        super(new Error(`Failed to read response text`, { cause: error }));
-    }
+export class ResponseTextError extends Micro.TaggedError('ResponseTextError') {
 }
-export const responseAsText = (res) => Effect.tryPromise({
+export const responseAsText = (res) => Micro.tryPromise({
     try: () => res.text(),
-    catch: error => new ResponseTextError(error),
+    catch: (error) => new ResponseTextError({ message: 'Failed to read response text', cause: error }),
 });