@lmvz-ds/components 0.22.1 → 0.24.0

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -47,21 +51,27 @@ 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));
-  --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));
-  --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4
+  /* 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.4
     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-primary, #000000);
+  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
 
   display: inline-flex;
   align-items: center;
@@ -69,6 +79,7 @@ h6 {
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
+  min-height: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);
@@ -91,8 +102,8 @@ button > * {
 }
 
 button:focus-visible {
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);
+  outline-offset: 2px;
 }
 
 button:is([disabled], .disabled) {
@@ -108,36 +119,45 @@ 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);
+}
+
+button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: 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: 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 {
   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+  --lmvz-button-color: 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-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
 }
 
-/* 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);
@@ -145,35 +165,34 @@ button.tertiary {
 
 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);
 }
 
 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);
 }
 
-/* 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));
-  --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
+  --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.34rem + 0.13vw, 0.5rem));
+  --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.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
     Router);
 }
 
 button.large {
-  --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));
-  --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));
-  --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
-  --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4
+  --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.72rem + 0.13vw, 0.88rem));
+  --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.4
     Router);
 }
 
 
-  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: '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' }))));
     }
     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;
+}

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

@@ -0,0 +1,216 @@
+import { h, Host } from "@stencil/core";
+import { negate } from "@lmvz-ds/lib-ts/stream/negate.js";
+import { isAriaValidationEnabled } from "../..";
+import { canReceiveFocus } from "../../utils/component";
+export class LmvzButtonGroup {
+    actionsSlot;
+    validationMessageCache = [];
+    actionsStateObserver;
+    get primaryEnabledAction() {
+        return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
+    }
+    get hasActions() {
+        return this.assignedButtons.some((element) => isVisible(element) && isActionButton(element) && !isDisabledButton(element));
+    }
+    componentDidLoad() {
+        this.handleActionsSlotChange();
+    }
+    disconnectedCallback() {
+        this.actionsStateObserver?.disconnect();
+    }
+    get assignedElements() {
+        return this.actionsSlot?.assignedElements({ flatten: true }) ?? [];
+    }
+    get assignedButtons() {
+        return this.assignedElements.filter(isActionButton);
+    }
+    get visibleButtons() {
+        return this.assignedButtons.filter(isVisible);
+    }
+    get enabledButtons() {
+        return this.visibleButtons.filter(negate(isDisabledButton));
+    }
+    getActionValidationResult() {
+        if (!this.visibleButtons.length) {
+            return [];
+        }
+        const primaryActions = this.visibleButtons.filter(isPrimaryAction);
+        const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
+        const issues = [];
+        const order = this.visibleButtons.toReversed();
+        if (primaryActions.length !== 1)
+            issues.push('LmvzModal actions slot must contain exactly one primary action.');
+        if (secondaryActions.length > 1)
+            issues.push(`LmvzModal actions slot must 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).');
+            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).');
+        }
+        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).');
+        }
+        return issues;
+    }
+    handleActionsSlotChange = () => {
+        this.observeActionState();
+        this.syncActionsState();
+    };
+    observeActionState() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.actionsStateObserver?.disconnect();
+        if (!this.assignedButtons.length)
+            return;
+        this.actionsStateObserver = new MutationObserver(() => {
+            this.syncActionsState();
+        });
+        this.assignedButtons.forEach((element) => {
+            this.actionsStateObserver?.observe(element, {
+                attributes: true,
+                attributeFilter: ['disabled', 'hidden', 'variant'],
+            });
+        });
+    }
+    syncActionsState() {
+        const assignedElements = this.assignedElements;
+        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.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);
+            if (!element)
+                continue;
+            if (isLmvzButton(element)) {
+                if (!element.getAttribute('variant'))
+                    element.setAttribute('variant', variant);
+            }
+            else {
+                element.classList.add(variant);
+            }
+        }
+        this.focusPrimaryAction();
+    }
+    focusPrimaryAction() {
+        const focusTarget = this.primaryEnabledAction;
+        if (!focusTarget || typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(() => {
+            if (canReceiveFocus(focusTarget)) {
+                focusTarget.focus();
+            }
+        });
+    }
+    checkActions() {
+        if (!isAriaValidationEnabled())
+            return;
+        const issues = this.getActionValidationResult();
+        if (!issues.length) {
+            return;
+        }
+        issues.forEach((issue) => {
+            if (this.validationMessageCache.includes(issue))
+                return;
+            console.warn(issue);
+            this.validationMessageCache.push(issue);
+        });
+    }
+    render() {
+        return (h(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, h("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
+    }
+    static get is() { return "lmvz-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "primaryEnabledAction": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLButtonElement | undefined",
+                    "resolved": "HTMLButtonElement | undefined",
+                    "references": {
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false
+            },
+            "hasActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-actions"
+            }
+        };
+    }
+}
+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';
+}