@lmvz-ds/components 0.22.1 → 0.23.0

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-lW-SEvL7.js');
-var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
+var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
 var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
-require('./aria-loader-Cec1zR2g.js');
+require('./aria-loader-BRo2FTGh.js');
 
 const lmvzMenuitemCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-menuitem-h {   display: inline-flex;   flex-direction: row;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   cursor: pointer;    --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);    background: var(--lmvz-menuitem-background);   color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover {   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active {   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible {      z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h {   --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f1f9fe);   --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); }`;
 
@@ -28,7 +28,7 @@ const LmvzMenuItem = class extends reactiveControllerHost.ReactiveControllerHost
         this.addController(new elementActivationController.ElementActivationController(this));
     }
     render() {
-        return (index.h(index.Host, { key: 'a87116fba2d35c612e590c6b4e12c03b60d1ef0e' }, index.h("slot", { key: 'b302049db0b5818d4d7f90c043eb5c3caf48ca1b', ref: (e) => (this.validationSlot = e) })));
+        return (index.h(index.Host, { key: '3a722fe1fbacabd99ac5a5bd23537a1ff383fb95' }, index.h("slot", { key: 'e475dd50bbd2f9f349edb61766a0b21c1fb1ae16', ref: (e) => (this.validationSlot = e) })));
     }
 };
 LmvzMenuItem.style = lmvzMenuitemCss();

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

@@ -2,14 +2,14 @@
 
 var index = require('./index-lW-SEvL7.js');
 var svg = require('./svg-BMBduILB.js');
-var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
+var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
 var component = require('./component-C7cavwmZ.js');
-var ariaLoader = require('./aria-loader-Cec1zR2g.js');
 require('./logger-DsM6xg6V.js');
+require('./aria-loader-BRo2FTGh.js');
 
 const closeSmSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgNkwxMiAxMk0xMiAxMkwxOCAxOE0xMiAxMkw2IDE4TTEyIDEyTDE4IDYiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==';
 
-const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {   display: contents;   color: var(--lmvz-semantic-color-on-surface-primary, #000000);    --lmvz-modal-shell-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));   --lmvz-modal-shell-gap: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));   --lmvz-modal-actions-gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-modal-viewport-padding: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));       --lmvz-modal-shell-max-width: 40rem; } dialog {   border: none;   padding: 0;   background: transparent;   color: var(--lmvz-semantic-color-on-surface-primary, #000000); } dialog::backdrop {         background: rgba(0, 0, 0, 0.19);   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.19); } .modal-shell {   display: flex;   flex-direction: column;   gap: var(--lmvz-modal-shell-gap);   inline-size: min(calc(100vw - (2 * var(--lmvz-modal-viewport-padding))), var(--lmvz-modal-shell-max-width));   max-inline-size: 100%;   padding: var(--lmvz-modal-shell-padding);   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);      overflow: auto; } .header {   display: flex;   align-items: flex-start;   justify-content: flex-end;   gap: var(--lmvz-modal-shell-gap); } .title {   min-inline-size: 0;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4     Router); } .has-title .title {   flex: 1 1 auto; } .body {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .actions {   display: flex;   flex-wrap: wrap;   justify-content: flex-end;   gap: var(--lmvz-modal-actions-gap);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);    } .close-button {   display: inline-flex;   flex: none; } ::slotted([slot='actions'][hidden]) {   display: none; } `;
+const lmvzModalCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  } :host {   display: contents;       --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog {   border: none;   padding: 0;   background: transparent; } dialog::backdrop {         background: rgba(0, 0, 0, 0.19);   background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell {   position: relative;   display: flex;   flex-direction: column;   inline-size: fit-content;   max-inline-size: clamp(40rem, 100%, 80vw);   gap: var(--lmvz-modal-shell-gap);   padding-block: var(--lmvz-component-modal-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem));   padding-inline: var(--lmvz-component-modal-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));   border-radius: var(--lmvz-component-modal-border-radius, 18px);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);      overflow: auto;    .close-button {     position: absolute;     top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));     right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));   } } @media (min-width: 768px) {   .modal-shell {     max-inline-size: 100vw;   } } .header {   display: flex;   align-items: flex-start;   justify-content: flex-end;   gap: var(--lmvz-modal-shell-gap); } .title {   min-inline-size: 0;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.4     Router); } .has-title .title {   flex: 1 1 auto; } .body {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } `;
 
 const closeIconSvg = svg.toValidSvgStringWithFallback(closeSmSvg);
 let modalIdCounter = 0;
@@ -18,16 +18,13 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
     inheritedAriaAttributes = {};
     dialogEl;
     dialogStateObserver;
-    actionsStateObserver;
     headerSlot;
-    actionsSlot;
+    buttonGroupEl;
     closeButtonEl;
     previouslyFocusedElement = null;
     wrappedDialogShowModal;
-    lastActionValidationMessage;
     pendingCloseReturnValue;
     dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
-    hasActions = false;
     hasHeader = false;
     open = false;
     closeLabel = 'Schliessen';
@@ -39,9 +36,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
     get validationEl() {
         return this.dialogEl ?? this.el;
     }
-    get validationSlot() {
-        return this.actionsSlot;
-    }
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -72,13 +66,11 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
     }
     componentDidLoad() {
         this.handleHeaderSlotChange();
-        this.handleActionsSlotChange();
         this.observeDialogState();
         this.syncDialogVisibility();
         super.componentDidLoad();
     }
     disconnectedCallback() {
-        this.actionsStateObserver?.disconnect();
         this.dialogStateObserver?.disconnect();
         super.disconnectedCallback();
     }
@@ -110,43 +102,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
         }
         return attributes;
     }
-    get actionButtons() {
-        return (this.actionsSlot?.assignedElements({ flatten: true }) ?? []).filter((element) => {
-            return this.isVisibleActionButton(element);
-        });
-    }
-    get enabledActionButtons() {
-        return this.actionButtons.filter((element) => {
-            return !this.isDisabledActionButton(element);
-        });
-    }
-    get assignedActionElements() {
-        return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
-    }
-    isDisabledActionButton(element) {
-        return element.hasAttribute('disabled') || element.disabled === true;
-    }
-    getActionVariant(element) {
-        const variant = element.getAttribute('variant') ?? element.variant;
-        return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
-    }
-    getActionValidationResult() {
-        if (!this.actionButtons.length) {
-            return {};
-        }
-        const primaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'primary');
-        const secondaryActions = this.actionButtons.filter((element) => this.getActionVariant(element) === 'secondary');
-        const issues = [
-            primaryActions.length !== 1 ? `${primaryActions.length} primary action${primaryActions.length === 1 ? '' : 's'}` : undefined,
-            secondaryActions.length > 1 ? `${secondaryActions.length} secondary actions` : undefined,
-        ].filter((issue) => Boolean(issue));
-        return {
-            errorMessage: issues.length
-                ? `LmvzModal actions slot must contain exactly one primary action, at most one secondary action, and optional tertiary actions. Received ${issues.join(' and ')}.`
-                : undefined,
-            primaryAction: primaryActions[0],
-        };
-    }
     hasAssignedContent(slot) {
         return Boolean(slot?.assignedNodes({ flatten: true }).some((node) => {
             if (node.nodeType === Node.TEXT_NODE) {
@@ -173,9 +128,6 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
             attributeFilter: ['open'],
         });
     }
-    isVisibleActionButton(element) {
-        return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
-    }
     capturePreviouslyFocusedElement() {
         const dialog = this.dialogEl;
         const activeElement = component.getDeepActiveElement(document);
@@ -228,10 +180,7 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
         }
     }
     focusPrimaryAction() {
-        const primaryAction = this.enabledActionButtons.find((element) => {
-            return this.getActionVariant(element) === 'primary';
-        }) ?? this.enabledActionButtons[0];
-        const focusTarget = primaryAction ?? this.closeButtonEl;
+        const focusTarget = this.buttonGroupEl?.primaryEnabledAction ?? this.closeButtonEl;
         if (!focusTarget || typeof window === 'undefined')
             return;
         window.requestAnimationFrame(() => {
@@ -283,60 +232,8 @@ const LmvzModal = class extends reactiveControllerHost.ReactiveControllerHost {
     handleHeaderSlotChange = () => {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
-    observeActionState() {
-        if (typeof MutationObserver === 'undefined')
-            return;
-        this.actionsStateObserver?.disconnect();
-        if (!this.assignedActionElements.length)
-            return;
-        this.actionsStateObserver = new MutationObserver(() => {
-            this.syncActionsState();
-        });
-        this.assignedActionElements.forEach((element) => {
-            this.actionsStateObserver?.observe(element, {
-                attributes: true,
-                attributeFilter: ['disabled', 'hidden', 'variant'],
-            });
-        });
-    }
-    syncActionsState() {
-        const assignedElements = this.assignedActionElements;
-        assignedElements.forEach((element) => {
-            const isAllowedAction = ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
-            if (isAllowedAction)
-                return;
-            if (!element.hasAttribute('hidden')) {
-                element.setAttribute('hidden', '');
-            }
-            if (element.getAttribute('aria-hidden') !== 'true') {
-                element.setAttribute('aria-hidden', 'true');
-            }
-        });
-        this.hasActions = assignedElements.some((element) => this.isVisibleActionButton(element));
-        this.checkActions();
-        if (this.open) {
-            this.focusPrimaryAction();
-        }
-    }
-    handleActionsSlotChange = () => {
-        this.syncActionsState();
-        this.observeActionState();
-    };
-    checkActions() {
-        if (!ariaLoader.isAriaValidationEnabled())
-            return;
-        const { errorMessage } = this.getActionValidationResult();
-        if (!errorMessage) {
-            this.lastActionValidationMessage = undefined;
-            return;
-        }
-        if (this.lastActionValidationMessage === errorMessage)
-            return;
-        console.error(errorMessage);
-        this.lastActionValidationMessage = errorMessage;
-    }
     render() {
-        return (index.h(index.Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, index.h("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, index.h("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), index.h("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, index.h("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), index.h("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, index.h("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
+        return (index.h(index.Host, { key: 'f014c692b82fae6dd96dffdbda4043aa9174004f' }, index.h("dialog", { key: '8939eda4aba44f1b6c9e8983cacddba83f668692', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, index.h("div", { key: '93f43c5f7c258494c86f9604b7eeac0046f912d6', class: "modal-shell" }, index.h("header", { key: '2e8177a5e0812007fede430533e6a0aa9b7bc0ea', class: { header: true, 'has-title': this.hasHeader } }, index.h("div", { key: 'fb4b537386077b837758f4b61c45433ad6c747cc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, index.h("slot", { key: '2507b2b7af3b18e859e87b7d682bdf189c4df53d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), index.h("lmvz-button", { key: '5e4bcd8771babae9a9dc34fc908eb9210639a497', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, index.h("lmvz-icon", { key: '32aada0eea679fd1610eb704ac02cca1f27168ff', icon: closeIconSvg }))), index.h("div", { key: '1dc811f3edcd9ab1611483c90345483fee94b318', class: "body" }, index.h("slot", { key: 'cf870234c54d659cdd85d1a736626707f65cca4a' })), index.h("footer", { key: 'c2ed7badb41a09d1187af2221f33fc2a87bcb606', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, index.h("lmvz-button-group", { key: 'c4846b44ff94b0411d79d88b3bb8447dd2a5967a', ref: (element) => (this.buttonGroupEl = element) }, index.h("slot", { key: '3aa5aa7b3a5d68c5c3c2da1739bee57316db07ff', name: "actions" })))))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,8 +1,8 @@
 'use strict';
 
 var index = require('./index-lW-SEvL7.js');
-var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
-require('./aria-loader-Cec1zR2g.js');
+var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
+require('./aria-loader-BRo2FTGh.js');
 
 const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
 
@@ -58,7 +58,7 @@ const LmvzSelect = class extends reactiveControllerHost.ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (index.h(index.Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, index.h("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, index.h("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), index.h("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, index.h("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), index.h("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, index.h("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), index.h("select", { key: 'b443a08e1436f75af572e102e8d43a9c3d031810', 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: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && index.h("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
+        return (index.h(index.Host, { key: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, index.h("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, index.h("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && index.h("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), index.h("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, index.h("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && index.h("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), index.h("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, index.h("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), index.h("select", { key: '035b19878300ac1f7b04b61157e39587782b44f7', 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: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), index.h("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && index.h("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-lW-SEvL7.js');
-var reactiveControllerHost = require('./reactive-controller-host-DnSTWHCF.js');
+var reactiveControllerHost = require('./reactive-controller-host-BOFg4vL-.js');
 var component = require('./component-C7cavwmZ.js');
-require('./aria-loader-Cec1zR2g.js');
+require('./aria-loader-BRo2FTGh.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('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .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, #f1f9fe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f1f9fe); } [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; } .sc-lmvz-toggle-h:focus-within {      outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);   outline-offset: 2px; } .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, #7a7a7a);   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.4     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
 
@@ -79,7 +79,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '49a543437a842709b6a3bfb00c828a40b227bb57' }, index.h("span", { key: '746292d49c58656336037f7b07a9aaee9dbc6ed1', class: "track" }, index.h("input", { key: 'ae329571344b05d9af814fdc1cc792e1c600d807', 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: 'e5742029679333fcd66a25aeb3f8826dbb3a8956', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '4cb92eb975b8c337162986011497afdeb188ed4f', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: 'b7d3c3d2ae30744669032797b2fefcd1e7fe0b61' }, index.h("span", { key: '93dc128b588e19a5e322cb93efae33669375709a', class: "track" }, index.h("input", { key: '80650720ac6276f7c8996e071d8104e98002e06e', 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: '59838c27a032d7a116faea67fa1dc75cf9ee92cd', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '809057cf268adf05c8163a802a6020dca9b666b9', 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"],"hasActions":[32],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-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_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-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_3.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}],[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/{reactive-controller-host-DnSTWHCF.js → reactive-controller-host-BOFg4vL-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var ariaLoader = require('./aria-loader-Cec1zR2g.js');
+var ariaLoader = require('./aria-loader-BRo2FTGh.js');
 var index = require('./index-lW-SEvL7.js');
 
 class AriaValidationController {

package/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/lmvz-action/lmvz-action.js",
     "components/lmvz-button/lmvz-button.js",
+    "components/lmvz-button-group/lmvz-button-group.js",
     "components/lmvz-card/lmvz-card.js",
     "components/lmvz-checkbox/lmvz-checkbox.js",
     "components/lmvz-chip/lmvz-chip.js",

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

@@ -47,12 +47,17 @@ h6 {
   margin: 0;
 }
 
+*[hidden] {
+  display: none !important;
+}
+
 }
 :host {
   /* * the (invalid nested) import will be handled by postcss */
   /* stylelint-disable-next-line no-invalid-position-at-import-rule */
   button {
-  --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+  /* 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-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
@@ -61,7 +66,7 @@ h6 {
   --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-primary, #000000);
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
 
   display: inline-flex;
   align-items: center;
@@ -108,18 +113,35 @@ button:is([disabled], .disabled) {
 }
 
 button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
 }
 
 button:not([disabled]):active {
+  --lmvz-button-background: 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;
+}
+
+button.primary:not([disabled], .disabled):hover {
+  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+}
+
+button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454);
+  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 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: var(--lmvz-semantic-border-width-default, 1px);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --lmvz-button-border-width: 0;
+  --lmvz-button-border-color: transparent;
 }
 
 button.secondary:not([disabled], .disabled):hover {
@@ -132,12 +154,6 @@ button.secondary:not([disabled], .disabled):active {
   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
-/* button.secondary:is([disabled], .disabled) {
-  --lmvz-button-background: var(--lmvz-global-color-neutral-200);
-  --lmvz-button-border-color: var(--lmvz-global-color-neutral-400);
-  --lmvz-button-color: var(--lmvz-global-color-neutral-700);
-} */
-
 button.tertiary {
   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);
@@ -151,11 +167,6 @@ button.tertiary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
 }
 
-/* button.tertiary:is([disabled], .disabled) {
-  --lmvz-button-background: var(--lmvz-global-color-neutral-100);
-  --lmvz-button-color: var(--lmvz-global-color-neutral-600);
-} */
-
 button.small {
   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
@@ -173,7 +184,7 @@ button.large {
 }
 
 
-  display: contents;
+  display: inline-block;
 }
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-button-color);

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

@@ -15,7 +15,7 @@ export class LmvzButton extends ReactiveControllerHost {
         return 0;
     }
     scale = 'default';
-    variant = 'secondary';
+    variant;
     disabled = false;
     type = 'button';
     form;
@@ -88,7 +88,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '6c44aa8a4b40927313461b5139e88066b855dca6', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '3696f0ad46a03fe9573571b46a56772def87bf53', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '3ecce9c6ae978b72b14a807d93248a4566a13f4b' }))));
+        return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '226f2f4ddbf861a8aed66d72c1980aa713e667f3', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '436ecc98fc7d7350c67d01d13e5fd4566a238b03' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -160,7 +160,7 @@ export class LmvzButton extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "Button.Variant",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\" | undefined",
                     "references": {
                         "Button": {
                             "location": "import",
@@ -171,19 +171,18 @@ export class LmvzButton extends ReactiveControllerHost {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "'secondary', since the primary button should be marked as such in context"
+                            "text": "'secondary'"
                         }],
                     "text": "Variant of the button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'secondary'"
+                "attribute": "variant"
             },
             "disabled": {
                 "type": "boolean",

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

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  justify-content: flex-end;
+  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.4
+    Router);
+
+  /* TODO(LDHCID-135): Action wrapping threshold remains an assumption and currently follows intrinsic content width */
+  flex-wrap: wrap;
+}
+
+::slotted([hidden]) {
+  display: none !important;
+}