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

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

@@ -1,20 +1,141 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-sheet
+ * @description A bottom sheet component that slides up from the bottom of the viewport to display content. Supports backdrop, drag-to-close interactions, custom heights, and keyboard accessibility. Ideal for mobile-first interfaces, forms, menus, and contextual information.
+ *
+ * @example
+ * <!-- Basic bottom sheet -->
+ * <vds-sheet id="mySheet">
+ *   <h2>Bottom Sheet Content</h2>
+ *   <p>This is a simple bottom sheet.</p>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with backdrop -->
+ * <vds-sheet backdrop="true" opened="true">
+ *   <h3>Sheet with Backdrop</h3>
+ *   <p>Click outside to close this sheet.</p>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with custom height (50% of viewport) -->
+ * <vds-sheet height="50%" backdrop="true">
+ *   <h3>Half Screen Sheet</h3>
+ *   <p>This sheet takes up 50% of the viewport height.</p>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with fixed pixel height -->
+ * <vds-sheet height="400px" backdrop="true">
+ *   <h3>Fixed Height Sheet</h3>
+ *   <p>This sheet has a fixed height of 400px.</p>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet without drag handle -->
+ * <vds-sheet hide-drag-handle="true" backdrop="true">
+ *   <h3>No Drag Handle</h3>
+ *   <p>This sheet cannot be dragged to close.</p>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with form -->
+ * <vds-sheet height="60%" backdrop="true">
+ *   <h3>Contact Form</h3>
+ *   <form>
+ *     <vds-input label="Name" placeholder="Enter your name"></vds-input>
+ *     <vds-input label="Email" placeholder="Enter your email"></vds-input>
+ *     <vds-textarea label="Message" placeholder="Your message"></vds-textarea>
+ *     <vds-button variant="primary">Submit</vds-button>
+ *   </form>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet for menu options -->
+ * <vds-sheet height="auto" backdrop="true">
+ *   <vds-menu-list>
+ *     <vds-menu-item icon="share" value="Share"></vds-menu-item>
+ *     <vds-menu-item icon="edit" value="Edit"></vds-menu-item>
+ *     <vds-menu-item icon="trash" value="Delete" danger="true"></vds-menu-item>
+ *   </vds-menu-list>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with programmatic control -->
+ * <vds-button onclick="document.getElementById('controlledSheet').open()">Open Sheet</vds-button>
+ * <vds-sheet id="controlledSheet" backdrop="true">
+ *   <h3>Controlled Sheet</h3>
+ *   <p>Opened programmatically via JavaScript.</p>
+ *   <vds-button onclick="document.getElementById('controlledSheet').close()">Close</vds-button>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Full height bottom sheet -->
+ * <vds-sheet height="100%" backdrop="true">
+ *   <div style="padding: 20px;">
+ *     <h2>Full Screen Sheet</h2>
+ *     <p>This sheet covers the entire viewport.</p>
+ *   </div>
+ * </vds-sheet>
+ *
+ * @example
+ * <!-- Bottom sheet with auto height (content-based) -->
+ * <vds-sheet height="auto" backdrop="true" opened="true">
+ *   <div style="padding: 20px;">
+ *     <h3>Auto Height</h3>
+ *     <p>This sheet adjusts to its content height.</p>
+ *     <vds-button variant="secondary">Action</vds-button>
+ *   </div>
+ * </vds-sheet>
+ *
+ * @slot - Default slot for the bottom sheet content
+ */
 export class VdsSheet {
     constructor() {
-        /** Create a backdrop that allow's to close the bottom sheet by clicking outside. */
+        /**
+         * Create a backdrop that allows closing the bottom sheet by clicking outside.
+         * @type {boolean}
+         * @default false
+         */
         this.backdrop = false;
-        /** Open / Close the bottom sheet. */
+        /**
+         * Open / Close the bottom sheet.
+         * @type {boolean}
+         * @default false
+         */
         this.opened = false;
-        /** Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.) */
+        /**
+         * Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.)
+         * @type {string}
+         * @default 'auto'
+         */
         this.height = 'auto';
-        /** Allow drag handle interaction to close the bottom sheet. */
+        /**
+         * Allow drag handle interaction to close the bottom sheet.
+         * @type {boolean}
+         * @default false
+         */
         this.hideDragHandle = false;
+        /**
+         * Y-coordinate where drag started
+         * @private
+         */
         this.dragStartY = 0;
+        /**
+         * Flag indicating if dragging is in progress
+         * @private
+         */
         this.isDragging = false;
+        /**
+         * Pixel threshold to close bottom sheet when dragging
+         * @private
+         */
         this.dragThreshold = 50; // px threshold to close bottom sheet
         /**
          * Handle drag interactions to close the bottom sheet.
+         * @private
+         * @param {TouchEvent | MouseEvent} event - The touch or mouse event
          */
         this.handleDragStart = (event) => {
             if (this.hideDragHandle)
@@ -33,6 +154,11 @@ export class VdsSheet {
                 event.preventDefault();
             }
         };
+        /**
+         * Handle drag move events during bottom sheet dragging
+         * @private
+         * @param {TouchEvent | MouseEvent} event - The touch or mouse event
+         */
         this.handleDragMove = (event) => {
             var _a;
             if (!this.isDragging || this.hideDragHandle)
@@ -50,6 +176,11 @@ export class VdsSheet {
                 event.preventDefault();
             }
         };
+        /**
+         * Handle drag end events and close sheet if threshold is met
+         * @private
+         * @param {TouchEvent | MouseEvent} event - The touch or mouse event
+         */
         this.handleDragEnd = (event) => {
             var _a;
             if (!this.isDragging || this.hideDragHandle)
@@ -71,6 +202,10 @@ export class VdsSheet {
             this.dragStartY = 0;
         };
     }
+    /**
+     * Watch for opened state changes and emit events
+     * @private
+     */
     emitValue() {
         if (this.opened) {
             this.bottomsheetOpened.emit();
@@ -79,7 +214,11 @@ export class VdsSheet {
             this.bottomsheetClosed.emit();
         }
     }
-    /** Listen for Escape key to close the bottom sheet */
+    /**
+     * Listen for Escape key to close the bottom sheet
+     * @private
+     * @param {KeyboardEvent} event - The keyboard event
+     */
     handleKeyDown(event) {
         if (event.key === 'Escape' && this.opened) {
             this.close();
@@ -87,18 +226,28 @@ export class VdsSheet {
     }
     /**
      * Trigger open the bottomsheet
-     * @returns Promise that resolves when the bottomsheet is opened
+     * @method
+     * @public
+     * @returns {Promise<void>} Promise that resolves when the bottomsheet is opened
      */
     async open() {
         this.opened = true;
     }
     /**
      * Trigger closes the bottomsheet
-     * @returns Promise that resolves when the bottomsheet is closed
+     * @method
+     * @public
+     * @returns {Promise<void>} Promise that resolves when the bottomsheet is closed
      */
     async close() {
         this.opened = false;
     }
+    /**
+     * Get the Y-coordinate from touch or mouse event
+     * @private
+     * @param {TouchEvent | MouseEvent} event - The touch or mouse event
+     * @returns {number} The Y-coordinate
+     */
     getClientY(event) {
         if ('touches' in event) {
             const touch = event.touches[0] || event.changedTouches[0];
@@ -107,8 +256,10 @@ export class VdsSheet {
         return event.clientY;
     }
     /**
-     * Get the style for the container based on the height prop
+     * Get the style for the container based on the height prop.
      * If the height is a percentage, it converts it to viewport height.
+     * @private
+     * @returns {{ [key: string]: string }} Style object with height property
      */
     getContainerStyle() {
         if (this.height === 'auto') {
@@ -120,16 +271,30 @@ export class VdsSheet {
         }
         return { height: this.height };
     }
+    /**
+     * Render backdrop element if enabled
+     * @private
+     * @returns {HTMLStencilElement} Backdrop element
+     */
     renderBackdrop() {
         return h("div", { class: combineClasses('vds-sheet__backdrop', this.opened ? 'vds-sheet__backdrop--visible' : ''), onClick: () => this.close() });
     }
+    /**
+     * Render drag handle element if not hidden
+     * @private
+     * @returns {HTMLStencilElement | null} Drag handle element or null
+     */
     renderDragHandle() {
         if (this.hideDragHandle)
             return null;
         return (h("div", { class: "vds-sheet__drag-handle", onTouchStart: this.handleDragStart, onMouseDown: this.handleDragStart }, h("div", { class: "vds-sheet__drag-handle-bar" })));
     }
+    /**
+     * Render the bottom sheet component
+     * @returns {HTMLStencilElement} The rendered bottom sheet element
+     */
     render() {
-        return (h(Host, { key: '9390e1ef8653d99cc2e9eeafe1185d83872356fb', role: "dialog", "aria-hidden": !this.opened ? 'true' : 'false', "aria-modal": this.opened ? 'true' : 'false', class: this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed' }, this.backdrop && this.renderBackdrop(), h("div", { key: '28e1c302f7a8d99a3d1a7bc3ce81c3ee33f58c27', class: combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : ''), style: this.getContainerStyle() }, this.renderDragHandle(), h("div", { key: 'e7fd07a07d098036aa8a8fdf77be23866dc4247f', class: "vds-sheet__content" }, h("slot", { key: '0d3c3cdb2f52f4d6f1bbf6ce39fdf477bf270ade' })))));
+        return (h(Host, { key: '0d159f390b7518380102436c44a19eae2e3d27a1', role: "dialog", "aria-hidden": !this.opened ? 'true' : 'false', "aria-modal": this.opened ? 'true' : 'false', class: this.opened ? 'vds-sheet--opened' : 'vds-sheet--closed' }, this.backdrop && this.renderBackdrop(), h("div", { key: '1c6d332d6751d7b39ab4e82756c7f33d348cd3c8', class: combineClasses('vds-sheet__container', this.opened ? 'vds-sheet__container--opened' : ''), style: this.getContainerStyle() }, this.renderDragHandle(), h("div", { key: 'ec600ab75a3613225dc89ad7959a62d0f5b50e1f', class: "vds-sheet__content" }, h("slot", { key: '9714f2d7ee6c838a15672d8071b1f8e58e7d182f' })))));
     }
     static get is() { return "vds-sheet"; }
     static get encapsulation() { return "shadow"; }
@@ -156,8 +321,14 @@ export class VdsSheet {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Create a backdrop that allow's to close the bottom sheet by clicking outside."
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Create a backdrop that allows closing the bottom sheet by clicking outside."
                 },
                 "getter": false,
                 "setter": false,
@@ -176,7 +347,13 @@ export class VdsSheet {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Open / Close the bottom sheet."
                 },
                 "getter": false,
@@ -196,7 +373,13 @@ export class VdsSheet {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "'auto'"
+                        }],
                     "text": "Sets the height of the bottom sheet (any CSS height value: auto, 50%, 400px, etc.)"
                 },
                 "getter": false,
@@ -216,7 +399,13 @@ export class VdsSheet {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Allow drag handle interaction to close the bottom sheet."
                 },
                 "getter": false,
@@ -235,7 +424,13 @@ export class VdsSheet {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bottomsheetOpened"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
                     "text": "Emits event when bottom-sheet is opened"
                 },
                 "complexType": {
@@ -250,7 +445,13 @@ export class VdsSheet {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "bottomsheetClosed"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<void>}"
+                        }],
                     "text": "Emits event when bottom-sheet is closed"
                 },
                 "complexType": {
@@ -277,6 +478,12 @@ export class VdsSheet {
                 "docs": {
                     "text": "Trigger open the bottomsheet",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
                             "text": "Promise that resolves when the bottomsheet is opened"
                         }]
@@ -297,6 +504,12 @@ export class VdsSheet {
                 "docs": {
                     "text": "Trigger closes the bottomsheet",
                     "tags": [{
+                            "name": "method",
+                            "text": undefined
+                        }, {
+                            "name": "public",
+                            "text": undefined
+                        }, {
                             "name": "returns",
                             "text": "Promise that resolves when the bottomsheet is closed"
                         }]
@@ -321,4 +534,3 @@ export class VdsSheet {
             }];
     }
 }
-//# sourceMappingURL=vds-sheet.js.map

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

@@ -254,4 +254,3 @@ CustomUsage.args = {
     hideDragHandle: false,
     height: '60%',
 };
-//# sourceMappingURL=vds-sheet.stories.js.map

package/dist/collection/components/sidenav-item/vds-sidenav-item.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,28 +909,16 @@
   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: block;
+  display: inline-block;
   box-sizing: border-box;
   box-shadow: none;
   --vds-sidenav-item-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);
   --vds-sidenav-item-static-width: var(--vds-sidenav-static-width, 3.75rem);
   --vds-sidenav-item-collapsed-width: var(--vds-sidenav-collapse-width, 3.5rem);
+  --vds-sidenav-item-background-color: transparent;
+  --vds-sidenav-item-active-background-color: var(--color-interaction-brand-lowest);
+  --vds-sidenav-item-active-text-color: var(--color-link-press);
 }
 :host .vds__sidenav-item {
   box-sizing: border-box;
@@ -982,6 +986,56 @@
   gap: var(--spacing-00, 0px);
   color: var(--color-text-medium);
   background: transparent;
+  width: auto;
+}
+:host .vds__sidenav-item--medium {
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+:host .vds__sidenav-item--medium.vds__sidenav-item--expanded, :host .vds__sidenav-item--medium.vds__sidenav-item--collapsed {
+  height: 2.25rem;
+}
+:host .vds__sidenav-item--large {
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+:host .vds__sidenav-item--large.vds__sidenav-item--expanded {
+  padding: var(--spacing-04) var(--spacing-03);
+  column-gap: var(--spacing-03);
+}
+:host .vds__sidenav-item--large .vds__sidenav-item--label-active {
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+:host .vds__sidenav-item--large .vds__sidenav-item--expanded-informative-icon {
+  padding: var(--spacing-00) var(--spacing-04);
+}
+:host .vds__sidenav-item--large.vds__sidenav-item--expanded, :host .vds__sidenav-item--large.vds__sidenav-item--collapsed {
+  height: 3rem;
+}
+:host .vds__sidenav-item--large.vds__sidenav-item--static {
+  font-family: "Roboto Flex", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+  min-height: 3.5rem;
+  max-height: 4rem;
+}
+:host .vds__sidenav-item--large.vds__sidenav-item--static .vds__sidenav-item--static-label {
+  padding: var(--spacing-03) var(--spacing-00);
+}
+:host .vds__sidenav-item--large.vds__sidenav-item--static .vds__sidenav-item--static-informative-icon {
+  padding: var(--spacing-03) var(--spacing-03) var(--spacing-01) var(--spacing-03);
 }
 :host .vds__sidenav-item--static {
   padding: 0;
@@ -992,7 +1046,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: transparent;
+  background-color: var(--vds-sidenav-item-background-color);
   min-height: 3rem;
   max-height: 3.75rem;
   font-family: "Roboto Flex", sans-serif;
@@ -1012,8 +1066,7 @@
 }
 :host .vds__sidenav-item--expanded {
   width: var(--vds-sidenav-item-expanded-width);
-  height: 2.25rem;
-  background-color: transparent;
+  background-color: var(--vds-sidenav-item-background-color);
   color: var(--color-text-medium);
   border-radius: var(--spacing-02);
   padding: var(--spacing-03) var(--spacing-03);
@@ -1036,14 +1089,14 @@
   width: var(--vds-sidenav-item-collapsed-width);
   height: 2.25rem;
   justify-content: center;
-  background-color: transparent;
+  background-color: var(--vds-sidenav-item-background-color);
 }
 :host .vds__sidenav-item--label-disabled {
   color: var(--color-text-disabled);
   cursor: none;
 }
 :host .vds__sidenav-item--label-active {
-  color: var(--color-link-press);
+  color: var(--vds-sidenav-item-active-text-color);
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
@@ -1051,15 +1104,15 @@
   letter-spacing: normal;
 }
 :host .vds__sidenav-item--static-label-active {
-  color: var(--color-link-press);
+  color: var(--vds-sidenav-item-active-text-color);
 }
 :host .vds__sidenav-item--active {
-  background-color: var(--color-interaction-brand-lowest);
-  color: var(--color-link-press);
+  background-color: var(--vds-sidenav-item-active-background-color);
+  color: var(--vds-sidenav-item-active-text-color);
 }
 :host .vds__sidenav-item--disabled {
   pointer-events: none;
-  background: var(--global-transparent);
+  background: var(--vds-sidenav-item-background-color);
   color: var(--text-disabled);
 }
 :host .vds__sidenav-item--disabled:focus-visible {