@lmvz-ds/components 0.30.0 → 0.32.0

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

@@ -0,0 +1,93 @@
+
+@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@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);
+}
+
+}
+@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));
+}
+
+.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);
+}
+.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);
+}
+.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);
+}
+
+}
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  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));
+
+    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);
+
+    &:hover {
+      --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2);
+      --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+    }
+    &: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);
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+import { Host, h } from "@stencil/core";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
+export class LmvzActionList extends ReactiveControllerHost {
+    el;
+    slotEl;
+    get validationEl() {
+        return this.el;
+    }
+    get validationSlot() {
+        return this.slotEl;
+    }
+    focusController = new DirectionalFocusController(this, {
+        orientation: 'vertical',
+        manageTabIndex: true,
+        enableHomeAndEnd: true,
+    });
+    label;
+    constructor() {
+        super();
+        this.addController(this.focusController);
+        this.addController(new AriaValidationController(this, {
+            validationTiming: 'slot',
+        }));
+    }
+    componentDidLoad() {
+        this.handleSlotChange();
+        super.componentDidLoad();
+    }
+    handleSlotChange = () => {
+        const slot = this.slotEl;
+        if (!slot)
+            return;
+        const assigned = slot.assignedElements();
+        const interactive = [];
+        for (const el of assigned) {
+            collectInteractiveButtonsRecursively(el, interactive);
+        }
+        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) })));
+    }
+    static get is() { return "lmvz-action-list"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-action-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-action-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the menu, reflected as `aria-label` on the host Element.\nWhen absent, `aria-label` is not rendered on the host."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+function collectInteractiveButtonsRecursively(el, collection) {
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'lmvz-button') {
+        el.buttonRole = 'menuitem';
+        collection.push(el);
+        return;
+    }
+    if (tag === 'button') {
+        el.setAttribute('role', 'menuitem');
+        collection.push(el);
+        return;
+    }
+    if (tag === 'hr') {
+        return;
+    }
+    if (el.getAttribute('role') === 'group') {
+        const children = el.querySelectorAll('lmvz-button, button');
+        children.forEach((child) => collectInteractiveButtonsRecursively(child, collection));
+        return;
+    }
+    console.warn('Unexpected element encountered in ActionList:', tag);
+}

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

