@lmvz-ds/components 0.39.0 → 0.41.0

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

@@ -6,7 +6,7 @@ var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
 require('./element.util-BlhcwmfR.js');
 require('./aria.constants-DPK5mQEL.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-8-4, 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); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :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-8-6, 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; } `;
+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-8-4, 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); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :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-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
 
 let tabsIdCounter = 0;
 const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -22,7 +22,6 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         listenerTarget: this.tablistEl,
     });
     value;
-    orientation = 'horizontal';
     lmvzChange;
     resolvedValue;
     constructor(hostRef) {
@@ -33,12 +32,11 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
     }
     componentWillLoad() {
         super.componentWillLoad();
-        this.syncOrientation();
     }
     componentDidLoad() {
-        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
-        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
-        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange.bind(this));
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange.bind(this));
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         this.handleTabSlotChange();
         if (this.tablistEl) {
             this.focusController.updateListenerTarget(this.tablistEl);
@@ -46,17 +44,16 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         super.componentDidLoad();
     }
     disconnectedCallback() {
-        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady.bind(this));
         super.disconnectedCallback();
     }
+    handleSlotChangeEvent() {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    }
     handleValueChange(newValue) {
         this.applySelection(newValue);
     }
-    handleOrientationChange() {
-        this.syncOrientation();
-        this.syncFocusTargets();
-        this.syncTabOrientation();
-    }
     async initFocus() {
         this.focusController.initFocus();
     }
@@ -96,23 +93,22 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
     get slottedPanels() {
         return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
     }
-    handleTabSlotChange = () => {
+    handleTabSlotChange() {
         this.syncFocusTargets();
-        this.syncTabOrientation();
         this.wireAriaIds();
         this.applySelection(this.value);
         this.updateIconTabsAttr();
-    };
-    handlePanelSlotChange = () => {
+    }
+    handlePanelSlotChange() {
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
-    };
-    handleTabReady = () => {
+    }
+    handleTabReady() {
         this.syncFocusTargets();
         this.wireAriaIds();
         this.applySelection(this.resolvedValue ?? this.value);
         this.updateIconTabsAttr();
-    };
+    }
     updateIconTabsAttr() {
         this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
     }
@@ -120,34 +116,31 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
         this.focusController.updateElements(buttons);
     }
