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

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

@@ -7,31 +7,31 @@ export default {
             toc: true,
         },
         design: {
-            type: "figma",
-            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28590-13838"
-        }
+            type: 'figma',
+            url: 'https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28590-13838',
+        },
     },
     argTypes: {
         variant: {
-            options: ["primary", "secondary", "tertiary", "ghost", "ghost-alt"],
-            control: { type: "select" }
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghost-alt'],
+            control: { type: 'select' },
         },
         size: {
-            options: ["large", "medium", "small"],
-            control: { type: "select" }
+            options: ['large', 'medium', 'small'],
+            control: { type: 'select' },
         },
         textAlignment: {
-            options: ["right", "left", "center"],
-            control: { type: "select" }
+            options: ['right', 'left', 'center'],
+            control: { type: 'select' },
         },
         iconLeft: {
             options: ICON_LIST,
-            control: { type: "select" }
+            control: { type: 'select' },
         },
         iconRight: {
             options: ICON_LIST,
-            control: { type: "select" }
-        }
+            control: { type: 'select' },
+        },
     },
 };
 const getIconSize = size => {
@@ -45,37 +45,37 @@ const getIconSize = size => {
     }
 };
 const styles = `vds-button { margin: 20px }`;
-const codeTemplate = (args) => {
+const codeTemplate = args => {
     return `
 <style>${styles}</style>
 <vds-button
     id="btn-test"
     variant="${args.variant}"
     text-alignment="${args.textAlignment}"
-    size="${args.size || "medium"}"
+    size="${args.size || 'medium'}"
     disabled="${args.disabled || false}"
     danger="${args.danger || false}"
     is-full-width="${args.isFullWidth || false}"
 >
-    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ''}
     ${args.text}
-    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ''}
 </vds-button>
     `;
 };
 export const BasicUsage = codeTemplate.bind({});
 BasicUsage.args = {
-    variant: "primary",
-    textAlignment: "center",
-    size: "medium",
+    variant: 'primary',
+    textAlignment: 'center',
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Button",
+    text: 'Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-const sizesCodeTemplate = (args) => {
+const sizesCodeTemplate = args => {
     return `
 <style>${styles}</style>
 <vds-button
@@ -85,9 +85,9 @@ const sizesCodeTemplate = (args) => {
     danger="${args.danger || false}"
     is-full-width="${args.isFullWidth || false}"
 >
-    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.5rem"></vds-icon>` : ""}
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.5rem"></vds-icon>` : ''}
     ${args.text}
-    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.5rem"></vds-icon>` : ""}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.5rem"></vds-icon>` : ''}
 </vds-button>
 <vds-button
     variant="${args.variant}"
@@ -96,9 +96,9 @@ const sizesCodeTemplate = (args) => {
     danger="${args.danger || false}"
     is-full-width="${args.isFullWidth || false}"
 >
-    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.25rem"></vds-icon>` : ""}
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.25rem"></vds-icon>` : ''}
     ${args.text}
-    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.25rem"></vds-icon>` : ""}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.25rem"></vds-icon>` : ''}
 </vds-button>
 <vds-button
     variant="${args.variant}"
@@ -107,21 +107,21 @@ const sizesCodeTemplate = (args) => {
     danger="${args.danger || false}"
     is-full-width="${args.isFullWidth || false}"    
 >
-    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1rem"></vds-icon>` : ""}
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1rem"></vds-icon>` : ''}
     ${args.text}
