@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,149 @@
+{
+  "description": "A customizable checkbox 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 checkbox.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "indeterminate",
+      "type": "boolean",
+      "description": "The indeterminate state of the checkbox.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 35
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "The tabindex of the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "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": 47
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 50
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "value",
+      "type": "boolean",
+      "description": "The value of the checkbox.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 56
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input loses focus.",
+      "end_line": 59
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Emitted when the input value changes.",
+      "end_line": 62
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Emitted when the input gains focus.",
+      "end_line": 65
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-checkbox\n        aria-label=\"Checkbox\"\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-checkbox>",
+    "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-checkbox",
+  "storyExample": {
+    "template": "<modus-wc-checkbox\n        aria-label=\"Checkbox\"\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-checkbox>",
+    "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 CheckboxArgs {\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<CheckboxArgs> = {\n  title: 'Components/Forms/Checkbox',\n  component: 'modus-wc-checkbox',\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<CheckboxArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-checkbox\n        aria-label=\"Checkbox\"\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-checkbox>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for checkbox component\n    if (!customElements.get('checkbox-shadow-host')) {\n      const CheckboxShadowHost = createShadowHostClass<CheckboxArgs>({\n        componentTag: 'modus-wc-checkbox',\n        propsMapper: (v: CheckboxArgs, el: HTMLElement) => {\n          const checkboxEl = 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          checkboxEl.customClass = v['custom-class'] || '';\n          checkboxEl.disabled = Boolean(v.disabled);\n          checkboxEl.indeterminate = Boolean(v.indeterminate);\n          checkboxEl.inputId = v['input-id'] ?? '';\n          checkboxEl.inputTabIndex = v['input-tab-index'] ?? 0;\n          checkboxEl.label = v.label ?? '';\n          checkboxEl.name = v.name ?? '';\n          checkboxEl.required = Boolean(v.required);\n          checkboxEl.size = v.size ?? '';\n          checkboxEl.value = Boolean(v.value);\n        },\n      });\n      customElements.define('checkbox-shadow-host', CheckboxShadowHost);\n    }\n\n    return html`<checkbox-shadow-host\n      .props=${{ ...args }}\n    ></checkbox-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]([Angular](?path=/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - The \\`checked\\` prop is now \\`value\\` in 2.0.\n  - The \\`checkboxClick\\` event is now \\`inputChange\\` in 2.0.\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| indeterminate    | indeterminate |                                         |\n| label            | label         |                                         |\n| size             | size          | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\` |\n| stop-propagation |               | Not carried over                        |\n\n#### Event Mapping\n\n| 1.0 Event     | 2.0 Event   | Notes                                                 |\n|---------------|-------------|-------------------------------------------------------|\n| checkboxClick | inputChange | Event now emits \\`InputEvent\\` instead of \\`boolean\\` |\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-chip.json

@@ -0,0 +1,132 @@
+{
+  "description": "A customizable chip component used to display information in a compact area The component supports a `<slot>` for injecting custom content such as avatar and icons.",
+  "properties": [
+    {
+      "name": "active",
+      "type": "boolean",
+      "description": "Active state of chip.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the chip is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "hasError",
+      "type": "boolean",
+      "description": "Whether the chip has an error.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The label to display in the chip.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "showRemove",
+      "type": "boolean",
+      "description": "Whether to show the close icon on right side of the chip.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 47
+    },
+    {
+      "name": "shape",
+      "type": "'rectangle' | 'circle'",
+      "description": "The shape of the chip: 'rectangle' (default) or 'circle'.",
+      "default": "'rectangle'",
+      "mutable": false,
+      "end_line": 50
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the chip.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "variant",
+      "type": "'filled' | 'outline'",
+      "description": "The variant of the chip.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 56
+    }
+  ],
+  "events": [
+    {
+      "name": "chipClick",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the chip is clicked or activated via keyboard.",
+      "end_line": 59
+    },
+    {
+      "name": "chipRemove",
+      "detail": "MouseEvent | KeyboardEvent",
+      "description": "Event emitted when the close chip icon button is clicked.",
+      "end_line": 62
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-chip\n      aria-label=\"Chip example\"\n      active=${ifDefined(args.active)}\n      disabled=${ifDefined(args.disabled)}\n      has-error=${ifDefined(args['has-error'])}\n      label=${args.label}\n      shape=${args.shape}\n      show-remove=${ifDefined(args['show-remove'])}\n      size=${args.size}\n      variant=${args.variant}\n    />",
+    "variations": [],
+    "args": {
+      "label": "'Chip'",
+      "show-remove": "true",
+      "shape": "'rectangle'",
+      "size": "'md'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "chipClick",
+      "chipRemove"
+    ]
+  },
+  "tag": "modus-wc-chip",
+  "storyExample": {
+    "template": "<modus-wc-chip\n      aria-label=\"Chip example\"\n      active=${ifDefined(args.active)}\n      disabled=${ifDefined(args.disabled)}\n      has-error=${ifDefined(args['has-error'])}\n      label=${args.label}\n      shape=${args.shape}\n      show-remove=${ifDefined(args['show-remove'])}\n      size=${args.size}\n      variant=${args.variant}\n    />",
+    "args": {
+      "label": "'Chip'",
+      "show-remove": "true",
+      "shape": "'rectangle'",
+      "size": "'md'",
+      "variant": "'filled'"
+    },
+    "argTypes": {},
+    "events": [
+      "chipClick",
+      "chipRemove"
+    ],
+    "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 ChipArgs {\n  active?: boolean;\n  'custom-class'?: string;\n  disabled?: boolean;\n  'has-error'?: boolean;\n  label: string;\n  shape?: 'rectangle' | 'circle';\n  'show-remove'?: boolean;\n  size: ModusSize;\n  variant: 'filled' | 'outline';\n}\n\nconst meta: Meta<ChipArgs> = {\n  title: 'Components/Chip',\n  component: 'modus-wc-chip',\n  args: {\n    label: 'Chip',\n    'show-remove': true,\n    shape: 'rectangle',\n    size: 'md',\n    variant: 'filled',\n  },\n  argTypes: {\n    shape: {\n      control: { type: 'select' },\n      options: ['rectangle', 'circle'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    variant: {\n      control: { type: 'select' },\n      options: ['filled', 'outline'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['chipClick', 'chipRemove'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ChipArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html` <modus-wc-chip\n      aria-label=\"Chip example\"\n      active=${ifDefined(args.active)}\n      disabled=${ifDefined(args.disabled)}\n      has-error=${ifDefined(args['has-error'])}\n      label=${args.label}\n      shape=${args.shape}\n      show-remove=${ifDefined(args['show-remove'])}\n      size=${args.size}\n      variant=${args.variant}\n    />`;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const AvatarChip: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-chip\n  aria-label=\"Chip example\"\n  active=${ifDefined(args.active)}\n  disabled=${ifDefined(args.disabled)}\n  has-error=${ifDefined(args['has-error'])}\n  label=${args.label}\n  shape=${args.shape}\n  show-remove=${ifDefined(args['show-remove'])}\n  size=${args.size}\n  variant=${args.variant}\n>\n  <modus-wc-avatar\n    img-src=\"https://i.pinimg.com/474x/73/54/79/7354794bf3873c3ef2666f778da4bcac.jpg\"\n    alt=\"sonic the hedgehog\"\n  ></modus-wc-avatar>\n</modus-wc-chip>\n    `;\n  },\n};\n\nexport const CheckIconChip: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-chip\n  aria-label=\"Chip example\"\n  active=${ifDefined(args.active)}\n  disabled=${ifDefined(args.disabled)}\n  has-error=${ifDefined(args['has-error'])}\n  label=${args.label}\n  shape=${args.shape}\n  show-remove=${ifDefined(args['show-remove'])}\n  size=${args.size}\n  variant=${args.variant}\n>\n  <modus-wc-icon name=\"check\" size=\"xs\"></modus-wc-icon>\n</modus-wc-chip>\n    `;\n  },\n};\n\n// prettier-ignore\nexport const Composable: Story = {\n  render: (args) => {\n    return html`\n<modus-wc-chip\n  aria-label=\"Chip example\"\n  active=${ifDefined(args.active)}\n  disabled=${ifDefined(args.disabled)}\n  has-error=${ifDefined(args['has-error'])}\n  shape=${args.shape}\n  size=${args.size}\n  variant=${args.variant}\n>\n  <modus-wc-icon name=\"heart\" size=\"xs\"></modus-wc-icon>\n  Chip\n</modus-wc-chip>\n\n<modus-wc-chip\n  aria-label=\"Chip example\"\n  active=${ifDefined(args.active)}\n  disabled=${ifDefined(args.disabled)}\n  has-error=${ifDefined(args['has-error'])}\n  shape=${args.shape}\n  show-remove=\"true\"\n  size=${args.size}\n  variant=${args.variant}\n>\n  <modus-wc-icon name=\"heart\" size=\"xs\"></modus-wc-icon>\n  Chip\n</modus-wc-chip>\n\n<modus-wc-chip\n  aria-label=\"Chip example\"\n  active=${ifDefined(args.active)}\n  disabled=${ifDefined(args.disabled)}\n  has-error=${ifDefined(args['has-error'])}\n  shape=${args.shape}\n  size=${args.size}\n  variant=${args.variant}\n>\n  <modus-wc-icon name=\"heart\" size=\"xs\"></modus-wc-icon>\n  Chip\n  <modus-wc-icon name=\"heart\" size=\"xs\"></modus-wc-icon>\n</modus-wc-chip>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for chip component\n    if (!customElements.get('chip-shadow-host')) {\n      const ChipShadowHost = createShadowHostClass<ChipArgs>({\n        componentTag: 'modus-wc-chip',\n        propsMapper: (v: ChipArgs, el: HTMLElement) => {\n          const chipEl = el as unknown as {\n            ariaLabel: string;\n            active: boolean;\n            customClass: string;\n            disabled: boolean;\n            hasError: boolean;\n            label: string;\n            shape: string;\n            showRemove: boolean;\n            size: string;\n            variant: string;\n          };\n          chipEl.ariaLabel = 'Click me chip';\n          chipEl.active = Boolean(v.active);\n          chipEl.shape = v.shape || 'rectangle';\n          chipEl.size = v.size;\n          chipEl.variant = v.variant;\n          chipEl.customClass = v['custom-class'] || '';\n          chipEl.disabled = Boolean(v.disabled);\n          chipEl.hasError = Boolean(v['has-error']);\n          chipEl.label = v.label;\n          chipEl.showRemove = Boolean(v['show-remove']);\n        },\n      });\n      customElements.define('chip-shadow-host', ChipShadowHost);\n    }\n\n    return html`<chip-shadow-host .props=${{ ...args }}></chip-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - \\`chip-style\\` prop has been renamed to \\`variant\\` and values changed from \\`solid\\` to \\`filled\\`.\n  - \\`closeClick\\` event has been renamed to \\`chipRemove\\`.\n  - \\`show-close\\` prop has been renamed to \\`show-remove\\`.\n  - Size values have changed from verbose names (\\`medium\\`, \\`small\\`) to abbreviations (\\`md\\`, \\`sm\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop       | 2.0 Prop    | Notes                                             |\n|----------------|-------------|---------------------------------------------------|\n| active         | active      |                                                   |\n| advanced-chip  |             | Not carried over                                  |\n| aria-label     | aria-label  |                                                   |\n| chip-id        |             | Not carried over                                  |\n| chip-style     | variant     | \\`solid\\` → \\`filled\\`, \\`outline\\` → \\`outline\\` |\n| disabled       | disabled    |                                                   |\n| has-error      | has-error   |                                                   |\n| image-url      |             | Not carried over, use slot instead                |\n| max-width      |             | Not carried over, use CSS instead                 |\n| show-checkmark |             | Not carried over, use slot instead                |\n| show-close     | show-remove |                                                   |\n| size           | size        | \\`medium\\` → \\`md\\`, \\`small\\` → \\`sm\\`           |\n| value          | label       |                                                   |\n|                | shape       | New in 2.0: \\`rectangle\\` (default), \\`circle\\` |\n\n#### Event Mapping\n\n| 1.0 Event   | 2.0 Event   | Notes |\n|-------------|-------------|-------|\n| chipClick  | chipClick  |       |\n| closeClick | chipRemove |       |\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-collapse.json

@@ -0,0 +1,90 @@
+{
+  "description": "A customizable collapse component used for showing and hiding content. The component supports a 'header' and 'content' `<slot>` for injecting custom HTML.",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the component should have a border.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 52
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the outer div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 55
+    },
+    {
+      "name": "expanded",
+      "type": "boolean",
+      "description": "Controls whether the collapse is expanded or not.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 58
+    },
+    {
+      "name": "collapseId",
+      "type": "string",
+      "description": "A unique identifier used to set the id attributes of various elements.",
+      "default": null,
+      "mutable": true,
+      "end_line": 61
+    },
+    {
+      "name": "options",
+      "type": "ICollapseOptions",
+      "description": "Configuration options for rendering the pre-laid out collapse component. Do not set this prop if you intend to use the 'header' slot.",
+      "default": null,
+      "mutable": false,
+      "end_line": 67
+    }
+  ],
+  "events": [
+    {
+      "name": "expandedChange",
+      "detail": "{ expanded: boolean }",
+      "description": "Event emitted when the expanded prop is internally changed.",
+      "end_line": 70
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "header",
+      "description": "Slot for header content"
+    },
+    {
+      "name": "content",
+      "description": "Slot for content content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-collapse\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?expanded=${args.expanded}\n  id=${ifDefined(args.id)}\n  .options=${args.options}\n>\n  <div slot=\"content\">Collapse content</div>\n</modus-wc-collapse>\n<script>\n// Adding this block to show how to set options via JS.\n// const options = {\n//   title: 'Collapse Title',\n//   description: 'Collapse description',\n//   icon: 'alert',\n//   iconAriaLabel: 'Alert',\n// };\n//   const collapse = document.querySelector('modus-wc-collapse');\n//   collapse.options = options;\n</script>",
+    "variations": [],
+    "args": {
+      "bordered": "false",
+      "expanded": "false"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "expandedChange"
+    ]
+  },
+  "tag": "modus-wc-collapse",
+  "storyExample": {
+    "template": "<modus-wc-collapse\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?expanded=${args.expanded}\n  id=${ifDefined(args.id)}\n  .options=${args.options}\n>\n  <div slot=\"content\">Collapse content</div>\n</modus-wc-collapse>\n<script>\n// Adding this block to show how to set options via JS.\n// const options = {\n//   title: 'Collapse Title',\n//   description: 'Collapse description',\n//   icon: 'alert',\n//   iconAriaLabel: 'Alert',\n// };\n//   const collapse = document.querySelector('modus-wc-collapse');\n//   collapse.options = options;\n</script>",
+    "args": {
+      "bordered": "false",
+      "expanded": "false"
+    },
+    "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 { ICollapseOptions } from './modus-wc-collapse';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\n\ninterface CollapseArgs {\n  bordered?: boolean;\n  'custom-class'?: string;\n  expanded?: boolean;\n  id?: string;\n  options?: ICollapseOptions;\n}\n\nconst options: ICollapseOptions = {\n  title: 'Collapse Title',\n  description: 'Collapse description',\n  icon: 'alert',\n  iconAriaLabel: 'Alert',\n};\n\nconst meta: Meta<CollapseArgs> = {\n  title: 'Components/Collapse',\n  component: 'modus-wc-collapse',\n  args: { bordered: false, expanded: false, options },\n  argTypes: {\n    options: {\n      description: 'Configuration options for the collapse component',\n      table: {\n        type: {\n          detail: `\n            Interface: ICollapseOptions\n            Properties:\n            - description (string, optional): The description to render in the collapse header\n            - icon (string, optional): The Modus icon name to render in the collapse header\n            - iconAriaLabel (string, optional): The icon's aria-label\n            - size (DaisySize, optional): The size of the collapse header\n            - title (string): The title to render in the collapse header\n          `,\n        },\n      },\n    },\n  },\n  decorators: [withActions],\n  parameters: { actions: { handles: ['expandedChange'] }, layout: 'padded' },\n};\n\nexport default meta;\n\ntype Story = StoryObj<CollapseArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-collapse\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?expanded=${args.expanded}\n  id=${ifDefined(args.id)}\n  .options=${args.options}\n>\n  <div slot=\"content\">Collapse content</div>\n</modus-wc-collapse>\n<script>\n// Adding this block to show how to set options via JS.\n// const options = {\n//   title: 'Collapse Title',\n//   description: 'Collapse description',\n//   icon: 'alert',\n//   iconAriaLabel: 'Alert',\n// };\n//   const collapse = document.querySelector('modus-wc-collapse');\n//   collapse.options = options;\n</script>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const WithCustomClickableHeader = {\n  render: (args) => {\n    const handleButtonClick = () => {\n      window.alert('Button was clicked!');\n    };\n\n    // prettier-ignore\n    return html`\n<style>\n  .clickable-div {\n    position: relative;\n    width: fit-content;\n    z-index: 99;\n  }\n</style>\n<modus-wc-collapse\n  ?bordered=${args.bordered}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?expanded=${args.expanded}\n  id=\"123\"\n>\n  <div slot=\"header\" class=\"modus-wc-collapse-title\" id=\"123\">\n    <div class=\"clickable-div\">\n      <modus-wc-button id=\"button1\" @buttonClick=${handleButtonClick}>Alert 1</modus-wc-button>\n      <modus-wc-button id=\"button2\" @buttonClick=${handleButtonClick}>Alert 2</modus-wc-button>\n    </div>\n  </div>\n  <div slot=\"content\">Collapse content</div>\n</modus-wc-collapse>\n<script>\n// Adding this block to show how to add clickable buttons in the collapse header via JS.\n// function handleButtonClick() {\n//   window.alert('Button was clicked!');\n// }\n// const button1 = document.getElementById('button1');\n// const button2 = document.getElementById('button2');\n// button1.addEventListener('click', handleButtonClick);\n// button2.addEventListener('click', handleButtonClick);\n</script>\n    `;\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for collapse component\n    if (!customElements.get('collapse-shadow-host')) {\n      const CollapseShadowHost = createShadowHostClass<CollapseArgs>({\n        componentTag: 'modus-wc-collapse',\n        propsMapper: (v: CollapseArgs, el: HTMLElement) => {\n          const collapseEl = el as unknown as {\n            bordered: boolean;\n            customClass: string;\n            expanded: boolean;\n            id: string;\n            options: ICollapseOptions;\n          };\n          // Only set innerHTML once on initial creation\n          if (!el.querySelector('[slot=\"content\"]')) {\n            el.innerHTML = '<div slot=\"content\">Collapse content</div>';\n          }\n          collapseEl.bordered = Boolean(v.bordered);\n          collapseEl.customClass = v['custom-class'] || '';\n          collapseEl.expanded = Boolean(v.expanded);\n          collapseEl.id = v.id ?? '';\n          if (v.options) {\n            collapseEl.options = v.options; // Conditional assignment only if provided\n          }\n        },\n      });\n      customElements.define('collapse-shadow-host', CollapseShadowHost);\n    }\n\n    return html`<collapse-shadow-host\n      .props=${{ ...args }}\n    ></collapse-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - The 1.0 accordion-item component maps to the 2.0 collapse component. See the [Accordion component](?path=/docs/components-accordion--docs).\n  - Size values have changed from \\`condensed\\`, \\`standard\\` in 1.0 to abbreviations (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`) in 2.0.\n\n#### Prop Mapping\n\n##### accordion-item (1.0) → collapse (2.0)\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| size               | options.size        |                  |\n| supporting-label   | options.description |                  |\n\n#### Event Mapping\n\n| 1.0 Event | 2.0 Event      | Notes            |\n|-----------|----------------|------------------|\n| closed    | expandedChange |                  |\n| opened    | expandedChange |                  |\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-date.json

@@ -0,0 +1,227 @@
+{
+  "description": "A customizable date picker component used to create date inputs. Adheres to WCAG 2.2 standards.",
+  "properties": [
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the input should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 78
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the input.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 81
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the form control is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 84
+    },
+    {
+      "name": "feedback",
+      "type": "IInputFeedbackProp",
+      "description": "Feedback to render below the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 87
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 90
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).",
+      "default": null,
+      "mutable": false,
+      "end_line": 93
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 96
+    },
+    {
+      "name": "max",
+      "type": "string",
+      "description": "Maximum date value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 99
+    },
+    {
+      "name": "min",
+      "type": "string",
+      "description": "Minimum date value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 102
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+      "default": null,
+      "mutable": false,
+      "end_line": 105
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "description": "Whether the value is editable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 108
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required or must be checked for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 111
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 114
+    },
+    {
+      "name": "format",
+      "type": "| 'yyyy-mm-dd'     | 'dd-mm-yyyy'     | 'mm-dd-yyyy'     | 'yyyy/mm/dd'     | 'dd/mm/yyyy'     | 'mm/dd/yyyy'     | 'MMM DD, YYYY'",
+      "description": "The date format for display and input.",
+      "default": "'dd-mm-yyyy'",
+      "mutable": false,
+      "end_line": 124
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the control.",
+      "default": "''",
+      "mutable": true,
+      "end_line": 127
+    },
+    {
+      "name": "weekStartDay",
+      "type": "WeekStartDay",
+      "description": "The first day of the week for the calendar display",
+      "default": "'sunday'",
+      "mutable": false,
+      "end_line": 130
+    },
+    {
+      "name": "showWeekNumbers",
+      "type": "boolean",
+      "description": "Displays ISO 8601 week numbers in the calendar.Week numbers are calculated with Monday as the first day of the week.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 133
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input loses focus.",
+      "end_line": 136
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Event emitted when the input value changes.",
+      "end_line": 139
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input gains focus.",
+      "end_line": 142
+    },
+    {
+      "name": "calendarMonthChange",
+      "detail": "number",
+      "description": "Event emitted when the calendar month selection changes.",
+      "end_line": 145
+    },
+    {
+      "name": "calendarYearChange",
+      "detail": "number",
+      "description": "Event emitted when the calendar year selection changes.",
+      "end_line": 148
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\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        placeholder=${ifDefined(args.placeholder)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>",
+    "variations": [],
+    "args": {
+      "bordered": "true",
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "read-only": "false",
+      "required": "false",
+      "show-week-numbers": "false",
+      "size": "'md'",
+      "value": "''",
+      "week-start-day": "'sunday'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus",
+      "calendarMonthChange",
+      "calendarYearChange",
+      ""
+    ]
+  },
+  "tag": "modus-wc-date",
+  "storyExample": {
+    "template": "<style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\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        placeholder=${ifDefined(args.placeholder)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>",
+    "args": {
+      "bordered": "true",
+      "custom-class": "''",
+      "disabled": "false",
+      "label": "'Label'",
+      "read-only": "false",
+      "required": "false",
+      "show-week-numbers": "false",
+      "size": "'md'",
+      "value": "''",
+      "week-start-day": "'sunday'"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus",
+      "calendarMonthChange",
+      "calendarYearChange",
+      ""
+    ],
+    "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 { IInputFeedbackProp, ModusSize } from '../types';\nimport { WeekStartDay } from '../types';\n\ninterface DateArgs {\n  bordered?: boolean;\n  'custom-class'?: string;\n  disabled?: boolean;\n  feedback?: IInputFeedbackProp;\n  format?:\n    | 'yyyy-mm-dd'\n    | 'dd-mm-yyyy'\n    | 'mm-dd-yyyy'\n    | 'MMM DD, YYYY'\n    | 'yyyy/mm/dd'\n    | 'dd/mm/yyyy'\n    | 'mm/dd/yyyy';\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  max?: string;\n  min?: string;\n  name?: string;\n  placeholder?: string;\n  'read-only'?: boolean;\n  required?: boolean;\n  'show-week-numbers'?: boolean;\n  size?: ModusSize;\n  value: string;\n  'week-start-day'?: WeekStartDay;\n}\n\nconst meta: Meta<DateArgs> = {\n  title: 'Components/Forms/Date',\n  component: 'modus-wc-date',\n  args: {\n    bordered: true,\n    'custom-class': '',\n    disabled: false,\n    label: 'Label',\n    'read-only': false,\n    required: false,\n    'show-week-numbers': false,\n    size: 'md',\n    value: '',\n    'week-start-day': 'sunday',\n  },\n  argTypes: {\n    feedback: {\n      description: 'Feedback prop for input components',\n      table: {\n        type: {\n          detail: `\n            Interface: IInputFeedbackProp\n            Properties:\n            - level ('error' | 'info' | 'success' | 'warning'): The feedback level\n            - message (string, optional): The feedback message\n          `,\n        },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    format: {\n      control: { type: 'select' },\n      options: [\n        'yyyy-mm-dd',\n        'dd-mm-yyyy',\n        'mm-dd-yyyy',\n        'MMM DD, YYYY',\n        'yyyy/mm/dd',\n        'dd/mm/yyyy',\n        'mm/dd/yyyy',\n      ],\n    },\n    'week-start-day': {\n      control: { type: 'select' },\n      options: [\n        'sunday',\n        'monday',\n        'tuesday',\n        'wednesday',\n        'thursday',\n        'friday',\n        'saturday',\n      ],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: [\n        'inputBlur',\n        'inputChange',\n        'inputFocus',\n        'calendarMonthChange',\n        'calendarYearChange',\n      ],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<DateArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    return html`\n      <style>\n        div[id^='story--components-forms-date--default'] {\n          min-height: 400px;\n          width: 300px;\n        }\n      </style>\n      <modus-wc-date\n        aria-label=\"Date input\"\n        ?bordered=${args.bordered}\n        custom-class=${ifDefined(args['custom-class'])}\n        ?disabled=${args.disabled}\n        .feedback=${args.feedback}\n        format=${ifDefined(args.format)}\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        placeholder=${ifDefined(args.placeholder)}\n        ?read-only=${args['read-only']}\n        ?required=${args.required}\n        ?show-week-numbers=${args['show-week-numbers']}\n        size=${ifDefined(args.size)}\n        .value=${args.value}\n        week-start-day=${ifDefined(args['week-start-day'])}\n      ></modus-wc-date>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nconst errorFeedback: IInputFeedbackProp = {\n  level: 'error',\n  message: 'Value is required.',\n};\n\nexport const WithErrorFeedback: Story = {\n  ...Template,\n  args: { feedback: errorFeedback, required: true },\n  parameters: {\n    docs: {\n      source: {\n        transform: (src) => `${src}\n<script>\n  const dateInputElement = document.querySelector('modus-wc-date');\n  dateInputElement.feedback = {\n    level: 'error',\n    message: 'Value is required.'\n  };\n</script>`,\n      },\n    },\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for date component\n    if (!customElements.get('date-shadow-host')) {\n      const DateShadowHost = createShadowHostClass<DateArgs>({\n        componentTag: 'modus-wc-date',\n        propsMapper: (v: DateArgs, el: HTMLElement) => {\n          const dateEl = el as unknown as {\n            bordered: boolean;\n            customClass: string;\n            disabled: boolean;\n            feedback: IInputFeedbackProp;\n            format: string;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            max: string;\n            min: string;\n            name: string;\n            placeholder: string;\n            readOnly: boolean;\n            required: boolean;\n            showWeekNumbers: boolean;\n            size: string;\n            value: string;\n            weekStartDay: string;\n          };\n          dateEl.bordered = Boolean(v.bordered);\n          dateEl.customClass = v['custom-class'] || '';\n          dateEl.disabled = Boolean(v.disabled);\n          dateEl.format = v.format ?? '';\n          dateEl.inputId = v['input-id'] ?? '';\n          dateEl.inputTabIndex = v['input-tab-index'] ?? -1;\n          dateEl.label = v.label ?? '';\n          dateEl.max = v.max ?? '';\n          dateEl.min = v.min ?? '';\n          dateEl.name = v.name ?? '';\n          dateEl.placeholder = v.placeholder ?? '';\n          dateEl.readOnly = Boolean(v['read-only']);\n          dateEl.required = Boolean(v.required);\n          dateEl.showWeekNumbers = Boolean(v['show-week-numbers']);\n          dateEl.size = v.size ?? '';\n          dateEl.value = v.value ?? '';\n          dateEl.weekStartDay = v['week-start-day'] ?? '';\n        },\n      });\n      customElements.define('date-shadow-host', DateShadowHost);\n    }\n\n    return html`<date-shadow-host .props=${{ ...args }}></date-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]([Angular](?path=/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Size values have changed from verbose names (\\`medium\\`, \\`large\\`) to abbreviations (\\`sm\\`, \\`md\\`, \\`lg\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop           | 2.0 Prop         | Notes                                   |\n|--------------------|------------------|-----------------------------------------|\n| allow-chars-regex  |                  | Not carried over                        |\n| alt-formats        |                  | Not carried over                        |\n| aria-label         | aria-label       |                                         |\n| auto-focus-input   |                  | Not carried over                        |\n| disabled           | disabled         |                                         |\n| disable-validation |                  | Not carried over                        |\n| error-text         | feedback.message | Use \\`feedback\\` level                  |\n| filler-date        |                  | Not carried over                        |\n| format             | format           |                                         |\n| helper-text        |                  | Not carried over                        |\n| label              | label            |                                         |\n| max                | max              |                                         |\n| min                | min              |                                         |\n| placeholder        |                  | Not carried over                        |\n| read-only          | read-only        |                                         |\n| required           | required         |                                         |\n| show-calendar-icon |                  | Not carried over                        |\n| size               | size             | \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| type               |                  | Not carried over                        |\n| valid-text         | feedback.message | Use \\`feedback\\` level                  |\n| value              | value            |                                         |\n\n#### Event Mapping\n\n| 1.0 Event           | 2.0 Event   | Notes            |\n|---------------------|-------------|------------------|\n| calendarIconClicked |             | Not carried over |\n| dateInputBlur       | inputBlur   |                  |\n| valueChange         | inputChange |                  |\n| valueError          |             | Not carried over |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}