@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,85 @@
+{
+  "description": "A customizable divider component used to separate content horizontally or vertically",
+  "properties": [
+    {
+      "name": "color",
+      "type": "| 'primary'     | 'secondary'     | 'tertiary'     | 'high-contrast'     | 'success'     | 'warning'     | 'danger'",
+      "description": "The color of the divider line.",
+      "default": "'tertiary'",
+      "mutable": false,
+      "end_line": 27
+    },
+    {
+      "name": "content",
+      "type": "string",
+      "description": "The content to display in the divider.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the divider element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "orientation",
+      "type": "Orientation",
+      "description": "The orientation of the divider. This is in reference to how content will be rendered around the divider.",
+      "default": "'vertical'",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "position",
+      "type": "'center' | 'end' | 'start'",
+      "description": "The position of the divider.",
+      "default": "'center'",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "responsive",
+      "type": "boolean",
+      "description": "Whether the divider is responsive or not.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 42
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {
+      "color": "'tertiary'",
+      "content": "''",
+      "custom-class": "''",
+      "orientation": "'vertical'",
+      "position": "'center'",
+      "responsive": "true"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-divider",
+  "storyExample": {
+    "template": "",
+    "args": {
+      "color": "'tertiary'",
+      "content": "''",
+      "custom-class": "''",
+      "orientation": "'vertical'",
+      "position": "'center'",
+      "responsive": "true"
+    },
+    "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 DividerArgs {\n  color:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'high-contrast'\n    | 'success'\n    | 'warning'\n    | 'danger';\n  content: string;\n  'custom-class'?: string;\n  orientation: Orientation;\n  position: 'center' | 'end' | 'start';\n  responsive: boolean;\n}\n\nconst meta: Meta<DividerArgs> = {\n  title: 'Components/Divider',\n  component: 'modus-wc-divider',\n  args: {\n    color: 'tertiary',\n    content: '',\n    'custom-class': '',\n    orientation: 'vertical',\n    position: 'center',\n    responsive: true,\n  },\n  argTypes: {\n    color: {\n      control: { type: 'select' },\n      options: [\n        'primary',\n        'secondary',\n        'tertiary',\n        'high-contrast',\n        'success',\n        'warning',\n        'danger',\n      ],\n    },\n    content: {\n      control: 'text',\n    },\n    'custom-class': {\n      control: 'text',\n    },\n    orientation: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    position: {\n      control: { type: 'select' },\n      options: ['start', 'center', 'end'],\n    },\n    responsive: {\n      control: { type: 'boolean' },\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<DividerArgs>;\n\nconst Template: Story = {\n  render: (args) => html`\n    <modus-wc-divider\n      color=\"${args.color}\"\n      content=\"${args.content}\"\n      custom-class=\"${ifDefined(args['custom-class'])}\"\n      orientation=\"${args.orientation}\"\n      position=\"${args.position}\"\n      responsive=\"${args.responsive}\"\n      style=\"${args.orientation === 'horizontal'\n        ? 'display: flex; height: 100px'\n        : ''}\"\n    ></modus-wc-divider>\n  `,\n};\n\nexport const Default: Story = { ...Template };\n"
+  }
+}

package/versions/base/component-docs/modus-wc-dropdown-menu.json

@@ -0,0 +1,154 @@
+{
+  "description": "A customizable dropdown menu component used to render a button and toggleable menu. The component supports a 'button' and 'menu' `<slot>` for injecting custom HTML content.",
+  "properties": [
+    {
+      "name": "buttonAriaLabel",
+      "type": "string",
+      "description": "The aria-label for the dropdown button.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "buttonColor",
+      "type": "| 'primary'     | 'secondary'     | 'tertiary'     | 'warning'     | 'danger'",
+      "description": "The color variant of the button.",
+      "default": "'primary'",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "buttonSize",
+      "type": "DaisySize",
+      "description": "The size of the button.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 46
+    },
+    {
+      "name": "buttonVariant",
+      "type": "'borderless' | 'filled' | 'outlined'",
+      "description": "The variant of the button.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 49
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the host element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 52
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "If true, the button will be disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 55
+    },
+    {
+      "name": "menuBordered",
+      "type": "boolean",
+      "description": "Indicates that the menu should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 58
+    },
+    {
+      "name": "menuOffset",
+      "type": "number",
+      "description": "Distance between the button and menu in pixels.",
+      "default": "10",
+      "mutable": false,
+      "end_line": 61
+    },
+    {
+      "name": "menuPlacement",
+      "type": "PopoverPlacement",
+      "description": "The placement of the menu relative to the button.",
+      "default": "'bottom-start'",
+      "mutable": false,
+      "end_line": 64
+    },
+    {
+      "name": "menuSize",
+      "type": "ModusSize",
+      "description": "The size of the menu.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 67
+    },
+    {
+      "name": "menuVisible",
+      "type": "boolean",
+      "description": "Indicates that the menu is visible.",
+      "default": "false",
+      "mutable": true,
+      "end_line": 70
+    }
+  ],
+  "events": [
+    {
+      "name": "menuVisibilityChange",
+      "detail": "{ isVisible: boolean }",
+      "description": "Event emitted when the menuVisible prop changes.",
+      "end_line": 73
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "button",
+      "description": "Slot for button content"
+    },
+    {
+      "name": "menu",
+      "description": "Slot for menu content"
+    }
+  ],
+  "examples": {
+    "basic": "<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>",
+    "variations": [],
+    "args": {
+      "button-aria-label": "'Dropdown menu button'",
+      "button-color": "'primary'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "disabled": "false",
+      "menu-bordered": "true",
+      "menu-offset": "14",
+      "menu-placement": "'bottom-start'",
+      "menu-size": "'md'",
+      "menu-visible": "false"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "menuVisibilityChange"
+    ]
+  },
+  "tag": "modus-wc-dropdown-menu",
+  "storyExample": {
+    "template": "<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>",
+    "args": {
+      "button-aria-label": "'Dropdown menu button'",
+      "button-color": "'primary'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "disabled": "false",
+      "menu-bordered": "true",
+      "menu-offset": "14",
+      "menu-placement": "'bottom-start'",
+      "menu-size": "'md'",
+      "menu-visible": "false"
+    },
+    "argTypes": {},
+    "events": [
+      "menuVisibilityChange"
+    ],
+    "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 { DaisySize, ModusSize, PopoverPlacement } from '../types';\n\ninterface DropdownMenuArgs {\n  'button-aria-label'?: string;\n  'button-color'?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';\n  'button-size'?: DaisySize;\n  'button-variant'?: 'borderless' | 'filled' | 'outlined';\n  'custom-class'?: string;\n  disabled?: boolean;\n  'menu-bordered'?: boolean;\n  'menu-offset'?: number;\n  'menu-placement'?: PopoverPlacement;\n  'menu-size'?: ModusSize;\n  'menu-visible': boolean;\n}\n\nconst meta: Meta<DropdownMenuArgs> = {\n  title: 'Components/Dropdown Menu',\n  component: 'modus-wc-dropdown-menu',\n  args: {\n    'button-aria-label': 'Dropdown menu button',\n    'button-color': 'primary',\n    'button-size': 'md',\n    'button-variant': 'filled',\n    disabled: false,\n    'menu-bordered': true,\n    'menu-offset': 14,\n    'menu-placement': 'bottom-start',\n    'menu-size': 'md',\n    'menu-visible': false,\n  },\n  argTypes: {\n    'button-color': {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],\n    },\n    'button-size': {\n      control: { type: 'select' },\n      options: ['xs', 'sm', 'md', 'lg'],\n    },\n    'button-variant': {\n      control: { type: 'select' },\n      options: ['borderless', 'filled', 'outlined'],\n    },\n    'menu-placement': {\n      control: { type: 'select' },\n      options: [\n        'top',\n        'top-start',\n        'top-end',\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n      ],\n    },\n    'menu-size': {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['menuVisibilityChange'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<DropdownMenuArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    let selectedValue = '';\n\n    const handleItemSelect = (event: CustomEvent) => {\n      selectedValue = event.detail.value;\n      const displayElement = document.querySelector('#selected-value');\n      if (displayElement) {\n        displayElement.textContent = selectedValue;\n      }\n\n      // Close the dropdown menu when an item is selected\n      const dropdownMenu = event.target as HTMLElement;\n      const dropdownMenuElement = dropdownMenu.closest(\n        'modus-wc-dropdown-menu'\n      );\n      if (dropdownMenuElement) {\n        dropdownMenuElement.menuVisible = false;\n      }\n    };\n\n    // prettier-ignore\n    return html`\n<style>\n  /* Storybook styling */\n  div#story--components-dropdown-menu--default--primary-inner {\n    display: flex;\n    align-items: center;\n    height: 240px;\n  }\n\n  [slot=\"button\"] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .value {\n    font-size: 14px;\n    padding-top: 12px;\n  }\n</style>\n\n\n\n<modus-wc-dropdown-menu\n  button-aria-label=${ifDefined(args['button-aria-label'])}\n  button-color=${ifDefined(args['button-color'])}\n  button-size=${ifDefined(args['button-size'])}\n  button-variant=${ifDefined(args['button-variant'])}\n  custom-class=${ifDefined(args['custom-class'])}\n  ?disabled=${args.disabled}\n  ?menu-bordered=${args['menu-bordered']}\n  menu-offset=${ifDefined(args['menu-offset'])}\n  menu-placement=${ifDefined(args['menu-placement'])}\n  menu-size=${ifDefined(args['menu-size'])}\n  ?menu-visible=${args['menu-visible']}\n>\n  <div slot=\"button\">\n    Button\n    <modus-wc-icon name=\"expand_more\" size=\"sm\" />\n  </div>\n\n  <div slot=\"menu\">\n    <modus-wc-menu-item label=\"Item One\" value=\"1\" @itemSelect=${handleItemSelect}></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Two\" value=\"2\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n    <modus-wc-menu-item label=\"Item Three\" value=\"3\" @itemSelect=${handleItemSelect} /></modus-wc-menu-item>\n  </div>\n</modus-wc-dropdown-menu>\n<script>\n  // //  Adding this block to handle menu item selection to update a label and close the dropdown via JS.\n  // let selectedValue = '';\n\n  // const handleItemSelect = (event) => {\n  // //  Update the \"Selected Value\" label\n  //   selectedValue = event.detail.value;\n  //   const displayElement = document.querySelector('#selected-value');\n  //   if (displayElement) {\n  //     displayElement.textContent = selectedValue;\n  //   }\n\n  //   // Close the dropdown menu when an item is selected\n  //   const dropdownMenu = event.target;\n  //   const dropdownMenuElement = dropdownMenu.closest(\n  //     'modus-wc-dropdown-menu'\n  //   );\n  //   if (dropdownMenuElement) {\n  //     dropdownMenuElement.menuVisible = false;\n  //   }\n  // };\n  //  const menuItems = document.querySelectorAll('modus-wc-menu-item');\n  //   menuItems.forEach(item => {\n  //     item.addEventListener('itemSelect', handleItemSelect);\n  //   });\n</script>\n\n<div class=\"value\">\n  Selected Value:\n  <span id=\"selected-value\"></span>\n</div>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n"
+  }
+}

package/versions/base/component-docs/modus-wc-file-dropzone.json

@@ -0,0 +1,155 @@
+{
+  "description": "File dropzone component that allows users to drag and drop files for upload. The component supports a `<slot>` called 'dropzone' for adding custom content such as progress indicators or additional instructions within the dropzone area.",
+  "properties": [
+    {
+      "name": "acceptFileTypes",
+      "type": "string",
+      "description": "Accepted file types (e.g. '.jpg,.png' or 'image/*')",
+      "default": null,
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the file dropzone element",
+      "default": "''",
+      "mutable": false,
+      "end_line": 48
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disable the file input",
+      "default": null,
+      "mutable": false,
+      "end_line": 51
+    },
+    {
+      "name": "fileDraggedOverInstructions",
+      "type": "string",
+      "description": "Custom instructions shown when files are dragged over the dropzone",
+      "default": null,
+      "mutable": false,
+      "end_line": 54
+    },
+    {
+      "name": "includeStateIcon",
+      "type": "boolean",
+      "description": "Include state icon (upload, success, error)",
+      "default": "true",
+      "mutable": false,
+      "end_line": 57
+    },
+    {
+      "name": "instructions",
+      "type": "string",
+      "description": "Custom instructions shown as the default dropzone message",
+      "default": null,
+      "mutable": false,
+      "end_line": 60
+    },
+    {
+      "name": "invalidFileTypeMessage",
+      "type": "string",
+      "description": "Custom error message displayed when an invalid file type is selected",
+      "default": null,
+      "mutable": false,
+      "end_line": 63
+    },
+    {
+      "name": "maxFileNameLength",
+      "type": "number",
+      "description": "Maximum allowed length of filename, will show error if exceeded",
+      "default": null,
+      "mutable": false,
+      "end_line": 66
+    },
+    {
+      "name": "maxFileCount",
+      "type": "number",
+      "description": "Maximum number of files allowed, will show error if exceeded",
+      "default": null,
+      "mutable": false,
+      "end_line": 69
+    },
+    {
+      "name": "maxTotalFileSizeBytes",
+      "type": "number",
+      "description": "Maximum total file size in bytes allowed, will show error if exceeded",
+      "default": null,
+      "mutable": false,
+      "end_line": 72
+    },
+    {
+      "name": "multiple",
+      "type": "boolean",
+      "description": "Allow multiple file selection",
+      "default": null,
+      "mutable": false,
+      "end_line": 75
+    },
+    {
+      "name": "successMessage",
+      "type": "string",
+      "description": "Success message displayed when files are uploaded successfully",
+      "default": null,
+      "mutable": false,
+      "end_line": 78
+    }
+  ],
+  "events": [
+    {
+      "name": "fileSelect",
+      "detail": "FileList",
+      "description": "Event emitted when files are selected",
+      "end_line": 81
+    }
+  ],
+  "methods": [
+    {
+      "name": "reset",
+      "signature": "()",
+      "parameters": "",
+      "returnType": "void",
+      "description": "Reset the dropzone to its initial state, clearing all error and success states",
+      "end_line": 91
+    }
+  ],
+  "slots": [
+    {
+      "name": "dropzone",
+      "description": "Slot for dropzone content"
+    }
+  ],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {
+      "accept-file-types": "'.doc",
+      "disabled": "false",
+      "include-state-icon": "true",
+      "instructions": "'Drag files here or browse to upload'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "fileSelect"
+    ]
+  },
+  "tag": "modus-wc-file-dropzone",
+  "storyExample": {
+    "template": "",
+    "args": {
+      "accept-file-types": "'.doc",
+      "disabled": "false",
+      "include-state-icon": "true",
+      "instructions": "'Drag files here or browse to upload'"
+    },
+    "argTypes": {},
+    "events": [
+      "fileSelect"
+    ],
+    "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';\n\ninterface FileDropzoneArgs {\n  'accept-file-types'?: string;\n  'custom-class'?: string;\n  disabled?: boolean;\n  'file-dragged-over-instructions'?: string;\n  'include-state-icon'?: boolean;\n  instructions?: string;\n  'invalid-file-type-message'?: string;\n  'max-file-name-length'?: number;\n  'max-file-count'?: number;\n  'max-total-file-size-bytes'?: number;\n  multiple?: boolean;\n  'success-message'?: string;\n  reset?: () => Promise<void>;\n}\n\nconst meta: Meta<FileDropzoneArgs> = {\n  title: 'Components/File Dropzone',\n  component: 'modus-wc-file-dropzone',\n  args: {\n    'accept-file-types': '.doc, .docx, .pdf',\n    disabled: false,\n    'include-state-icon': true,\n    instructions: 'Drag files here or browse to upload',\n  },\n  argTypes: {\n    'accept-file-types': {\n      control: 'text',\n      description: \"Accepted file types (e.g. '.jpg,.png' or 'image/*')\",\n    },\n    'custom-class': {\n      control: 'text',\n      description: 'Custom CSS class to apply to the file dropzone element',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Disable the file input',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    instructions: {\n      control: 'text',\n      description: 'Default instructions displayed in the dropzone',\n    },\n    'invalid-file-type-message': {\n      control: 'text',\n      description:\n        'Custom error message displayed when an invalid file type is selected',\n    },\n    'max-file-name-length': {\n      control: 'number',\n      description:\n        'Maximum allowed length of filename, will show error if exceeded',\n    },\n    'max-file-count': {\n      control: 'number',\n      description:\n        'Maximum number of files allowed, will show error if exceeded',\n    },\n    'max-total-file-size-bytes': {\n      control: 'number',\n      description:\n        'Maximum total file size in bytes allowed, will show error if exceeded',\n    },\n    multiple: {\n      control: 'boolean',\n      description: 'Allow multiple file selection',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    reset: {\n      description:\n        'Reset the dropzone to its initial state, clearing all error and success states',\n      table: {\n        category: 'Methods',\n        type: { summary: '() => Promise<void>' },\n      },\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['fileSelect'],\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Default: Story = {\n  render: (args) => html`\n    <modus-wc-file-dropzone\n      accept-file-types=${ifDefined(args['accept-file-types'])}\n      custom-class=${ifDefined(args['custom-class'])}\n      ?disabled=${args.disabled}\n      file-dragged-over-instructions=${ifDefined(\n        args['file-dragged-over-instructions']\n      )}\n      ?include-state-icon=${args['include-state-icon']}\n      instructions=${ifDefined(args['instructions'])}\n      invalid-file-type-message=${ifDefined(args['invalid-file-type-message'])}\n      max-file-name-length=${ifDefined(args['max-file-name-length'])}\n      max-file-count=${ifDefined(args['max-file-count'])}\n      max-total-file-size-bytes=${ifDefined(args['max-total-file-size-bytes'])}\n      ?multiple=${args.multiple}\n      success-message=${ifDefined(args['success-message'])}\n    ></modus-wc-file-dropzone>\n  `,\n};\n\nexport const customContent: Story = {\n  args: {\n    'accept-file-types': '.pdf, .doc, .docx',\n    'success-message': 'Files uploaded successfully!',\n  },\n\n  parameters: {\n    docs: {\n      source: {\n        code: `<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n  <modus-wc-file-dropzone\n    id=\"custom-dropzone\"\n    accept-file-types=\".pdf, .doc, .docx\"\n    success-message=\"Files uploaded successfully!\"\n    instructions=\"Drag files here or browse to upload\"\n  >\n    <div slot=\"dropzone\" style=\"width: 300px; margin-top: 1rem;\">\n      <modus-wc-progress value=\"70\" label=\"70% Uploaded\"></modus-wc-progress>\n    </div>\n  </modus-wc-file-dropzone>\n\n  <modus-wc-button id=\"reset-button\">\n    Reset Dropzone\n  </modus-wc-button>\n</div>\n\n<script>\n  const dropzone = document.getElementById('custom-dropzone');\n  const resetButton = document.getElementById('reset-button');\n  \n  resetButton.addEventListener('click', () => {\n    if (dropzone?.reset) {\n      dropzone.reset();\n    }\n  });\n</script>`,\n      },\n    },\n  },\n\n  render: (args) => html`\n    <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n      <modus-wc-file-dropzone\n        id=\"custom-dropzone\"\n        accept-file-types=${ifDefined(args['accept-file-types'])}\n        success-message=${ifDefined(args['success-message'])}\n        instructions=\"Drag files here or browse to upload\"\n      >\n        <div slot=\"dropzone\" style=\"width: 300px; margin-top: 1rem;\">\n          <modus-wc-progress\n            value=\"70\"\n            label=\"70% Uploaded\"\n          ></modus-wc-progress>\n        </div>\n      </modus-wc-file-dropzone>\n\n      <modus-wc-button\n        @buttonClick=${() => {\n          const dropzone = document.getElementById(\n            'custom-dropzone'\n          ) as HTMLElement & {\n            reset?: () => Promise<void>;\n          };\n          if (dropzone?.reset) {\n            void dropzone.reset();\n          }\n        }}\n      >\n        Reset Dropzone\n      </modus-wc-button>\n    </div>\n  `,\n};\n\nexport const fileValidations: Story = {\n  args: {\n    multiple: true,\n    'max-file-name-length': 20,\n    'max-file-count': 3,\n    'max-total-file-size-bytes': 10485760, // 10MB\n    'invalid-file-type-message':\n      'Invalid file format. Please upload correct file type.',\n  },\n  render: (args) => html`\n    <modus-wc-file-dropzone\n      accept-file-types=${ifDefined(args['accept-file-types'])}\n      invalid-file-type-message=${ifDefined(args['invalid-file-type-message'])}\n      max-file-name-length=${ifDefined(args['max-file-name-length'])}\n      max-file-count=${ifDefined(args['max-file-count'])}\n      max-total-file-size-bytes=${ifDefined(args['max-total-file-size-bytes'])}\n      ?multiple=${args.multiple}\n      instructions=\"Upload files (max 3 files, 10MB total, filename ≤ 20 chars)\"\n    ></modus-wc-file-dropzone>\n  `,\n};\n\nexport const multipleFiles: Story = {\n  args: {\n    multiple: true,\n    'accept-file-types': 'image/*',\n  },\n  render: (args) => html`\n    <modus-wc-file-dropzone\n      accept-file-types=${ifDefined(args['accept-file-types'])}\n      multiple=${args.multiple}\n      instructions=\"Select multiple image files\"\n    ></modus-wc-file-dropzone>\n  `,\n};\n"
+  }
+}

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

@@ -0,0 +1,135 @@
+{
+  "description": "A draggable handle component for resizing adjacent elements",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the handle element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 28
+    },
+    {
+      "name": "leftTarget",
+      "type": "string | HTMLElement",
+      "description": "The left target element to resize (CSS selector or HTMLElement)",
+      "default": null,
+      "mutable": false,
+      "end_line": 31
+    },
+    {
+      "name": "orientation",
+      "type": "Orientation",
+      "description": "The orientation of the handle.",
+      "default": "'horizontal'",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "rightTarget",
+      "type": "string | HTMLElement",
+      "description": "The right target element to resize (CSS selector or HTMLElement)",
+      "default": null,
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "size",
+      "type": "'default' | 'lg' | 'xl' | '2xl'",
+      "description": "The size of the handle.",
+      "default": "'default'",
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "density",
+      "type": "'compact' | 'comfortable' | 'relaxed'",
+      "description": "The density/spacing of the handle container (compact: 8px, comfortable: 12px, relaxed: 16px).",
+      "default": "'comfortable'",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "defaultSplit",
+      "type": "number",
+      "description": "The initial split percentage for the left/top panel (1-100). The right/bottom panel gets the remaining percentage.",
+      "default": "50",
+      "mutable": false,
+      "end_line": 46
+    },
+    {
+      "name": "buttonSize",
+      "type": "DaisySize",
+      "description": "The size of the button.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 49
+    },
+    {
+      "name": "buttonColor",
+      "type": "| 'primary'     | 'secondary'     | 'tertiary'     | 'warning'     | 'danger'",
+      "description": "The color of the button.",
+      "default": "'tertiary'",
+      "mutable": false,
+      "end_line": 57
+    },
+    {
+      "name": "buttonVariant",
+      "type": "'borderless' | 'filled' | 'outlined'",
+      "description": "The variant of the button.",
+      "default": "'filled'",
+      "mutable": false,
+      "end_line": 60
+    },
+    {
+      "name": "type",
+      "type": "'bar' | 'button'",
+      "description": "The type of handle to display.",
+      "default": "'bar'",
+      "mutable": false,
+      "end_line": 63
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<style>${storyStyles}</style>\n${keyed(orientation, html",
+    "variations": [],
+    "args": {
+      "button-color": "'tertiary'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "custom-class": "''",
+      "default-split": "50",
+      "density": "'comfortable'",
+      "left-target": "''",
+      "orientation": "'vertical'",
+      "right-target": "''",
+      "size": "'default'",
+      "type": "'bar'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-handle",
+  "storyExample": {
+    "template": "<style>${storyStyles}</style>\n${keyed(orientation, html",
+    "args": {
+      "button-color": "'tertiary'",
+      "button-size": "'md'",
+      "button-variant": "'filled'",
+      "custom-class": "''",
+      "default-split": "50",
+      "density": "'comfortable'",
+      "left-target": "''",
+      "orientation": "'vertical'",
+      "right-target": "''",
+      "size": "'default'",
+      "type": "'bar'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html, unsafeCSS } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { DaisySize, Orientation } from '../types';\n\n// Shared styles for story demos\nconst storyStyles = unsafeCSS(`\n  .handle-demo-container {\n    display: flex;\n    gap: 0;\n  }\n\n  .handle-demo-container.horizontal {\n    height: 300px;\n  }\n\n  .handle-demo-container.vertical {\n    flex-direction: column;\n    height: 500px;\n  }\n\n  .handle-demo-panel {\n    background-color: var(--modus-wc-color-base-100);\n    overflow: auto;\n  }\n\n  .handle-demo-panel.initial-size-200 {\n    width: 200px;\n  }\n\n  .handle-demo-panel.initial-height-200 {\n    height: 200px;\n  }\n\n  .handle-demo-panel.initial-size-400 {\n    width: 400px;\n  }\n\n  .handle-demo-panel.flex-fill {\n    flex: 1;\n  }\n\n  .handle-demo-right-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n`);\n\ninterface HandleArgs {\n  'custom-class'?: string;\n  'default-split'?: number;\n  density?: 'compact' | 'comfortable' | 'relaxed';\n  'button-color'?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';\n  'button-size'?: DaisySize;\n  'button-variant'?: 'borderless' | 'filled' | 'outlined';\n  'left-target'?: string;\n  orientation?: Orientation;\n  'right-target'?: string;\n  size?: 'default' | 'lg' | 'xl' | '2xl';\n  type?: 'bar' | 'button';\n}\n\nconst meta: Meta<HandleArgs> = {\n  title: 'Components/Handle',\n  component: 'modus-wc-handle',\n  args: {\n    'button-color': 'tertiary',\n    'button-size': 'md',\n    'button-variant': 'filled',\n    'custom-class': '',\n    'default-split': 50,\n    density: 'comfortable',\n    'left-target': '',\n    orientation: 'vertical',\n    'right-target': '',\n    size: 'default',\n    type: 'bar',\n  },\n  argTypes: {\n    'custom-class': {\n      control: 'text',\n    },\n    'default-split': {\n      control: { type: 'range', min: 1, max: 100, step: 1 },\n    },\n    density: {\n      control: { type: 'select' },\n      options: ['compact', 'comfortable', 'relaxed'],\n    },\n    'button-size': {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n    'button-color': {\n      control: { type: 'select' },\n      options: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],\n    },\n    'button-variant': {\n      control: { type: 'select' },\n      options: ['borderless', 'filled', 'outlined'],\n    },\n    'left-target': {\n      control: 'text',\n    },\n    orientation: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    'right-target': {\n      control: 'text',\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['default', 'lg', 'xl', '2xl'],\n    },\n    type: {\n      control: { type: 'select' },\n      options: ['bar', 'button'],\n    },\n  },\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<HandleArgs>;\n\nconst HandleTemplate = (args?: HandleArgs) =>\n  // prettier-ignore\n  html`\n<modus-wc-handle\n  custom-class=\"${ifDefined(args?.['custom-class'])}\"\n  default-split=\"${args?.['default-split']}\"\n  density=\"${args?.density}\"\n  button-size=\"${args?.['button-size']}\"\n  button-color=\"${args?.['button-color']}\"\n  button-variant=\"${args?.['button-variant']}\"\n  left-target=\"${ifDefined(args?.['left-target'])}\"\n  orientation=\"${ifDefined(args?.orientation)}\"\n  right-target=\"${ifDefined(args?.['right-target'])}\"\n  size=\"${args?.size}\"\n  type=\"${args?.type}\"\n></modus-wc-handle>\n  `;\n\n// Helper templates for panels\nconst PanelTemplate = (\n  id: string,\n  title: string,\n  content: string,\n  className: string = ''\n) =>\n  // prettier-ignore\n  html`\n<div id=\"${id}\" class=\"handle-demo-panel ${className}\">\n  <h3>${title}</h3>\n  <p>${content}</p>\n</div>\n`;\n\nconst PanelWithKeyboardInfo = (\n  id: string,\n  title: string,\n  content: string,\n  keyboardInfo: string,\n  className: string = ''\n) =>\n  // prettier-ignore\n  html`\n<div id=\"${id}\" class=\"handle-demo-panel ${className}\">\n  <h3>${title}</h3>\n  <p>${content}</p>\n  <p><strong>Keyboard:</strong> ${keyboardInfo}</p>\n</div>\n`;\n\n// Generate unique ID for each render to avoid conflicts on docs page\nconst generateUniqueId = () => Math.random().toString(36).substring(2, 9);\n\n// Reusable render function for demos\nconst Template = (args?: HandleArgs) => {\n  const orientation = args?.orientation ?? 'horizontal';\n  const type = args?.type ?? 'bar';\n  const isHorizontal = orientation === 'horizontal';\n  const uniqueId = generateUniqueId();\n  const leftId = `panel-left-${uniqueId}`;\n  const rightId = `panel-right-${uniqueId}`;\n  // prettier-ignore\n  return html`\n<style>${storyStyles}</style>\n${keyed(orientation, html`\n<div class=\"handle-demo-container ${isHorizontal ? 'horizontal' : 'vertical'}\">\n  ${PanelWithKeyboardInfo(\n    leftId,\n    isHorizontal ? 'Left Panel' : 'Top Panel',\n    'Drag the handle to resize this panel.',\n    `Focus the handle and use ${isHorizontal ? 'Left/Right' : 'Up/Down'} arrow keys to resize (5px per press, 15px with Shift).`,\n    isHorizontal ? 'initial-size-200' : 'initial-height-200'\n  )}\n  ${HandleTemplate({\n    orientation: orientation,\n    size: args?.size ?? 'default',\n    density: args?.density ?? 'comfortable',\n    type: type,\n    'default-split': args?.['default-split'] ?? 50,\n    'custom-class': args?.['custom-class'],\n    'button-size': args?.['button-size'],\n    'button-color': args?.['button-color'],\n    'button-variant': args?.['button-variant'],\n    'left-target': `#${leftId}`,\n    'right-target': `#${rightId}`,\n  })}\n  ${PanelTemplate(\n    rightId,\n    isHorizontal ? 'Right Panel' : 'Bottom Panel',\n    'This panel will resize automatically when you drag the handle.',\n    'flex-fill'\n  )}\n</div>\n`)}`;\n};\n\nexport const Default: Story = {\n  render: (args?: HandleArgs) => Template(args),\n};\n\nexport const ButtonVariant: Story = {\n  render: (args?: HandleArgs) => {\n    return Template({\n      ...args,\n      orientation: args?.orientation ?? 'horizontal',\n      size: args?.size ?? 'default',\n      density: args?.density ?? 'comfortable',\n      type: 'button',\n    });\n  },\n  args: {\n    type: 'button',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\nButton type handle with customizable button properties.\n\n**Button Properties Available:**\n- \\`button-size\\`: sm, md, lg\n- \\`button-color\\`: primary, secondary, tertiary, warning, danger\n- \\`button-variant\\`: borderless, filled, outlined\n\n**Keyboard Navigation:**\n- Arrow keys: Move 5px per press\n- Shift + Arrow keys: Move 15px per press\n\nThe button handle provides a more prominent visual indicator compared to the bar type.\n        `,\n      },\n    },\n  },\n};\n\nexport const MultipleHandlesNested: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<style>${storyStyles}</style>\n<div class=\"handle-demo-container\" style=\"height: 600px;\">\n  ${PanelTemplate('panel-one', 'One', 'Large left panel', 'initial-size-400')}\n  ${HandleTemplate({\n    orientation: 'horizontal',\n    size: 'default',\n    density: 'comfortable',\n    type: 'bar',\n    'left-target': '#panel-one',\n    'right-target': '#right-container',\n  })}\n  <div id=\"right-container\" class=\"handle-demo-right-container\">\n    ${PanelTemplate('panel-two', 'Two', 'Top right panel', 'initial-height-200')}\n    ${HandleTemplate({\n      orientation: 'vertical',\n      size: 'default',\n      density: 'comfortable',\n      type: 'bar',\n      'left-target': '#panel-two',\n      'right-target': '#panel-three',\n    })}\n    ${PanelTemplate('panel-three', 'Three', 'Bottom right panel', 'flex-fill')}\n  </div>\n</div>\n    `;\n  },\n};\n"
+  }
+}