@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,139 @@
+{
+  "description": "A customizable radio button component.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "The disabled state of the radio.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "The tabindex of the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 46
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 49
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 52
+    },
+    {
+      "name": "value",
+      "type": "boolean",
+      "description": "The value of the radio.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 55
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input loses focus.",
+      "end_line": 58
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Emitted when the input value changes.",
+      "end_line": 61
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input gains focus.",
+      "end_line": 64
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-radio\n        aria-label=\"Radio\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n      ></modus-wc-radio>",
+    "variations": [],
+    "args": {
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "name": "''",
+      "required": "false",
+      "size": "'md'",
+      "value": "true"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-radio",
+  "storyExample": {
+    "template": "<modus-wc-radio\n        aria-label=\"Radio\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n      ></modus-wc-radio>",
+    "args": {
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "name": "''",
+      "required": "false",
+      "size": "'md'",
+      "value": "true"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ],
+    "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 RadioArgs {\n  'custom-class'?: string;\n  disabled?: boolean;\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  name?: string;\n  required?: boolean;\n  size?: ModusSize;\n  value: boolean;\n}\n\nconst meta: Meta<RadioArgs> = {\n  title: 'Components/Forms/Radio',\n  component: 'modus-wc-radio',\n  args: {\n    'custom-class': '',\n    disabled: false,\n    label: 'Label',\n    name: '',\n    required: false,\n    size: 'md',\n    value: true,\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['inputBlur', 'inputChange', 'inputFocus'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<RadioArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-radio\n        aria-label=\"Radio\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        input-id=${ifDefined(args['input-id'])}\n        input-tab-index=${ifDefined(args['input-tab-index'])}\n        label=${ifDefined(args.label)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n      ></modus-wc-radio>\n    `;\n  },\n};\n\nexport const RadioGroup: Story = {\n  // prettier-ignore\n  render: (args) => {\n    return html`\n<style>\n  .radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  .radio-group legend {\n    margin-bottom: 0.5rem;\n  }\n</style>\n\n<main role=\"main\">\n  <fieldset class=\"radio-group\">\n    <legend>Select an option:</legend>\n\n    <modus-wc-radio\n      label=\"Option 1\"\n      name=\"radio-group-demo\"\n      input-id=\"option1\"\n      ?disabled=${args.disabled}\n      size=${ifDefined(args.size)}\n      .value=${true}\n      @inputChange=${(e: CustomEvent) => {\n        // In a real app, you would update your state management here\n        console.log('Selected:', e.target);\n      }}\n    ></modus-wc-radio>\n\n    <modus-wc-radio\n      label=\"Option 2\"\n      name=\"radio-group-demo\"\n      input-id=\"option2\"\n      ?disabled=${args.disabled}\n      size=${ifDefined(args.size)}\n      .value=${false}\n      @inputChange=${(e: CustomEvent) => {\n        console.log('Selected:', e.target);\n      }}\n    ></modus-wc-radio>\n\n    <modus-wc-radio\n      label=\"Option 3\"\n      name=\"radio-group-demo\"\n      input-id=\"option3\"\n      ?disabled=${args.disabled}\n      size=${ifDefined(args.size)}\n      .value=${false}\n      @inputChange=${(e: CustomEvent) => {\n        console.log('Selected:', e.target);\n      }}\n    ></modus-wc-radio>\n  </fieldset>\n</main>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for radio component\n    if (!customElements.get('radio-shadow-host')) {\n      const RadioShadowHost = createShadowHostClass<RadioArgs>({\n        componentTag: 'modus-wc-radio',\n        propsMapper: (v: RadioArgs, el: HTMLElement) => {\n          const radioEl = el as unknown as {\n            customClass: string;\n            disabled: boolean;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            name: string;\n            required: boolean;\n            size: string;\n            value: boolean;\n          };\n          radioEl.customClass = v['custom-class'] || '';\n          radioEl.disabled = Boolean(v.disabled);\n          radioEl.inputId = v['input-id'] || '';\n          radioEl.inputTabIndex = v['input-tab-index'] || 0;\n          radioEl.label = v.label || '';\n          radioEl.name = v.name || '';\n          radioEl.required = Boolean(v.required);\n          radioEl.size = v.size || 'md';\n          radioEl.value = Boolean(v.value);\n        },\n      });\n      customElements.define('radio-shadow-host', RadioShadowHost);\n    }\n\n    return html`<radio-shadow-host .props=${{ ...args }}></radio-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Size values have changed from verbose names (\\`small\\`, \\`medium\\`) to abbreviations (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop            | 2.0 Prop    | Notes                                                |\n|---------------------|-------------|----------------------------------------------------- |\n| checked             | value       |                                                      |\n| disabled            | disabled    |                                                      |\n| handle-button-click |             | Not carried over                                     |\n| handle-keydown      |             | Not carried over                                     |\n| id                  | input-id    |                                                      |\n| label               | label       |                                                      |\n| name                | name        |                                                      |\n| ref                 |             | Not carried over                                     |\n| size                | size        | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\`              |\n\n#### Event Mapping\n\n| 1.0 Event   | 2.0 Event   | Notes                                               |\n|-------------|-------------|-----------------------------------------------------|\n| buttonClick | inputChange | Now emits an \\`InputEvent\\` instead of a \\`string\\` |\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-rating.json

@@ -0,0 +1,117 @@
+{
+  "description": "A rating component that allows users to choose a rating from predefined options",
+  "properties": [
+    {
+      "name": "allowHalf",
+      "type": "boolean",
+      "description": "Whether to allow half-ratings. Only applies to star and heart variants.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "description": "The number of rating items to display",
+      "default": "5",
+      "mutable": false,
+      "end_line": 46
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply",
+      "default": "''",
+      "mutable": false,
+      "end_line": 49
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the rating component is disabled",
+      "default": "false",
+      "mutable": false,
+      "end_line": 52
+    },
+    {
+      "name": "getAriaLabelText",
+      "type": "(ratingValue: number)",
+      "description": "Function to provide aria-label text for a given rating-item index",
+      "default": "> string = (ratingValue) =>     `Rating item ${ratingValue}`",
+      "mutable": false,
+      "end_line": 56
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the rating component",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 59
+    },
+    {
+      "name": "variant",
+      "type": "ModusWcRatingVariant",
+      "description": "The variant of the rating scale",
+      "default": "'smiley'",
+      "mutable": false,
+      "end_line": 62
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "description": "The current value of the rating",
+      "default": "0",
+      "mutable": true,
+      "end_line": 65
+    }
+  ],
+  "events": [
+    {
+      "name": "ratingChange",
+      "detail": "IRatingChange",
+      "description": "Event emitted when the rating changes",
+      "end_line": 68
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<script>\n  const myAriaLabelText = (index) => {\n    return 'Custom label for rating item ' + index.toString();\n  };\n</script>\n<modus-wc-rating\n  aria-label=\"Rating scale component\"\n  allow-half=${ifDefined(args['allow-half'])}\n  count=${args.count}\n  custom-class=\"custom-rating-component\"\n  disabled=${ifDefined(args.disabled)}\n  size=${ifDefined(args.size)}\n  value=${ifDefined(args.value)}\n  variant=${args.variant}\n  .getAriaLabelText=${ariaLabelText}\n></modus-wc-rating>",
+    "variations": [],
+    "args": {
+      "allow-half": "false",
+      "count": "5",
+      "custom-class": "''",
+      "disabled": "false",
+      "getAriaLabelText": "(index: number) => `$",
+      "size": "'md'",
+      "value": "0",
+      "variant": "'smiley'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "ratingChange"
+    ]
+  },
+  "tag": "modus-wc-rating",
+  "storyExample": {
+    "template": "<script>\n  const myAriaLabelText = (index) => {\n    return 'Custom label for rating item ' + index.toString();\n  };\n</script>\n<modus-wc-rating\n  aria-label=\"Rating scale component\"\n  allow-half=${ifDefined(args['allow-half'])}\n  count=${args.count}\n  custom-class=\"custom-rating-component\"\n  disabled=${ifDefined(args.disabled)}\n  size=${ifDefined(args.size)}\n  value=${ifDefined(args.value)}\n  variant=${args.variant}\n  .getAriaLabelText=${ariaLabelText}\n></modus-wc-rating>",
+    "args": {
+      "allow-half": "false",
+      "count": "5",
+      "custom-class": "''",
+      "disabled": "false",
+      "getAriaLabelText": "(index: number) => `$",
+      "size": "'md'",
+      "value": "0",
+      "variant": "'smiley'"
+    },
+    "argTypes": {},
+    "events": [
+      "ratingChange"
+    ],
+    "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 { ModusWcRatingVariant } from './modus-wc-rating';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\n\ninterface RatingArgs {\n  'allow-half'?: boolean;\n  count: number;\n  'custom-class'?: string;\n  disabled?: boolean;\n  getAriaLabelText?: (index: number) => string;\n  size?: 'sm' | 'md' | 'lg';\n  value?: number;\n  variant: ModusWcRatingVariant;\n}\n\nconst meta: Meta<RatingArgs> = {\n  title: 'Components/Forms/Rating',\n  component: 'modus-wc-rating',\n  args: {\n    'allow-half': false,\n    count: 5,\n    'custom-class': '',\n    disabled: false,\n    getAriaLabelText: (index: number) => `${index} rating`,\n    size: 'md',\n    value: 0,\n    variant: 'smiley',\n  },\n  argTypes: {\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['heart', 'smiley', 'star', 'thumb'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['ratingChange'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<RatingArgs>;\n\nexport const Default: Story = {\n  render: (args) => html`\n    <modus-wc-rating\n      aria-label=\"Rating scale component\"\n      allow-half=${ifDefined(args['allow-half'])}\n      count=${args.count}\n      custom-class=${ifDefined(args['custom-class'])}\n      disabled=${ifDefined(args.disabled)}\n      size=${ifDefined(args.size)}\n      value=${ifDefined(args.value)}\n      variant=${args.variant}\n      .getAriaLabelText=${args.getAriaLabelText}\n    ></modus-wc-rating>\n  `,\n};\n\nexport const CustomAriaLabels: Story = {\n  render: (args) => {\n    const ariaLabelText = (index: number) =>\n      `Custom label for rating item ${index}`;\n\n    // prettier-ignore\n    return html`\n<script>\n  const myAriaLabelText = (index) => {\n    return 'Custom label for rating item ' + index.toString();\n  };\n</script>\n<modus-wc-rating\n  aria-label=\"Rating scale component\"\n  allow-half=${ifDefined(args['allow-half'])}\n  count=${args.count}\n  custom-class=\"custom-rating-component\"\n  disabled=${ifDefined(args.disabled)}\n  size=${ifDefined(args.size)}\n  value=${ifDefined(args.value)}\n  variant=${args.variant}\n  .getAriaLabelText=${ariaLabelText}\n></modus-wc-rating>\n    `;\n  },\n};\n\nexport const CustomColors: Story = {\n  // prettier-ignore\n  render: (args) => html`\n<style>\n  .custom-color-rating-component {\n    --modus-wc-rating-item-color: var(--modus-wc-color-yellow-dark);\n  }\n</style>\n<modus-wc-rating\n  aria-label=\"Rating scale component\"\n  allow-half=${ifDefined(args['allow-half'])}\n  count=${args.count}\n  custom-class=\"custom-color-rating-component\"\n  disabled=${ifDefined(args.disabled)}\n  size=${ifDefined(args.size)}\n  value=\"3\"\n  variant=\"star\"\n></modus-wc-rating>\n  `,\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for rating component\n    if (!customElements.get('rating-shadow-host')) {\n      const RatingShadowHost = createShadowHostClass<RatingArgs>({\n        componentTag: 'modus-wc-rating',\n        propsMapper: (v: RatingArgs, el: HTMLElement) => {\n          const ratingEl = el as unknown as {\n            allowHalf: boolean;\n            count: number;\n            customClass: string;\n            disabled: boolean;\n            getAriaLabelText: (index: number) => string;\n            size: string;\n            value: number;\n            variant: string;\n          };\n          ratingEl.allowHalf = Boolean(v['allow-half']);\n          ratingEl.count = v.count;\n          ratingEl.customClass = v['custom-class'] || '';\n          ratingEl.disabled = Boolean(v.disabled);\n          if (v.getAriaLabelText) {\n            ratingEl.getAriaLabelText = v.getAriaLabelText; // Conditional assignment only if provided\n          }\n          ratingEl.size = v.size || 'md';\n          ratingEl.value = v.value || 0;\n          ratingEl.variant = v.variant;\n        },\n      });\n      customElements.define('rating-shadow-host', RatingShadowHost);\n    }\n\n    return html`<rating-shadow-host\n      .props=${{ ...args }}\n    ></rating-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Type/variant values have changed from \\`smileys\\` to \\`smiley\\` and \\`thumbs\\` to \\`thumb\\`.\n\n#### Prop Mapping\n\n| 1.0 Prop    | 2.0 Prop    | Notes                                                |\n|-------------|-------------|------------------------------------------------------|\n| aria-label  | aria-label  |                                                      |\n| disabled    | disabled    |                                                      |\n| type        | variant     | \\`smileys\\` → \\`smiley\\`, \\`thumbs\\` → \\`thumb\\`     |\n\n#### Event Mapping\n\n| 1.0 Event          | 2.0 Event    | Notes                                         |\n|--------------------|--------------|-----------------------------------------------|\n| sentimentSelection | ratingChange |                                               |\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-select.json

@@ -0,0 +1,159 @@
+{
+  "description": "A customizable select component used to pick a value from a list of options",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the input should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the form control is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "name": "feedback",
+      "type": "IInputFeedbackProp",
+      "description": "Feedback to render below the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 48
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 51
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).",
+      "default": null,
+      "mutable": false,
+      "end_line": 54
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 57
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+      "default": null,
+      "mutable": false,
+      "end_line": 60
+    },
+    {
+      "name": "options",
+      "type": "ISelectOption[]",
+      "description": "The options to display in the select dropdown.",
+      "default": "[]",
+      "mutable": true,
+      "end_line": 63
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 66
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 69
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the control.",
+      "default": "''",
+      "mutable": true,
+      "end_line": 72
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input loses focus.",
+      "end_line": 75
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Event emitted when the input value changes.",
+      "end_line": 78
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input gains focus.",
+      "end_line": 81
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<select-shadow-host\n      .props=${{ ...args }}\n    ></select-shadow-host>",
+    "variations": [],
+    "args": {
+      "bordered": "true",
+      "disabled": "false",
+      "label": "'Label'",
+      "size": "'md'",
+      "value": "''"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-select",
+  "storyExample": {
+    "template": "<select-shadow-host\n      .props=${{ ...args }}\n    ></select-shadow-host>",
+    "args": {
+      "bordered": "true",
+      "disabled": "false",
+      "label": "'Label'",
+      "size": "'md'",
+      "value": "''"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ],
+    "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 { ISelectOption } from './modus-wc-select';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { IInputFeedbackProp, ModusSize } from '../types';\n\nconst options: ISelectOption[] = [\n  { label: 'Option 1', value: '1' },\n  { label: 'Option 2', value: '2' },\n  { label: 'Option 3', value: '3' },\n];\n\ninterface SelectArgs {\n  bordered?: boolean;\n  'custom-class'?: string;\n  disabled?: boolean;\n  feedback?: IInputFeedbackProp;\n  'input-aria-invalid'?: 'true' | 'false';\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  name?: string;\n  options: ISelectOption[];\n  required?: boolean;\n  size?: ModusSize;\n  value: string;\n}\n\nconst meta: Meta<SelectArgs> = {\n  title: 'Components/Forms/Select',\n  component: 'modus-wc-select',\n  args: {\n    bordered: true,\n    disabled: false,\n    label: 'Label',\n    options,\n    size: 'md',\n    value: '',\n  },\n  argTypes: {\n    feedback: {\n      description: 'Feedback prop for input components',\n      table: {\n        type: {\n          detail: `\n            Interface: IInputFeedbackProp\n            Properties:\n            - level ('error' | 'info' | 'success' | 'warning'): The feedback level\n            - message (string, optional): The feedback message\n          `,\n        },\n      },\n    },\n    'input-aria-invalid': {\n      control: { type: 'select' },\n      options: ['true', 'false'],\n    },\n    options: {\n      description: 'Array of option objects for the select dropdown',\n      table: {\n        type: {\n          detail: `\n            Interface: ISelectOption\n            Properties:\n            - disabled (boolean, optional): Whether the option is disabled and cannot be selected\n            - label (string): Display text for the option\n            - value (string): The value of the option\n          `,\n        },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['inputBlur', 'inputChange', 'inputFocus'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<SelectArgs>;\n\nexport const Default: Story = {\n  render: (args) => html`\n    <modus-wc-select\n      aria-label=\"Select input\"\n      ?bordered=${args.bordered}\n      custom-class=${ifDefined(args['custom-class'])}\n      ?disabled=${args.disabled}\n      .feedback=${args.feedback}\n      input-aria-invalid=${ifDefined(args['input-aria-invalid'])}\n      input-id=${ifDefined(args['input-id'])}\n      input-tab-index=${ifDefined(args['input-tab-index'])}\n      label=${ifDefined(args.label)}\n      name=${ifDefined(args.name)}\n      .options=${args.options}\n      ?required=${args.required}\n      size=${ifDefined(args.size)}\n      .value=${args.value}\n    ></modus-wc-select>\n    <script>\n      const options = [\n        { label: 'Option 1', value: '1' },\n        { label: 'Option 2', value: '2' },\n        { label: 'Option 3', value: '3' },\n      ];\n      // Adding this block to show how to set options via JS\n      // const select = document.querySelector('modus-wc-select');\n      // select.options = options;\n    </script>\n  `,\n};\n\nconst errorFeedback: IInputFeedbackProp = {\n  level: 'error',\n  message: 'Value is required.',\n};\n\nexport const WithErrorFeedback: Story = {\n  render: (args) => html`\n    <modus-wc-select\n      aria-label=\"Select input\"\n      .feedback=${errorFeedback}\n      id=\"error-select\"\n      label=${ifDefined(args.label)}\n      .options=${[]}\n      ?required=${true}\n      .value=${args.value}\n    ></modus-wc-select>\n    <script>\n      // Adding this block to show how to set feedback via JS\n      // const select = document.getElementById('error-select');\n      // select.feedback = { level: 'error', message: 'Value is required.' };\n    </script>\n  `,\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for select component\n    if (!customElements.get('select-shadow-host')) {\n      const SelectShadowHost = createShadowHostClass<SelectArgs>({\n        componentTag: 'modus-wc-select',\n        propsMapper: (v: SelectArgs, el: HTMLElement) => {\n          const selectEl = el as unknown as {\n            bordered: boolean;\n            customClass: string;\n            disabled: boolean;\n            feedback: IInputFeedbackProp;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            name: string;\n            options: ISelectOption[];\n            required: boolean;\n            size: string;\n            value: string;\n          };\n          selectEl.bordered = Boolean(v.bordered);\n          selectEl.customClass = v['custom-class'] || '';\n          selectEl.disabled = Boolean(v.disabled);\n          selectEl.inputId = v['input-id'] || '';\n          selectEl.inputTabIndex = v['input-tab-index'] || 0;\n          selectEl.label = v.label || '';\n          selectEl.name = v.name || '';\n          selectEl.options = v.options;\n          selectEl.required = Boolean(v.required);\n          selectEl.size = v.size || 'md';\n          selectEl.value = v.value;\n        },\n      });\n      customElements.define('select-shadow-host', SelectShadowHost);\n    }\n\n    return html`<select-shadow-host\n      .props=${{ ...args }}\n    ></select-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - The options format has changed to use a standardized \\`ISelectOption\\` object array.\n  - Size values have changed from verbose names (\\`medium\\`, \\`large\\`) to abbreviations (\\`sm\\`, \\`md\\`, \\`lg\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop              | 2.0 Prop            | Notes                                                |\n|-----------------------|---------------------|------------------------------------------------------|\n| aria-label            | aria-label          |                                                      |\n| disabled              | disabled            |                                                      |\n| error-text            | feedback.message    | Use \\`feedback\\` level                               |\n| helper-text           |                     | Not carried over                                     |\n| label                 | label               |                                                      |\n| options               | options             | Format changed to require array of \\`ISelectOption\\` objects |\n| options-display-prop  |                     | Not carried over                                     |\n| placeholder           |                     | Not carried over                                     |\n| required              | required            |                                                      |\n| size                  | size                | \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\`              |\n| valid-text            | feedback.message    | Use \\`feedback\\` level                               |\n| value                 | value               |                                                      |\n\n#### Event Mapping\n\n| 1.0 Event    | 2.0 Event   | Notes            |\n|--------------|-------------|------------------|\n| valueChange  | inputChange |                  |\n| inputBlur    | inputBlur   |                  |\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-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          logo=\"/assets/logo.svg\"\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          logo=\"/assets/logo.svg\"\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          logo=\"/assets/logo.svg\"\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          logo=\"/assets/logo.svg\"\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"
+  }
+}