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

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.js

@@ -1,11 +1,154 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-stepper-item-header
+ * @description A header component for stepper items that displays a title and optional description. Designed to be used within vds-stepper-item components to provide context for each step. Supports left and center text alignment.
+ *
+ * @example
+ * <!-- Basic stepper header with title only -->
+ * <vds-stepper-item-header
+ *   slot="item-header"
+ *   title="Step 1">
+ * </vds-stepper-item-header>
+ *
+ * @example
+ * <!-- Stepper header with title and description -->
+ * <vds-stepper-item-header
+ *   slot="item-header"
+ *   title="Personal Information"
+ *   description="Enter your name and contact details">
+ * </vds-stepper-item-header>
+ *
+ * @example
+ * <!-- Center aligned header -->
+ * <vds-stepper-item-header
+ *   slot="item-header"
+ *   title="Review"
+ *   text-alignment="center">
+ * </vds-stepper-item-header>
+ *
+ * @example
+ * <!-- Disabled stepper header -->
+ * <vds-stepper-item-header
+ *   slot="item-header"
+ *   title="Confirmation"
+ *   description="Complete previous steps first"
+ *   disabled="true">
+ * </vds-stepper-item-header>
+ *
+ * @example
+ * <!-- Used within vds-stepper-item -->
+ * <vds-stepper-item text="1">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Account Setup"
+ *     description="Create your account">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Completed step header -->
+ * <vds-stepper-item icon="check" state="completed">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Email Verified"
+ *     description="Successfully confirmed">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Error step header -->
+ * <vds-stepper-item text="2" state="error">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Payment Failed"
+ *     description="Please check your payment method">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Multi-step flow -->
+ * <vds-stepper-item text="1" state="completed">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Profile"
+ *     description="Basic information">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * <vds-stepper-item text="2">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Preferences"
+ *     description="Set your options">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * <vds-stepper-item text="3" disabled="true">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Review"
+ *     description="Final check">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Checkout process headers -->
+ * <vds-stepper-item icon="check" state="completed">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Cart"
+ *     description="3 items added">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * <vds-stepper-item text="2">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Shipping"
+ *     description="Enter delivery address">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * <vds-stepper-item text="3" disabled="true">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Payment"
+ *     description="Card details required">
+ *   </vds-stepper-item-header>
+ * </vds-stepper-item>
+ *
+ * @example
+ * <!-- Onboarding flow with descriptions -->
+ * <vds-stepper-item text="1">
+ *   <vds-stepper-item-header
+ *     slot="item-header"
+ *     title="Welcome"
+ *     description="Get started with your account">
+ *   </vds-stepper-item-header>
+ *   <div slot="item-content">
+ *     <p>Welcome to our platform!</p>
+ *   </div>
+ * </vds-stepper-item>
+ */
 export class VdsStepperItemHeader {
     constructor() {
-        /** Sets the stepper item header in disabled state */
+        /**
+         * Sets the stepper item header in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the text alignment */
+        /**
+         * Sets the text alignment
+         * @type {"center" | "left"}
+         * @default "left"
+         */
         this.textAlignment = 'left';
     }
+    /**
+     * Render the stepper item header component
+     * @returns {HTMLElement | null} The rendered header element, or null if no title or description provided
+     */
     render() {
         if (!this.title && !this.description) {
             return null;
@@ -41,7 +184,10 @@ export class VdsStepperItemHeader {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define the text in the title label"
                 },
                 "getter": false,
@@ -60,7 +206,10 @@ export class VdsStepperItemHeader {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define the text in the description label"
                 },
                 "getter": false,
@@ -79,7 +228,13 @@ export class VdsStepperItemHeader {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the stepper item header in disabled state"
                 },
                 "getter": false,
@@ -99,7 +254,13 @@ export class VdsStepperItemHeader {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"center\" | \"left\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"left\""
+                        }],
                     "text": "Sets the text alignment"
                 },
                 "getter": false,
@@ -111,4 +272,3 @@ export class VdsStepperItemHeader {
         };
     }
 }
-//# sourceMappingURL=vds-stepper-item-header.js.map

package/dist/collection/components/stepper-item-header/vds-stepper-item-header.stories.js

@@ -25,4 +25,3 @@ BasicUsage.args = {
     description: 'Step description',
     disabled: false,
 };
-//# sourceMappingURL=vds-stepper-item-header.stories.js.map

package/dist/collection/components/switch/vds-switch.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;
   --vds-switch-state-off: var(--color-background-brand-press);

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

