@lmvz-ds/components 0.17.3 → 0.18.1

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-action/lmvz-action.js

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

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

@@ -92,7 +92,7 @@ button > * {
 
 button:focus-visible {
   /* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);
+  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 }
 
@@ -130,7 +130,7 @@ button.secondary:not([disabled], .disabled):hover {
 
 button.secondary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 /* button.secondary:is([disabled], .disabled) {

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: '1448b16151418790d0a78eda2248b7d61fd8e32b', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '2cf7ccc0692179b68aaea534a7a4d11dbcbe27b5', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '8fd9f99f8c79657fd3dbeafb2fd88ca667bc0d44' }))));
     }
     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-card/lmvz-card.css

@@ -93,7 +93,7 @@ button > * {
 
 button:focus-visible {
   /* outline: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-status-active-950); */
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);
+  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-active, #f1f9fe);
   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 }
 
@@ -131,7 +131,7 @@ button.secondary:not([disabled], .disabled):hover {
 
 button.secondary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 /* button.secondary:is([disabled], .disabled) {
@@ -176,8 +176,8 @@ button.large {
 
 
   display: flex;
-  min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);
-  max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);
+  min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem);
+  max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem);
   flex-direction: column;
   align-items: flex-start;
 
@@ -215,7 +215,7 @@ button.large {
 
   padding-bottom: var(--lmvz-global-s4, 4px);
   overflow-wrap: break-word;
-  font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2
+  font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.2
     Router);
 }
 .description {

package/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: '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" }, "..."))))));
+        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" }, "..."))))));
     }
     static get is() { return "lmvz-card"; }
     static get encapsulation() { return "scoped"; }

package/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: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
+        return h(Host, { key: '134d510fe3a04b989b0005bf31358149a9661cb2' }, this.text);
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }

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: '58cf99b555112f6209b6d16047bda2cc0bbf5cde', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'd9bda5c2a6b9abd6e5ea849fb31a0543c8c36bb7', class: "brand" }, h("slot", { key: 'e1c2c2a0bd69875ecd46ef9f7406ccb52409b570', name: "brand" }, h("img", { key: '8dfca875ffc837f2c413527ea106d640a9b9bb97', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '24ceb7f3ef54399ecb9b7b78418d3be9bb547f60', "aria-label": "Hauptnavigation" }, h("div", { key: 'c9fb6b1850330493e0a26bf20ea04013725025f6', role: "menubar", class: "primary-menubar" }, h("slot", { key: '19640032a28d0a9bd7f5396f7c1acd477135f864', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'c11f19e15c0fea300a771060e2e4c77cce76c20f', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '2df2cf852595a78391bcd7c3dd8b8d6db3847aaa', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'c256862d4f5ea38c120218372d9ad73ae19efd74', class: "actions" }, h("slot", { key: '91b5eb2d9ab06005384a28cddee3d6c92afd418c', 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;
   }
@@ -21,29 +21,29 @@
 
 :host([size='xs']) {
   svg {
-    width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-    height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+    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));
   }
 }
 
 :host([size='sm']) {
   svg {
-    width: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
-    height: var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));
+    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));
   }
 }
 
 :host([size='md']) {
   svg {
-    width: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
-    height: var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+    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));
   }
 }
 
 :host([size='lg']) {
   svg {
-    width: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
-    height: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));
+    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));
   }
 }
 
@@ -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: 'b36586af32709b492336fe4ec1fe1fe1fe7a9e4b', 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.css

@@ -41,7 +41,7 @@
   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
-  --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);
+  --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);
   --input-height: 48px; /* From Figma input-size=48 */
   --input-padding-x: 16px;

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: '9de2e4dd202edc937e96ff6ebdc8d0270851c4ca', 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: '0c9f92778e1c52dca13ed9175a09d757fc6eedc9', class: "input-wrapper" }, h("slot", { key: '9cf29c45afdb127917a68ed6752faf3d50004c7d', name: "before-input" }), h("div", { key: 'e7e6c54b6ee6db108ac3f8ddb676bb9fcf10517e', class: "label-input-group" }, h("label", { key: '68eb29e585741971aae58c7693d011ba587f1c1b', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '274d992a43c2de45af7172608fb1581c6ee771d2', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'a26b95dee9781e0e13db16d6e09681e36cab0230', 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: '5b77b87ba1da3b8e71c7f6825eecf2216a93e4f9', name: "after-input" })), h("div", { key: 'cac334a1e88d4136e923ef1355196997bfe97099', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: 'b3ea662fa0a57ed0d8c3f35e36aad6b2513af8ab', 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/components/lmvz-menuitem/lmvz-menuitem.css

@@ -62,6 +62,6 @@
   z-index: 1;
 }
 :host([aria-expanded='true']) {
-  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected, #f1f9fe);
-  --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }

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: '510ac59b18468ce9c65b866ae2767185f1b3da92' }, h("slot", { key: '7e032e0dab83f9bfbaa96ad2b78d8a5a58f978ab', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }