@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/1.1.1/component-docs/modus-wc-table.json

@@ -0,0 +1,202 @@
+{
+  "description": "",
+  "properties": [
+    {
+      "name": "editable",
+      "type": "boolean | ((row: Record<string, unknown>)",
+      "description": "Enable cell editing. Either a boolean (all rows) or a predicate per row.",
+      "default": "> boolean) =     false",
+      "mutable": false,
+      "end_line": 94
+    },
+    {
+      "name": "columns",
+      "type": "ITableColumn[]",
+      "description": "An array of column definitions.",
+      "default": null,
+      "mutable": false,
+      "end_line": 97
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 100
+    },
+    {
+      "name": "data",
+      "type": "Record<string, unknown>[]",
+      "description": "An array of data objects.",
+      "default": null,
+      "mutable": false,
+      "end_line": 103
+    },
+    {
+      "name": "density",
+      "type": "Density",
+      "description": "The density of the table, used to save space or increase readability.",
+      "default": "'comfortable'",
+      "mutable": false,
+      "end_line": 106
+    },
+    {
+      "name": "hover",
+      "type": "boolean",
+      "description": "Enable hover effect on table rows.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 109
+    },
+    {
+      "name": "currentPage",
+      "type": "number",
+      "description": "The current page number in pagination (1-based index).",
+      "default": "1",
+      "mutable": false,
+      "end_line": 112
+    },
+    {
+      "name": "paginated",
+      "type": "boolean",
+      "description": "Enable pagination for the table.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 115
+    },
+    {
+      "name": "pageSizeOptions",
+      "type": "number[]",
+      "description": "Available options for the number of rows per page.",
+      "default": "[5, 10, 15]",
+      "mutable": false,
+      "end_line": 118
+    },
+    {
+      "name": "showPageSizeSelector",
+      "type": "boolean",
+      "description": "Show/hide the page size selector in pagination.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 121
+    },
+    {
+      "name": "sortable",
+      "type": "boolean",
+      "description": "Enable sorting functionality for sortable columns.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 124
+    },
+    {
+      "name": "selectable",
+      "type": "'none' | 'single' | 'multi'",
+      "description": "Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows.",
+      "default": "'none'",
+      "mutable": false,
+      "end_line": 127
+    },
+    {
+      "name": "selectedRowIds",
+      "type": "string[]",
+      "description": "Array of selected row IDs. Used for controlled selection state.",
+      "default": null,
+      "mutable": false,
+      "end_line": 130
+    },
+    {
+      "name": "zebra",
+      "type": "boolean",
+      "description": "Zebra striped tables differentiate rows by styling them in an alternating fashion.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 133
+    },
+    {
+      "name": "caption",
+      "type": "string",
+      "description": "Accessibility caption for the table (visually hidden but available to screen readers).",
+      "default": null,
+      "mutable": false,
+      "end_line": 136
+    }
+  ],
+  "events": [
+    {
+      "name": "cellEditStart",
+      "detail": "{ rowIndex: number; colId: string; }",
+      "description": "Emits when cell editing starts.",
+      "end_line": 145
+    },
+    {
+      "name": "cellEditCommit",
+      "detail": "{ rowIndex: number; colId: string; newValue: unknown; updatedRow: Record<string, unknown",
+      "description": "Emits when cell editing is committed with the new value.",
+      "end_line": 152
+    },
+    {
+      "name": "rowClick",
+      "detail": "{ row: Record<string, unknown",
+      "description": "Emits when a row is clicked.",
+      "end_line": 169
+    },
+    {
+      "name": "sortChange",
+      "detail": "SortingState",
+      "description": "Emits when sorting changes with the new sorting state.",
+      "end_line": 174
+    },
+    {
+      "name": "paginationChange",
+      "detail": "IPaginationChangeEventDetail",
+      "description": "Emits when pagination changes with the new pagination state.",
+      "end_line": 177
+    },
+    {
+      "name": "rowSelectionChange",
+      "detail": "{ selectedRows: Record<string, unknown",
+      "description": "Emits when row selection changes with the selected rows and their IDs.",
+      "end_line": 183
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        .caption=${args.caption}\n        @rowClick=${action('rowClick')}\n        @sortChange=${action('sortChange')}\n        @paginationChange=${action('paginationChange')}\n        @rowSelectionChange=${action('rowSelectionChange')}\n        @cellEditStart=${action('cellEditStart')}\n        @cellEditCommit=${action('cellEditCommit')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\",
+    "variations": [],
+    "args": {
+      "density": "'comfortable'",
+      "hover": "false",
+      "sortable": "true",
+      "paginated": "false",
+      "show-page-size-selector": "true",
+      "custom-class": "''",
+      "selectable": "'none'",
+      "zebra": "false",
+      "current-page": "1",
+      "editable": "false"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-table",
+  "storyExample": {
+    "template": "<modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        .caption=${args.caption}\n        @rowClick=${action('rowClick')}\n        @sortChange=${action('sortChange')}\n        @paginationChange=${action('paginationChange')}\n        @rowSelectionChange=${action('rowSelectionChange')}\n        @cellEditStart=${action('cellEditStart')}\n        @cellEditCommit=${action('cellEditCommit')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\",
+    "args": {
+      "density": "'comfortable'",
+      "hover": "false",
+      "sortable": "true",
+      "paginated": "false",
+      "show-page-size-selector": "true",
+      "custom-class": "''",
+      "selectable": "'none'",
+      "zebra": "false",
+      "current-page": "1",
+      "editable": "false"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { action } from '@storybook/addon-actions';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ITableColumn } from './modus-wc-table';\nimport { IAutocompleteItem } from '../types';\nimport { Density } from '../types';\n\ninterface TableStoryArgs {\n  'custom-class'?: string;\n  'current-page'?: number;\n  'page-size-options'?: number[];\n  'selected-row-ids'?: string[];\n  'show-page-size-selector'?: boolean;\n  caption?: string;\n  columns?: ITableColumn[];\n  data?: Record<string, unknown>[];\n  density?: Density;\n  editable?: boolean;\n  hover?: boolean;\n  paginated?: boolean;\n  selectable?: 'none' | 'single' | 'multi';\n  sortable?: boolean;\n  zebra?: boolean;\n}\n\nconst meta: Meta<TableStoryArgs> = {\n  title: 'Components/Table',\n  component: 'modus-wc-table',\n\n  argTypes: {\n    columns: {\n      control: 'object',\n      description: 'An array of column definitions.',\n      table: {\n        type: {\n          detail: `\n            Interface: ITableColumn\n            Properties:\n            - accessor (string): Key to access data from row object\n            - cellRenderer? (function): Custom cell renderer (value, row) => string | HTMLElement\n            - className? (string): Class names for the column\n            - header (string | HTMLElement): Header content\n            - id (string): Unique identifier for the column\n            - width? (string): Width style (e.g., '200px', '50%')\n            - sortable? (boolean): Whether the column is sortable\n            - editor? ('text' | 'number' | 'autocomplete' | 'date' | 'custom'): Built-in editor type\n            - editorProps? (object): Extra props specific to the editor component\n            - customEditorRenderer? (function): Custom renderer for 'custom' editor\n            - editorTemplate? (string): Raw HTML string for editor, with \\`\\${value}\\` placeholder\n            - editorSetup? (function): Runs after the editor element is added to the DOM\n          `,\n        },\n      },\n    },\n    data: {\n      control: 'object',\n      description: 'An array of data objects.',\n      table: {\n        type: {\n          detail: `\n            Data should be an array of objects, where each object represents a row and each key matches a column accessor.\n\n            Example:\n            [\n              { id: '1', name: 'Alice', email: 'alice@example.com', role: 'Admin' },\n              { id: '2', name: 'Bob', email: 'bob@example.com', role: 'User' }\n            ]\n\n            - Each property in the object should correspond to a column's accessor value.\n            - The 'id' property is recommended for row identification and selection.\n          `,\n        },\n      },\n    },\n    density: {\n      control: {\n        type: 'select',\n      },\n      options: ['condensed', 'comfortable', 'relaxed'],\n      description:\n        'The density of the table, used to save space or increase readability.',\n    },\n    hover: {\n      control: 'boolean',\n      description: 'Enable hover effect on table rows.',\n      defaultValue: true,\n    },\n    sortable: {\n      control: 'boolean',\n      description: 'Enable sorting functionality for sortable columns.',\n      defaultValue: true,\n    },\n    paginated: {\n      control: 'boolean',\n      description: 'Enable pagination for the table.',\n      defaultValue: false,\n    },\n    'show-page-size-selector': {\n      control: 'boolean',\n      description: 'Show/hide the page size selector in pagination.',\n      defaultValue: true,\n    },\n    caption: {\n      control: 'text',\n      description:\n        'Accessibility caption for the table that is visually hidden but available to screen readers.',\n    },\n    'custom-class': {\n      control: 'text',\n      description: 'Custom CSS class to apply to the inner div.',\n    },\n    selectable: {\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'single', 'multi'],\n      description:\n        \"Row selection mode: 'none' for no selection, 'single' for single row, 'multi' for multiple rows.\",\n      defaultValue: 'none',\n    },\n    zebra: {\n      control: 'boolean',\n      description:\n        'Zebra striped tables differentiate rows by styling them in an alternating fashion.',\n      defaultValue: false,\n    },\n    'current-page': {\n      control: 'number',\n      description: 'The current page number in pagination (1-based index).',\n      defaultValue: 1,\n    },\n    'page-size-options': {\n      control: 'object',\n      description: 'Available options for the number of rows per page.',\n      defaultValue: [5, 10, 15],\n    },\n    'selected-row-ids': {\n      control: 'object',\n      description:\n        'Array of selected row IDs. Used for controlled selection state.',\n      defaultValue: [],\n    },\n    editable: {\n      control: 'boolean',\n      description:\n        'Enable cell editing. Either a boolean (all rows) or a predicate per row.',\n      defaultValue: false,\n    },\n  },\n};\n\nexport default meta;\ntype Story = StoryObj<TableStoryArgs>;\n\n// Helper functions\nconst createDemoColumns = (): ITableColumn[] => [\n  {\n    id: 'id',\n    header: 'ID',\n    accessor: 'id',\n    width: '60px',\n  },\n  {\n    id: 'name',\n    header: 'Name',\n    accessor: 'name',\n    width: '100px',\n  },\n  {\n    id: 'email',\n    header: 'Email',\n    accessor: 'email',\n  },\n  {\n    id: 'role',\n    header: 'Role',\n    accessor: 'role',\n  },\n];\n\nconst createSortableColumns = (): ITableColumn[] => {\n  const columns = createDemoColumns();\n  return columns.map((col) => ({ ...col, sortable: true }));\n};\n\nconst createDemoData = (count = 5): Record<string, any>[] => {\n  const data: Record<string, any>[] = [];\n  for (let i = 1; i <= count; i++) {\n    data.push({\n      id: i.toString(),\n      name: `User ${i}`,\n      email: `user${i}@example.com`,\n      role: i % 2 === 0 ? 'Admin' : 'User',\n    });\n  }\n  return data;\n};\n\nexport const Default: Story = {\n  render: (args) => {\n    const columns = args.columns || createDemoColumns();\n    const data = args.data || createDemoData();\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        .caption=${args.caption}\n        @rowClick=${action('rowClick')}\n        @sortChange=${action('sortChange')}\n        @paginationChange=${action('paginationChange')}\n        @rowSelectionChange=${action('rowSelectionChange')}\n        @cellEditStart=${action('cellEditStart')}\n        @cellEditCommit=${action('cellEditCommit')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\`User \\${i}\\`,\n        //       email: \\`user\\${i}@example.com\\`,\n        //       role: i % 2 === 0 ? 'Admin' : 'User',\n        //     });\n        //   }\n        //   return data;\n        // };\n\n        // const table = document.querySelector('modus-wc-table');\n        // table.columns = createDemoColumns();\n        // table.data = createDemoData();\n        // table.hover = 'false';\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    hover: false,\n    sortable: true,\n    paginated: false,\n    'show-page-size-selector': true,\n    'custom-class': '',\n    selectable: 'none',\n    zebra: false,\n    'current-page': 1,\n    'page-size-options': [5, 10, 15],\n    'selected-row-ids': [],\n    editable: false,\n  },\n};\n\nexport const Hover: Story = {\n  render: (args) => {\n    const columns = args.columns || createDemoColumns();\n    const data = args.data || createDemoData();\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        @rowClick=${action('rowClick')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\`User \\${i}\\`,\n        //       email: \\`user\\${i}@example.com\\`,\n        //       role: i % 2 === 0 ? 'Admin' : 'User',\n        //     });\n        //   }\n        //   return data;\n        // };\n        // const table = document.querySelector('modus-wc-table');\n        // table.columns = createDemoColumns();\n        // table.data = createDemoData();\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    hover: true,\n  },\n};\n\nexport const Sorting: Story = {\n  render: (args) => {\n    const columns = args.columns || createSortableColumns();\n    const data = args.data || createDemoData();\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        @sortChange=${action('sortChange')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createSortableColumns = () => {\n        //   const columns = createDemoColumns();\n        //   return columns.map((col) => ({ ...col, sortable: true }));\n        // };\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\`User \\${i}\\`,\n        //       email: \\`user\\${i}@example.com\\`,\n        //       role: i % 2 === 0 ? 'Admin' : 'User',\n        //     });\n        //   }\n        //   return data;\n        // };\n\n        // const table = document.querySelector('modus-wc-table');\n        // table.columns = createSortableColumns();\n        // table.data = createDemoData();\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    sortable: true,\n  },\n};\n\nexport const Pagination: Story = {\n  render: (args) => {\n    const columns = args.columns || createDemoColumns();\n    const data = args.data || createDemoData(15);\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        @paginationChange=${action('paginationChange')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\`User \\${i}\\`,\n        //       email: \\`user\\${i}@example.com\\`,\n        //       role: i % 2 === 0 ? 'Admin' : 'User',\n        //     });\n        //   }\n        //   return data;\n        // };\n\n        // const table = document.querySelector('modus-wc-table');\n        // table.columns = createDemoColumns();\n        // table.data = createDemoData(15);\n        // table.paginated = true;\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    paginated: true,\n    'show-page-size-selector': true,\n  },\n};\n\nexport const CheckBoxRowSelection: Story = {\n  render: (args) => {\n    const columns = args.columns || createDemoColumns();\n    const data = args.data || createDemoData();\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${args.editable}\n        @rowSelectionChange=${action('rowSelectionChange')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const createDemoColumns = () => [\n        //   {\n        //     id: 'id',\n        //     header: 'ID',\n        //     accessor: 'id',\n        //     width: '60px',\n        //   },\n        //   {\n        //     id: 'name',\n        //     header: 'Name',\n        //     accessor: 'name',\n        //     width: '100px',\n        //   },\n        //   {\n        //     id: 'email',\n        //     header: 'Email',\n        //     accessor: 'email',\n        //   },\n        //   {\n        //     id: 'role',\n        //     header: 'Role',\n        //     accessor: 'role',\n        //   },\n        // ];\n\n        // const createDemoData = (count = 5) => {\n        //   const data = [];\n        //   for (let i = 1; i <= count; i++) {\n        //     data.push({\n        //       id: i.toString(),\n        //       name: \\`User \\${i}\\`,\n        //       email: \\`user\\${i}@example.com\\`,\n        //       role: i % 2 === 0 ? 'Admin' : 'User',\n        //     });\n        //   }\n        //   return data;\n        // };\n\n        // const table = document.querySelector('modus-wc-table');\n        // table.columns = createDemoColumns();\n        // table.data = createDemoData();\n        // table.selectable = 'multi';\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    selectable: 'multi',\n  },\n};\n\nexport const InlineEditing: Story = {\n  render: (args) => {\n    const columns: ITableColumn[] = [\n      {\n        id: 'id',\n        header: 'ID',\n        accessor: 'id',\n        width: '20px',\n      },\n      {\n        id: 'name',\n        header: 'Name',\n        accessor: 'name',\n      },\n      {\n        id: 'status',\n        header: 'Status',\n        accessor: 'status',\n        editor: 'custom',\n        customEditorRenderer: (value, onCommit) => {\n          const container = document.createElement('div');\n          container.style.width = '100%';\n\n          const autocomplete = document.createElement('modus-wc-autocomplete');\n          autocomplete.items = [\n            { label: 'Active', value: 'Active', visibleInMenu: true },\n            { label: 'Inactive', value: 'Inactive', visibleInMenu: true },\n            { label: 'Pending', value: 'Pending', visibleInMenu: true },\n          ];\n          autocomplete.value = value as string;\n          autocomplete.style.width = '100%';\n\n          const handleItemSelect = (e: CustomEvent<IAutocompleteItem>) => {\n            onCommit(e.detail.value);\n          };\n\n          autocomplete.addEventListener(\n            'itemSelect',\n            handleItemSelect as EventListener\n          );\n          container.appendChild(autocomplete);\n\n          setTimeout(() => {\n            const input = autocomplete.querySelector('input');\n            input?.focus();\n          }, 0);\n\n          return container;\n        },\n        cellRenderer: (value) => {\n          const statusColors = {\n            Active: 'green',\n            Inactive: 'gray',\n            Pending: 'blue',\n          };\n          const color = statusColors[value as string] || 'black';\n          const span = document.createElement('span');\n          span.textContent = value as string;\n          span.style.color = color;\n          span.style.fontWeight = 'bold';\n          return span;\n        },\n      },\n      {\n        id: 'dueDate',\n        header: 'Due Date',\n        accessor: 'dueDate',\n        editor: 'custom',\n        customEditorRenderer: (value, onCommit) => {\n          const container = document.createElement('div');\n          container.style.width = '100%';\n\n          const datePicker = document.createElement('modus-wc-date');\n          datePicker.value = value as string;\n          datePicker.style.width = '100%';\n          datePicker.bordered = false;\n\n          let isCommitting = false;\n\n          const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              const input = datePicker.querySelector('input');\n              if (input && input.value && !isCommitting) {\n                isCommitting = true;\n                onCommit(input.value);\n              }\n            } else if (e.key === 'Escape') {\n              e.preventDefault();\n              if (!isCommitting) {\n                isCommitting = true;\n                onCommit(value || '');\n              }\n            } else if (e.key === 'Tab') {\n              // Allow Tab to commit and move to next cell\n              const input = datePicker.querySelector('input');\n              if (input && input.value && !isCommitting) {\n                isCommitting = true;\n                onCommit(input.value);\n              }\n            }\n          };\n\n          // Only commit when focus leaves the entire container (not just the input)\n          const handleContainerBlur = (e: FocusEvent) => {\n            const relatedTarget = e.relatedTarget as HTMLElement;\n\n            // If focus is moving within the container or date picker, don't commit\n            if (\n              relatedTarget &&\n              (container.contains(relatedTarget) ||\n                datePicker.shadowRoot?.contains(relatedTarget))\n            ) {\n              return;\n            }\n\n            const calendar = datePicker.shadowRoot?.querySelector(\n              '[class*=\"calendar\"]'\n            );\n            if (calendar) {\n              return;\n            }\n\n            const input = datePicker.querySelector('input');\n            if (input && input.value && !isCommitting) {\n              isCommitting = true;\n              setTimeout(() => onCommit(input.value), 50);\n            }\n          };\n\n          container.addEventListener('keydown', handleKeyDown);\n          container.addEventListener('focusout', handleContainerBlur);\n          container.appendChild(datePicker);\n\n          setTimeout(() => {\n            const input = datePicker.querySelector('input');\n            input?.focus();\n          }, 0);\n\n          return container;\n        },\n        cellRenderer: (value): string => {\n          if (!value) return '-';\n\n          // Parse dd-mm-yyyy format from date picker\n          const dateString = value as string;\n          const parts = dateString.split(/[-/]/);\n\n          let date: Date;\n          if (parts.length === 3 && parts[0].length <= 2) {\n            // Assume dd-mm-yyyy or dd/mm/yyyy format\n            const day = parseInt(parts[0], 10);\n            const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed\n            const year = parseInt(parts[2], 10);\n            date = new Date(year, month, day);\n          } else {\n            // Fallback to default parsing\n            date = new Date(dateString);\n          }\n\n          // Check if date is valid\n          if (isNaN(date.getTime())) {\n            return dateString; // Return original value if parsing fails\n          }\n\n          // Format date with dashes: dd-mm-yyyy\n          const formattedDay = date.getDate().toString().padStart(2, '0');\n          const formattedMonth = (date.getMonth() + 1)\n            .toString()\n            .padStart(2, '0');\n          const formattedYear = date.getFullYear();\n\n          return `${formattedDay}-${formattedMonth}-${formattedYear}`;\n        },\n      },\n    ];\n\n    const data = [\n      {\n        id: '1',\n        name: 'John Doe',\n        status: 'Active',\n        dueDate: '15-10-2025',\n      },\n      {\n        id: '2',\n        name: 'Jane Smith',\n        status: 'Inactive',\n        dueDate: '20-11-2025',\n      },\n      {\n        id: '3',\n        name: 'Bob Johnson',\n        status: 'Pending',\n        dueDate: '05-12-2025',\n      },\n    ];\n\n    return html`\n      <modus-wc-table\n        .columns=${columns}\n        .data=${data}\n        .density=${args.density}\n        .hover=${args.hover}\n        .sortable=${args.sortable}\n        .paginated=${args.paginated}\n        .showPageSizeSelector=${args['show-page-size-selector']}\n        .customClass=${args['custom-class']}\n        .selectable=${args.selectable}\n        .zebra=${args.zebra}\n        .currentPage=${args['current-page']}\n        .pageSizeOptions=${args['page-size-options']}\n        .selectedRowIds=${args['selected-row-ids']}\n        .editable=${true}\n        @cellEditStart=${action('cellEditStart')}\n        @cellEditCommit=${action('cellEditCommit')}\n      ></modus-wc-table>\n      <script>\n        // This script provides sample data and configuration for the modus-wc-table demonstration.\n        // const columns = [\n        //     {\n        //       id: 'id',\n        //       header: 'ID',\n        //       accessor: 'id',\n        //       width: '20px',\n        //     },\n        //     {\n        //       id: 'name',\n        //       header: 'Name',\n        //       accessor: 'name',\n        //       editor: 'text',\n        //     },\n        //     {\n        //       id: 'status',\n        //       header: 'Status',\n        //       accessor: 'status',\n        //       editor: 'custom',\n        //       customEditorRenderer: (value, onCommit) => {\n        //         const container = document.createElement('div');\n        //         container.style.width = '100%';\n\n        //         const autocomplete = document.createElement('modus-wc-autocomplete');\n        //         autocomplete.items = [\n        //           { label: 'Active', value: 'Active', visibleInMenu: true },\n        //           { label: 'Inactive', value: 'Inactive', visibleInMenu: true },\n        //           { label: 'Pending', value: 'Pending', visibleInMenu: true },\n        //         ];\n        //         autocomplete.value = value;\n        //         autocomplete.style.width = '100%';\n\n        //         const handleItemSelect = (e) => {\n        //           onCommit(e.detail.value);\n        //         };\n\n        //         autocomplete.addEventListener(\n        //           'itemSelect',\n        //           handleItemSelect\n        //         );\n        //         container.appendChild(autocomplete);\n\n        //         setTimeout(() => {\n        //           const input = autocomplete.querySelector('input');\n        //           input?.focus();\n        //         }, 0);\n\n        //         return container;\n        //       },\n        //       cellRenderer: (value) => {\n        //         const statusColors = {\n        //           Active: 'green',\n        //           Inactive: 'gray',\n        //           Pending: 'blue',\n        //         };\n        //         const color = statusColors[value] || 'black';\n        //         const span = document.createElement('span');\n        //         span.textContent = value;\n        //         span.style.color = color;\n        //         span.style.fontWeight = 'bold';\n        //         return span;\n        //       },\n        //     },\n        //     {\n        //       id: 'dueDate',\n        //       header: 'Due Date',\n        //       accessor: 'dueDate',\n        //       editor: 'custom',\n        //       customEditorRenderer: (value, onCommit) => {\n        //         const container = document.createElement('div');\n        //         container.style.width = '100%';\n\n        //     const datePicker = document.createElement('modus-wc-date');\n        //     datePicker.value = value;\n        //     datePicker.style.width = '100%';\n        //     datePicker.bordered = false;\n\n        //     let isCommitting = false;\n\n        //     const handleKeyDown = (e) => {\n        //       if (e.key === 'Enter') {\n        //         e.preventDefault();\n        //         const input = datePicker.querySelector('input');\n        //         if (input && input.value && !isCommitting) {\n        //           isCommitting = true;\n        //           onCommit(input.value);\n        //         }\n        //       } else if (e.key === 'Escape') {\n        //         e.preventDefault();\n        //         if (!isCommitting) {\n        //           isCommitting = true;\n        //           onCommit(value || '');\n        //         }\n        //       } else if (e.key === 'Tab') {\n        //         const input = datePicker.querySelector('input');\n        //         if (input && input.value && !isCommitting) {\n        //           isCommitting = true;\n        //           onCommit(input.value);\n        //         }\n        //       }\n        //     };\n\n        //     const handleContainerBlur = (e) => {\n        //       const relatedTarget = e.relatedTarget;\n\n        //       if (relatedTarget && (container.contains(relatedTarget) || datePicker.shadowRoot?.contains(relatedTarget))) {\n        //         return;\n        //       }\n\n        //       const calendar = datePicker.shadowRoot?.querySelector('[class*=\"calendar\"]');\n        //       if (calendar) {\n        //         return;\n        //       }\n\n        //       const input = datePicker.querySelector('input');\n        //       if (input && input.value && !isCommitting) {\n        //         isCommitting = true;\n        //         setTimeout(() => onCommit(input.value), 50);\n        //       }\n        //     };\n\n        //     container.addEventListener('keydown', handleKeyDown);\n        //     container.addEventListener('focusout', handleContainerBlur);\n        //     container.appendChild(datePicker);\n\n        //         setTimeout(() => {\n        //           const input = datePicker.querySelector('input');\n        //           input?.focus();\n        //         }, 0);\n\n        //         return container;\n        //       },\n        //       cellRenderer: (value) => {\n        //         if (!value) return '-';\n\n        //         // Parse dd-mm-yyyy format from date picker\n        //         const dateString = value;\n        //         const parts = dateString.split(/[-/]/);\n\n        //         let date;\n        //         if (parts.length === 3 && parts[0].length <= 2) {\n        //           // Assume dd-mm-yyyy or dd/mm/yyyy format\n        //           const day = parseInt(parts[0], 10);\n        //           const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed\n        //           const year = parseInt(parts[2], 10);\n        //           date = new Date(year, month, day);\n        //         } else {\n        //           // Fallback to default parsing\n        //           date = new Date(dateString);\n        //         }\n\n        //         // Check if date is valid\n        //         if (isNaN(date.getTime())) {\n        //           return dateString; // Return original value if parsing fails\n        //         }\n\n        //         // Format date with dashes: dd-mm-yyyy\n        //         const formattedDay = date.getDate().toString().padStart(2, '0');\n        //         const formattedMonth = (date.getMonth() + 1).toString().padStart(2, '0');\n        //         const formattedYear = date.getFullYear();\n\n        //         return \\`\\${formattedDay}-\\${formattedMonth}-\\${formattedYear}\\`;\n        //       },\n        //     },\n        //   ];\n\n        //   const data = [\n        //     {\n        //       id: '1',\n        //       name: 'John Doe',\n        //       status: 'Active',\n        //       dueDate: '15-10-2025',\n        //     },\n        //     {\n        //       id: '2',\n        //       name: 'Jane Smith',\n        //       status: 'Inactive',\n        //       dueDate: '20-11-2025',\n        //     },\n        //     {\n        //       id: '3',\n        //       name: 'Bob Johnson',\n        //       status: 'Pending',\n        //       dueDate: '05-12-2025',\n        //     },\n        //   ];\n        //   const table = document.querySelector('modus-wc-table');\n        //   table.columns = columns;\n        //   table.data = data;\n        //   table.editable = true;\n      </script>\n    `;\n  },\n  args: {\n    density: 'comfortable',\n    hover: false,\n    sortable: true,\n    paginated: false,\n    'show-page-size-selector': true,\n    'custom-class': '',\n    selectable: 'none',\n    zebra: false,\n    'current-page': 1,\n    'page-size-options': [5, 10, 15],\n    'selected-row-ids': [],\n  },\n};\n"
+  }
+}

package/versions/1.1.1/component-docs/modus-wc-tooltip.json

@@ -0,0 +1,94 @@
+{
+  "description": "A customizable tooltip component used to create tooltips with different content. The tooltip can be dismissed by pressing the Escape key when hovering over it. When forceOpen is enabled, the tooltip will remain open and can only be closed by setting forceOpen to false.",
+  "properties": [
+    {
+      "name": "content",
+      "type": "string",
+      "description": "The text content of the tooltip.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disables displaying the tooltip on hover",
+      "default": "false",
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "forceOpen",
+      "type": "boolean",
+      "description": "Use this attribute to force the tooltip to remain open.",
+      "default": null,
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "name": "tooltipId",
+      "type": "string",
+      "description": "The ID of the tooltip element, useful for setting the \"aria-describedby\" attribute of related elements.",
+      "default": null,
+      "mutable": false,
+      "end_line": 48
+    },
+    {
+      "name": "position",
+      "type": "'auto' | 'top' | 'right' | 'bottom' | 'left'",
+      "description": "The position that the tooltip will render in relation to the element.",
+      "default": "'auto'",
+      "mutable": false,
+      "end_line": 51
+    }
+  ],
+  "events": [
+    {
+      "name": "dismissEscape",
+      "detail": "void",
+      "description": "An event that fires when the tooltip is dismissed via Escape key",
+      "end_line": 204
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-tooltip\n        content=${ifDefined(args.content)}\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?disabled=\"${args.disabled}\"\n        ?force-open=\"${args['force-open']}\"\n        tooltip-id=\"${ifDefined(args['tooltip-id'])}\"\n        position=${ifDefined(args.position)}\n      >\n        <modus-wc-badge>Hover</modus-wc-badge>\n      </modus-wc-tooltip>",
+    "variations": [],
+    "args": {
+      "content": "'Tooltip content'",
+      "position": "'auto'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "dismissEscape"
+    ]
+  },
+  "tag": "modus-wc-tooltip",
+  "storyExample": {
+    "template": "<modus-wc-tooltip\n        content=${ifDefined(args.content)}\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?disabled=\"${args.disabled}\"\n        ?force-open=\"${args['force-open']}\"\n        tooltip-id=\"${ifDefined(args['tooltip-id'])}\"\n        position=${ifDefined(args.position)}\n      >\n        <modus-wc-badge>Hover</modus-wc-badge>\n      </modus-wc-tooltip>",
+    "args": {
+      "content": "'Tooltip content'",
+      "position": "'auto'"
+    },
+    "argTypes": {},
+    "events": [
+      "dismissEscape"
+    ],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface TooltipArgs {\n  content?: string;\n  'custom-class'?: string;\n  disabled?: boolean;\n  'force-open'?: boolean;\n  'tooltip-id'?: string;\n  position: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n}\n\nconst meta: Meta<TooltipArgs> = {\n  title: 'Components/Tooltip',\n  component: 'modus-wc-tooltip',\n  args: {\n    content: 'Tooltip content',\n    position: 'auto',\n  },\n  argTypes: {\n    position: {\n      control: { type: 'select' },\n      options: ['auto', 'top', 'right', 'left', 'bottom'],\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `\nA customizable tooltip component used to create tooltips with different content.\n\\nThe component supports a \\`<slot>\\` for injecting custom tooltip content.\n\n### Features\n- **Escape Key Dismissal**: Tooltips can be dismissed by pressing the Escape key\n- **Auto-positioning**: Automatically positions the tooltip to avoid viewport edges\n- **Customizable**: Supports custom CSS classes and positioning\n\n### Keyboard Interaction\n- Press **Escape** to dismiss the tooltip while it's visible\n- The tooltip will automatically re-enable on mouse enter\n        `,\n      },\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<TooltipArgs>;\n\nconst Template: Story = {\n  parameters: {\n    actions: {\n      handles: ['dismissEscape'],\n    },\n  },\n  render: (args) => {\n    // prettier-ignore\n    return html`\n      <modus-wc-tooltip\n        content=${ifDefined(args.content)}\n        custom-class=\"${ifDefined(args['custom-class'])}\"\n        ?disabled=\"${args.disabled}\"\n        ?force-open=\"${args['force-open']}\"\n        tooltip-id=\"${ifDefined(args['tooltip-id'])}\"\n        position=${ifDefined(args.position)}\n      >\n        <modus-wc-badge>Hover</modus-wc-badge>\n      </modus-wc-tooltip>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 tooltip positioning was handled by Popper.js. In 2.0, positioning is handled using CSS.\n  - The \\`text\\` prop has been renamed to \\`content\\`.\n\n#### Prop Mapping\n\n| 1.0 Prop    | 2.0 Prop    | Notes                                    |\n|-------------|-------------|------------------------------------------|\n| aria-label  | aria-label  |                                          |\n| disabled    | disabled    |                                          |\n| position    | position    | Added \\`auto\\` option as default value   |\n| text        | content     |                                          |\n        `,\n      },\n    },\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

package/versions/1.1.1/component-docs/modus-wc-typography.json

@@ -0,0 +1,78 @@
+{
+  "description": "A customizable typography component used to render text with different sizes, hierarchy, and weights. Note: - When using heading elements (h1-h6), the default heading CSS styling can be accessed without modifying the default size (size=\"md\") and weight (weight=\"normal\") properties. Default styling can be overridden by providing your own custom values for the size or weight properties from the available options. - If both slot content and `label` are provided, only the slot content will be rendered - Use the `label` prop when you need to dynamically update the text.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the typography element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 34
+    },
+    {
+      "name": "hierarchy",
+      "type": "TypographyHierarchy",
+      "description": "The hierarchy of the typography component.",
+      "default": "'p'",
+      "mutable": false,
+      "end_line": 37
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text label to display.",
+      "default": null,
+      "mutable": false,
+      "end_line": 40
+    },
+    {
+      "name": "size",
+      "type": "TypographySize",
+      "description": "The size of the font.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 43
+    },
+    {
+      "name": "weight",
+      "type": "TypographyWeight",
+      "description": "The weight of the text.",
+      "default": "'normal'",
+      "mutable": false,
+      "end_line": 46
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-typography\n  custom-class=${ifDefined(args['custom-class'])}\n  hierarchy=${args.hierarchy}\n  label=${args.label}\n  size=${ifDefined(args.size)}\n  weight=${ifDefined(args.weight)}\n  ></modus-wc-typography>",
+    "variations": [],
+    "args": {
+      "hierarchy": "'p'",
+      "label": "content",
+      "size": "'md'",
+      "weight": "'normal'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-typography",
+  "storyExample": {
+    "template": "<modus-wc-typography\n  custom-class=${ifDefined(args['custom-class'])}\n  hierarchy=${args.hierarchy}\n  label=${args.label}\n  size=${ifDefined(args.size)}\n  weight=${ifDefined(args.weight)}\n  ></modus-wc-typography>",
+    "args": {
+      "hierarchy": "'p'",
+      "label": "content",
+      "size": "'md'",
+      "weight": "'normal'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  TypographyHierarchy,\n  TypographySize,\n  TypographyWeight,\n} from './modus-wc-typography';\n\nconst content = 'The quick brown fox jumps over the lazy dog';\n\ninterface TypographyArgs {\n  'custom-class'?: string;\n  hierarchy: TypographyHierarchy;\n  label: string;\n  size?: TypographySize;\n  weight?: TypographyWeight;\n}\n\nconst meta: Meta<TypographyArgs> = {\n  title: 'Components/Typography',\n  component: 'modus-wc-typography',\n  args: {\n    hierarchy: 'p',\n    label: content,\n    size: 'md',\n    weight: 'normal',\n  },\n  argTypes: {\n    hierarchy: {\n      control: { type: 'select' },\n      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],\n    },\n    size: {\n      control: { type: 'select' },\n      options: [\n        'xs',\n        'sm',\n        'md',\n        'lg',\n        'xl',\n        '2xl',\n        '3xl',\n        '4xl',\n        '5xl',\n        '6xl',\n        '7xl',\n        '8xl',\n        '9xl',\n      ],\n    },\n    weight: {\n      control: { type: 'select' },\n      options: ['light', 'normal', 'semibold', 'bold'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<TypographyArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-typography\n  custom-class=${ifDefined(args['custom-class'])}\n  hierarchy=${args.hierarchy}\n  label=${args.label}\n  size=${ifDefined(args.size)}\n  weight=${ifDefined(args.weight)}\n  ></modus-wc-typography>\n   `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const Heading1: Story = {\n  ...Template,\n  args: { hierarchy: 'h1', label: content },\n};\n\nexport const Heading2: Story = {\n  ...Template,\n  args: { hierarchy: 'h2', label: content },\n};\n\nexport const Heading3: Story = {\n  ...Template,\n  args: { hierarchy: 'h3', label: content },\n};\n\nexport const Heading4: Story = {\n  ...Template,\n  args: { hierarchy: 'h4', label: content },\n};\n\nexport const Heading5: Story = {\n  ...Template,\n  args: { hierarchy: 'h5', label: content },\n};\n\nexport const Heading6: Story = {\n  ...Template,\n  args: { hierarchy: 'h6', label: content },\n};\n\nexport const Paragraph: Story = {\n  ...Template,\n  args: { hierarchy: 'p', label: content },\n};\n\nexport const WithLabel: Story = {\n  ...Template,\n  args: {\n    hierarchy: 'p',\n    label: 'This text is set via the label prop',\n  },\n};\n\nexport const WithSlot: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-typography\n  custom-class=${ifDefined(args['custom-class'])}\n  hierarchy=${args.hierarchy}\n  size=${ifDefined(args.size)}\n  weight=${ifDefined(args.weight)}\n>\n  This <u>text</u> is set using <em>slot</em>\n</modus-wc-typography>\n  `;\n  },\n};\n"
+  }
+}

package/versions/1.1.1/docs/_all_docs.json

@@ -0,0 +1,15 @@
+{
+  "total": 10,
+  "docs": [
+    "accessibility",
+    "angular",
+    "form-inputs",
+    "getting-started",
+    "modus-figma-mcp-integration-guide",
+    "modus-icon-usage",
+    "react",
+    "styling",
+    "testing",
+    "vue"
+  ]
+}