@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/base/component-docs/modus-wc-input-feedback.json

@@ -0,0 +1,71 @@
+{
+  "description": "A customizable feedback component used to provide additional context related to form input interactions. <b>To use a custom icon, this component requires Modus icons to be installed in the host application. See [Modus Icon Usage](/docs/documentation-modus-icon-usage--docs) for steps.</b>",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the outer div element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 29
+    },
+    {
+      "name": "icon",
+      "type": "string",
+      "description": "The Modus icon to use instead of the pre-defined icons.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "level",
+      "type": "IInputFeedbackLevel",
+      "description": "The level informs which icon and color that will be rendered.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "message",
+      "type": "string",
+      "description": "The message.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the feedback component.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 41
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-input-feedback\n  custom-class=${ifDefined(args['custom-class'])}\n  icon=${ifDefined(args.icon)}\n  level=${args.level}\n  message=${ifDefined(args.message)}\n  size=${ifDefined(args.size)}\n>\n</modus-wc-input-feedback>",
+    "variations": [],
+    "args": {
+      "level": "'error'",
+      "message": "'Uh oh. You done messed up.'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-input-feedback",
+  "storyExample": {
+    "template": "<modus-wc-input-feedback\n  custom-class=${ifDefined(args['custom-class'])}\n  icon=${ifDefined(args.icon)}\n  level=${args.level}\n  message=${ifDefined(args.message)}\n  size=${ifDefined(args.size)}\n>\n</modus-wc-input-feedback>",
+    "args": {
+      "level": "'error'",
+      "message": "'Uh oh. You done messed up.'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { IInputFeedbackLevel } from './modus-wc-input-feedback';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { ModusSize } from '../types';\n\ninterface InputFeedbackArgs {\n  'custom-class'?: string;\n  icon?: string;\n  level: IInputFeedbackLevel;\n  message?: string;\n  size?: ModusSize;\n}\n\nconst meta: Meta<InputFeedbackArgs> = {\n  title: 'Components/Forms/Input Feedback',\n  component: 'modus-wc-input-feedback',\n  args: {\n    level: 'error',\n    message: 'Uh oh. You done messed up.',\n    size: 'md',\n  },\n  argTypes: {\n    level: {\n      control: { type: 'select' },\n      options: ['error', 'info', 'success', 'warning'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<InputFeedbackArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-input-feedback\n  custom-class=${ifDefined(args['custom-class'])}\n  icon=${ifDefined(args.icon)}\n  level=${args.level}\n  message=${ifDefined(args.message)}\n  size=${ifDefined(args.size)}\n>\n</modus-wc-input-feedback>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const WithCustomModusIcon: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-input-feedback\n  custom-class=${ifDefined(args['custom-class'])}\n  icon='calendar_check'\n  level='success'\n  message='Event added to calendar!'\n  size=${ifDefined(args.size)}\n>\n</modus-wc-input-feedback>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for input-feedback component\n    if (!customElements.get('input-feedback-shadow-host')) {\n      const InputFeedbackShadowHost = createShadowHostClass<InputFeedbackArgs>({\n        componentTag: 'modus-wc-input-feedback',\n        propsMapper: (v: InputFeedbackArgs, el: HTMLElement) => {\n          const inputFeedbackEl = el as unknown as {\n            customClass: string;\n            icon: string;\n            level: string;\n            message: string;\n            size: string;\n          };\n          inputFeedbackEl.customClass = v['custom-class'] || '';\n          inputFeedbackEl.icon = v.icon ?? '';\n          inputFeedbackEl.level = v.level;\n          inputFeedbackEl.message = v.message ?? '';\n          inputFeedbackEl.size = v.size ?? 'md';\n        },\n      });\n      customElements.define(\n        'input-feedback-shadow-host',\n        InputFeedbackShadowHost\n      );\n    }\n\n    return html`<input-feedback-shadow-host\n      .props=${{ ...args }}\n    ></input-feedback-shadow-host>`;\n  },\n};\n"
+  }
+}

package/versions/base/component-docs/modus-wc-input-label.json

@@ -0,0 +1,84 @@
+{
+  "description": "A customizable input label component. The component supports a `<slot>` for injecting additional custom content inside the label, such as icons or formatted text.",
+  "properties": [
+    {
+      "name": "forId",
+      "type": "string",
+      "description": "The `for` attribute of the label, matching the `id` of the associated input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 22
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Additional classes for custom styling.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 25
+    },
+    {
+      "name": "labelText",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 28
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "Whether the label indicates a required field.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the label.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "subLabelText",
+      "type": "string",
+      "description": "The text rendered beneath the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 37
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<input-label-shadow-host\n      .props=${{ ...args }}\n    ></input-label-shadow-host>",
+    "variations": [],
+    "args": {
+      "label-text": "'Label'",
+      "required": "false",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-input-label",
+  "storyExample": {
+    "template": "<input-label-shadow-host\n      .props=${{ ...args }}\n    ></input-label-shadow-host>",
+    "args": {
+      "label-text": "'Label'",
+      "required": "false",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { ModusSize } from '../types';\n\ninterface InputLabelArgs {\n  'for-id'?: string;\n  'custom-class'?: string;\n  'label-text'?: string;\n  required?: boolean;\n  size?: ModusSize;\n  'sub-label-text'?: string;\n}\n\nconst meta: Meta<InputLabelArgs> = {\n  title: 'Components/Forms/Input Label',\n  component: 'modus-wc-input-label',\n  args: {\n    'label-text': 'Label',\n    required: false,\n    size: 'md',\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<InputLabelArgs>;\n\nconst Template: Story = {\n  render: (args) => html`\n    <modus-wc-input-label\n      for-id=${ifDefined(args['for-id'])}\n      custom-class=${ifDefined(args['custom-class'])}\n      label-text=${ifDefined(args['label-text'])}\n      ?required=${args['required']}\n      size=${args.size}\n      sub-label-text=${ifDefined(args['sub-label-text'])}\n    ></modus-wc-input-label>\n  `,\n};\n\nexport const Default: Story = { ...Template };\n\nexport const Required: Story = { ...Template, args: { required: true } };\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for input-label component\n    if (!customElements.get('input-label-shadow-host')) {\n      const InputLabelShadowHost = createShadowHostClass<InputLabelArgs>({\n        componentTag: 'modus-wc-input-label',\n        propsMapper: (v: InputLabelArgs, el: HTMLElement) => {\n          const inputLabelEl = el as unknown as {\n            forId: string;\n            customClass: string;\n            labelText: string;\n            required: boolean;\n            size: string;\n            subLabelText: string;\n          };\n          inputLabelEl.forId = v['for-id'] ?? '';\n          inputLabelEl.customClass = v['custom-class'] || '';\n          inputLabelEl.labelText = v['label-text'] ?? '';\n          inputLabelEl.required = Boolean(v.required);\n          inputLabelEl.size = v.size ?? 'md';\n          inputLabelEl.subLabelText = v['sub-label-text'] ?? '';\n        },\n      });\n      customElements.define('input-label-shadow-host', InputLabelShadowHost);\n    }\n\n    return html`<input-label-shadow-host\n      .props=${{ ...args }}\n    ></input-label-shadow-host>`;\n  },\n};\n"
+  }
+}

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

@@ -0,0 +1,65 @@
+{
+  "description": "A customizable loader component used to indicate the loading of content",
+  "properties": [
+    {
+      "name": "color",
+      "type": "LoaderColor",
+      "description": "The color of the loader.",
+      "default": "'primary'",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the loader element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "size",
+      "type": "DaisySize",
+      "description": "The size of the loader.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "variant",
+      "type": "LoaderVariant",
+      "description": "The variant of the loader.",
+      "default": "'spinner'",
+      "mutable": false,
+      "end_line": 47
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-loader\n        aria-label=\"Loading spinner\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"${args.size}\"\n        variant=\"${args.variant}\"\n      ></modus-wc-loader>",
+    "variations": [],
+    "args": {
+      "color": "'primary'",
+      "custom-class": "''",
+      "size": "'md'",
+      "variant": "'spinner'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-loader",
+  "storyExample": {
+    "template": "<modus-wc-loader\n        aria-label=\"Loading spinner\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"${args.size}\"\n        variant=\"${args.variant}\"\n      ></modus-wc-loader>",
+    "args": {
+      "color": "'primary'",
+      "custom-class": "''",
+      "size": "'md'",
+      "variant": "'spinner'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LoaderColor, LoaderVariant } from './modus-wc-loader';\nimport { DaisySize } from '../types';\n\ninterface LoaderArgs {\n  color: LoaderColor;\n  'custom-class'?: string;\n  size: DaisySize;\n  variant: LoaderVariant;\n}\n\nconst meta: Meta<LoaderArgs> = {\n  title: 'Components/Loader',\n  component: 'modus-wc-loader',\n  args: {\n    color: 'primary',\n    'custom-class': '',\n    size: 'md',\n    variant: 'spinner',\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: [\n        'primary',\n        'secondary',\n        'accent',\n        'neutral',\n        'info',\n        'success',\n        'warning',\n        'error',\n      ],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['ball', 'bars', 'dots', 'infinity', 'ring', 'spinner'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<LoaderArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading spinner\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"${args.size}\"\n        variant=\"${args.variant}\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\nexport const Ball: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading ball\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"md\"\n        variant=\"ball\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\nexport const Bars: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading bars\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"md\"\n        variant=\"bars\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\nexport const Dots: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading dots\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"md\"\n        variant=\"dots\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\n// eslint-disable-next-line no-shadow-restricted-names\nexport const Infinity: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading infinity symbol\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"md\"\n        variant=\"infinity\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\nexport const Ring: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-loader\n        aria-label=\"Loading ring\"\n        color=\"${args.color}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        size=\"md\"\n        variant=\"ring\"\n      ></modus-wc-loader>\n    `;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - **Color value changes**: \\`dark\\` and \\`tertiary\\` values from 1.0 have been removed.\n  1.0 value \\`danger\\` has been renamed to \\`error\\` in 2.0. Values \\`accent\\`, \\`info\\`, and \\`neutral\\` are new options in 2.0.\n  - In 1.0 \\`size\\` used direct CSS size value strings (e.g., \\`'12rem'\\`). In 2.0 \\`size\\` is now defined by predefined values (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`), and CSS can be used for custom sizes.\n  - Added new \\`variant\\` prop to specify the loader type in 2.0.\n\n#### Prop Mapping\n\n| 1.0 Prop | 2.0 Prop | Notes                                                                                                  |\n|----------|----------|--------------------------------------------------------------------------------------------------------|\n| color    | color    | \\`dark\\` and \\`tertiary\\` from version 1.0 have been removed, \\`danger\\` has been renamed to \\`error\\` |\n| size     | size     | Now uses predefined sizes (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`), use CSS for custom sizes.                  |\n        `,\n      },\n    },\n    // To hide the actual story rendering and only show docs:\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  // Simple render function or leave it empty\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

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

@@ -0,0 +1,61 @@
+{
+  "description": "A component for displaying Trimble product logos with support for both fixed and scalable sizing. Provides consistent branding across applications with various product logo options.",
+  "properties": [
+    {
+      "name": "name",
+      "type": "LogoName",
+      "description": "The name of the logo to display. Accepts values like 'trimble', 'viewpoint_field_view', etc.",
+      "default": null,
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "emblem",
+      "type": "boolean",
+      "description": "Show emblem version (icon only) instead of full logo",
+      "default": "false",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the logo container.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "alt",
+      "type": "string",
+      "description": "The alt text for accessibility. If not provided, defaults to the logo name.",
+      "default": null,
+      "mutable": false,
+      "end_line": 39
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>",
+    "variations": [],
+    "args": {
+      "name": "'trimble'",
+      "emblem": "false"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-logo",
+  "storyExample": {
+    "template": "<modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>",
+    "args": {
+      "name": "'trimble'",
+      "emblem": "false"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { getAvailableLogos, LogoName } from './logo-constants';\n\ninterface LogoArgs {\n  name: LogoName;\n  emblem: boolean;\n  alt?: string;\n  'custom-class'?: string;\n}\n\nconst meta: Meta<LogoArgs> = {\n  title: 'Components/Logo',\n  component: 'modus-wc-logo',\n  args: {\n    name: 'trimble',\n    emblem: false,\n  },\n  argTypes: {\n    name: {\n      control: { type: 'select' },\n      options: getAvailableLogos(),\n    },\n    emblem: {\n      control: { type: 'boolean' },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<LogoArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-logo\n        name=\"${args.name}\"\n        ?emblem=\"${args.emblem}\"\n        alt=\"${ifDefined(args.alt)}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n      ></modus-wc-logo>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const CustomSizeWithClass: Story = {\n  render: () => {\n    return html`\n      <style>\n        .logo-small {\n          width: 80px;\n        }\n        .logo-medium {\n          width: 150px;\n        }\n        .logo-large {\n          width: 250px;\n        }\n        .emblem-xs {\n          width: 80px;\n          height: 80px;\n        }\n        .emblem-sm {\n          width: 150px;\n          height: 150px;\n        }\n        .emblem-lg {\n          width: 250px;\n          height: 250px;\n        }\n      </style>\n      <div style=\"display: flex; flex-direction: column; gap: 3rem;\">\n        <div>\n          <h4>Full Logos - Custom Sizes</h4>\n          <div\n            style=\"display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;\"\n          >\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-small\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-medium\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              custom-class=\"logo-large\"\n            ></modus-wc-logo>\n          </div>\n        </div>\n\n        <div>\n          <h4>Emblems - Custom Sizes</h4>\n          <div\n            style=\"display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;\"\n          >\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-xs\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-sm\"\n            ></modus-wc-logo>\n            <modus-wc-logo\n              name=\"trimble\"\n              emblem\n              custom-class=\"emblem-lg\"\n            ></modus-wc-logo>\n          </div>\n        </div>\n        </div>\n      </div>\n    `;\n  },\n};\n"
+  }
+}

package/versions/base/component-docs/modus-wc-menu-item.json

@@ -0,0 +1,173 @@
+{
+  "description": "A customizable menu item component used to display the item portion of a menu. This component supports a 'start-icon' `<slot>` that allows for custom icons to be placed at the beginning of the item.",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "",
+      "default": null,
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "checkbox",
+      "type": "boolean",
+      "description": "If true, renders a checkbox at the start of the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the li element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "The disabled state of the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text rendered in the menu item.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "startIcon",
+      "type": "string",
+      "description": "The modus icon name to render on the start of the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 47
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "description": "The selected state of the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 50
+    },
+    {
+      "name": "focused",
+      "type": "boolean",
+      "description": "The focused state of the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the menu item.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 56
+    },
+    {
+      "name": "subLabel",
+      "type": "string",
+      "description": "The text rendered beneath the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 59
+    },
+    {
+      "name": "tooltipContent",
+      "type": "string",
+      "description": "The tooltip text to display when hovering over the menu item.",
+      "default": null,
+      "mutable": false,
+      "end_line": 62
+    },
+    {
+      "name": "tooltipPosition",
+      "type": "'auto' | 'top' | 'right' | 'bottom' | 'left'",
+      "description": "The position of the tooltip relative to the menu item.",
+      "default": "'auto'",
+      "mutable": false,
+      "end_line": 66
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The unique identifying value of the menu item.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 69
+    },
+    {
+      "name": "hasSubmenu",
+      "type": "boolean",
+      "description": "Whether this menu item has a collapsible submenu. When true, the item will show a caret and handle toggle behavior.",
+      "default": null,
+      "mutable": false,
+      "end_line": 72
+    }
+  ],
+  "events": [
+    {
+      "name": "itemSelect",
+      "detail": "{ value: string; selected?: boolean; }",
+      "description": "Event emitted when a menu item is selected.",
+      "end_line": 81
+    }
+  ],
+  "methods": [
+    {
+      "name": "collapseSubmenu",
+      "signature": "()",
+      "parameters": "",
+      "returnType": "P",
+      "description": "Public method to collapse the submenu if it's expanded",
+      "end_line": 101
+    }
+  ],
+  "slots": [
+    {
+      "name": "start-icon",
+      "description": "Slot for start-icon content"
+    },
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    ?checkbox=${args.checkbox}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    tooltip-content=${ifDefined(args['tooltip-content'])}\n    tooltip-position=${ifDefined(args['tooltip-position'])}\n    value=${args.value}\n  ></modus-wc-menu-item>\n</modus-wc-menu>",
+    "variations": [],
+    "args": {
+      "label": "'Menu Item'",
+      "size": "'md'",
+      "value": "'menuItem'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "itemSelect"
+    ]
+  },
+  "tag": "modus-wc-menu-item",
+  "storyExample": {
+    "template": "<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    ?checkbox=${args.checkbox}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    tooltip-content=${ifDefined(args['tooltip-content'])}\n    tooltip-position=${ifDefined(args['tooltip-position'])}\n    value=${args.value}\n  ></modus-wc-menu-item>\n</modus-wc-menu>",
+    "args": {
+      "label": "'Menu Item'",
+      "size": "'md'",
+      "value": "'menuItem'"
+    },
+    "argTypes": {},
+    "events": [
+      "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';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { ModusSize } from '../types';\n\ninterface MenuItemArgs {\n  bordered?: boolean;\n  checkbox?: boolean;\n  'custom-class'?: string;\n  disabled?: boolean;\n  'has-submenu'?: boolean;\n  label: string;\n  selected?: boolean;\n  size?: ModusSize;\n  'sub-label'?: string;\n  'tooltip-content'?: string;\n  'tooltip-position'?: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n  value: string;\n}\n\nconst meta: Meta<MenuItemArgs> = {\n  title: 'Components/Menu Item',\n  component: 'modus-wc-menu-item',\n  args: {\n    label: 'Menu Item',\n    size: 'md',\n    value: 'menuItem',\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    'tooltip-position': {\n      control: { type: 'select' },\n      options: ['auto', 'top', 'right', 'bottom', 'left'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['itemSelect'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<MenuItemArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    ?checkbox=${args.checkbox}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    tooltip-content=${ifDefined(args['tooltip-content'])}\n    tooltip-position=${ifDefined(args['tooltip-position'])}\n    value=${args.value}\n  ></modus-wc-menu-item>\n</modus-wc-menu>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const WithIcon: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    ?checkbox=${args.checkbox}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    tooltip-content=${ifDefined(args['tooltip-content'])}\n    tooltip-position=${ifDefined(args['tooltip-position'])}\n    value=${args.value}\n  >\n    <modus-wc-icon\n      slot=\"start-icon\"\n      name=\"alert\"\n      size=\"sm\"\n    ></modus-wc-icon>\n  </modus-wc-menu-item>\n</modus-wc-menu>\n    `;\n  },\n};\nexport const WithCheckbox: Story = {\n  args: {\n    checkbox: true,\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    ?checkbox=${args.checkbox}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    value=${args.value}\n ></modus-wc-menu-item>\n</modus-wc-menu>\n    `;\n  },\n};\n\nexport const WithTooltip: Story = {\n  args: {\n    'tooltip-content': 'This is a tooltip for the menu item',\n    'tooltip-position': 'top',\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-menu>\n  <modus-wc-menu-item\n    ?bordered=${args.bordered}\n    custom-class=${ifDefined(args['custom-class'])}\n    ?disabled=${args.disabled}\n    label=${args.label}\n    ?selected=${args.selected}\n    size=${args.size}\n    sub-label=${ifDefined(args['sub-label'])}\n    tooltip-content=${ifDefined((args['tooltip-content']))}\n    tooltip-position=${ifDefined(args['tooltip-position'])}\n    value=${args.value}\n  ></modus-wc-menu-item>\n</modus-wc-menu>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for menu-item component\n    if (!customElements.get('menu-item-shadow-host')) {\n      const MenuItemShadowHost = createShadowHostClass<MenuItemArgs>({\n        componentTag: 'modus-wc-menu',\n        propsMapper: (v: MenuItemArgs, el: HTMLElement) => {\n          const menuEl = el as unknown as {\n            ariaLabel: string;\n          };\n          menuEl.ariaLabel = 'Shadow DOM Menu';\n\n          // Get or create menu item\n          let menuItem = el.querySelector('modus-wc-menu-item');\n          if (!menuItem) {\n            menuItem = document.createElement('modus-wc-menu-item');\n            el.innerHTML = '';\n            el.appendChild(menuItem);\n          }\n\n          // Update properties on the existing element\n          const menuItemEl = menuItem as unknown as {\n            ariaLabel: string;\n            bordered: boolean;\n            checkbox: boolean;\n            customClass: string;\n            disabled: boolean;\n            label: string;\n            selected: boolean;\n            size: string;\n            subLabel: string;\n            tooltipContent: string;\n            tooltipPosition: string;\n            value: string;\n          };\n\n          menuItemEl.ariaLabel = 'Menu item in shadow DOM';\n          menuItemEl.bordered = Boolean(v.bordered);\n          menuItemEl.checkbox = Boolean(v.checkbox);\n          menuItemEl.customClass = v['custom-class'] || '';\n          menuItemEl.disabled = Boolean(v.disabled);\n          menuItemEl.label = v.label;\n          menuItemEl.selected = Boolean(v.selected);\n          menuItemEl.size = v.size || 'md';\n          menuItemEl.subLabel = v['sub-label'] || '';\n          menuItemEl.tooltipContent = v['tooltip-content'] || '';\n          menuItemEl.tooltipPosition = v['tooltip-position'] || 'auto';\n          menuItemEl.value = v.value;\n        },\n      });\n      customElements.define('menu-item-shadow-host', MenuItemShadowHost);\n    }\n\n    return html`<menu-item-shadow-host\n      .props=${{ ...args }}\n    ></menu-item-shadow-host>`;\n  },\n};\n"
+  }
+}

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

@@ -0,0 +1,86 @@
+{
+  "description": "A customizable menu component used to display a list of li elements vertically or horizontally. The component supports a `<slot>` for injecting custom li elements inside the ul element.",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the menu should have a border.",
+      "default": null,
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the ul element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "orientation",
+      "type": "Orientation",
+      "description": "The orientation of the menu.",
+      "default": "'vertical'",
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the menu.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "isSubMenu",
+      "type": "boolean",
+      "description": "Indicates that this menu is a submenu (dropdown).",
+      "default": null,
+      "mutable": false,
+      "end_line": 43
+    }
+  ],
+  "events": [
+    {
+      "name": "menuFocusout",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the menu loses focus.",
+      "end_line": 46
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-menu\n  aria-label=\"Menu\"\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  orientation=${ifDefined(args.orientation)}\n  size=${ifDefined(args.size)}\n>\n  <modus-wc-menu-item\n    label=\"Small\"\n    value=\"1\"\n    size=\"sm\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item label=\"Medium\" value=\"2\"></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Large\"\n    value=\"3\"\n    size=\"lg\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Bordered\"\n    value=\"3\"\n    bordered=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Sub-label\"\n    value=\"3\"\n    sub-label=\"Sub-label\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Selected\"\n    value=\"3\"\n    selected=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Start Icon\"\n    value=\"3\"\n  >\n    <modus-wc-icon slot=\"start-icon\" name=\"info\"></modus-wc-icon>\n  </modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Disabled\"\n    value=\"3\"\n    disabled=\"true\"\n  ></modus-wc-menu-item>\n</modus-wc-menu>",
+    "variations": [],
+    "args": {
+      "orientation": "'vertical'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "menuFocusout"
+    ]
+  },
+  "tag": "modus-wc-menu",
+  "storyExample": {
+    "template": "<modus-wc-menu\n  aria-label=\"Menu\"\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  orientation=${ifDefined(args.orientation)}\n  size=${ifDefined(args.size)}\n>\n  <modus-wc-menu-item\n    label=\"Small\"\n    value=\"1\"\n    size=\"sm\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item label=\"Medium\" value=\"2\"></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Large\"\n    value=\"3\"\n    size=\"lg\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Bordered\"\n    value=\"3\"\n    bordered=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Sub-label\"\n    value=\"3\"\n    sub-label=\"Sub-label\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Selected\"\n    value=\"3\"\n    selected=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Start Icon\"\n    value=\"3\"\n  >\n    <modus-wc-icon slot=\"start-icon\" name=\"info\"></modus-wc-icon>\n  </modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Disabled\"\n    value=\"3\"\n    disabled=\"true\"\n  ></modus-wc-menu-item>\n</modus-wc-menu>",
+    "args": {
+      "orientation": "'vertical'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [
+      "menuFocusout"
+    ],
+    "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 { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { ModusSize, Orientation } from '../types';\n\ninterface MenuArgs {\n  bordered?: boolean;\n  'custom-class'?: string;\n  orientation?: Orientation;\n  size?: ModusSize;\n}\n\nconst meta: Meta<MenuArgs> = {\n  title: 'Components/Menu',\n  component: 'modus-wc-menu',\n  args: {\n    orientation: 'vertical',\n    size: 'md',\n  },\n  argTypes: {\n    orientation: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['menuFocusout'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<MenuArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-menu\n  aria-label=\"Menu\"\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  orientation=${ifDefined(args.orientation)}\n  size=${ifDefined(args.size)}\n>\n  <modus-wc-menu-item\n    label=\"Small\"\n    value=\"1\"\n    size=\"sm\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item label=\"Medium\" value=\"2\"></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Large\"\n    value=\"3\"\n    size=\"lg\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Bordered\"\n    value=\"3\"\n    bordered=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Sub-label\"\n    value=\"3\"\n    sub-label=\"Sub-label\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Selected\"\n    value=\"3\"\n    selected=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Start Icon\"\n    value=\"3\"\n  >\n    <modus-wc-icon slot=\"start-icon\" name=\"info\"></modus-wc-icon>\n  </modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Disabled\"\n    value=\"3\"\n    disabled=\"true\"\n  ></modus-wc-menu-item>\n</modus-wc-menu>\n    `;\n  },\n};\n\nexport const CustomMenu: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<style>\n  .custom-menu-width {\n    width: 400px;\n  }\n  .custom-flex-row {\n    display: flex;\n    align-items: center;\n  }\n  .custom-nested-row {\n    padding-inline-start: 3rem;\n  }\n  .custom-justify-end {\n    margin-left: auto;\n  }\n  .green-square {\n    height: 18px;\n    width: 18px;\n    background-color: green;\n  }\n  .red-square {\n    height: 18px;\n    width: 18px;\n    background-color: red;\n  }\n</style>\n<modus-wc-menu\n  aria-label=\"Custom menu\"\n  custom-class=\"custom-menu-width\"\n>\n  <li>\n    <div class=\"custom-flex-row\">\n      <modus-wc-icon decorative=\"true\" name=\"expand_more\"></modus-wc-icon>\n      <modus-wc-button aria-label=\"Visible button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n        <modus-wc-icon aria-label=\"Visible icon\" name=\"visibility_on\"></modus-wc-icon>\n      </modus-wc-button>\n      <div>Parent</div>\n      <div class=\"custom-justify-end\">\n        <modus-wc-button aria-label=\"Actions button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n          <modus-wc-icon aria-label=\"Actions icon\" name=\"more_vertical\"></modus-wc-icon>\n        </modus-wc-button>\n      </div>\n    </div>\n  </li>\n  <li>\n    <div class=\"custom-flex-row custom-nested-row\">\n      <modus-wc-button aria-label=\"Visible button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n        <modus-wc-icon aria-label=\"Visible icon\" name=\"visibility_on\"></modus-wc-icon>\n      </modus-wc-button>\n      <div class=\"green-square\"></div>\n      <div>Child</div>\n      <div class=\"custom-justify-end\">\n        <modus-wc-button aria-label=\"Actions button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n          <modus-wc-icon aria-label=\"Actions icon\" name=\"more_vertical\"></modus-wc-icon>\n        </modus-wc-button>\n      </div>\n    </div>\n  </li>\n  <li>\n    <div class=\"custom-flex-row custom-nested-row\">\n      <modus-wc-button aria-label=\"Visible button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n        <modus-wc-icon aria-label=\"Invisible icon\" name=\"visibility_off\"></modus-wc-icon>\n      </modus-wc-button>\n      <div class=\"red-square\"></div>\n      <div>Child</div>\n      <div class=\"custom-justify-end\">\n        <modus-wc-button aria-label=\"Actions button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n          <modus-wc-icon aria-label=\"Actions icon\" name=\"more_vertical\"></modus-wc-icon>\n        </modus-wc-button>\n      </div>\n    </div>\n  </li>\n  <li>\n    <div class=\"custom-flex-row\">\n      <modus-wc-icon decorative=\"true\" name=\"chevron_right\"></modus-wc-icon>\n      <modus-wc-button aria-label=\"Visible button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n        <modus-wc-icon aria-label=\"Visible icon\" name=\"visibility_on\"></modus-wc-icon>\n      </modus-wc-button>\n      <div>Parent</div>\n      <div class=\"custom-justify-end\">\n        <modus-wc-button aria-label=\"Actions button\" size=\"sm\" shape=\"circle\" variant=\"borderless\">\n          <modus-wc-icon aria-label=\"Actions icon\" name=\"more_vertical\"></modus-wc-icon>\n        </modus-wc-button>\n      </div>\n    </div>\n  </li>\n</modus-wc-menu>\n    `;\n  },\n};\n\nexport const CollapsibleMenu: Story = {\n  render: () => {\n    return html`\n      <style>\n        .menu-width {\n          width: 400px;\n        }\n      </style>\n      <modus-wc-menu custom-class=\"menu-width\">\n        <modus-wc-menu-item\n          label=\"Charts\"\n          .hasSubmenu=${true}\n          id=\"charts-menu\"\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 label=\"Monthly Report\" value=\"monthly-report\">\n            </modus-wc-menu-item>\n            <modus-wc-menu-item label=\"Annual Report\" value=\"annual-report\">\n            </modus-wc-menu-item>\n          </modus-wc-menu>\n        </modus-wc-menu-item>\n      </modus-wc-menu>\n\n      <script>\n        // Adding this block to show how to set submenu properties via JS\n        // document.addEventListener('DOMContentLoaded', () => {\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        //   // 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      </script>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for menu component\n    if (!customElements.get('menu-shadow-host')) {\n      const MenuShadowHost = createShadowHostClass<MenuArgs>({\n        componentTag: 'modus-wc-menu',\n        propsMapper: (v: MenuArgs, el: HTMLElement) => {\n          const menuEl = el as unknown as {\n            ariaLabel: string;\n            bordered: boolean;\n            customClass: string;\n            orientation: string;\n            size: string;\n          };\n          menuEl.ariaLabel = 'Shadow DOM Menu';\n          menuEl.bordered = Boolean(v.bordered);\n          menuEl.customClass = v['custom-class'] || '';\n          menuEl.orientation = v.orientation || 'vertical';\n          menuEl.size = v.size || 'md';\n\n          // Only set innerHTML once on initial creation\n          if (!el.querySelector('modus-wc-menu-item')) {\n            el.innerHTML = `\n              <modus-wc-menu-item\n    label=\"Small\"\n    value=\"1\"\n    size=\"sm\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item label=\"Medium\" value=\"2\"></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Large\"\n    value=\"3\"\n    size=\"lg\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Bordered\"\n    value=\"3\"\n    bordered=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Sub-label\"\n    value=\"3\"\n    sub-label=\"Sub-label\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Selected\"\n    value=\"3\"\n    selected=\"true\"\n  ></modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"With Start Icon\"\n    value=\"3\"\n  >\n    <modus-wc-icon slot=\"start-icon\" name=\"info\"></modus-wc-icon>\n  </modus-wc-menu-item>\n  <modus-wc-menu-item\n    label=\"Disabled\"\n    value=\"3\"\n    disabled=\"true\"\n  ></modus-wc-menu-item>\n          `;\n          }\n        },\n      });\n      customElements.define('menu-shadow-host', MenuShadowHost);\n    }\n\n    return html`<menu-shadow-host .props=${{ ...args }}></menu-shadow-host>`;\n  },\n};\n"
+  }
+}