-    syncOrientation() {
-        this.removeController(this.focusController);
-        this.focusController.hostDisconnected?.();
-        this.focusController = new directionalFocusController.DirectionalFocusController(this, {
-            orientation: this.orientation,
-            manageTabIndex: true,
-            enableHomeAndEnd: true,
-            listenerTarget: this.tablistEl,
-        });
-        this.addController(this.focusController);
-        if (this.el.isConnected) {
-            this.focusController.hostConnected?.();
+    resolvePanelForTab(tab, index, panels) {
+        const panelId = tab.getAttribute('panel');
+        if (panelId) {
+            const matched = panels.find((panel) => panel.id === panelId);
+            if (matched)
+                return matched;
         }
+        return panels[index];
     }
-    syncTabOrientation() {
-        const isVertical = this.orientation === 'vertical';
-        this.slottedTabs.forEach((tab) => {
-            tab.toggleAttribute('vertical', isVertical);
-        });
+    warnIfMixedPanelLinking(tabs) {
+        const hasPanelAttr = tabs.some((tab) => tab.hasAttribute('panel'));
+        const missingPanelAttr = tabs.some((tab) => !tab.hasAttribute('panel'));
+        if (hasPanelAttr && missingPanelAttr) {
+            console.warn("[lmvz-tabs] Mixed panel linking: some lmvz-tab elements have a 'panel' attribute and some do not. Use either id-based or positional linking consistently.");
+        }
     }
     wireAriaIds() {
         const tabs = this.slottedTabs;
         const panels = this.slottedPanels;
         const prefix = `lmvz-tabs-${this.instanceId}`;
+        this.warnIfMixedPanelLinking(tabs);
         tabs.forEach((tab, index) => {
             const tabId = tab.id || `${prefix}-tab-${index}`;
             tab.id = tabId;
-            const panel = panels[index];
+            const panel = this.resolvePanelForTab(tab, index, panels);
             if (!panel)
                 return;
             const panelId = panel.id || `${prefix}-panel-${index}`;
@@ -183,9 +176,12 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
             if (btn)
                 btn.setAttribute('aria-selected', String(isSelected));
         });
-        this.slottedPanels.forEach((panel, index) => {
-            const tab = tabs[index];
-            const isActive = tab?.getAttribute('value') === effectiveValue;
+        const panels = this.slottedPanels;
+        tabs.forEach((tab, index) => {
+            const panel = this.resolvePanelForTab(tab, index, panels);
+            if (!panel)
+                return;
+            const isActive = tab.getAttribute('value') === effectiveValue;
             panel.toggleAttribute('hidden', !isActive);
         });
         const selectedBtn = target.shadowRoot?.querySelector('button');
@@ -250,14 +246,11 @@ const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (index.h(index.Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, index.h("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, index.h("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (index.h(index.Host, { key: 'd6308c13b7e185fa4d1ff8a33c03f2e0e54f55b0', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '319741b6ce2276d9092b22b67dabc2f1f28366c4', role: "tablist", "aria-orientation": "horizontal", class: "tablist", ref: (el) => (this.tablistEl = el) }, index.h("slot", { key: 'bf76b7b1bdce93f47ddbf45309408b1e33a086f6', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '6793f685d90ea8cb4b9862db6a93d7067fcb1d53', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '2af78356ab2727bcd044e827238b0f5a8a30f1b0', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
                 "handleValueChange": 0
-            }],
-        "orientation": [{
-                "handleOrientationChange": 0
             }]
     }; }
 };

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

@@ -86,7 +86,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: 'a0e0272a8457ee6b07a102aa10e5a7c0292a55d9' }, index.h("span", { key: '5d14029bee4b66f5ed2ee1eb189a1d80a68abe3e', class: "track" }, index.h("input", { key: '926b1ca6065750717577ece30e8e78b9004ec0e8', 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: 'bdee06bab6acba72d019134828f7415d7b347c49', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: 'b8eaa9305352f7146bf95bb517766310517d60e6', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '897eea43e268eca68b5955ba823caa49508789be' }, index.h("span", { key: '731c08e74242b06458fdfeba69d4e4aa4ae76cd1', class: "track" }, index.h("input", { key: '3e8ee9f23bc78f2c8110c5057854d199e13755cf', 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: '8d3ec0a9bc6af91b2536865f54a1616ef8753db6', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '121837baf11f9d086e5750b6249264888a3ced7a', 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-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["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-select.cjs",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":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-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"],"initFocus":[64]},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],"initFocus":[64]}]]],["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":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":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":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":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],"initFocus":[64],"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],"getValidationMessage":[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-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],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["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-datepicker.cjs",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["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-select.cjs",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":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-card.cjs",[[769,"lmvz-card",{"size":[1537],"cardTitle":[1,"card-title"],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"]},null,{"size":[{"normalizeSize":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"],"initFocus":[64]},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],"initFocus":[64]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":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":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":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],"panel":[513]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},[[0,"slotchange","handleSlotChangeEvent"]],{"value":[{"handleValueChange":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],"getValidationMessage":[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-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],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover.cjs",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["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/collection/api/ds.constants.js

@@ -9,6 +9,7 @@ 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 cardSizes = ['large', 'small'];
 export const linkTypes = ['internal', 'external'];
 export const messageTypes = ['neutral', 'warning'];
 export const snackbarStatuses = ['success', 'warning', 'error'];

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

@@ -75,234 +75,122 @@ legend {
 
 }
 :host {
-  /** component dependencies */
-  /* * the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable no-invalid-position-at-import-rule */
-  /* stylelint-disable nesting-selector-no-missing-scoping-root */
-
-/**
- * This fragment is meant to be reusable in multiple component types.
- * CAUTION: always wrap the import in a tag selector (ususally button)!
- */
-& {
-  /* the (invalid nested) import will be handled by postcss */
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
-  /* stylelint-disable nesting-selector-no-missing-scoping-root */
-& {
-  /* variables 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 have the default values in scope. */
-
-  /* secondary styling is default, primary is explicit */
-
-  --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, center);
-  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
-
-  box-sizing: border-box; /* to inlclude paddings & border in min-height */
-  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
-  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
-  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
-
-  background-color: var(--lmvz-button-background);
-  color: var(--lmvz-button-color);
-  cursor: pointer;
-  font: var(--lmvz-button-font);
-  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;
-}
-
-
-  & > * {
-    font: inherit;
-    color: inherit;
-  }
-  &: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;
-  }
-  &: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%);
-  }
-  &:not([disabled]):hover {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
-  }
-  &:not([disabled]):active {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-  }
-
-  /* secondary styling is default, primary is explicit */
-
-  &.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);
-  }
-  &.primary:not([disabled], .disabled):hover {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
-  }
-  &.primary:not([disabled], .disabled):active {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
-  }
-  &.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, #a31419));
-  }
-  &.danger:not([disabled], .disabled):hover {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
-    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-  }
-  &.danger:not([disabled], .disabled):active {
-    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
-    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-  }
-  &.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));
-  }
-  &.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));
-  }
-  &.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));
-  }
-
-  &.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.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
-    Router));
-  }
-  &.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));
-  }
-}
-
+  /* Card-local width custom properties. */
+  /* TODO(token-gap): 320px/360px awaiting Supernova correction of --lmvz-card-component-card-minwidth/-maxwidth, see checklist T10 */
+  --lmvz-card-local-min-width: 320px;
+  --lmvz-card-local-max-width: 360px;
+  /* TODO(token-gap): 232px awaiting promotion of figma-only/card/card-sm-max-width to a real token, see checklist T10 */
+  --lmvz-card-local-sm-width: 232px;
 
   display: flex;
