wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/slider-range-continuous/vds-basic-slider-range-continuous.stories.js

@@ -84,4 +84,52 @@ BasicUsage.args = {
     colors: undefined,
     icon: "thumb",
 };
-//# sourceMappingURL=vds-basic-slider-range-continuous.stories.js.map
+const codeMarksTemplate = (args) => {
+    return `
+    <style>
+        ${styles}
+        ${args.orientation === "vertical" ? " div { width: 200px !important; margin-top: 100px; }" : ""}
+    </style>
+    <vds-basic-slider-range-continuous
+        start-value='${args.startValue}'
+        end-value='${args.endValue}'
+        size='${args.size}'
+        orientation='${args.orientation}'
+        disabled='${args.disabled}'
+        min-value='${args.minValue}'
+        max-value='${args.maxValue}'
+        step='${args.step}'
+        set-aria-label='${args.setAriaLabel}'
+        display-label='${args.displayLabel}'
+        display-limits='${args.displayLimits}'
+        icon='${args.icon}'
+        show-marks='${args.showMarks}'
+        marks='${JSON.stringify(args.marks)}'
+    >
+    </vds-basic-slider-range-continuous>
+`;
+};
+export const MarksUsage = codeMarksTemplate.bind({});
+MarksUsage.args = {
+    startValue: "20",
+    endValue: "80",
+    size: "medium",
+    orientation: "horizontal",
+    disabled: false,
+    minValue: "0",
+    maxValue: "100",
+    step: "20",
+    setAriaLabel: "Vds-slider-range",
+    displayLabel: "on",
+    displayLimits: true,
+    icon: "thumb",
+    showMarks: true,
+    marks: [
+        { value: 0, label: 'Start' },
+        { value: 40, label: '40' },
+        { value: 60 },
+        { value: 80, label: '80' },
+        { value: 90, label: '90' },
+        { value: 100, label: 'End' },
+    ],
+};

package/dist/collection/components/stepper-item/vds-stepper-item.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
   width: fit-content;

package/dist/collection/components/stepper-item/vds-stepper-item.js

@@ -1,44 +1,225 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-stepper-item
+ * @description A stepper item component that represents a single step in a multi-step process or workflow. Supports multiple states (default, completed, error), custom icons or text, and works with horizontal and vertical stepper containers. Ideal for onboarding flows, checkout processes, and multi-stage forms.
+ *
+ * @example
+ * <!-- Basic stepper item with number -->
+ * <vds-stepper-item text="1">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Step 1"
+ *     description="Basic information">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Stepper item with icon -->
+ * <vds-stepper-item icon="check" state="completed">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Account Created"
+ *     description="Your account is ready">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Completed state stepper -->
+ * <vds-stepper-item text="1" state="completed">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Personal Info"
+ *     description="Completed">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Error state stepper -->
+ * <vds-stepper-item text="2" state="error">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Payment"
+ *     description="Error: Invalid card">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Disabled stepper item -->
+ * <vds-stepper-item text="3" disabled="true">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Confirmation"
+ *     description="Not available yet">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Center aligned stepper -->
+ * <vds-stepper-item text="1" text-alignment="center">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Start">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Stepper with content -->
+ * <vds-stepper-item text="1">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Step 1"
+ *     description="Enter details">
+ *   </vds-stepper-item-header>
+ *   <div slot="item-content">
+ *     <p>Step content goes here</p>
+ *   </div>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Multiple steps in sequence -->
+ * <div style="display: flex; gap: 1rem;">
+ *   <vds-stepper-item text="1" state="completed">
+ *     <vds-stepper-item-header slot="item-header" title="Account"></vds-stepper-item-header>
+ *   </vds-stepper-item>
+ *
+ *   <vds-stepper-item text="2">
+ *     <vds-stepper-item-header slot="item-header" title="Profile"></vds-stepper-item-header>
+ *   </vds-stepper-item>
+ *
+ *   <vds-stepper-item text="3" disabled="true">
+ *     <vds-stepper-item-header slot="item-header" title="Complete"></vds-stepper-item-header>
+ *   </vds-stepper-item>
+ * </div>
+ *
+ * @example
+ * <!-- With icon in completed state -->
+ * <vds-stepper-item icon="checked" state="completed">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Verified"
+ *     description="Email confirmed">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Event handling -->
+ * <vds-stepper-item id="step1" text="1">
+ *   <vds-stepper-item-header slot="item-header"
+ *     title="Step 1"
+ *     description="Click to activate">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ * <script>
+ *   const step = document.getElementById('step1');
+ *   step.addEventListener('selected', (e) => {
+ *     console.log('Step selected:', e);
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Full checkout flow -->
+ * <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+ *   <vds-stepper-item icon="check" state="completed">
+ *     <vds-stepper-item-header slot="item-header"
+ *       title="Cart"
+ *       description="3 items">
+ *     </vds-stepper-item-header>
+ *   </vds-stepper-item>
+ *
+ *   <vds-stepper-item text="2">
+ *     <vds-stepper-item-header slot="item-header"
+ *       title="Shipping"
+ *       description="Enter address">
+ *     </vds-stepper-item-header>
+ *     <div slot="item-content">
+ *       <input type="text" placeholder="Address" />
+ *     </div>
+ *   </vds-stepper-item>
+ *
+ *   <vds-stepper-item text="3" disabled="true">
+ *     <vds-stepper-item-header slot="item-header"
+ *       title="Payment"
+ *       description="Next step">
+ *     </vds-stepper-item-header>
+ *   </vds-stepper-item>
+ * </div>
+ */
 export class VdsStepperItem {
     constructor() {
-        /** Sets the text alignment */
+        /**
+         * Sets the text alignment
+         * @type {"center" | "left"}
+         * @default "left"
+         */
         this.textAlignment = 'left';
-        /** Sets the stepper in disabled state */
+        /**
+         * Sets the stepper in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the stepper state */
+        /**
+         * Sets the stepper state
+         * @type {"default" | "completed" | "error"}
+         * @default "default"
+         */
         this.state = 'default';
-        /** Sets the text inside the circle in the stepper */
+        /**
+         * Sets the text inside the circle in the stepper
+         * @type {string}
+         * @default ""
+         */
         this.text = '';
-        /** Sets the icon inside the circle in the stepper. When set, the icon will override the text value */
+        /**
+         * Sets the icon inside the circle in the stepper. When set, the icon will override the text value
+         * @type {string}
+         * @default ""
+         */
         this.icon = '';
         /**
-         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')
          * When true, the item stepper can render divider and activeContent
+         * @type {boolean}
+         * @default false
          */
         this.manageContent = false;
         /**
-         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')
          * When true, the item stepper display the slot content of the element
-         * without being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`
+         * without being manage by the vds-vertical-stepper or vds-horizontal-stepper
+         * @type {boolean}
+         * @default false
          */
         this.activeContent = false;
         /**
-         * Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')
+         * Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')
          * When true, the item stepper renders a vds-divider after the header
+         * @type {boolean}
+         * @default false
          */
         this.divider = false;
+        /**
+         * Handles click events on the stepper item
+         * Emits selected event if not disabled
+         * @private
+         * @param {MouseEvent} evt - The click event
+         */
         this.onClick = (evt) => {
             if (!this.disabled) {
                 this.selected.emit(evt);
             }
         };
     }
+    /**
+     * Component lifecycle hook - updates stepper header on load
+     * @private
+     */
     componentDidLoad() {
         this.updateStepperHeader();
     }
+    /**
+     * Watch for textAlignment and disabled prop changes to update stepper header
+     * @private
+     */
     onPropsChange() {
         this.updateStepperHeader();
     }
+    /**
+     * Updates the stepper header component with current props
+     * @private
+     */
     updateStepperHeader() {
         try {
             const stepperHeader = this.hostEl.querySelector('vds-stepper-item-header[slot="item-header"]');
@@ -51,6 +232,11 @@ export class VdsStepperItem {
             console.warn('updateStepperHeader warning: ', e);
         }
     }
+    /**
+     * Renders the content inside the circle (icon or text)
+     * @private
+     * @returns {HTMLElement | null} Icon or text element, or null if neither is provided
+     */
     renderCircleContent() {
         if (this.icon) {
             return h("vds-icon", { class: "vds-stepper-item__circle-icon", svgIcon: this.icon, color: this.disabled ? 'color-icon-disabled' : 'static-white' });
@@ -60,6 +246,11 @@ export class VdsStepperItem {
         }
         return null;
     }
+    /**
+     * Renders the stepper circle with appropriate state styling
+     * @private
+     * @returns {HTMLElement} The circle element
+     */
     renderCircle() {
         return (h("div", { class: {
                 'vds-stepper-item__circle': true,
@@ -67,17 +258,21 @@ export class VdsStepperItem {
                 'vds-stepper-item__circle--disabled': this.disabled,
             } }, this.renderCircleContent()));
     }
+    /**
+     * Render the stepper item component
+     * @returns {HTMLElement} The rendered stepper item element
+     */
     render() {
-        return (h(Host, { key: '329ef7870ad5de235f05e2acafaa48a38eace6ab', class: { disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, } }, this.manageContent && ([
-            h("div", { key: 'fbdc12ece4fceaff88f0a97046927dfbaa2388d9', class: "vds-stepper-item--header-section" }, h("button", { key: '685856d482637bd1bcd1bd48bdc709dd6723fcfd', class: {
+        return (h(Host, { key: 'b331354e60b6966c55c24d0f33f394ae414bdd6a', class: { disabled: this.disabled, [`vds-stepper-item--text-align-${this.textAlignment}`]: this.manageContent, } }, this.manageContent && ([
+            h("div", { key: '6a9a7ade5b72a5ad8fd2c68123fed1eefc3bda84', class: "vds-stepper-item--header-section" }, h("button", { key: '152987546ba0497e451437cdead4e87a5344deb0', class: {
                     'vds-stepper-item': true,
                     [`vds-stepper-item--text-align-${this.textAlignment}`]: true,
-                }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: '5067e3179b28d2b84c52e16bca87a5a7d50ce1ca', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: '718da98b09257b6ce0f7b66dbc299926d9da59d1', name: "item-header" }))), this.divider && this.textAlignment === "center" && (h("vds-divider", { key: '9c8bc63a9ed4f485b4e5ab7a0acdaf1672a8fcb2', orientation: 'vertical' }))),
-            h("div", { key: 'e16296ce450ae8eaa9f523856a005ac41269dea8', class: "vds-stepper-item__content-cotainer", slot: this.textAlignment === "center" ? "vertical-stepper" : undefined }, h("div", { key: '7c104a43e6d0dd1f4db883fb6007bb2fc65e56e2', class: `vds-stepper-item__content ${this.activeContent ? "vds-stepper-item__content--visible" : ""}` }, this.textAlignment === "left" && (h("vds-divider", { key: '9a15b80e884fe1949c011cac916c6bddcfb2ccac', orientation: 'vertical', class: this.divider ? "" : "divider-no-visible" })), h("slot", { key: '3b5729b533581d6ec49b15663eb4f35621d01ef2', name: "item-content" })))
-        ]), !this.manageContent && (h("button", { key: '95708b4ff591181f2a204d3f5b45121c5b5a6a33', class: {
+                }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: 'bc9d9a5111d1a27b0fa5afa0f8d302b19b3aa256', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: '29cbd18ed3ad17b538cc4fab4386fdbad11adb0a', name: "item-header" }))), this.divider && this.textAlignment === "center" && (h("vds-divider", { key: '31d854db7abebceeb3b00853682caab2d8849d52', orientation: 'vertical' }))),
+            h("div", { key: 'f8ca2dc61ba2dd727f49e27feac878034a1d1e9a', class: "vds-stepper-item__content-cotainer", slot: this.textAlignment === "center" ? "vertical-stepper" : undefined }, h("div", { key: '16078e7849e3cd43da230df9308d46b54fc69fa6', class: `vds-stepper-item__content ${this.activeContent ? "vds-stepper-item__content--visible" : ""}` }, this.textAlignment === "left" && (h("vds-divider", { key: '3f51e0858b3d71c9138f6e59696820e291c15aa0', orientation: 'vertical', class: this.divider ? "" : "divider-no-visible" })), h("slot", { key: '4672b29cc61e27ab2d481bbcf632b82eec1e0f32', name: "item-content" })))
+        ]), !this.manageContent && (h("button", { key: 'f60f65df67ae0350e7146a4d0611a0f2c0aeea4b', class: {
                 'vds-stepper-item': true,
                 [`vds-stepper-item--text-align-${this.textAlignment}`]: true,
-            }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: '8c2fe22df2ef332a160665b5a1b55f2f437b0ab5', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: 'a1994ed9736404d18ec30c2f79e506261a2e4f88', name: "item-header" })), h("div", { key: '572515c97df445f402e33f59291f2efb4e2529e0', class: "vds-stepper-item__content" }, h("slot", { key: 'd0e0c14d1fdcc64fd6538ef9e1325b7b4ceb5b67', name: "item-content" }))))));
+            }, onClick: this.onClick, tabIndex: this.disabled ? -1 : 0, disabled: this.disabled }, h("div", { key: 'b184fed5f719a572ed453e9a835603a5364d9137', class: "vds-stepper-item__header" }, this.renderCircle(), h("slot", { key: 'e3ec0cb5f8bb4aa168101bfa2b7b2f5dc26eab0f', name: "item-header" })), h("div", { key: 'bcd2e736ec4976366214b7deffad90470c009b02', class: "vds-stepper-item__content" }, h("slot", { key: '7bc54d899bfac1ecbd3113cef3cafaa584693c1f', name: "item-content" }))))));
     }
     static get is() { return "vds-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +299,13 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"center\" | \"left\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"left\""
+                        }],
                     "text": "Sets the text alignment"
                 },
                 "getter": false,
