@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/1.1.0/component-docs/modus-wc-navbar.json

@@ -0,0 +1,290 @@
+{
+  "description": "A customizable navbar component used for top level navigation of all Trimble applications. ⚠️ **Deprecated**: The `user-card` prop will be replaced by `profile-props` prop of the `modus-wc-profile-menu` component in an upcoming release. The component requires a profileProps object with user information and optionally accepts menuOne and menuTwo for custom menus.",
+  "properties": [
+    {
+      "name": "logoName",
+      "type": "LogoName",
+      "description": "The name of the logo to display. Supports any valid 'logo-name' from the 'modus-wc-logo' component. Defaults to 'trimble'.",
+      "default": "'trimble'",
+      "mutable": false,
+      "end_line": 96
+    },
+    {
+      "name": "appsMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the apps menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 99
+    },
+    {
+      "name": "condensed",
+      "type": "boolean",
+      "description": "Applies condensed layout and styling.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 102
+    },
+    {
+      "name": "condensedMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the condensed menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 105
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the host element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 108
+    },
+    {
+      "name": "mainMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the main menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 111
+    },
+    {
+      "name": "notificationsMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the notifications menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 114
+    },
+    {
+      "name": "searchDebounceMs",
+      "type": "number",
+      "description": "Debounce time in milliseconds for search input changes. Default is 300ms.",
+      "default": "300",
+      "mutable": false,
+      "end_line": 117
+    },
+    {
+      "name": "searchInputOpen",
+      "type": "boolean",
+      "description": "The open state of the search input.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 120
+    },
+    {
+      "name": "textOverrides",
+      "type": "INavbarTextOverrides",
+      "description": "Text replacements for the navbar.",
+      "default": null,
+      "mutable": false,
+      "end_line": 123
+    },
+    {
+      "name": "userCard",
+      "type": "INavbarUserCard",
+      "description": "User information used to render the user card.",
+      "default": null,
+      "mutable": false,
+      "end_line": 128
+    },
+    {
+      "name": "userMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the user menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 131
+    },
+    {
+      "name": "visibility",
+      "type": "INavbarVisibility",
+      "description": "The visibility of individual navbar buttons. Default is user profile visible, others hidden.",
+      "default": "{     ai: false,     apps: false,     help: false,     mainMenu: false,     notifications: false,     search: false,     searchInput: false,     user: true,   }",
+      "mutable": false,
+      "end_line": 143
+    }
+  ],
+  "events": [
+    {
+      "name": "aiClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the AI button is clicked or activated via keyboard.",
+      "end_line": 146
+    },
+    {
+      "name": "appsClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the apps button is clicked or activated via keyboard.",
+      "end_line": 149
+    },
+    {
+      "name": "appsMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the apps menu open state changes.",
+      "end_line": 152
+    },
+    {
+      "name": "condensedMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the condensed menu open state changes.",
+      "end_line": 155
+    },
+    {
+      "name": "helpClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the help button is clicked or activated via keyboard.",
+      "end_line": 158
+    },
+    {
+      "name": "mainMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the main menu open state changes.",
+      "end_line": 161
+    },
+    {
+      "name": "myTrimbleClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard.",
+      "end_line": 164
+    },
+    {
+      "name": "notificationsClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the notifications button is clicked or activated via keyboard.",
+      "end_line": 167
+    },
+    {
+      "name": "notificationsMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the notifications menu open state changes.",
+      "end_line": 170
+    },
+    {
+      "name": "searchChange",
+      "detail": "{ value: string }",
+      "description": "Event emitted when the search input value is changed.",
+      "end_line": 173
+    },
+    {
+      "name": "searchClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the search button is clicked or activated via keyboard.",
+      "end_line": 176
+    },
+    {
+      "name": "searchInputOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the search input open state changes.",
+      "end_line": 179
+    },
+    {
+      "name": "signOutClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the user profile sign out button is clicked or activated via keyboard.",
+      "end_line": 182
+    },
+    {
+      "name": "trimbleLogoClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the logo button is clicked or activated via keyboard,regardless of the `logoName` prop value.",
+      "end_line": 186
+    },
+    {
+      "name": "userMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the user menu open state changes.",
+      "end_line": 189
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "main-menu",
+      "description": "Slot for main-menu content"
+    },
+    {
+      "name": "start",
+      "description": "Slot for start content"
+    },
+    {
+      "name": "center",
+      "description": "Slot for center content"
+    },
+    {
+      "name": "end",
+      "description": "Slot for end content"
+    },
+    {
+      "name": "notifications",
+      "description": "Slot for notifications content"
+    },
+    {
+      "name": "apps",
+      "description": "Slot for apps content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n  div[id^='story--components-navbar--default'] {\n    border: 1px dashed black;\n    height: 360px;\n    overflow: hidden;\n  }\n  [slot=main-menu] {\n    background-color: #0063a3;\n    color: white;\n    height: 400px;\n  }\n</style>\n<modus-wc-navbar\n  ?apps-menu-open=${args['apps-menu-open']}\n  ?condensed=${args.condensed}\n  ?condensed-menu-open=${args['condensed-menu-open']}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?main-menu-open=${args['main-menu-open']}\n  ?notifications-menu-open=${args['notifications-menu-open']}\n  search-debounce-ms=${ifDefined(args['search-debounce-ms'])}\n  ?search-input-open=${args['search-input-open']}\n  .textOverrides=${ifDefined(args['text-overrides'])}\n  .userCard=${args['user-card']}\n  ?user-menu-open=${args['user-menu-open']}\n  .visibility=${args.visibility}\n  logo-name=${args['logo-name']}\n>\n  <div slot=\"main-menu\">Main menu contents</div>\n  <div slot=\"notifications\">Notification contents</div>\n  <div slot=\"apps\">App drawer contents</div>\n</modus-wc-navbar>\n<script>\n// Added this block to demonstrate how to handle navbar visibility settings using JavaScript.\n//   const visibility = {\n//     ai: true,\n//     apps: true,\n//     help: true,\n//     mainMenu: true,\n//     notifications: true,\n//     search: true,\n//     searchInput: true,\n//     user: true,\n//     };\n//  const userCard = {\n//   avatarAlt: 'Sonic',\n//   avatarSrc: 'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n//   email: 'sonic@trimble.com',\n//   name: 'Sonic the Hedgehog',\n// };\n// const navbar = document.querySelector('modus-wc-navbar');\n// navbar.visibility = visibility;\n// navbar.userCard = userCard;\n</script>",
+    "variations": [],
+    "args": {
+      "condensed": "false",
+      "search-debounce-ms": "300",
+      "text-overrides": "textOverrides",
+      "user-card": "userCard",
+      "logo-name": "'trimble'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "aiClick",
+      "appsClick",
+      "appsMenuOpenChange",
+      "condensedMenuOpenChange",
+      "helpClick",
+      "mainMenuOpenChange",
+      "myTrimbleClick",
+      "notificationsMenuOpenChange",
+      "notificationsClick",
+      "searchChange",
+      "searchClick",
+      "searchInputOpenChange",
+      "signOutClick",
+      "trimbleLogoClick",
+      "userMenuOpenChange",
+      ""
+    ]
+  },
+  "tag": "modus-wc-navbar",
+  "storyExample": {
+    "template": "<style>\n  div[id^='story--components-navbar--default'] {\n    border: 1px dashed black;\n    height: 360px;\n    overflow: hidden;\n  }\n  [slot=main-menu] {\n    background-color: #0063a3;\n    color: white;\n    height: 400px;\n  }\n</style>\n<modus-wc-navbar\n  ?apps-menu-open=${args['apps-menu-open']}\n  ?condensed=${args.condensed}\n  ?condensed-menu-open=${args['condensed-menu-open']}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?main-menu-open=${args['main-menu-open']}\n  ?notifications-menu-open=${args['notifications-menu-open']}\n  search-debounce-ms=${ifDefined(args['search-debounce-ms'])}\n  ?search-input-open=${args['search-input-open']}\n  .textOverrides=${ifDefined(args['text-overrides'])}\n  .userCard=${args['user-card']}\n  ?user-menu-open=${args['user-menu-open']}\n  .visibility=${args.visibility}\n  logo-name=${args['logo-name']}\n>\n  <div slot=\"main-menu\">Main menu contents</div>\n  <div slot=\"notifications\">Notification contents</div>\n  <div slot=\"apps\">App drawer contents</div>\n</modus-wc-navbar>\n<script>\n// Added this block to demonstrate how to handle navbar visibility settings using JavaScript.\n//   const visibility = {\n//     ai: true,\n//     apps: true,\n//     help: true,\n//     mainMenu: true,\n//     notifications: true,\n//     search: true,\n//     searchInput: true,\n//     user: true,\n//     };\n//  const userCard = {\n//   avatarAlt: 'Sonic',\n//   avatarSrc: 'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n//   email: 'sonic@trimble.com',\n//   name: 'Sonic the Hedgehog',\n// };\n// const navbar = document.querySelector('modus-wc-navbar');\n// navbar.visibility = visibility;\n// navbar.userCard = userCard;\n</script>",
+    "args": {
+      "condensed": "false",
+      "search-debounce-ms": "300",
+      "text-overrides": "textOverrides",
+      "user-card": "userCard",
+      "logo-name": "'trimble'"
+    },
+    "argTypes": {},
+    "events": [
+      "aiClick",
+      "appsClick",
+      "appsMenuOpenChange",
+      "condensedMenuOpenChange",
+      "helpClick",
+      "mainMenuOpenChange",
+      "myTrimbleClick",
+      "notificationsMenuOpenChange",
+      "notificationsClick",
+      "searchChange",
+      "searchClick",
+      "searchInputOpenChange",
+      "signOutClick",
+      "trimbleLogoClick",
+      "userMenuOpenChange",
+      ""
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  INavbarTextOverrides,\n  INavbarUserCard,\n  INavbarVisibility,\n} from './modus-wc-navbar';\nimport { getAvailableLogos, LogoName } from '../modus-wc-logo/logo-constants';\n\nconst textOverrides: INavbarTextOverrides = {\n  apps: 'Apps',\n  help: 'Help',\n  notifications: 'Notifications',\n  search: 'Search',\n};\n\nconst userCard: INavbarUserCard = {\n  avatarAlt: 'Sonic',\n  avatarSrc: 'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n  email: 'sonic@trimble.com',\n  name: 'Sonic the Hedgehog',\n};\n\nconst visibility: INavbarVisibility = {\n  ai: true,\n  apps: true,\n  help: true,\n  mainMenu: true,\n  notifications: true,\n  search: true,\n  searchInput: true,\n  user: true,\n};\n\ninterface NavbarArgs {\n  'apps-menu-open'?: boolean;\n  condensed?: boolean;\n  'condensed-menu-open'?: boolean;\n  'custom-class'?: string;\n  'main-menu-open'?: boolean;\n  'notifications-menu-open'?: boolean;\n  'search-debounce-ms'?: number;\n  'search-input-open'?: boolean;\n  'text-overrides'?: INavbarTextOverrides;\n  'user-card': INavbarUserCard;\n  'user-menu-open'?: boolean;\n  visibility?: INavbarVisibility;\n  'logo-name': LogoName;\n}\n\nconst meta: Meta<NavbarArgs> = {\n  title: 'Components/Navbar',\n  component: 'modus-wc-navbar',\n  args: {\n    condensed: false,\n    'search-debounce-ms': 300,\n    'text-overrides': textOverrides,\n    'user-card': userCard,\n    visibility,\n    'logo-name': 'trimble',\n  },\n  argTypes: {\n    'text-overrides': {\n      description: 'Text replacements for navbar menu items',\n      table: {\n        type: {\n          detail: `\n            Interface: INavbarTextOverrides\n            Properties:\n            - apps (string, optional): Replaces the text for \"Apps\" in the condensed menu\n            - help (string, optional): Replaces the text for \"Help\" in the condensed menu\n            - notifications (string, optional): Replaces the text for \"Notifications\" in the condensed menu\n            - search (string, optional): Replaces the text for \"Search\" in the condensed menu\n          `,\n        },\n      },\n      control: {\n        type: 'object',\n      },\n    },\n    'logo-name': {\n      description: 'The name of the logo to display. Defaults to \"trimble\".',\n      table: {\n        type: { summary: 'LogoName' },\n        defaultValue: { summary: 'trimble' },\n      },\n      control: { type: 'select' },\n      options: getAvailableLogos(),\n    },\n    'user-card': {\n      description:\n        '⚠️ **Deprecated**: The `user-card` prop will be replaced by `profile-props` prop of the `modus-wc-profile-menu` component in an upcoming release.',\n      table: {\n        type: {\n          detail: `\n            Interface: IUserCard\n            Properties:\n            - avatarAlt (string, optional): The alt value to set on the avatar\n            - avatarSrc (string, optional): The avatar image source value\n            - email (string): The email address of the user\n            - myTrimbleButton (string, optional): Text override for the Access MyTrimble button, allows for translation\n            - name (string): The name of the user\n            - signOutButton (string, optional): Text override for the Sign out button, allows for translation\n          `,\n        },\n      },\n    },\n    visibility: {\n      description: 'Controls visibility of individual navbar buttons',\n      table: {\n        type: {\n          detail: `\n            Interface: INavbarVisibility\n            Properties:\n            - ai (boolean, optional): Controls visibility of the AI button\n            - apps (boolean, optional): Controls visibility of the apps button\n            - help (boolean, optional): Controls visibility of the help button\n            - mainMenu (boolean, optional): Controls visibility of the main menu button\n            - notifications (boolean, optional): Controls visibility of the notifications button\n            - search (boolean, optional): Controls visibility of the search button\n            - searchInput (boolean, optional): Controls visibility of the search input\n            - user (boolean, optional): Controls visibility of the user button\n          `,\n        },\n      },\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: [\n        'aiClick',\n        'appsClick',\n        'appsMenuOpenChange',\n        'condensedMenuOpenChange',\n        'helpClick',\n        'mainMenuOpenChange',\n        'myTrimbleClick',\n        'notificationsMenuOpenChange',\n        'notificationsClick',\n        'searchChange',\n        'searchClick',\n        'searchInputOpenChange',\n        'signOutClick',\n        'trimbleLogoClick',\n        'userMenuOpenChange',\n      ],\n    },\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<NavbarArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  div[id^='story--components-navbar--default'] {\n    border: 1px dashed black;\n    height: 360px;\n    overflow: hidden;\n  }\n  [slot=main-menu] {\n    background-color: #0063a3;\n    color: white;\n    height: 400px;\n  }\n</style>\n<modus-wc-navbar\n  ?apps-menu-open=${args['apps-menu-open']}\n  ?condensed=${args.condensed}\n  ?condensed-menu-open=${args['condensed-menu-open']}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?main-menu-open=${args['main-menu-open']}\n  ?notifications-menu-open=${args['notifications-menu-open']}\n  search-debounce-ms=${ifDefined(args['search-debounce-ms'])}\n  ?search-input-open=${args['search-input-open']}\n  .textOverrides=${ifDefined(args['text-overrides'])}\n  .userCard=${args['user-card']}\n  ?user-menu-open=${args['user-menu-open']}\n  .visibility=${args.visibility}\n  logo-name=${args['logo-name']}\n>\n  <div slot=\"main-menu\">Main menu contents</div>\n  <div slot=\"notifications\">Notification contents</div>\n  <div slot=\"apps\">App drawer contents</div>\n</modus-wc-navbar>\n<script>\n// Added this block to demonstrate how to handle navbar visibility settings using JavaScript.\n//   const visibility = {\n//     ai: true,\n//     apps: true,\n//     help: true,\n//     mainMenu: true,\n//     notifications: true,\n//     search: true,\n//     searchInput: true,\n//     user: true,\n//     };\n//  const userCard = {\n//   avatarAlt: 'Sonic',\n//   avatarSrc: 'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n//   email: 'sonic@trimble.com',\n//   name: 'Sonic the Hedgehog',\n// };\n// const navbar = document.querySelector('modus-wc-navbar');\n// navbar.visibility = visibility;\n// navbar.userCard = userCard;\n</script>\n\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const CustomMenuAndSlots: Story = {\n  render: (args) => {\n    function toggleCustomUserMenu(e) {\n      const customIcon = e.currentTarget;\n      const menu = customIcon.parentElement?.querySelector('#custom-user-menu');\n      menu?.classList.toggle('hidden');\n    }\n    return html`\n      <div id=\"custom-menu-and-slots\">\n        <style>\n          #custom-menu-and-slots .modus-wc-navbar {\n            align-items: center;\n            display: flex;\n            gap: 0.2rem;\n            padding: 0 1rem;\n            width: 100%;\n          }\n          .modus-wc-card-body {\n            padding: 1rem;\n          }\n          #custom-menu-and-slots .modus-wc-navbar-center,\n          #custom-menu-and-slots .modus-wc-navbar-end,\n          #custom-menu-and-slots .modus-wc-navbar-start {\n            align-items: center;\n            display: flex;\n            flex: 1;\n          }\n          #custom-menu-and-slots .modus-wc-navbar-center {\n            background: #d9d9d969;\n            justify-content: center;\n          }\n          #custom-menu-and-slots .modus-wc-navbar-end {\n            background: #d9d9d969;\n            justify-content: flex-end;\n          }\n          #custom-menu-and-slots .modus-wc-navbar-start {\n            background: #d9d9d969;\n            justify-content: flex-start;\n          }\n          #custom-user-menu {\n            position: absolute;\n            right: 10px;\n            top: 50px;\n            z-index: 1000;\n          }\n          #custom-user-menu.hidden {\n            display: none;\n          }\n          .custom-user-email {\n            font-size: 0.8rem;\n          }\n          .custom-user-icon {\n            cursor: pointer;\n            margin-inline-start: 8px;\n            margin-inline-end: 8px;\n            position: relative;\n            top: 3px;\n          }\n          .custom-user-menu-header {\n            border-bottom: 1px solid #e0e0e0;\n            margin-bottom: 8px;\n            padding: 8px 16px;\n          }\n          .custom-user-menu-title {\n            font-weight: bold;\n          }\n          div[id^='story--components-navbar--custom-menu-and-slots'] {\n            border: 1px dashed black;\n            height: 365px;\n          }\n          .menu-item {\n            align-items: center;\n            cursor: pointer;\n            display: flex;\n            padding: 8px;\n          }\n          .slot-bg {\n            align-items: center;\n            display: flex;\n            font-weight: 600;\n            height: 40px;\n            justify-content: center;\n            opacity: 0.4;\n          }\n        </style>\n        <modus-wc-navbar\n          ?apps-menu-open=${args['apps-menu-open']}\n          ?condensed=${args.condensed}\n          ?condensed-menu-open=${args['condensed-menu-open']}\n          custom-class=${ifDefined(args['custom-class'])}\n          ?main-menu-open=${args['main-menu-open']}\n          ?notifications-menu-open=${args['notifications-menu-open']}\n          search-debounce-ms=${ifDefined(args['search-debounce-ms'])}\n          ?search-input-open=${args['search-input-open']}\n          .textOverrides=${ifDefined(args['text-overrides'])}\n          .userCard=${args['user-card']}\n          ?user-menu-open=${args['user-menu-open']}\n          .visibility=${{\n            ai: false,\n            apps: false,\n            help: false,\n            mainMenu: false,\n            notifications: false,\n            search: false,\n            searchInput: false,\n            user: false,\n          }}\n        >\n          <div slot=\"main-menu\">Main menu contents</div>\n          <div slot=\"notifications\">Notification contents</div>\n          <div slot=\"apps\">App drawer contents</div>\n\n          <!-- Slots demonstration -->\n          <div slot=\"start\">\n            <div class=\"slot-bg\">Left slot</div>\n          </div>\n          <div slot=\"center\">\n            <div class=\"slot-bg\">Center slot</div>\n          </div>\n          <div slot=\"end\">\n            <div class=\"slot-bg\">Right slot</div>\n            <div class=\"custom-user-icon\" @click=${toggleCustomUserMenu}>\n              <modus-wc-avatar\n                alt=\"Sonic the Hedgehog\"\n                img-src=\"https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg\"\n                size=\"xs\"\n                shape=\"circle\"\n              ></modus-wc-avatar>\n            </div>\n\n            <!-- Custom user menu -->\n            <modus-wc-card id=\"custom-user-menu\" bordered=\"true\">\n              <div class=\"custom-user-menu-header\">\n                <div class=\"custom-user-menu-title\">Custom Menu</div>\n                <div class=\"custom-user-email\">custom.user@example.com</div>\n              </div>\n              <div class=\"menu-item\">\n                <span class=\"menu-item-icon\"\n                  ><modus-wc-icon\n                    name=\"settings_solid\"\n                    size=\"16px\"\n                  ></modus-wc-icon\n                ></span>\n                <span class=\"custom-user-icon\">Account Settings</span>\n              </div>\n              <div class=\"menu-item\">\n                <span class=\"menu-item-icon\"\n                  ><modus-wc-icon\n                    name=\"person_solid\"\n                    size=\"16px\"\n                  ></modus-wc-icon\n                ></span>\n                <span class=\"custom-user-icon\">Profile</span>\n              </div>\n              <div class=\"menu-item\">\n                <span class=\"menu-item-icon\"\n                  ><modus-wc-icon name=\"sign_out\" size=\"16px\"></modus-wc-icon\n                ></span>\n                <span class=\"custom-user-icon\">Logout</span>\n              </div>\n            </modus-wc-card>\n          </div>\n        </modus-wc-navbar>\n      </div>\n      <script>\n        // Added this block to demonstrate how to toggle a custom user menu and manage navbar visibility settings using JavaScript.\n        // const toggleCustomUserMenu = (e) => {\n        //    const customIcon = e.currentTarget;\n        //    const menu = customIcon.parentElement?.querySelector('#custom-user-menu');\n        //    menu?.classList.toggle('hidden');\n        // };\n        //  const navbar = document.querySelector('modus-wc-navbar');\n        //  const userIcon = document.querySelector('.custom-user-icon');\n        //  if (userIcon) {\n        //     userIcon.addEventListener('click', toggleCustomUserMenu);\n        //   }\n        //  if (navbar) {\n        //   navbar.visibility = {\n        //     ai: false,\n        //     apps: false,\n        //     help: false,\n        //     mainMenu: false,\n        //     notifications: false,\n        //     search: false,\n        //     searchInput: false,\n        //     user: false\n        //   };\n        // }\n      </script>\n    `;\n  },\n};\nexport const CustomLogoSizes: Story = {\n  render: (args) => html`\n    <style>\n      .logo-small .modus-wc-logo {\n        width: 90px;\n      }\n\n      .logo-large .modus-wc-logo {\n        width: 140px;\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 40px;\n        font-family: sans-serif;\n      }\n\n      .navbar-frame {\n        border: 1px dashed black;\n        height: 360px;\n        width: 100%;\n        overflow: hidden;\n        box-sizing: border-box;\n      }\n      .navbar-frame-outer {\n        border: 1px dashed black;\n      }\n\n      [slot='main-menu'] {\n        background-color: #0063a3;\n        color: white;\n        height: 400px;\n      }\n    </style>\n\n    <div class=\"wrapper\">\n      <div>\n        <div class=\"navbar-frame-outer\">\n          <div class=\"navbar-frame\">\n            <modus-wc-navbar\n              search-debounce-ms=\"300\"\n              logo-name=\"trimble\"\n              custom-class=\"logo-small\"\n              .userCard=${args['user-card']}\n            >\n              <div slot=\"main-menu\">Main menu contents</div>\n              <div slot=\"notifications\">Notification contents</div>\n              <div slot=\"apps\">App drawer contents</div>\n            </modus-wc-navbar>\n          </div>\n        </div>\n      </div>\n\n      <div>\n        <div class=\"navbar-frame-outer\">\n          <div class=\"navbar-frame\">\n            <modus-wc-navbar\n              search-debounce-ms=\"300\"\n              logo-name=\"trimble\"\n              custom-class=\"logo-large\"\n              .userCard=${args['user-card']}\n            >\n              <div slot=\"main-menu\">Main menu contents</div>\n              <div slot=\"notifications\">Notification contents</div>\n              <div slot=\"apps\">App drawer contents</div>\n            </modus-wc-navbar>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n};\n"
+  }
+}

package/versions/1.1.0/component-docs/modus-wc-profile-menu.json

@@ -0,0 +1,64 @@
+{
+  "description": "",
+  "properties": [
+    {
+      "name": "profileProps",
+      "type": "IProfileMenuProps",
+      "description": "Profile menu properties containing user information",
+      "default": null,
+      "mutable": false,
+      "end_line": 64
+    },
+    {
+      "name": "menuOne",
+      "type": "ISubMenu",
+      "description": "Configuration for the first menu including title and items",
+      "default": null,
+      "mutable": false,
+      "end_line": 67
+    },
+    {
+      "name": "menuTwo",
+      "type": "ISubMenu",
+      "description": "Configuration for the second menu including title and items",
+      "default": null,
+      "mutable": false,
+      "end_line": 70
+    }
+  ],
+  "events": [
+    {
+      "name": "signOutClick",
+      "detail": "void",
+      "description": "Emitted when the Sign Out menu item is clicked",
+      "end_line": 73
+    },
+    {
+      "name": "menuItemClick",
+      "detail": "string",
+      "description": "Emitted when any menu item is clicked, passing back the item value or label",
+      "end_line": 76
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<div style=\"min-height: 600px;\">\n  <modus-wc-profile-menu\n    .profileProps=${args['profile-props']}\n    .menuOne=${ifDefined(args['menu-one'])}\n    .menuTwo=${ifDefined(args['menu-two'])}\n    @signOutClick=${action('signOutClick')}\n    @menuItemClick=${action('menuItemClick')}\n  ></modus-wc-profile-menu>\n</div>",
+    "variations": [],
+    "args": {
+      "profile-props": "profileData"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-profile-menu",
+  "storyExample": {
+    "template": "<div style=\"min-height: 600px;\">\n  <modus-wc-profile-menu\n    .profileProps=${args['profile-props']}\n    .menuOne=${ifDefined(args['menu-one'])}\n    .menuTwo=${ifDefined(args['menu-two'])}\n    @signOutClick=${action('signOutClick')}\n    @menuItemClick=${action('menuItemClick')}\n  ></modus-wc-profile-menu>\n</div>",
+    "args": {
+      "profile-props": "profileData"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { action } from '@storybook/addon-actions';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IProfileMenuProps, ISubMenu } from './modus-wc-profile-menu';\n\ninterface ProfileMenuArgs {\n  'profile-props': IProfileMenuProps;\n  'menu-one'?: ISubMenu;\n  'menu-two'?: ISubMenu;\n}\n\nconst profileData: IProfileMenuProps = {\n  profileImageUrl:\n    'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n  headerName: 'Enterprise ABC',\n  userName: 'Jane Doe',\n  userEmail: 'jane.doe@example.com',\n  manageTrimbleId: {\n    link: '#',\n  },\n};\n\nconst meta: Meta<ProfileMenuArgs> = {\n  title: 'Components/Profile Menu',\n  component: 'modus-wc-profile-menu',\n  args: {\n    'profile-props': profileData,\n  },\n  argTypes: {\n    'profile-props': {\n      description: 'Profile menu properties containing user information',\n      table: {\n        type: {\n          detail: `\n            Interface: IProfileMenuProps\n            Properties:\n            - profileImageUrl (string): The URL of the profile image\n            - headerName (string): The header name of the profile menu\n            - userName (string): The name of the user\n            - userEmail (string): The email of the user\n            - manageTrimbleId (IManageTrimbleId, optional): The manage Trimble ID link configuration\n              - link (string): The URL for managing the user's Trimble ID\n              - target ('_blank' | '_self' | '_parent' | '_top', optional): The target for the link\n              - rel (string, optional): The rel attribute for the link. Defaults to 'noopener noreferrer' when target is '_blank'\n          `,\n        },\n      },\n    },\n    'menu-one': {\n      description: 'Configuration for the first submenu section',\n      table: {\n        type: {\n          detail: `\n            Interface: ISubMenu\n            Properties:\n            - title (string, optional): Title for the submenu section\n            - items (IMenuItem[]): Array of menu items\n              - label (string): The display text for the menu item\n              - icon (string, optional): The name of the icon to display\n              - iconVariant ('solid' | 'outlined', optional): The variant of the icon\n              - value (string, optional): The value associated with the menu item, used for selection\n          `,\n        },\n      },\n    },\n    'menu-two': {\n      description: 'Configuration for the second submenu section',\n      table: {\n        type: {\n          detail: `\n            Interface: ISubMenu\n            Properties:\n            - title (string, optional): Title for the submenu section\n            - items (IMenuItem[]): Array of menu items\n              - label (string): The display text for the menu item\n              - icon (string, optional): The name of the icon to display\n              - iconVariant ('solid' | 'outlined', optional): The variant of the icon\n              - value (string, optional): The value associated with the menu item, used for selection\n          `,\n        },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nA customizable profile menu component that displays user information with optional submenus.\n\\nThe component uses the \\`modus-wc-panel\\` component for layout and supports one or two custom submenus.\n\n### Features\n- **User Profile Display**: Shows profile image, header name, username, and email\n- **Default Menu Items**: Includes pre-configured menu items (My Profile, My Products, Support center, Admin settings)\n- **Custom Submenus**: Supports up to two additional custom submenus with titles and icons\n- **Manage Trimble ID Link**: Optional link for managing user's Trimble ID\n- **Sign Out**: Built-in sign out menu item in the footer\n- **Icon Support**: Menu items can include icons with solid or outlined variants\n\n### Events\n- **menuItemClick**: Emitted when any menu item is clicked, passing back the item label/identifier\n- **signOutClick**: Emitted when the Sign Out menu item is clicked\n\n### Usage\nThe component requires a \\`profileProps\\` object with user information and optionally accepts \\`menuOne\\` and \\`menuTwo\\` for custom menus.\n        `,\n      },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<ProfileMenuArgs>;\nconst getSourceCode = (args: ProfileMenuArgs) => {\n  const profilePropsCode = `const profileProps = ${JSON.stringify(args['profile-props'], null, 2)};`;\n\n  const menuOneCode = args['menu-one']\n    ? `\\nconst menuOne = ${JSON.stringify(args['menu-one'], null, 2)};`\n    : '';\n\n  const menuTwoCode = args['menu-two']\n    ? `\\nconst menuTwo = ${JSON.stringify(args['menu-two'], null, 2)};`\n    : '';\n\n  return `<script>\n  ${profilePropsCode}${menuOneCode}${menuTwoCode}\n  \n  const element = document.querySelector('modus-wc-profile-menu');\n  element.profileProps = profileProps;${args['menu-one'] ? '\\n  element.menuOne = menuOne;' : ''}${args['menu-two'] ? '\\n  element.menuTwo = menuTwo;' : ''}\n\n  // Event listeners\n  element.addEventListener('menuItemClick', (event) => {\n    console.log('Menu item clicked:', event.detail);\n  });\n  element.addEventListener('signOutClick', () => {\n    console.log('Sign Out clicked');\n  });\n\n</script>\n\n<modus-wc-profile-menu></modus-wc-profile-menu>`;\n};\n\nconst Template: Story = {\n  parameters: {\n    docs: {\n      source: {\n        transform: (_src, { args }: { args: ProfileMenuArgs }) =>\n          getSourceCode(args),\n      },\n    },\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<div style=\"min-height: 600px;\">\n  <modus-wc-profile-menu\n    .profileProps=${args['profile-props']}\n    .menuOne=${ifDefined(args['menu-one'])}\n    .menuTwo=${ifDefined(args['menu-two'])}\n    @signOutClick=${action('signOutClick')}\n    @menuItemClick=${action('menuItemClick')}\n  ></modus-wc-profile-menu>\n</div>\n    `;\n  },\n};\n\nexport const Default: Story = {\n  ...Template,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Basic profile menu with default menu items (My Profile, My Products, Support center, Admin settings) and no custom submenus.',\n      },\n      source: {\n        transform: (_src, { args }: { args: ProfileMenuArgs }) =>\n          getSourceCode(args),\n      },\n    },\n  },\n};\n\nexport const WithOneSubmenu: Story = {\n  ...Template,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Profile menu with one additional custom submenu section. Submenus can include a title and items with icons.',\n      },\n      source: {\n        transform: (_src, { args }: { args: ProfileMenuArgs }) =>\n          getSourceCode(args),\n      },\n    },\n  },\n  args: {\n    'menu-one': {\n      title: 'Recent Projects',\n      items: [\n        {\n          label: 'Project Alpha',\n          icon: 'bug',\n          iconVariant: 'solid',\n        },\n        {\n          label: 'Project Beta',\n          icon: 'triangle_down',\n          iconVariant: 'solid',\n        },\n        {\n          label: 'Project Gamma',\n          icon: 'service_rep',\n          iconVariant: 'solid',\n        },\n      ],\n    },\n  },\n};\n\nexport const WithTwoSubmenus: Story = {\n  ...Template,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          'Profile menu with two additional custom submenu sections. Each submenu can have its own title and menu items with icons.',\n      },\n      source: {\n        transform: (_src, { args }: { args: ProfileMenuArgs }) =>\n          getSourceCode(args),\n      },\n    },\n  },\n  args: {\n    'menu-one': {\n      title: 'Recent Projects',\n      items: [\n        {\n          label: 'Project Alpha',\n          icon: 'bug',\n          iconVariant: 'solid',\n        },\n        {\n          label: 'Project Beta',\n          icon: 'triangle_down',\n          iconVariant: 'solid',\n        },\n        {\n          label: 'Project Gamma',\n          icon: 'antenna',\n          iconVariant: 'solid',\n        },\n      ],\n    },\n    'menu-two': {\n      title: 'Quick Actions',\n      items: [\n        {\n          label: 'Settings',\n          icon: 'settings',\n          iconVariant: 'solid',\n        },\n        {\n          label: 'Help Center',\n          icon: 'help',\n          iconVariant: 'solid',\n        },\n        { label: 'Support', icon: 'headset', iconVariant: 'solid' },\n      ],\n    },\n  },\n};\n"
+  }
+}

package/versions/1.1.0/component-docs/modus-wc-side-navigation.json

@@ -0,0 +1,102 @@
+{
+  "description": "A customizable side navigation component for organizing primary navigation and content areas in an application. The component supports a `<slot>` for injecting custom content inside the side navigation panel.",
+  "properties": [
+    {
+      "name": "collapseOnClickOutside",
+      "type": "boolean",
+      "description": "Whether the side navigation should collapse when clicking outside of it.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "expanded",
+      "type": "boolean",
+      "description": "Whether the side navigation is expanded.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 38
+    },
+    {
+      "name": "maxWidth",
+      "type": "string",
+      "description": "Maximum width of the side navigation panel in an expanded state.",
+      "default": "'256px'",
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "mode",
+      "type": "'overlay' | 'push'",
+      "description": "Mode to make side navigation either overlay or push the content for the selector specified in targetContent",
+      "default": "'overlay'",
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "targetContent",
+      "type": "string",
+      "description": "(optional) Specify the selector for the page's content for which paddings and margins will be set by side navigation based on the mode.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 47
+    }
+  ],
+  "events": [
+    {
+      "name": "expandedChange",
+      "detail": "boolean",
+      "description": "Event emitted when the expanded state changes (expanded/collapsed).",
+      "end_line": 50
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n        .layout-with-navbar {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n        }\n        .main-content-row {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n        .modus-wc-menu-item-labels {\n          padding: 0 16px;\n        }\n        .navbar {\n          box-shadow: none;\n        }\n        .panel-content {\n          margin-left: 4rem;\n          padding: 10px;\n        }\n        .side-navigation {\n          height: 500px;\n          align-self: flex-start;\n          position: relative;\n        }\n      </style>\n      <div class=\"layout-with-navbar\">\n        <modus-wc-navbar\n          app-title=\"Modus App\"\n          class=\"navbar\"\n          @mainMenuOpenChange=${handleMenuOpenChange}\n          .userCard=${{\n            avatarAlt: 'User Avatar',\n            avatarSrc:\n              'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n            email: 'user@trimble.com',\n            name: 'Sonic the Hedgehog',\n          }}\n          .visibility=${{\n            ai: true,\n            apps: true,\n            help: true,\n            mainMenu: true,\n            notifications: true,\n            search: true,\n            searchInput: false,\n            user: true,\n          }}\n          style=\"z-index: 2;\"\n        ></modus-wc-navbar>\n        <div class=\"main-content-row\">\n          <modus-wc-side-navigation\n            class=\"side-navigation\"\n            collapse-on-click-outside=${args['collapse-on-click-outside']}\n            custom-class=${ifDefined(args['custom-class'])}\n            expanded=${args.expanded}\n            max-width=${args['max-width']}\n            mode=${ifDefined(args.mode)}\n            target-content=${ifDefined(args['target-content'])}\n          >\n            <modus-wc-menu size=\"lg\">\n              <modus-wc-menu-item label=\"home\" selected>\n                <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"profile\">\n                <modus-wc-icon slot=\"start-icon\" name=\"person\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"settings\">\n                <modus-wc-icon slot=\"start-icon\" name=\"gears\"></modus-wc-icon>\n              </modus-wc-menu-item>\n            </modus-wc-menu>\n          </modus-wc-side-navigation>\n          <div class=\"panel-content\">\n            <div id=\"overview\">\n              <p>\n                The side navigation of an application provides context through\n                accessible menu options and positions a consistent component to\n                connect to various pages in the application.\n              </p>\n              <p>\n                The side navigation is a collapsible side content of the site’s\n                pages. It is located alongside the page’s primary content. The\n                component is designed to add side content to a fullscreen\n                application. It is activated through the “hamburger” menu in the\n                Navbar.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        // Added this block to demonstrate how to handle menu selection, side navigation toggle, and navbar visibility settings using JavaScript.\n        // const menuItems = document.querySelectorAll('modus-wc-menu-item');\n        // menuItems.forEach((item) => {\n        //   item.addEventListener('itemSelect', () => {\n        //     menuItems.forEach((i) => i.removeAttribute('selected'));\n        //     item.setAttribute('selected', '');\n        //   });\n        // });\n        // const handleMenuOpenChange = (e) => {\n        //   const eventSource = e.target;\n        //   const storyContainer = eventSource?.closest('.layout-with-navbar');\n\n        //   let sideNav;\n\n        //   if (storyContainer) {\n        //     sideNav = storyContainer.querySelector('modus-wc-side-navigation');\n        //   } else {\n        //     sideNav = document.querySelector('modus-wc-side-navigation');\n        //   }\n\n        //   if (sideNav) {\n        //     sideNav.expanded = e.detail;\n        //   }\n        // };\n\n        // const visibility = {\n        //   ai: true,\n        //   apps: true,\n        //   help: true,\n        //   mainMenu: true,\n        //   notifications: true,\n        //   search: true,\n        //   searchInput: false,\n        //   user: true,\n        // };\n\n        // const userCard = {\n        //   avatarAlt: 'User Avatar',\n        //   avatarSrc:\n        //     'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n        //   email: 'user@trimble.com',\n        //   name: 'Sonic the Hedgehog',\n        // };\n\n        // const navbar = document.querySelector('modus-wc-navbar');\n        // const sideNav = document.querySelector('modus-wc-side-navigation');\n        // navbar.visibility = visibility;\n        // navbar.userCard = userCard;\n        // navbar.addEventListener('mainMenuOpenChange', handleMenuOpenChange);\n      </script>",
+    "variations": [],
+    "args": {
+      "collapse-on-click-outside": "true",
+      "expanded": "false",
+      "max-width": "'256px'",
+      "mode": "'push'",
+      "target-content": "'.panel-content'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "expandedChange",
+      "itemSelect"
+    ]
+  },
+  "tag": "modus-wc-side-navigation",
+  "storyExample": {
+    "template": "<style>\n        .layout-with-navbar {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n        }\n        .main-content-row {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n        .modus-wc-menu-item-labels {\n          padding: 0 16px;\n        }\n        .navbar {\n          box-shadow: none;\n        }\n        .panel-content {\n          margin-left: 4rem;\n          padding: 10px;\n        }\n        .side-navigation {\n          height: 500px;\n          align-self: flex-start;\n          position: relative;\n        }\n      </style>\n      <div class=\"layout-with-navbar\">\n        <modus-wc-navbar\n          app-title=\"Modus App\"\n          class=\"navbar\"\n          @mainMenuOpenChange=${handleMenuOpenChange}\n          .userCard=${{\n            avatarAlt: 'User Avatar',\n            avatarSrc:\n              'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n            email: 'user@trimble.com',\n            name: 'Sonic the Hedgehog',\n          }}\n          .visibility=${{\n            ai: true,\n            apps: true,\n            help: true,\n            mainMenu: true,\n            notifications: true,\n            search: true,\n            searchInput: false,\n            user: true,\n          }}\n          style=\"z-index: 2;\"\n        ></modus-wc-navbar>\n        <div class=\"main-content-row\">\n          <modus-wc-side-navigation\n            class=\"side-navigation\"\n            collapse-on-click-outside=${args['collapse-on-click-outside']}\n            custom-class=${ifDefined(args['custom-class'])}\n            expanded=${args.expanded}\n            max-width=${args['max-width']}\n            mode=${ifDefined(args.mode)}\n            target-content=${ifDefined(args['target-content'])}\n          >\n            <modus-wc-menu size=\"lg\">\n              <modus-wc-menu-item label=\"home\" selected>\n                <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"profile\">\n                <modus-wc-icon slot=\"start-icon\" name=\"person\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"settings\">\n                <modus-wc-icon slot=\"start-icon\" name=\"gears\"></modus-wc-icon>\n              </modus-wc-menu-item>\n            </modus-wc-menu>\n          </modus-wc-side-navigation>\n          <div class=\"panel-content\">\n            <div id=\"overview\">\n              <p>\n                The side navigation of an application provides context through\n                accessible menu options and positions a consistent component to\n                connect to various pages in the application.\n              </p>\n              <p>\n                The side navigation is a collapsible side content of the site’s\n                pages. It is located alongside the page’s primary content. The\n                component is designed to add side content to a fullscreen\n                application. It is activated through the “hamburger” menu in the\n                Navbar.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        // Added this block to demonstrate how to handle menu selection, side navigation toggle, and navbar visibility settings using JavaScript.\n        // const menuItems = document.querySelectorAll('modus-wc-menu-item');\n        // menuItems.forEach((item) => {\n        //   item.addEventListener('itemSelect', () => {\n        //     menuItems.forEach((i) => i.removeAttribute('selected'));\n        //     item.setAttribute('selected', '');\n        //   });\n        // });\n        // const handleMenuOpenChange = (e) => {\n        //   const eventSource = e.target;\n        //   const storyContainer = eventSource?.closest('.layout-with-navbar');\n\n        //   let sideNav;\n\n        //   if (storyContainer) {\n        //     sideNav = storyContainer.querySelector('modus-wc-side-navigation');\n        //   } else {\n        //     sideNav = document.querySelector('modus-wc-side-navigation');\n        //   }\n\n        //   if (sideNav) {\n        //     sideNav.expanded = e.detail;\n        //   }\n        // };\n\n        // const visibility = {\n        //   ai: true,\n        //   apps: true,\n        //   help: true,\n        //   mainMenu: true,\n        //   notifications: true,\n        //   search: true,\n        //   searchInput: false,\n        //   user: true,\n        // };\n\n        // const userCard = {\n        //   avatarAlt: 'User Avatar',\n        //   avatarSrc:\n        //     'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n        //   email: 'user@trimble.com',\n        //   name: 'Sonic the Hedgehog',\n        // };\n\n        // const navbar = document.querySelector('modus-wc-navbar');\n        // const sideNav = document.querySelector('modus-wc-side-navigation');\n        // navbar.visibility = visibility;\n        // navbar.userCard = userCard;\n        // navbar.addEventListener('mainMenuOpenChange', handleMenuOpenChange);\n      </script>",
+    "args": {
+      "collapse-on-click-outside": "true",
+      "expanded": "false",
+      "max-width": "'256px'",
+      "mode": "'push'",
+      "target-content": "'.panel-content'"
+    },
+    "argTypes": {},
+    "events": [
+      "expandedChange",
+      "itemSelect"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface SideNavigationArgs {\n  'custom-class'?: string;\n  expanded: boolean;\n  'max-width': string;\n  'collapse-on-click-outside'?: boolean;\n  mode: 'overlay' | 'push';\n  'target-content'?: string;\n}\n\nconst meta: Meta<SideNavigationArgs> = {\n  title: 'Components/Side Navigation',\n  component: 'modus-wc-side-navigation',\n  args: {\n    'collapse-on-click-outside': true,\n    expanded: false,\n    'max-width': '256px',\n    mode: 'push',\n    'target-content': '.panel-content',\n  },\n  argTypes: {\n    'max-width': {\n      control: { type: 'text' },\n      description:\n        'Maximum width of the side navigation panel in an expanded state.',\n    },\n    mode: {\n      control: { type: 'select' },\n      options: ['overlay', 'push'],\n      description: 'Display mode of the side navigation (overlay or push).',\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    layout: 'padded',\n    actions: {\n      handles: ['expandedChange', 'itemSelect'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<SideNavigationArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    const handleMenuOpenChange = (e: CustomEvent) => {\n      const eventSource = e.target as HTMLElement;\n      const storyContainer = eventSource?.closest('.layout-with-navbar');\n      let sideNav: Element | null;\n\n      if (storyContainer) {\n        sideNav = storyContainer.querySelector('modus-wc-side-navigation');\n      } else {\n        sideNav = document.querySelector('modus-wc-side-navigation');\n      }\n\n      if (sideNav) {\n        (sideNav as HTMLElement & { expanded: boolean }).expanded = e.detail;\n      }\n    };\n\n    return html`\n      <style>\n        .layout-with-navbar {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n        }\n        .main-content-row {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n        .modus-wc-menu-item-labels {\n          padding: 0 16px;\n        }\n        .navbar {\n          box-shadow: none;\n        }\n        .panel-content {\n          margin-left: 4rem;\n          padding: 10px;\n        }\n        .side-navigation {\n          height: 500px;\n          align-self: flex-start;\n          position: relative;\n        }\n      </style>\n      <div class=\"layout-with-navbar\">\n        <modus-wc-navbar\n          app-title=\"Modus App\"\n          class=\"navbar\"\n          @mainMenuOpenChange=${handleMenuOpenChange}\n          .userCard=${{\n            avatarAlt: 'User Avatar',\n            avatarSrc:\n              'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n            email: 'user@trimble.com',\n            name: 'Sonic the Hedgehog',\n          }}\n          .visibility=${{\n            ai: true,\n            apps: true,\n            help: true,\n            mainMenu: true,\n            notifications: true,\n            search: true,\n            searchInput: false,\n            user: true,\n          }}\n          style=\"z-index: 2;\"\n        ></modus-wc-navbar>\n        <div class=\"main-content-row\">\n          <modus-wc-side-navigation\n            class=\"side-navigation\"\n            collapse-on-click-outside=${args['collapse-on-click-outside']}\n            custom-class=${ifDefined(args['custom-class'])}\n            expanded=${args.expanded}\n            max-width=${args['max-width']}\n            mode=${ifDefined(args.mode)}\n            target-content=${ifDefined(args['target-content'])}\n          >\n            <modus-wc-menu size=\"lg\">\n              <modus-wc-menu-item label=\"home\" selected>\n                <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"profile\">\n                <modus-wc-icon slot=\"start-icon\" name=\"person\"></modus-wc-icon>\n              </modus-wc-menu-item>\n              <modus-wc-menu-item label=\"settings\">\n                <modus-wc-icon slot=\"start-icon\" name=\"gears\"></modus-wc-icon>\n              </modus-wc-menu-item>\n            </modus-wc-menu>\n          </modus-wc-side-navigation>\n          <div class=\"panel-content\">\n            <div id=\"overview\">\n              <p>\n                The side navigation of an application provides context through\n                accessible menu options and positions a consistent component to\n                connect to various pages in the application.\n              </p>\n              <p>\n                The side navigation is a collapsible side content of the site’s\n                pages. It is located alongside the page’s primary content. The\n                component is designed to add side content to a fullscreen\n                application. It is activated through the “hamburger” menu in the\n                Navbar.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        // Added this block to demonstrate how to handle menu selection, side navigation toggle, and navbar visibility settings using JavaScript.\n        // const menuItems = document.querySelectorAll('modus-wc-menu-item');\n        // menuItems.forEach((item) => {\n        //   item.addEventListener('itemSelect', () => {\n        //     menuItems.forEach((i) => i.removeAttribute('selected'));\n        //     item.setAttribute('selected', '');\n        //   });\n        // });\n        // const handleMenuOpenChange = (e) => {\n        //   const eventSource = e.target;\n        //   const storyContainer = eventSource?.closest('.layout-with-navbar');\n\n        //   let sideNav;\n\n        //   if (storyContainer) {\n        //     sideNav = storyContainer.querySelector('modus-wc-side-navigation');\n        //   } else {\n        //     sideNav = document.querySelector('modus-wc-side-navigation');\n        //   }\n\n        //   if (sideNav) {\n        //     sideNav.expanded = e.detail;\n        //   }\n        // };\n\n        // const visibility = {\n        //   ai: true,\n        //   apps: true,\n        //   help: true,\n        //   mainMenu: true,\n        //   notifications: true,\n        //   search: true,\n        //   searchInput: false,\n        //   user: true,\n        // };\n\n        // const userCard = {\n        //   avatarAlt: 'User Avatar',\n        //   avatarSrc:\n        //     'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n        //   email: 'user@trimble.com',\n        //   name: 'Sonic the Hedgehog',\n        // };\n\n        // const navbar = document.querySelector('modus-wc-navbar');\n        // const sideNav = document.querySelector('modus-wc-side-navigation');\n        // navbar.visibility = visibility;\n        // navbar.userCard = userCard;\n        // navbar.addEventListener('mainMenuOpenChange', handleMenuOpenChange);\n      </script>\n    `;\n  },\n};\n\nexport const WithSubmenu: Story = {\n  render: (args) => {\n    const handleMenuOpenChange = (e: CustomEvent) => {\n      const eventSource = e.target as HTMLElement;\n      const storyContainer = eventSource?.closest('.layout-with-navbar');\n      let sideNav: HTMLElement | null;\n\n      if (storyContainer) {\n        sideNav = storyContainer.querySelector(\n          'modus-wc-side-navigation'\n        ) as HTMLElement;\n\n        if (sideNav) {\n          // Toggle the side nav state (navbar and side nav can be out of sync)\n          const sideNavEl = sideNav as HTMLElement & { expanded: boolean };\n          sideNavEl.expanded = e.detail;\n        }\n      }\n    };\n\n    const handleExpandedChange = (e: CustomEvent) => {\n      // Collapse all menu items when side nav closes\n      if (!e.detail) {\n        const eventSource = e.target as HTMLElement;\n        const menuItems = eventSource.querySelectorAll('modus-wc-menu-item');\n        menuItems.forEach((menuItem) => {\n          const item = menuItem as unknown as {\n            hasSubmenu?: boolean;\n            collapseSubmenu?: () => Promise<void>;\n          };\n          if (item.hasSubmenu && typeof item.collapseSubmenu === 'function') {\n            void item.collapseSubmenu();\n          }\n        });\n      }\n    };\n\n    return html`\n      <style>\n        .layout-with-navbar {\n          box-shadow: rgba(36, 35, 45, 0.3) 1px 0 4px;\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n        }\n\n        .main-content-row {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n\n        .panel-content {\n          margin-left: 4rem;\n          padding: 10px;\n        }\n\n        .side-navigation {\n          align-self: flex-start;\n          height: 500px;\n          position: relative;\n        }\n        .flex-right {\n          float: right;\n          display: flex;\n          margin-left: 50px;\n        }\n\n        .flex-right:hover {\n          background-color: unset;\n        }\n        .flex-right:active {\n          background-color: unset !important;\n        }\n      </style>\n\n      <div class=\"layout-with-navbar\">\n        <modus-wc-navbar\n          app-title=\"Modus App\"\n          class=\"navbar\"\n          id=\"main-navbar\"\n          @mainMenuOpenChange=${handleMenuOpenChange}\n          .userCard=${{\n            avatarAlt: 'User Avatar',\n            avatarSrc:\n              'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n            email: 'user@trimble.com',\n            name: 'Sonic the Hedgehog',\n          }}\n          .visibility=${{\n            ai: true,\n            apps: true,\n            help: true,\n            mainMenu: true,\n            notifications: true,\n            search: true,\n            searchInput: false,\n            user: true,\n          }}\n          style=\"z-index: 2;\"\n        ></modus-wc-navbar>\n        <div class=\"main-content-row\">\n          <modus-wc-side-navigation\n            class=\"side-navigation\"\n            collapse-on-click-outside=${args['collapse-on-click-outside']}\n            custom-class=${ifDefined(args['custom-class'])}\n            expanded=${args.expanded}\n            id=\"main-side-nav\"\n            max-width=${args['max-width']}\n            mode=${ifDefined(args.mode)}\n            target-content=${ifDefined(args['target-content'])}\n            @expandedChange=${handleExpandedChange}\n          >\n            <modus-wc-menu>\n              <li>\n                <div class=\"flex-right\">\n                  <modus-wc-button custom-class=\"menu-icon\" color=\"tertiary\">\n                    <modus-wc-icon\n                      name=\"filter\"\n                      size=\"xs\"\n                      variant=\"solid\"\n                    ></modus-wc-icon>\n                  </modus-wc-button>\n                  <modus-wc-button custom-class=\"menu-icon\" color=\"tertiary\">\n                    <modus-wc-icon\n                      name=\"settings\"\n                      size=\"xs\"\n                      variant=\"solid\"\n                    ></modus-wc-icon>\n                  </modus-wc-button>\n                  <modus-wc-button custom-class=\"menu-icon\" color=\"tertiary\">\n                    <modus-wc-icon\n                      name=\"more_vertical\"\n                      size=\"xs\"\n                      variant=\"solid\"\n                    ></modus-wc-icon>\n                  </modus-wc-button>\n                </div>\n              </li>\n              <modus-wc-menu-item\n                label=\"Charts\"\n                id=\"charts-menu\"\n                .hasSubmenu=${true}\n                value=\"charts\"\n              >\n                <modus-wc-icon\n                  slot=\"start-icon\"\n                  decorative=\"true\"\n                  name=\"bar_graph\"\n                ></modus-wc-icon>\n                <modus-wc-menu .isSubMenu=${true} id=\"charts-submenu\">\n                  <modus-wc-menu-item label=\"Bar Chart\" value=\"bar-chart\">\n                  </modus-wc-menu-item>\n                  <modus-wc-menu-item label=\"Line Chart\" value=\"line-chart\">\n                  </modus-wc-menu-item>\n                </modus-wc-menu>\n              </modus-wc-menu-item>\n\n              <modus-wc-menu-item label=\"Calendar\" value=\"calendar\">\n                <modus-wc-icon\n                  slot=\"start-icon\"\n                  decorative=\"true\"\n                  name=\"calendar\"\n                ></modus-wc-icon>\n              </modus-wc-menu-item>\n\n              <modus-wc-menu-item\n                label=\"Reports\"\n                .hasSubmenu=${true}\n                id=\"reports-menu\"\n                value=\"reports\"\n              >\n                <modus-wc-icon\n                  slot=\"start-icon\"\n                  decorative=\"true\"\n                  name=\"master_data\"\n                ></modus-wc-icon>\n                <modus-wc-menu .isSubMenu=${true} id=\"reports-submenu\">\n                  <modus-wc-menu-item\n                    label=\"Monthly Report\"\n                    value=\"monthly-report\"\n                  >\n                  </modus-wc-menu-item>\n                  <modus-wc-menu-item\n                    label=\"Annual Report\"\n                    value=\"annual-report\"\n                  >\n                  </modus-wc-menu-item>\n                </modus-wc-menu>\n              </modus-wc-menu-item>\n            </modus-wc-menu>\n          </modus-wc-side-navigation>\n          <div class=\"panel-content\">\n            <div id=\"overview\">\n              <h3>Side Navigation with Submenu</h3>\n              <p>\n                This example demonstrates the side navigation component with\n                submenus, allowing for a more organized and hierarchical\n                navigation structure.\n              </p>\n              <p>\n                When the side navigation closes, the expandedChange event is\n                used to call the collapseSubmenu() method on each menu item.\n                This keeps the side navigation component generic while allowing\n                the story to coordinate behavior between components.\n              </p>\n              <p>\n                Menu items inside a collapsed side nav cannot expand their\n                submenus, ensuring a consistent user experience.\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        // const handleMenuOpenChange = (e) => {\n        //   const eventSource = e.target;\n        //   const storyContainer = eventSource?.closest('.layout-with-navbar');\n        //   let sideNav;\n\n        //   if (storyContainer) {\n        //     sideNav = storyContainer.querySelector('modus-wc-side-navigation');\n        //   } else {\n        //     sideNav = document.querySelector('modus-wc-side-navigation');\n        //   }\n\n        //   if (sideNav) {\n        //     sideNav.expanded = e.detail;\n        //   }\n        // };\n\n        // const handleExpandedChange = (e) => {\n        //   // Collapse all menu items when side nav closes\n        //   if (!e.detail) {\n        //     const eventSource = e.target;\n        //     const menuItems =\n        //       eventSource.querySelectorAll('modus-wc-menu-item');\n        //     menuItems.forEach((menuItem) => {\n        //       if (\n        //         menuItem.hasSubmenu &&\n        //         typeof menuItem.collapseSubmenu === 'function'\n        //       ) {\n        //         menuItem.collapseSubmenu();\n        //       }\n        //     });\n        //   }\n        // };\n        //  // Adding event listeners and setting properties here as the storybook initially does not load them\n        //  document.addEventListener('DOMContentLoaded', () => {\n        //     const navbar = document.querySelector('#main-navbar');\n        //     const sideNav = document.querySelector('#main-side-nav');\n        //     const chartsMenu = document.querySelector('#charts-menu');\n        //     const reportsMenu = document.querySelector('#reports-menu');\n        //     const chartsSubMenu = document.querySelector('#charts-submenu');\n        //     const reportsSubMenu = document.querySelector('#reports-submenu');\n\n        //     if (navbar) {\n        //       // Set navbar properties\n        //       navbar.userCard = {\n        //         avatarAlt: 'User Avatar',\n        //         avatarSrc:\n        //           'https://i1.sndcdn.com/artworks-000405996468-wmh3uv-t500x500.jpg',\n        //         email: 'user@trimble.com',\n        //         name: 'Sonic the Hedgehog',\n        //       };\n\n        //       navbar.visibility = {\n        //         ai: true,\n        //         apps: true,\n        //         help: true,\n        //         mainMenu: true,\n        //         notifications: true,\n        //         search: true,\n        //         searchInput: false,\n        //         user: true,\n        //       };\n\n        //       navbar.addEventListener('mainMenuOpenChange', handleMenuOpenChange);\n        //     }\n\n        //     if (sideNav) {\n        //       sideNav.addEventListener('expandedChange', handleExpandedChange);\n        //     }\n\n        //     // Set hasSubmenu property for menu items with submenus\n        //     [chartsMenu, reportsMenu].forEach((menuItem) => {\n        //       if (menuItem) {\n        //         menuItem.hasSubmenu = true;\n        //       }\n        //     });\n\n        //     // Set isSubMenu for all submenu elements\n        //     [chartsSubMenu, reportsSubMenu].forEach((submenu) => {\n        //       if (submenu) {\n        //         submenu.isSubMenu = true;\n        //       }\n        //     });\n        //   });\n        //\n      </script>\n    `;\n  },\n};\n"
+  }
+}