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

package/dist/types/components/progress-linear/vds-progress-linear.d.ts

@@ -1,56 +1,139 @@
+/**
+ * @component vds-progress-linear
+ * @description A linear (horizontal bar) progress indicator component that displays progress as a filled bar. Supports both determinate (specific percentage) and indeterminate (animated loop) states with customizable colors, statuses, and durations.
+ *
+ * @example
+ * <!-- Basic determinate progress at 50% -->
+ * <vds-progress-linear value="50"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Progress at 75% -->
+ * <vds-progress-linear value="75"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Indeterminate progress (animated loop) -->
+ * <vds-progress-linear duration="1000"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Success status progress -->
+ * <vds-progress-linear value="100" status="success"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Error status progress -->
+ * <vds-progress-linear value="30" status="error"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Default status progress -->
+ * <vds-progress-linear value="60" status="default"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Progress with custom colors -->
+ * <vds-progress-linear
+ *   value="65"
+ *   colors='{ "backgroundTrack": "color-background-neutral-secondary", "backgroundProgress": "color-background-brand-default" }'>
+ * </vds-progress-linear>
+ *
+ * @example
+ * <!-- Progress with aria label for accessibility -->
+ * <vds-progress-linear
+ *   value="45"
+ *   set-aria-label="Upload progress: 45%">
+ * </vds-progress-linear>
+ *
+ * @example
+ * <!-- Slow indeterminate animation (2 seconds) -->
+ * <vds-progress-linear duration="2000" status="default"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Fast indeterminate animation (300ms) -->
+ * <vds-progress-linear duration="300" status="success"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Complete progress with success status -->
+ * <vds-progress-linear value="100" status="success"></vds-progress-linear>
+ *
+ * @example
+ * <!-- Loading indicator -->
+ * <vds-progress-linear duration="800"></vds-progress-linear>
+ */
 export declare class VdsProgressLinear {
-    /** Sets the percentage filled number for determinate mode from 0 to 100 */
+    /**
+     * Sets the percentage filled number for determinate mode from 0 to 100
+     * @type {number}
+     */
     value: number;
-    /** Defines the color based on the status:
-     * error -> color-background-critical-default,
-     * success -> color-background-general-healthy-default,
-     * default -> color-background-brand-default */
+    /**
+     * Defines the color based on the status:
+     * - error -> color-background-critical-default
+     * - success -> color-background-general-healthy-default
+     * - default -> color-background-brand-default
+     * @type {"error" | "success" | "default"}
+     * @default "default"
+     */
     status: "error" | "success" | "default";
-    /** Sets the loop duration time for the indeterminate loop progress in miliseconds */
+    /**
+     * Sets the loop duration time for the indeterminate loop progress in milliseconds.
+     * When duration > 0, creates an animated indeterminate progress indicator.
+     * @type {number}
+     * @default 500
+     */
     duration: number;
-    /** Sets the aria label in badge */
+    /**
+     * Sets the aria label for accessibility
+     * @type {string}
+     */
     setAriaLabel: string;
-    /** Sets the progress indicator color from the Volt palette
-     * backgroundProgress - ThemeColors
-     * backgroundTrack - ThemeColors */
+    /**
+     * Sets the progress indicator color from the Volt palette:
+     * - backgroundProgress - ThemeColors
+     * - backgroundTrack - ThemeColors
+     * @type {{ [key: string]: string } | string}
+     */
     colors: {
         [key: string]: string;
     } | string;
+    /**
+     * Flag indicating whether custom colors are being used
+     * @private
+     */
     private customColors;
     /**
-     * Returns the percentage value to set as percentage
-     * When value is lower than 0, then returns 0.
-     * When value is greater than 100, then 0.
-     * else set value.
-     *
-     * @returns { width: string }
+     * Returns the percentage value to set as width.
+     * Clamps the value between 0 and 100.
+     * - When value is lower than 0, returns 0
+     * - When value is greater than 100, returns 100
+     * - Otherwise returns the value
+     * @private
+     * @returns {{ width: string }} Style object with width percentage
      */
     setProgress(): {
         width: string;
     };
     /**
-     * Returns the animation for the indeterminate slider
-     * Using the duration prop we return an animation effect in ms.
-     * Going from left to right using the value as the progress
-     *
-     * @returns { animation: string }
+     * Returns the animation for the indeterminate slider.
+     * Using the duration prop, returns an animation effect in ms.
+     * Creates a left-to-right animation using the value as the progress.
+     * @private
+     * @returns {{ animation: string } | {}} Animation style object or empty object
      */
     setDurationAnimation(): {
         animation: string;
     } | {};
     /**
-     * Sets the styles for the progress bar.
-     *
+     * Sets the styles for the progress bar including width and animation.
      * @private
-     * @returns {Object} An object containing the CSS styles for the progress bar.
+     * @returns {{ [key: string]: string }} An object containing the CSS styles for the progress bar
      */
     private setProgressStyles;
     /**
      * Sets custom colors for the progress bar.
-     *
      * @private
-     * @returns {Object} An object containing the CSS styles for the custom colors.
+     * @returns {{ [key: string]: string }} An object containing the CSS styles for the custom colors
      */
     private setCustomColors;
+    /**
+     * Render the linear progress component
+     * @returns {HTMLElement} The rendered linear progress element
+     */
     render(): any;
 }

