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

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

@@ -1,16 +1,126 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @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 class VdsSegmentedButton {
     constructor() {
-        /** Sets the segment button in active state */
+        /**
+         * Sets the segment button in active state
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
-        /** When is-active is true, shows checkmark */
+        /**
+         * When is-active is true, shows checkmark
+         * @type {boolean}
+         * @default false
+         */
         this.hasCheckmark = false;
-        /** Set the segmented-button to disabled state */
+        /**
+         * Set the segmented-button to disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** 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
+         */
         this.fullWidth = false;
+        /**
+         * Sets the segmented button size
+         * @type {"large" | "medium"}
+         * @default "medium"
+         */
+        this.size = "medium";
     }
+    /**
+     * Watch for isActive changes and emit selected/deselected events
+     * @private
+     */
     setActiveProp() {
         if (this.isActive) {
             this.selected.emit();
@@ -19,6 +129,11 @@ export class VdsSegmentedButton {
             this.deselected.emit();
         }
     }
+    /**
+     * Handle click event on segmented button
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleClick(evt) {
         evt.preventDefault();
         this.segmentedButtonClicked.emit({
@@ -26,11 +141,21 @@ export class VdsSegmentedButton {
             selected: this.isActive
         });
     }
+    /**
+     * Generate informative icon element or checkmark when active
+     * @private
+     * @returns {HTMLStencilElement} Icon element
+     */
     generateInformativeIcon() {
-        return (h("vds-icon", { class: "vds-segmented-button__informative-icon", "svg-icon": this.isActive && this.hasCheckmark ? "good" : this.informativeIcon, size: "1.25rem", alt: this.value }));
+        const iconSize = this.size === "large" ? "1.5rem" : "1.25rem";
+        return (h("vds-icon", { class: "vds-segmented-button__informative-icon", "svg-icon": this.isActive && this.hasCheckmark ? "good" : this.informativeIcon, size: iconSize, alt: this.value }));
     }
+    /**
+     * Render the segmented button component
+     * @returns {HTMLElement} The rendered segmented button element
+     */
     render() {
-        return (h(Host, { key: 'ef37f1201d5b5f6b4436074c01333f3e756ad7d3', class: combineClasses(this.disabled ? "vds-segmented-button--disabled" : "", this.fullWidth ? "vds-segmented-button--full-width" : "") }, h("button", { key: 'be9a4369ec3d55a29388c9a56e17e805ecc5c29f', class: combineClasses("vds-segmented-button", this.disabled ? "vds-segmented-button--disabled" : "", this.isActive ? "vds-segmented-button--active" : ""), title: this.value, disabled: this.disabled, onClick: (evt) => this.handleClick(evt) }, (this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon(), h("span", { key: 'c47672d9b2220852b338fb1c240962f4fae7103c', class: "vds-segmented-button__text" }, h("slot", { key: 'cc07b120d99f888333ae0e10e7ab480a2c36888b' })))));
+        return (h(Host, { key: '4dde405c8bb840694e99f60bac0092ed51122146', class: combineClasses(this.disabled ? "vds-segmented-button--disabled" : "", this.fullWidth ? "vds-segmented-button--full-width" : "") }, h("button", { key: '884047d4316d439079e9faf7ce371b8ae7bc603f', class: combineClasses("vds-segmented-button", this.disabled ? "vds-segmented-button--disabled" : "", this.isActive ? "vds-segmented-button--active" : "", `vds-segmented-button--size-${this.size}`), title: this.value, disabled: this.disabled, onClick: (evt) => this.handleClick(evt) }, (this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon(), h("span", { key: '84e5eadfb62652a7a6360950f8598448ace0ffeb', class: "vds-segmented-button__text" }, h("slot", { key: 'a5c20b4a29a3d86cbb343fab2892122765fb8d42' })))));
     }
     static get is() { return "vds-segmented-button"; }
     static get encapsulation() { return "shadow"; }
@@ -57,7 +182,10 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Sets the icon at the left of the segment button"
                 },
                 "getter": false,
@@ -76,7 +204,13 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the segment button in active state"
                 },
                 "getter": false,
@@ -96,7 +230,13 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "When is-active is true, shows checkmark"
                 },
                 "getter": false,
@@ -116,7 +256,13 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Set the segmented-button to disabled state"
                 },
                 "getter": false,
@@ -136,7 +282,10 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Set the segmented-button value"
                 },
                 "getter": false,
@@ -155,7 +304,13 @@ export class VdsSegmentedButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Allows the component to be adaptable to the container available horizontal space"
                 },
                 "getter": false,
@@ -163,6 +318,32 @@ export class VdsSegmentedButton {
                 "reflect": false,
                 "attribute": "full-width",
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"large\" | \"medium\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
+                    "text": "Sets the segmented button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"medium\""
             }
         };
     }
