@lmvz-ds/components 0.24.0 → 0.26.0

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

@@ -0,0 +1,487 @@
+import { h, Host } from "@stencil/core";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { RadioGroupController } from "../../utils/radio/radio-group-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let radioIdCounter = 0;
+export class LmvzRadio extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    internals;
+    nativeInput;
+    radioId = `lmvz-radio-${radioIdCounter++}`;
+    initialChecked = false;
+    radioGroupController;
+    get helperId() {
+        return this.helperText ? `${this.radioId}-helper` : undefined;
+    }
+    label;
+    checked = false;
+    value = 'on';
+    name;
+    disabled = false;
+    required = false;
+    error = false;
+    helperText;
+    form;
+    autofocus = false;
+    _handlingNativeChange = false;
+    _handlingFormReset = false;
+    handleCheckedChange(newVal, oldVal) {
+        this.internals.setFormValue?.(newVal ? this.value : null);
+        if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(false);
+        }
+        if (newVal && !oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
+            this.lmvzChange.emit(true);
+        }
+    }
+    handleValueChange(newVal) {
+        if (this.checked) {
+            this.internals.setFormValue?.(newVal);
+        }
+    }
+    handleLabelChange(newVal) {
+        if (!newVal) {
+            console.warn('[lmvz-radio] label prop is required and must not be empty');
+        }
+    }
+    lmvzChange;
+    lmvzActivation;
+    async focusInput() {
+        this.nativeInput?.focus();
+    }
+    async checkValidity() {
+        return this.internals?.checkValidity() ?? true;
+    }
+    async reportValidity() {
+        return this.internals?.reportValidity() ?? true;
+    }
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this, {
+            reValidateOnPropChanges: true,
+        }));
+        this.radioGroupController = new RadioGroupController(this);
+        this.addController(this.radioGroupController);
+    }
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+        super.componentWillLoad();
+    }
+    formAssociatedCallback() {
+        this.internals.setFormValue?.(this.checked ? this.value : null);
+    }
+    formResetCallback() {
+        this._handlingFormReset = true;
+        try {
+            this.checked = this.initialChecked;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state !== 'string')
+            return;
+        this._handlingFormReset = true;
+        try {
+            this.checked = state === this.value;
+        }
+        finally {
+            this._handlingFormReset = false;
+        }
+    }
+    handleChange = (event) => {
+        this._handlingNativeChange = true;
+        try {
+            const input = event.target;
+            this.checked = input.checked;
+            this.lmvzChange.emit(this.checked);
+            this.radioGroupController.select(this);
+            this.lmvzActivation.emit();
+        }
+        finally {
+            this._handlingNativeChange = false;
+        }
+    };
+    handleKeydown(event) {
+        const { key } = event;
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(key))
+            return;
+        event.preventDefault();
+        const radios = this.radioGroupController.sortedEnabled;
+        if (radios.length === 0)
+            return;
+        const currentIndex = radios.indexOf(this);
+        if (currentIndex === -1)
+            return;
+        let targetIndex;
+        if (key === 'ArrowDown' || key === 'ArrowRight') {
+            targetIndex = (currentIndex + 1) % radios.length;
+        }
+        else if (key === 'ArrowUp' || key === 'ArrowLeft') {
+            targetIndex = (currentIndex - 1 + radios.length) % radios.length;
+        }
+        else if (key === 'Home') {
+            targetIndex = 0;
+        }
+        else {
+            targetIndex = radios.length - 1;
+        }
+        const target = radios[targetIndex];
+        if (!target)
+            return;
+        this.radioGroupController.setFocused(target);
+    }
+    render() {
+        return (h(Host, { key: '0226e313fcf4fe3c3cf343cfe0776cf71da169a6' }, h("input", { key: '5bb1f733d2f29217bc7544d8fd24f6b21bedc654', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'ae18f49167d1a2e8e6ec4ceca435e69e3d79f593', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '5dfb65105831a672f2a47952aff987cd45e9b178', class: "dot" })), h("span", { key: 'df148ca52be7e580226d94ff9aef4e3cf5a6182c', class: "content" }, h("label", { key: 'e042c57755eadb64692ace49204dccb1ee03ed1c', htmlFor: this.radioId }, this.label), h("span", { key: 'a90b0bef927dddb39f9e6357adf888e0818a3c5a', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+    }
+    static get is() { return "lmvz-radio"; }
+    static get encapsulation() { return "scoped"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-radio.css", "../../styles/fragments/_focus-within.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-radio.css", "../../styles/fragments/_focus-within.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the radio. Required for accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio is checked.\n\nSetting this prop programmatically (e.g. `element.checked = true`) fires `lmvzChange`\nwith the new value, unless the change occurs during native form lifecycle callbacks\n(`formResetCallback` or `formStateRestoreCallback`), in which case emission is suppressed\nto match native `<input type=\"radio\">` behavior. Internal form state is always updated\nregardless of emission suppression."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'on'"
+                        }],
+                    "text": "Form submission value when checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "remarks",
+                            "text": "A value of `\"\"` (empty string) is forwarded to the native `<input>`, but\n`RadioGroupController` treats it as unnamed \u2014 no group coordination occurs between\nradios with `name=\"\"`."
+                        }],
+                    "text": "Name attribute for form submission via ElementInternals.\n\nWhen multiple `lmvz-radio` elements share the same `name` and form scope,\nthe `name` is forwarded directly to the native `<input type=\"radio\">`,\nenabling browser-native mutual exclusion: selecting one radio automatically\ndeselects all others with the same name in that form. If a radio is outside\nany form, its scope defaults to the document level \u2014 same-name radios\noutside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` automatically manages roving tabindex (only the\nchecked radio has `tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End)\nwithin the form-scoped group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / description text displayed below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form id to associate with (for out-of-form usage).\nReflected to the host attribute so both HTML attribute and programmatic assignment work."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "form"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the radio should autofocus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the radio checked state changes.\nEvent detail contains the new checked boolean value.\n\nEmission contract:\n- Fires `true` on user selection (native `change` event).\n- Fires on programmatic external prop transitions: `true \u2192 false` (emits `false`) and\n  `false \u2192 true` (emits `true`), e.g. `element.checked = false` or `element.checked = true`.\n- Does NOT fire during browser-driven form lifecycle callbacks: `formResetCallback` and\n  `formStateRestoreCallback` (autofill / session restore). This matches native `<input type=\"radio\">`\n  behaviour, which does not fire `change` on form reset. Note that internal form state\n  (`ElementInternals.setFormValue`) is always updated regardless of suppression \u2014 only the\n  event channel is silenced.\n- Does NOT re-fire from the `@Watch('checked')` watcher during the same tick as the native\n  `change` handler, preventing a double-emission when the user clicks the radio."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "lmvzActivation",
+                "name": "lmvzActivation",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired on every explicit user activation of this radio \u2014 via click or Space key on the\nnative input. Fires even when the radio is already checked (re-activation). Use this\nevent to react to user intent; use `lmvzChange` to react to state transitions."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native radio input.",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether the radio satisfies its validation constraints.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports validation errors to the user.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

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

@@ -59,7 +59,7 @@
   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
   --lmvz-select-label-minimized-padding-x: 4px;
   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 }
