@lmvz-ds/components 0.27.1 → 0.28.1

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BCFBLj0e.js');
+var index = require('./index-TGsVZNDP.js');
 var listKeyboardController = require('./list-keyboard-controller-CzZdPBeH.js');
 var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
 require('./component-C7cavwmZ.js');
@@ -240,7 +240,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (index.h(index.Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (index.h(index.Host, { key: '5f15ece5a15ef010e84c169171acc3647386ac76', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '38fca070606c4e15fe3218d818c9c271619088c6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'a18f16a5fbcd5bdd7694abfd362cd601e852b546', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '2d84a819e13e658a677835e629e057f7a19556a0', part: "panels-container", class: "panels-container" }, index.h("slot", { key: 'e66d34d3f861b23700ad5a29076744fa1f93a5f2', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-BCFBLj0e.js');
-var ariaValidationController = require('./aria-validation-controller-BMV2tv9-.js');
+var index = require('./index-TGsVZNDP.js');
+var ariaValidationController = require('./aria-validation-controller-Z4TtOp2l.js');
 var component = require('./component-C7cavwmZ.js');
 var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
 require('./aria-loader-BRo2FTGh.js');
@@ -82,7 +82,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, index.h("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, index.h("input", { key: 'afe04f4305744b3110092f9bfcbe8b4ee6f21c37', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '0b0266a50b2307a13c635ee1a2c1b7e44cacccb4' }, index.h("span", { key: 'e8cf4c4e35e013627bb6eeb4b7bae46060c3a846', class: "track" }, index.h("input", { key: '6dc43e819aa89c5b6394c3d2eed0e8852213766a', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), index.h("span", { key: '7e57a501ebcb9f560d0a03c35dbaa7744933246b', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '0e8d733132e72593048ce3eb1f8c2049f3420b2a', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BCFBLj0e.js');
+var index = require('./index-TGsVZNDP.js');
 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-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["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-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":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],"size":[513],"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-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["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}]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[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}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message.cjs",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["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-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":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],"size":[513],"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-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"size":[513],"highlighted":[516],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-spinner.cjs",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[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}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/warning-WEX_ABWL.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const infoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyIDJDNi40NzcxNSAyIDIgNi40NzcxNSAyIDEyQzIgMTcuNTIyOCA2LjQ3NzE1IDIyIDEyIDIyQzE3LjUyMjggMjIgMjIgMTcuNTIyOCAyMiAxMkMyMiA2LjQ3NzE1IDE3LjUyMjggMiAxMiAyWk0xMiA3QzExLjQ0NzcgNyAxMSA3LjQ0NzcyIDExIDhDMTEgOC41NTIyOCAxMS40NDc3IDkgMTIgOUMxMi41NTIzIDkgMTMgOC41NTIyOCAxMyA4QzEzIDcuNDQ3NzIgMTIuNTUyMyA3IDEyIDdaTTExIDExQzEwLjQ0NzcgMTEgMTAgMTEuNDQ3NyAxMCAxMkMxMCAxMi41NTIzIDEwLjQ0NzcgMTMgMTEgMTNWMTZDMTEgMTYuNTUyMyAxMS40NDc3IDE3IDEyIDE3SDEzQzEzLjU1MjMgMTcgMTQgMTYuNTUyMyAxNCAxNkMxNCAxNS40NDc3IDEzLjU1MjMgMTUgMTMgMTVWMTJDMTMgMTEuNDQ3NyAxMi41NTIzIDExIDEyIDExSDExWiIvPgo8L3N2Zz4K';
+
+const warningSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjI4NjQgMy4wNDkzOEMxMS4wMzgwIDEuNjUwMjEgMTIuOTYyMCAxLjY1MDIxIDEzLjcxMzYgMy4wNDkzOEwyMi42NjY4IDE5LjI0OTRDMjMuNDAyNiAyMC42MTYxIDIyLjQ1ODggMjIuMjUwMCAyMC45NTMyIDIyLjI1MDBIMy4wNDY4MEMxLjU0MTIwIDIyLjI1MDAgMC41OTc0MTAgMjAuNjE2MSAxLjMzMzIwIDE5LjI0OTRMMTAuMjg2NCAzLjA0OTM4Wk0xMiA4QzExLjQ0NzcgOCAxMSA4LjQ0NzcyIDExIDlWMTRDMTEgMTQuNTUyMyAxMS40NDc3IDE1IDEyIDE1QzEyLjU1MjMgMTUgMTMgMTQuNTUyMyAxMyAxNFY5QzEzIDguNDQ3NzIgMTIuNTUyMyA4IDEyIDhaTTEyIDE2QzExLjQ0NzcgMTYgMTEgMTYuNDQ3NyAxMSAxN0MxMSAxNy41NTIzIDExLjQ0NzcgMTggMTIgMThDMTIuNTUyMyAxOCAxMyAxNy41NTIzIDEzIDE3QzEzIDE2LjQ0NzcgMTIuNTUyMyAxNiAxMiAxNloiLz4KPC9zdmc+Cg==';
+
+exports.infoSvg = infoSvg;
+exports.warningSvg = warningSvg;

package/collection/api/ds.constants.js

@@ -4,10 +4,12 @@ export const sizes = ['xs', 'sm', 'md', 'lg'];
 export const textSizes = [...sizes, 'xl'];
 export const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
 export const inputSizes = ['sm', 'md', 'lg'];
+export const selectSizes = scaleValues;
 export const iconSizes = [...sizes, 'inherit'];
 export const iconWeights = ['thin', 'medium', 'bold'];
 export const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
 export const chipSizes = ['default', 'small'];
+export const messageTypes = ['neutral', 'warning'];
 export const snackbarStatuses = ['success', 'warning', 'error'];
 export const snackbarPriorities = ['low', 'normal', 'high'];
 export const snackbarDismissReasons = ['timeout', 'manual', 'action', 'overridden', 'swallowed'];

package/collection/assets/icons/chevron-down.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.3334 8.66663L12.0001 17L3.66675 8.66663" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.3334 8.66663L12.0001 17L3.66675 8.66663" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/collection/collection-manifest.json

@@ -10,10 +10,12 @@
     "components/lmvz-icon/lmvz-icon.js",
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
+    "components/lmvz-message/lmvz-message.js",
     "components/lmvz-modal/lmvz-modal.js",
     "components/lmvz-radio/lmvz-radio.js",
     "components/lmvz-select/lmvz-select.js",
     "components/lmvz-snackbar/lmvz-snackbar.js",
+    "components/lmvz-spinner/lmvz-spinner.js",
     "components/lmvz-tab/lmvz-tab.js",
     "components/lmvz-tabs/lmvz-tabs.js",
     "components/lmvz-toggle/lmvz-toggle.js",

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

@@ -0,0 +1,50 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+
+  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+
+  border: var(--lmvz-semantic-border-width-default, 1px) solid;
+  border-radius: var(--lmvz-semantic-border-radius-md, 6px);
+
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+}
+
+/* neutral maps to status-active tokens to preserve Figma's "neutral" naming convention;
+   the design system token uses "active" for the neutral/informational status colour role */
+
+:host([type='neutral']) {
+  background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
+  border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
+  color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+
+:host([type='warning']) {
+  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
+  color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+}
+
+.leading-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  /* 2px raw value — parity row TM-1: icon optical alignment offset; no token exists for
+     sub-4px micro-adjustments in the current token scale */
+  padding-top: 2px;
+  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));
+}
+
+.leading-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.message {
+  flex: 1;
+}

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

