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

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

@@ -175,4 +175,3 @@ CustomColorsUsage.args = {
     button: false,
     disabled: false
 };
-//# sourceMappingURL=vds-card.stories.js.map

package/dist/collection/components/checkbox/vds-checkbox.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/checkbox/vds-checkbox.js

@@ -1,25 +1,67 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { CheckboxEvent } from "./vds-checkbox.utils";
+/**
+ * @component vds-checkbox
+ * @description A checkbox component that supports standard, indeterminate, and disabled states. Form-associated with support for native form submission and validation. Emits custom events with modifier key information.
+ * @slot - The default slot is not used; use the labelValue prop instead
+ */
 export class VdsBasicCheckbox {
     constructor() {
-        /** Sets the checkbox in checked state */
+        /**
+         * Sets the checkbox in checked state
+         * @type {boolean}
+         * @default false
+         */
         this.checked = false;
-        /** Sets the checkbodx in indeterminate state */
+        /**
+         * Sets the checkbox in indeterminate state
+         * @type {boolean}
+         * @default false
+         */
         this.indeterminate = false;
-        /** Sets the checkbox in disabled state */
+        /**
+         * Sets the checkbox in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the checkbox in error state */
+        /**
+         * Sets the checkbox in error state
+         * @type {boolean}
+         * @default false
+         */
         this.error = false;
-        /** Sets the checkbox's size */
+        /**
+         * Sets the checkbox's size
+         * @type {"medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Toggles the required sign in the field */
+        /**
+         * Toggles the required sign in the field
+         * @type {boolean}
+         * @default false
+         */
         this.isRequired = false;
+        /**
+         * Internal state tracking for checkbox (checked, unchecked, or indeterminate)
+         * @private
+         * @type {"checked" | "unchecked" | "indeterminate"}
+         */
         this.state = "unchecked";
     }
+    /**
+     * Lifecycle hook that runs before component renders
+     * @returns {void}
+     */
     componentWillRender() {
         this.setCheckboxState();
     }
+    /**
+     * Lifecycle hook that runs after component is loaded
+     * @returns {void}
+     */
     componentDidLoad() {
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.checked.toString());
@@ -29,8 +71,7 @@ export class VdsBasicCheckbox {
      * Executes every time checked value changes.
      * Sets indeterminate value to false in order to guarantee a change in value.
      * Sets form value in order to work properly with native forms
-     *
-     * @returns void
+     * @returns {void}
      */
     setCheckedStates() {
         this.indeterminate = false;
@@ -39,23 +80,23 @@ export class VdsBasicCheckbox {
         }
     }
     /**
-     * Executes every time the checkbox is being click.
+     * Executes every time the checkbox is being clicked.
      * Executes toggleCheck method.
-     *
-     * @param event - MouseEvent
-     * @returns void
+     * @param {MouseEvent} event - The mouse event from the click
+     * @returns {void}
      */
     handleClick(event) {
         this.toggleCheck(event);
     }
     /**
-    * Toggles checkbox value.
-    * Emits checkboxChange event with CheckboxEvent value.
-    * Emits check event with checked value.
-    *
-    * @param evt - KeyboardEvent | MouseEvent
-    * @returns Promise<void>
-    */
+     * Toggles checkbox value.
+     * Emits checkboxChange event with CheckboxEvent value.
+     * Emits check event with checked value.
+     * @method
+     * @public
+     * @param {KeyboardEvent | MouseEvent} evt - The keyboard or mouse event (optional)
+     * @returns {Promise<void>}
+     */
     toggleCheck(evt) {
         if (!this.disabled) {
             const inputEvent = new InputEvent("input");
@@ -69,20 +110,20 @@ export class VdsBasicCheckbox {
         return Promise.resolve();
     }
     /**
-     * Determine state of the checkbox based on the indeterminate and checked properties.
-     * When indetermanate is true, state is indeterminate.
-     * When indetermanate is false and checked is true, state is checked.
-     * When indetermanate is false and checked is false, state is unchecked.
-     *
-     * @returns void
+     * Determines state of the checkbox based on the indeterminate and checked properties.
+     * When indeterminate is true, state is indeterminate.
+     * When indeterminate is false and checked is true, state is checked.
+     * When indeterminate is false and checked is false, state is unchecked.
+     * @private
+     * @returns {void}
      */
     setCheckboxState() {
         this.state = this.indeterminate ? "indeterminate" : this.checked ? "checked" : "unchecked";
     }
     /**
-     * Returns the icon prop based on the state and calculate the size.
-     *
-     * @returns HTMLStencilElement
+     * Returns the icon element based on the state and calculates the size.
+     * @private
+     * @returns {HTMLStencilElement} The rendered checkbox icon
      */
     renderCheckbox() {
         const size = this.size === "large" ? "1.5rem" : "1.25rem";
@@ -98,16 +139,20 @@ export class VdsBasicCheckbox {
         }
     }
     /**
-    * Returns the vds-label for the checkbox when there is a label provided.
-    *
-    * @returns HTMLStencilElement
-    */
+     * Returns the vds-label for the checkbox when there is a label provided.
+     * @private
+     * @returns {HTMLStencilElement} The rendered label element
+     */
     renderLabel() {
         return h("vds-label", { class: "checkbox-label", labelValue: this.labelValue, required: this.isRequired, size: this.size, disabled: this.disabled });
     }
+    /**
+     * Renders the checkbox component
+     * @returns {HTMLStencilElement} The rendered checkbox element
+     */
     render() {
         var _a;
-        return (h(Host, { key: 'b9cb49f14833104b646f379f2724a4df07a576e7', state: this.state }, h("div", { key: '5b4dc6536b46a28648955985debd88e806272b02', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: 'e4ddf360caaa127f801fd54110e54694d2c48ac7', class: "vds__checkbox" }, h("input", { key: 'd6f26b4bd829916b6f69de8428d99545a5a1288a', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: '4624f32b6e10e9b9ce4af61131a011c8238343bd', state: this.state }, h("div", { key: '9662ace1df123948879bafd4febe78468240bdd2', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds__checkbox__container", `vds__checkbox__container--size-${this.size}`, this.checked && !this.indeterminate ? "vds__checkbox--checked" : "", this.indeterminate ? "vds__checkbox--indeterminate" : "", this.disabled ? "vds__checkbox--disabled" : "", this.error ? "vds__checkbox--error" : "") }, h("div", { key: '78dcdf3684734b6cd01e9f8e610c0b2df08ce2ed', class: "vds__checkbox" }, h("input", { key: '51c401605e7cb04fbeb353852575d2b007f69557', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderCheckbox()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -135,8 +180,11 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the text to be shown in the checkbox"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the text to be shown in the checkbox label"
                 },
                 "getter": false,
                 "setter": false,
@@ -154,7 +202,13 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the checkbox in checked state"
                 },
                 "getter": false,
@@ -174,8 +228,14 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the checkbodx in indeterminate state"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the checkbox in indeterminate state"
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +254,13 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the checkbox in disabled state"
                 },
                 "getter": false,
@@ -214,7 +280,13 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the checkbox in error state"
                 },
                 "getter": false,
@@ -234,7 +306,13 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
                     "text": "Sets the checkbox's size"
                 },
                 "getter": false,
@@ -254,7 +332,13 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Toggles the required sign in the field"
                 },
                 "getter": false,
@@ -274,8 +358,11 @@ export class VdsBasicCheckbox {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the value in the input. Usually uses checked prop as string. \nUsed to manage Reactive forms and other native functionality"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the value in the input. Usually uses checked prop as string.\nUsed to manage Reactive forms and other native functionality"
                 },
                 "getter": false,
                 "setter": false,
@@ -292,8 +379,14 @@ export class VdsBasicCheckbox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Event which is triggered when checkbox state changes. This event also captures if\nany of the special keys (shift, ctrl, meta or alt) where pressed when the checkbox state\nchanged. Use CheckboxEvent.isChecked() or\ncheckbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n\tif(event.detail == true) {\n\t\tconsole.log('Checked');\n\t\t}\nconsole.log(event.detail.altKey);\nconsole.log(event.detail.shiftKey);\nconsole.log(event.detail.ctrlKey);\n})"
+                    "tags": [{
+                            "name": "event",
+                            "text": "checkboxChange"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<CheckboxEvent>}"
+                        }],
+                    "text": "Event which is triggered when checkbox state changes. This event also captures if\nany of the special keys (shift, ctrl, meta or alt) were pressed when the checkbox state\nchanged. Use CheckboxEvent.isChecked() or\ncheckbox.on('checkboxEvent', (event : CustomEvent<CheckboxEvent>) => {\n\tif(event.detail == true) {\n\t\tconsole.log('Checked');\n\t\t}\nconsole.log(event.detail.altKey);\nconsole.log(event.detail.shiftKey);\nconsole.log(event.detail.ctrlKey);\n})"
                 },
                 "complexType": {
                     "original": "CheckboxEvent",
@@ -302,7 +395,8 @@ export class VdsBasicCheckbox {
                         "CheckboxEvent": {
                             "location": "import",
                             "path": "./vds-checkbox.utils",
-                            "id": "src/components/checkbox/vds-checkbox.utils.ts::CheckboxEvent"
+                            "id": "src/components/checkbox/vds-checkbox.utils.ts::CheckboxEvent",
+                            "referenceLocation": "CheckboxEvent"
                         }
                     }
                 }
@@ -313,7 +407,13 @@ export class VdsBasicCheckbox {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "check"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<boolean>}"
+                        }],
                     "text": "Makes a custom change to target property using checked and indeterminate (use for React components)"
                 },
                 "complexType": {
@@ -330,8 +430,8 @@ export class VdsBasicCheckbox {
                     "signature": "(evt?: KeyboardEvent | MouseEvent) => Promise<void>",
                     "parameters": [{
                             "name": "evt",
-                            "type": "KeyboardEvent | MouseEvent",
-                            "docs": "- KeyboardEvent | MouseEvent"
+                            "type": "MouseEvent | KeyboardEvent",
+                            "docs": "- The keyboard or mouse event (optional)"
                         }],
                     "references": {
                         "Promise": {
@@ -352,11 +452,17 @@ export class VdsBasicCheckbox {
                 "docs": {
                     "text": "Toggles checkbox value.\nEmits checkboxChange event with CheckboxEvent value.\nEmits check event with checked value.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "param",
-                            "text": "evt - KeyboardEvent | MouseEvent"
+                            "text": "evt - The keyboard or mouse event (optional)"
                         }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": undefined
                         }]
                 }
             }
@@ -371,4 +477,3 @@ export class VdsBasicCheckbox {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-checkbox.js.map

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

@@ -49,4 +49,3 @@ BasicUsage.args = {
     error: false,
     isRequired: false,
 };
-//# sourceMappingURL=vds-checkbox.stories.js.map

package/dist/collection/components/checkbox/vds-checkbox.utils.js

@@ -30,4 +30,3 @@ export class CheckboxEvent extends Boolean {
         return this._shiftKey;
     }
 }
-//# sourceMappingURL=vds-checkbox.utils.js.map

package/dist/collection/components/chip/vds-chip.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,44 +909,43 @@
   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: inline-flex;
+  /** Default state tokens */
+  --vds-chip-background-color: transparent;
+  --vds-chip-background-hover-color: var(--color-interaction-brand-lowest);
+  --vds-chip-background-press-color: var(--color-interaction-brand-lower);
+  --vds-chip-border-color: var(--color-border-brand);
+  --vds-chip-content-color: var(--color-link-default);
+  --vds-chip-icon-color: var(--color-icon-brand-default);
+  /** Active state tokens */
+  --vds-chip-active-background-color: var(--color-background-brand-default);
+  --vds-chip-active-background-hover-color: var(--color-background-brand-hover);
+  --vds-chip-active-background-press-color: var(--color-background-brand-press);
+  --vds-chip-active-border-color: transparent;
+  --vds-chip-active-content-color: var(--static-white);
+  --vds-chip-active-icon-color: var(--static-white);
 }
 :host .vds__chip__container {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  background-color: transparent;
+  background-color: var(--vds-chip-background-color);
   border-radius: var(--radius-pill);
   border: none;
   box-sizing: border-box;
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-brand);
-  color: var(--color-link-default);
+  box-shadow: 0 0 0 0.0625rem inset var(--vds-chip-border-color);
+  color: var(--vds-chip-content-color);
   font-feature-settings: "clig" off, "liga" off;
 }
 :host .vds__chip__container.vds__chip__container--toggleable {
   cursor: pointer;
 }
 :host .vds__chip__container:hover {
-  background-color: var(--color-interaction-brand-lowest);
+  background-color: var(--vds-chip-background-hover-color);
 }
 :host .vds__chip__container:active, :host .vds__chip__container:active:hover {
-  background-color: var(--color-interaction-brand-lower);
+  background-color: var(--vds-chip-background-press-color);
 }
 :host .vds__chip__container:focus-visible {
   outline: 0.125rem solid var(--color-border-focus-2);
@@ -972,15 +987,27 @@
   box-shadow: none;
 }
 :host .vds__chip__container.vds__chip__container--active {
-  color: var(--static-white);
-  background-color: var(--color-background-brand-default);
-  box-shadow: none;
+  color: var(--vds-chip-active-content-color);
+  background-color: var(--vds-chip-active-background-color);
+  box-shadow: 0 0 0 0.0625rem inset var(--vds-chip-active-border-color);
 }
 :host .vds__chip__container.vds__chip__container--active:hover {
-  background-color: var(--color-background-brand-hover);
+  background-color: var(--vds-chip-active-background-hover-color);
 }
 :host .vds__chip__container.vds__chip__container--active:active, :host .vds__chip__container.vds__chip__container--active :active:hover {
-  background-color: var(--color-background-brand-press);
+  background-color: var(--vds-chip-active-background-press-color);
+}
+:host .vds__chip__container vds-icon::part(svg-icon) {
+  fill: var(--vds-chip-icon-color);
+}
+:host .vds__chip__container.vds__chip__container--active vds-icon::part(svg-icon) {
+  fill: var(--vds-chip-active-icon-color);
+}
+:host .vds__chip__container.vds__chip__container--disabled vds-icon::part(svg-icon) {
+  fill: var(--color-icon-disabled);
+}
+:host .vds__chip__container.vds__chip__container--disabled.vds__chip__container--active vds-icon::part(svg-icon) {
+  fill: var(--color-icon-white-high);
 }
 :host .vds__chip__container .vds-chip__icon {
   cursor: pointer;