@@ -55,23 +55,34 @@ h6 {
   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 {
   /* * 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-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000));
-  --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
-  --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
-  --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);
-  --lmvz-button-border-width: 0;
-  --lmvz-button-border-color: transparent;
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+  /* --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-body-md-strong, 500 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;
@@ -104,6 +115,8 @@ button > * {
 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;
 }
 
 button:is([disabled], .disabled) {
@@ -119,80 +132,87 @@ button:is([disabled], .disabled) {
 }
 
 button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
+  --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-semantic-color-int-secondary-active, #d4d4d4);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
 }
 
 button.primary {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff);
-  --lmvz-button-border-width: 0;
-  --lmvz-button-border-color: transparent;
+  --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-semantic-color-int-primary-hover, #2e2e2e);
+  --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-semantic-color-int-primary-active, #545454);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
 }
 
 button.secondary {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
-  --lmvz-button-border-width: 0;
-  --lmvz-button-border-color: transparent;
+  --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);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 }
 
 button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000);
+  --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.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
+  --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.tertiary {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+  --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-semantic-color-int-tertiary-hover, #f0f0f0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+  --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-semantic-color-int-tertiary-active, #e0e0e0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+  --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-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
-  --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
-    Router);
+  --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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+    Router));
 }
 
 button.large {
-  --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-  --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
-  --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
-    Router);
+  --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-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+    Router));
 }
 
 
   display: inline-block;
+
+  button {
+    width: 100%;
+  }
+}
+button {
+  width: 100%;
 }
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-button-color);

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

@@ -2,8 +2,8 @@ import { Host, h } from "@stencil/core";
 import classNames from "classnames";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ElementActivationController } from "../../utils/aria/element-activation-controller";
-import { findFormByRef, inheritAriaAttributes } from "../../utils/component";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { findFormByRef, inheritAriaAttributes } from "../../utils/element/element.util";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 export class LmvzButton extends ReactiveControllerHost {
     el;
     validationEl;
@@ -11,8 +11,9 @@ export class LmvzButton extends ReactiveControllerHost {
     formEl = null;
     formButtonEl = null;
     lmvzActivation;
-    get ti() {
-        return 0;
+    ti = 0;
+    resolveFocusableElement() {
+        return this.validationEl;
     }
     scale = 'default';
     variant;
@@ -22,6 +23,7 @@ export class LmvzButton extends ReactiveControllerHost {
     formMethod;
     name;
     value;
+    buttonRole;
     constructor() {
         super();
         this.addController(new AriaValidationController(this));
@@ -31,7 +33,7 @@ export class LmvzButton extends ReactiveControllerHost {
         }));
     }
     connectedCallback() {
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['role']);
         super.connectedCallback();
     }
     disconnectedCallback() {
@@ -88,7 +90,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
+        return (h(Host, { key: 'f3e619dca398c3a8a78e9d2f8c3df4178b2531b2', role: "presentation" }, h("button", { key: 'eb1aac6756a70968d3a72cb40c1d52d96340423e', ref: (e) => (this.validationEl = e), part: "button", role: this.buttonRole, disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '786ff1c10ae05eda646c77ac8779813be6e51949' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -119,7 +121,7 @@ export class LmvzButton extends ReactiveControllerHost {
                     "tags": [],
                     "text": ""
                 },
-                "getter": true,
+                "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "tabindex",
@@ -312,6 +314,25 @@ export class LmvzButton extends ReactiveControllerHost {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
+            },
+            "buttonRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ARIA role applied to the inner `<button>` element.\nWhen set, the host element receives `role=\"presentation\"` so that AT\nsees only one interactive element with the correct role.\nUse `\"menuitem\"` when the button is a child of a `role=\"menu\"` container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-role"
             }
         };
     }

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

@@ -1,14 +1,45 @@
 :host {
   display: flex;
-  justify-content: flex-end;
+  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);
 
   /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
-  flex-wrap: wrap;
+}
+
+:host([stacked]) {
+  flex-flow: column nowrap;
+  align-items: stretch;
+  padding: 0;
+}
+
+:host([stacked]) ::slotted(*) {
+  display: block;
+  width: 100%;
 }
 
 ::slotted([hidden]) {
   display: none !important;
 }
+
+/*
+ * Non-stacked alignment split: push tertiary cluster to the right, primary/secondary stays left.
+ *
+ * OQ-A1 resolution: margin-inline-end: auto is used (not margin-inline-start).
+ * The host uses flex-flow: row-reverse, so the flex main axis runs right→left
+ * (main-start is on the right, main-end is on the left in LTR).
+ * Tertiary buttons appear last in DOM but are rendered leftmost by row-reverse.
+ * Applying margin-inline-end: auto on the tertiary items creates an auto margin on
+ * their inline-end side (right in LTR), which corresponds to the flex main-start
+ * direction — this absorbs all available space between the p/s cluster and the
+ * tertiary cluster, pushing tertiary visually to the right as intended.
+ */
+
+:host(:not([data-only-tertiary], [stacked])) ::slotted([data-first-tertiary]) {
+  margin-inline-end: auto;
+}
+
+:host([data-only-tertiary]:not([stacked])) {
+  justify-content: flex-end;
+}

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

@@ -1,11 +1,13 @@
 import { h, Host } from "@stencil/core";
 import { negate } from "@lmvz-ds/lib-ts/stream/negate.js";
-import { isAriaValidationEnabled } from "../..";
-import { canReceiveFocus } from "../../utils/component";
+import { isAriaValidationEnabled, variants } from "../..";
+import { canReceiveFocus, isActionButton, isDisabledButton, isLmvzButton, isPrimaryAction, isSecondaryAction, isVisible } from "../../utils/element/element.util";
 export class LmvzButtonGroup {
+    el;
     actionsSlot;
     validationMessageCache = [];
     actionsStateObserver;
+    stacked = false;
     get primaryEnabledAction() {
         return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
     }
@@ -37,23 +39,23 @@ export class LmvzButtonGroup {
         const primaryActions = this.visibleButtons.filter(isPrimaryAction);
         const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
         const issues = [];
-        const order = this.visibleButtons.toReversed();
+        const order = this.visibleButtons;
         if (primaryActions.length !== 1)
-            issues.push('LmvzModal actions slot must contain exactly one primary action.');
+            issues.push('LmvzButtonGroup actions slot should contain exactly one primary action.');
         if (secondaryActions.length > 1)
-            issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
+            issues.push(`LmvzButtonGroup actions slot should contain at most one secondary action (received ${secondaryActions.length})`);
         if (primaryActions.length) {
             const primaryAction = primaryActions[0];
             const secondaryAction = secondaryActions[0];
             if (order.indexOf(primaryAction) !== 0)
-                issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
+                issues.push('Primary action should be the first focusable element in the actions slot (i.e. first child of the actions slot).');
             if (secondaryAction && order.indexOf(secondaryAction) !== 1)
-                issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
+                issues.push('Secondary action should be the second focusable element in the actions slot (i.e. immediately after the primary button).');
         }
         else if (secondaryActions.length) {
             const secondaryAction = secondaryActions[0];
             if (order.indexOf(secondaryAction) !== 0)
-                issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
+                issues.push('Secondary action should be the first focusable element in the actions slot when no primary action is present (i.e. first child of the actions slot).');
         }
         return issues;
     }
@@ -91,20 +93,35 @@ export class LmvzButtonGroup {
             }
         });
         this.checkActions();
-        const length = this.visibleButtons.length;
-        for (let i = 0; i < length; i++) {
-            const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
-            const element = this.visibleButtons.at(i);
+        const visibleButtons = this.visibleButtons;
+        const hasNonTertiary = visibleButtons.length > 0 && visibleButtons.some((btn) => isPrimaryAction(btn) || isSecondaryAction(btn));
+        if (visibleButtons.length > 0 && !hasNonTertiary) {
+            this.el.setAttribute('data-only-tertiary', '');
+        }
+        else {
+            this.el.removeAttribute('data-only-tertiary');
+        }
+        this.visibleButtons.forEach((element, i) => {
+            const variant = variants[i] ?? 'tertiary';
             if (!element)
-                continue;
+                return;
             if (isLmvzButton(element)) {
-                if (!element.getAttribute('variant'))
+                if (!element.getAttribute('variant') && !element.variant)
                     element.setAttribute('variant', variant);
             }
             else {
                 element.classList.add(variant);
             }
-        }
+        });
+        const firstTertiary = this.visibleButtons.find((btn) => btn.getAttribute('variant') === 'tertiary');
+        this.visibleButtons.forEach((btn) => {
+            if (btn === firstTertiary) {
+                btn.setAttribute('data-first-tertiary', '');
+            }
+            else {
+                btn.removeAttribute('data-first-tertiary');
+            }
+        });
         this.focusPrimaryAction();
     }
     focusPrimaryAction() {
@@ -132,7 +149,7 @@ export class LmvzButtonGroup {
         });
     }
     render() {
-        return (h(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
+        return (h(Host, { key: '3e8ce38f7e83e201e47d31579f22161ff36247b1' }, h("slot", { key: 'bc953d19b333f51c5f5c5ba86be3a85d155a29d1', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "lmvz-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +165,26 @@ export class LmvzButtonGroup {
     }
     static get properties() {
         return {
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
             "primaryEnabledAction": {
                 "type": "unknown",
                 "mutable": false,
@@ -191,26 +228,5 @@ export class LmvzButtonGroup {
             }
         };
     }
-}
-function isActionButton(element) {
-    return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
-}
-function isLmvzButton(element) {
-    return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
-}
-function isDisabledButton(element) {
-    return element.hasAttribute('disabled') || element.disabled === true;
-}
-function isVisible(element) {
-    return !element.hasAttribute('hidden');
-}
-function getActionVariant(element) {
-    const variant = element.getAttribute('variant') ?? element.variant;
-    return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
-}
-function isPrimaryAction(element) {
-    return getActionVariant(element) === 'primary';
-}
-function isSecondaryAction(element) {
-    return getActionVariant(element) === 'secondary';
+    static get elementRef() { return "el"; }
 }