-    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1rem"></vds-icon>` : ""}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1rem"></vds-icon>` : ''}
 </vds-button>
     `;
 };
 export const Sizes = sizesCodeTemplate.bind({});
 Sizes.args = {
-    variant: "primary",
+    variant: 'primary',
     danger: false,
     disabled: false,
-    text: "Button",
+    text: 'Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
 const buttonsCodeTemplate = (args, variant) => {
     return `
@@ -129,76 +129,354 @@ const buttonsCodeTemplate = (args, variant) => {
 <vds-button
     variant="${variant}"
     text-alignment="center"
-    size="${args.size || "medium"}"
+    size="${args.size || 'medium'}"
     disabled="${args.disabled || false}"
     danger="${args.danger || false}"
     is-full-width="${args.isFullWidth || false}" 
 >
-    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ''}
     ${args.text}
-    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ''}
 </vds-button>
     `;
 };
-export const Primary = (args) => buttonsCodeTemplate(args, "primary");
+export const Primary = args => buttonsCodeTemplate(args, 'primary');
 Primary.args = {
-    size: "medium",
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Primary Button",
+    text: 'Primary Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-export const Secondary = (args) => buttonsCodeTemplate(args, "secondary");
+export const Secondary = args => buttonsCodeTemplate(args, 'secondary');
 Secondary.args = {
-    size: "medium",
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Secondary Button",
+    text: 'Secondary Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-export const Tertiary = (args) => buttonsCodeTemplate(args, "tertiary");
+export const Tertiary = args => buttonsCodeTemplate(args, 'tertiary');
 Tertiary.args = {
-    size: "medium",
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Tertiary Button",
+    text: 'Tertiary Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-export const Ghost = (args) => buttonsCodeTemplate(args, "ghost");
+export const Ghost = args => buttonsCodeTemplate(args, 'ghost');
 Ghost.args = {
-    size: "medium",
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Ghost Button",
+    text: 'Ghost Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-export const GhostAlt = (args) => buttonsCodeTemplate(args, "ghost-alt");
+export const GhostAlt = args => buttonsCodeTemplate(args, 'ghost-alt');
 GhostAlt.args = {
-    size: "medium",
+    size: 'medium',
     danger: false,
     disabled: false,
-    text: "Ghost-Alt Button",
+    text: 'Ghost-Alt Button',
     iconLeft: undefined,
     iconRight: undefined,
-    isFullWidth: false
+    isFullWidth: false,
 };
-const dangerCodeTemplate = (args) => {
-    const variants = ["primary", "secondary", "ghost", "ghost-alt"];
+const dangerCodeTemplate = args => {
+    const variants = ['primary', 'secondary', 'ghost', 'ghost-alt'];
     return `
 <style>${styles}</style>
-${variants.map(variant => `<vds-button variant="${variant}" is-full-width="${args.isFullWidth || false}"  size="medium" danger="true">${variant} button</vds-button>`).join("")}`;
+${variants.map(variant => `<vds-button variant="${variant}" is-full-width="${args.isFullWidth || false}"  size="medium" danger="true">${variant} button</vds-button>`).join('')}`;
 };
 //export const Danger = dangerCodeTemplate.bind({});
-export const Danger = (args) => dangerCodeTemplate(args);
+export const Danger = args => dangerCodeTemplate(args);
 Danger.args = {
-    isFullWidth: false
+    isFullWidth: false,
+};
+const stylesCustom = `
+  .container {
+    display: flex;
+    flex-direction: row;
+    margin: 30px;
+    gap: 50px;
+    align-items: start;
+  }
+  .col {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  p {
+    color: var(--color-text-high);
+  }
+
+  vds-button { 
+    /* Primary */
+    --vds-button-primary-background-color: var(--color-background-healthy-lowest-default);
+    --vds-button-primary-background-hover-color: var(--color-background-healthy-lowest-hover);
+    --vds-button-primary-background-press-color: var(--color-background-healthy-lowest-press);
+    --vds-button-primary-border-hover-color: var(--color-background-healthy-lowest-press);
+    --vds-button-primary-text-color: var(--color-text-high);
+    --vds-button-primary-icon-color: var(--color-icon-high);
+    
+    /* Danger Primary */
+    --vds-button-primary-danger-background-color: var(--color-background-warning-lowest-default);
+    --vds-button-primary-danger-background-hover-color: var(--color-background-warning-lowest-hover);
+    --vds-button-primary-danger-background-press-color: var(--color-background-warning-lowest-press);
+    --vds-button-primary-danger-border-hover-color: var(--color-background-warning-lowest-press);
+    --vds-button-primary-danger-text-color: var(--color-text-warning-medium);
+    --vds-button-primary-danger-icon-color: var(--color-icon-warning);
+
+    /* Secondary */
+    --vds-button-secondary-background-hover-color: var(--color-background-healthy-lowest-hover);
+    --vds-button-secondary-background-press-color: var(--color-background-healthy-lowest-press);
+    --vds-button-secondary-border-color: var(--color-background-healthy-default);
+    --vds-button-secondary-text-color: var(--color-text-healthy-medium);
+    --vds-button-secondary-text-hover-color: var(--color-text-healthy-medium);
+    --vds-button-secondary-text-press-color: var(--color-text-healthy-medium);
+    --vds-button-secondary-icon-color: var(--color-icon-healthy);
+    --vds-button-secondary-icon-hover-color: var(--color-icon-healthy);
+    --vds-button-secondary-icon-press-color: var(--color-icon-healthy);
+
+    /* Danger Secondary */
+    --vds-button-secondary-danger-background-hover-color: var(--color-background-warning-lowest-hover);
+    --vds-button-secondary-danger-background-press-color: var(--color-background-warning-lowest-press);
+    --vds-button-secondary-danger-border-color: var(--color-border-warning);
+    --vds-button-secondary-danger-text-color: var(--color-text-warning-medium);
+    --vds-button-secondary-danger-text-press-color: var(--vds-button-secondary-danger-text-color);
+    --vds-button-secondary-danger-icon-color: var(--color-icon-warning);
+    --vds-button-secondary-danger-icon-press-color: var(--vds-button-secondary-danger-icon-color);
+
+    /* Tertiary */
+    --vds-button-tertiary-background-color: var(--color-background-neutral-default);
+    --vds-button-tertiary-background-hover-color: var(--color-background-neutral-hover);
+    --vds-button-tertiary-background-press-color: var(--color-background-neutral-press);
+    --vds-button-tertiary-border-color: var(--color-border-healthy);
+    --vds-button-tertiary-text-color: var(--color-text-high);
+    --vds-button-tertiary-icon-color: var(--color-icon-high);
+  
+    /* Ghost */
+    --vds-button-ghost-background-hover-color: var(--color-background-healthy-lowest-hover);
+    --vds-button-ghost-background-press-color: var(--color-background-healthy-lowest-press);
+    --vds-button-ghost-text-color: var(--color-text-healthy-medium);
+    --vds-button-ghost-text-hover-color: var(--color-text-healthy-medium);
+    --vds-button-ghost-text-press-color: var(--color-text-healthy-medium);
+    --vds-button-ghost-icon-color: var(--color-icon-healthy);
+    --vds-button-ghost-icon-hover-color: var(--color-icon-healthy);
+    --vds-button-ghost-icon-press-color: var(--color-icon-healthy);
+
+    /* Danger Ghost */
+    --vds-button-ghost-danger-background-hover-color: var(--color-background-warning-lowest-hover);
+    --vds-button-ghost-danger-background-press-color: var(--color-background-warning-lowest-press);
+    --vds-button-ghost-danger-text-color: var(--color-text-warning-medium);
+    --vds-button-ghost-danger-text-press-color: var(--color-text-warning-medium);
+    --vds-button-ghost-danger-icon-color: var(--color-icon-warning);
+    --vds-button-ghost-danger-icon-press-color: var(--color-icon-warning);
+
+    /* Ghost alt */
+    --vds-button-ghost-alt-background-hover-color: var(--surface-low);
+    --vds-button-ghost-alt-background-press-color: var(--surface-lower);
+    --vds-button-ghost-alt-text-color: var(--color-text-medium);
+    --vds-button-ghost-alt-icon-color: var(--color-icon-medium);
+  }
+`;
+const codeTemplateCustom = args => {
+    return `
+<style>${stylesCustom}</style>
+<div class="container">
+  <div class="col">
+    <p class="vds-font-title-medium">Default</p>
+    <vds-button variant="primary" size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="trash" size="${getIconSize(args.size)}"></vds-icon>
+      Primary
+    </vds-button>
+    <vds-button variant="secondary" size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="trash" size="${getIconSize(args.size)}"></vds-icon>
+      Secondary
+    </vds-button>
+    <vds-button variant="tertiary" size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="trash" size="${getIconSize(args.size)}"></vds-icon>
+      Tertiary
+    </vds-button>
+    <vds-button variant="ghost" size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="trash" size="${getIconSize(args.size)}"></vds-icon>
+      Ghost
+    </vds-button>
+    <vds-button variant="ghost-alt" size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="trash" size="${getIconSize(args.size)}"></vds-icon>
+      Ghost Alt
+    </vds-button>
+  </div>
+
+  <div class="col">
+    <p class="vds-font-title-medium">Danger</p>
+    <vds-button variant="primary" danger size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="caution" size="${getIconSize(args.size)}"></vds-icon>
+      Primary Danger
+    </vds-button>
+    <vds-button variant="secondary" danger size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="caution" size="${getIconSize(args.size)}"></vds-icon>
+      Secondary Danger
+    </vds-button>
+    <vds-button variant="ghost" danger size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="caution" size="${getIconSize(args.size)}"></vds-icon>
+      Ghost Danger
+    </vds-button>
+  </div>
+
+  <div class="col">
+    <p class="vds-font-title-medium">Disabled</p>
+    <vds-button variant="primary" disabled size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="overlays" size="${getIconSize(args.size)}"></vds-icon>
+      Primary Disabled
+    </vds-button>
+    <vds-button variant="secondary" disabled size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="overlays" size="${getIconSize(args.size)}"></vds-icon>
+      Secondary Disabled
+    </vds-button>
+    <vds-button variant="tertiary" disabled size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="overlays" size="${getIconSize(args.size)}"></vds-icon>
+      Tertiary Disabled
+    </vds-button>
+    <vds-button variant="ghost" disabled size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="overlays" size="${getIconSize(args.size)}"></vds-icon>
+      Ghost Disabled
+    </vds-button>
+    <vds-button variant="ghost-alt" disabled size="${args.size}">
+      <vds-icon slot="icon-left" svg-icon="overlays" size="${getIconSize(args.size)}"></vds-icon>
+      Ghost Alt Disabled
+    </vds-button>
+  </div>
+</div>
+  `;
+};
+export const CustomColorsUsage = codeTemplateCustom.bind({});
+CustomColorsUsage.args = {
+    size: 'medium',
+};
+const stylesLayoutOverride = `
+  .layout-override-container {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    margin: 30px;
+  }
+  .layout-override-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: center;
+  }
+  .layout-override-label {
+    color: var(--color-text-high);
+    margin: 0 0 8px;
+  }
+  .layout-override-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Custom height per size */
+  .btn-custom-height-large {
+    --vds-button-height-large: 4rem;
+  }
+  .btn-custom-height-medium {
+    --vds-button-height-medium: 3rem;
+  }
+  .btn-custom-height-small {
+    --vds-button-height-small: 2rem;
+  }
+
+  /* Custom padding */
+  .btn-custom-padding {
+    --vds-button-padding-large: 1rem 2rem;
+    --vds-button-padding-medium: 0.75rem 1.5rem;
+    --vds-button-padding-small: 0.5rem 1rem;
+  }
+
+  /* Custom border-radius */
+  .btn-sharp {
+    --vds-button-border-radius: var(--radius-sharp);
+  }
+  .btn-pill {
+    --vds-button-border-radius: var(--radius-pill);
+  }
+
+  /* Custom width */
+  .btn-custom-width {
+    --vds-button-width: 12rem;
+  }
+
+`;
+const codeTemplateLayoutOverride = () => {
+    return `
+<style>${stylesLayoutOverride}</style>
+<div class="layout-override-container">
+
+  <div class="layout-override-section">
+    <p class="vds-font-title-medium layout-override-label">Height override</p>
+    <div class="layout-override-row">
+      <vds-button class="btn-custom-height-large" variant="primary" size="large">Large 4rem height</vds-button>
+      <vds-button class="btn-custom-height-medium" variant="primary" size="medium">Medium 3rem height</vds-button>
+      <vds-button class="btn-custom-height-small" variant="primary" size="small">Small 2rem height</vds-button>
+    </div>
+  </div>
+
+  <div class="layout-override-section">
+    <p class="vds-font-title-medium layout-override-label">Padding override</p>
+    <div class="layout-override-row">
+      <vds-button class="btn-custom-padding" variant="secondary" size="large">Large custom padding</vds-button>
+      <vds-button class="btn-custom-padding" variant="secondary" size="medium">Medium custom padding</vds-button>
+      <vds-button class="btn-custom-padding" variant="secondary" size="small">Small custom padding</vds-button>
+    </div>
+  </div>
+
+  <div class="layout-override-section">
+    <p class="vds-font-title-medium layout-override-label">Border-radius override</p>
+    <div class="layout-override-row">
+      <vds-button variant="primary" size="medium">Default (radius-medium)</vds-button>
+      <vds-button class="btn-sharp" variant="primary" size="medium">Sharp (radius-sharp)</vds-button>
+      <vds-button class="btn-pill" variant="primary" size="medium">Pill (radius-pill)</vds-button>
+    </div>
+  </div>
+
+  <div class="layout-override-section">
+    <p class="vds-font-title-medium layout-override-label">Width override</p>
+    <div class="layout-override-row">
+      <vds-button variant="tertiary" size="medium">Default (fit-content)</vds-button>
+      <vds-button class="btn-custom-width" variant="tertiary" size="medium">Fixed 12rem width</vds-button>
+    </div>
+  </div>
+
+  <div class="layout-override-section">
+    <p class="vds-font-title-medium layout-override-label">Icon size (via vds-icon size prop)</p>
+    <div class="layout-override-row">
+      <vds-button variant="ghost" size="medium">
+        <vds-icon slot="icon-left" svg-icon="add" size="1rem"></vds-icon>
+        Default icon (1rem)
+      </vds-button>
+      <vds-button variant="ghost" size="medium">
+        <vds-icon slot="icon-left" svg-icon="add" size="1.5rem"></vds-icon>
+        Large icon (1.5rem)
+      </vds-button>
+      <vds-button variant="ghost" size="medium">
+        <vds-icon slot="icon-left" svg-icon="add" size="0.75rem"></vds-icon>
+        Small icon (0.75rem)
+      </vds-button>
+    </div>
+  </div>
+
+</div>
+  `;
 };
-//# sourceMappingURL=vds-button.stories.js.map
+export const CustomLayoutOverride = codeTemplateLayoutOverride.bind({});
+CustomLayoutOverride.args = {};

package/dist/collection/components/card/vds-card.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 {
   /** Tokens for style override and theming */
   /** Default variant */
@@ -1133,6 +1138,9 @@
 :host .vds__card.padding__spacing-20 {
   padding: var(--spacing-20);
 }
+:host .vds__card.padding__spacing-21 {
+  padding: var(--spacing-21);
+}
 :host .vds__card.shadow__elevation-shadow-0 {
   box-shadow: var(--elevation-shadow-0);
 }