@@ -0,0 +1,240 @@
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { Host, h } from "@stencil/core";
+import { isAriaValidationEnabled } from "../..";
+import closeSmSvg from "@lmvz-ds/icons/assets/close-sm.svg";
+import infoSvg from "@lmvz-ds/icons/assets/info.svg";
+import warningSvg from "@lmvz-ds/icons/assets/warning.svg";
+const INFO_SVG = toValidSvgStringWithFallback(infoSvg);
+const WARNING_SVG = toValidSvgStringWithFallback(warningSvg);
+const CLOSE_SM_SVG = toValidSvgStringWithFallback(closeSmSvg);
+const TYPE_SVG = {
+    neutral: INFO_SVG,
+    warning: WARNING_SVG,
+};
+const BLOCK_TAGS = new Set([
+    'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE',
+    'CAPTION', 'COLGROUP',
+    'DD', 'DETAILS', 'DIALOG', 'DIV', 'DL', 'DT',
+    'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
+    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HGROUP', 'HR',
+    'LI', 'MAIN', 'MENU', 'NAV',
+    'OL', 'P', 'PRE',
+    'SECTION', 'TABLE', 'TBODY', 'TD', 'TH', 'THEAD', 'TFOOT', 'TR',
+    'UL',
+]);
+export class LmvzMessage {
+    messageSlot;
+    warnedTags = new Set();
+    type = 'neutral';
+    live = 'off';
+    leadingIcon = true;
+    dismissible = false;
+    closeLabel = 'Schliessen';
+    actionLabel;
+    lmvzDismiss;
+    lmvzAction;
+    componentDidLoad() {
+        this.checkSlotContent();
+    }
+    handleDismissClick = () => {
+        this.lmvzDismiss.emit();
+    };
+    handleActionClick = () => {
+        this.lmvzAction.emit();
+    };
+    handleSlotChange = () => {
+        this.checkSlotContent();
+    };
+    checkSlotContent() {
+        if (!isAriaValidationEnabled())
+            return;
+        this.warnedTags.clear();
+        const elements = this.messageSlot?.assignedElements({ flatten: true }) ?? [];
+        for (const el of elements) {
+            const tag = el.tagName;
+            if (BLOCK_TAGS.has(tag) && !this.warnedTags.has(tag)) {
+                console.warn(`[lmvz-message] Block-level element <${tag.toLowerCase()}> is not allowed in the message slot. Only inline content is permitted.`);
+                this.warnedTags.add(tag);
+            }
+        }
+    }
+    render() {
+        const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
+        return (h(Host, { key: '447fd8ce5b2c9cd176eb4408e9e29773364bfcef', role: role }, this.leadingIcon && h("span", { key: '63414bc912e2feda3a553ead42c660953e25d4c4', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '4cbdeffedcb8e8c3b7a267b25d2ab2eef6ad26bb', class: "message" }, h("slot", { key: 'b7b6a462f9ae5571114c8b8876387ee9f97c9903', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '7b4362ef6d69e27cc614b2445daf5f217e8f21ea', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: 'dae3ff6f9f8606811722c08b6465145b542149a1', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '0e5e7e1deef5027e218271c79d04b43f3a3109e1', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+    }
+    static get is() { return "lmvz-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-message.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Message.Type",
+                    "resolved": "\"neutral\" | \"warning\"",
+                    "references": {
+                        "Message": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Message",
+                            "referenceLocation": "Message"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'neutral'"
+            },
+            "live": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'off' | 'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "live",
+                "defaultValue": "'off'"
+            },
+            "leadingIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "leading-icon",
+                "defaultValue": "true"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Schliessen'"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzDismiss",
+                "name": "lmvzDismiss",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzAction",
+                "name": "lmvzAction",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/collection/components/lmvz-message/public.js

@@ -0,0 +1 @@
+export {};

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

@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: '1fbdbb1ab2d3ad423075465108d4ff807d07404e' }, h("dialog", { key: '622dd60366ad594e16471cc8921c97d23af14ccb', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'bcdfbefbd5f380e2bf946aed479d542a33927af1', class: "modal-shell" }, h("header", { key: 'dcd23467473d58b51bddaf613b3ac8c922eecdc6', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'b2aa21fda4a80d2ea003e6ec876c2b74df5d29fd', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b7238e5b24c0822a94087d4ff0567e6406542c73', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '5059671fb4d81c685becd3adb0be52dd92ec4dec', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '498447e60e0e33fc165f39cea35434080e869d3c', icon: closeIconSvg }))), h("div", { key: '39ecefb52d5990cb689b0e4f18a8b6fc501c840d', class: "body" }, h("slot", { key: 'b014d0633c28fb6b399f11f2323e102949548776' })), h("footer", { key: '201dae98bcf810f369d77b7e9f36d7cc71ed5db4', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: 'e4559d383992e059f915670a0874cc3b9ef655a3', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '88b007e139d4a166a2ee886dcd0256293d5d33c9', name: "actions" })))))));
+        return (h(Host, { key: '5fbfbed1ae590e58f32ba47a8c3e1a321d59ba6b' }, h("dialog", { key: '90f0393450eaf0681b54cbb95f79379d951d652a', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'f07319e7cdf70f8d35b9aaabb83d7c284fec2c0f', class: "modal-shell" }, h("header", { key: 'a17ee4e506cef206357d07db1689dd46cf6cab05', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '3695c1c15530a330493fb1d8e990b59ddb246375', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'a2113f68da9c8ad2b697d5b76644533b9b59c664', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '33c6c3339144a0a69d869857b18b950726281d9e', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: 'e680344beebd5ae4a7a24496f5f8113fd6d98187', icon: closeIconSvg }))), h("div", { key: '1798cdc2f930ae04959c8c0630347fb6f9825693', class: "body" }, h("slot", { key: 'eb77bb57b51a5efe18a765a45d4157613f50bbd4' })), h("footer", { key: '4c8c1f12919822af2471c60f78443b539f7a20e8', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '0a26fc145d70d7d95adbd8f3e4c29edabfc12422', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '8d05a256d8b8c28f20f51ea03358522768a15913', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class LmvzRadio extends ReactiveControllerHost {
         this.radioGroupController.setFocused(target);
     }
     render() {
-        return (h(Host, { key: '0226e313fcf4fe3c3cf343cfe0776cf71da169a6' }, h("input", { key: '5bb1f733d2f29217bc7544d8fd24f6b21bedc654', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'ae18f49167d1a2e8e6ec4ceca435e69e3d79f593', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '5dfb65105831a672f2a47952aff987cd45e9b178', class: "dot" })), h("span", { key: 'df148ca52be7e580226d94ff9aef4e3cf5a6182c', class: "content" }, h("label", { key: 'e042c57755eadb64692ace49204dccb1ee03ed1c', htmlFor: this.radioId }, this.label), h("span", { key: 'a90b0bef927dddb39f9e6357adf888e0818a3c5a', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: 'c07af5c7d75b0f0d2c20b3af9ea763bd28e027b5' }, h("input", { key: '2e7fddb7aa5df3f8bc0f1efbd110158680ec45d7', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'a2afc55b85527674e5a18bfc28e194ecc034053a', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: 'd135da1d567743ea98ec5860feda3e6e8013bdb6', class: "dot" })), h("span", { key: '38c83e877135b221260bacdefca3cdb5446a4453', class: "content" }, h("label", { key: '781d9d5544c0cb9d061875ef3674f3c3156f0675', htmlFor: this.radioId }, this.label), h("span", { key: '1ed064b27dea65cbfb1b1bd38a9cb1b7a07de37e', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -46,16 +46,17 @@
 
   padding-top: var(--lmvz-internal-select-floating-label-top-offset);
 
-  /* Component variable mapping */
   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
-  --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
-  --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
-  --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
+  --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
+  --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
+  --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
-  --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  --lmvz-select-height: 40px;
-  --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);
+  --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+  --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem));
   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
   --lmvz-select-label-minimized-padding-x: 4px;
   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
@@ -116,13 +117,27 @@ div[aria-hidden] {
   padding: 0 var(--lmvz-select-padding-x);
   border-radius: var(--lmvz-select-radius);
   background-color: var(--lmvz-select-bg);
+  border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color);
+  box-sizing: border-box;
   cursor: pointer;
   position: relative;
   z-index: 1;
-  transition: background-color 0.15s ease;
+  transition: border-color 0.15s ease;
 }
-:host(:not([disabled])) .select-wrapper:hover div[aria-hidden] {
-  background-color: var(--lmvz-select-bg-hover);
+:host(:not([disabled], [highlighted])) .select-wrapper:hover div[aria-hidden] {
+  border-color: var(--lmvz-select-border-color-hover);
+}
+:host([highlighted]) div[aria-hidden] {
+  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+}
+:host([highlighted]) div[aria-hidden] > span:first-child {
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+}
+:host([highlighted]) label.floating-label {
+  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
 .select-wrapper:focus-within div[aria-hidden] {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
@@ -130,27 +145,29 @@ div[aria-hidden] {
 }
 div[aria-hidden] > span:first-child {
   flex: 1 0 0;
-  font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);
-  font-weight: var(--lmvz-global-font-weight-500, 500);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   color: var(--lmvz-select-text-color);
-  line-height: 1.4;
-  letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Active-selected text color: when a value is selected (not applicable in highlighted state) */
+:host(:not([highlighted])) .select-wrapper.has-value div[aria-hidden] > span:first-child {
+  color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
+}
 div[aria-hidden] > span:last-child {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-img {
-  display: block;
-  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));
+div[aria-hidden] svg {
+  width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  flex-shrink: 0;
 }
-/* Native select – absolutely covers the trigger, invisible, intercepts clicks */
+/* Native select absolutely covers the trigger, invisible, intercepts clicks */
 select {
   appearance: none;
   position: absolute;
@@ -177,3 +194,29 @@ select {
   color: var(--lmvz-select-helper-color);
   line-height: normal;
 }
+:host([size='small']) {
+  --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
+  --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+}
+:host([size='small']) div[aria-hidden] > span:first-child {
+  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+}
+:host([size='small']) div[aria-hidden] svg {
+  width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+}
+:host([size='large']) {
+  --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
+  --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+}
+:host([size='large']) div[aria-hidden] > span:first-child {
+  font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+}
+:host([size='large']) div[aria-hidden] 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));
+}