@@ -174,7 +355,13 @@ export class VdsSegmentedButton {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "segmentedButtonClicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<{ value: string, selected: boolean }>}"
+                        }],
                     "text": "Emits event when item gets clicked"
                 },
                 "complexType": {
@@ -189,7 +376,13 @@ export class VdsSegmentedButton {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "selected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
                     "text": "Emits event when item is selected"
                 },
                 "complexType": {
@@ -204,7 +397,13 @@ export class VdsSegmentedButton {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "deselected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
                     "text": "Emits event when item is deselected"
                 },
                 "complexType": {
@@ -222,4 +421,3 @@ export class VdsSegmentedButton {
             }];
     }
 }
-//# sourceMappingURL=vds-segmented-button.js.map

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

@@ -5,18 +5,22 @@ export default {
     parameters: {
         docs: {
             toc: true,
-        }
+        },
     },
     argTypes: {
         informativeIcon: {
             options: [...ICON_LIST, undefined],
-            control: { type: "select" }
+            control: { type: 'select' },
         },
         icon: {
             options: [...ICON_LIST, undefined],
-            control: { type: "select" }
+            control: { type: 'select' },
+        },
+        size: {
+            options: ['medium', 'large'],
+            control: { type: 'select' },
         },
-    }
+    },
 };
 const styles = `
     .container {
@@ -31,13 +35,14 @@ const codeTemplate = args => {
 <div class="container">
     <vds-segmented-button
         value="${args.value}"
-        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ''}
         is-active="${args.isActive || false}"
         has-checkmark="${args.hasCheckmark || false}"
         disabled="${args.disabled || false}"
         full-width="${args.fullWidth || false}"
-        >
-    ${args.value}
+        size="${args.size || 'medium'}"
+    >
+        ${args.value}
     </vds-segmented-button>
 </div>
 `;
@@ -50,6 +55,7 @@ BasicUsage.args = {
     hasCheckmark: false,
     isActive: false,
     fullWidth: false,
+    size: 'medium',
 };
 const codeIconTemplate = args => {
     return `
@@ -60,6 +66,7 @@ const codeIconTemplate = args => {
         is-active="${args.isActive || false}"
         has-checkmark="${args.hasCheckmark || false}"
         disabled="${args.disabled || false}"
+        size="${args.size || 'medium'}"
     >
         <vds-icon svg-icon="${args.icon}"></vds-icon>
     </vds-segmented-button>
@@ -73,6 +80,7 @@ IconUsage.args = {
     icon: 'bell',
     hasCheckmark: false,
     isActive: false,
+    size: 'medium',
 };
 const customColorsCodeTemplate = args => {
     return `
@@ -114,7 +122,8 @@ ${styles}
         is-active="${args.isActive || false}"
         has-checkmark="${args.hasCheckmark || false}"
         disabled="${args.disabled || false}"
-        >
+        size="${args.size || 'medium'}"
+    >
     </vds-segmented-button>
 </div>
 `;
@@ -126,5 +135,5 @@ CustomColorsUsage.args = {
     informativeIcon: 'desktop-computer',
     hasCheckmark: false,
     isActive: false,
+    size: 'medium',
 };
-//# sourceMappingURL=vds-segmented-button.stories.js.map

package/dist/collection/components/sheet/vds-sheet.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 {
   --vds-sheet-background-color: var(--surface-medium);
   --vds-sheet-backdrop-color: var(--color-interaction-black-lower);
@@ -911,18 +916,22 @@
   --vds-sheet-border-radius: 28px;
   --vds-sheet-drag-handle-color: var(--color-icon-high);
   --vds-sheet-transition-duration: 0.3s;
+  --vds-sheet-backdrop-z-index: -1;
+  --vds-sheet-content-z-index: var(--elevation-layer-6);
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: var(--elevation-layer-5);
+  z-index: var(--vds-sheet-content-z-index);
   width: 100%;
   height: fit-content;
+  opacity: 1;
+  transition: opacity var(--vds-sheet-transition-duration) ease-out;
 }
 :host .vds-sheet__backdrop {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: -1;
+  z-index: var(--vds-sheet-backdrop-z-index);
   width: 100vw;
   height: 100vh;
   background-color: var(--vds-sheet-backdrop-color);
@@ -940,7 +949,6 @@
   gap: var(--spacing-05);
   box-sizing: border-box;
   width: 100%;
-  max-height: 80vh;
   padding: 0 var(--spacing-05) var(--spacing-05);
   background-color: var(--vds-sheet-background-color);
   border-radius: var(--vds-sheet-border-radius) var(--vds-sheet-border-radius) 0 0;
@@ -969,11 +977,11 @@
 }
 
 :host(.vds-sheet--closed) {
-  visibility: hidden;
+  opacity: 0;
   pointer-events: none;
 }
 
 :host(.vds-sheet--opened) {
-  visibility: visible;
+  opacity: 1;
   pointer-events: auto;
 }