@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/base/component-docs/modus-wc-modal.json

@@ -0,0 +1,108 @@
+{
+  "description": "A customizable modal component used to display content in a dialog. This component supports 'header', 'content', and 'footer' `<slot>` elements for inserting custom HTML.",
+  "properties": [
+    {
+      "name": "backdrop",
+      "type": "'default' | 'static'",
+      "description": "The modal's backdrop. Specify 'static' for a backdrop that doesn't close the modal when clicked outside the modal content.",
+      "default": "'default'",
+      "mutable": false,
+      "end_line": 27
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply",
+      "default": "''",
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "fullscreen",
+      "type": "boolean",
+      "description": "Specifies whether the modal should be displayed full-screen",
+      "default": "false",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "modalId",
+      "type": "string",
+      "description": "The ID of the inner dialog element",
+      "default": null,
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "position",
+      "type": "'bottom' | 'center' | 'top'",
+      "description": "Specifies the position of the modal",
+      "default": "'center'",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "showClose",
+      "type": "boolean",
+      "description": "Specifies whether to show the close icon button at the top right of modal",
+      "default": "true",
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "showFullscreenToggle",
+      "type": "boolean",
+      "description": "Specifies whether to show the fullscreen toggle icon button",
+      "default": "false",
+      "mutable": false,
+      "end_line": 45
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "header",
+      "description": "Slot for header content"
+    },
+    {
+      "name": "content",
+      "description": "Slot for content content"
+    },
+    {
+      "name": "footer",
+      "description": "Slot for footer content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-button id=\"open-modal-btn\" @buttonClick=${() => handleModalVisibility('show')}>\n  Open modal\n</modus-wc-button>\n<modus-wc-modal\n  aria-label=\"Example modal\"\n  custom-class=${ifDefined(args['custom-class'])}\n  fullscreen=${args.fullscreen}\n  modal-id=${modalId}\n  backdrop=${args.backdrop}\n  position=${args.position}\n  show-close=${args['show-close']}\n  show-fullscreen-toggle=${args['show-fullscreen-toggle']}\n>\n  <span slot=\"header\">Modal Title</span>\n  <span slot=\"content\"> This is sample modal content. </span>\n  <modus-wc-button slot=\"footer\" id=\"close-modal-btn\" @buttonClick=${() => handleModalVisibility('hide')}>\n    Close\n  </modus-wc-button>\n</modus-wc-modal>\n${illustrativeScript}",
+    "variations": [],
+    "args": {
+      "backdrop": "'default'",
+      "custom-class": "''",
+      "fullscreen": "false",
+      "modal-id": "'my_modal_1'",
+      "position": "'center'",
+      "show-close": "true",
+      "show-fullscreen-toggle": "false"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-modal",
+  "storyExample": {
+    "template": "<modus-wc-button id=\"open-modal-btn\" @buttonClick=${() => handleModalVisibility('show')}>\n  Open modal\n</modus-wc-button>\n<modus-wc-modal\n  aria-label=\"Example modal\"\n  custom-class=${ifDefined(args['custom-class'])}\n  fullscreen=${args.fullscreen}\n  modal-id=${modalId}\n  backdrop=${args.backdrop}\n  position=${args.position}\n  show-close=${args['show-close']}\n  show-fullscreen-toggle=${args['show-fullscreen-toggle']}\n>\n  <span slot=\"header\">Modal Title</span>\n  <span slot=\"content\"> This is sample modal content. </span>\n  <modus-wc-button slot=\"footer\" id=\"close-modal-btn\" @buttonClick=${() => handleModalVisibility('hide')}>\n    Close\n  </modus-wc-button>\n</modus-wc-modal>\n${illustrativeScript}",
+    "args": {
+      "backdrop": "'default'",
+      "custom-class": "''",
+      "fullscreen": "false",
+      "modal-id": "'my_modal_1'",
+      "position": "'center'",
+      "show-close": "true",
+      "show-fullscreen-toggle": "false"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { generateRandomId } from '../utils';\n\ninterface ModalArgs {\n  backdrop: 'default' | 'static';\n  'custom-class'?: string;\n  fullscreen: boolean;\n  'modal-id'?: string;\n  position: 'bottom' | 'center' | 'top';\n  'show-close': boolean;\n  'show-fullscreen-toggle': boolean;\n}\n\nconst meta: Meta<ModalArgs> = {\n  title: 'Components/Modal',\n  component: 'modus-wc-modal',\n  args: {\n    backdrop: 'default',\n    'custom-class': '',\n    fullscreen: false,\n    'modal-id': 'my_modal_1',\n    position: 'center',\n    'show-close': true,\n    'show-fullscreen-toggle': false,\n  },\n  argTypes: {\n    backdrop: {\n      control: { type: 'select' },\n      options: ['default', 'static'],\n    },\n    position: {\n      control: { type: 'select' },\n      options: ['bottom', 'center', 'top'],\n    },\n  },\n  parameters: {\n    layout: 'centered',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ModalArgs>;\nconst illustrativeScript = html`\n  <script>\n    // This is to illustrate how to implement modal visibility handling\n    // const modalId = document\n    //   .querySelector('modus-wc-modal')\n    //   .getAttribute('modal-id');\n    // const handleModalVisibility = (action) => {\n    //   const modal = document.getElementById(modalId);\n    //   if (modal) {\n    //     if (action === 'show') {\n    //       modal.showModal();\n    //     } else {\n    //       modal.close();\n    //     }\n    //   }\n    // };\n    // const openButton = document.getElementById('open-modal-btn');\n    // const closeButton = document.getElementById('close-modal-btn');\n    // openButton.addEventListener('click', () =>\n    //   handleModalVisibility('show')\n    // );\n    // closeButton.addEventListener('click', () =>\n    //   handleModalVisibility('hide')\n    // );\n  </script>\n`;\n\nexport const Default: Story = {\n  render: (args) => {\n    const modalId = `${args['modal-id']}${generateRandomId(4)}}`;\n\n    const handleModalVisibility = (action: 'show' | 'hide') => {\n      const modal = document.getElementById(modalId) as HTMLDialogElement;\n      if (modal) {\n        if (action === 'show') {\n          modal.showModal();\n        } else {\n          modal.close();\n        }\n      }\n    };\n\n    // prettier-ignore\n    return html`\n<modus-wc-button id=\"open-modal-btn\" @buttonClick=${() => handleModalVisibility('show')}>\n  Open modal\n</modus-wc-button>\n<modus-wc-modal\n  aria-label=\"Example modal\"\n  custom-class=${ifDefined(args['custom-class'])}\n  fullscreen=${args.fullscreen}\n  modal-id=${modalId}\n  backdrop=${args.backdrop}\n  position=${args.position}\n  show-close=${args['show-close']}\n  show-fullscreen-toggle=${args['show-fullscreen-toggle']}\n>\n  <span slot=\"header\">Modal Title</span>\n  <span slot=\"content\"> This is sample modal content. </span>\n  <modus-wc-button slot=\"footer\" id=\"close-modal-btn\" @buttonClick=${() => handleModalVisibility('hide')}>\n    Close\n  </modus-wc-button>\n</modus-wc-modal>\n${illustrativeScript}\n    `;\n  },\n};\n\nexport const CustomWidthAndHeight: Story = {\n  render: (args) => {\n    const modalId = `${args['modal-id']}${generateRandomId(4)}}`;\n\n    const handleModalVisibility = (action: 'show' | 'hide') => {\n      const modal = document.getElementById(modalId) as HTMLDialogElement;\n      if (modal) {\n        if (action === 'show') {\n          modal.showModal();\n        } else {\n          modal.close();\n        }\n      }\n    };\n\n    // prettier-ignore\n    return html`\n<style>\n  .expanded-modal .modus-wc-modal-box {\n    width: 80%;\n    max-width: none;\n    height: 60%;\n    max-height: none;\n  }\n</style>\n<modus-wc-button id=\"open-modal-btn\" @buttonClick=${() => handleModalVisibility('show')}>\n  Open modal\n</modus-wc-button>\n<modus-wc-modal\n  aria-label=\"Example modal\"\n  custom-class=\"expanded-modal\"\n  modal-id=${modalId}\n  backdrop=${ifDefined(args.backdrop)}\n  position=${ifDefined(args.position)}\n  show-close=${ifDefined(args['show-close'])}\n>\n  <span slot=\"header\">Modal Title</span>\n  <p slot=\"content\">Sample modal content.</p>\n  <modus-wc-button slot=\"footer\" id=\"close-modal-btn\" @buttonClick=${() => handleModalVisibility('hide')}>\n    Close\n  </modus-wc-button>\n</modus-wc-modal>\n${illustrativeScript}\n    `;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - Modal identification is now required via the \\`modal-id\\` prop.\n  - 2.0 requires the use of slots for a fully customizable \\`header\\`, \\`content\\`, and \\`footer\\`.\n  Primary and secondary buttons as well as \\`header-text\\` are no longer built-in.\n  - In 1.0, modals had built-in open/close state management with methods. 2.0 uses the native HTML dialog\n  element with \\`modal-id\\` to target the dialog with native \\`showModal()\\` and \\`close()\\` methods.\n\n#### Prop Mapping\n\n| 1.0 Prop                     | 2.0 Prop                | Notes                                         |\n|------------------------------|-------------------------|-----------------------------------------------|\n| aria-label                   | aria-label              |                                               |\n| backdrop                     | backdrop                |                                               |\n| fullscreen                   | fullscreen              |                                               |\n| header-text                  |                         | Not carried over, use \\`header\\` slot instead |\n| primary-button-aria-label    |                         | Not carried over, use \\`footer\\` slot instead |\n| primary-button-disabled      |                         | Not carried over, use \\`footer\\` slot instead |\n| primary-button-text          |                         | Not carried over, use \\`footer\\` slot instead |\n| secondary-button-aria-label  |                         | Not carried over, use \\`footer\\` slot instead |\n| secondary-button-disabled    |                         | Not carried over, use \\`footer\\` slot instead |\n| secondary-button-text        |                         | Not carried over, use \\`footer\\` slot instead |\n| show-fullscreen-toggle       | show-fullscreen-toggle  |                                               |\n| z-index                      |                         | Not carried over, use CSS instead             |\n\n#### Event Mapping\n\n| 1.0 Event            | 2.0 Event | Notes                                                                             |\n|----------------------|-----------|-----------------------------------------------------------------------------------|\n| closed               |           | Not carried over, use dialog \\`close()\\` event instead                            |\n| opened               |           | Not carried over, use dialog \\`showModal()\\` event instead                        |\n| primaryButtonClick   |           | Not carried over, handle with events on custom buttons in \\`footer\\` slot instead |\n| secondaryButtonClick |           | Not carried over, handle with events on custom buttons in \\`footer\\` slot instead |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

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

@@ -0,0 +1,280 @@
+{
+  "description": "A customizable navbar component used for top level navigation of all Trimble applications. The component supports a 'main-menu', 'notifications', and 'apps' <slot> for injecting custom HTML menus. It also supports a 'start', 'center', and 'end' `<slot>` for injecting additional custom HTML.",
+  "properties": [
+    {
+      "name": "appsMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the apps menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 95
+    },
+    {
+      "name": "condensed",
+      "type": "boolean",
+      "description": "Applies condensed layout and styling.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 98
+    },
+    {
+      "name": "condensedMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the condensed menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 101
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the host element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 104
+    },
+    {
+      "name": "mainMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the main menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 107
+    },
+    {
+      "name": "notificationsMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the notifications menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 110
+    },
+    {
+      "name": "searchDebounceMs",
+      "type": "number",
+      "description": "Debounce time in milliseconds for search input changes. Default is 300ms.",
+      "default": "300",
+      "mutable": false,
+      "end_line": 113
+    },
+    {
+      "name": "searchInputOpen",
+      "type": "boolean",
+      "description": "The open state of the search input.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 116
+    },
+    {
+      "name": "textOverrides",
+      "type": "INavbarTextOverrides",
+      "description": "Text replacements for the navbar.",
+      "default": null,
+      "mutable": false,
+      "end_line": 119
+    },
+    {
+      "name": "userCard",
+      "type": "INavbarUserCard",
+      "description": "User information used to render the user card.",
+      "default": null,
+      "mutable": false,
+      "end_line": 122
+    },
+    {
+      "name": "userMenuOpen",
+      "type": "boolean",
+      "description": "The open state of the user menu.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 125
+    },
+    {
+      "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": 137
+    }
+  ],
+  "events": [
+    {
+      "name": "aiClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the AI button is clicked or activated via keyboard.",
+      "end_line": 140
+    },
+    {
+      "name": "appsClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the apps button is clicked or activated via keyboard.",
+      "end_line": 143
+    },
+    {
+      "name": "appsMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the apps menu open state changes.",
+      "end_line": 146
+    },
+    {
+      "name": "condensedMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the condensed menu open state changes.",
+      "end_line": 149
+    },
+    {
+      "name": "helpClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the help button is clicked or activated via keyboard.",
+      "end_line": 152
+    },
+    {
+      "name": "mainMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the main menu open state changes.",
+      "end_line": 155
+    },
+    {
+      "name": "myTrimbleClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the user profile Access MyTrimble button is clicked or activated via keyboard.",
+      "end_line": 158
+    },
+    {
+      "name": "notificationsClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the notifications button is clicked or activated via keyboard.",
+      "end_line": 161
+    },
+    {
+      "name": "notificationsMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the notifications menu open state changes.",
+      "end_line": 164
+    },
+    {
+      "name": "searchChange",
+      "detail": "{ value: string }",
+      "description": "Event emitted when the search input value is changed.",
+      "end_line": 167
+    },
+    {
+      "name": "searchClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the search button is clicked or activated via keyboard.",
+      "end_line": 170
+    },
+    {
+      "name": "searchInputOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the search input open state changes.",
+      "end_line": 173
+    },
+    {
+      "name": "signOutClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the user profile sign out button is clicked or activated via keyboard.",
+      "end_line": 176
+    },
+    {
+      "name": "trimbleLogoClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the Trimble logo is clicked or activated via keyboard.",
+      "end_line": 179
+    },
+    {
+      "name": "userMenuOpenChange",
+      "detail": "boolean",
+      "description": "Event emitted when the user menu open state changes.",
+      "end_line": 182
+    }
+  ],
+  "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>\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"
+    },
+    "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>\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"
+    },
+    "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';\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}\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  },\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    'user-card': {\n      description: 'User profile card information',\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>\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};\n"
+  }
+}