@lmvz-ds/components 0.33.0 → 0.34.0

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

@@ -166,7 +166,7 @@ class RadioGroupController {
     }
 }
 
-const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }`;
+const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #e52a31); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }`;
 
 const focusWithinCss = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
 
@@ -315,7 +315,7 @@ const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
         this.radioGroupController.setFocused(target);
     }
     render() {
-        return (index.h(index.Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, index.h("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', 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 }), index.h("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && index.h("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), index.h("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, index.h("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), index.h("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (index.h(index.Host, { key: 'c233b8f8e67016dd9a8622359bd91d3193735438' }, index.h("input", { key: '6a0a028f4ae346b60f86109d33058f7a04f0f2f8', 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 }), index.h("span", { key: 'f86096dd776236e07292dab77a37aeedffb8d8d4', class: "circle", "aria-hidden": "true" }, this.checked && index.h("span", { key: '8e93beefee742af62775d4d5945df8d13adb739f', class: "dot" })), index.h("span", { key: '19df96e6d015d0f74c96781ae49191a542a4f41d', class: "content" }, index.h("label", { key: 'b678b54ca139191ff78d5f503b73ea407eeb0708', htmlFor: this.radioId }, this.label), index.h("span", { key: '4a1e8a60594e959cb5549dd20b3d35a715ce1d99', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -59,7 +59,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, index.h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), index.h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, index.h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), index.h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, index.h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', 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: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && index.h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: 'f1180d4a5f1c30414b06c19314eb75630aa181f7', "data-highlighted": String(this.highlighted) }, index.h("div", { key: '01088c7f3315faab1fb23c99cf8b30f7d59abfc6', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, index.h("label", { key: '34d23292b6b65fac000f822e1e2839e28b1bfee9', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: 'ba171cdd9b53f8fa7b7fcb2c39a0b4aa69940b95', "aria-hidden": "true" }, " *")), index.h("div", { key: '798a6ef187b4aaaa45ecb3d6f94c30e7facb7a38', "aria-hidden": "true" }, index.h("span", { key: '33ea2169d94f4f8cf6263ed0c3bd6a9e593207a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '0ea2d4987587a1a42dfd037dcefeed3f1b3356ef', "aria-hidden": "true" }, " *")), index.h("span", { key: '7bd24b3921cc5cd261f563476a79d61a288d60bb' }, index.h("svg", { key: '9887853724abada1fe36f7225db7903ee6e4040d', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { key: 'b55a82230d46944ca3bd46f00f8c59b1a75ab8b8', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("select", { key: 'd786f49b4522baf4c803ed3046b3606f29d6dae1', 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: '5ffa7ffb7cd79c28a8bd212cc4d123dceb77aad4', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '8a4141ead35cfd07c14d869715397d12ea8b64d7' }))), this.helperText && index.h("div", { key: 'dc5ccd28b0a903f6ed674d994e302caed1d9e9bb', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

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

@@ -67,7 +67,7 @@ const LmvzSnackbar = class {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (index.h(index.Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, index.h("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (index.h(index.Host, { key: '6c2898f187ed9b456dd0c13294eb466270b116cb', class: this.animationClass }, index.h("lmvz-icon", { key: '9b4903f0e2099d44f0ed1773ed23f948b894f603', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), index.h("span", { key: '38163523ce0bba29dbe387e5c808ae9f5f2c2c55', class: "message" }, this.message), this.actionLabel && (index.h("lmvz-button", { key: 'bf5eb3e5075dec7c10f95a46db207ccb3181c88b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get watchers() { return {
         "status": [{

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

@@ -12,7 +12,7 @@ const LmvzSpinner = class {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (index.h(index.Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (index.h(index.Host, { key: '75f8aabfe2eae72d29c5f0aa0663d0c37286ab78', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, index.h("svg", { key: 'aadf9daaa1f363752e08eed3136fc8a8f15d3bdf', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, index.h("circle", { key: 'e658f4be70b5bd03b3828071cbce977576afa3c8', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
 };
 LmvzSpinner.style = lmvzSpinnerCss();

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

@@ -22,7 +22,7 @@ const LmvzTab = class {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (index.h(index.Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, index.h("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, index.h("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), index.h("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (index.h(index.Host, { key: '6bb908c4956e84cd344fc8e81b400d33bb2dce98' }, index.h("button", { key: 'fbc5b650c9bfb5653d17f9a66a14ffbf0fe87f83', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: 'a16da4d11ecca9db3d03da3b0076b698295ead1f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'e9e83fd4aa556716af3c7b7e52e1e1d8a5a33061', class: "label" }, index.h("slot", { key: 'a4c0378e62d67d7bcc772ff6a77ae1a86f41208c' })), index.h("span", { key: 'de03b763d99f55b8773334df3d18c2d3855de4de', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
 };

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-TGsVZNDP.js');
-var listKeyboardController = require('./list-keyboard-controller-StN6Yn8W.js');
+var listKeyboardController = require('./list-keyboard-controller-Dm5S_l0D.js');
 var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
-require('./element.util-Cq4y-_iX.js');
+require('./element.util-Dbyc8yUG.js');
 
 const lmvzTabsCss = () => ` @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; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  :host([orientation='vertical']) .tablist {   flex-direction: column;   overflow: visible auto; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
 
@@ -240,7 +240,7 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (index.h(index.Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (index.h(index.Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -3,10 +3,11 @@
 var index = require('./index-TGsVZNDP.js');
 var ariaValidationController = require('./aria-validation-controller-BC0Eaiv4.js');
 var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
-var stencil_util = require('./stencil.util-DzvzXSwk.js');
+var stencil_util = require('./stencil.util-DxdYjVoH.js');
 require('./aria-loader-DWUVcapD.js');
+require('./async.util-BQ60l-WC.js');
 
-const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
+const lmvzToggleCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
 
 const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
 
@@ -82,7 +83,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, index.h("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, index.h("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', 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: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '901f821ddae696fe877435bf20d08e4032cd61ee' }, index.h("span", { key: 'bbac0ab3e40e426be511cc49a0dcb2497edd7a9a', class: "track" }, index.h("input", { key: '1df7a78df28517189f690c6d453193e30d97d9ea', 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: 'e975c1c280983355f2504fba15553a9f19e4216f', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '09b3305a1d0d6c116310cf88d1f8a92f6856f57e', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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-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-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":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-action-list.cjs",[[774,"lmvz-action-list",{"label":[1]}]]],["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",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[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-link.cjs",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":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-action-list.cjs",[[774,"lmvz-action-list",{"label":[1]}]]],["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-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"label":[1],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":0}]}]]],["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",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[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/{stencil.util-DzvzXSwk.js → stencil.util-DxdYjVoH.js}

@@ -1,21 +1,13 @@
 'use strict';
 
-const raf = (h) => {
-    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-        return __zone_symbol__requestAnimationFrame(h);
-    }
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(h);
-    }
-    return setTimeout(h);
-};
+var async_util = require('./async.util-BQ60l-WC.js');
 
 const componentOnReady = (stencilEl, callback) => {
     if (hasLazyBuild(stencilEl)) {
         stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
     }
     else {
-        raf(() => callback(stencilEl));
+        async_util.raf(() => callback(stencilEl));
     }
 };
 const hasLazyBuild = (stencilEl) => {

package/collection/api/ds.constants.js

@@ -1,4 +1,4 @@
-export const variants = ['primary', 'secondary', 'tertiary'];
+export const variants = ['primary', 'secondary', 'tertiary', 'danger'];
 export const scaleValues = ['small', 'default', 'large'];
 export const sizes = ['xs', 'sm', 'md', 'lg'];
 export const textSizes = [...sizes, 'xl'];
@@ -14,3 +14,5 @@ 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'];
+export const popoverPlacements = ['top', 'bottom', 'start', 'end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
+export const popoverSizes = ['sm', 'md', 'lg'];

package/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "components/lmvz-menuitem/lmvz-menuitem.js",
     "components/lmvz-message/lmvz-message.js",
     "components/lmvz-modal/lmvz-modal.js",
+    "components/lmvz-popover/lmvz-popover.js",
     "components/lmvz-radio/lmvz-radio.js",
     "components/lmvz-select/lmvz-select.js",
     "components/lmvz-snackbar/lmvz-snackbar.js",

package/collection/components/lmvz-action-list/lmvz-action-list.css

@@ -30,64 +30,176 @@ hr {
 }
 
 }
-@layer lmvz-ds.components {
-.lmvz-wrapper-card-sm,
-.lmvz-wrapper-card-md,
-.lmvz-wrapper-card-lg {
-  background: var(--lmvz-semantic-color-surface-primary, #ffffff);
-  box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11));
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 15vw;
+
+  /* * the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  button {
+  /* secondary styling is default, primary is explicit */
+  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+     so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
+     They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
+     bundle and lmvz-card) have the default values in scope. */
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
+  --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: var(--lmvz-button-content-justification-override, center);
+  gap: var(--lmvz-button-gap);
+  padding-block: var(--lmvz-button-padding-block);
+  padding-inline: var(--lmvz-button-padding-inline);
+  min-height: var(--lmvz-button-min-height);
+  border-radius: var(--lmvz-button-radius);
+  border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
+  background-color: var(--lmvz-button-background);
+  color: var(--lmvz-button-color);
+  cursor: pointer;
+  font: var(--lmvz-button-font);
+  /* text-align: center; */
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
 }
 
-.lmvz-wrapper-card-sm {
-  padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+button > * {
+  font: inherit;
+  color: inherit;
 }
-.lmvz-wrapper-card-md {
-  padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
-  border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+
+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));
+  position: relative;
+  z-index: 1;
 }
-.lmvz-wrapper-card-lg {
-  padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));
-  border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px);
+
+button:is([disabled], .disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+  /* } */
+
+  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+  /* button:is([disabled], .disabled) { */
+  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
 }
 
+button:not([disabled]):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+}
+
+button:not([disabled]):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+}
+
+button.primary {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+}
+
+button.primary:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
+}
+
+button.primary:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
-:host {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
+
+button.danger {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+}
+
+button.danger:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+}
+
+button.danger:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
+}
+
+button.tertiary {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
+}
+
+button.tertiary:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
+}
+
+button.tertiary:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
+}
+
+button.small {
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+    Router));
+}
+
+button.large {
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+    Router));
+}
+
 
   lmvz-button,
   button {
-    --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff);
-    --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000);
     --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
     --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
     --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
+    --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
+    --lmvz-button-content-justification-override: normal;
 
     width: 100%;
     display: block;
-
-    &:hover {
-      --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
-      --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
-    }
-    &:active {
-      --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
-      --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
-    }
   }
 
-  .lmvz-action-list-item--danger {
-    --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+  button {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
 
-    &:hover {
-      --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2);
-      --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+    &:not([disabled], .disabled):hover {
+      --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+      --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
     }
-    &:active {
-      --lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
-      --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+
+    &:not([disabled], .disabled):active {
+      --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+      --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
     }
   }
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
+import { isLmvzButton } from "../../utils/element/element.util";
 import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 export class LmvzActionList extends ReactiveControllerHost {
     el;
@@ -37,11 +38,18 @@ export class LmvzActionList extends ReactiveControllerHost {
         for (const el of assigned) {
             collectInteractiveButtonsRecursively(el, interactive);
         }
+        for (const it of interactive) {
+            if (!isLmvzButton(it))
+                continue;
+            if (it.variant)
+                continue;
+            it.variant = 'tertiary';
+        }
         this.focusController.updateElements(interactive);
     };
     render() {
         const ariaLabel = this.label || undefined;
-        return (h(Host, { key: '79e2d77c9aca02fb3ef2e58d241664598253334b', role: "menu", "aria-label": ariaLabel, class: "lmvz-wrapper-card-sm" }, h("slot", { key: '941b875a5be536c3d0e2ff9287da5af1a416d356', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
+        return (h(Host, { key: '1180ac5cb2ad83db0279a5cd2ce15d9ab75d03ca', role: "menu", "aria-label": ariaLabel }, h("slot", { key: '479179e7ec42780e73936d50703ff46d48a89efb', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
     }
     static get is() { return "lmvz-action-list"; }
     static get encapsulation() { return "scoped"; }

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

@@ -79,14 +79,14 @@ hr {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router));
   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--lmvz-button-content-justification-override, center);
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
@@ -97,7 +97,7 @@ hr {
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  text-align: center;
+  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -154,21 +154,20 @@ button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
 
-button.secondary {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
-  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+button.danger {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
 }
 
-button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
+button.danger:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fdf1f2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
 }
 
-button.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
+button.danger:not([disabled], .disabled):active {
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #e52a31));
 }
 
 button.tertiary {
@@ -191,7 +190,7 @@ button.small {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
     Router));
 }
 
@@ -200,7 +199,7 @@ button.large {
   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
-  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
 }
 
@@ -211,9 +210,6 @@ button.large {
     width: 100%;
   }
 }
-button {
-  width: 100%;
-}
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-button-color);
 }

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

@@ -162,7 +162,7 @@ export class LmvzButton extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "Button.Variant",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
+                    "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
                     "references": {
                         "Button": {
                             "location": "import",

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

@@ -2,8 +2,7 @@
   display: flex;
   flex-flow: row-reverse wrap;
   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 
   /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
 }