@lmvz-ds/components 0.18.1 → 0.19.0

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C2yDXRqP.js');
-var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
+var reactiveControllerHost = require('./reactive-controller-host-Bi9eu2bV.js');
 require('./aria-loader-CfFuAbJn.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: '7f4650d5971bb93dba48385df734e6b7a0b4f7eb' }, index.h("div", { key: '79d6234cd15f64c8bff787d715107e7e86145333', class: "select-wrapper" }, index.h("label", { key: '14d93469c6d309b68427ff7bfc2bd531c8f0ecf6', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: 'c8be809e09d768d6f73ccccdfbf0bf495869ac72', "aria-hidden": "true" }, " *")), index.h("div", { key: '1db5d44b44100342a4ca5feff648b61a0bdadb1a', "aria-hidden": "true" }, index.h("span", { key: '3fdc95aab9997a10f4ba42dabc3758aea0797a22' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '11aef8194551059130b6be5351587219a1e80f00', "aria-hidden": "true" }, " *")), index.h("span", { key: '8fc52ff3e46d7b52d8d5069a74ebf7bb0d981081' }, index.h("img", { key: '129dd4038772eba9313e1e322866c70408f4e2ad', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '6eb6cf496e60b3c1bd9556e596cbef34d4da5a09', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '70d660e0bc7e4c127234ce77decf35d6fea7fe8d', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'e6cbc238c9c0cf8e8c31d0347a1f621272a94ca6' }))), this.helperText && index.h("div", { key: '432d405ee7338da46509ff207599b882a19ea44e', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: 'b9f6211fec35e7c03cc9c462cb1f8eb60fc6c96c' }, index.h("div", { key: '43d22daa1492f87f89f9479687b82ee893f10faa', class: "select-wrapper" }, index.h("label", { key: 'cf399d80e31a345cea60286db4aea2d7dd7973d1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '6bdd8e0d652f126eb1c64c2a647ac0816cc61b05', "aria-hidden": "true" }, " *")), index.h("div", { key: '5d8497c64e197a71003a0c8e11149993fcefd684', "aria-hidden": "true" }, index.h("span", { key: '95b73705ad81d000ce415a377002e4ae4d63aae6' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '2ff855f0fa89d3c66c59a176f855fdbf18ecb6c2', "aria-hidden": "true" }, " *")), index.h("span", { key: 'a66d4ec65c95b1463223c07aecb17d65a45c6b24' }, index.h("img", { key: '4cd21532ff13a3ecbd229cd79d0a3fa7b3eafc60', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '2a9e46e29f8ef7d116989b58abfacee840dd2275', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && index.h("option", { key: '5c5fa4d5e3b120a0085f6fc408d20a56f6547441', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: 'e11909e901624af7d9d5275f2e9715007960eab9' }))), this.helperText && index.h("div", { key: 'fa0d06d3294f303081fd5ffb9aeaff6a8e297901', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

package/cjs/loader.cjs.js

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

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

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

package/collection/api/ds.constants.js

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

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

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

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

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

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

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

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

@@ -1,3 +1,86 @@
 :host {
-  display: block;
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
+
+  padding-block: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  border: 1px solid var(--lmvz-chip-border-color);
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+    Router);
+  background-color: var(--lmvz-chip-background-color);
+  color: var(--lmvz-chip-foreground-color);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+
+  /* enable truncated content */
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+
+  > .content-overflow-wrapper {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+:host([size='small']) {
+  padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
+    Router);
+  gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+}
+
+::slotted(*) {
+  /* non-inline contents are forbidden for chips */
+  /* TODO: validate using ARIA validation tooling, instead of overriding styles */
+  display: inline;
+  white-space: inherit;
+}
+
+::slotted(lmvz-icon) {
+  --lmvz-component-color: var(--lmvz-chip-foreground-color);
+  --lmvz-component-size: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+}
+
+:host([size='small']) ::slotted(lmvz-icon) {
+  --lmvz-component-size: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+}
+
+:host([type='active']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+
+:host([type='warning']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+}
+
+:host([type='success']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+}
+
+:host([type='error']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+
+:host([type='neutral']) {
+  --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-neutral-subtle, #d4d4d4);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-neutral, #fcfcfc);
+  --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-neutral, #545454);
 }

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

@@ -1,8 +1,54 @@
+import { debounce } from "@lmvz-ds/lib-ts/stream/debounce.js";
 import { Host, h } from "@stencil/core";
-export class LmvzChip {
-    text;
+import { chipSizes, chipTypes } from "../../api/ds.constants.js";
+import { AriaValidationController, isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+export class LmvzChip extends ReactiveControllerHost {
+    ariaValidationController = new AriaValidationController(this);
+    beforeSlot;
+    defaultSlot;
+    afterSlot;
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    type = 'active';
+    size = 'default';
+    constructor() {
+        super();
+        this.addController(this.ariaValidationController);
+    }
+    normalizeType(value) {
+        const normalizedType = chipTypes.includes(value) ? value : 'active';
+        if (normalizedType !== this.type) {
+            this.type = normalizedType;
+        }
+    }
+    normalizeSize(value) {
+        const normalizedSize = chipSizes.includes(value) ? value : 'default';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeType(this.type);
+        this.normalizeSize(this.size);
+        super.componentWillLoad();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.checkContent();
+    }
+    checkContent = debounce(() => {
+        if (!isAriaValidationEnabled)
+            return;
+        const elements = [...(this.beforeSlot?.assignedElements() ?? []), ...(this.defaultSlot?.assignedElements() ?? []), ...(this.afterSlot?.assignedElements() ?? [])];
+        if (!elements.length) {
+            console.warn('LmvzChip has no assigned content. Please add content to the default slot or the before-text/after-text slots.');
+        }
+    }, 500);
     render() {
-        return h(Host, { key: '134d510fe3a04b989b0005bf31358149a9661cb2' }, this.text);
+        return (h(Host, { key: 'd34b677a3f6ac2cdb53453c774badb837a3b9e25', type: this.type, size: this.size }, h("slot", { key: 'c6f8beea28cd847f8d8b7c7a075c774f58e39262', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'be784ef977bc1d0eae2fd2d9377642636bd325bc', class: "content-overflow-wrapper" }, h("slot", { key: '3730f2902bcae7917979dedd91264670fbff00de', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: 'f827a03e407385c7bdfd483073453d97f6f73afb', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -18,25 +64,76 @@ export class LmvzChip {
     }
     static get properties() {
         return {
-            "text": {
+            "type": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Chip.Type",
+                    "resolved": "\"active\" | \"error\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "Chip": {
+                            "location": "import",
+                            "path": "../../api/ds.constants.js",
+                            "id": "src/api/ds.constants.ts::Chip",
+                            "referenceLocation": "Chip"
+                        }
+                    }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "'active'"
+                        }],
+                    "text": "Semantic variant of the chip.\nInvalid values are normalized to `active` at runtime."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "text"
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'active'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Chip.Size",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {
+                        "Chip": {
+                            "location": "import",
+                            "path": "../../api/ds.constants.js",
+                            "id": "src/api/ds.constants.ts::Chip",
+                            "referenceLocation": "Chip"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "Size variant of the chip.\nInvalid values are normalized to `default` at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'default'"
             }
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "normalizeType"
+            }, {
+                "propName": "size",
+                "methodName": "normalizeSize"
+            }];
+    }
 }

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

@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '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" }))));
+        return (h(Host, { key: '74061d97a6d4cdec1f445a91b9e819bb12565681', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'af7f08ff48a20b7d36df5ee233da7027cd30a047', class: "brand" }, h("slot", { key: '46be4fcf2798ac374ac967bc2742260c4d7e082b', name: "brand" }, h("img", { key: '3ee79f9732758a6ca5dd6e8264c67707917b358b', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '8f37883454544a384bb35a151c4e24bb12c35f40', "aria-label": "Hauptnavigation" }, h("div", { key: 'a3166ad7e924dd72148d05c01160c889c8f07529', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'aa600791e4d8f3463fefbc3b366831e3b3a3eaac', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '6471256967f4d14c454205a330b2a97ecfcad7a8', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '1b9b461b958e76184938a1c65d032b296894e2dd', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '019d87472272df09ce99eeed405771229f326f1a', class: "actions" }, h("slot", { key: '18035fb0a51a26c96dc687547d17d57118a88e87', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }
@@ -132,7 +132,7 @@ export class LmvzHeader extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Id of the currently active primary navigation item.\nAlso determines which `connect-nav-*` secondary slot is shown."
                 },
                 "getter": false,
                 "setter": false,

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

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

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

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

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

@@ -150,9 +150,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '9de2e4dd202edc937e96ff6ebdc8d0270851c4ca', class: classNames('input-container', {
+        return (h("div", { key: '22be29e5fcd4976fc6c4d125781be00acef0b359', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, 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)));
+            }) }, h("div", { key: 'ffeb620419316976e800b16b4a9fd9538f1efd26', class: "input-wrapper" }, h("slot", { key: '2a1a67f7fde0232b2bb5ce3cc228b869e5ac3516', name: "before-input" }), h("div", { key: '3bbe623cae67d376c60a28306164293a712b1bb5', class: "label-input-group" }, h("label", { key: 'c260b3eb249d5c785fe3b6e223c7428a8c147f50', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'f43dd77efe7e319428dd72ec8933b7587635e767', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'eeb821a74a5ac7aab3fab65a48a37d21a22744e6', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'dd36a212c05c43ab2a8249750c14a7475b6d65d3', name: "after-input" })), h("div", { key: 'c2aedd67036faf4d3dc459c3c1fab8d07ee5a991', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '01d2a6d6df9b3804a595711c7b57b6177d311c39', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -701,7 +701,7 @@ export class LmvzInput extends ReactiveControllerHost {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted whenever the input value changes.\nEvent detail contains the current value."
                 },
                 "complexType": {
                     "original": "string",
@@ -729,7 +729,7 @@ export class LmvzInput extends ReactiveControllerHost {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the value programmatically and emits `lmvzInput` with the new value.",
                     "tags": []
                 }
             },