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

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

@@ -1,23 +1,130 @@
 import { Host, h } from "@stencil/core";
 import { getIconSize } from "../../utils/icon-attr.utils";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-radio-button
+ * @description A radio button component for single selection from a group of options. Form-associated component that integrates seamlessly with native forms and supports labels, states, and custom styling.
+ *
+ * @example
+ * <!-- Basic radio button -->
+ * <vds-radio-button value="option1" label-value="Option 1"></vds-radio-button>
+ *
+ * @example
+ * <!-- Radio button group -->
+ * <vds-radio-button value="small" label-value="Small" name="size"></vds-radio-button>
+ * <vds-radio-button value="medium" label-value="Medium" name="size" checked="true"></vds-radio-button>
+ * <vds-radio-button value="large" label-value="Large" name="size"></vds-radio-button>
+ *
+ * @example
+ * <!-- Radio button with label at start -->
+ * <vds-radio-button
+ *   value="option1"
+ *   label-value="Label on Left"
+ *   label-alignment="start">
+ * </vds-radio-button>
+ *
+ * @example
+ * <!-- Large size radio button -->
+ * <vds-radio-button
+ *   value="option1"
+ *   label-value="Large Radio"
+ *   size="large">
+ * </vds-radio-button>
+ *
+ * @example
+ * <!-- Checked radio button -->
+ * <vds-radio-button
+ *   value="selected"
+ *   label-value="Selected Option"
+ *   checked="true">
+ * </vds-radio-button>
+ *
+ * @example
+ * <!-- Disabled radio button -->
+ * <vds-radio-button
+ *   value="disabled"
+ *   label-value="Disabled Option"
+ *   disabled="true">
+ * </vds-radio-button>
+ *
+ * @example
+ * <!-- Radio button in error state -->
+ * <vds-radio-button
+ *   value="error"
+ *   label-value="Error Option"
+ *   error="true">
+ * </vds-radio-button>
+ *
+ * @example
+ * <!-- Radio button without label -->
+ * <vds-radio-button value="no-label"></vds-radio-button>
+ *
+ * @example
+ * <!-- Radio button in form -->
+ * <form>
+ *   <fieldset>
+ *     <legend>Choose a delivery method:</legend>
+ *     <vds-radio-button value="standard" label-value="Standard Shipping" name="shipping"></vds-radio-button>
+ *     <vds-radio-button value="express" label-value="Express Shipping" name="shipping"></vds-radio-button>
+ *     <vds-radio-button value="overnight" label-value="Overnight Shipping" name="shipping"></vds-radio-button>
+ *   </fieldset>
+ * </form>
+ *
+ * @example
+ * <!-- Radio group with large size and various states -->
+ * <vds-radio-button value="active" label-value="Active" size="large" checked="true"></vds-radio-button>
+ * <vds-radio-button value="inactive" label-value="Inactive" size="large"></vds-radio-button>
+ * <vds-radio-button value="pending" label-value="Pending" size="large" disabled="true"></vds-radio-button>
+ */
 export class VdsRadioButton {
     constructor() {
-        /** Defines the size of the radio */
+        /**
+         * Defines the size of the radio
+         * @type {"large" | "medium"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Sets the radio in checked state */
+        /**
+         * Sets the radio in checked state
+         * @type {boolean}
+         * @default false
+         */
         this.checked = false;
-        /** Sets the radio in disabled state */
+        /**
+         * Sets the radio in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Sets the radio in error state */
+        /**
+         * Sets the radio in error state
+         * @type {boolean}
+         * @default false
+         */
         this.error = false;
-        /** Aligns the label in relation to the radio-button*/
+        /**
+         * Aligns the label in relation to the radio-button
+         * @type {"start" | "end"}
+         * @default "end"
+         */
         this.labelAlignment = "end";
+        /**
+         * Internal state of the radio button
+         * @private
+         */
         this.state = "unchecked";
     }
+    /**
+     * Component lifecycle hook - set radio state before rendering
+     * @private
+     */
     componentWillRender() {
         this.setRadioState();
     }
+    /**
+     * Component lifecycle hook - set form value on load
+     * @private
+     */
     componentDidLoad() {
         if (this.internals && !!this.internals.setFormValue) {
             this.internals.setFormValue(this.checked.toString());
@@ -26,8 +133,7 @@ export class VdsRadioButton {
     /**
      * 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,10 +141,9 @@ export class VdsRadioButton {
         }
     }
     /**
-     * Executes every time the radio-button is being click.
-     *
-     * @param event - MouseEvent
-     * @returns void
+     * Executes every time the radio-button is being clicked.
+     * @private
+     * @param {MouseEvent} _ - MouseEvent (unused)
      */
     handleClick(_) {
         if (!this.disabled) {
@@ -47,13 +152,14 @@ export class VdsRadioButton {
         }
     }
     /**
-    * Toggles radio-button value.
-    * When parameter is not provided, if true get set to false. When false get set to true.
-    * Emits check event with checked value.
-    *
-    * @param checked - Boolean (Optional)
-    * @returns Promise<void>
-    */
+     * Toggles radio-button value.
+     * When parameter is not provided, if true gets set to false. When false gets set to true.
+     * Emits check event with checked value.
+     * @method
+     * @public
+     * @param {boolean} checked - Boolean (Optional) - Force checked state to specific value
+     * @returns {Promise<void>}
+     */
     toggleCheck(checked = undefined) {
         if (!this.disabled) {
             this.checked = checked === undefined ? !this.checked : checked;
@@ -64,9 +170,9 @@ export class VdsRadioButton {
     /**
      * Emits event values when radio button state changed.
      * Emits check event with checked prop.
-     * Emits input event with value prop.
-     *
-     * @returns void
+     * Emits radioCheck event with checked, value, and element.
+     * Dispatches native input event.
+     * @private
      */
     emitValues() {
         const inputEvent = new InputEvent("input");
@@ -83,16 +189,15 @@ export class VdsRadioButton {
      * Determine state of the radio based on the checked property.
      * When checked is true, state is checked.
      * When checked is false, state is unchecked.
-     *
-     * @returns void
+     * @private
      */
     setRadioState() {
         this.state = 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 calculate the size.
+     * @private
+     * @returns {HTMLStencilElement} Radio button icon element
      */
     renderRadioButton() {
         const size = getIconSize(this.size);
@@ -104,16 +209,20 @@ export class VdsRadioButton {
         }
     }
     /**
-    * Returns the vds-label for the radio-button when there is a label provided.
-    *
-    * @returns HTMLStencilElement
-    */
+     * Returns the vds-label for the radio-button when there is a label provided.
+     * @private
+     * @returns {HTMLStencilElement} Label element
+     */
     renderLabel() {
         return h("vds-label", { class: "radio-button-label", labelValue: this.labelValue, size: this.size, disabled: this.disabled });
     }
+    /**
+     * Render the radio button component
+     * @returns {HTMLElement} The rendered radio button element
+     */
     render() {
         var _a;
-        return (h(Host, { key: '0e1cd74451cd676ab28e3bf472c0841244a15468', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '3385b3acc29b97967747d57430ccac219048f770', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: 'c5109010f8cf87a4f3ba0b0609589b5c05e21bf1', class: "vds-radio-button" }, h("input", { key: '253ea75a8f1d53e6ed44b83e3645d35269ff77da', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
+        return (h(Host, { key: '5cd44d55ec28fe4c90693462ec0aa8b3e2677f54', state: this.state, class: this.disabled ? "vds-radio-button--disabled" : "" }, h("div", { key: '1dbe0f8cbcb1685ffcdc821cc7c93a8265cf7c43', onClick: (evt) => { this.handleClick(evt); }, class: combineClasses("vds-radio-button__container", `vds-radio-button__container--size-${this.size}`, `vds-radio-button__container--label-alignment-${this.labelAlignment}`, this.checked ? "vds-radio-button--checked" : "", this.disabled ? "vds-radio-button--disabled" : "", this.error ? "vds-radio-button--error" : "") }, h("div", { key: '110c941b8d86a579a5a28dddf9f808f5446768db', class: "vds-radio-button" }, h("input", { key: '7bb078dd6aa60534445fd2773b84be6ab27cafed', type: "radio", checked: this.checked, value: this.value, id: (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.id, disabled: this.disabled }), this.renderRadioButton()), this.labelValue && this.renderLabel())));
     }
     static get is() { return "vds-radio-button"; }
     static get encapsulation() { return "shadow"; }
@@ -141,7 +250,13 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"large\" | \"medium\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
                     "text": "Defines the size of the radio"
                 },
                 "getter": false,
@@ -161,7 +276,13 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the radio in checked state"
                 },
                 "getter": false,
@@ -181,7 +302,13 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the radio in disabled state"
                 },
                 "getter": false,
@@ -201,7 +328,13 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the radio in error state"
                 },
                 "getter": false,
@@ -221,8 +354,11 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "It\u2019s useful for identifying in a radio group"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "It's useful for identifying in a radio group"
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +376,13 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"start\" | \"end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"end\""
+                        }],
                     "text": "Aligns the label in relation to the radio-button"
                 },
                 "getter": false,
@@ -260,7 +402,10 @@ export class VdsRadioButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the text to be shown in the radio-button"
                 },
                 "getter": false,
@@ -278,7 +423,13 @@ export class VdsRadioButton {
                 "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": {
@@ -293,7 +444,13 @@ export class VdsRadioButton {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "radioCheck"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<RadioButtonChecked>}"
+                        }],
                     "text": "Emits radio button checked value"
                 },
                 "complexType": {
@@ -303,7 +460,8 @@ export class VdsRadioButton {
                         "RadioButtonChecked": {
                             "location": "import",
                             "path": "./vds-radio-button.utils",
-                            "id": "src/components/radio-button/vds-radio-button.utils.ts::RadioButtonChecked"
+                            "id": "src/components/radio-button/vds-radio-button.utils.ts::RadioButtonChecked",
+                            "referenceLocation": "RadioButtonChecked"
                         }
                     }
                 }
@@ -317,7 +475,7 @@ export class VdsRadioButton {
                     "parameters": [{
                             "name": "checked",
                             "type": "boolean",
-                            "docs": "- Boolean (Optional)"
+                            "docs": "- Boolean (Optional) - Force checked state to specific value"
                         }],
                     "references": {
                         "Promise": {
@@ -328,13 +486,19 @@ export class VdsRadioButton {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggles radio-button value. \nWhen parameter is not provided, if true get set to false. When false get set to true.\nEmits check event with checked value.",
+                    "text": "Toggles radio-button value.\nWhen parameter is not provided, if true gets set to false. When false gets set to true.\nEmits check event with checked value.",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "param",
-                            "text": "checked - Boolean (Optional)"
+                            "text": "checked - Boolean (Optional) - Force checked state to specific value"
                         }, {
                             "name": "returns",
-                            "text": "Promise<void>"
+                            "text": undefined
                         }]
                 }
             }
@@ -349,4 +513,3 @@ export class VdsRadioButton {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=vds-radio-button.js.map

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

@@ -47,4 +47,3 @@ BasicUsage.args = {
     error: false,
     labelAlignment: "end"
 };
-//# sourceMappingURL=vds-radio-button.stories.js.map

package/dist/collection/components/radio-button/vds-radio-button.utils.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=vds-radio-button.utils.js.map

package/dist/collection/components/segmented-button/vds-segmented-button.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: block;
   width: fit-content;
@@ -940,21 +945,38 @@
   box-shadow: none;
   width: fit-content;
   background: var(--vds-segmented-button-background);
-  height: var(--spacing-08);
   display: flex;
-  padding: var(--spacing-02) var(--spacing-03);
   justify-content: center;
   align-items: center;
-  gap: var(--spacing-02);
-  border-radius: var(--vds-segmented-button-border);
+  gap: var(--spacing-03);
 }
-:host .vds-segmented-button .vds-segmented-button__text {
-  color: var(--vds-segmented-button-text-color);
+:host .vds-segmented-button.vds-segmented-button--size-medium {
+  height: var(--spacing-08);
+  padding: var(--spacing-02) var(--spacing-03);
+}
+:host .vds-segmented-button.vds-segmented-button--size-medium .vds-segmented-button__text {
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25rem;
   letter-spacing: normal;
+}
+:host .vds-segmented-button.vds-segmented-button--size-large {
+  height: var(--spacing-11);
+  padding: var(--spacing-03) var(--spacing-04);
+}
+:host .vds-segmented-button.vds-segmented-button--size-large .vds-segmented-button__text {
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+:host .vds-segmented-button {
+  border-radius: var(--vds-segmented-button-border);
+}
+:host .vds-segmented-button .vds-segmented-button__text {
+  color: var(--vds-segmented-button-text-color);
   text-align: center;
   font-feature-settings: "liga" off, "clig" off;
 }