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

package/dist/collection/components/menu-item/vds-menu-item.js

@@ -2,36 +2,173 @@ import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
 import { handleRefClick } from "../../utils/utils";
 import { generateCheckbox, generateCheckmarkIconButton, generateChildrenIconButton, generateInformativeIcon, generateLabel } from "../base-item/base-item";
+/**
+ * @component vds-menu-item
+ * @description An interactive menu item component for displaying options within menus. Supports icons, checkmarks, checkboxes, links, and submenu indicators. Can be used within vds-menu for building navigation, actions, or selection interfaces.
+ *
+ * @example
+ * <!-- Basic menu item -->
+ * <vds-menu-item value="Profile"></vds-menu-item>
+ *
+ * @example
+ * <!-- Menu item with icon -->
+ * <vds-menu-item icon="user" value="Account Settings"></vds-menu-item>
+ *
+ * @example
+ * <!-- Menu item as link -->
+ * <vds-menu-item
+ *   value="Documentation"
+ *   link-href="https://example.com/docs"
+ *   link-target="_blank"
+ *   link-rel="noopener noreferrer">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Menu item with checkmark (single selection) -->
+ * <vds-menu-item
+ *   value="Option A"
+ *   has-checkmark="true"
+ *   is-selected="true"
+ *   checkmark-variant="checkmark">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Menu item with checkbox (multi-selection) -->
+ * <vds-menu-item
+ *   value="Feature 1"
+ *   has-checkmark="true"
+ *   checkmark-variant="checkbox"
+ *   is-selected="true">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Menu item with children indicator -->
+ * <vds-menu-item
+ *   value="More Options"
+ *   has-children="true">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Danger state menu item -->
+ * <vds-menu-item
+ *   value="Delete Account"
+ *   icon="trash"
+ *   danger="true">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Large size menu item -->
+ * <vds-menu-item
+ *   value="Large Item"
+ *   size="large"
+ *   icon="module-settings">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Checkmark at end alignment -->
+ * <vds-menu-item
+ *   value="Selected Option"
+ *   has-checkmark="true"
+ *   is-selected="true"
+ *   checkmark-alignment="end">
+ * </vds-menu-item>
+ *
+ * @example
+ * <!-- Disabled menu item -->
+ * <vds-menu-item
+ *   value="Unavailable Option"
+ *   disabled="true">
+ * </vds-menu-item>
+ *
+ * @slot - Default slot for custom content in place of the value prop
+ */
 export class VdsMenuItem {
     constructor() {
-        /** Puts the VdsMenuItem in disabled state */
+        /**
+         * Puts the VdsMenuItem in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.disabled = false;
-        /** Define item as active when is true */
+        /**
+         * Define item as active when is true
+         * @type {boolean}
+         * @default false
+         */
         this.isActive = false;
-        /** Shows arrow when there are children */
+        /**
+         * Shows arrow when there are children
+         * @type {boolean}
+         * @default false
+         */
         this.hasChildren = false;
-        /** Defines the element as a link */
+        /**
+         * Defines the element as a link
+         * @type {string}
+         * @default null
+         */
         this.linkHref = null;
-        /** Sets the link target value */
+        /**
+         * Sets the link target value
+         * @type {"_self" | "_blank" | "_parent" | "_top"}
+         * @default "_self"
+         */
         this.linkTarget = "_self";
-        /** Sets the link rel value */
+        /**
+         * Sets the link rel value
+         * @type {string}
+         * @default null
+         */
         this.linkRel = null;
-        /** Set size of menu item */
+        /**
+         * Set size of menu item
+         * @type {"medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
-        /** Shows checkmark */
+        /**
+         * Shows checkmark
+         * @type {boolean}
+         * @default false
+         */
         this.hasCheckmark = false;
-        /** Set state of checkmark */
+        /**
+         * Set state of checkmark
+         * @type {boolean}
+         * @default false
+         */
         this.isSelected = false;
-        /** When has-checkmark is true, sets the checks element as checkmark or checkbox.  */
+        /**
+         * When has-checkmark is true, sets the checks element as checkmark or checkbox.
+         * @type {"checkbox" | "checkmark"}
+         * @default "checkmark"
+         */
         this.checkmarkVariant = "checkmark";
-        /** When has-checkmark is true, sets the checks element at the beginning or end.  */
+        /**
+         * When has-checkmark is true, sets the checks element at the beginning or end.
+         * @type {"start" | "end"}
+         * @default "start"
+         */
         this.checkmarkAlignment = "start";
-        /** Sets the menu item to danger state.  */
+        /**
+         * Sets the menu item to danger state.
+         * @type {boolean}
+         * @default false
+         */
         this.danger = false;
     }
+    /**
+     * Watch for changes to isSelected and update isActive state
+     * @private
+     */
     updateItemState() {
         this.isActive = this.isSelected;
     }
+    /**
+     * Handle click event on menu item
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleClick(evt) {
         const parentMenu = this.hostEl.closest("vds-menu");
         const isMenuTrigger = this.hostEl.getAttribute("slot") === "menu-trigger";
@@ -45,6 +182,11 @@ export class VdsMenuItem {
             this.handleSelected(evt);
         }
     }
+    /**
+     * Handle selection/deselection of menu item
+     * @private
+     * @param {MouseEvent} evt - The mouse event
+     */
     handleSelected(evt) {
         if (this.hasCheckmark) {
             this.isSelected = !this.isSelected;
@@ -54,26 +196,60 @@ export class VdsMenuItem {
         else
             this.deselected.emit(evt);
     }
+    /**
+     * Generate checkmark icon button
+     * @private
+     * @returns {HTMLElement} The checkmark icon button element
+     */
     generateCheckmarkIconButton() {
         return generateCheckmarkIconButton(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generate informative icon
+     * @private
+     * @returns {HTMLElement} The informative icon element
+     */
     generateInformativeIcon() {
         return generateInformativeIcon(this.icon, this.value, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generate checkbox element
+     * @private
+     * @returns {HTMLElement} The checkbox element
+     */
     generateCheckbox() {
         return generateCheckbox(this.isSelected, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generate label element
+     * @private
+     * @returns {HTMLElement} The label element
+     */
     generateLabel() {
         return generateLabel(this.value, this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Generate children icon button to indicate submenu
+     * @private
+     * @returns {HTMLElement} The children icon button element
+     */
     generateChildrenIconButton() {
         return generateChildrenIconButton(this.size, this.disabled, this.isActive, this.danger);
     }
+    /**
+     * Get aria-label text, using setAriaLabel prop or falling back to value
+     * @private
+     * @returns {string} The aria-label text
+     */
     setAriaLabelText() {
         return this.setAriaLabel ? this.setAriaLabel : this.value;
     }
+    /**
+     * Render the menu item component
+     * @returns {HTMLStencilElement} The rendered menu item element
+     */
     render() {
-        return (h(Host, { key: '70b35286ccd0ccde84f4f1c4c1404dee90c13761', class: this.disabled ? "vds-menu-item--disabled" : "" }, h("button", { key: 'bacdae5c1036a712b5cf5c83a20fb968754af709', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
+        return (h(Host, { key: 'da089bc54ce93ae84a8c43dc3cedadb70fde96ec', class: this.disabled ? "vds-menu-item--disabled" : "" }, h("button", { key: '5ed911db87789fa36da2b931cbb53d2a168daa53', type: "button", tabindex: "0", disabled: this.disabled, title: this.setAriaLabelText(), "aria-label": this.setAriaLabelText(), onClick: (evt) => {
                 if (this.disabled) {
                     evt.stopPropagation();
                     evt.preventDefault();
@@ -81,7 +257,7 @@ export class VdsMenuItem {
                 else {
                     this.handleClick(evt);
                 }
-            }, class: combineClasses("vds-menu-item", `vds-menu-item--size-${this.size}`, this.disabled ? "vds-menu-item--disabled" : "", this.isActive || this.isSelected ? "vds-menu-item--active" : "", this.danger ? "vds-menu-item--danger" : "", `vds-menu-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: 'a3edddb306d28e5486571979518496c6678d5c28', class: "vds-menu-item__content" }, this.checkmarkAlignment === "start" && this.hasCheckmark ? this.checkmarkVariant === "checkmark" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null, this.icon && this.generateInformativeIcon(), this.value ? this.generateLabel() : h("slot", null), this.checkmarkAlignment === "end" && this.hasCheckmark ? this.checkmarkVariant === "checkmark" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null, this.hasChildren && this.generateChildrenIconButton()))));
+            }, class: combineClasses("vds-menu-item", `vds-menu-item--size-${this.size}`, this.disabled ? "vds-menu-item--disabled" : "", this.isActive || this.isSelected ? "vds-menu-item--active" : "", this.danger ? "vds-menu-item--danger" : "", `vds-menu-item__alignment-${this.checkmarkAlignment}`) }, h("div", { key: '5607d2056b11d213c2dcfe0de3b7ab7e073b87a6', class: "vds-menu-item__content" }, this.checkmarkAlignment === "start" && this.hasCheckmark ? this.checkmarkVariant === "checkmark" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null, this.icon && this.generateInformativeIcon(), this.value ? this.generateLabel() : h("slot", null), this.checkmarkAlignment === "end" && this.hasCheckmark ? this.checkmarkVariant === "checkmark" ? this.generateCheckmarkIconButton() : this.generateCheckbox() : null, this.hasChildren && this.generateChildrenIconButton()))));
     }
     static get is() { return "vds-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -108,7 +284,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Puts the VdsMenuItem in disabled state"
                 },
                 "getter": false,
@@ -128,7 +310,10 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define the icon value"
                 },
                 "getter": false,
@@ -147,7 +332,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Define item as active when is true"
                 },
                 "getter": false,
@@ -167,7 +358,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Shows arrow when there are children"
                 },
                 "getter": false,
@@ -187,7 +384,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Defines the element as a link"
                 },
                 "getter": false,
@@ -207,7 +410,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"_self\" | \"_blank\" | \"_parent\" | \"_top\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"_self\""
+                        }],
                     "text": "Sets the link target value"
                 },
                 "getter": false,
@@ -227,7 +436,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Sets the link rel value"
                 },
                 "getter": false,
@@ -247,7 +462,10 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define text value"
                 },
                 "getter": false,
@@ -266,7 +484,10 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define aria-label"
                 },
                 "getter": false,
@@ -285,7 +506,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
                     "text": "Set size of menu item"
                 },
                 "getter": false,
@@ -305,7 +532,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Shows checkmark"
                 },
                 "getter": false,
@@ -325,7 +558,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Set state of checkmark"
                 },
                 "getter": false,
@@ -345,7 +584,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"checkbox\" | \"checkmark\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"checkmark\""
+                        }],
                     "text": "When has-checkmark is true, sets the checks element as checkmark or checkbox."
                 },
                 "getter": false,
@@ -365,7 +610,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"start\" | \"end\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"start\""
+                        }],
                     "text": "When has-checkmark is true, sets the checks element at the beginning or end."
                 },
                 "getter": false,
@@ -385,7 +636,13 @@ export class VdsMenuItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the menu item to danger state."
                 },
                 "getter": false,
@@ -404,7 +661,13 @@ export class VdsMenuItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "clicked"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MenuItemClickedEvent>}"
+                        }],
                     "text": "Emits event when item gets clicked"
                 },
                 "complexType": {
@@ -425,7 +688,13 @@ export class VdsMenuItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "selected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item is selected"
                 },
                 "complexType": {
@@ -445,7 +714,13 @@ export class VdsMenuItem {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "event",
+                            "text": "deselected"
+                        }, {
+                            "name": "type",
+                            "text": "{EventEmitter<MouseEvent>}"
+                        }],
                     "text": "Emits event when item is deselected"
                 },
                 "complexType": {
@@ -468,4 +743,3 @@ export class VdsMenuItem {
             }];
     }
 }
-//# sourceMappingURL=vds-menu-item.js.map

package/dist/collection/components/menu-item/vds-menu-item.stories.js

@@ -98,4 +98,3 @@ LinkUsage.argTypes = {
         control: { type: "select" }
     }
 };
-//# sourceMappingURL=vds-menu-item.stories.js.map

package/dist/collection/components/menu-list/vds-menu-list.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;
 }

package/dist/collection/components/menu-list/vds-menu-list.js

@@ -1,7 +1,67 @@
 import { Host, h } from "@stencil/core";
+/**
+ * @component vds-menu-list
+ * @description A container component for organizing and displaying a list of menu items. Provides consistent spacing and styling for menu item collections within menus or navigation interfaces.
+ *
+ * @example
+ * <!-- Basic menu list with items -->
+ * <vds-menu-list>
+ *   <vds-menu-item value="Profile"></vds-menu-item>
+ *   <vds-menu-item value="Settings"></vds-menu-item>
+ *   <vds-menu-item value="Logout"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @example
+ * <!-- Menu list with icons -->
+ * <vds-menu-list>
+ *   <vds-menu-item icon="user" value="Account"></vds-menu-item>
+ *   <vds-menu-item icon="module-settings" value="Preferences"></vds-menu-item>
+ *   <vds-menu-item icon="information" value="Help Center"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @example
+ * <!-- Menu list with grouped sections -->
+ * <vds-menu-list>
+ *   <vds-menu-group-header value="Account"></vds-menu-group-header>
+ *   <vds-menu-item icon="user" value="Profile"></vds-menu-item>
+ *   <vds-menu-item icon="module-settings" value="Settings"></vds-menu-item>
+ *   <vds-menu-group-header value="Actions"></vds-menu-group-header>
+ *   <vds-menu-item icon="logout" value="Sign Out" danger="true"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @example
+ * <!-- Menu list with selectable items -->
+ * <vds-menu-list>
+ *   <vds-menu-item value="Option A" has-checkmark="true" is-selected="true"></vds-menu-item>
+ *   <vds-menu-item value="Option B" has-checkmark="true"></vds-menu-item>
+ *   <vds-menu-item value="Option C" has-checkmark="true"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @example
+ * <!-- Menu list with links -->
+ * <vds-menu-list>
+ *   <vds-menu-item value="Home" link-href="/home"></vds-menu-item>
+ *   <vds-menu-item value="About" link-href="/about"></vds-menu-item>
+ *   <vds-menu-item value="Contact" link-href="/contact"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @example
+ * <!-- Menu list with nested submenus -->
+ * <vds-menu-list>
+ *   <vds-menu-item value="File" has-children="true"></vds-menu-item>
+ *   <vds-menu-item value="Edit" has-children="true"></vds-menu-item>
+ *   <vds-menu-item value="View" has-children="true"></vds-menu-item>
+ * </vds-menu-list>
+ *
+ * @slot - Default slot for menu items, group headers, or other menu content
+ */
 export class VdsMenuList {
+    /**
+     * Render the menu list component
+     * @returns {HTMLElement} The rendered menu list container
+     */
     render() {
-        return (h(Host, { key: '30e772724703ab71817dcce911ce30334ab76e44' }, h("div", { key: '6d298e28c1d473b499ff819196fb488234e29007', class: "vds__menu-list--container" }, h("slot", { key: '53bc795e11cb0baba4c08f6517f431b3f1df0dc0' }))));
+        return (h(Host, { key: 'd79916e312459ce5186abcc441937bb55f1285bc' }, h("div", { key: '0336eed436b33ab02d673711756604fd26cf1970', class: "vds__menu-list--container" }, h("slot", { key: '78bfbb837170cd5cd4fb514d3a214876a9000560' }))));
     }
     static get is() { return "vds-menu-list"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +76,3 @@ export class VdsMenuList {
         };
     }
 }
-//# sourceMappingURL=vds-menu-list.js.map

package/dist/collection/components/notification/vds-notification-utils.js

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