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

package/dist/collection/components/badge-pill/vds-badge-pill.js

@@ -2,43 +2,85 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { BADGE_VARIANTS } from "./vds-badge-pill.utils";
 import { getIconSizeUpdated } from "../../utils/icon-attr.utils";
+/**
+ * @component vds-badge-pill
+ * @description A badge pill component that displays status indicators with text and optional icons.
+ * Used to show status, labels, or categorical information in a compact pill shape.
+ * Supports predefined status colors and fully customizable theme colors.
+ * Can include icons and allows custom styling for advanced use cases.
+ */
 export class VdsBadgePill {
     constructor() {
-        /** Sets the badge's size */
+        /**
+         * Sets the badge's size.
+         * @type {('2x-small' | 'extra-small' | 'small' | 'medium' | 'large')}
+         * @default "medium"
+         */
         this.size = 'medium';
-        /** Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral
-         *  If you pass a color from out pallete it will consider as custom. The color will be applied as background color;
-         *  To fully customize please refer to props contentColor and borderFocusColor. */
+        /**
+         * Sets the color of the badge.
+         * Provides special status colors: warning, danger, healthy, information, neutral.
+         * Can also accept custom colors from the theme palette.
+         * Custom colors are applied as background color using CSS variables.
+         * For full customization, refer to contentColor and borderFocusColor props.
+         * @type {('warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors)}
+         * @default "neutral"
+         */
         this.statusColor = 'neutral';
-        /** Hides the native tooltip when set to true */
+        /**
+         * Hides the native tooltip when set to true.
+         * @type {boolean}
+         * @default false
+         */
         this.hideTitle = false;
         this.isCustom = false;
         this.getIconSizeUpdated = getIconSizeUpdated;
     }
+    /**
+     * Component lifecycle method called before each render.
+     * Sets up custom badge styling if a custom color is provided.
+     * @returns {void}
+     */
     componentWillRender() {
         this.setCustomBadge();
     }
+    /**
+     * Configures custom badge styling when using custom colors.
+     * Determines if the statusColor is a predefined variant or custom color.
+     * Sets CSS custom properties for background, content color, and border color.
+     * @private
+     * @returns {void}
+     */
     setCustomBadge() {
         this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);
         if (this.isCustom) {
-            let styles = {};
-            styles = {
-                '--custom-badge-pill-background': this.statusColor ? `var(--${this.statusColor})` : undefined,
-                '--custom-badge-pill-content-color': this.contentColor ? `var(--${this.contentColor})` : undefined,
-                '--custom-badge-pill-border-color': this.borderFocusColor ? `var(--${this.borderFocusColor})` : undefined,
+            let styles = {
+                '--vds-badge-pill-background-color': `var(--${this.statusColor})`,
             };
+            if (this.contentColor) {
+                styles['--vds-badge-pill-content-color'] = `var(--${this.contentColor})`;
+                styles['--vds-badge-pill-icon-color'] = `var(--${this.contentColor})`;
+            }
+            if (this.borderFocusColor) {
+                styles['--vds-badge-pill-border-focus-color'] = `var(--${this.borderFocusColor})`;
+            }
             this.customStyles = styles;
         }
     }
-    /** Sets the icon in the vds-badge-pills
-     *
-     * @returns HTMLStencilElement
+    /**
+     * Generates the icon element for the badge.
+     * @private
+     * @returns {HTMLStencilElement} The icon element with appropriate size
      */
     getIcon() {
         return h("vds-icon", { svgIcon: this.icon, size: this.getIconSizeUpdated(this.size) });
     }
+    /**
+     * Renders the badge pill component.
+     * @returns {HTMLStencilElement} The root badge pill element
+     */
     render() {
-        return (h(Host, { key: '82f19b8b819f07bf11b5b7574a3460e0593dffe9', "aria-label": this.setAriaLabel || this.value }, h("button", { key: 'f0d545252f80be53ea5e5f3b6b7f16d67e29c338', class: combineClasses('vds__badge__pill--container', this.size ? `vds__badge__pill--size-${this.size}` : '', this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom'), style: this.customStyles, title: this.hideTitle ? undefined : this.setAriaLabel || this.value, "aria-label": this.setAriaLabel || this.value }, h("div", { key: '5d6d30e9ce4371cb0cb857a9932d87d38b9443e9', class: 'vds__badge__pill--content' }, this.icon && this.getIcon(), this.value && h("span", { key: 'c67f19eaf65c869b4473aeeed63d260a5e1e7657', class: 'vds__badge__pill--value' }, this.value)))));
+        return (h(Host, { key: '4d05d8a8a4c53d2309ddf6cd404dd68e97fa1ea4', "aria-label": this.setAriaLabel || this.value }, h("button", { key: 'bdf6bb37850c853ecf88124b5417952f8b008a16', class: combineClasses('vds__badge__pill--container', this.size ? `vds__badge__pill--size-${this.size}` : '', this.statusColor && !this.isCustom ? `vds__badge__pill--status-color-${this.statusColor}` : 'vds__badge__pill--status-color-custom'), style: this.customStyles, title: this.hideTitle ? undefined : this.setAriaLabel || this.value, "aria-label": this.setAriaLabel || this.value }, h("div", { key: '3c86f0191db79d057fe462425de16b88e063d0c7', class: 'vds__badge__pill--content' }, this.icon && this.getIcon(), this.value && h("span", { key: '41989cf452f0c38408930aaba07988f9d97f7c79', class: 'vds__badge__pill--value' }, this.value)))));
     }
     static get is() { return "vds-badge-pill"; }
     static get encapsulation() { return "shadow"; }
@@ -65,8 +107,14 @@ export class VdsBadgePill {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the badge's size"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{('2x-small' | 'extra-small' | 'small' | 'medium' | 'large')}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the badge's size."
                 },
                 "getter": false,
                 "setter": false,
@@ -79,20 +127,27 @@ export class VdsBadgePill {
                 "mutable": false,
                 "complexType": {
                     "original": "'warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors",
-                    "resolved": "Colors | \"information\" | \"healthy\" | \"danger\" | \"warning\" | \"neutral\"",
+                    "resolved": "\"box-shadow-color-01\" | \"box-shadow-color-02\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-disabled\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-neutral-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-caution\" | \"color-border-danger\" | \"color-border-disabled\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-general\" | \"color-border-healthy\" | \"color-border-high\" | \"color-border-information\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-medium\" | \"color-border-warning\" | \"color-border-white-high\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-border-white-medium\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-caution\" | \"color-icon-danger\" | \"color-icon-disabled\" | \"color-icon-general\" | \"color-icon-healthy\" | \"color-icon-high\" | \"color-icon-information\" | \"color-icon-low\" | \"color-icon-medium\" | \"color-icon-warning\" | \"color-icon-white-high\" | \"color-icon-white-low\" | \"color-icon-white-medium\" | \"color-interaction-backdrop\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-black-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-white-medium\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-disabled\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-high\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-low\" | \"color-text-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-low\" | \"color-text-white-medium\" | \"danger\" | \"healthy\" | \"information\" | \"neutral\" | \"static-black\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\" | \"static-black-medium\" | \"static-brand-100\" | \"static-brand-1000\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-brand-1000-medium\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-50\" | \"static-brand-500\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-main\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-50\" | \"static-green-500\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-green-main\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-50\" | \"static-grey-500\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-grey-main\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-400-medium\" | \"static-neutral-50\" | \"static-neutral-500\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-800-low\" | \"static-neutral-800-medium\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-main\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-50\" | \"static-orange-500\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-orange-main\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-50\" | \"static-red-500\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-red-main\" | \"static-white\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-white-medium\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-50\" | \"static-yellow-500\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-yellow-main\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"surface-high\" | \"surface-higher\" | \"surface-low\" | \"surface-lower\" | \"surface-medium\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\" | \"warning\"",
                     "references": {
                         "Colors": {
                             "location": "import",
                             "path": "../../definitions/colors",
-                            "id": "src/definitions/colors.ts::Colors"
+                            "id": "src/definitions/colors.ts::Colors",
+                            "referenceLocation": "Colors"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the color of the badge, it provides special colors such as warning, danger, healthy, information, neutral\nIf you pass a color from out pallete it will consider as custom. The color will be applied as background color;\nTo fully customize please refer to props contentColor and borderFocusColor."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{('warning' | 'danger' | 'healthy' | 'information' | 'neutral' | Colors)}"
+                        }, {
+                            "name": "default",
+                            "text": "\"neutral\""
+                        }],
+                    "text": "Sets the color of the badge.\nProvides special status colors: warning, danger, healthy, information, neutral.\nCan also accept custom colors from the theme palette.\nCustom colors are applied as background color using CSS variables.\nFor full customization, refer to contentColor and borderFocusColor props."
                 },
                 "getter": false,
                 "setter": false,
@@ -111,8 +166,14 @@ export class VdsBadgePill {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the aria label in badge"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the aria-label for accessibility.\nIf not provided, falls back to the value prop."
                 },
                 "getter": false,
                 "setter": false,
@@ -130,8 +191,14 @@ export class VdsBadgePill {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets an icon inside the badge"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets an icon to display inside the badge."
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +216,13 @@ export class VdsBadgePill {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": "Sets the text value of the badge."
                 },
                 "getter": false,
@@ -162,20 +235,33 @@ export class VdsBadgePill {
                 "mutable": false,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
+                    "resolved": "\"box-shadow-color-01\" | \"box-shadow-color-02\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-disabled\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-neutral-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-caution\" | \"color-border-danger\" | \"color-border-disabled\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-general\" | \"color-border-healthy\" | \"color-border-high\" | \"color-border-information\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-medium\" | \"color-border-warning\" | \"color-border-white-high\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-border-white-medium\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-caution\" | \"color-icon-danger\" | \"color-icon-disabled\" | \"color-icon-general\" | \"color-icon-healthy\" | \"color-icon-high\" | \"color-icon-information\" | \"color-icon-low\" | \"color-icon-medium\" | \"color-icon-warning\" | \"color-icon-white-high\" | \"color-icon-white-low\" | \"color-icon-white-medium\" | \"color-interaction-backdrop\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-black-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-white-medium\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-disabled\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-high\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-low\" | \"color-text-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-low\" | \"color-text-white-medium\" | \"static-black\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\" | \"static-black-medium\" | \"static-brand-100\" | \"static-brand-1000\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-brand-1000-medium\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-50\" | \"static-brand-500\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-main\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-50\" | \"static-green-500\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-green-main\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-50\" | \"static-grey-500\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-grey-main\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-400-medium\" | \"static-neutral-50\" | \"static-neutral-500\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-800-low\" | \"static-neutral-800-medium\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-main\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-50\" | \"static-orange-500\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-orange-main\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-50\" | \"static-red-500\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-red-main\" | \"static-white\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-white-medium\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-50\" | \"static-yellow-500\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-yellow-main\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"surface-high\" | \"surface-higher\" | \"surface-low\" | \"surface-lower\" | \"surface-medium\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\"",
                     "references": {
                         "Colors": {
                             "location": "import",
                             "path": "../../definitions/colors",
-                            "id": "src/definitions/colors.ts::Colors"
+                            "id": "src/definitions/colors.ts::Colors",
+                            "referenceLocation": "Colors"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the color of the text and icon. (Only works when passing a custom statusColor)"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use CSS custom token `--vds-badge-pill-content-color` instead.\nThis will set both text and icon color.\nUse `--vds-badge-pill-icon-color` to override the icon color separately."
+                        }, {
+                            "name": "example",
+                            "text": "To set a custom content color, define the CSS variable `--vds-badge-pill-content-color` on the badge element:\n<vds-badge-pill\n  status-color=\"custom-color\"\n  style=\"--vds-badge-pill-content-color: var(--your-custom-color);\"\n></vds-badge-pill>"
+                        }, {
+                            "name": "type",
+                            "text": "{Colors}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the color of the text and icon.\nOnly works when passing a custom statusColor."
                 },
                 "getter": false,
                 "setter": false,
@@ -187,20 +273,33 @@ export class VdsBadgePill {
                 "mutable": false,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
+                    "resolved": "\"box-shadow-color-01\" | \"box-shadow-color-02\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-disabled\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-neutral-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-caution\" | \"color-border-danger\" | \"color-border-disabled\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-general\" | \"color-border-healthy\" | \"color-border-high\" | \"color-border-information\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-medium\" | \"color-border-warning\" | \"color-border-white-high\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-border-white-medium\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-caution\" | \"color-icon-danger\" | \"color-icon-disabled\" | \"color-icon-general\" | \"color-icon-healthy\" | \"color-icon-high\" | \"color-icon-information\" | \"color-icon-low\" | \"color-icon-medium\" | \"color-icon-warning\" | \"color-icon-white-high\" | \"color-icon-white-low\" | \"color-icon-white-medium\" | \"color-interaction-backdrop\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-black-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-white-medium\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-disabled\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-high\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-low\" | \"color-text-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-low\" | \"color-text-white-medium\" | \"static-black\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\" | \"static-black-medium\" | \"static-brand-100\" | \"static-brand-1000\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-brand-1000-medium\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-50\" | \"static-brand-500\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-main\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-50\" | \"static-green-500\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-green-main\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-50\" | \"static-grey-500\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-grey-main\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-400-medium\" | \"static-neutral-50\" | \"static-neutral-500\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-800-low\" | \"static-neutral-800-medium\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-main\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-50\" | \"static-orange-500\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-orange-main\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-50\" | \"static-red-500\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-red-main\" | \"static-white\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-white-medium\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-50\" | \"static-yellow-500\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-yellow-main\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"surface-high\" | \"surface-higher\" | \"surface-low\" | \"surface-lower\" | \"surface-medium\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\"",
                     "references": {
                         "Colors": {
                             "location": "import",
                             "path": "../../definitions/colors",
-                            "id": "src/definitions/colors.ts::Colors"
+                            "id": "src/definitions/colors.ts::Colors",
+                            "referenceLocation": "Colors"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the color of the border in focus. (Only works when passing a custom statusColor)"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use CSS custom token `--vds-badge-pill-border-focus-color` instead."
+                        }, {
+                            "name": "example",
+                            "text": "To set a custom border focus color, define the CSS variable `--vds-badge-pill-border-focus-color` on the badge element:\n<vds-badge-pill\n  status-color=\"custom-color\"\n  style=\"--vds-badge-pill-border-focus-color: var(--your-custom-focus-color);\"\n></vds-badge-pill>"
+                        }, {
+                            "name": "type",
+                            "text": "{Colors}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Sets the border color when the badge is focused.\nOnly works when passing a custom statusColor."
                 },
                 "getter": false,
                 "setter": false,
@@ -218,8 +317,14 @@ export class VdsBadgePill {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Hides the native tooltip when set to true"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Hides the native tooltip when set to true."
                 },
                 "getter": false,
                 "setter": false,
@@ -230,4 +335,3 @@ export class VdsBadgePill {
         };
     }
 }
-//# sourceMappingURL=vds-badge-pill.js.map

package/dist/collection/components/badge-pill/vds-badge-pill.stories.js

@@ -1,5 +1,5 @@
 import variables from "../../constants/color-vars";
-const THEME_KEY = Object.keys(variables.theme);
+const COLOR_OPTIONS = [...Object.keys(variables.theme), ...Object.keys(variables.palette.all), ...Object.keys(variables.global)];
 export default {
     title: 'VDS/Components/Badges/Pill',
     parameters: {
@@ -13,21 +13,13 @@ export default {
     },
     argTypes: {
         statusColor: {
-            options: ['warning', 'danger', 'healthy', 'information', ...THEME_KEY],
+            options: ['warning', 'danger', 'healthy', 'information', 'neutral', ...COLOR_OPTIONS],
             control: { type: 'select' },
         },
         size: {
             options: ['2x-small', 'extra-small', 'small', 'medium', 'large'],
             control: { type: 'select' },
         },
-        contentColor: {
-            options: [undefined, ...THEME_KEY],
-            control: { type: 'select' },
-        },
-        borderFocusColor: {
-            options: [undefined, ...THEME_KEY],
-            control: { type: 'select' },
-        },
     },
 };
 let styles = `
@@ -45,8 +37,6 @@ const codeTemplate = args => {
       set-aria-label="${args.setAriaLabel}"
       icon="${args.icon}"
       value="${args.value}"
-      content-color="${args.contentColor}"
-      border-focus-color="${args.borderFocusColor}"
       hide-title="${args.hideTitle}"
     ></vds-badge-pill>
 </div>
@@ -59,8 +49,42 @@ BasicUsage.args = {
     setAriaLabel: "I'm a vds badge",
     icon: 'good',
     value: 'Badge 1',
-    contentColor: undefined,
-    borderFocusColor: undefined,
     hideTitle: false,
 };
-//# sourceMappingURL=vds-badge-pill.stories.js.map
+let stylesCustom = `
+.content {
+    margin: 10px;
+
+    #custom-badge {
+      --vds-badge-pill-content-color: var(--static-white);
+      --vds-badge-pill-icon-color: var(--color-border-danger);
+      --vds-badge-pill-border-color: var(--static-black);
+      --vds-badge-pill-border-focus-color: var(--static-black);
+    }
+}
+`;
+const codeTemplateCustom = args => {
+    return `
+<style>${stylesCustom}</style>
+<div class="content">
+    <vds-badge-pill
+      id="custom-badge"
+      size="${args.size}"
+      status-color="${args.statusColor}"
+      set-aria-label="${args.setAriaLabel}"
+      icon="${args.icon}"
+      value="${args.value}"
+      hide-title="${args.hideTitle}"
+    ></vds-badge-pill>
+</div>
+`;
+};
+export const customColors = codeTemplateCustom.bind({});
+customColors.args = {
+    size: '2x-small',
+    statusColor: 'static-black',
+    setAriaLabel: 'Custom Badge',
+    icon: 'caution',
+    value: 'Custom Badge',
+    hideTitle: false,
+};

package/dist/collection/components/badge-pill/vds-badge-pill.utils.js

@@ -1,4 +1,3 @@
 export const BADGE_VARIANTS = [
     "warning", "danger", "healthy", "information", "neutral"
 ];
-//# sourceMappingURL=vds-badge-pill.utils.js.map

package/dist/collection/components/base-group-header/base-group-header.js

@@ -11,4 +11,3 @@ import { combineClasses } from "../../utils/combine-classes";
 export const generateGroupHeaderContainer = (size, value) => {
     return (h("div", { class: combineClasses('vds-base-group-header', `vds-base-group-header--${size}`) }, h("span", { class: combineClasses('vds-base-group-header__label', `vds-base-group-header__label--${size}`) }, value ? value : h("slot", null))));
 };
-//# sourceMappingURL=base-group-header.js.map

package/dist/collection/components/base-item/base-item.js

@@ -76,6 +76,61 @@ export const generateInformativeIcon = (icon, value, size, disabled, isActive, d
 export const generateCheckbox = (isSelected, size, disabled, isActive, danger) => {
     return (h("div", { class: `vds-base-item__checkbox-icon-${size}` }, h("vds-icon", { "svg-icon": isSelected ? "checked" : "unchecked", class: combineClasses(isSelected ? "checkbox-icon-checked" : "", `checkbox-item-${size}`), size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger, true), alt: "checkbox-element" })));
 };
+/**
+ * Highlights matching text within a string by wrapping it in bold tags.
+ *
+ * @param {string} text - The text to search within.
+ * @param {string} highlightText - The text to highlight (case-insensitive).
+ *
+ * @returns {(string | HTMLStencilElement)[]} Array of strings and bold elements.
+ */
+export const highlightMatchingText = (text, highlightText) => {
+    if (!highlightText || !text)
+        return [text];
+    const parts = [];
+    const regex = new RegExp(`(${highlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    const textParts = text.split(regex);
+    textParts.forEach((part) => {
+        if (part && part.toLowerCase() === highlightText.toLowerCase()) {
+            parts.push(h("span", { class: "highlighted-text" }, part));
+        }
+        else if (part) {
+            parts.push(part);
+        }
+    });
+    return parts;
+};
+/**
+ * Processes and highlights text content from slot nodes.
+ *
+ * @param {HTMLElement} slotElement - The slot element.
+ * @param {string} highlightText - The text to highlight (case-insensitive).
+ *
+ * @returns {(string | HTMLStencilElement)[]} Array of strings and bold elements.
+ */
+export const processSlotContent = (slotElement, highlightText) => {
+    if (!slotElement || !highlightText)
+        return [h("slot", null)];
+    const slot = slotElement.querySelector('slot');
+    if (!slot)
+        return [h("slot", null)];
+    const nodes = slot.assignedNodes({ flatten: true });
+    const result = [];
+    nodes.forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || '';
+            result.push(...highlightMatchingText(text, highlightText));
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            const text = element.textContent || '';
+            if (text) {
+                result.push(...highlightMatchingText(text, highlightText));
+            }
+        }
+    });
+    return result.length > 0 ? result : [h("slot", null)];
+};
 /**
  * Generates a label element based on the provided parameters.
 
@@ -84,11 +139,20 @@ export const generateCheckbox = (isSelected, size, disabled, isActive, danger) =
  * @param {boolean} disabled - Whether the label is disabled.
  * @param {boolean} isActive - Whether the label is active.
  * @param {boolean} danger - Whether the label should indicate danger.
+ * @param {string} [highlightText] - Optional text to highlight in bold.
+ * @param {HTMLElement} [slotParent] - Optional reference to the parent element containing the slot for processing slot content.
  *
  * @returns {HTMLStencilElement} The generated label element.
  */
-export const generateLabel = (label, size, disabled, isActive, danger) => {
-    return (h("span", { class: combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, label ? label : h("slot", null)));
+export const generateLabel = (label, size, disabled, isActive, danger, highlightText, slotParent) => {
+    let content = h("slot", null);
+    if (label) {
+        content = highlightMatchingText(label, highlightText || "");
+    }
+    else if (slotParent && highlightText) {
+        content = processSlotContent(slotParent, highlightText);
+    }
+    return (h("span", { class: combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, content));
 };
 /**
  * Generates a children icon button based on the provided parameters.
@@ -103,4 +167,3 @@ export const generateLabel = (label, size, disabled, isActive, danger) => {
 export const generateChildrenIconButton = (size, disabled, isActive, danger) => {
     return (h("div", { class: "vds-base-item__has-children-icon" }, h("vds-icon", { "svg-icon": "chevron-right", size: getIconSize(size), color: getIconColor(disabled, isActive, danger), alt: "Open menu" })));
 };
-//# sourceMappingURL=base-item.js.map

package/dist/collection/components/basic-dropdown/vds-basic-dropdown.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,24 +909,12 @@
   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;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 :host {
   display: block;
   width: 100%;
+  --vds-basic-dropdown-backdrop-background-color: var(--color-interaction-black-lower);
+  --vds-basic-dropdown-backdrop-z-index: var(--elevation-layer-1);
+  --vds-basic-dropdown-content-z-index: var(--elevation-layer-2);
 }
 :host .vds__dropdown--trigger {
   box-sizing: border-box;
@@ -1016,7 +1020,7 @@
   align-self: stretch;
   border-radius: var(--radius-medium);
   background: var(--surface-medium);
-  z-index: var(--elevation-layer-5);
+  z-index: var(--vds-basic-dropdown-content-z-index);
   box-shadow: var(--elevation-shadow-2);
   box-sizing: border-box;
   border: 0.0625rem solid var(--color-border-lowest);
@@ -1077,9 +1081,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--color-interaction-black-lower);
-  opacity: 0.06;
-  z-index: var(--elevation-layer-4);
+  background-color: var(--vds-basic-dropdown-backdrop-background-color);
+  z-index: var(--vds-basic-dropdown-backdrop-z-index);
+  pointer-events: auto;
 }
 
 :host-context(.vds-basic-dropdown--disabled) {