package/dist/types/components/radio-button/vds-radio-button.d.ts

@@ -1,79 +1,202 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { RadioButtonChecked } from './vds-radio-button.utils';
+/**
+ * @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 declare class VdsRadioButton {
-    /** Defines the size of the radio */
+    /**
+     * Defines the size of the radio
+     * @type {"large" | "medium"}
+     * @default "medium"
+     */
     size: "large" | "medium";
-    /** Sets the radio in checked state */
+    /**
+     * Sets the radio in checked state
+     * @type {boolean}
+     * @default false
+     */
     checked: boolean;
-    /** Sets the radio in disabled state */
+    /**
+     * Sets the radio in disabled state
+     * @type {boolean}
+     * @default false
+     */
     disabled: boolean;
-    /** Sets the radio in error state */
+    /**
+     * Sets the radio in error state
+     * @type {boolean}
+     * @default false
+     */
     error: boolean;
-    /** It’s useful for identifying in a radio group */
+    /**
+     * It's useful for identifying in a radio group
+     * @type {string}
+     */
     value: string;
-    /** Aligns the label in relation to the radio-button*/
+    /**
+     * Aligns the label in relation to the radio-button
+     * @type {"start" | "end"}
+     * @default "end"
+     */
     labelAlignment: "start" | "end";
-    /** Sets the text to be shown in the radio-button */
+    /**
+     * Sets the text to be shown in the radio-button
+     * @type {string}
+     */
     labelValue: string;
     hostEl: HTMLElement;
     internals: ElementInternals;
-    /** Makes a custom change to target property using checked (use for React components) */
+    /**
+     * Makes a custom change to target property using checked (use for React components)
+     * @event check
+     * @type {EventEmitter<boolean>}
+     */
     check: EventEmitter<boolean>;
-    /** Emits radio button checked value */
+    /**
+     * Emits radio button checked value
+     * @event radioCheck
+     * @type {EventEmitter<RadioButtonChecked>}
+     */
     radioCheck: EventEmitter<RadioButtonChecked>;
+    /**
+     * Internal state of the radio button
+     * @private
+     */
     private state;
+    /**
+     * Component lifecycle hook - set radio state before rendering
+     * @private
+     */
     componentWillRender(): void;
+    /**
+     * Component lifecycle hook - set form value on load
+     * @private
+     */
     componentDidLoad(): void;
     /**
      * Executes every time checked value changes.
      * Sets form value in order to work properly with native forms
-     *
-     * @returns void
+     * @private
      */
     setCheckedStates(): void;
     /**
-     * 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(_: MouseEvent): void;
     /**
-    * 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?: boolean): Promise<void>;
     /**
      * 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
      */
     private emitValues;
     /**
      * 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
      */
     private setRadioState;
     /**
-     * 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
      */
     private renderRadioButton;
     /**
-    * 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
+     */
     private renderLabel;
+    /**
+     * Render the radio button component
+     * @returns {HTMLElement} The rendered radio button element
+     */
     render(): any;
 }

package/dist/types/components/segmented-button/vds-segmented-button.d.ts

