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

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.js

@@ -1,23 +1,153 @@
 import { Host, h } from "@stencil/core";
 import { generateGroupHeaderContainer } from "../base-group-header/base-group-header";
+/**
+ * @component vds-sidenav-item-category
+ * @description A category/section container component for organizing side navigation items into logical groups. Supports expanded/collapsed states with headers, dividers, and optional action slots. Automatically propagates state to child navigation items.
+ *
+ * @example
+ * <!-- Basic collapsed category -->
+ * <vds-sidenav-item-category>
+ *   <vds-sidenav-item slot="category-items" icon="home" value="Home"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="user" value="Profile"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Expanded category with header -->
+ * <vds-sidenav-item-category value="Main Navigation" expanded="true">
+ *   <vds-sidenav-item slot="category-items" icon="dashboard" value="Dashboard"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="analytics" value="Analytics"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="document" value="Reports"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Static category (always visible header) -->
+ * <vds-sidenav-item-category value="Settings" is-static="true">
+ *   <vds-sidenav-item slot="category-items" icon="module-settings" value="Preferences"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="lock-closed" value="Security"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Category with action slot -->
+ * <vds-sidenav-item-category value="Projects" expanded="true">
+ *   <vds-icon-button slot="action-slot" icon="add" variant="secondary" size="small"></vds-icon-button>
+ *   <vds-sidenav-item slot="category-items" icon="folder-closed" value="Project A"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="folder-closed" value="Project B"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Large size category header -->
+ * <vds-sidenav-item-category value="Resources" expanded="true" size="large">
+ *   <vds-sidenav-item slot="category-items" icon="document" value="Documents"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="image" value="Images"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="camera-video" value="Videos"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Small size category header -->
+ * <vds-sidenav-item-category value="Quick Links" expanded="true" size="small">
+ *   <vds-sidenav-item slot="category-items" icon="link-open" value="Documentation"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="information" value="Support"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Multiple categories in sidebar -->
+ * <vds-sidenav style="width: 240px;">
+ *   <vds-sidenav-item-category value="Main" expanded="true">
+ *     <vds-sidenav-item slot="category-items" icon="home" value="Home" is-active="true"></vds-sidenav-item>
+ *     <vds-sidenav-item slot="category-items" icon="dashboard" value="Dashboard"></vds-sidenav-item>
+ *   </vds-sidenav-item-category>
+ *
+ *   <vds-sidenav-item-category value="Management" expanded="true">
+ *     <vds-sidenav-item slot="category-items" icon="user-group" value="Users"></vds-sidenav-item>
+ *     <vds-sidenav-item slot="category-items" icon="module-settings" value="Settings"></vds-sidenav-item>
+ *   </vds-sidenav-item-category>
+ * </vds-sidenav>
+ *
+ * @example
+ * <!-- Category with app items -->
+ * <vds-sidenav-item-category value="Workspaces" expanded="true">
+ *   <vds-icon-button slot="action-slot" icon="add" variant="secondary" size="small"></vds-icon-button>
+ *   <vds-sidenav-item-app slot="category-items" value="Main Workspace">
+ *     <vds-avatar slot="img" name="Main" size="small"></vds-avatar>
+ *   </vds-sidenav-item-app>
+ *   <vds-sidenav-item-app slot="category-items" value="Personal">
+ *     <vds-avatar slot="img" name="Personal" size="small"></vds-avatar>
+ *   </vds-sidenav-item-app>
+ * </vds-sidenav-item-category>
+ *
+ * @example
+ * <!-- Collapsed categories with dividers -->
+ * <vds-sidenav style="width: 60px;">
+ *   <vds-sidenav-item-category>
+ *     <vds-sidenav-item slot="category-items" icon="home" value="Home"></vds-sidenav-item>
+ *   </vds-sidenav-item-category>
+ *
+ *   <vds-sidenav-item-category>
+ *     <vds-sidenav-item slot="category-items" icon="module-settings" value="Settings"></vds-sidenav-item>
+ *   </vds-sidenav-item-category>
+ * </vds-sidenav>
+ *
+ * @example
+ * <!-- Hierarchical navigation structure -->
+ * <vds-sidenav-item-category value="Admin" expanded="true">
+ *   <vds-sidenav-item slot="category-items" icon="user-group" value="User Management" has-children="true"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="key" value="Roles & Permissions" has-children="true"></vds-sidenav-item>
+ *   <vds-sidenav-item slot="category-items" icon="history" value="Audit Logs"></vds-sidenav-item>
+ * </vds-sidenav-item-category>
+ *
+ * @slot action-slot - Slot for action buttons or icons on the right side of the category header (only visible when expanded and not static)
+ * @slot category-items - Slot for navigation items (vds-sidenav-item, vds-sidenav-item-app) that belong to this category
+ */
 export class VdsSidenavItemCategory {
     constructor() {
-        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        /**
+         * When true expands the nav item to show both text and icon. When false, only shows the icon
+         * @type {boolean}
+         * @default false
+         */
         this.expanded = false;
-        /** Toggles static mode in nav-item */
+        /**
+         * Toggles static mode in nav-item
+         * @type {boolean}
+         * @default false
+         */
         this.isStatic = false;
-        /** Size of the group header when expanded */
+        /**
+         * Size of the group header when expanded
+         * @type {GroupHeaderSize}
+         * @default 'medium'
+         */
         this.size = 'medium';
     }
+    /**
+     * Get collapsed view with divider
+     * @private
+     * @returns {HTMLStencilElement} Collapsed divider element
+     */
     getCollapsedView() {
         return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed" })));
     }
+    /**
+     * Get static view with divider
+     * @private
+     * @returns {HTMLStencilElement} Static divider element
+     */
     getStaticView() {
         return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static" })));
     }
+    /**
+     * Get expanded view with group header
+     * @private
+     * @returns {HTMLStencilElement} Expanded group header element
+     */
     getExpandedView() {
         return generateGroupHeaderContainer(this.size, this.value);
     }
+    /**
+     * Set the appropriate view based on expanded and isStatic props
+     * @private
+     * @returns {HTMLStencilElement} The appropriate view element
+     */
     setView() {
         return this.expanded
             ? this.getExpandedView()
@@ -25,11 +155,20 @@ export class VdsSidenavItemCategory {
                 ? this.getStaticView()
                 : this.getCollapsedView();
     }
+    /**
+     * Set the action slot container if conditions are met
+     * @private
+     * @returns {HTMLStencilElement | undefined} Action slot element or undefined
+     */
     setSlot() {
         if (this.value && this.expanded && !this.isStatic) {
             return (h("div", { class: `vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}` }, h("slot", { name: "action-slot" })));
         }
     }
+    /**
+     * Component lifecycle hook - propagate expanded and isStatic state to child sidenav items
+     * @private
+     */
     componentDidRender() {
         try {
             const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app'));
@@ -43,8 +182,12 @@ export class VdsSidenavItemCategory {
             console.warn('Error updating sidenav items: ', error);
         }
     }
+    /**
+     * Render the sidenav item category component
+     * @returns {HTMLStencilElement} The rendered sidenav category element
+     */
     render() {
-        return (h(Host, { key: '017fac9b9cc74d098b14e21c10bee50f794c0e52' }, h("div", { key: 'a27e77f3a3d777b9765904acc9ee5e6d512c23f9', class: "vds-sidenav-item-category" }, h("div", { key: '6e3cb37a40414911d14fbdf51775e069af9a4b0a', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: '277c3bcdb986a0f5ebb9cfa1e62c27ee49966035', class: "vds-sidenav-item-category__content" }, h("slot", { key: '925168658ffa0d1c930d8b82e050da3da035b1ac', name: "category-items" })))));
+        return (h(Host, { key: '34b2a1a4b0bdccedd530d5f8a60da4d9dd5e72ec' }, h("div", { key: '68965d2a22fef04b6c52aa25bcfdd2e4556144d1', class: "vds-sidenav-item-category" }, h("div", { key: 'c5744ebcfda898807c631e2939a9891367e3afa6', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: '16c3db359728b8b6e9999210ae5eb349e38138b9', class: "vds-sidenav-item-category__content" }, h("slot", { key: '7cbc97923dbb139c68a18a6c1867102b64d7c56b', name: "category-items" })))));
     }
     static get is() { return "vds-sidenav-item-category"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +214,10 @@ export class VdsSidenavItemCategory {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
                     "text": "Define text value. This component has the possibility of adding an element to the right of this value\nusing the slot called \"action-slot\". The display condition is when a value is defined in the value property,\nthe expanded property is equal to true, and the isStatic property is equal to false."
                 },
                 "getter": false,
@@ -90,7 +236,13 @@ export class VdsSidenavItemCategory {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "When true expands the nav item to show both text and icon. When false, only shows the icon"
                 },
                 "getter": false,
@@ -110,7 +262,13 @@ export class VdsSidenavItemCategory {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Toggles static mode in nav-item"
                 },
                 "getter": false,
@@ -129,14 +287,21 @@ export class VdsSidenavItemCategory {
                         "GroupHeaderSize": {
                             "location": "import",
                             "path": "../base-group-header/base-group-header",
-                            "id": "src/components/base-group-header/base-group-header.tsx::GroupHeaderSize"
+                            "id": "src/components/base-group-header/base-group-header.tsx::GroupHeaderSize",
+                            "referenceLocation": "GroupHeaderSize"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{GroupHeaderSize}"
+                        }, {
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
                     "text": "Size of the group header when expanded"
                 },
                 "getter": false,
@@ -149,4 +314,3 @@ export class VdsSidenavItemCategory {
     }
     static get elementRef() { return "hostEl"; }
 }
-//# sourceMappingURL=vds-sidenav-item-category.js.map

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.stories.js

@@ -180,4 +180,3 @@ CustomWidthUsage.args = {
     StaticWidth: '3.75rem',
     CollapsedWidth: '3.5rem',
 };
-//# sourceMappingURL=vds-sidenav-item-category.stories.js.map

package/dist/collection/components/sidenav-item-input/vds-sidenav-item-input.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;
   --vds-sidenav-item-input-expanded-width: var(--vds-sidenav-expanded-width, 17.5rem);