@@ -124,7 +325,13 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the stepper in disabled state"
                 },
                 "getter": false,
@@ -144,7 +351,13 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"default\" | \"completed\" | \"error\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"default\""
+                        }],
                     "text": "Sets the stepper state"
                 },
                 "getter": false,
@@ -164,7 +377,13 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": "Sets the text inside the circle in the stepper"
                 },
                 "getter": false,
@@ -184,7 +403,13 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"\""
+                        }],
                     "text": "Sets the icon inside the circle in the stepper. When set, the icon will override the text value"
                 },
                 "getter": false,
@@ -204,8 +429,14 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper can render divider and activeContent"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')\nWhen true, the item stepper can render divider and activeContent"
                 },
                 "getter": false,
                 "setter": false,
@@ -224,8 +455,14 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper display the slot content of the element \nwithout being manage by the `vds-vertical-stepper` or `vds-horizontal-stepper`"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')\nWhen true, the item stepper display the slot content of the element\nwithout being manage by the vds-vertical-stepper or vds-horizontal-stepper"
                 },
                 "getter": false,
                 "setter": false,
@@ -244,8 +481,14 @@ export class VdsStepperItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Internal prop, it is used along side with `vds-vertical-stepper` on content inside mode (text-alignment='left')\nWhen true, the item stepper renders a vds-divider after the header"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Internal prop, it is used along side with vds-vertical-stepper on content inside mode (text-alignment='left')\nWhen true, the item stepper renders a vds-divider after the header"
                 },
                 "getter": false,
                 "setter": false,
@@ -263,7 +506,13 @@ export class VdsStepperItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "selected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item is selected"
                 },
                 "complexType": {
@@ -289,4 +538,3 @@ export class VdsStepperItem {
             }];
     }
 }
-//# sourceMappingURL=vds-stepper-item.js.map

package/dist/collection/components/stepper-item/vds-stepper-item.stories.js

@@ -112,4 +112,3 @@ VerticalUsage.args = {
     title: 'Step Title',
     description: 'Step Description',
 };
-//# sourceMappingURL=vds-stepper-item.stories.js.map

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host {
   display: block;
   width: fit-content;