@lmvz-ds/components 0.18.2 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lmvz-ds/components
 
+## 0.19.0
+
+### Minor Changes
+
+- a71b037: Chip Komponente hinzugefügt
+
 ## 0.18.2
 
 ### Patch Changes

package/README.md

@@ -1,43 +1,60 @@
-[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
-
-Stencil is a compiler for building web apps using Web Components.
-
 # LMVZ Component Library
 
-This is the component library of the LMVZ Design System
-
-## About
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMzczLjljMCwzNy42LTU1LjEsNjguNi05Mi43LDY4LjZIMTgwLjRjLTM3LjksMC05Mi43LTMwLjctOTIuNy02OC42di0zLjZoMzM2LjlWMzczLjl6Ii8+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywyOTIuMUgxODAuNGMtMzcuNiwwLTkyLjctMzEtOTIuNy02OC42di0zLjZIMzMyYzM3LjYsMCw5Mi43LDMxLDkyLjcsNjguNlYyOTIuMXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDE0MS43SDg3Ljd2LTMuNmMwLTM3LjYsNTQuOC02OC42LDkyLjctNjguNkgzMzJjMzcuOSwwLDkyLjcsMzAuNyw5Mi43LDY4LjZWMTQxLjd6Ii8+Cjwvc3ZnPgo%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
 
-This package uses **Stencil** to create web components—for browser-native usage—and framework-specific wrapper utils for angular and react (which are wrapped using their dedicated sibling packages).
-It also uses **Effect** (aka. effect-ts) for improved type-safety error handling
+Web components for the LMVZ Design System.
 
-## General Guidelines for Consuming This Package (in your project)
+## About
 
-Always consider the Integration chapter in the Design Guide. In the context of a UI framework, consider using the specific wrapper packages: `@lmvz-ds/angular`, `@lmvz-ds/react`, `@lmvz-ds/vue`.
+This package uses **Stencil** to create web components for browser-native usage and to generate integration artifacts consumed by sibling framework packages.
 
-## NPM Integration
+Please also read the Integration chapter of the Design Guide.
 
-### Installation
+## Installation
 
 ```bash
 npm i @lmvz-ds/components
 ```
 
+> [!TIP]
+> If you are building an Angular application, prefer the `@lmvz-ds/angular` wrapper package.
+
 > [!TIP]
 > Our @lmvz-ds/aria-validation sibling is only used for YOUR development mode, and thus, optional.
 
 ## Usage
 
-In a web app, import components directly (`import LmvzCard from '.../components/lmvz-card.js'`) or the loader (e.g., `import { defineCustomElements } from '.../loader';`) and call `defineCustomElements(window)` to register all components globally.
-Use the CDN version (cdn.js) for direct browser inclusion via <script> tags.
-The loader is essential when integrating Stencil components into non-Stencil projects (React, Angular, plain HTML) to ensure custom elements are defined and polyfills loaded.
+Import individual components when you only need a subset:
+
+```ts
+import '@lmvz-ds/components/lmvz-button';
+import '@lmvz-ds/components/lmvz-icon';
+```
+
+Register all components globally via the loader when that is a better fit for your app shell:
+
+```ts
+import { defineCustomElements } from '@lmvz-ds/components/loader';
+
+defineCustomElements(window);
+```
+
+If your app has no own build/bundling process, directly import from the CDN (unpkg.com) using `<script type="module" href="[cdnurl]">`.
+
+The package also exposes a /hydrate entry for server-side rendering workflows.
+
+### Icons
+
+The `<lmvz-icon>` component requires an icon provider to be registered before use. See [@lmvz-ds/icons](https://www.npmjs.com/package/@lmvz-ds/icons) for setup instructions and available provider modes.
 
 ### Runtime ARIA Validation (Opt-in)
 
-ARIA validation is disabled by default and can be enabled on demand with a separate runtime import:
+ARIA validation is disabled by default and can be enabled on demand for development-time accessibility checks:
 
 ```ts
-import '@lmvz-ds/components/ariaValidation';
+import { enableAriaValidation } from '@lmvz-ds/components';
+
+enableAriaValidation();
 ```
 
 This import enables validation globally for all LMVZ components, independent of integration mode.
@@ -45,25 +62,25 @@ This import enables validation globally for all LMVZ components, independent of
 To disable it again at runtime:
 
 ```ts
-import { disableAriaValidation } from '@lmvz-ds/components/ariaValidation';
+import { disableAriaValidation } from '@lmvz-ds/components';
 
 disableAriaValidation();
 ```
 
-### Components
-
-Components are built in standalone mode, using [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements). This way, you can import the components individually, wherever they are needed.
+### Example
 
-For example, given you'd like to use `<my-component />` as part of your application, you can import the component directly via:
+Import and register the component module before using its custom element:
 
 ```tsx
-import '@lmvz-ds/components/my-component';
+import { defineCustomElement as defineButtonElement } '@lmvz-ds/components/lmvz-button';
+
+defineButtonElement();
 
 function App() {
   return (
     <>
       <div>
-        <my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+        <lmvz-button variant="primary"></lmvz-button>
       </div>
     </>
   );
@@ -72,81 +89,9 @@ function App() {
 export default App;
 ```
 
-⚠️ The components' bundled styles will not affect native HTML elements, so you still need to import style packages you want to use globally.
-
-## Making changes to this package
-
-### Getting Started
-
-```bash
-npm install
-```
-
-### Workflow
-
-See the parent project's readme for the overarching process' description.
-
-### Guidelines
-
-- Components must each be provided as stand-alone bundles.
-- Components must bring their own, ds-aligned, default styles. This increases flexibility (as components are usable stand-alone) and is achieved by build-time injection of defaults (based on base- and light-theme-variables). There is no need for importing any variables definitions. Instead, add base variables to the plugin config's list (`stencil.base.config.ts`).
-  - Font file contents are exempt from bundling, to allow for browser-caching!
-- To prevent styles from leaking out of your Components (into the global scope), wrap your own styles and `@import`s in `:host`.
-- Components depending on Fragments must import them into their :host selector, for proper encapsulation.
-  - This use of CSS' @import syntax is invalid, but properly handled by postcss.
-  - Consider using custom-property abstractions instead of importing whole fragments!
-
-
-### Configuration
-
-Different Stencil configs are necessary, since we need the following constellations (which are not possible with a single config):
-
-- local Stencil dev-server: classic dev build
-- Storybook integration: prod build + source maps (dev build does not generate source files in dist/)
-- release build: prod build without source maps
-
-package.json exports should be generated along with the Stencil build (for new components).
-
-### Development
-
-Use the `pnpm run start:dev` script to start Stencil's dev server.  
-(`start` will be called from the Storybook sibling package and will only run a (watching) production build).  
-
-### Building
-
-To build the components (and styles) for production, run the build script. This will also sync changes to the wrapper projects.
-
-```bash
-pnpm run build
-```
-
-### Creating New Components
-
-Always use the `lmvz-` prefix when creating new components!
-
-```bash
-pnpm run @stencil/core generate lmvz-[component name]
-```
-
-### Testing
-
-To run the unit tests for the components, run:
-
-```bash
-npm test
-```
-
-#### Integration Testing
-
-Since components can be integrated in various ways, always test integrations:
-
-- Stencil dev mode and preview (see package scripts).
-- With the Storybook package.
-- Angular, React, ... wrappers
+LMVZ component styles do not style native HTML elements outside the components. Import a theme, and any additional global style bundles you need, from `@lmvz-ds/styles` separately.
 
-#### E2E
 
-TODOs
+## Contributing
 
-- Current Playwright integration is broken or will break Jest integration.  
-- Vitest-Browser + Stencil is bleeding edge and needs eval.
+Contributor onboarding for local development, builds, testing, and authoring guidelines is in `DEVELOPMENT.md`.

package/cjs/ds.constants-DSnxZ3ia.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const sizes = ['xs', 'sm', 'md', 'lg'];
+const textSizes = [...sizes, 'xl'];
+const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
+const iconSizes = [...sizes, 'inherit'];
+const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
+const chipSizes = ['default', 'small'];
+
+exports.chipSizes = chipSizes;
+exports.chipTypes = chipTypes;
+exports.iconSizes = iconSizes;
+exports.iconWeights = iconWeights;
+exports.inputTypes = inputTypes;
+exports.textSizes = textSizes;

package/cjs/{icons-swqMn6s2.js → icons-Tg7ySOh-.js}

@@ -2,6 +2,41 @@
 
 var logger = require('./logger-Bn2yoZGP.js');
 
+const IconProviderRegistryKey = Symbol.for('LMVZ__iconProviderRegistry');
+const inMemoryRegistry = {};
+function getRegistry() {
+    if (typeof window === 'undefined') {
+        return inMemoryRegistry;
+    }
+    return window[IconProviderRegistryKey] ?? (window[IconProviderRegistryKey] = {});
+}
+function registerIconProvider(id, provider) {
+    const registry = getRegistry();
+    const providerName = id;
+    if (Object.prototype.hasOwnProperty.call(registry, providerName)) {
+        console.warn(`Icon provider with name "${providerName}" is already registered. Overwriting existing provider.`);
+    }
+    registry[providerName] = provider;
+}
+function getRegisteredIconProvider(id) {
+    const registry = getRegistry();
+    if (id) {
+        return registry[id];
+    }
+    const providerNames = Object.keys(registry);
+    if (providerNames.length === 0) {
+        return undefined;
+    }
+    if (providerNames.length > 1) {
+        console.warn(`Multiple icon providers registered (${providerNames.join(', ')}). Using the first one: "${providerNames[0]}".`);
+    }
+    const firstProviderName = providerNames[0];
+    if (!firstProviderName) {
+        return undefined;
+    }
+    return registry[firstProviderName];
+}
+
 /**
  * This module provides types and utility functions to create and work with branded types,
  * which are TypeScript types with an added type tag to prevent accidental usage of a value in the wrong context.
@@ -56,57 +91,37 @@ class BrandValidationError extends logger.TaggedError('BrandValidationError') {
         super(new Error(`Brand validation failed for type ${type}.`, { cause: error }));
     }
 }
+/**
+ * Validates an SVG string against the branded `SVGString` type and returns the result effect.
+ *
+ * @param svg Raw SVG markup to validate.
+ */
 const createValidSVGString = (svg) => logger.try_({
-    try: () => SVGString(svg),
+    try: () => SVGString(sanitizeSvg(svg)),
     catch: (error) => new BrandValidationError(error, 'SVGString'),
 });
+/**
+ * Checks whether a string can be parsed into an SVG document.
+ *
+ * @param svg Raw SVG markup to validate.
+ */
 function isValidSVG(svg) {
-    if (typeof svg !== 'string') {
+    if (typeof svg !== 'string')
         return false;
-    }
+    const sanitizedSvg = sanitizeSvg(svg);
     try {
         const parser = new DOMParser();
-        const doc = parser.parseFromString(svg, 'image/svg+xml');
+        const doc = parser.parseFromString(sanitizedSvg, 'image/svg+xml');
         return doc.documentElement.nodeName === 'svg';
     }
     catch {
         return false;
     }
 }
-
-const IconProviderRegistryKey = Symbol.for('LMVZ__iconProviderRegistry');
-const inMemoryRegistry = {};
-function getRegistry() {
-    if (typeof window === 'undefined') {
-        return inMemoryRegistry;
-    }
-    return window[IconProviderRegistryKey] ?? (window[IconProviderRegistryKey] = {});
-}
-function registerIconProvider(id, provider) {
-    const registry = getRegistry();
-    const providerName = id;
-    if (Object.prototype.hasOwnProperty.call(registry, providerName)) {
-        console.warn(`Icon provider with name "${providerName}" is already registered. Overwriting existing provider.`);
-    }
-    registry[providerName] = provider;
-}
-function getRegisteredIconProvider(id) {
-    const registry = getRegistry();
-    if (id) {
-        return registry[id];
-    }
-    const providerNames = Object.keys(registry);
-    if (providerNames.length === 0) {
-        return undefined;
-    }
-    if (providerNames.length > 1) {
-        console.warn(`Multiple icon providers registered (${providerNames.join(', ')}). Using the first one: "${providerNames[0]}".`);
-    }
-    const firstProviderName = providerNames[0];
-    if (!firstProviderName) {
-        return undefined;
-    }
-    return registry[firstProviderName];
+function sanitizeSvg(svg) {
+    const dataUriPrefix = 'data:image/svg+xml,';
+    const base = svg.trim();
+    return !base.startsWith(dataUriPrefix) ? base : decodeURIComponent(base.slice(dataUriPrefix.length));
 }
 
 const emptyDefaultSvg = () => SVGString(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`);
@@ -156,6 +171,7 @@ function typedIconFromSet(iconset, icon) {
     };
 }
 
+exports.createValidSVGString = createValidSVGString;
 exports.getRegisteredIconProvider = getRegisteredIconProvider;
 exports.isValidSVG = isValidSVG;
 exports.registerIconProvider = registerIconProvider;

package/cjs/index.cjs.js

@@ -1,14 +1,11 @@
 'use strict';
 
 var ariaLoader = require('./aria-loader-CfFuAbJn.js');
-var icons = require('./icons-swqMn6s2.js');
+var ds_constants = require('./ds.constants-DSnxZ3ia.js');
+var icons = require('./icons-Tg7ySOh-.js');
 require('./logger-Bn2yoZGP.js');
 
-const sizes = ['xs', 'sm', 'md', 'lg'];
-const textSizes = [...sizes, 'xl'];
-const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
-const iconSizes = [...sizes, 'inherit'];
-const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+
 
 exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ariaLoader.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
 exports.disableAriaValidation = ariaLoader.disableAriaValidation;
@@ -16,10 +13,12 @@ exports.enableAriaValidation = ariaLoader.enableAriaValidation;
 exports.isAriaValidationEnabled = ariaLoader.isAriaValidationEnabled;
 exports.queueValidation = ariaLoader.queueValidation;
 exports.useVerboseLogging = ariaLoader.useVerboseLogging;
+exports.chipSizes = ds_constants.chipSizes;
+exports.chipTypes = ds_constants.chipTypes;
+exports.iconSizes = ds_constants.iconSizes;
+exports.iconWeights = ds_constants.iconWeights;
+exports.inputTypes = ds_constants.inputTypes;
+exports.textSizes = ds_constants.textSizes;
 exports.getRegisteredIconProvider = icons.getRegisteredIconProvider;
 exports.registerIconProvider = icons.registerIconProvider;
 exports.typedIconFromSet = icons.typedIconFromSet;
-exports.iconSizes = iconSizes;
-exports.iconWeights = iconWeights;
-exports.inputTypes = inputTypes;
-exports.textSizes = textSizes;

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-C2yDXRqP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
 var component = require('./component-Csg9MtNK.js');
 require('./aria-loader-CfFuAbJn.js');
@@ -64,7 +64,7 @@ const LmvzButton = class extends reactiveControllerHost.ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (index.h(index.Host, { key: '2897a943aca62561b0e78b5b3f2b7b85d76f4e78', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: '92555224e33b00fb2602fdb2d19075145c0d9097', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: index$1.classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, index.h("slot", { key: '637a03a73db84a63bf1e3165d57c474151f87783' }))));
+        return (index.h(index.Host, { key: 'ce82e749ffb9172a9421d303e0d7cc02de58dff9', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: 'acd0773f72e76139ec5495eb15fc3a5949029e40', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: index$1.classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, index.h("slot", { key: 'f519e0f82e68811a8831214e83e609bd9501fed0' }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,17 +1,81 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
+var ds_constants = require('./ds.constants-DSnxZ3ia.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
+var ariaLoader = require('./aria-loader-CfFuAbJn.js');
 
-const lmvzChipCss = () => `:host{display:block}`;
+function debounce(func, wait) {
+    let timeout;
+    return () => {
+        if (timeout !== undefined) {
+            window.clearTimeout(timeout);
+        }
+        timeout = window.setTimeout(() => {
+            func();
+            timeout = undefined;
+        }, wait);
+    };
+}
 
-const LmvzChip = class {
+const lmvzChipCss = () => `:host {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);    padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));   padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   border: 1px solid var(--lmvz-chip-border-color);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4     Router);   background-color: var(--lmvz-chip-background-color);   color: var(--lmvz-chip-foreground-color);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));       box-sizing: border-box;   max-width: 100%;   overflow: hidden;   white-space: nowrap;    > .content-overflow-wrapper {     min-width: 0;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;   } }  :host([size='small']) {   padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));   padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4     Router);   gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); }  ::slotted(*) {         display: inline;   white-space: inherit; }  ::slotted(lmvz-icon) {   --lmvz-component-color: var(--lmvz-chip-foreground-color);   --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); }  :host([size='small']) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); }  :host([type='active']) {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }  :host([type='warning']) {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00); }  :host([type='success']) {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c); }  :host([type='error']) {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  :host([type='neutral']) {   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);   --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454); } `;
+
+const LmvzChip = class extends reactiveControllerHost.ReactiveControllerHost {
+    ariaValidationController = new reactiveControllerHost.AriaValidationController(this);
+    beforeSlot;
+    defaultSlot;
+    afterSlot;
+    get el() { return index.getElement(this); }
+    get validationEl() {
+        return this.el;
+    }
+    type = 'active';
+    size = 'default';
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
+        this.addController(this.ariaValidationController);
+    }
+    normalizeType(value) {
+        const normalizedType = ds_constants.chipTypes.includes(value) ? value : 'active';
+        if (normalizedType !== this.type) {
+            this.type = normalizedType;
+        }
+    }
+    normalizeSize(value) {
+        const normalizedSize = ds_constants.chipSizes.includes(value) ? value : 'default';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeType(this.type);
+        this.normalizeSize(this.size);
+        super.componentWillLoad();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.checkContent();
     }
-    text;
+    checkContent = debounce(() => {
+        if (!ariaLoader.isAriaValidationEnabled)
+            return;
+        const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
+        if (!elements.length) {
+            console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
+        }
+    }, 500);
     render() {
-        return index.h(index.Host, { key: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
+        return (index.h(index.Host, { key: 'd34b677a3f6ac2cdb53453c774badb837a3b9e25', type: this.type, size: this.size }, index.h("slot", { key: 'c6f8beea28cd847f8d8b7c7a075c774f58e39262', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), index.h("span", { key: 'be784ef977bc1d0eae2fd2d9377642636bd325bc', class: "content-overflow-wrapper" }, index.h("slot", { key: '3730f2902bcae7917979dedd91264670fbff00de', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), index.h("slot", { key: 'f827a03e407385c7bdfd483073453d97f6f73afb', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
+    static get watchers() { return {
+        "type": [{
+                "normalizeType": 0
+            }],
+        "size": [{
+                "normalizeSize": 0
+            }]
+    }; }
 };
 LmvzChip.style = lmvzChipCss();
 

package/cjs/lmvz-components.cjs.js

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 var component = require('./component-Csg9MtNK.js');
 var lmvzMenuitem_entry = require('./lmvz-menuitem.cjs.entry.js');
 require('./aria-loader-CfFuAbJn.js');
@@ -139,7 +139,7 @@ const LmvzHeader = class extends reactiveControllerHost.ReactiveControllerHost {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '96626b8d29cdefc8ed97a7bb68a689ff6155d2c7', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: '41ac004bdc6c2c6a1f8e3d293f6b0c3727c27aff', class: "brand" }, index.h("slot", { key: '8e33150a54c8b8070b22db51c8584e06dd06dd5c', name: "brand" }, index.h("img", { key: '889955c7335d64f2c8d0b2e032db3dd64a27cbd2', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: '37b6ef465d320c325e0c830bcc91ea3a575d2690', "aria-label": "Hauptnavigation" }, index.h("div", { key: '7a0ec1a78d6eee3b3e37f55f872806b0791c2156', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: 'e0403633c6acd137c94b1552cc7f08e3549550d3', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), index.h("div", { key: '4e377f38a0b94a766f9001174729e5763fa0a194', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, index.h("slot", { key: '368e461f239498c706a3c9bb27a7b05de2b79cac', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), index.h("div", { key: '8ffaf8d6f1254644b48dc0a40b9f552339ecc690', class: "actions" }, index.h("slot", { key: '5b679885e4fa111d66e993458ab7f5092d8179d4', name: "actions" }))));
+        return (index.h(index.Host, { key: '74061d97a6d4cdec1f445a91b9e819bb12565681', onFocus: this.delegateFocus.bind(this) }, index.h("div", { key: 'af7f08ff48a20b7d36df5ee233da7027cd30a047', class: "brand" }, index.h("slot", { key: '46be4fcf2798ac374ac967bc2742260c4d7e082b', name: "brand" }, index.h("img", { key: '3ee79f9732758a6ca5dd6e8264c67707917b358b', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), index.h("nav", { key: '8f37883454544a384bb35a151c4e24bb12c35f40', "aria-label": "Hauptnavigation" }, index.h("div", { key: 'a3166ad7e924dd72148d05c01160c889c8f07529', role: "menubar", class: "primary-menubar" }, index.h("slot", { key: 'aa600791e4d8f3463fefbc3b366831e3b3a3eaac', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), index.h("div", { key: '6471256967f4d14c454205a330b2a97ecfcad7a8', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, index.h("slot", { key: '1b9b461b958e76184938a1c65d032b296894e2dd', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), index.h("div", { key: '019d87472272df09ce99eeed405771229f326f1a', class: "actions" }, index.h("slot", { key: '18035fb0a51a26c96dc687547d17d57118a88e87', name: "actions" }))));
     }
     static get watchers() { return {
         "lmvzActiveNav": [{

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

@@ -1,12 +1,12 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
-var icons = require('./icons-swqMn6s2.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
-require('./logger-Bn2yoZGP.js');
+var icons = require('./icons-Tg7ySOh-.js');
+var logger = require('./logger-Bn2yoZGP.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 require('./aria-loader-CfFuAbJn.js');
 
-const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));display:inline-block;line-height:0;svg{display:block}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));height:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));height:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem));height:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{width:inherit;height:inherit}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
+const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
 
 const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
     intersectionObserver;
@@ -48,7 +48,7 @@ const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
             return;
         }
         if (icons.isValidSVG(icon)) {
-            this.iconData = icon;
+            this.iconData = await logger.runPromise(icons.createValidSVGString(icon));
             return;
         }
         this.iconData = await icons.resolveIconSvg({
@@ -62,7 +62,7 @@ const LmvzIcon = class extends reactiveControllerHost.ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return index.h(index.Host, { key: '6022ed0e30bcdd13455ccaae65784ac70abcb349', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return index.h(index.Host, { key: 'c1e952e00df287c66c49eb043408514c07c3dc39', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (typeof window === 'undefined' || !window.IntersectionObserver) {

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-C2yDXRqP.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 var component = require('./component-Csg9MtNK.js');
 require('./aria-loader-CfFuAbJn.js');
 
@@ -164,9 +164,9 @@ const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (index.h("div", { key: '3f14adbe321717cdfe305dc623940acb8be194f8', class: index$1.classNames('input-container', {
+        return (index.h("div", { key: '22be29e5fcd4976fc6c4d125781be00acef0b359', class: index$1.classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, index.h("div", { key: '2cc559cc0ff4da1f8418c510188bcbb93b42da02', class: "input-wrapper" }, index.h("slot", { key: 'b41a5179b6d8651a9b60777718f92b32f80fda89', name: "before-input" }), index.h("div", { key: '4ac81c8d277d6592e1d84f4b3abfffef03843a9c', class: "label-input-group" }, index.h("label", { key: '80b272c3b069a246dcbf26812d2281e436c6cdfa', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'eb00d3be1a3eddd0661df74cfb2d4b95c75f5eea', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.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 })), index.h("slot", { key: '9a908984ecebead7f08bbd88ed57fa8f30a69b67', name: "after-input" })), index.h("div", { key: 'abe658929d955042358ff24ea2267ae5b7b3484d', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '61c689c7d8ab3bbb7c62dc7a227c35441b4bbbd8', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, index.h("div", { key: 'ffeb620419316976e800b16b4a9fd9538f1efd26', class: "input-wrapper" }, index.h("slot", { key: '2a1a67f7fde0232b2bb5ce3cc228b869e5ac3516', name: "before-input" }), index.h("div", { key: '3bbe623cae67d376c60a28306164293a712b1bb5', class: "label-input-group" }, index.h("label", { key: 'c260b3eb249d5c785fe3b6e223c7428a8c147f50', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: 'f43dd77efe7e319428dd72ec8933b7587635e767', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: 'eeb821a74a5ac7aab3fab65a48a37d21a22744e6', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: 'dd36a212c05c43ab2a8249750c14a7475b6d65d3', name: "after-input" })), index.h("div", { key: 'c2aedd67036faf4d3dc459c3c1fab8d07ee5a991', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: '01d2a6d6df9b3804a595711c7b57b6177d311c39', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
 require('./aria-loader-CfFuAbJn.js');
 
@@ -28,7 +28,7 @@ const LmvzMenuItem = class extends reactiveControllerHost.ReactiveControllerHost
         this.addController(new elementActivationController.ElementActivationController(this));
     }
     render() {
-        return (index.h(index.Host, { key: '1a37d2873a29c713cf95c60070c8dcf045c9f8fc' }, index.h("slot", { key: 'c6578bcfdb9f0cebad095d80f0ed63cf663bf91e', ref: (e) => (this.validationSlot = e) })));
+        return (index.h(index.Host, { key: '0878343aec1c98c16c073c6cdd3382ee5c980799' }, index.h("slot", { key: 'f7a87d4c9d786bb4686d406d4313e9b5d79701d6', ref: (e) => (this.validationSlot = e) })));
     }
 };
 LmvzMenuItem.style = lmvzMenuitemCss();