@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,83 @@
+{
+  "description": "A customizable avatar component used to create avatars with different images or user initials. When no image is provided, the component can display initials (up to 3 characters) from the initials prop. The component will extract the first letter of each word in the initials string.",
+  "properties": [
+    {
+      "name": "alt",
+      "type": "string",
+      "description": "The image alt attribute for accessibility.",
+      "default": null,
+      "mutable": false,
+      "end_line": 22
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 25
+    },
+    {
+      "name": "imgSrc",
+      "type": "string",
+      "description": "The location of the image.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 28
+    },
+    {
+      "name": "initials",
+      "type": "string",
+      "description": "The initials to display when no image is provided.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "shape",
+      "type": "'circle' | 'square'",
+      "description": "The shape of the avatar.",
+      "default": "'circle'",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "size",
+      "type": "DaisySize",
+      "description": "The size of the avatar.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 39
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-avatar\n        alt=\"${args.alt}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        img-src=\"${args['img-src']}\"\n        initials=\"${args.initials}\"\n        shape=\"${args.shape}\"\n        size=\"${args.size}\"\n      ></modus-wc-avatar>",
+    "variations": [],
+    "args": {
+      "alt": "'Example avatar'",
+      "img-src": "'https://i.pinimg.com/474x/73/54/79/7354794bf3873c3ef2666f778da4bcac.jpg'",
+      "shape": "'circle'",
+      "initials": "''",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-avatar",
+  "storyExample": {
+    "template": "<modus-wc-avatar\n        alt=\"${args.alt}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        img-src=\"${args['img-src']}\"\n        initials=\"${args.initials}\"\n        shape=\"${args.shape}\"\n        size=\"${args.size}\"\n      ></modus-wc-avatar>",
+    "args": {
+      "alt": "'Example avatar'",
+      "img-src": "'https://i.pinimg.com/474x/73/54/79/7354794bf3873c3ef2666f778da4bcac.jpg'",
+      "shape": "'circle'",
+      "initials": "''",
+      "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 { DaisySize } from '../types';\n\ninterface AvatarArgs {\n  alt: string;\n  'custom-class'?: string;\n  'img-src': string;\n  initials: string;\n  shape: string;\n  size: DaisySize;\n}\n\nconst meta: Meta<AvatarArgs> = {\n  title: 'Components/Avatar',\n  component: 'modus-wc-avatar',\n  args: {\n    alt: 'Example avatar',\n    'img-src':\n      'https://i.pinimg.com/474x/73/54/79/7354794bf3873c3ef2666f778da4bcac.jpg',\n    shape: 'circle',\n    initials: '',\n    size: 'md',\n  },\n  argTypes: {\n    shape: {\n      control: { type: 'select' },\n      options: ['circle', 'square'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<AvatarArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-avatar\n        alt=\"${args.alt}\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        img-src=\"${args['img-src']}\"\n        initials=\"${args.initials}\"\n        shape=\"${args.shape}\"\n        size=\"${args.size}\"\n      ></modus-wc-avatar>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n"
+  }
+}

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

@@ -0,0 +1,68 @@
+{
+  "description": "A customizable badge component used to create badges with different sizes, types, and colors. The component supports a `<slot>` for injecting content within the badge.",
+  "properties": [
+    {
+      "name": "color",
+      "type": "| 'primary'     | 'secondary'     | 'tertiary'     | 'high-contrast'     | 'success'     | 'warning'     | 'danger'",
+      "description": "The color variant of the badge.",
+      "default": "'primary'",
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the span element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the badge.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "variant",
+      "type": "'counter' | 'filled' | 'outlined' | 'text'",
+      "description": "The variant of the badge.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 40
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-badge\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  size=\"${args.size}\"\n  variant=\"${args.variant}\"\n>\n  Badge\n</modus-wc-badge>",
+    "variations": [],
+    "args": {
+      "color": "'primary'",
+      "size": "'md'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-badge",
+  "storyExample": {
+    "template": "<modus-wc-badge\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  size=\"${args.size}\"\n  variant=\"${args.variant}\"\n>\n  Badge\n</modus-wc-badge>",
+    "args": {
+      "color": "'primary'",
+      "size": "'md'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ModusSize } from '../types';\n\ninterface BadgeArgs {\n  color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'high-contrast'\n    | 'success'\n    | 'warning'\n    | 'danger';\n  'custom-class'?: string;\n  size: ModusSize;\n  variant: 'counter' | 'filled' | 'outlined' | 'text';\n}\n\nconst meta: Meta<BadgeArgs> = {\n  title: 'Components/Badge',\n  component: 'modus-wc-badge',\n  args: {\n    color: 'primary',\n    size: 'md',\n    variant: 'filled',\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: [\n        'primary',\n        'secondary',\n        'tertiary',\n        'high-contrast',\n        'success',\n        'warning',\n        'danger',\n      ],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['counter', 'filled', 'outlined', 'text'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<BadgeArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-badge\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  size=\"${args.size}\"\n  variant=\"${args.variant}\"\n>\n  Badge\n</modus-wc-badge>\n    `;\n  },\n};\n\nexport const Default: Story = {\n  ...Template,\n};\n\nexport const WithIcon: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<style>\n  .modus-wc-icon {\n    padding-inline-end: 4px;\n  }\n</style>\n<modus-wc-badge>\n  <modus-wc-icon decorative name=\"check\" size=\"xs\"></modus-wc-icon>\n  Item\n</modus-wc-badge>\n    `;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - The \\`dark\\` color option is now \\`high-contrast\\`\n  - The \\`type\\` prop is now \\`variant\\` and \\`default\\` type is now \\`filled\\`\n  - Size values have changed from verbose names (\\`small\\`, \\`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| color      | color      | \\`dark\\` is now \\`high-contrast\\`                           |\n| size       | size       | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| type       | variant    | \\`default\\` is now \\`filled\\`                               |\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-breadcrumbs.json

@@ -0,0 +1,63 @@
+{
+  "description": "A customizable breadcrumbs component used to help users navigate through a website.",
+  "properties": [
+    {
+      "name": "items",
+      "type": "IBreadcrumb[]",
+      "description": "The breadcrumbs to render.",
+      "default": "[]",
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the breadcrumbs.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 41
+    }
+  ],
+  "events": [
+    {
+      "name": "breadcrumbClick",
+      "detail": "IBreadcrumb",
+      "description": "Event emitted when a breadcrumb is clicked.",
+      "end_line": 44
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-breadcrumbs\n  aria-label=\"Breadcrumbs\"\n  custom-class=${ifDefined(args['custom-class'])}\n  .items=${args.items}\n  size=${ifDefined(args.size)}\n></modus-wc-breadcrumbs>\n<script>\n  const items = [\n    {\n      label: 'Root',\n      url: '#',\n    },\n    {\n      label: 'Subpage',\n      url: '#',\n    },\n    {\n      label: 'Current Page',\n      url: '#',\n    },\n  ];\n  // Adding this block to show how to set options via JS \n  // const breadcrumbs = document.querySelector('modus-wc-breadcrumbs');\n  // breadcrumbs.items = items;\n</script>",
+    "variations": [],
+    "args": {
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "breadcrumbClick"
+    ]
+  },
+  "tag": "modus-wc-breadcrumbs",
+  "storyExample": {
+    "template": "<modus-wc-breadcrumbs\n  aria-label=\"Breadcrumbs\"\n  custom-class=${ifDefined(args['custom-class'])}\n  .items=${args.items}\n  size=${ifDefined(args.size)}\n></modus-wc-breadcrumbs>\n<script>\n  const items = [\n    {\n      label: 'Root',\n      url: '#',\n    },\n    {\n      label: 'Subpage',\n      url: '#',\n    },\n    {\n      label: 'Current Page',\n      url: '#',\n    },\n  ];\n  // Adding this block to show how to set options via JS \n  // const breadcrumbs = document.querySelector('modus-wc-breadcrumbs');\n  // breadcrumbs.items = items;\n</script>",
+    "args": {
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [
+      "breadcrumbClick"
+    ],
+    "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 { IBreadcrumb } from './modus-wc-breadcrumbs';\nimport { DaisySize } from '../types';\n\nconst items: IBreadcrumb[] = [\n  {\n    label: 'Root',\n    url: '#',\n  },\n  {\n    label: 'Subpage',\n    url: '#',\n  },\n  {\n    label: 'Current Page',\n    url: '#',\n  },\n];\n\ninterface BreadcrumbArgs {\n  'custom-class'?: string;\n  items: IBreadcrumb[];\n  size?: DaisySize;\n}\n\nconst meta: Meta<BreadcrumbArgs> = {\n  title: 'Components/Breadcrumbs',\n  component: 'modus-wc-breadcrumbs',\n  args: {\n    items,\n    size: 'md',\n  },\n  argTypes: {\n    items: {\n      description: 'Array of items for the breadcrumbs component',\n      table: {\n        type: {\n          detail: `\n            Interface: IBreadcrumb\n            Properties:\n            - label (string): The text to render in the breadcrumb\n            - url (string, optional): The URL emitted when the breadcrumb is clicked\n          `,\n        },\n      },\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['breadcrumbClick'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<BreadcrumbArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-breadcrumbs\n  aria-label=\"Breadcrumbs\"\n  custom-class=${ifDefined(args['custom-class'])}\n  .items=${args.items}\n  size=${ifDefined(args.size)}\n></modus-wc-breadcrumbs>\n<script>\n  const items = [\n    {\n      label: 'Root',\n      url: '#',\n    },\n    {\n      label: 'Subpage',\n      url: '#',\n    },\n    {\n      label: 'Current Page',\n      url: '#',\n    },\n  ];\n  // Adding this block to show how to set options via JS \n  // const breadcrumbs = document.querySelector('modus-wc-breadcrumbs');\n  // breadcrumbs.items = items;\n</script>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const UnderlineLinks: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .underline-links a {\n    text-decoration: underline;\n  }\n</style>\n<modus-wc-breadcrumbs\n  custom-class=\"underline-links\"\n  .items=${args.items}\n  size=${ifDefined(args.size)}\n></modus-wc-breadcrumbs>\n<script>\n  const items = [\n    {\n      label: 'Root',\n      url: '#',\n    },\n    {\n      label: 'Subpage',\n      url: '#',\n    },\n    {\n      label: 'Current Page',\n      url: '#',\n    },\n  ];\n  // Adding this block to show how to set options via JS \n  // const breadcrumbs = document.querySelector('modus-wc-breadcrumbs');\n  // breadcrumbs.items = items;\n</script>\n    `;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - The structure of the breadcrumb \\`items\\` has changed from \\`Crumb\\` interface to \\`IBreadcrumb\\` interface.\n  - Underlined links are now applied using a custom class rather than a dedicated prop.\n\n#### Prop Mapping\n\n| 1.0 Prop        | 2.0 Prop      | Notes                                               |\n|-----------------|---------------|-----------------------------------------------------|\n| aria-label      | aria-label    |                                                     |\n| crumbs          | items         | Interface changed from \\`Crumb\\` to \\`IBreadcrumb\\` |\n| underline-links |               | Not carried over, use CSS instead                   |\n\n#### Event Mapping\n\n| 1.0 Event  | 2.0 Event       | Notes                                             |\n|------------|-----------------|---------------------------------------------------|\n| crumbClick | breadcrumbClick | Payload changed from \\`Crumb\\` to \\`IBreadcrumb\\` |\n\n#### Interfaces\n\n##### 1.0:\n\\`\\`\\`typescript\ninterface Crumb {\n  display: string;\n  id: string;\n}\n\\`\\`\\`\n\n##### 2.0:\n\\`\\`\\`typescript\ninterface IBreadcrumb {\n  label: string;\n  url?: string;\n}\n\\`\\`\\`\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-button-group.json

@@ -0,0 +1,100 @@
+{
+  "description": "A customizable buttongroup component that groups multiple Modus buttons together. The component supports a `<slot>` for injecting content within the buttongroup.",
+  "properties": [
+    {
+      "name": "variant",
+      "type": "'borderless' | 'filled' | 'outlined'",
+      "description": "Style variant to apply to all buttons within the button group",
+      "default": "'outlined'",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "color",
+      "type": "'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'",
+      "description": "Color to apply to all buttons within the button group",
+      "default": null,
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disables all buttons within the button group",
+      "default": "false",
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "orientation",
+      "type": "Orientation",
+      "description": "Orientation of the button group: horizontal or vertical",
+      "default": "'horizontal'",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "selectionType",
+      "type": "'default' | 'single' | 'multiple'",
+      "description": "Selection type for button group",
+      "default": "'default'",
+      "mutable": false,
+      "end_line": 46
+    }
+  ],
+  "events": [
+    {
+      "name": "buttonGroupClick",
+      "detail": "{ button: HTMLElement; isSelected: boolean; }",
+      "description": "Event emitted when any button in the group is clicked",
+      "end_line": 52
+    },
+    {
+      "name": "buttonSelectionChange",
+      "detail": "{ selectedButtons: HTMLElement[]; }",
+      "description": "Event emitted when button selection changes",
+      "end_line": 57
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-button-group\n  variant=${ifDefined(args.variant)}\n  color=${ifDefined(args.color)}\n  ?disabled=${(args.disabled)}\n  orientation=${ifDefined(args.orientation)}\n  selection-type=${ifDefined(args['selection-type'])}\n>\n <modus-wc-button>Button 1</modus-wc-button>\n <modus-wc-button>Button 2</modus-wc-button>\n <modus-wc-button>Button 3</modus-wc-button>\n</modus-wc-button-group>",
+    "variations": [],
+    "args": {
+      "variant": "'outlined'",
+      "color": "'primary'",
+      "disabled": "false",
+      "orientation": "'horizontal'",
+      "selection-type": "'default'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "buttonSelectionChange",
+      "buttonGroupClick"
+    ]
+  },
+  "tag": "modus-wc-button-group",
+  "storyExample": {
+    "template": "<modus-wc-button-group\n  variant=${ifDefined(args.variant)}\n  color=${ifDefined(args.color)}\n  ?disabled=${(args.disabled)}\n  orientation=${ifDefined(args.orientation)}\n  selection-type=${ifDefined(args['selection-type'])}\n>\n <modus-wc-button>Button 1</modus-wc-button>\n <modus-wc-button>Button 2</modus-wc-button>\n <modus-wc-button>Button 3</modus-wc-button>\n</modus-wc-button-group>",
+    "args": {
+      "variant": "'outlined'",
+      "color": "'primary'",
+      "disabled": "false",
+      "orientation": "'horizontal'",
+      "selection-type": "'default'"
+    },
+    "argTypes": {},
+    "events": [
+      "buttonSelectionChange",
+      "buttonGroupClick"
+    ],
+    "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 { Orientation } from '../types';\n\ninterface ButtonGroupArgs {\n  variant: 'borderless' | 'filled' | 'outlined';\n  color: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';\n  disabled: boolean;\n  orientation: Orientation;\n  'selection-type': 'default' | 'single' | 'multiple';\n}\n\nconst meta: Meta<ButtonGroupArgs> = {\n  title: 'Components/Button Group',\n  component: 'modus-wc-button-group',\n  args: {\n    variant: 'outlined',\n    color: 'primary',\n    disabled: false,\n    orientation: 'horizontal',\n    'selection-type': 'default',\n  },\n  argTypes: {\n    variant: {\n      control: { type: 'select' },\n      options: ['borderless', 'filled', 'outlined'],\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],\n    },\n    disabled: { control: 'boolean' },\n    orientation: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    'selection-type': {\n      control: { type: 'select' },\n      options: ['default', 'single', 'multiple'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['buttonSelectionChange', 'buttonGroupClick'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-button-group\n  variant=${ifDefined(args.variant)}\n  color=${ifDefined(args.color)}\n  ?disabled=${(args.disabled)}\n  orientation=${ifDefined(args.orientation)}\n  selection-type=${ifDefined(args['selection-type'])}\n>\n <modus-wc-button>Button 1</modus-wc-button>\n <modus-wc-button>Button 2</modus-wc-button>\n <modus-wc-button>Button 3</modus-wc-button>\n</modus-wc-button-group>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const Vertical: Story = {\n  ...Template,\n  args: {\n    variant: 'outlined',\n    orientation: 'vertical',\n  },\n};\n\nexport const SplitButton: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<script>\n  const handleItemSelect = (event) => {\n    // Update the \"Selected Value\" label\n    const selectedValue = event.detail.value;\n    const displayElement = document.querySelector('#selected-value');\n    if (displayElement) {\n      displayElement.textContent = selectedValue;\n    }\n\n    // Close the dropdown menu when an item is selected\n    const dropdownMenu = event.target;\n    const dropdownMenuElement = dropdownMenu.closest(\n      'modus-wc-dropdown-menu'\n    );\n    if (dropdownMenuElement) {\n      dropdownMenuElement.menuVisible = false;\n    }\n  };\n\n window.addEventListener('DOMContentLoaded', () => {\n    const menuItems = document.querySelectorAll('#split-button-menu modus-wc-menu-item');\n    menuItems.forEach(item =>\n      item.addEventListener('itemSelect', handleItemSelect)\n    );\n  });\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 16px; min-height: 300px;\">\n  <modus-wc-button-group variant=\"outlined\">\n    <modus-wc-button>Save Document</modus-wc-button>\n    <modus-wc-dropdown-menu \n      menu-placement=\"bottom-end\"\n      menu-size=\"lg\"\n    >\n      <div slot=\"button\">\n        <modus-wc-icon name=\"expand_more\" size=\"16\"></modus-wc-icon>\n      </div>\n      \n      <div slot=\"menu\" id=\"split-button-menu\">\n        <modus-wc-menu-item label=\"Save as Draft\" value=\"Save as Draft\"></modus-wc-menu-item>\n        <modus-wc-menu-item label=\"Save as Template\" value=\"Save as Template\"></modus-wc-menu-item>\n        <modus-wc-menu-item label=\"Save and Share\" value=\"Save and Share\"></modus-wc-menu-item>\n      </div>\n    </modus-wc-dropdown-menu>\n  </modus-wc-button-group>\n\n    <div style=\"display: flex; gap: 8px;\">\n    <modus-wc-typography hierarchy=\"h4\">Selected Option:</modus-wc-typography> \n    <modus-wc-typography id=\"selected-value\"></modus-wc-typography>\n  </div>\n</div>\n    `;\n  },\n};\n\nexport const SingleSelection: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n  <div>\n    <h4 style=\"margin-bottom: 8px;\">Single Selection (Only one button can be active at a time)</h4>\n    <modus-wc-button-group selection-type=\"single\" variant=\"outlined\">\n      <modus-wc-button>Option 1</modus-wc-button>\n      <modus-wc-button pressed>Option 2</modus-wc-button>\n      <modus-wc-button>Option 3</modus-wc-button>\n      <modus-wc-button>Option 4</modus-wc-button>\n    </modus-wc-button-group>\n  </div>\n  \n  <div>\n    <h4 style=\"margin-bottom: 8px;\">Vertical Single Selection</h4>\n    <modus-wc-button-group selection-type=\"single\" orientation=\"vertical\" variant=\"outlined\">\n      <modus-wc-button pressed>Option 1</modus-wc-button>\n      <modus-wc-button>Option 2</modus-wc-button>\n      <modus-wc-button>Option 3</modus-wc-button>\n      <modus-wc-button>Option 4</modus-wc-button>\n    </modus-wc-button-group>\n  </div>\n</div>\n    `;\n  },\n};\n\nexport const MultipleSelection: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n  <div>\n    <h4 style=\"margin-bottom: 8px;\">Multiple Selection (Multiple buttons can be active)</h4>\n    <modus-wc-button-group selection-type=\"multiple\" variant=\"outlined\">\n      <modus-wc-button pressed>Bold</modus-wc-button>\n      <modus-wc-button>Italic</modus-wc-button>\n      <modus-wc-button pressed>Underline</modus-wc-button>\n      <modus-wc-button>Strikethrough</modus-wc-button>\n    </modus-wc-button-group>\n  </div>\n  \n  <div>\n    <h4 style=\"margin-bottom: 8px;\">Multiple Selection with Icons</h4>\n    <modus-wc-button-group selection-type=\"multiple\" variant=\"outlined\" color=\"primary\">\n      <modus-wc-button pressed icon-only aria-label=\"Align left\">\n        <modus-wc-icon name=\"align_left\" size=\"16\"></modus-wc-icon>\n      </modus-wc-button>\n      <modus-wc-button pressed icon-only aria-label=\"Align center\">\n        <modus-wc-icon name=\"align_top\" size=\"16\"></modus-wc-icon>\n      </modus-wc-button>\n      <modus-wc-button icon-only aria-label=\"Align right\">\n        <modus-wc-icon name=\"align_right\" size=\"16\"></modus-wc-icon>\n      </modus-wc-button>\n      <modus-wc-button icon-only aria-label=\"Align justify\">\n        <modus-wc-icon name=\"align_bottom\" size=\"16\"></modus-wc-icon>\n      </modus-wc-button>\n    </modus-wc-button-group>\n  </div>\n</div>\n    `;\n  },\n};\n\nexport const SelectionEvent: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    const buttonGroup = document.querySelector('#event-demo-group');\n    if (buttonGroup) {\n      buttonGroup.addEventListener('buttonSelectionChange', (event) => {\n        const selectedButtons = event.detail.selectedButtons;\n        const buttonTexts = selectedButtons.map(btn => btn.textContent.trim());\n        \n        // Update the display\n        const displayElement = document.querySelector('#selected-buttons-display');\n        if (displayElement) {\n          displayElement.textContent = buttonTexts.length > 0 \n            ? buttonTexts.join(', ') \n            : 'None';\n        }\n      });\n    }\n  });\n</script>\n\n<div style=\"display: flex; flex-direction: column; gap: 16px;\">\n  <div>\n    <modus-wc-button-group \n      id=\"event-demo-group\"\n      selection-type=\"single\" \n      variant=\"outlined\"\n      color=\"primary\"\n    >\n      <modus-wc-button>Apple</modus-wc-button>\n      <modus-wc-button>Banana</modus-wc-button>\n      <modus-wc-button>Cherry</modus-wc-button>\n      <modus-wc-button>Date</modus-wc-button>\n    </modus-wc-button-group>\n  </div>\n  \n  <div style=\"display: flex; gap: 8px;\">\n    <modus-wc-typography hierarchy=\"h4\">Selected Button(s):</modus-wc-typography> \n    <modus-wc-typography id=\"selected-buttons-display\"></modus-wc-typography>\n  </div>\n\n    `;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n- The \\`size\\` prop has been removed. Button sizes are now controlled individually on each button within the group.\n- Selection state is now managed internally - the \\`selected\\` attribute on individual buttons is no longer used.\n- Shadow DOM has been removed (\\`shadow: false\\`) for better composability.\n\n#### Prop Mapping\n\n| 1.0 Prop        | 2.0 Prop        | Notes                                                                    |\n|-----------------|-----------------|--------------------------------------------------------------------------|\n| aria-label      | aria-label      | Unchanged                                                                |\n| aria-disabled   | -               | Removed. Use \\`disabled\\` prop instead                                   |\n| button-style    | variant         | Values changed: \\`fill\\` → \\`filled\\`, \\`outline\\` → \\`outlined\\`        |\n| color           | color           | \\`special\\` color removed. Other values unchanged                        |\n| disabled        | disabled        | Unchanged                                                                |\n| -               | orientation     | New in 2.0. Controls horizontal/vertical layout                          |\n| selection-type  | selection-type  | Values changed: \\`none\\` → \\`default\\`, \\`single\\` and \\`multiple\\` unchanged |\n| size            | -               | Removed. Control size on individual buttons                              |\n\n#### Event Mapping\n\n| 1.0 Event              | 2.0 Event              | Notes                                                      |\n|------------------------|------------------------|------------------------------------------------------------|\n| buttonGroupClick       | buttonGroupClick       | Event detail changed: now includes \\`{ button, isSelected }\\` |\n| buttonSelectionChange  | buttonSelectionChange  | Returns array of selected buttons                             |\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-button.json

@@ -0,0 +1,130 @@
+{
+  "description": "A customizable button component used to create buttons with different sizes, variants, and types. The component supports a `<slot>` for injecting content within the button, similar to a native HTML button.",
+  "properties": [
+    {
+      "name": "color",
+      "type": "'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'",
+      "description": "The color variant of the button.",
+      "default": "'primary'",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the button element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "If true, the button will be disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "fullWidth",
+      "type": "boolean",
+      "description": "If true, the button will take the full width of its container.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "pressed",
+      "type": "boolean",
+      "description": "If true, the button will be in a pressed state (for toggle buttons).",
+      "default": "false",
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "name": "shape",
+      "type": "'circle' | 'ellipse' | 'rectangle' | 'square'",
+      "description": "The shape of the button.",
+      "default": "'rectangle'",
+      "mutable": false,
+      "end_line": 48
+    },
+    {
+      "name": "size",
+      "type": "DaisySize",
+      "description": "The size of the button.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 51
+    },
+    {
+      "name": "type",
+      "type": "'button' | 'submit' | 'reset'",
+      "description": "The type of the button.",
+      "default": "'button'",
+      "mutable": false,
+      "end_line": 54
+    },
+    {
+      "name": "variant",
+      "type": "'borderless' | 'filled' | 'outlined'",
+      "description": "The variant of the button.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 57
+    }
+  ],
+  "events": [
+    {
+      "name": "buttonClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the button is clicked or activated via keyboard.",
+      "end_line": 60
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-button\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?disabled=\"${args.disabled}\"\n  ?full-width=\"${args['full-width']}\"\n  ?pressed=\"${args.pressed}\"\n  shape=\"${args.shape}\"\n  size=\"${args.size}\"\n  type=\"${args.type}\"\n  variant=\"${args.variant}\"\n>\n  Click me\n</modus-wc-button>",
+    "variations": [],
+    "args": {
+      "color": "'primary'",
+      "disabled": "false",
+      "full-width": "false",
+      "pressed": "false",
+      "shape": "'rectangle'",
+      "size": "'md'",
+      "type": "'button'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "buttonClick"
+    ]
+  },
+  "tag": "modus-wc-button",
+  "storyExample": {
+    "template": "<modus-wc-button\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?disabled=\"${args.disabled}\"\n  ?full-width=\"${args['full-width']}\"\n  ?pressed=\"${args.pressed}\"\n  shape=\"${args.shape}\"\n  size=\"${args.size}\"\n  type=\"${args.type}\"\n  variant=\"${args.variant}\"\n>\n  Click me\n</modus-wc-button>",
+    "args": {
+      "color": "'primary'",
+      "disabled": "false",
+      "full-width": "false",
+      "pressed": "false",
+      "shape": "'rectangle'",
+      "size": "'md'",
+      "type": "'button'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "events": [
+      "buttonClick"
+    ],
+    "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 { DaisySize } from '../types';\n\ninterface ButtonArgs {\n  color: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';\n  'custom-class'?: string;\n  disabled: boolean;\n  'full-width': boolean;\n  pressed: boolean;\n  shape: 'circle' | 'ellipse' | 'rectangle' | 'square';\n  size: DaisySize;\n  type: 'button' | 'submit' | 'reset';\n  variant: 'borderless' | 'filled' | 'outlined';\n}\n\nconst meta: Meta<ButtonArgs> = {\n  title: 'Components/Button',\n  component: 'modus-wc-button',\n  args: {\n    color: 'primary',\n    disabled: false,\n    'full-width': false,\n    pressed: false,\n    shape: 'rectangle',\n    size: 'md',\n    type: 'button',\n    variant: 'filled',\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],\n    },\n    shape: {\n      control: { type: 'select' },\n      options: ['circle', 'ellipse', 'rectangle', 'square'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['button', 'submit', 'reset'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['borderless', 'filled', 'outlined'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['buttonClick'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ButtonArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-button\n  color=\"${args.color}\"\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  ?disabled=\"${args.disabled}\"\n  ?full-width=\"${args['full-width']}\"\n  ?pressed=\"${args.pressed}\"\n  shape=\"${args.shape}\"\n  size=\"${args.size}\"\n  type=\"${args.type}\"\n  variant=\"${args.variant}\"\n>\n  Click me\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const Default: Story = {\n  ...Template,\n};\n\nexport const ButtonShapes: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n  <modus-wc-button\n    shape=\"rectangle\"\n  >\n    Rectangle\n  </modus-wc-button>\n<modus-wc-button\n  shape=\"circle\"\n>\n  Circle\n</modus-wc-button>\n<modus-wc-button\n  shape=\"square\"\n>\n  Square\n</modus-wc-button>\n<modus-wc-button\n  shape=\"ellipse\"\n>\n  Ellipse\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const DynamicTextUpdate: Story = {\n  render: () => {\n    const updateButtonText = () => {\n      const btnText = document.getElementById('btn-text') as HTMLSpanElement;\n      const input = document.getElementById(\n        'btn-text-input'\n      ) as HTMLInputElement;\n\n      btnText.textContent = input.value;\n    };\n\n    // prettier-ignore\n    return html`\n<script>\n  function updateButtonText() {\n    const btnText = document.getElementById('btn-text');\n    const input = document.getElementById('btn-text-input');\n    btnText.textContent = input.value;\n  }\n  // Call updateButtonText function using the button's click event\n  // Example:  <modus-wc-button color=\"primary\" variant=\"filled\" buttonClick=\"updateButtonText()\"></modus-wc-button>\n</script>\n\n<div>\n  <modus-wc-button id=\"text-update-btn\" color=\"primary\" variant=\"filled\" @buttonClick=${updateButtonText}>\n    <modus-wc-icon decorative name=\"shopping_cart\"></modus-wc-icon><span id=\"btn-text\">Press button to update content</span>\n    <modus-wc-icon decorative name=\"shopping_cart\"></modus-wc-icon>\n  </modus-wc-button>\n\n  <div style=\"margin-top: 8px; display: flex; gap: 8px; align-items: center;\">\n    <modus-wc-text-input id=\"btn-text-input\" type=\"text\" value=\"Updated Text\" style=\"padding: 4px 8px;\" />\n  </div>\n</div>\n    `;\n  },\n};\nexport const IconOnlyButton: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<modus-wc-button aria-label=\"Notification button\">\n  <modus-wc-icon decorative name=\"notifications\"></modus-wc-icon>\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const IconLeftButton: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<modus-wc-button>\n  <modus-wc-icon decorative name=\"download\"></modus-wc-icon>\n  Download\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const IconRightButton: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<modus-wc-button>\n  Details\n  <modus-wc-icon decorative name=\"launch\"></modus-wc-icon>\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const IconLeftAndRightButton: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<modus-wc-button>\n  <modus-wc-icon decorative name=\"shopping_cart\"></modus-wc-icon>\n  Checkout\n  <modus-wc-icon decorative name=\"shopping_cart\"></modus-wc-icon>\n</modus-wc-button>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for button component\n    if (!customElements.get('button-shadow-host')) {\n      const ButtonShadowHost = createShadowHostClass<ButtonArgs>({\n        componentTag: 'modus-wc-button',\n        propsMapper: (v: ButtonArgs, el: HTMLElement) => {\n          const buttonEl = el as unknown as {\n            ariaLabel: string;\n            color: string;\n            shape: string;\n            size: string;\n            type: string;\n            variant: string;\n            customClass: string;\n            disabled: boolean;\n            fullWidth: boolean;\n            pressed: boolean;\n          };\n          buttonEl.ariaLabel = 'Click me button';\n          buttonEl.color = v.color;\n          buttonEl.shape = v.shape;\n          buttonEl.size = v.size;\n          buttonEl.type = v.type;\n          buttonEl.variant = v.variant;\n          buttonEl.customClass = v['custom-class'] || '';\n          buttonEl.disabled = Boolean(v.disabled);\n          buttonEl.fullWidth = Boolean(v['full-width']);\n          buttonEl.pressed = Boolean(v.pressed);\n          // DO NOT set textContent - it destroys the component's internal structure!\n          // Button content should be set via defaultContent in the helper config\n        },\n        defaultContent: 'Click me', // Set content here instead\n      });\n      customElements.define('button-shadow-host', ButtonShadowHost);\n    }\n\n    return html`<button-shadow-host\n      .props=${{ ...args }}\n    ></button-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 buttons had specific properties for adding icons (\\`icon-only\\`, \\`left-icon\\`, \\`right-icon\\`). In 2.0, icons are added via slots using the \\`modus-wc-icon\\` component.\n  - The \\`button-style\\` property has been renamed to \\`variant\\` with similar options.\n  - Size values have changed from verbose names (\\`small\\`, \\`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| button-style    | variant    | \\`fill\\` → \\`filled\\`, \\`outline\\` → \\`outlined\\`           |\n| color           | color      | \\`dark\\` and \\`special\\` removed, \\`warning\\` added         |\n| critical-action |            | Not carried over                                            |\n| disabled        | disabled   |                                                             |\n| icon-only       |            | Not carried over, use \\`icon\\` slot                         |\n| left-icon       |            | Not carried over, use \\`icon\\` slot                         |\n| right-icon      |            | Not carried over, use \\`icon\\` slot                         |\n| show-caret      |            | Not carried over                                            |\n| size            | size       | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| type            | type       |                                                             |\n\n#### Event Mapping\n\n| 1.0 Event    | 2.0 Event    | Notes            |\n|--------------|--------------|------------------|\n| buttonClick  | buttonClick  |                  |\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-card.json

@@ -0,0 +1,98 @@
+{
+  "description": "A customizable card component used to group and display content in a way that is easily readable. This component supports multiple `<slot>` elements including 'header' for images or custom content, 'title', 'subtitle', a default slot for main content, 'actions' for buttons or interactive elements, and 'footer'.",
+  "properties": [
+    {
+      "name": "backgroundFigure",
+      "type": "boolean",
+      "description": "Makes any \\<figure> in the 'header' slot cover the background",
+      "default": "false",
+      "mutable": false,
+      "end_line": 21
+    },
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Adds a hard border to the card",
+      "default": "false",
+      "mutable": false,
+      "end_line": 24
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply",
+      "default": "''",
+      "mutable": false,
+      "end_line": 27
+    },
+    {
+      "name": "layout",
+      "type": "'vertical' | 'horizontal'",
+      "description": "Determines how the card is laid out",
+      "default": "'vertical'",
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "padding",
+      "type": "'compact' | 'comfortable'",
+      "description": "Determines the interior padding size",
+      "default": "'compact'",
+      "mutable": false,
+      "end_line": 33
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "header",
+      "description": "Slot for header content"
+    },
+    {
+      "name": "title",
+      "description": "Slot for title content"
+    },
+    {
+      "name": "subtitle",
+      "description": "Slot for subtitle content"
+    },
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    },
+    {
+      "name": "actions",
+      "description": "Slot for actions content"
+    },
+    {
+      "name": "footer",
+      "description": "Slot for footer content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n  .modus-wc-card {\n    width: 400px;\n  }\n</style>\n<modus-wc-card\n  ?background-figure=${args['background-figure']}\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <span slot=\"title\">Card Title</span>\n  <span slot=\"subtitle\">Card Subtitle</span>\n  <p>This is a sample card content. You can place any content here.</p>\n  <div slot=\"actions\" class=\"modus-wc-justify-end\">\n    <modus-wc-button aria-label=\"Click me\">Click me</modus-wc-button>\n  </div>\n</modus-wc-card>",
+    "variations": [],
+    "args": {
+      "background-figure": "false",
+      "bordered": "false",
+      "layout": "'vertical'",
+      "padding": "'compact'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-card",
+  "storyExample": {
+    "template": "<style>\n  .modus-wc-card {\n    width: 400px;\n  }\n</style>\n<modus-wc-card\n  ?background-figure=${args['background-figure']}\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <span slot=\"title\">Card Title</span>\n  <span slot=\"subtitle\">Card Subtitle</span>\n  <p>This is a sample card content. You can place any content here.</p>\n  <div slot=\"actions\" class=\"modus-wc-justify-end\">\n    <modus-wc-button aria-label=\"Click me\">Click me</modus-wc-button>\n  </div>\n</modus-wc-card>",
+    "args": {
+      "background-figure": "false",
+      "bordered": "false",
+      "layout": "'vertical'",
+      "padding": "'compact'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface CardArgs {\n  'background-figure'?: boolean;\n  bordered?: boolean;\n  'custom-class'?: string;\n  layout?: 'vertical' | 'horizontal';\n  padding?: 'compact' | 'comfortable';\n}\n\nconst meta: Meta<CardArgs> = {\n  title: 'Components/Card',\n  component: 'modus-wc-card',\n  args: {\n    'background-figure': false,\n    bordered: false,\n    layout: 'vertical',\n    padding: 'compact',\n  },\n  argTypes: {\n    layout: {\n      control: { type: 'select' },\n      options: ['vertical', 'horizontal'],\n    },\n    padding: {\n      control: { type: 'select' },\n      options: ['compact', 'comfortable'],\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<CardArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .modus-wc-card {\n    width: 400px;\n  }\n</style>\n<modus-wc-card\n  ?background-figure=${args['background-figure']}\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <span slot=\"title\">Card Title</span>\n  <span slot=\"subtitle\">Card Subtitle</span>\n  <p>This is a sample card content. You can place any content here.</p>\n  <div slot=\"actions\" class=\"modus-wc-justify-end\">\n    <modus-wc-button aria-label=\"Click me\">Click me</modus-wc-button>\n  </div>\n</modus-wc-card>\n    `;\n  },\n};\n\nexport const Default: Story = {\n  ...Template,\n};\n\nexport const SimpleCard: Story = {\n  ...Template,\n  // prettier-ignore\n  render: () => html`\n<modus-wc-card>\n  Raw card content.\n</modus-wc-card>\n  `,\n};\n\nexport const SlotsLayout: Story = {\n  ...Template,\n  // prettier-ignore\n  render: (args) => html`\n<style>\n  .slot-box {\n    background: #ccccff;\n    border: 2px solid purple;\n    color: purple;\n    display: flex;\n    justify-content: center;\n  }\n</style>\n<modus-wc-card\n  ?background-figure=${args['background-figure']}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <div slot=\"header\" class=\"slot-box\">Header Slot</div>\n  <div slot=\"title\" class=\"slot-box\">Title Slot</div>\n  <div slot=\"subtitle\" class=\"slot-box\">Subtitle Slot</div>\n  <div class=\"slot-box\">Default (Body) Slot</div>\n  <div slot=\"actions\" class=\"slot-box\">Actions Slot</div>\n  <div slot=\"footer\" class=\"slot-box\">Footer Slot</div>\n</modus-wc-card>\n  `,\n};\n\nexport const ComplexCard: Story = {\n  ...Template,\n  // prettier-ignore\n  render: (args) => html`\n<style>\n  #complex-card > .modus-wc-card:hover {\n    box-shadow:\n      0 20px 25px -5px rgba(0, 0, 0, 0.1),\n      0 8px 10px -6px rgba(0, 0, 0, 0.1);\n  }\n</style>\n<modus-wc-card\n  id=\"complex-card\"\n  ?background-figure=${args['background-figure']}\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <figure slot=\"header\">\n    <img\n      src=\"https://picsum.photos/id/643/750/300\"\n      alt=\"Header Image with Shadow\"\n    />\n  </figure>\n  <span slot=\"title\">Complex Card</span>\n  <span slot=\"subtitle\">With Shadow</span>\n  <p>\n    This is a more of a traditional Card, featuring a header image, content,\n    multiple buttons, and a larger shadow that appears on hover.\n  </p>\n  <div slot=\"actions\" class=\"modus-wc-justify-end\">\n    <modus-wc-button aria-label=\"Action 1\">Action 1</modus-wc-button>\n    <modus-wc-button aria-label=\"Action 2\">Action 2</modus-wc-button>\n  </div>\n</modus-wc-card>\n  `,\n};\n\nexport const HorizontalImage: Story = {\n  ...Template,\n  // prettier-ignore\n  render: (args) => html`\n<modus-wc-card\n  ?background-figure=${args['background-figure']}\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=\"horizontal\"\n  padding=${ifDefined(args.padding)}\n>\n  <figure slot=\"header\">\n    <img src=\"https://picsum.photos/id/1025/200/300\" alt=\"Horizontal Image\" />\n  </figure>\n  <p>This card uses a horizontal layout.</p>\n</modus-wc-card>\n  `,\n};\n\nexport const BackgroundFigureImage: Story = {\n  ...Template,\n  // prettier-ignore\n  render: (args) => html`\n<modus-wc-card\n  background-figure\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  layout=${ifDefined(args.layout)}\n  padding=${ifDefined(args.padding)}\n>\n  <figure slot=\"header\">\n    <img src=\"https://picsum.photos/id/1045/600/400\" alt=\"Full Image\" />\n  </figure>\n  <span slot=\"title\">Full Image Card</span>\n  <p>This card has a figure image in the background.</p>\n</modus-wc-card>\n  `,\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0, card dimensions were controlled via direct props. In 2.0, styling should be handled through CSS.\n  - Shadow effects on hover are now controlled via CSS rather than props.\n  - The card component in 2.0 focuses on layout and structure rather than specific styling.\n\n#### Prop Mapping\n\n| 1.0 Prop             | 2.0 Prop            | Notes                                |\n|----------------------|---------------------|--------------------------------------|\n| border-radius        |                     | Not carried over, use CSS instead    |\n| height               |                     | Not carried over, use CSS instead    |\n| show-card-border     | bordered            |                                      |\n| show-shadow-on-hover |                     | Not carried over, use CSS instead    |\n| width                |                     | Not carried over, use CSS instead    |\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"
+  }
+}