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

package/dist/collection/components/avatar/vds-avatar.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,21 +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;
-}
-
-/* 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: fit-content;

package/dist/collection/components/avatar/vds-avatar.js

@@ -1,9 +1,29 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-avatar
+ * @description An avatar component that displays user images, initials, or counts.
+ * Supports image URLs, full names (showing initials), and +XX format for additional users.
+ * Includes optional hover overlay with icon for interactive states.
+ * Avatar size is customizable in px or rem units.
+ */
 export class VdsAvatar {
     constructor() {
-        /** Set icon size in px or rem, IE: 32px or 1.25rem */
+        /**
+         * Sets the avatar size in px or rem.
+         * @type {string}
+         * @default "20px"
+         * @example "32px"
+         * @example "1.25rem"
+         */
         this.size = '20px';
     }
+    /**
+     * Formats a number string to show additional users count.
+     * Caps the display at +99 for numbers greater than 99.
+     * @private
+     * @param {string} number - The number string in +XX format
+     * @returns {string} The formatted number string (e.g., "+5" or "+99")
+     */
     getNumberFormat(number) {
         const numValue = parseInt(number.substring(1), 10);
         if (numValue > 99) {
@@ -11,6 +31,13 @@ export class VdsAvatar {
         }
         return '+' + numValue;
     }
+    /**
+     * Extracts initials from a full name.
+     * Takes the first character of the first word and the first character of the last word.
+     * @private
+     * @param {string} name - The full name to extract initials from
+     * @returns {string} The uppercase initials (e.g., "JD" from "John Doe")
+     */
     getNameInitials(name) {
         const parts = name.split(' ');
         const firstInitial = parts[0].charAt(0);
@@ -18,12 +45,27 @@ export class VdsAvatar {
         const initials = firstInitial + lastInitial;
         return initials.toUpperCase();
     }
+    /**
+     * Determines the appropriate avatar value based on the input.
+     * Returns formatted number if value matches +XX pattern, otherwise returns initials.
+     * @private
+     * @param {string} value - The value to process
+     * @returns {string} The formatted avatar value
+     */
     getAvatarValue(value) {
         if (/^\+\d+$/.test(value)) {
             return this.getNumberFormat(value);
         }
         return this.getNameInitials(value);
     }
+    /**
+     * Calculates the appropriate font size based on the avatar size.
+     * Font size is half of the avatar size.
+     * @private
+     * @param {string} size - The avatar size in px or rem
+     * @returns {string} The calculated font size
+     * @throws {Error} If size format is invalid
+     */
     calcFontSize(size) {
         const regex = /^(\d+)(px|rem)$/;
         const match = size.match(regex);
@@ -35,6 +77,13 @@ export class VdsAvatar {
         }
         throw new Error('Invalid size format. Please provide a valid size in px or rem.');
     }
+    /**
+     * Calculates the line height based on the avatar size.
+     * Line height is calculated as (size * 1.25) / 2.
+     * @private
+     * @param {string} size - The avatar size in px or rem
+     * @returns {string} The calculated line height
+     */
     calcLineHeight(size) {
         const regex = /^(\d+)(px|rem)$/;
         const match = size.match(regex);
@@ -45,6 +94,11 @@ export class VdsAvatar {
             return lineHeight + unit;
         }
     }
+    /**
+     * Gets the CSS styles for the avatar value display.
+     * @private
+     * @returns {{ 'width': string; 'height': string; 'font-size': string }} Object containing CSS properties
+     */
     getValueStyles() {
         return {
             'width': this.size,
@@ -52,6 +106,12 @@ export class VdsAvatar {
             'font-size': this.calcFontSize(this.size),
         };
     }
+    /**
+     * Generates the avatar content based on the value type.
+     * Returns an image element if value is a URL, otherwise returns initials or count.
+     * @private
+     * @returns {HTMLStencilElement} The avatar content element
+     */
     getAvatarContent() {
         if (this.value.startsWith('http')) {
             this.setBackground = false;
@@ -63,11 +123,19 @@ export class VdsAvatar {
             return (h("span", { class: "vds-avatar--value", style: this.getValueStyles() }, value));
         }
     }
+    /**
+     * Determines the background color based on whether an image or text is displayed.
+     * @private
+     * @returns {string} The background color CSS value
+     */
     setBackgroundColor() {
         return this.setBackground ? 'var(--vds-avatar-background-color)' : 'transparent';
     }
     /**
-     * Calculates the overlay icon size so that a 100px avatar = 20px icon (1.25rem), scaling proportionally for px or rem.
+     * Calculates the overlay icon size proportionally based on avatar size.
+     * A 100px avatar yields a 20px (1.25rem) icon, scaling proportionally for px or rem.
+     * @private
+     * @returns {string} The calculated icon size in rem
      */
     getOverlayIconSize() {
         const pxMatch = this.size.match(/^(\d+(?:\.\d+)?)px$/);
@@ -85,10 +153,15 @@ export class VdsAvatar {
         }
         return '1.25rem';
     }
+    /**
+     * Renders the avatar component.
+     * Renders as a button with overlay if overlayIcon is set, otherwise renders as a div.
+     * @returns {HTMLStencilElement} The root avatar element
+     */
     render() {
         const avatarContent = this.getAvatarContent();
         const showOverlay = !!this.overlayIcon;
-        return (h(Host, { key: '0f9d23b6cd2ae876779e2b6cf6253dded9d0ccc9' }, showOverlay ? (h("button", { type: "button", class: `vds-avatar vds-avatar--has-overlay`, style: {
+        return (h(Host, { key: '1645dcc1bed3d2d7a667ae4d4c7451c1ad64ea0e' }, showOverlay ? (h("button", { type: "button", class: `vds-avatar vds-avatar--has-overlay`, style: {
                 width: this.size,
                 height: this.size,
                 backgroundColor: this.setBackgroundColor(),
@@ -123,8 +196,23 @@ export class VdsAvatar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "This property can receive:\n- Fullname to show the first letters inside the avatar.\n- Url of image.\n- +XX format for showing the number of additional users. Caps at +99."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }, {
+                            "name": "example",
+                            "text": "\"John Doe\""
+                        }, {
+                            "name": "example",
+                            "text": "\"https://example.com/avatar.jpg\""
+                        }, {
+                            "name": "example",
+                            "text": "\"+5\""
+                        }],
+                    "text": "The value to display in the avatar. Can receive:\n- Full name to show the first letters inside the avatar (e.g., \"John Doe\" becomes \"JD\")\n- URL of an image (must start with \"http\")\n- +XX format for showing the number of additional users (caps at +99)"
                 },
                 "getter": false,
                 "setter": false,
@@ -142,8 +230,20 @@ export class VdsAvatar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set icon size in px or rem, IE: 32px or 1.25rem"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "\"20px\""
+                        }, {
+                            "name": "example",
+                            "text": "\"32px\""
+                        }, {
+                            "name": "example",
+                            "text": "\"1.25rem\""
+                        }],
+                    "text": "Sets the avatar size in px or rem."
                 },
                 "getter": false,
                 "setter": false,
@@ -162,8 +262,17 @@ export class VdsAvatar {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Name of the icon to show as overlay on hover. If not set, no overlay is shown."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "undefined"
+                        }, {
+                            "name": "example",
+                            "text": "\"edit\""
+                        }],
+                    "text": "Name of the icon to show as overlay on hover.\nIf not set, no overlay is shown."
                 },
                 "getter": false,
                 "setter": false,
@@ -173,4 +282,3 @@ export class VdsAvatar {
         };
     }
 }
-//# sourceMappingURL=vds-avatar.js.map

package/dist/collection/components/avatar/vds-avatar.stories.js

@@ -54,4 +54,3 @@ OverlayUsage.args = {
     value: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',
     overlayIcon: 'edit',
 };
-//# sourceMappingURL=vds-avatar.stories.js.map

package/dist/collection/components/badge-dot/vds-badge-dot.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: inline-block;
 }

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

@@ -1,21 +1,59 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { BADGE_VARIANTS } from "../badge-pill/vds-badge-pill.utils";
+/**
+ * @component vds-badge-dot
+ * @description A badge dot component that displays a small colored indicator.
+ * Used to show status, notifications, or presence indicators.
+ * Supports predefined status colors and custom theme colors.
+ * Can be positioned at different corners and optionally overlap content.
+ * @slot (default) - Content to display alongside the badge dot
+ */
 export class VdsBadgeDot {
     constructor() {
-        /** Sets the badge's size */
+        /**
+         * Sets the badge's size.
+         * @type {("small" | "medium")}
+         * @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. */
+        /**
+         * 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.
+         * @type {("warning" | "danger" | "healthy" | "information" | "neutral" | Colors)}
+         * @default "neutral"
+         */
         this.statusColor = "neutral";
-        /** Sets to overlap component content */
+        /**
+         * Controls whether the badge overlaps the content.
+         * When true, the badge is positioned to overlap the content.
+         * @type {boolean}
+         * @default false
+         */
         this.overlap = false;
-        /** Sets the position of the badge */
+        /**
+         * Sets the position of the badge relative to the content.
+         * @type {("top-right" | "top-left" | "bottom-right" | "bottom-left")}
+         * @default "top-right"
+         */
         this.position = "top-right";
     }
+    /**
+     * Component lifecycle method called before each render.
+     * Determines if the statusColor is a custom color or a predefined variant.
+     * @returns {void}
+     */
     componentWillRender() {
         this.isCustom = !BADGE_VARIANTS.includes(this.statusColor);
     }
+    /**
+     * Sets the custom color style for the badge dot.
+     * Applies the custom color as a CSS variable if it's not a predefined variant.
+     * @private
+     * @returns {{ backgroundColor?: string }} Object containing CSS properties or empty object
+     */
     setCustomColorStyle() {
         let style = {};
         if (this.isCustom) {
@@ -25,8 +63,12 @@ export class VdsBadgeDot {
         }
         return style;
     }
+    /**
+     * Renders the badge dot component.
+     * @returns {HTMLElement} The root badge dot element
+     */
     render() {
-        return (h(Host, { key: '38b270026a6ce632ba00bc9a2385045aeb7b0487', "aria-label": this.setAriaLabel }, h("div", { key: '9901018db59ce6e1fb807f19c9921c06a80f255c', class: combineClasses("vds-badge-dot__container"), "aria-label": this.setAriaLabel }, h("div", { key: '35d259c8ed350ecfb812b87a2194f6de76cffa98', class: combineClasses("vds-badge-dot__thumb", this.overlap ? "vds-badge-dot__thumb--overlap" : "vds-badge-dot__thumb--no-overlap", `vds-badge-dot__thumb--size-${this.size}`, `vds-badge-dot__thumb--color-${this.statusColor}`, `vds-badge-dot__thumb--position-${this.position}`), style: this.setCustomColorStyle() }), h("slot", { key: 'de145ced521329b9d7b0b8d13fd5c82a298431f6' }))));
+        return (h(Host, { key: 'ab33c650534b00723797c45d5c2bfb9c8f12406a', "aria-label": this.setAriaLabel }, h("div", { key: 'd0897039d5d1308ec03e7a5f730c336996311f0a', class: combineClasses("vds-badge-dot__container"), "aria-label": this.setAriaLabel }, h("div", { key: '41b7a0c6739de074ec71c21605e82224a8f634cb', class: combineClasses("vds-badge-dot__thumb", this.overlap ? "vds-badge-dot__thumb--overlap" : "vds-badge-dot__thumb--no-overlap", `vds-badge-dot__thumb--size-${this.size}`, `vds-badge-dot__thumb--color-${this.statusColor}`, `vds-badge-dot__thumb--position-${this.position}`), style: this.setCustomColorStyle() }), h("slot", { key: 'f735f08991319d1a94ee9c322e391dba12a32477' }))));
     }
     static get is() { return "vds-badge-dot"; }
     static get encapsulation() { return "shadow"; }
@@ -53,8 +95,14 @@ export class VdsBadgeDot {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the badge's size"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"small\" | \"medium\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the badge's size."
                 },
                 "getter": false,
                 "setter": false,
@@ -67,20 +115,27 @@ export class VdsBadgeDot {
                 "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."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -99,8 +154,14 @@ export class VdsBadgeDot {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,8 +179,14 @@ export class VdsBadgeDot {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets to overlap component content"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Controls whether the badge overlaps the content.\nWhen true, the badge is positioned to overlap the content."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,8 +205,14 @@ export class VdsBadgeDot {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the position of the badge"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\")}"
+                        }, {
+                            "name": "default",
+                            "text": "\"top-right\""
+                        }],
+                    "text": "Sets the position of the badge relative to the content."
                 },
                 "getter": false,
                 "setter": false,
@@ -150,4 +223,3 @@ export class VdsBadgeDot {
         };
     }
 }
-//# sourceMappingURL=vds-badge-dot.js.map

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

@@ -79,4 +79,3 @@ BasicTextUsage.args = {
     overlap: true,
     position: "top-right"
 };
-//# sourceMappingURL=vds-badge-dot.stories.js.map

package/dist/collection/components/badge-pill/vds-badge-pill.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,19 +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;
-}
-
 :host {
   display: inline-block;
+  --vds-badge-pill-content-color: var(--color-text-general-high);
+  --vds-badge-pill-icon-color: var(--vds-badge-pill-content-color);
+  --vds-badge-pill-border-color: transparent;
+  --vds-badge-pill-border-focus-color: var(--color-border-general);
 }
 :host .vds__badge__pill--container {
   display: inline-flex;
@@ -927,6 +936,9 @@
   min-width: var(--spacing-06);
   padding: 0rem var(--spacing-01);
 }
+:host .vds__badge__pill--container .vds__badge__pill--content .vds__badge__pill--value {
+  padding: 0rem var(--spacing-02);
+}
 :host .vds__badge__pill--container.vds__badge__pill--size-large .vds__badge__pill--content {
   min-width: var(--spacing-07);
 }
@@ -1045,16 +1057,17 @@
   fill: var(--color-text-warning-high);
 }
 :host .vds__badge__pill--status-color-custom {
-  background-color: var(--custom-badge-pill-background);
+  background-color: var(--vds-badge-pill-background-color);
+  border-color: var(--vds-badge-pill-border-color);
 }
 :host .vds__badge__pill--status-color-custom:focus {
-  background-color: var(--custom-badge-pill-background);
-  border-color: var(--custom-badge-pill-border-color);
+  background-color: var(--vds-badge-pill-background-focus-color, var(--vds-badge-pill-background-color));
+  border-color: var(--vds-badge-pill-border-focus-color);
 }
 :host .vds__badge__pill--status-color-custom .vds__badge__pill--value {
-  color: var(--custom-badge-pill-content-color);
+  color: var(--vds-badge-pill-content-color);
 }
-:host .vds__badge__pill--status-color-custom vds-icon {
-  color: var(--custom-badge-pill-content-color);
-  fill: var(--custom-badge-pill-content-color);
+:host .vds__badge__pill--status-color-custom vds-icon::part(svg-icon) {
+  color: var(--vds-badge-pill-icon-color);
+  fill: var(--vds-badge-pill-icon-color);
 }