@lmvz-ds/components 0.27.0 → 0.28.0

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-TGsVZNDP.js');
+
+const lmvzSpinnerCss = () => `:host{--spinner-size:1rem;display:inline-block;width:var(--spinner-size);height:var(--spinner-size)}:host([size='large']){--spinner-size:2rem;}svg{width:100%;height:100%;transform-origin:center;animation:lmvz-spinner-rotate var(--lmvz-global-duration-slow, 800ms) linear infinite;color:var(--lmvz-semantic-color-border-active, #0f8acc)}circle{fill:none;stroke:currentcolor;stroke-width:var(--lmvz-component-icon-border-width-strong, 1.5px);stroke-linecap:round;stroke-dasharray:75 25;vector-effect:non-scaling-stroke}@keyframes lmvz-spinner-rotate{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){svg{animation:none}}`;
+
+const LmvzSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    size = 'small';
+    ariaLabel;
+    render() {
+        const hasLabel = !!this.ariaLabel?.trim();
+        return (index.h(index.Host, { key: '858398ba87b2d2d6fd0f44c742183a770c233597', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '5fb5c26c17efaaa69300f1c019e0d25a566b53d9', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: '82747f014363570ccf25cfdaba5eac052d1efdf7', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+    }
+};
+LmvzSpinner.style = lmvzSpinnerCss();
+
+exports.lmvz_spinner = LmvzSpinner;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BCFBLj0e.js');
+var index = require('./index-TGsVZNDP.js');
 
 const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } button:focus-visible {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label {   display: contents; } `;
 
@@ -22,7 +22,7 @@ const LmvzTab = class {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (index.h(index.Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, index.h("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, index.h("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), index.h("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (index.h(index.Host, { key: 'f773de6715166e8a321dc7c35f4f7c3e02f7f127' }, index.h("button", { key: '1c58f672e04956295292bb9becfd72e90ce36e6b', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: '9381aeccc14ca81b963f9509f78ca0de420f0596', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: '289feb2180a5b190bc080804841d0a8f84d9ef2d', class: "label" }, index.h("slot", { key: 'df79c890e156883b37d6fbf34f4fbb957e33402c' })), index.h("span", { key: '54d091a18674ffd78e14f5a0da1dc648ffe91e13', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
 };

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: 'f86adf9c3ce7bbe664d34ce8f408df89c719e3b8', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '9188d39f972b77226221b33079d45c77b2b10583', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'a5ec2df3485181ec2eb62b6c479af169371b4006', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '9e57154ddcb069f58e5d457ab6cd275d5bacebd5', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '84cada87d9a7c9f75a4bf16ce5e8437969aadbe9', 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: '3bd8418b3c9161719d419d35f60d26843fb3110f' }, index.h("span", { key: '883a64fb80480e06bb175e626f8224aa6048b8f4', class: "track" }, index.h("input", { key: '21438217a82ab5049e341c7524de71429bd8c8c4', 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: 'b652891bdd0462ac419e2e909a2e3a3e61d60993', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '3d934082c2b1fff11c057e62f5fbd9c9361ce5d4', 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],"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],"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

@@ -3,10 +3,12 @@ export const scaleValues = ['small', 'default', 'large'];
 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 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/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-input/lmvz-input.css

@@ -45,24 +45,45 @@
   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);
-  --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+  --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);
   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);
-  --input-height: 48px; /* From Figma input-size=48 */
-  --input-padding-x: 16px;
+
+  /* Size defaults (md) */
+  --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+  --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
 
   --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
-  --label-floating-scale: 0.85; /* 14px -> 12px approx */
-  --label-minimized-top: -6px;
   --label-minimized-bg: var(--input-bg);
   --label-minimized-padding-x: 4px;
 
   /* Disabled state uses opacity token */
   --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
 }
+/* Size variants */
+:host([size='sm']) {
+  --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
+  --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
+  --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem));
+}
+:host([size='md']) {
+  --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
+  --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+  --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+}
+:host([size='lg']) {
+  --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
+  --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
+}
 .input-container {
   display: flex;
   flex-direction: column;
@@ -79,7 +100,7 @@
   padding: 0 var(--input-padding-x);
   position: relative;
   transition: border-color 0.2s ease;
-  gap: 8px; /* input-gap-x */
+  gap: var(--input-gap);
 }
 :host([disabled]) .input-wrapper {
   opacity: var(--input-disabled-opacity);
@@ -87,7 +108,7 @@
   pointer-events: none;
 }
 .input-container:focus-within .input-wrapper {
-  /* border-color: var(--input-border-color-focus); */
+  border-color: var(--input-border-color-focus);
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
@@ -95,10 +116,6 @@
 :host([error]) .input-wrapper {
   border-color: var(--error-text-color);
 }
-:host([error]):focus-within .input-wrapper {
-  border-color: var(--error-text-color);
-  outline-color: var(--error-text-color);
-}
 /* Hover State - Use CSS pseudo-selector instead of class */
 :host(:not([disabled])) .input-wrapper:hover {
   border-color: var(--input-border-color-hover);
@@ -116,26 +133,26 @@ label {
   top: 50%;
   transform: translateY(-50%);
   color: var(--label-color);
-  font-size: 14px; /* body-md size from Figma */
-  font-family: Router, sans-serif;
+  font-size: var(--input-font-size);
   font-weight: 400;
   pointer-events: none;
   transition: all 0.2s ease-out;
   background-color: transparent;
   padding: 0;
   margin: 0;
-  line-height: normal;
+  line-height: 1.5;
   white-space: nowrap;
 }
 label.floating {
-  top: 0; /* Align to top border area */
-  transform: translateY(-50%) scale(0.85); /* Scale down */
+  top: 0.5em;
+  transform: translateY(-100%);
   transform-origin: left top;
+  font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   background-color: var(--label-minimized-bg);
   padding: 0 var(--label-minimized-padding-x);
   left: -2px; /* Adjust for padding/border visual alignment */
   color: var(--input-text-color); /* Darker when floating */
-  font-weight: 500; /* Medium weight when minimized */
+  font-weight: 400;
 }
 .required-indicator {
   color: var(--error-text-color);
@@ -148,11 +165,11 @@ input {
   height: 100%;
   color: var(--input-text-color);
   font-family: inherit;
-  font-size: 14px;
+  font-size: var(--input-font-size);
   outline: none;
   padding: 0;
   margin: 0;
-  font-weight: 400; /* Regular weight */
+  font-weight: 400;
 }
 input::placeholder {
   color: var(--label-color);
@@ -162,19 +179,17 @@ div:empty {
 }
 [role='status'] {
   padding-top: 8px; /* space-gap-component-input-helper-text */
-  padding-left: 12px; /* input-md-padding-x for helper text indent */
+  padding-left: var(--input-padding-x);
   font-size: 12px;
   color: var(--helper-text-color);
-  font-family: Router, sans-serif;
-  font-weight: 500; /* Medium weight */
+  font-weight: 400;
 }
 [role='alert'] {
   padding-top: 8px;
-  padding-left: 12px;
+  padding-left: var(--input-padding-x);
   font-size: 12px;
   color: var(--error-text-color);
-  font-family: Router, sans-serif;
-  font-weight: 500;
+  font-weight: 400;
 }
 ::slotted(lmvz-button) {
   /* Minimize padding for (icon) buttons due to height constraints */

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

@@ -56,6 +56,7 @@ export class LmvzInput extends ReactiveControllerHost {
     max;
     step;
     form;
+    size = 'md';
     get error() {
         return this.errorFromProp || this.nativeError;
     }
@@ -150,9 +151,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: classNames('input-container', {
+        return (h("div", { key: '4be6846147fec950acad0c0cb8643bfa69233935', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, h("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), h("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, h("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', 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: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), h("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: 'ae9bf8ffd91b73a86c2ebd21af051efe26a1d5fd', class: "input-wrapper" }, h("slot", { key: '36b3f7d97a11296aeead44c4d8ab4f0f8edf62d1', name: "before-input" }), h("div", { key: '4320f461ffa908730cd898863f43644aa3677081', class: "label-input-group" }, h("label", { key: '1dd51cf16f064303fd9c5249cbe3a357c7515ddc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '74bb8124b1126501201eb7c3361c6cf7f17dda5c', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '9cff77bea65c50331a6804d7039672bbe01e710c', 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: '689a3aa53e22f89173893adbc72eaf4953a2c7f6', name: "after-input" })), h("div", { key: 'd29b9ea209c138d0de09f71042f539a56ed4f9fa', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '8be227367abadb0e001d9475f0793aed31dbb64a', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }
@@ -663,6 +664,36 @@ export class LmvzInput extends ReactiveControllerHost {
                 "reflect": false,
                 "attribute": "form"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Input.Size",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "Input": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.d.ts::Input",
+                            "referenceLocation": "Input"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'md'"
+                        }],
+                    "text": "Size variant of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
             "error": {
                 "type": "boolean",
                 "mutable": false,

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;
+}