@@ -1,23 +1,161 @@
 import { Host, h } from "@stencil/core";
 import { getIconSize } from "../../utils/icon-attr.utils";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-switch
+ * @description A toggle switch component for binary on/off states. Form-associated with native form support, customizable size, label positioning, and required field indicators. Ideal for settings, preferences, and feature toggles.
+ *
+ * @example
+ * <!-- Basic switch -->
+ * <vds-switch
+ *   label-value="Enable notifications">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Checked switch -->
+ * <vds-switch
+ *   label-value="Dark mode"
+ *   checked="true">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Large switch -->
+ * <vds-switch
+ *   label-value="Airplane mode"
+ *   size="large">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Disabled switch -->
+ * <vds-switch
+ *   label-value="Premium features"
+ *   disabled="true">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Required switch -->
+ * <vds-switch
+ *   label-value="Accept terms"
+ *   is-required="true">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Label at start -->
+ * <vds-switch
+ *   label-value="Auto-save"
+ *   label-alignment="start">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Switch without label -->
+ * <vds-switch checked="true"></vds-switch>
+ *
+ * @example
+ * <!-- Disabled checked switch -->
+ * <vds-switch
+ *   label-value="Read only"
+ *   checked="true"
+ *   disabled="true">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Switch with custom value -->
+ * <vds-switch
+ *   label-value="Newsletter subscription"
+ *   value="subscribed"
+ *   checked="true">
+ * </vds-switch>
+ *
+ * @example
+ * <!-- Switch with event handling -->
+ * <vds-switch
+ *   id="theme-switch"
+ *   label-value="Dark theme">
+ * </vds-switch>
+ * <script>
+ *   const themeSwitch = document.getElementById('theme-switch');
+ *   themeSwitch.addEventListener('check', (e) => {
+ *     console.log('Switch toggled:', e.detail);
+ *     document.body.classList.toggle('dark-theme', e.detail);
+ *   });
+ * </script>
+ *
+ * @example
+ * <!-- Settings panel with multiple switches -->
+ * <div style="display: flex; flex-direction: column; gap: 1rem;">
+ *   <vds-switch label-value="Push notifications" checked="true"></vds-switch>
+ *   <vds-switch label-value="Email notifications" checked="true"></vds-switch>
+ *   <vds-switch label-value="SMS notifications"></vds-switch>
+ *   <vds-switch label-value="Marketing emails" disabled="true"></vds-switch>
+ * </div>
+ *
+ * @example
+ * <!-- Form integration -->
+ * <form id="preferences-form">
+ *   <vds-switch
+ *     name="notifications"
+ *     label-value="Enable notifications"
+ *     checked="true">
+ *   </vds-switch>
+ *
+ *   <vds-switch
+ *     name="auto-save"
+ *     label-value="Auto-save changes"
+ *     is-required="true">
+ *   </vds-switch>
+ *
+ *   <button type="submit">Save Preferences</button>
+ * </form>
+ */
 export class VdsSwitch {
     constructor() {
-        /** Sets the switch in checked state */
+        /**
+         * Sets the switch in checked state
+         * @type {boolean}
+         * @default false
+         */
         this.checked = false;
-        /** Sets the switch in disabled state */
+        /**
+         * Sets the switch in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the switch's size */
+        /**
+         * Sets the switch'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;
-        /** Aligns the label in relation to the switch*/
+        /**
+         * Aligns the label in relation to the switch
+         * @type {"start" | "end"}
+         * @default "end"
+         */
         this.labelAlignment = "end";
+        /**
+         * Internal state of the switch
+         * @private
+         */
         this.state = "unchecked";
     }
+    /**
+     * Component lifecycle hook - sets switch state
+     * @private
+     */
     componentWillRender() {
         this.setSwitchState();
     }
+    /**
+     * Component lifecycle hook - sets form value
+     * @private
+     */
     componentDidLoad() {
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.checked.toString());
@@ -26,8 +164,7 @@ export class VdsSwitch {
     /**
      * Executes every time checked value changes.
      * Sets form value in order to work properly with native forms
-     *
-     * @returns void
+     * @private
      */
     setCheckedStates() {
         if (this.internals && !!this.internals.setFormValue) {
@@ -35,11 +172,10 @@ export class VdsSwitch {
         }
     }
     /**
-     * Executes every time the switch is being click.
+     * Executes every time the switch is being clicked.
      * Executes toggleCheck method.
-     *
-     * @param event - MouseEvent
-     * @returns void
+     * @private
+     * @param {MouseEvent} _ - The mouse event (unused)
      */
     handleClick(_) {
         this.toggleCheck();
@@ -47,8 +183,9 @@ export class VdsSwitch {
     /**
     * Toggles switch value.
     * Emits check event with checked value.
-    *
-    * @returns Promise<void>
+    * @method
+    * @public
+    * @returns {Promise<void>}
     */
     toggleCheck() {
         if (!this.disabled) {
@@ -64,16 +201,15 @@ export class VdsSwitch {
      * Determine state of the switch based on the checked property.
      * When checked is true, state is checked.
      * When checked is false, state is unchecked.
-     *
-     * @returns void
+     * @private
      */
     setSwitchState() {
         this.state = this.checked ? "checked" : "unchecked";
     }
     /**
      * Returns the icon prop based on the state and calculate the size.
-     *
-     * @returns HTMLStencilElement
+     * @private
+     * @returns {HTMLStencilElement} The switch icon element
      */
     renderSwitch() {
         const size = getIconSize(this.size);
@@ -86,15 +222,19 @@ export class VdsSwitch {
     }
     /**
     * Returns the vds-label for the switch when there is a label provided.
-    *
-    * @returns HTMLStencilElement
+    * @private
+    * @returns {HTMLStencilElement} The label element
     */
     renderLabel() {
         return h("vds-label", { class: "switch-label", labelValue: this.labelValue, required: this.isRequired, size: this.size, disabled: this.disabled });
     }
+    /**
+     * Render the switch component
+     * @returns {HTMLElement} The rendered switch element
+     */
     render() {
         var _a;
-        return (h(Host, { key: '43cc4e4fd3c91937ba73406f15202e9f57e8a893', state: this.state, class: this.disabled ? "vds-switch--disabled" : "" }, h("div", { key: '1c7349fde28961e9baff109ff9381b1e3b0888e3', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-switch__container", `vds-switch__container--size-${this.size}`, `vds-switch__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-switch--checked" : "", this.disabled ? "vds-switch--disabled" : "") }, h("div", { key: 'c0bd99188302ffbee43c5655ee592b19c0acf995', class: "vds-switch" }, h("input", { key: 'a63df6950183c16002c820fcccf683e8c866b0aa', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderSwitch()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: '52b186e7c53cde7108204dab11da5ce1aa191190', state: this.state, class: this.disabled ? "vds-switch--disabled" : "" }, h("div", { key: '291e791fb98866203e79151115fb48f1c4f35caa', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-switch__container", `vds-switch__container--size-${this.size}`, `vds-switch__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-switch--checked" : "", this.disabled ? "vds-switch--disabled" : "") }, h("div", { key: 'e35d3c99ab4323266f3fc478d83e204ccaec7fc2', class: "vds-switch" }, h("input", { key: '8f9b809b065e113918aca3eaa922e5cb3d38f397', type: "checkbox", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderSwitch()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -122,7 +262,10 @@ export class VdsSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the text to be shown in the switch"
                 },
                 "getter": false,
@@ -141,7 +284,13 @@ export class VdsSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the switch in checked state"
                 },
                 "getter": false,
@@ -161,7 +310,13 @@ export class VdsSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the switch in disabled state"
                 },
                 "getter": false,
@@ -181,7 +336,13 @@ export class VdsSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
                     "text": "Sets the switch's size"
                 },
                 "getter": false,
@@ -201,7 +362,13 @@ export class VdsSwitch {
                 "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,
@@ -221,8 +388,11 @@ export class VdsSwitch {
                 "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,
@@ -240,7 +410,13 @@ export class VdsSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"start\" | \"end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"end\""
+                        }],
                     "text": "Aligns the label in relation to the switch"
                 },
                 "getter": false,
@@ -259,7 +435,13 @@ export class VdsSwitch {
                 "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 (use for React components)"
                 },
                 "complexType": {
@@ -286,8 +468,14 @@ export class VdsSwitch {
                 "docs": {
                     "text": "Toggles switch value.\nEmits check event with checked value.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": undefined
                         }]
                 }
             }
@@ -302,4 +490,3 @@ export class VdsSwitch {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-switch.js.map

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

@@ -79,4 +79,3 @@ CustomColorsUsage.args = {
     isRequired: false,
     labelAlignment: 'end',
 };
-//# sourceMappingURL=vds-switch.stories.js.map