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

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

@@ -1,30 +1,321 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * A versatile content container that can function as a static surface, a selectable item
+ * (like a checkbox), or a clickable button. Supports four visual variants, configurable
+ * spacing tokens, elevation shadows, and full CSS custom property theming.
+ *
+ * All content — including headers and titles — is placed in the **default slot**.
+ *
+ * ---
+ * ## Migration note (volt-card / volt-card-header / volt-card-title → vds-card)
+ *
+ * **`volt-card` must be replaced with `vds-card`.**
+ * `volt-card-header` and `volt-card-title` **no longer exist** as components in the new system.
+ * Migrating to `vds-card-header` or `vds-card-title` will fail silently — those tags are
+ * unknown and render nothing.
+ *
+ * ### 1. volt-card-header is removed
+ *
+ * There is no `vds-card-header`. Use a native `<header>` or `<div>` element inside
+ * the `vds-card` slot to replicate the visual grouping.
+ *
+ * ```html
+ * <!-- Before -->
+ * <volt-card padding="md">
+ *   <volt-card-header>
+ *     Header content here
+ *   </volt-card-header>
+ * </volt-card>
+ *
+ * <!-- After — use a native element in the slot -->
+ * <vds-card padding="spacing-05">
+ *   <header>Header content here</header>
+ * </vds-card>
+ * ```
+ *
+ * ### 2. volt-card-title is removed
+ *
+ * There is no `vds-card-title`. Use a native heading element (`<h1>`–`<h6>`) with a
+ * Volt typography utility class inside the slot. Pick the heading level that is semantically
+ * correct for the page hierarchy (accessibility requirement).
+ *
+ * ```html
+ * <!-- Before — element prop controlled heading tag -->
+ * <volt-card padding="md">
+ *   <volt-card-header>
+ *     <volt-card-title element="h2">Card Title</volt-card-title>
+ *   </volt-card-header>
+ *   Body content here.
+ * </volt-card>
+ *
+ * <!-- After — native heading with Volt typography class -->
+ * <vds-card padding="spacing-05">
+ *   <h2 class="vds-font-title-medium">Card Title</h2>
+ *   <p>Body content here.</p>
+ * </vds-card>
+ * ```
+ *
+ * ### 3. padding token system changed
+ *
+ * Old named tokens map to new numeric spacing tokens:
+ *
+ * | volt-card (`padding`) | vds-card (`padding`) | Value |
+ * |---|---|---|
+ * | `xs` | `spacing-02` | 0.25rem |
+ * | `sm` | `spacing-03` | 0.5rem |
+ * | `md` | `spacing-05` | 1rem |
+ * | `lg` | `spacing-07` | 1.5rem |
+ * | `lg2` | `spacing-08` | 1.75rem |
+ * | `xl` | `spacing-09` | 2rem |
+ * | `xxl` | `spacing-11` | 2.5rem |
+ *
+ * **Full migration checklist:**
+ * - Replace tag `volt-card` → `vds-card`
+ * - Remove `volt-card-header` — replace with a native `<header>` or `<div>`
+ * - Remove `volt-card-title` — replace with a native `<h1>`–`<h6>` and a Volt typography class
+ * - Update `padding` value to the new `spacing-XX` token
+ *
+ * ---
+ * ## Basic usage
+ *
+ * ```html
+ * <!-- Static content card -->
+ * <vds-card padding="spacing-05">
+ *   <p>Card content goes here.</p>
+ * </vds-card>
+ *
+ * <!-- Card with title and body (replaces volt-card-header + volt-card-title) -->
+ * <vds-card padding="spacing-05">
+ *   <h2 class="vds-font-title-medium">Card Title</h2>
+ *   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ * </vds-card>
+ *
+ * <!-- Card with header section and actions -->
+ * <vds-card padding="spacing-07">
+ *   <header style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+ *     <h3 class="vds-font-title-small">Settings</h3>
+ *     <vds-button size="small">Edit</vds-button>
+ *   </header>
+ *   <p>Body content here.</p>
+ * </vds-card>
+ * ```
+ *
+ * ---
+ * ## Variants
+ *
+ * ```html
+ * <vds-card variant="default"   padding="spacing-05"><p>Default</p></vds-card>
+ * <vds-card variant="primary"   padding="spacing-05"><p>Primary</p></vds-card>
+ * <vds-card variant="secondary" padding="spacing-05"><p>Secondary</p></vds-card>
+ * <vds-card variant="danger"    padding="spacing-05"><p>Danger</p></vds-card>
+ * ```
+ *
+ * ---
+ * ## Shadow levels
+ *
+ * ```html
+ * <vds-card shadow-box="elevation-shadow-0"  padding="spacing-05"><p>No shadow</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-1"  padding="spacing-05"><p>Level 1 (default)</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-2"  padding="spacing-05"><p>Level 2</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-3"  padding="spacing-05"><p>Level 3</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-5"  padding="spacing-05"><p>Level 5</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-8"  padding="spacing-05"><p>Level 8</p></vds-card>
+ * <vds-card shadow-box="elevation-shadow-17" padding="spacing-05"><p>Level 17</p></vds-card>
+ * ```
+ *
+ * ---
+ * ## Selectable card
+ *
+ * Use `selectable="true"` to let users toggle the card between selected and unselected.
+ * Read or set the state via the `selected` prop. Emits `select` with the new boolean value
+ * on every toggle. **Cannot be combined with `button`.**
+ *
+ * ```html
+ * <vds-card selectable="true" padding="spacing-05">
+ *   <p>Click to select</p>
+ * </vds-card>
+ *
+ * <!-- Pre-selected -->
+ * <vds-card selectable="true" selected="true" padding="spacing-05">
+ *   <p>Already selected</p>
+ * </vds-card>
+ * ```
+ *
+ * ```js
+ * document.querySelector('vds-card').addEventListener('select', (e) => {
+ *   console.log('selected:', e.detail); // true | false
+ * });
+ * ```
+ *
+ * ---
+ * ## Button card (entire surface is clickable)
+ *
+ * Use `button="true"` when the whole card should act as a single action. Emits `click`
+ * with the native `MouseEvent`. **Cannot be combined with `selectable`.**
+ *
+ * ```html
+ * <vds-card button="true" padding="spacing-05">
+ *   <p>Click anywhere on the card</p>
+ * </vds-card>
+ * ```
+ *
+ * ```js
+ * document.querySelector('vds-card').addEventListener('click', (e) => {
+ *   console.log('card clicked', e.detail);
+ * });
+ * ```
+ *
+ * ---
+ * ## Disabled state
+ *
+ * ```html
+ * <vds-card disabled="true" selectable="true" padding="spacing-05">
+ *   <p>Not interactive</p>
+ * </vds-card>
+ * ```
+ *
+ * ---
+ * ## Cards side by side
+ *
+ * ```html
+ * <div style="display:flex; gap:1rem;">
+ *   <vds-card padding="spacing-05" style="flex:1;">
+ *     <h3 class="vds-font-title-small">Card A</h3>
+ *     <p>Short content.</p>
+ *   </vds-card>
+ *   <vds-card padding="spacing-05" style="flex:1;">
+ *     <h3 class="vds-font-title-small">Card B</h3>
+ *     <p>Longer content that makes this card taller.</p>
+ *   </vds-card>
+ * </div>
+ * ```
+ *
+ * ---
+ * ## Custom styles (CSS custom properties)
+ *
+ * Override per-variant tokens on the element or a parent selector.
+ * All values must be CSS color values or references to Volt design tokens.
+ *
+ * ```css
+ * vds-card {
+ *   /​* Default variant *​/
+ *   --vds-card-default-border-color: var(--color-background-healthy-lowest-press);
+ *   --vds-card-default-border-hover-color: var(--color-border-healthy);
+ *   --vds-card-default-border-press-color: var(--color-border-healthy);
+ *   --vds-card-default-background-color: var(--color-background-healthy-lowest-default);
+ *   --vds-card-default-background-hover-color: var(--color-background-healthy-lowest-hover);
+ *   --vds-card-default-background-press-color: var(--color-background-healthy-lowest-press);
+ *   --vds-card-default-selected-border-color: var(--color-border-healthy);
+ *   --vds-card-default-selected-background-color: var(--color-background-healthy-lowest-hover);
+ *
+ *   /​* Primary variant *​/
+ *   --vds-card-primary-border-hover-color: var(--color-interaction-brand-low);
+ *   --vds-card-primary-background-color: var(--color-background-information-lowest-default);
+ *   --vds-card-primary-background-hover-color: var(--color-background-information-lowest-hover);
+ *   --vds-card-primary-background-press-color: var(--color-background-information-lowest-press);
+ *   --vds-card-primary-selected-border-color: var(--color-interaction-brand-lower);
+ *   --vds-card-primary-selected-background-color: var(--color-background-information-lowest-hover);
+ * }
+ * ```
+ *
+ * ---
+ * ## Slots
+ *
+ * | Slot | Description |
+ * |---|---|
+ * | *(default)* | All card content — titles, body text, actions, nested components. There are no named slots. |
+ *
+ * Since `volt-card-header` and `volt-card-title` are removed, place titles and header
+ * sections directly in this slot using native HTML elements.
+ *
+ * @component vds-card
+ */
 export class VdsCard {
     constructor() {
-        /** Padding of component based on volt-spacing tokens */
+        /**
+         * Internal padding of the card using Volt spacing tokens (`spacing-00` – `spacing-21`).
+         *
+         * **Migration:** the old `volt-card` used named tokens (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`).
+         * These no longer exist. Use the numeric equivalents:
+         * `xs` → `spacing-02`, `sm` → `spacing-03`, `md` → `spacing-05`,
+         * `lg` → `spacing-07`, `lg2` → `spacing-08`, `xl` → `spacing-09`, `xxl` → `spacing-11`.
+         *
+         * @type {Spacing}
+         * @default "spacing-05"
+         */
         this.padding = 'spacing-05';
-        /** Selectable property allow the card to toggle between selected and unselected state.
-         * This property can't be used with the button property at the same time */
+        /**
+         * Makes the card toggleable between selected and unselected on click.
+         * Emits the `select` event with the new boolean value on each toggle.
+         *
+         * **Mutually exclusive with `button`** — if both are set, `selectable` is disabled automatically.
+         *
+         * @type {boolean}
+         * @default false
+         */
         this.selectable = false;
-        /** Sets the selected state for the card (only works when selectable property is true).
-         * This property can't be used with the button property at the same time */
+        /**
+         * Reflects the current selected state of the card.
+         * Only meaningful when `selectable="true"`. Can be set initially to pre-select the card.
+         * Automatically reset to `false` when `selectable` is disabled.
+         *
+         * @type {boolean}
+         * @default false
+         */
         this.selected = false;
-        /** Button property allows the card to behave like a button.
-         * This property can't be used with the selectable property at the same time */
+        /**
+         * Makes the entire card surface act as a single clickable button.
+         * Emits the `click` event with the native `MouseEvent` on each click.
+         *
+         * **Mutually exclusive with `selectable`** — if both are set, `selectable` is disabled automatically.
+         *
+         * @type {boolean}
+         * @default false
+         */
         this.button = false;
-        /** Sets the card in disabled state */
+        /**
+         * Puts the card in a non-interactive disabled visual state.
+         * Prevents `select` and `click` events from being emitted.
+         *
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Allows changing the default card variant */
+        /**
+         * Controls the card's color scheme.
+         * - `"default"` — neutral surface (most common)
+         * - `"primary"` — brand/information emphasis
+         * - `"secondary"` — secondary emphasis
+         * - `"danger"` — destructive or error context
+         *
+         * @type {"primary" | "secondary" | "danger" | "default"}
+         * @default "default"
+         */
         this.variant = 'default';
-        /** Sets the shadow for the card */
+        /**
+         * Sets the card's drop shadow using a Volt elevation token.
+         * Available values: `elevation-shadow-0` (none), `elevation-shadow-1` through
+         * `elevation-shadow-3`, `elevation-shadow-5`, `elevation-shadow-8`, `elevation-shadow-17`.
+         *
+         * @type {ShadowBox}
+         * @default "elevation-shadow-1"
+         */
         this.shadowBox = 'elevation-shadow-1';
     }
+    /**
+     * Emits the selected state when the selected property changes
+     * @returns {void}
+     */
     emitSelected() {
         if (this.selectable) {
             this.select.emit(this.selected);
         }
     }
+    /**
+     * Validates and handles behavior conflicts between selectable and button properties
+     * @returns {void}
+     */
     handleBehaviorValidation() {
         if (this.button && this.selectable) {
             this.selectable = false;
@@ -35,9 +326,9 @@ export class VdsCard {
         }
     }
     /**
-     * Sets card's custom border colors
-     *
-     * @returns { [key: string]: string }
+     * Sets card's custom border colors based on borderColor and borderHoverColor props
+     * @private
+     * @returns {{ [key: string]: string }} Object containing CSS custom properties for border colors
      */
     setCustomBorderColors() {
         const styles = {};
@@ -49,9 +340,20 @@ export class VdsCard {
         }
         return styles;
     }
+    /**
+     * Toggles the selected state of the card
+     * @private
+     * @returns {void}
+     */
     handleSelectable() {
         this.selected = !this.selected;
     }
+    /**
+     * Handles click events on the card and emits appropriate events
+     * @private
+     * @param {MouseEvent} evt - The mouse event from the click
+     * @returns {void}
+     */
     handleClick(evt) {
         if (this.button) {
             this.click.emit(evt);
@@ -60,11 +362,19 @@ export class VdsCard {
             this.handleSelectable();
         }
     }
+    /**
+     * Lifecycle hook that runs before component is loaded
+     * @returns {void}
+     */
     componentWillLoad() {
         this.handleBehaviorValidation();
     }
+    /**
+     * Renders the card component
+     * @returns {HTMLStencilElement} The rendered card element
+     */
     render() {
-        return (h(Host, { key: '90ceb9548462381cf636f7ed05bfea0b1cde08ad', class: combineClasses(this.disabled ? "vds-card--disabled" : "") }, h("div", { key: 'a0aaaffd86c6a0d5d68496324773c570834242ab', onClick: (evt) => {
+        return (h(Host, { key: '2a2ddc56bb0841fa9341c292d50946f76edafbc4', class: combineClasses(this.disabled ? "vds-card--disabled" : "") }, h("div", { key: '0b1c056fe06346fcf2fdf92fc045bfcc5d2adb5b', onClick: (evt) => {
                 this.handleClick(evt);
             }, style: this.setCustomBorderColors(), class: `
             vds__card 
@@ -75,7 +385,7 @@ export class VdsCard {
             ${this.selectable && this.selected ? 'vds__card--selected' : ''}
             ${this.button ? 'vds__card--button' : ''}
             ${this.disabled ? 'vds__card--disabled' : ''}
-          ` }, h("slot", { key: '9d6e9d59f233c109a55d4cd3268da6e61b8f9121' }))));
+          ` }, h("slot", { key: '1f69926e39b625fbe87c0e817f1cb6e784a34ea5' }))));
     }
     static get is() { return "vds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -96,20 +406,27 @@ export class VdsCard {
                 "mutable": true,
                 "complexType": {
                     "original": "Spacing",
-                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\"",
+                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\" | \"spacing-21\"",
                     "references": {
                         "Spacing": {
                             "location": "import",
                             "path": "../../definitions/spacing",
-                            "id": "src/definitions/spacing.ts::Spacing"
+                            "id": "src/definitions/spacing.ts::Spacing",
+                            "referenceLocation": "Spacing"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Padding of component based on volt-spacing tokens"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Spacing}"
+                        }, {
+                            "name": "default",
+                            "text": "\"spacing-05\""
+                        }],
+                    "text": "Internal padding of the card using Volt spacing tokens (`spacing-00` \u2013 `spacing-21`).\n\n**Migration:** the old `volt-card` used named tokens (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`).\nThese no longer exist. Use the numeric equivalents:\n`xs` \u2192 `spacing-02`, `sm` \u2192 `spacing-03`, `md` \u2192 `spacing-05`,\n`lg` \u2192 `spacing-07`, `lg2` \u2192 `spacing-08`, `xl` \u2192 `spacing-09`, `xxl` \u2192 `spacing-11`."
                 },
                 "getter": false,
                 "setter": false,
@@ -128,8 +445,14 @@ export class VdsCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Selectable property allow the card to toggle between selected and unselected state.\nThis property can't be used with the button property at the same time"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Makes the card toggleable between selected and unselected on click.\nEmits the `select` event with the new boolean value on each toggle.\n\n**Mutually exclusive with `button`** \u2014 if both are set, `selectable` is disabled automatically."
                 },
                 "getter": false,
                 "setter": false,
@@ -148,8 +471,14 @@ export class VdsCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the selected state for the card (only works when selectable property is true).\nThis property can't be used with the button property at the same time"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Reflects the current selected state of the card.\nOnly meaningful when `selectable=\"true\"`. Can be set initially to pre-select the card.\nAutomatically reset to `false` when `selectable` is disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -168,8 +497,14 @@ export class VdsCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Button property allows the card to behave like a button.\nThis property can't be used with the selectable property at the same time"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Makes the entire card surface act as a single clickable button.\nEmits the `click` event with the native `MouseEvent` on each click.\n\n**Mutually exclusive with `selectable`** \u2014 if both are set, `selectable` is disabled automatically."
                 },
                 "getter": false,
                 "setter": false,
@@ -188,8 +523,14 @@ export class VdsCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the card in disabled state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Puts the card in a non-interactive disabled visual state.\nPrevents `select` and `click` events from being emitted."
                 },
                 "getter": false,
                 "setter": false,
@@ -208,8 +549,14 @@ export class VdsCard {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Allows changing the default card variant"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"primary\" | \"secondary\" | \"danger\" | \"default\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"default\""
+                        }],
+                    "text": "Controls the card's color scheme.\n- `\"default\"` \u2014 neutral surface (most common)\n- `\"primary\"` \u2014 brand/information emphasis\n- `\"secondary\"` \u2014 secondary emphasis\n- `\"danger\"` \u2014 destructive or error context"
                 },
                 "getter": false,
                 "setter": false,
@@ -227,15 +574,22 @@ export class VdsCard {
                         "ShadowBox": {
                             "location": "import",
                             "path": "../../definitions/shadows",
-                            "id": "src/definitions/shadows.ts::ShadowBox"
+                            "id": "src/definitions/shadows.ts::ShadowBox",
+                            "referenceLocation": "ShadowBox"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the shadow for the card"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{ShadowBox}"
+                        }, {
+                            "name": "default",
+                            "text": "\"elevation-shadow-1\""
+                        }],
+                    "text": "Sets the card's drop shadow using a Volt elevation token.\nAvailable values: `elevation-shadow-0` (none), `elevation-shadow-1` through\n`elevation-shadow-3`, `elevation-shadow-5`, `elevation-shadow-8`, `elevation-shadow-17`."
                 },
                 "getter": false,
                 "setter": false,
@@ -248,12 +602,13 @@ export class VdsCard {
                 "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"
                         }
                     }
                 },