@@ -125,8 +125,8 @@ div[aria-hidden] {
   background-color: var(--lmvz-select-bg-hover);
 }
 .select-wrapper:focus-within div[aria-hidden] {
-  outline: 2px solid var(--lmvz-select-focus-color);
-  outline-offset: 2px;
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 div[aria-hidden] > span:first-child {
   flex: 1 0 0;

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: 'f4d3104f4022581e4661f2181eec5d56ac7027af' }, h("div", { key: '1f8b1fdf7c6d8c65390298e0cd9dca24ef4903d7', class: "select-wrapper" }, h("label", { key: 'ff7a2e509c637424387b38b163739183deda3cba', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '7e3c03652d16dd1a20628d800ccae4221062d4b8', "aria-hidden": "true" }, " *")), h("div", { key: 'a2ee01b6ddfa98565fc1c41c9b9391091d254daf', "aria-hidden": "true" }, h("span", { key: 'c96a6960f693baca0ba48b44e569ad87c1bbc980' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '4631b13509919f7bfd0e5a1287334cd3a8412e50', "aria-hidden": "true" }, " *")), h("span", { key: '4781647ee3a6a780e4253b9f92738c4645e20578' }, h("img", { key: 'c83dab75df9ff20ec40b63f45cbe8262d1c71d7d', src: chevronDownSvg, alt: "" }))), 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 && h("option", { key: 'da76b299a1df9da8475e115b82d7e427cc659bfa', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '1a91b540bc8ab97723df24c9c77d2bd52d941c92' }))), this.helperText && h("div", { key: '347fe4d805a58e03f2cb2ef427b0dba0b805e8be', role: "status" }, this.helperText)));
+        return (h(Host, { key: '597245455ffb9b5f83472a7970fb1c6c92017fd2' }, h("div", { key: 'edeb4d02d5a5291e60fd2d26d16edc500a355b63', class: "select-wrapper" }, h("label", { key: 'd0068817bb3586467d73284cecc03de393c37589', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '624ee28842aed8c01651c7758099bccc446840d6', "aria-hidden": "true" }, " *")), h("div", { key: '184591bc8ac11e9eed17795ce21319591e6d4211', "aria-hidden": "true" }, h("span", { key: '53e673521ed26125c24fb529d6016e3827b47a44' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '7af1a756e3343701ad066f3c107b2028126c5f09', "aria-hidden": "true" }, " *")), h("span", { key: '6210f2069758f8579f67780530fd294210875b3f' }, h("img", { key: '05aa6cf110ba0c7eacd36f59525144c61f0705d9', src: chevronDownSvg, alt: "" }))), h("select", { key: 'dc9dfe93226858f73f1d5a655388b9ce3a5e4037', 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: '38ffb95d089932d0ce0c6a5629004679d3f7f857', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '51b96884bb010b0a93f24b8b2f3f91a7b040e220' }))), this.helperText && h("div", { key: 'f7149a48024e87d2a3843d96674e45cb91fd9cf4', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,101 @@
+:host {
+  position: fixed;
+  bottom: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2147483000; /* TODO(tokens): promote to design-token */
+
+  width: max-content;
+  border: 1px solid transparent;
+  border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
+  padding: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+
+  pointer-events: auto;
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+
+  /* this will be picked up by lmvz-icon as well */
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+
+  color: var(--lmvz-component-color);
+}
+
+:host([status='success']) {
+  background-color: var(--lmvz-semantic-color-status-success, #f1f9f8);
+  border-color: var(--lmvz-semantic-color-status-on-success-subtle, #a5dad3);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);
+}
+
+:host([status='warning']) {
+  background-color: var(--lmvz-semantic-color-status-warning, #fffbf0);
+  border-color: var(--lmvz-semantic-color-status-on-warning-subtle, #ffdf75);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-warning, #7a5e00);
+}
+
+:host([status='error']) {
+  background-color: var(--lmvz-semantic-color-status-danger, #fdf1f2);
+  border-color: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2);
+  --lmvz-component-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+
+lmvz-icon {
+  flex-shrink: 0;
+}
+
+.message {
+  white-space: nowrap;
+}
+
+@keyframes snackbar-enter {
+  from {
+    transform: translateX(-50%) translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes snackbar-leave {
+  from {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-50%) translateY(100%);
+    opacity: 0;
+  }
+}
+
+/* var(--lmvz-global-duration-fast, 200ms) — token is unitless integer; separate ticket filed against packages/design-tokens */
+
+:host(.entering) {
+  animation: snackbar-enter 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
+}
+
+:host(.leaving) {
+  pointer-events: none;
+  animation: snackbar-leave 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.entering) {
+    animation: none;
+    transition: opacity 80ms ease;
+    opacity: 1;
+  }
+
+  :host(.leaving) {
+    pointer-events: none;
+    animation: none;
+    transition: opacity 80ms ease;
+    opacity: 0;
+  }
+}