@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/base/component-docs/modus-wc-number-input.json

@@ -0,0 +1,219 @@
+{
+  "description": "A customizable input component used to create number inputs with types",
+  "properties": [
+    {
+      "name": "autoComplete",
+      "type": "'on' | 'off'",
+      "description": "Hint for form autofill feature.",
+      "default": null,
+      "mutable": false,
+      "end_line": 29
+    },
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the input should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "currencySymbol",
+      "type": "string",
+      "description": "The currency symbol to display.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the input.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the form control is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 41
+    },
+    {
+      "name": "feedback",
+      "type": "IInputFeedbackProp",
+      "description": "Feedback to render below the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 44
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 47
+    },
+    {
+      "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": 50
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 53
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "description": "The input's maximum value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 56
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "description": "The input's minimum value.",
+      "default": null,
+      "mutable": false,
+      "end_line": 59
+    },
+    {
+      "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": 62
+    },
+    {
+      "name": "placeholder",
+      "type": "string",
+      "description": "Text that appears in the form control when it has no value set.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 65
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "description": "Whether the value is editable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 68
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 71
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 74
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "description": "The granularity that the value adheres to.",
+      "default": null,
+      "mutable": false,
+      "end_line": 77
+    },
+    {
+      "name": "type",
+      "type": "'number' | 'range'",
+      "description": "Type of form control.",
+      "default": "'number'",
+      "mutable": false,
+      "end_line": 80
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the control.",
+      "default": "''",
+      "mutable": true,
+      "end_line": 83
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input loses focus.",
+      "end_line": 86
+    },
+    {
+      "name": "inputChange",
+      "detail": "InputEvent",
+      "description": "Event emitted when the input value changes.",
+      "end_line": 89
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input gains focus.",
+      "end_line": 92
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<number-input-shadow-host\n      style=\"width: 200px;display: block;\"\n      .props=${{ ...args }}\n    ></number-input-shadow-host>",
+    "variations": [],
+    "args": {
+      "bordered": "true",
+      "disabled": "false",
+      "inputmode": "'numeric'",
+      "label": "'Label'",
+      "size": "'md'",
+      "type": "'number'",
+      "value": "''"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-number-input",
+  "storyExample": {
+    "template": "<number-input-shadow-host\n      style=\"width: 200px;display: block;\"\n      .props=${{ ...args }}\n    ></number-input-shadow-host>",
+    "args": {
+      "bordered": "true",
+      "disabled": "false",
+      "inputmode": "'numeric'",
+      "label": "'Label'",
+      "size": "'md'",
+      "type": "'number'",
+      "value": "''"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { IInputFeedbackProp, ModusSize } from '../types';\n\ninterface NumberInputArgs {\n  'auto-complete'?: 'on' | 'off';\n  bordered?: boolean;\n  'currency-symbol'?: string;\n  'custom-class'?: string;\n  disabled?: boolean;\n  feedback?: IInputFeedbackProp;\n  'input-aria-invalid'?: 'true' | 'false';\n  'input-id'?: string;\n  inputmode?: 'decimal' | 'none' | 'numeric';\n  'input-tab-index'?: number;\n  label?: string;\n  max?: number;\n  min?: number;\n  name?: string;\n  placeholder?: string;\n  'read-only'?: boolean;\n  required?: boolean;\n  size?: ModusSize;\n  step?: number;\n  type?: 'number' | 'range';\n  value: string;\n}\n\nconst meta: Meta<NumberInputArgs> = {\n  title: 'Components/Forms/Number Input',\n  component: 'modus-wc-number-input',\n  args: {\n    bordered: true,\n    disabled: false,\n    inputmode: 'numeric',\n    label: 'Label',\n    size: 'md',\n    type: 'number',\n    value: '',\n  },\n  argTypes: {\n    'auto-complete': {\n      control: { type: 'select' },\n      options: ['on', 'off'],\n    },\n    feedback: {\n      description: 'Feedback prop for input components',\n      table: {\n        type: {\n          detail: `\n            Interface: IInputFeedbackProp\n            Properties:\n            - level ('error' | 'info' | 'success' | 'warning'): The feedback level\n            - message (string, optional): The feedback message\n          `,\n        },\n      },\n    },\n    'input-aria-invalid': {\n      control: { type: 'select' },\n      options: ['true', 'false'],\n    },\n    inputmode: {\n      control: { type: 'select' },\n      options: ['decimal', 'none', 'numeric'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['number', 'range'],\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<NumberInputArgs>;\n\nconst Template: Story = {\n  render: (args) => html`\n    <modus-wc-number-input\n      aria-label=\"Number input\"\n      auto-complete=${ifDefined(args['auto-complete'])}\n      ?bordered=${args.bordered}\n      currency-symbol=${ifDefined(args['currency-symbol'])}\n      custom-class=${ifDefined(args['custom-class'])}\n      ?disabled=${args.disabled}\n      .feedback=${args.feedback}\n      input-aria-invalid=${ifDefined(args['input-aria-invalid'])}\n      input-id=${ifDefined(args['input-id'])}\n      inputmode=${ifDefined(args.inputmode)}\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      size=${ifDefined(args.size)}\n      step=${ifDefined(args.step)}\n      type=${ifDefined(args.type)}\n      .value=${args.value}\n    ></modus-wc-number-input>\n  `,\n};\n\nexport const Default: Story = { ...Template };\n\nconst errorFeedback: IInputFeedbackProp = {\n  level: 'error',\n  message: 'Value is required.',\n};\n\nexport const Currency: Story = {\n  ...Template,\n  args: { 'currency-symbol': '$' },\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 numberInputElement = document.querySelector('modus-wc-number-input');\n  numberInputElement.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 number-input component\n    if (!customElements.get('number-input-shadow-host')) {\n      const NumberInputShadowHost = createShadowHostClass<NumberInputArgs>({\n        componentTag: 'modus-wc-number-input',\n        propsMapper: (v: NumberInputArgs, el: HTMLElement) => {\n          const numberInputEl = el as unknown as {\n            autoComplete: string;\n            bordered: boolean;\n            currencySymbol: string;\n            customClass: string;\n            disabled: boolean;\n            feedback: IInputFeedbackProp;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            max: number;\n            min: number;\n            name: string;\n            placeholder: string;\n            readOnly: boolean;\n            required: boolean;\n            size: string;\n            step: number;\n            type: string;\n            value: string;\n          };\n          numberInputEl.autoComplete = v['auto-complete'] ?? '';\n          numberInputEl.bordered = Boolean(v.bordered);\n          numberInputEl.currencySymbol = v['currency-symbol'] ?? '';\n          numberInputEl.customClass = v['custom-class'] || '';\n          numberInputEl.disabled = Boolean(v.disabled);\n          numberInputEl.inputId = v['input-id'] ?? '';\n          numberInputEl.inputTabIndex = v['input-tab-index'] ?? 0;\n          numberInputEl.label = v.label ?? '';\n          numberInputEl.max = v.max ?? 0;\n          numberInputEl.min = v.min ?? 0;\n          numberInputEl.name = v.name ?? '';\n          numberInputEl.placeholder = v.placeholder ?? '';\n          numberInputEl.readOnly = Boolean(v['read-only']);\n          numberInputEl.required = Boolean(v.required);\n          numberInputEl.size = v.size ?? '';\n          numberInputEl.step = v.step ?? 1;\n          numberInputEl.type = v.type ?? '';\n          numberInputEl.value = v.value;\n        },\n      });\n      customElements.define('number-input-shadow-host', NumberInputShadowHost);\n    }\n\n    return html`<number-input-shadow-host\n      style=\"width: 200px;display: block;\"\n      .props=${{ ...args }}\n    ></number-input-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Instead of changing the internal input type for currency formatting, the component now always renders\n  a number input and displays the currency symbol via the \\`currency-symbol\\` prop.\n  - Size values have changed from verbose names (\\`medium\\`, \\`large\\`) to abbreviations (\\`sm\\`, \\`md\\`, \\`lg\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop     | 2.0 Prop            | Notes                                   |\n|--------------|---------------------|-----------------------------------------|\n| aria-label   | aria-label          |                                         |\n| currency     | currency-symbol     |                                         |\n| disabled     | disabled            |                                         |\n| error-text   | feedback.message    | Use \\`feedback\\` level                  |\n| helper-text  |                     | Not carried over                        |\n| label        | label               |                                         |\n| locale       |                     | Not carried over                        |\n| max-value    | max                 |                                         |\n| min-value    | min                 |                                         |\n| placeholder  | placeholder         |                                         |\n| read-only    | read-only           |                                         |\n| required     | required            |                                         |\n| size         | size                | \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| step         | step                |                                         |\n| text-align   |                     | Not carried over, use CSS instead       |\n| valid-text   | feedback.message    | Use \\`feedback\\` level                  |\n| value        | value               |                                         |\n\n#### Event Mapping\n\n| 1.0 Event    | 2.0 Event    | Notes |\n|--------------|--------------|-------|\n| valueChange  | inputChange  |       |\n        `,\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-pagination.json

@@ -0,0 +1,103 @@
+{
+  "description": "Pagination component to navigate through pages of content",
+  "properties": [
+    {
+      "name": "ariaLabelValues",
+      "type": "IAriaLabelValues",
+      "description": "Aria label values for pagination buttons",
+      "default": null,
+      "mutable": false,
+      "end_line": 55
+    },
+    {
+      "name": "count",
+      "type": "number",
+      "description": "Total number of pages",
+      "default": "1",
+      "mutable": false,
+      "end_line": 58
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply",
+      "default": "''",
+      "mutable": false,
+      "end_line": 61
+    },
+    {
+      "name": "nextButtonText",
+      "type": "string",
+      "description": "The next page button text. If not set, an icon control will be used.",
+      "default": null,
+      "mutable": false,
+      "end_line": 64
+    },
+    {
+      "name": "page",
+      "type": "number",
+      "description": "The current page number",
+      "default": "1",
+      "mutable": false,
+      "end_line": 67
+    },
+    {
+      "name": "prevButtonText",
+      "type": "string",
+      "description": "The previous page button text. If not set, an icon control will be used.",
+      "default": null,
+      "mutable": false,
+      "end_line": 70
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "Size of the pagination buttons",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 73
+    }
+  ],
+  "events": [
+    {
+      "name": "pageChange",
+      "detail": "IPageChange",
+      "description": "Event emitted when page changes",
+      "end_line": 76
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {
+      "aria-label-values": "defaultLabelValues",
+      "count": "5",
+      "custom-class": "''",
+      "page": "1",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "pageChange"
+    ]
+  },
+  "tag": "modus-wc-pagination",
+  "storyExample": {
+    "template": "",
+    "args": {
+      "aria-label-values": "defaultLabelValues",
+      "count": "5",
+      "custom-class": "''",
+      "page": "1",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [
+      "pageChange"
+    ],
+    "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 { IAriaLabelValues } from './modus-wc-pagination';\n\nconst defaultLabelValues: IAriaLabelValues = {\n  firstPage: 'First page',\n  lastPage: 'Last page',\n  nextPage: 'Next page',\n  page: 'Page {0}',\n  previousPage: 'Previous page',\n};\n\ninterface PaginationArgs {\n  'aria-label-values'?: IAriaLabelValues;\n  count: number;\n  'custom-class'?: string;\n  'next-button-text'?: string;\n  page: number;\n  'prev-button-text'?: string;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nconst meta: Meta<PaginationArgs> = {\n  title: 'Components/Pagination',\n  component: 'modus-wc-pagination',\n  args: {\n    'aria-label-values': defaultLabelValues,\n    count: 5,\n    'custom-class': '',\n    page: 1,\n    size: 'md',\n  },\n  argTypes: {\n    'aria-label-values': {\n      description: 'Custom aria label values for pagination buttons',\n      table: {\n        type: {\n          detail: `\n            Interface: IAriaLabelValues\n            Properties:\n            - firstPage (string, optional): Aria label for the first page button\n            - lastPage (string, optional): Aria label for the last page button\n            - nextPage (string, optional): Aria label for the next page button\n            - page (string, optional): Aria label for the page number button. Use {0} as placeholder for the page number\n            - previousPage (string, optional): Aria label for the previous page button\n          `,\n        },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['pageChange'],\n    },\n    docs: {\n      description: {\n        component: `\n## Event Interface Documentation\n\nThe pageChange event emits an object with the following interface:\n\n\\`\\`\\`typescript\ninterface IPageChange {\n  /** The number of the newly selected page */\n  newPage: number;\n  /** The number of the previously selected page */\n  prevPage: number;\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<PaginationArgs>;\n\nexport const Default: Story = {\n  render: (args) => html`\n    <modus-wc-pagination\n      .ariaLabelValues=${args['aria-label-values']}\n      count=${args.count}\n      custom-class=${ifDefined(args['custom-class'])}\n      next-button-text=\"${ifDefined(args['next-button-text'])}\"\n      page=${args.page}\n      prev-button-text=\"${ifDefined(args['prev-button-text'])}\"\n      size=${ifDefined(args.size)}\n    ></modus-wc-pagination>\n  `,\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 the pagination component incorporated ellipses to indicate page skips. In 2.0, the component\n  has been simplified to only show at most 5 page buttons relative to current page with previous/next\n  and first/last navigation buttons.\n  - In 1.0 the \\`active-page\\` prop was used, while 2.0 uses \\`page\\` instead.\n  - The \\`pageChange\\` event in 1.0 emitted just the page number value. In 2.0, it emits an object\n  with \\`newPage\\` and \\`prevPage\\` properties.\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| active-page           | page               |                                                             |\n| aria-label            | aria-label         |                                                             |\n| max-page              | count              |                                                             |\n| min-page              |                    | Not carried over, minimum page is always 1                  |\n| next-page-button-text | next-button-text   |                                                             |\n| prev-page-button-text | prev-button-text   |                                                             |\n| size                  | size               | \\`small\\` → \\`sm\\`, \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n\n#### Event Mapping\n\n| 1.0 Event   | 2.0 Event   | Notes                                                   |\n|-------------|-------------|---------------------------------------------------------|\n| pageChange  | pageChange  | Now emits an object with \\`newPage\\` and \\`prevPage\\`   |\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-panel.json

@@ -0,0 +1,76 @@
+{
+  "description": "A customizable panel component used to organize content in a structured layout. This component provides 'header', 'body', and 'footer' `<slot>` elements for inserting custom HTML.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the outer div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 21
+    },
+    {
+      "name": "width",
+      "type": "string",
+      "description": "Width of the panel in pixels.",
+      "default": "'350px'",
+      "mutable": false,
+      "end_line": 24
+    },
+    {
+      "name": "height",
+      "type": "string",
+      "description": "Height of the panel in pixels.",
+      "default": "'700px'",
+      "mutable": false,
+      "end_line": 27
+    },
+    {
+      "name": "floating",
+      "type": "boolean",
+      "description": "Enable floating mode with elevated shadow.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 30
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "header",
+      "description": "Slot for header content"
+    },
+    {
+      "name": "body",
+      "description": "Slot for body content"
+    },
+    {
+      "name": "footer",
+      "description": "Slot for footer content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n  .panel-section {\n    padding: 12px;\n  }\n</style>\n<modus-wc-panel custom-class=\"${ifDefined(args['custom-class'])}\" width=\"${ifDefined(args.width)}\" height=\"${ifDefined(args.height)}\" ?floating=\"${args.floating}\">\n  <modus-wc-menu slot=\"header\">  \n    <modus-wc-menu-item label=\"Home\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu size=\"lg\" slot=\"body\">\n    <modus-wc-menu-item label=\"Dashboard\" value=\"dashboard\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Projects\" value=\"projects\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Team\" value=\"team\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Calendar\" value=\"calendar\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Documents\" value=\"documents\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Reports\" value=\"reports\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Analytics\" value=\"analytics\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Messages\" value=\"messages\"></modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu slot=\"footer\">   \n    <modus-wc-menu-item label=\"Settings\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"settings\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n</modus-wc-panel>",
+    "variations": [],
+    "args": {
+      "width": "'250px'",
+      "height": "'500px'",
+      "floating": "false"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-panel",
+  "storyExample": {
+    "template": "<style>\n  .panel-section {\n    padding: 12px;\n  }\n</style>\n<modus-wc-panel custom-class=\"${ifDefined(args['custom-class'])}\" width=\"${ifDefined(args.width)}\" height=\"${ifDefined(args.height)}\" ?floating=\"${args.floating}\">\n  <modus-wc-menu slot=\"header\">  \n    <modus-wc-menu-item label=\"Home\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu size=\"lg\" slot=\"body\">\n    <modus-wc-menu-item label=\"Dashboard\" value=\"dashboard\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Projects\" value=\"projects\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Team\" value=\"team\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Calendar\" value=\"calendar\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Documents\" value=\"documents\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Reports\" value=\"reports\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Analytics\" value=\"analytics\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Messages\" value=\"messages\"></modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu slot=\"footer\">   \n    <modus-wc-menu-item label=\"Settings\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"settings\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n</modus-wc-panel>",
+    "args": {
+      "width": "'250px'",
+      "height": "'500px'",
+      "floating": "false"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface PanelArgs {\n  'custom-class'?: string;\n  width?: string;\n  height?: string;\n  floating?: boolean;\n}\n\nconst meta: Meta<PanelArgs> = {\n  title: 'Components/Panel',\n  component: 'modus-wc-panel',\n  parameters: {\n    layout: 'padded',\n  },\n  argTypes: {\n    floating: {\n      control: { type: 'boolean' },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<PanelArgs>;\n\nexport const Default: Story = {\n  args: {\n    width: '250px',\n    height: '500px',\n    floating: false,\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .panel-section {\n    padding: 12px;\n  }\n</style>\n<modus-wc-panel custom-class=\"${ifDefined(args['custom-class'])}\" width=\"${ifDefined(args.width)}\" height=\"${ifDefined(args.height)}\" ?floating=\"${args.floating}\">\n  <modus-wc-menu slot=\"header\">  \n    <modus-wc-menu-item label=\"Home\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"home\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu size=\"lg\" slot=\"body\">\n    <modus-wc-menu-item label=\"Dashboard\" value=\"dashboard\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Projects\" value=\"projects\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Team\" value=\"team\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Calendar\" value=\"calendar\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Documents\" value=\"documents\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Reports\" value=\"reports\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Analytics\" value=\"analytics\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Messages\" value=\"messages\"></modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu slot=\"footer\">   \n    <modus-wc-menu-item label=\"Settings\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"settings\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n</modus-wc-panel>\n    `;\n  },\n};\n\nexport const Floating: Story = {\n  args: {\n    width: '250px',\n    height: '500px',\n    floating: true,\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .panel-section {\n    padding: 12px;\n  }\n</style>\n<modus-wc-panel custom-class=\"${ifDefined(args['custom-class'])}\" width=\"${ifDefined(args.width)}\" height=\"${ifDefined(args.height)}\" ?floating=\"${args.floating}\">\n  <modus-wc-menu slot=\"header\">\n    <modus-wc-menu-item label=\"Menu\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"menu\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu size=\"lg\" slot=\"body\">\n    <modus-wc-menu-item label=\"Files\" value=\"files\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Inbox\" value=\"inbox\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Starred\" value=\"starred\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Recent\" value=\"recent\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Shared\" value=\"shared\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Archive\" value=\"archive\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Trash\" value=\"trash\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Settings\" value=\"settings\"></modus-wc-menu-item>\n  </modus-wc-menu>\n\n  <modus-wc-menu slot=\"footer\">\n    <modus-wc-menu-item label=\"Help\" custom-class=\"panel-section\">\n      <modus-wc-icon slot=\"start-icon\" name=\"help\"></modus-wc-icon>\n    </modus-wc-menu-item>\n  </modus-wc-menu>\n</modus-wc-panel>\n    `;\n  },\n};\n\nexport const BodyOnly: Story = {\n  args: {\n    width: '250px',\n    height: 'auto',\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-panel custom-class=\"${ifDefined(args['custom-class'])}\" width=\"${ifDefined(args.width)}\" height=\"${ifDefined(args.height)}\" ?floating=\"${args.floating}\">\n  <modus-wc-menu size=\"lg\" slot=\"body\">\n    <modus-wc-menu-item label=\"Dashboard\" value=\"dashboard\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Projects\" value=\"projects\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Team\" value=\"team\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Calendar\" value=\"calendar\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Documents\" value=\"documents\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Reports\" value=\"reports\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Analytics\" value=\"analytics\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Messages\" value=\"messages\"></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Tasks\" value=\"tasks\"></modus-wc-menu-item>\n  </modus-wc-menu>\n</modus-wc-panel>\n    `;\n  },\n};\n"
+  }
+}

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

@@ -0,0 +1,86 @@
+{
+  "description": "A customizable progress component used to show the progress of a task or show the passing of time. The radial variant supports slotting in custom HTML to be displayed within the progress circle.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the progress element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 21
+    },
+    {
+      "name": "indeterminate",
+      "type": "boolean",
+      "description": "The indeterminate state of the progress component.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 24
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "A text label to render within the progress bar",
+      "default": null,
+      "mutable": false,
+      "end_line": 27
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "description": "The progress component's maximum value.",
+      "default": "100",
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "description": "The value of the progress component.",
+      "default": "0",
+      "mutable": true,
+      "end_line": 33
+    },
+    {
+      "name": "variant",
+      "type": "'default' | 'radial'",
+      "description": "The variant of the progress component.",
+      "default": "'default'",
+      "mutable": false,
+      "end_line": 36
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-progress\n        aria-label=\"Progress bar\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?indeterminate=${args.indeterminate}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        value=${args.value}\n        variant=${ifDefined(args.variant)}\n      ></modus-wc-progress>",
+    "variations": [],
+    "args": {
+      "indeterminate": "false",
+      "max": "100",
+      "value": "70",
+      "variant": "'default'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-progress",
+  "storyExample": {
+    "template": "<modus-wc-progress\n        aria-label=\"Progress bar\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?indeterminate=${args.indeterminate}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        value=${args.value}\n        variant=${ifDefined(args.variant)}\n      ></modus-wc-progress>",
+    "args": {
+      "indeterminate": "false",
+      "max": "100",
+      "value": "70",
+      "variant": "'default'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface ProgressArgs {\n  'custom-class'?: string;\n  indeterminate: boolean;\n  label?: string;\n  max?: number;\n  value: number;\n  variant?: 'default' | 'radial';\n}\n\nconst meta: Meta<ProgressArgs> = {\n  title: 'Components/Progress',\n  component: 'modus-wc-progress',\n  args: {\n    indeterminate: false,\n    max: 100,\n    value: 70,\n    variant: 'default',\n  },\n  argTypes: {\n    variant: {\n      control: { type: 'select' },\n      options: ['default', 'radial'],\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ProgressArgs>;\n\nexport const Default: Story = {\n  render: (args) => {\n    return html`\n      <modus-wc-progress\n        aria-label=\"Progress bar\"\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?indeterminate=${args.indeterminate}\n        label=${ifDefined(args.label)}\n        max=${ifDefined(args.max)}\n        value=${args.value}\n        variant=${ifDefined(args.variant)}\n      ></modus-wc-progress>\n    `;\n  },\n};\n\nexport const Indeterminate: Story = {\n  render: () => {\n    return html` <modus-wc-progress indeterminate=\"true\"></modus-wc-progress> `;\n  },\n};\n\nexport const SizeVariations: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  modus-wc-progress.modus-wc-progress-container .size-small {\n    height: 0.5rem;\n  }\n  modus-wc-progress.modus-wc-progress-container .size-compact {\n    height: 0.25rem;\n  }\n</style>\n<div>\n  <div>\n    Default size\n    <modus-wc-progress value=${args.value}></modus-wc-progress>\n  </div>\n  <div>\n    Small size\n    <modus-wc-progress\n      value=${args.value}\n      custom-class=\"size-small\"\n    ></modus-wc-progress>\n  </div>\n  <div>\n    Compact size\n    <modus-wc-progress\n      value=${args.value}\n      custom-class=\"size-compact\"\n    ></modus-wc-progress>\n  </div>\n</div>\n    `;\n  },\n};\n\nexport const LabelTextColor: Story = {\n  args: {\n    label: 'Loading...',\n    value: 50,\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  modus-wc-progress .modus-wc-progress-label.custom-label-color {\n    color: #f00;\n  }\n</style>\n<modus-wc-progress\n  value=${args.value}\n  label=${ifDefined(args.label)}\n  custom-class=\"custom-label-color\"\n></modus-wc-progress>\n    `;\n  },\n};\n\nexport const CustomBarColor: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  modus-wc-progress .modus-wc-progress.custom-bar-color::-webkit-progress-value {\n    background-color: #f48;\n  }\n  modus-wc-progress .modus-wc-progress.custom-bar-color::-moz-progress-bar {\n    background-color: #f48;\n  }\n</style>\n<modus-wc-progress\n  value=${args.value}\n  custom-class=\"custom-bar-color\"\n></modus-wc-progress>\n    `;\n  },\n};\n\nexport const CustomBackgroundColor: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  modus-wc-progress .modus-wc-progress.custom-bg-color {\n    background-color: #f00;\n  }\n</style>\n<modus-wc-progress\n  value=${args.value}\n  custom-class=\"custom-bg-color\"\n></modus-wc-progress>\n    `;\n  },\n};\n\nexport const RadialWithSlottedContent: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  #radial-icon {\n    justify-content: center;\n  }\n</style>\n<modus-wc-progress\n  aria-label=\"progress radial\"\n  ?indeterminate=${args.indeterminate}\n  max=${ifDefined(args.max)}\n  variant=\"radial\"\n  value=${args.value}\n>\n  <modus-wc-icon id=\"radial-icon\" name=\"clipboard\" size=\"md\"></modus-wc-icon>\n  ${args.value}%\n</modus-wc-progress>\n    `;\n  },\n  parameters: {\n    layout: 'centered',\n  },\n};\n\nexport const RadialWithCustomSizeAndThickness: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<style>\n  .radial-progress--lg {\n    --size: 12rem;\n  }\n  .radial-progress--thin {\n    --thickness: 0.5rem;\n  }\n</style>\n<modus-wc-progress\n  aria-label=\"progress radial\"\n  custom-class=\"radial-progress--lg\"\n  ?indeterminate=${args.indeterminate}\n  max=${ifDefined(args.max)}\n  variant=\"radial\"\n  value=${args.value}\n>\n  ${args.value}%\n</modus-wc-progress>\n<modus-wc-progress\n  aria-label=\"progress radial\"\n  custom-class=\"radial-progress--lg radial-progress--thin\"\n  ?indeterminate=${args.indeterminate}\n  max=${ifDefined(args.max)}\n  variant=\"radial\"\n  value=${args.value}\n>\n  ${args.value}%\n</modus-wc-progress>\n    `;\n  },\n  parameters: {\n    layout: 'centered',\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - Colors and sizes are now handled through CSS instead of direct props.\n  - The \\`mode\\` prop has been replaced with an \\`indeterminate\\` boolean prop.\n\n#### Prop Mapping\n\n| 1.0 Prop          | 2.0 Prop      | Notes                                                |\n|-------------------|---------------|------------------------------------------------------|\n| aria-label        | aria-label    |                                                      |\n| background-color  |               | Not carried over, use CSS instead                    |\n| color             |               | Not carried over, use CSS instead                    |\n| max-value         | max           |                                                      |\n| min-value         |               | Not carried over                                     |\n| mode              | indeterminate | 1.0: \\`determinate\\`/\\`indeterminate\\`, 2.0: boolean |\n| size              |               | Not carried over, use CSS instead                    |\n| text              | label         |                                                      |\n| text-color        |               | Not carried over, use CSS instead                    |\n| value             | value         |                                                      |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}