-  min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem);
-  max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem);
   flex-direction: column;
   align-items: flex-start;
+  min-width: var(--lmvz-card-local-min-width);
+  max-width: var(--lmvz-card-local-max-width);
 
-  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);
+  border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
   background: var(--lmvz-semantic-color-surface-primary, #ffffff);
+  box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) var(--lmvz-semantic-shadow-l1-1-blur, 4px) 0 var(--lmvz-semantic-color-shadow-l1-default, rgba(120, 120, 128, 0.08));
+  margin-bottom: var(--lmvz-component-card-lg-margin-bottom, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));
+}
+:host([size='small']) {
+  width: var(--lmvz-card-local-sm-width);
+  min-width: 0;
+  max-width: none;
+  border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+  margin-bottom: var(--lmvz-component-card-sm-margin-bottom, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
 * {
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
 }
-.top {
+.image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  align-self: stretch;
+  border-top-left-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+  border-top-right-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);
+}
+:host([size='small']) .image {
+  border-top-left-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+  border-top-right-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);
+}
+.content {
   display: flex;
-  padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   align-self: stretch;
+  gap: var(--lmvz-component-spacing-xs, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+
+  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));
+}
+:host([size='small']) .content {
+  gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+  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));
 }
-.bottom {
+.title-block {
   display: flex;
-  min-width: 150px;
-  padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
+  gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
+}
+/*
+ * Title typography applies identically to the fallback <h3> and any slotted heading (h2-h5); the level is the
+ * consumer's choice, the styling is the card's.
+ *
+ * The fallback <h3> (.card-default-title) lives in the shadow root and is styled directly below.
+ * Slotted headings are consumer-supplied light-DOM children; `::slotted()` is the correct selector
+ * to reach them from within the shadow stylesheet.
+ */
+.card-default-title {
+  margin: 0;
+  overflow-wrap: break-word;
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5
+    Router);
 }
-.title {
+:host([size='small']) .card-default-title {
+  font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+    Router);
+}
+/* Slotted heading typography — large (default) */
+::slotted([slot='card-title']) {
   margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-
-  padding-bottom: var(--lmvz-global-s4, 4px);
   overflow-wrap: break-word;
-  font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4
+}
+/* Slotted heading typography — small */
+:host([size='small']) ::slotted([slot='card-title']) {
+  font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router);
 }
 .description {
-  display: flex;
   margin: 0;
-  padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  align-items: flex-start;
   align-self: stretch;
   white-space: pre-line;
-  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
+  font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router);
 }
-.image-wrapper {
-  aspect-ratio: 4 / 3;
-  width: 100%;
-  background-size: cover;
-  background-position: center;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: var(--lmvz-semantic-border-radius-md, 6px);
+:host([size='small']) .description {
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
+}
+/*
+ * Chip slot: under shadow: true, an empty <slot> is a real flex item in .content's flex column and
+ * would introduce a phantom gap even when nothing is slotted. `display: contents` collapses the
+ * slot element's own box so it contributes no spacing when empty, while still allowing slotted
+ * content to participate in the flex layout normally.
+ */
+slot[name='chip'] {
+  display: contents;
 }
 .actions {
-  margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));
   display: flex;
   align-items: center;
-  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   align-self: stretch;
+  /* Button-row top padding is a separate Figma-specified value (Visual primitives: Button-row top padding, both sizes) that intentionally stacks on .content's flex gap — not an accidental double-count. */
+  padding-top: var(--lmvz-component-spacing-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
 }
-button.primary,
-lmvz-button.primary {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+/* Sizing (padding/gap/min-height/font) is fully driven by lmvz-button's own `scale` prop (default/small), set in the render method - no local overrides needed here. */
+lmvz-button.action {
   flex: 1 0 0;
 }
-/* .overflow-button {
-  anchor-name: --overflow-button;
-} */
-/* menu {
-  position: fixed;
-  position-anchor: --overflow-button;
-
-  inset-block-start: anchor(end);
-  inset-inline-end: anchor(self-end);
-  margin: 5px 0 0 5px;
-} */