@@ -261,10 +616,13 @@ export class VdsCard {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "type",
+                            "text": "{Colors}"
+                        }, {
                             "name": "deprecated",
-                            "text": "This property is deprecated and will be removed from the code in the future."
+                            "text": "Use the `--vds-card-default-border-color` CSS custom property instead.\nThis prop will be removed in a future release."
                         }],
-                    "text": "Allows changing the default border color."
+                    "text": "Overrides the default border color with a Volt color token."
                 },
                 "getter": false,
                 "setter": false,
@@ -276,12 +634,13 @@ export class VdsCard {
                 "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"
                         }
                     }
                 },
@@ -289,10 +648,13 @@ export class VdsCard {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "type",
+                            "text": "{Colors}"
+                        }, {
                             "name": "deprecated",
-                            "text": "This property is deprecated and will be removed from the code in the future."
+                            "text": "Use the `--vds-card-default-border-hover-color` CSS custom property instead.\nThis prop will be removed in a future release."
                         }],
-                    "text": "Allows changing the border color when hovering."
+                    "text": "Overrides the border color on hover with a Volt color token."
                 },
                 "getter": false,
                 "setter": false,
@@ -309,8 +671,14 @@ export class VdsCard {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when card have been selected (only works when selectable property is true)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "select"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<boolean>}"
+                        }],
+                    "text": "Emits event when card has been selected (only works when selectable property is true)"
                 },
                 "complexType": {
                     "original": "boolean",
@@ -324,8 +692,14 @@ export class VdsCard {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits event when card have been clicked on (only works when button property is true)"
+                    "tags": [{
+                            "name": "event",
+                            "text": "click"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
+                    "text": "Emits event when card has been clicked on (only works when button property is true)"
                 },
                 "complexType": {
                     "original": "MouseEvent",
@@ -352,4 +726,3 @@ export class VdsCard {
             }];
     }
 }
-//# sourceMappingURL=vds-card.js.map