@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,65 @@
+{
+  "description": "A customizable skeleton component used to create skeletons of various sizes and shapes",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 19
+    },
+    {
+      "name": "height",
+      "type": "string",
+      "description": "The height of the skeleton.",
+      "default": "'var(--modus-wc-line-height-md)'",
+      "mutable": false,
+      "end_line": 22
+    },
+    {
+      "name": "shape",
+      "type": "'circle' | 'rectangle'",
+      "description": "The shape of the skeleton.",
+      "default": "'rectangle'",
+      "mutable": false,
+      "end_line": 25
+    },
+    {
+      "name": "width",
+      "type": "string",
+      "description": "The width of the skeleton.",
+      "default": "'100%'",
+      "mutable": false,
+      "end_line": 28
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-skeleton\n        custom-class=${ifDefined(args['custom-class'])}\n        height=${ifDefined(args.height)}\n        shape=${ifDefined(args.shape)}\n        width=${ifDefined(args.width)}\n      ></modus-wc-skeleton>",
+    "variations": [],
+    "args": {
+      "custom-class": "''",
+      "height": "'1.5rem'",
+      "shape": "'rectangle'",
+      "width": "'100%'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-skeleton",
+  "storyExample": {
+    "template": "<modus-wc-skeleton\n        custom-class=${ifDefined(args['custom-class'])}\n        height=${ifDefined(args.height)}\n        shape=${ifDefined(args.shape)}\n        width=${ifDefined(args.width)}\n      ></modus-wc-skeleton>",
+    "args": {
+      "custom-class": "''",
+      "height": "'1.5rem'",
+      "shape": "'rectangle'",
+      "width": "'100%'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface SkeletonArgs {\n  'custom-class'?: string;\n  height?: string;\n  shape?: 'circle' | 'rectangle';\n  width?: string;\n}\n\nconst meta: Meta<SkeletonArgs> = {\n  title: 'Components/Skeleton',\n  component: 'modus-wc-skeleton',\n  args: {\n    'custom-class': '',\n    height: '1.5rem',\n    shape: 'rectangle',\n    width: '100%',\n  },\n  argTypes: {\n    shape: {\n      control: {\n        type: 'select',\n      },\n      options: ['circle', 'rectangle'],\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<SkeletonArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-skeleton\n        custom-class=${ifDefined(args['custom-class'])}\n        height=${ifDefined(args.height)}\n        shape=${ifDefined(args.shape)}\n        width=${ifDefined(args.width)}\n      ></modus-wc-skeleton>\n    `;\n  },\n};\n\nexport const Circle: Story = {\n  render: () => {\n    return html`\n      <modus-wc-skeleton\n        height=\"5rem\"\n        shape=\"circle\"\n        width=\"5rem\"\n      ></modus-wc-skeleton>\n    `;\n  },\n};\n\nexport const Square: Story = {\n  render: () => {\n    return html`\n      <modus-wc-skeleton height=\"5rem\" width=\"5rem\"></modus-wc-skeleton>\n    `;\n  },\n};\n\nexport const Composed: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<style>\n  .skeleton-container {\n    width: 13rem;\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  .skeleton-profile {\n    display: flex;\n    gap: 1rem;\n  }\n\n  .skeleton-text {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n</style>\n<div class=\"skeleton-container\">\n  <div class=\"skeleton-profile\">\n    <modus-wc-skeleton\n      height=\"4rem\"\n      shape=\"circle\"\n      width=\"4rem\"\n    ></modus-wc-skeleton>\n    <div class=\"skeleton-text\">\n      <modus-wc-skeleton width=\"5rem\"></modus-wc-skeleton>\n      <modus-wc-skeleton width=\"7rem\"></modus-wc-skeleton>\n    </div>\n  </div>\n  <modus-wc-skeleton height=\"8rem\"></modus-wc-skeleton>\n</div>\n    `;\n  },\n};\n"
+  }
+}

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

@@ -0,0 +1,163 @@
+{
+  "description": "A customizable slider component",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 29
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "The disabled state of the slider.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "The tabindex of the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "description": "The maximum slider value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "description": "The minimum slider value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 47
+    },
+    {
+      "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": 50
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 56
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "description": "The increment of the slider.",
+      "default": null,
+      "mutable": false,
+      "end_line": 59
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "description": "The value of the slider.",
+      "default": "0",
+      "mutable": true,
+      "end_line": 62
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input loses focus.",
+      "end_line": 65
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Emitted when the input value changes.",
+      "end_line": 68
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input gains focus.",
+      "end_line": 71
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-slider\n        aria-label=\"Slider\"\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        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        step=${ifDefined(args.step)}\n        .value=${args.value}\n      ></modus-wc-slider>",
+    "variations": [],
+    "args": {
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "name": "''",
+      "required": "false",
+      "size": "'md'",
+      "value": "true"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-slider",
+  "storyExample": {
+    "template": "<modus-wc-slider\n        aria-label=\"Slider\"\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        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        step=${ifDefined(args.step)}\n        .value=${args.value}\n      ></modus-wc-slider>",
+    "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 SliderArgs {\n  'custom-class'?: string;\n  disabled?: boolean;\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  max?: number;\n  min?: number;\n  name?: string;\n  required?: boolean;\n  size?: ModusSize;\n  step?: number;\n  value: boolean;\n}\n\nconst meta: Meta<SliderArgs> = {\n  title: 'Components/Forms/Slider',\n  component: 'modus-wc-slider',\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: ['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<SliderArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-slider\n        aria-label=\"Slider\"\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        max=${ifDefined(args.max)}\n        min=${ifDefined(args.min)}\n        name=${ifDefined(args.name)}\n        ?required=${args.required}\n        size=${ifDefined(args.size)}\n        step=${ifDefined(args.step)}\n        .value=${args.value}\n      ></modus-wc-slider>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for slider component\n    if (!customElements.get('slider-shadow-host')) {\n      const SliderShadowHost = createShadowHostClass<SliderArgs>({\n        componentTag: 'modus-wc-slider',\n        propsMapper: (v: SliderArgs, el: HTMLElement) => {\n          const sliderEl = el as unknown as {\n            customClass: string;\n            disabled: boolean;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            max: number;\n            min: number;\n            name: string;\n            required: boolean;\n            size: string;\n            step: number;\n            value: number;\n          };\n          sliderEl.customClass = v['custom-class'] || '';\n          sliderEl.disabled = Boolean(v.disabled);\n          sliderEl.inputId = v['input-id'] ?? '';\n          sliderEl.inputTabIndex = v['input-tab-index'] ?? 0;\n          sliderEl.label = v.label ?? '';\n          sliderEl.max = v.max ?? 100;\n          sliderEl.min = v.min ?? 0;\n          sliderEl.name = v.name ?? '';\n          sliderEl.required = Boolean(v.required);\n          sliderEl.size = v.size ?? 'md';\n          sliderEl.step = v.step ?? 1;\n          sliderEl.value = typeof v.value === 'number' ? v.value : 0;\n        },\n      });\n      customElements.define('slider-shadow-host', SliderShadowHost);\n    }\n\n    return html`<slider-shadow-host\n      .props=${{ ...args }}\n    ></slider-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 additional info and examples.\n  - Property names have changed: \\`max-value\\` → \\`max\\`, \\`min-value\\` → \\`min\\`.\n\n#### Prop Mapping\n\n| 1.0 Prop    | 2.0 Prop     | Notes |\n|-------------|--------------|-------|\n| aria-label  | aria-label   |       |\n| disabled    | disabled     |       |\n| label       | label        |       |\n| max-value   | max          |       |\n| min-value   | min          |       |\n| value       | value        |       |\n\n#### Event Mapping\n\n| 1.0 Event   | 2.0 Event   | Notes            |\n|-------------|-------------|------------------|\n| valueChange |             | Not carried over |\n| valueInput  | inputChange |                  |\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-stepper.json

@@ -0,0 +1,47 @@
+{
+  "description": "Used to show a list of steps in a process.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the steps element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "orientation",
+      "type": "Orientation",
+      "description": "The orientation of the steps.",
+      "default": null,
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "steps",
+      "type": "IStepperItem[]",
+      "description": "The steps to display.",
+      "default": "[]",
+      "mutable": false,
+      "end_line": 45
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {},
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-stepper",
+  "storyExample": {
+    "template": "",
+    "args": {},
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { Orientation } from '../types';\n\ninterface StepperArgs {\n  'custom-class'?: string;\n  orientation: Orientation;\n  steps?: IStepperItem[];\n}\n\ninterface IStepperItem {\n  color?:\n    | 'primary'\n    | 'secondary'\n    | 'accent'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'neutral';\n  content?: string;\n  customClass?: string;\n  label?: string;\n}\n\nconst meta: Meta<StepperArgs> = {\n  title: 'Components/Stepper',\n  component: 'modus-wc-stepper',\n  args: {\n    steps: [\n      { label: 'Scale', color: 'primary' },\n      { label: 'Belong', color: 'primary' },\n      { label: 'Grow', color: 'warning' },\n      { label: 'Innovate', content: '🚀' },\n    ],\n  },\n  argTypes: {\n    'custom-class': {\n      control: 'text',\n    },\n    orientation: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    steps: {\n      description: 'Array of step objects defining the steps to display',\n      table: {\n        type: {\n          detail: `\n            Interface: IStepperItem\n            Properties:\n            - color ('primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral', optional): The color theme of the step\n            - content (string, optional): Custom content to display in the step indicator\n            - customClass (string, optional): Custom CSS class to apply to the step\n            - label (string, optional): Text label for the step\n          `,\n        },\n      },\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<StepperArgs>;\n\nconst Template: Story = {\n  // prettier-ignore\n  render: (args) => html`\n<modus-wc-stepper\n  custom-class=\"${ifDefined(args['custom-class'])}\"\n  orientation=\"${ifDefined(args.orientation)}\"\n  .steps=\"${args.steps}\"\n>\n</modus-wc-stepper>\n<script>\n// Adding this block to show how to set stepper steps via JS.    \n// const steps = [\n//   { label: 'Scale', color: 'primary' },\n//   { label: 'Belong', color: 'primary' },\n//   { label: 'Grow', color: 'warning' },\n//   { label: 'Innovate', content: '🚀' }\n//   ];      \n// const stepper = document.querySelector('modus-wc-stepper');  \n// stepper.steps = steps;\n</script>\n\n  `,\n};\n\nexport const Default: Story = { ...Template };\n"
+  }
+}

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

@@ -0,0 +1,149 @@
+{
+  "description": "A customizable switch component",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "The disabled state of the switch.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "indeterminate",
+      "type": "boolean",
+      "description": "The indeterminate state of the switch.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 36
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "The tabindex of the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "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": 48
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 51
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 54
+    },
+    {
+      "name": "value",
+      "type": "boolean",
+      "description": "The value of the switch.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 57
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input loses focus.",
+      "end_line": 60
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Emitted when the input value changes.",
+      "end_line": 63
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input gains focus.",
+      "end_line": 66
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-switch\n        aria-label=\"Toggle\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .indeterminate=${args.indeterminate}\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-switch>",
+    "variations": [],
+    "args": {
+      "custom-class": "''",
+      "disabled": "false",
+      "indeterminate": "false",
+      "label": "'Label'",
+      "name": "''",
+      "required": "false",
+      "size": "'md'",
+      "value": "true"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-switch",
+  "storyExample": {
+    "template": "<modus-wc-switch\n        aria-label=\"Toggle\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .indeterminate=${args.indeterminate}\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-switch>",
+    "args": {
+      "custom-class": "''",
+      "disabled": "false",
+      "indeterminate": "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 SwitchArgs {\n  'custom-class'?: string;\n  disabled?: boolean;\n  indeterminate?: 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<SwitchArgs> = {\n  title: 'Components/Forms/Switch',\n  component: 'modus-wc-switch',\n  args: {\n    'custom-class': '',\n    disabled: false,\n    indeterminate: 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: ['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<SwitchArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-switch\n        aria-label=\"Toggle\"\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .indeterminate=${args.indeterminate}\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-switch>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for switch component\n    if (!customElements.get('switch-shadow-host')) {\n      const SwitchShadowHost = createShadowHostClass<SwitchArgs>({\n        componentTag: 'modus-wc-switch',\n        propsMapper: (v: SwitchArgs, el: HTMLElement) => {\n          const switchEl = el as unknown as {\n            customClass: string;\n            disabled: boolean;\n            indeterminate: boolean;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            name: string;\n            required: boolean;\n            size: string;\n            value: boolean;\n          };\n          switchEl.customClass = v['custom-class'] || '';\n          switchEl.disabled = Boolean(v.disabled);\n          switchEl.indeterminate = Boolean(v.indeterminate);\n          switchEl.inputId = v['input-id'] || '';\n          switchEl.inputTabIndex = v['input-tab-index'] || 0;\n          switchEl.label = v.label || '';\n          switchEl.name = v.name || '';\n          switchEl.required = Boolean(v.required);\n          switchEl.size = v.size || 'md';\n          switchEl.value = Boolean(v.value);\n        },\n      });\n      customElements.define('switch-shadow-host', SwitchShadowHost);\n    }\n\n    return html`<switch-shadow-host\n      .props=${{ ...args }}\n    ></switch-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 for additional info and examples.\n  - \\`checked\\` prop has been renamed to \\`value\\` to maintain consistency across form components.\n  - Size values have changed from verbose names (\\`small\\`, \\`medium\\`) 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| checked          | value               |                                                             |\n| disabled         | disabled            |                                                             |\n| label            | label               |                                                             |\n| size             | size                | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\`                     |\n\n#### Event Mapping\n\n| 1.0 Event      | 2.0 Event      | Notes                                                 |\n|----------------|----------------|-------------------------------------------------------|\n| switchClick    | inputChange    |                                                       |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}