@@ -1,30 +1,172 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { HTMLStencilElement } from '../../stencil-public-runtime';
+/**
+ * @component vds-segmented-button
+ * @description A button component designed to be part of a segmented control for presenting related options. Supports active states, checkmarks, icons, and can be used for single or multi-selection interfaces.
+ *
+ * @example
+ * <!-- Basic segmented button -->
+ * <vds-segmented-button value="option1">Option 1</vds-segmented-button>
+ *
+ * @example
+ * <!-- Segmented button group -->
+ * <div style="display: flex;">
+ *   <vds-segmented-button value="day" is-active="true">Day</vds-segmented-button>
+ *   <vds-segmented-button value="week">Week</vds-segmented-button>
+ *   <vds-segmented-button value="month">Month</vds-segmented-button>
+ * </div>
+ *
+ * @example
+ * <!-- Segmented button with icon -->
+ * <vds-segmented-button
+ *   value="grid"
+ *   informative-icon="grid-view">
+ *   Grid View
+ * </vds-segmented-button>
+ *
+ * @example
+ * <!-- Active segmented button with checkmark -->
+ * <vds-segmented-button
+ *   value="selected"
+ *   is-active="true"
+ *   has-checkmark="true">
+ *   Selected
+ * </vds-segmented-button>
+ *
+ * @example
+ * <!-- Disabled segmented button -->
+ * <vds-segmented-button
+ *   value="disabled"
+ *   disabled="true">
+ *   Disabled
+ * </vds-segmented-button>
+ *
+ * @example
+ * <!-- Full width segmented buttons -->
+ * <div style="display: flex;">
+ *   <vds-segmented-button value="option1" full-width="true">Option 1</vds-segmented-button>
+ *   <vds-segmented-button value="option2" full-width="true" is-active="true">Option 2</vds-segmented-button>
+ *   <vds-segmented-button value="option3" full-width="true">Option 3</vds-segmented-button>
+ * </div>
+ *
+ * @example
+ * <!-- View mode toggle with icons -->
+ * <div style="display: flex;">
+ *   <vds-segmented-button value="list" informative-icon="list-view" is-active="true">List</vds-segmented-button>
+ *   <vds-segmented-button value="grid" informative-icon="grid-view">Grid</vds-segmented-button>
+ *   <vds-segmented-button value="table" informative-icon="tile-view">Table</vds-segmented-button>
+ * </div>
+ *
+ * @example
+ * <!-- Time period selector -->
+ * <div style="display: flex;">
+ *   <vds-segmented-button value="today">Today</vds-segmented-button>
+ *   <vds-segmented-button value="week" is-active="true">This Week</vds-segmented-button>
+ *   <vds-segmented-button value="month">This Month</vds-segmented-button>
+ *   <vds-segmented-button value="year">This Year</vds-segmented-button>
+ * </div>
+ *
+ * @example
+ * <!-- Multi-select with checkmarks -->
+ * <div style="display: flex; flex-direction: column;">
+ *   <vds-segmented-button value="feature1" is-active="true" has-checkmark="true">Feature 1</vds-segmented-button>
+ *   <vds-segmented-button value="feature2" has-checkmark="true">Feature 2</vds-segmented-button>
+ *   <vds-segmented-button value="feature3" is-active="true" has-checkmark="true">Feature 3</vds-segmented-button>
+ * </div>
+ *
+ * @example
+ * <!-- Icon-only segmented buttons -->
+ * <div style="display: flex;">
+ *   <vds-segmented-button value="bold" informative-icon="edit"></vds-segmented-button>
+ *   <vds-segmented-button value="italic" informative-icon="edit" is-active="true"></vds-segmented-button>
+ *   <vds-segmented-button value="underline" informative-icon="edit"></vds-segmented-button>
+ * </div>
+ *
+ * @slot - Default slot for the button text content
+ */
 export declare class VdsSegmentedButton {
-    /** Sets the icon at the left of the segment button */
+    /**
+     * Sets the icon at the left of the segment button
+     * @type {string}
+     */
     informativeIcon: string;
-    /** Sets the segment button in active state */
+    /**
+     * Sets the segment button in active state
+     * @type {boolean}
+     * @default false
+     */
     isActive: boolean;
-    /** When is-active is true, shows checkmark */
+    /**
+     * When is-active is true, shows checkmark
+     * @type {boolean}
+     * @default false
+     */
     hasCheckmark: boolean;
-    /** Set the segmented-button to disabled state */
+    /**
+     * Set the segmented-button to disabled state
+     * @type {boolean}
+     * @default false
+     */
     disabled: boolean;
-    /** Set the segmented-button value */
+    /**
+     * Set the segmented-button value
+     * @type {string}
+     */
     value: string;
-    /** Allows the component to be adaptable to the container available horizontal space */
+    /**
+     * Allows the component to be adaptable to the container available horizontal space
+     * @type {boolean}
+     * @default false
+     */
     fullWidth: boolean;
-    /** Emits event when item gets clicked */
+    /**
+     * Sets the segmented button size
+     * @type {"large" | "medium"}
+     * @default "medium"
+     */
+    size: "medium" | "large";
+    /**
+     * Emits event when item gets clicked
+     * @event segmentedButtonClicked
+     * @type {EventEmitter<{ value: string, selected: boolean }>}
+     */
     segmentedButtonClicked: EventEmitter<{
         value: string;
         selected: boolean;
     }>;
-    /** Emits event when item is selected */
+    /**
+     * Emits event when item is selected
+     * @event selected
+     * @type {EventEmitter<void>}
+     */
     selected: EventEmitter<void>;
-    /** Emits event when item is deselected */
+    /**
+     * Emits event when item is deselected
+     * @event deselected
+     * @type {EventEmitter<void>}
+     */
     deselected: EventEmitter<void>;
     hostEl: HTMLElement;
+    /**
+     * Watch for isActive changes and emit selected/deselected events
+     * @private
+     */
     setActiveProp(): void;
+    /**
+     * Handle click event on segmented button
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleClick(evt: MouseEvent): void;
+    /**
+     * Generate informative icon element or checkmark when active
+     * @private
+     * @returns {HTMLStencilElement} Icon element
+     */
     generateInformativeIcon(): HTMLStencilElement;
+    /**
+     * Render the segmented button component
+     * @returns {HTMLElement} The rendered segmented button element
+     */
     render(): any;
 }

package/dist/types/components/segmented-button/vds-segmented-button.stories.d.ts

@@ -18,6 +18,12 @@ declare const _default: {
                 type: string;
             };
         };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;