chore: add MCP docs for v1.4.0

mcp/versions/1.4.0/component-docs/_all_components.json

@@ -0,0 +1,56 @@
+{
+  "total": 50,
+  "components": [
+    "modus-wc-accordion",
+    "modus-wc-alert",
+    "modus-wc-autocomplete",
+    "modus-wc-avatar",
+    "modus-wc-badge",
+    "modus-wc-breadcrumbs",
+    "modus-wc-button",
+    "modus-wc-button-group",
+    "modus-wc-card",
+    "modus-wc-checkbox",
+    "modus-wc-chip",
+    "modus-wc-collapse",
+    "modus-wc-date",
+    "modus-wc-divider",
+    "modus-wc-dropdown-menu",
+    "modus-wc-file-dropzone",
+    "modus-wc-handle",
+    "modus-wc-icon",
+    "modus-wc-input-feedback",
+    "modus-wc-input-label",
+    "modus-wc-loader",
+    "modus-wc-logo",
+    "modus-wc-menu",
+    "modus-wc-menu-item",
+    "modus-wc-modal",
+    "modus-wc-navbar",
+    "modus-wc-number-input",
+    "modus-wc-pagination",
+    "modus-wc-panel",
+    "modus-wc-profile-menu",
+    "modus-wc-progress",
+    "modus-wc-radio",
+    "modus-wc-rating",
+    "modus-wc-select",
+    "modus-wc-side-navigation",
+    "modus-wc-skeleton",
+    "modus-wc-slider",
+    "modus-wc-stepper",
+    "modus-wc-switch",
+    "modus-wc-table",
+    "modus-wc-tabs",
+    "modus-wc-text-input",
+    "modus-wc-textarea",
+    "modus-wc-theme-switcher",
+    "modus-wc-time-input",
+    "modus-wc-toast",
+    "modus-wc-toolbar",
+    "modus-wc-tooltip",
+    "modus-wc-typography",
+    "modus-wc-utility-panel"
+  ],
+  "last_updated": "1777564940.702"
+}

mcp/versions/1.4.0/component-docs/modus-wc-accordion.json

@@ -0,0 +1,48 @@
+{
+  "description": "A customizable accordion component used for showing and hiding related groups of content. The component supports a `<slot>` called 'content' for injecting `<modus-wc-collapse>` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 29
+    }
+  ],
+  "events": [
+    {
+      "name": "expandedChange",
+      "detail": "{ expanded: boolean; index: number; }",
+      "description": "When a collapse expanded state is changed, this event outputs the relevant index and state",
+      "end_line": 35
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>",
+    "variations": [],
+    "args": {},
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "expandedChange"
+    ]
+  },
+  "tag": "modus-wc-accordion",
+  "storyExample": {
+    "template": "<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>",
+    "args": {},
+    "argTypes": {},
+    "events": [
+      "expandedChange"
+    ],
+    "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 { ICollapseOptions } from '../modus-wc-collapse/modus-wc-collapse';\n\ninterface AccordionArgs {\n  'custom-class'?: string;\n}\n\nconst collapseOptions: ICollapseOptions[] = [\n  {\n    description: 'Item one description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item One',\n  },\n  {\n    description: 'Item two description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item Two',\n  },\n  {\n    description: 'Item three description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item Three',\n  },\n];\n\nconst meta: Meta<AccordionArgs> = {\n  title: 'Components/Accordion',\n  component: 'modus-wc-accordion',\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['expandedChange'],\n    },\n    layout: {\n      padded: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<AccordionArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const ShadowDomParent: Story = {\n  render: () => {\n    // Create a unique shadow host for accordion component\n    if (!customElements.get('accordion-shadow-host')) {\n      const AccordionShadowHost = createShadowHostClass<AccordionArgs>({\n        componentTag: 'modus-wc-accordion',\n        propsMapper: (v: AccordionArgs, el: HTMLElement) => {\n          const accordionEl = el as unknown as {\n            customClass: string;\n          };\n          accordionEl.customClass = v['custom-class'] || '';\n\n          // Create and append collapse elements (no whitespace between to avoid gaps)\n          el.innerHTML = '';\n          collapseOptions.forEach((options) => {\n            const collapse = document.createElement('modus-wc-collapse');\n            (collapse as unknown as { options: ICollapseOptions }).options =\n              options;\n            const contentDiv = document.createElement('div');\n            contentDiv.setAttribute('slot', 'content');\n            contentDiv.textContent = 'Collapse content';\n            collapse.appendChild(contentDiv);\n            el.appendChild(collapse);\n          });\n        },\n      });\n      customElements.define('accordion-shadow-host', AccordionShadowHost);\n    }\n\n    return html`<accordion-shadow-host\n      style=\"display: block; padding: 20px;\"\n      .props=${{}}\n    ></accordion-shadow-host>`;\n  },\n};\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 the accordion was composed of child accordion-item components. In 2.0 accordion children are collapse\n  components.\n  - The new accordion supports \\`header\\` and \\`content\\` slots to provide maximum flexibility.\n  - Size values have changed from (\\`condensed\\`, \\`standard\\`) in 1.0 accordion-item to abbreviations (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`) in 2.0 collapse.\n\n#### Prop Mapping\n\n##### accordion\n\n| 1.0 Prop           | 2.0 Prop           | Notes            |\n|--------------------|--------------------|------------------|\n| aria-label         | aria-label         |                  |\n\n##### accordion-item → collapse\n\n| 1.0 Prop           | 2.0 Prop            | Notes            |\n|--------------------|---------------------|------------------|\n| aria-label         | aria-label          |                  |\n| disabled           |                     | Not carried over |\n| expand-button-type |                     | Not carried over |\n| expanded           | expanded            |                  |\n| header-text        | options.title       |                  |\n| icon               | options.icon        |                  |\n| supporting-label   | options.description |                  |\n| size               | options.size        |                  |\n\n#### Event Mapping\n\n##### accordion-item → accordion\n\nThe new accordion and collapse have their own events. We recommend using the\naccordion events to migrate.\n\n| 1.0 Event | 2.0 Event      | Notes            |\n|-----------|----------------|------------------|\n| closed    | expandedChange |                  |\n| opened    | expandedChange |                  |\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"
+  }
+}