@lmvz-ds/components 0.20.0 → 0.22.0

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

@@ -0,0 +1,448 @@
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { Host, h } from "@stencil/core";
+import closeIcon from "../../assets/icons/close-sm.svg";
+import { AriaValidationController, isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
+import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/component";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+const closeIconSvg = toValidSvgStringWithFallback(closeIcon);
+let modalIdCounter = 0;
+export class LmvzModal extends ReactiveControllerHost {
+    el;
+    inheritedAriaAttributes = {};
+    dialogEl;
+    dialogStateObserver;
+    actionsStateObserver;
+    headerSlot;
+    actionsSlot;
+    closeButtonEl;
+    previouslyFocusedElement = null;
+    wrappedDialogShowModal;
+    lastActionValidationMessage;
+    pendingCloseReturnValue;
+    dialogTitleId = `lmvz-modal-title-${modalIdCounter++}`;
+    hasActions = false;
+    hasHeader = false;
+    open = false;
+    closeLabel = 'Schliessen';
+    dialogClose;
+    dialogCancel;
+    get dialog() {
+        return this.dialogEl;
+    }
+    get validationEl() {
+        return this.dialogEl ?? this.el;
+    }
+    get validationSlot() {
+        return this.actionsSlot;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this, { validationTiming: 'slot' }));
+    }
+    handleFormDialogSubmit(event) {
+        const form = event.target;
+        const submitter = event.submitter;
+        const isDialogForm = form.method === 'dialog' || submitter?.getAttribute('formmethod') === 'dialog';
+        if (!isDialogForm)
+            return;
+        event.preventDefault();
+        this.dialogEl?.close(submitter?.value ?? '');
+    }
+    connectedCallback() {
+        this.inheritedAriaAttributes = inheritAriaAttributes(this.el, ['role']);
+        Object.defineProperty(this.el, 'dialog', {
+            configurable: true,
+            enumerable: true,
+            get: () => {
+                this.ensureDialogShowModalCapture();
+                return this.dialogEl;
+            },
+        });
+        super.connectedCallback();
+    }
+    componentDidLoad() {
+        this.handleHeaderSlotChange();
+        this.handleActionsSlotChange();
+        this.observeDialogState();
+        this.syncDialogVisibility();
+        super.componentDidLoad();
+    }
+    disconnectedCallback() {
+        this.actionsStateObserver?.disconnect();
+        this.dialogStateObserver?.disconnect();
+        super.disconnectedCallback();
+    }
+    componentDidRender() {
+        if (this.open) {
+            this.focusPrimaryAction();
+        }
+        super.componentDidRender();
+    }
+    handleOpenChange() {
+        this.syncDialogVisibility();
+    }
+    get dialogAccessibilityAttributes() {
+        const attributes = { ...this.inheritedAriaAttributes };
+        delete attributes['aria-label'];
+        delete attributes['aria-labelledby'];
+        if (this.hasHeader) {
+            attributes['aria-labelledby'] = this.dialogTitleId;
+            return attributes;
+        }
+        const inheritedLabelledBy = this.inheritedAriaAttributes['aria-labelledby'];
+        if (typeof inheritedLabelledBy === 'string') {
+            attributes['aria-labelledby'] = inheritedLabelledBy;
+            return attributes;
+        }
+        const inheritedLabel = this.inheritedAriaAttributes['aria-label'];
+        if (typeof inheritedLabel === 'string') {
+            attributes['aria-label'] = inheritedLabel;
+        }
+        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) {
+                return Boolean(node.textContent?.trim());
+            }
+            return node.nodeType === Node.ELEMENT_NODE;
+        }));
+    }
+    observeDialogState() {
+        if (!this.dialogEl || typeof MutationObserver === 'undefined')
+            return;
+        this.dialogStateObserver?.disconnect();
+        this.dialogStateObserver = new MutationObserver(() => {
+            if (!this.dialogEl || this.dialogEl.open === this.open)
+                return;
+            if (this.dialogEl.open) {
+                this.open = true;
+                return;
+            }
+            this.open = false;
+        });
+        this.dialogStateObserver.observe(this.dialogEl, {
+            attributes: true,
+            attributeFilter: ['open'],
+        });
+    }
+    isVisibleActionButton(element) {
+        return element.tagName === 'LMVZ-BUTTON' && !element.hasAttribute('hidden');
+    }
+    capturePreviouslyFocusedElement() {
+        const dialog = this.dialogEl;
+        const activeElement = getDeepActiveElement(document);
+        if (!dialog || !activeElement || dialog.contains(activeElement))
+            return;
+        this.previouslyFocusedElement = activeElement;
+    }
+    ensureDialogShowModalCapture() {
+        const dialog = this.dialogEl;
+        if (!dialog || typeof dialog.showModal !== 'function')
+            return;
+        const showModal = dialog.showModal;
+        if (showModal === this.wrappedDialogShowModal)
+            return;
+        const wrappedShowModal = () => {
+            this.capturePreviouslyFocusedElement();
+            return showModal.call(dialog);
+        };
+        Object.defineProperty(dialog, 'showModal', {
+            configurable: true,
+            value: wrappedShowModal,
+        });
+        this.wrappedDialogShowModal = wrappedShowModal;
+    }
+    syncDialogVisibility() {
+        const dialog = this.dialogEl;
+        if (!dialog)
+            return;
+        if (this.open) {
+            if (!dialog.open) {
+                this.capturePreviouslyFocusedElement();
+                if (typeof dialog.showModal === 'function') {
+                    dialog.showModal();
+                }
+                else {
+                    dialog.setAttribute('open', '');
+                }
+            }
+            this.focusPrimaryAction();
+            return;
+        }
+        if (!dialog.open)
+            return;
+        if (typeof dialog.close === 'function') {
+            dialog.close();
+        }
+        else {
+            dialog.removeAttribute('open');
+            this.handleDialogClose();
+        }
+    }
+    focusPrimaryAction() {
+        const primaryAction = this.enabledActionButtons.find((element) => {
+            return this.getActionVariant(element) === 'primary';
+        }) ?? this.enabledActionButtons[0];
+        const focusTarget = primaryAction ?? this.closeButtonEl;
+        if (!focusTarget || typeof window === 'undefined')
+            return;
+        window.requestAnimationFrame(() => {
+            if (this.open) {
+                focusTarget.focus();
+            }
+        });
+    }
+    restoreFocus() {
+        if (!this.previouslyFocusedElement?.isConnected)
+            return;
+        this.previouslyFocusedElement.focus();
+        this.previouslyFocusedElement = null;
+    }
+    handleCloseButtonClick = () => {
+        if (!this.dialogEl)
+            return;
+        const dialogWithRequestClose = this.dialogEl;
+        if (typeof dialogWithRequestClose.requestClose === 'function') {
+            this.pendingCloseReturnValue = 'close';
+            dialogWithRequestClose.requestClose('close');
+            return;
+        }
+        if (typeof this.dialogEl.close === 'function') {
+            this.dialogEl.close('close');
+            return;
+        }
+        this.handleDialogClose();
+    };
+    handleDialogCancel = (event) => {
+        event.preventDefault();
+        const emitted = this.dialogCancel.emit();
+        if (emitted.defaultPrevented) {
+            this.pendingCloseReturnValue = undefined;
+            return;
+        }
+        const returnValue = this.pendingCloseReturnValue;
+        this.pendingCloseReturnValue = undefined;
+        this.dialogEl?.close(returnValue);
+    };
+    handleDialogClose = () => {
+        console.log('Dialog close handler called');
+        if (this.open) {
+            this.open = false;
+        }
+        this.restoreFocus();
+        this.dialogClose.emit();
+    };
+    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 (!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 (h(Host, { key: 'f319dcb33aaa6426e568fba1bfb6c8c3927432cb' }, h("dialog", { key: '1c5b1659b243a2af19ec5b41d19a2096b522671c', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '2d0260f11a75e28688a14b0263df0d00f8ba54b9', class: "modal-shell" }, h("header", { key: 'd96739e3b0a7f2c04e46585ddf4e431c91a698ce', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: 'f5202ac26195a3571e3767e0d3683c2bc960c2ec', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: '2568ee3465bc070e353e647c58735a34005907d7', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '7978e838dc84ce83ee674aa111523b260d1861da', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '9f235507acbf2ee42747bfc44302fcae47d9ba0e', icon: closeIconSvg }))), h("div", { key: '7eeab9b2f0fd5d41c0218380436e2f092481813a', class: "body" }, h("slot", { key: '8904e87fa438caf2b7f34c4025ff688d94f4dea2' })), h("footer", { key: '0610abd150de228da893092e9f38721087144564', class: "actions", hidden: !this.hasActions }, h("slot", { key: '0f5457cb2544602a3b980f90e7297ed700d62fee', name: "actions", ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange }))))));
+    }
+    static get is() { return "lmvz-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controls the native dialog visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Schliessen'"
+                        }],
+                    "text": "Accessible label for the internal close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Schliessen'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActions": {},
+            "hasHeader": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dialogClose",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the host whenever the native dialog closes so framework wrappers can synchronize bound state."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dialogCancel",
+                "name": "cancel",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Re-emitted from the host whenever the native dialog receives a `cancel` event (e.g. Escape key).\nCall `event.preventDefault()` to keep the dialog open."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "submit",
+                "method": "handleFormDialogSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -50,7 +50,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: '1bdd53df4a33c5292cc072b0a9abc45fa01b237f' }, h("div", { key: 'e38d81e620d8c27cd34e1a7799c42d5640d4b0db', class: "select-wrapper" }, h("label", { key: '3995206b564c7e17ac273709577eb8dd7a3b0ff1', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '7c04028f9ff3e0f365f76d10b0139dc6805f2af4', "aria-hidden": "true" }, " *")), h("div", { key: '7b428d22a32181fc13e837b6821ab163ac286453', "aria-hidden": "true" }, h("span", { key: '385ddb473337869777e835cc5b533f9a41c1fbe3' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'c53036bd718b916b910225297b40df998729650c', "aria-hidden": "true" }, " *")), h("span", { key: '06db17fbe01d9fea9904aa04e72b6cbfc9d93652' }, h("img", { key: 'b4d46ada048e931aa71f2ace33c93ff9fc67e479', src: chevronDownSvg, alt: "" }))), h("select", { key: '841c86f1d340cd36475a7757e9cad5f33aeac710', 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 && h("option", { key: '4bd193f7878da2077c9185cd093d61c62406a7b9', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'c14a15e022f08ad72a5ad9d29befe0db7c6f24db' }))), this.helperText && h("div", { key: '833eaa383f8a9722fd990fadcdff4a93aa0a79df', role: "status" }, this.helperText)));
+        return (h(Host, { key: '4a78608686bd771615d1bd6f5c5df243b813f0a3' }, h("div", { key: 'fc526485d7c1718c0044a8076151954fb0db680d', class: "select-wrapper" }, h("label", { key: '16c68d944b626f06b36c458daa351b05f0d6de92', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '06ea7ab990b1119c726d39620cda2f2f53d6342a', "aria-hidden": "true" }, " *")), h("div", { key: '46e77a996cd17db6e882fdc0f5ac65fb90f71df5', "aria-hidden": "true" }, h("span", { key: '6b1e9f849e7e876f704816de6f55128e3d462587' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'd90c6b965c594a45f6699aaca3bc85de38bf5584', "aria-hidden": "true" }, " *")), h("span", { key: 'd91ce778422521a0b414aceb7161a871023730d9' }, h("img", { key: '3e405cebf0c02d91448c9db412837f4af554c4b2', src: chevronDownSvg, alt: "" }))), 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 && h("option", { key: '7125eccebfb3541522d0461adcf1e203514d8af6', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '80f7edf9e20b19ec8041d23b84752f2cd7c1a72e' }))), this.helperText && h("div", { key: '49cdd7ce54b5bc9031db2ef9826891d6a4f666b1', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,118 @@
+
+@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.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;
+}
+
+}
+:host {
+  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));
+  /* TODO[LDHCID-136]: min-height currently below accessibility requirements for tap targets (44px) */
+  /* min-height: 38px; */
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  cursor: pointer;
+  background-color: transparent;
+  user-select: none;
+}
+:host(:not([disabled]):hover) {
+  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+}
+:host([checked]) {
+  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+}
+:host([disabled][checked]) {
+  background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  pointer-events: none;
+}
+.track {
+  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);
+}
+:host(:not([disabled]):hover) .track {
+  border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
+}
+:host([checked]) .track {
+  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+}
+input {
+  /* visually hidden, keyboard-accessible */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  cursor: inherit;
+}
+:host(:focus-within) {
+  /* TODO[LDHCID-136]: no focus-visible token in DS */
+  outline: 2px solid var(--lmvz-semantic-color-border-active, #0f8acc);
+  outline-offset: 2px;
+}
+.thumb {
+  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);
+  /* TODO[LDHCID-136]: no DS motion/duration token — 0.2s ease from Figma interaction baseline */
+  transition:
+    left 0.2s ease,
+    background-color 0.2s ease;
+  pointer-events: none;
+}
+:host([checked]) .thumb {
+  left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));
+  background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
+}
+label {
+  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;
+}