@trimble-oss/moduswebcomponents-mcp 1.0.0

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

@@ -0,0 +1,211 @@
+{
+  "description": "A customizable input component used to create time inputs.",
+  "properties": [
+    {
+      "name": "autoComplete",
+      "type": "'on' | 'off'",
+      "description": "Hint for form autofill feature.",
+      "default": null,
+      "mutable": false,
+      "end_line": 30
+    },
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "description": "Indicates that the input should have a border.",
+      "default": "true",
+      "mutable": false,
+      "end_line": 33
+    },
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the input.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 36
+    },
+    {
+      "name": "datalistOptions",
+      "type": "string[]",
+      "description": "The options to display in the time input dropdown. Options must be in `HH:mm` or `HH:mm:ss` format.",
+      "default": "[]",
+      "mutable": false,
+      "end_line": 39
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Whether the form control is disabled.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 42
+    },
+    {
+      "name": "feedback",
+      "type": "IInputFeedbackProp",
+      "description": "Feedback to render below the input.",
+      "default": null,
+      "mutable": false,
+      "end_line": 45
+    },
+    {
+      "name": "inputId",
+      "type": "string",
+      "description": "The ID of the input element.",
+      "default": null,
+      "mutable": false,
+      "end_line": 48
+    },
+    {
+      "name": "inputTabIndex",
+      "type": "number",
+      "description": "Determine the control's relative ordering for sequential focus navigation (typically with the Tab key).",
+      "default": null,
+      "mutable": false,
+      "end_line": 51
+    },
+    {
+      "name": "datalistId",
+      "type": "string",
+      "description": "ID of a `<datalist>` element that contains pre-defined time options. The value must be the ID of a `<datalist>` element in the same document.",
+      "default": null,
+      "mutable": true,
+      "end_line": 57
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text to display within the label.",
+      "default": null,
+      "mutable": false,
+      "end_line": 60
+    },
+    {
+      "name": "max",
+      "type": "string",
+      "description": "Maximum value. Format: `HH:mm`, `HH:mm:ss`.",
+      "default": null,
+      "mutable": false,
+      "end_line": 63
+    },
+    {
+      "name": "min",
+      "type": "string",
+      "description": "Minimum value. Format: `HH:mm`, `HH:mm:ss.`",
+      "default": null,
+      "mutable": false,
+      "end_line": 66
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+      "default": null,
+      "mutable": false,
+      "end_line": 69
+    },
+    {
+      "name": "readOnly",
+      "type": "boolean",
+      "description": "Whether the value is editable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 72
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "A value is required for the form to be submittable.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 75
+    },
+    {
+      "name": "showSeconds",
+      "type": "boolean",
+      "description": "Displays the time input format as `HH:mm:ss` if `true`. Internally sets the `step` to 1 second. If a `step` value is provided, it will override this attribute.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 82
+    },
+    {
+      "name": "size",
+      "type": "ModusSize",
+      "description": "The size of the input.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 85
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "description": "Specifies the granularity that the `value` must adhere to. Value of step given in seconds. Default value is 60 seconds. Overrides the `seconds` attribute if both are provided.",
+      "default": null,
+      "mutable": false,
+      "end_line": 92
+    },
+    {
+      "name": "value",
+      "type": "string",
+      "description": "The value of the time input. Always in 24-hour format that includes leading zeros: `HH:mm` or `HH:mm:ss`, regardless of input format which is likely to be selected based on user's locale (or by the user agent). If time includes seconds the format is always `HH:mm:ss`.",
+      "default": "''",
+      "mutable": true,
+      "end_line": 101
+    }
+  ],
+  "events": [
+    {
+      "name": "inputBlur",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input loses focus.",
+      "end_line": 104
+    },
+    {
+      "name": "inputChange",
+      "detail": "Event",
+      "description": "Event emitted when the input value changes.",
+      "end_line": 107
+    },
+    {
+      "name": "inputFocus",
+      "detail": "FocusEvent",
+      "description": "Event emitted when the input gains focus.",
+      "end_line": 110
+    }
+  ],
+  "methods": [],
+  "slots": [],
+  "examples": {
+    "basic": "<modus-wc-time-input\n  aria-label=\"Example time input\"\n  datalist-id=\"datalist-id-1\"\n></modus-wc-time-input>\n<datalist id=\"datalist-id-1\">\n  <option value=\"06:00\"></option>\n  <option value=\"12:00\"></option>\n  <option value=\"17:00\"></option>\n</datalist>",
+    "variations": [],
+    "args": {
+      "disabled": "false",
+      "label": "'Label'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ]
+  },
+  "tag": "modus-wc-time-input",
+  "storyExample": {
+    "template": "<modus-wc-time-input\n  aria-label=\"Example time input\"\n  datalist-id=\"datalist-id-1\"\n></modus-wc-time-input>\n<datalist id=\"datalist-id-1\">\n  <option value=\"06:00\"></option>\n  <option value=\"12:00\"></option>\n  <option value=\"17:00\"></option>\n</datalist>",
+    "args": {
+      "disabled": "false",
+      "label": "'Label'",
+      "size": "'md'"
+    },
+    "argTypes": {},
+    "events": [
+      "inputBlur",
+      "inputChange",
+      "inputFocus"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { IInputFeedbackProp, ModusSize } from '../types';\n\n// const timeOptions = ['08:00', '12:00', '17:00'];\n\ninterface TimeInputArgs {\n  'auto-complete'?: 'on' | 'off';\n  bordered?: boolean;\n  'custom-class'?: string;\n  'datalist-id'?: string;\n  'datalist-options'?: string[];\n  disabled?: boolean;\n  feedback?: IInputFeedbackProp;\n  'input-id'?: string;\n  'input-tab-index'?: number;\n  label?: string;\n  max?: string;\n  min?: string;\n  name?: string;\n  'read-only'?: boolean;\n  required?: boolean;\n  'show-seconds'?: boolean;\n  size?: ModusSize;\n  step?: number;\n  value: string;\n}\n\nconst meta: Meta<TimeInputArgs> = {\n  title: 'Components/Forms/Time Input',\n  component: 'modus-wc-time-input',\n  args: {\n    disabled: false,\n    label: 'Label',\n    size: 'md',\n  },\n  argTypes: {\n    'auto-complete': {\n      control: { type: 'select' },\n      options: ['on', 'off'],\n    },\n    feedback: {\n      description: 'Feedback prop for input components',\n      table: {\n        type: {\n          detail: `\n            Interface: IInputFeedbackProp\n            Properties:\n            - level ('error' | 'info' | 'success' | 'warning'): The feedback level\n            - message (string, optional): The feedback message\n          `,\n        },\n      },\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['sm', 'md', 'lg'],\n    },\n  },\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['inputBlur', 'inputChange', 'inputFocus'],\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<TimeInputArgs>;\n\nconst Template: Story = {\n  render: (args) => html`\n    <modus-wc-time-input\n      aria-label=\"Time input\"\n      auto-complete=${ifDefined(args['auto-complete'])}\n      bordered=${ifDefined(args.bordered)}\n      custom-class=${ifDefined(args['custom-class'])}\n      datalist-id=${ifDefined(args['datalist-id'])}\n      ?disabled=${args.disabled}\n      .feedback=${args.feedback}\n      input-id=${ifDefined(args['input-id'])}\n      input-tab-index=${ifDefined(args['input-tab-index'])}\n      label=${ifDefined(args.label)}\n      max=${ifDefined(args.max)}\n      min=${ifDefined(args.min)}\n      name=${ifDefined(args.name)}\n      ?read-only=${args['read-only']}\n      ?required=${args.required}\n      show-seconds=${ifDefined(args['show-seconds'])}\n      size=${ifDefined(args.size)}\n      step=${ifDefined(args.step)}\n      .datalistOptions=${args['datalist-options']}\n      .value=${args.value}\n    ></modus-wc-time-input>\n  `,\n};\n\nexport const Default: Story = { ...Template };\n\nexport const WithSeconds: Story = {\n  ...Template,\n  args: {\n    'show-seconds': true,\n  },\n};\n\nexport const WithDatalist: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<modus-wc-time-input\n  aria-label=\"Example time input\"\n  datalist-id=\"datalist-id-1\"\n></modus-wc-time-input>\n<datalist id=\"datalist-id-1\">\n  <option value=\"06:00\"></option>\n  <option value=\"12:00\"></option>\n  <option value=\"17:00\"></option>\n</datalist>\n    `;\n  },\n};\n\nexport const WithDatalistOptions: Story = {\n  render: () => {\n    // prettier-ignore\n    return html`\n<script>\n  document.addEventListener('DOMContentLoaded', () => {\n    // Example of programmatically adding 'datalistOptions'\n    const preferredTimes = ['09:30', '12:00', '17:30'];\n    document.querySelector('#time-input-with-options').datalistOptions = preferredTimes;\n  });\n</script>\n<modus-wc-time-input\n  aria-label=\"Example time input\"\n  id=\"time-input-with-options\"\n></modus-wc-time-input>\n    `;\n  },\n};\n\nconst errorFeedback: IInputFeedbackProp = {\n  level: 'error',\n  message: 'Value is required.',\n};\n\nexport const WithErrorFeedback: Story = {\n  ...Template,\n  args: { feedback: errorFeedback, required: true },\n  parameters: {\n    docs: {\n      source: {\n        transform: (src) => `${src}\n<script>\n  const timeInputElement = document.querySelector('modus-wc-time-input');\n  timeInputElement.feedback = {\n    level: 'error',\n    message: 'Value is required.'\n  };\n</script>`,\n      },\n    },\n  },\n};\n\nexport const ShadowDomParent: Story = {\n  render: (args) => {\n    // Create a unique shadow host for time-input component\n    if (!customElements.get('time-input-shadow-host')) {\n      const TimeInputShadowHost = createShadowHostClass<TimeInputArgs>({\n        componentTag: 'modus-wc-time-input',\n        propsMapper: (v: TimeInputArgs, el: HTMLElement) => {\n          const timeInputEl = el as unknown as {\n            autoComplete: string;\n            bordered: boolean;\n            customClass: string;\n            datalistId: string;\n            datalistOptions: string[];\n            disabled: boolean;\n            feedback: IInputFeedbackProp;\n            inputId: string;\n            inputTabIndex: number;\n            label: string;\n            max: string;\n            min: string;\n            name: string;\n            readOnly: boolean;\n            required: boolean;\n            showSeconds: boolean;\n            size: string;\n            step: number;\n            value: string;\n          };\n          timeInputEl.autoComplete = v['auto-complete'] ?? '';\n          timeInputEl.bordered = v['bordered'] ?? true;\n          timeInputEl.customClass = v['custom-class'] || '';\n          timeInputEl.datalistId = v['datalist-id'] ?? '';\n          if (v['datalist-options']) {\n            timeInputEl.datalistOptions = v['datalist-options']; // Conditional assignment only if provided\n          }\n          timeInputEl.disabled = Boolean(v.disabled);\n\n          timeInputEl.inputId = v['input-id'] ?? '';\n          timeInputEl.inputTabIndex = v['input-tab-index'] ?? 0;\n          timeInputEl.label = v.label ?? '';\n          timeInputEl.max = v.max ?? '';\n          timeInputEl.min = v.min ?? '';\n          timeInputEl.name = v.name ?? '';\n          timeInputEl.readOnly = Boolean(v['read-only']);\n          timeInputEl.required = Boolean(v.required);\n          timeInputEl.showSeconds = Boolean(v['show-seconds']);\n          timeInputEl.size = v.size ?? 'md';\n          // Only set step if explicitly provided, otherwise let component calculate from showSeconds\n          if (v.step !== undefined) {\n            timeInputEl.step = v.step;\n          }\n          timeInputEl.value = v.value ?? '';\n        },\n      });\n      customElements.define('time-input-shadow-host', TimeInputShadowHost);\n    }\n\n    return html`<time-input-shadow-host\n      .props=${{ ...args }}\n    ></time-input-shadow-host>`;\n  },\n};\n\nexport const Migration: Story = {\n  parameters: {\n    docs: {\n      description: {\n        story: `\n#### Breaking Changes\n\n  - In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled\n  input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for\n  additional info and examples.\n  - Size values have changed from verbose names (\\`medium\\`, \\`large\\`) to abbreviations (\\`sm\\`, \\`md\\`, \\`lg\\`).\n\n#### Prop Mapping\n\n| 1.0 Prop                | 2.0 Prop            | Notes                                   |\n|-------------------------|---------------------|-----------------------------------------|\n| allowed-chars-regex     |                     | Not carried over                        |\n| ampm                    |                     | Not carried over                        |\n| aria-label              | aria-label          |                                         |\n| auto-focus-input        | autofocus           |                                         |\n| auto-format             |                     | Not carried over                        |\n| disable-validation      |                     | Not carried over                        |\n| disabled                | disabled            |                                         |\n| error-text              | feedback.message    | Use \\`feedback\\` level                  |\n| helper-text             |                     | Not carried over                        |\n| label                   | label               |                                         |\n| max                     | max                 |                                         |\n| min                     | min                 |                                         |\n| placeholder             |                     | Not carried over                        |\n| read-only               | read-only           |                                         |\n| required                | required            |                                         |\n| size                    | size                | \\`medium\\` → \\`md\\`, \\`large\\` → \\`lg\\` |\n| valid-text              | feedback.message    | Use \\`feedback\\` level                  |\n| value                   | value               |                                         |\n\n#### Event Mapping\n\n| 1.0 Event      | 2.0 Event   | Notes                                                |\n|----------------|-------------|------------------------------------------------------|\n| timeInputBlur  | inputBlur   |                                                      |\n| valueChange    | inputChange |                                                      |\n        `,\n      },\n    },\n    // To hide the actual story rendering and only show docs:\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  // Simple render function or leave it empty\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

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

@@ -0,0 +1,56 @@
+{
+  "description": "A customizable toast component used to stack elements, positioned on the corner of a page. The component supports a `<slot>` for injecting additional custom content inside the toast.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Additional classes for custom styling.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "delay",
+      "type": "number",
+      "description": "Time taken to dismiss the toast in milliseconds",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "position",
+      "type": "ToastPosition",
+      "description": "The position of the toast in the parent container.",
+      "default": "'top-end'",
+      "mutable": false,
+      "end_line": 38
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {
+      "position": "'top-end'"
+    },
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-toast",
+  "storyExample": {
+    "template": "",
+    "args": {
+      "position": "'top-end'"
+    },
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ToastPosition } from './modus-wc-toast';\n\ninterface ToastArgs {\n  'custom-class'?: string;\n  delay?: number;\n  position?: ToastPosition;\n}\n\nconst meta: Meta<ToastArgs> = {\n  title: 'Components/Toast',\n  component: 'modus-wc-toast',\n  args: {\n    position: 'top-end',\n  },\n  argTypes: {\n    position: {\n      control: { type: 'select' },\n      options: [\n        'top-start',\n        'top-center',\n        'top-end',\n        'middle-start',\n        'middle-center',\n        'middle-end',\n        'bottom-start',\n        'bottom-center',\n        'bottom-end',\n      ],\n    },\n  },\n  parameters: {\n    layout: 'padded',\n    viewport: 'responsive',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ToastArgs>;\n\nconst Template: Story = {\n  // prettier-ignore\n  render: (args) => html`\n<div style=\"height: 200px;\">\n  <modus-wc-toast\n    custom-class=${ifDefined(args['custom-class'])}\n    delay=${ifDefined(args.delay)}\n    position=${ifDefined(args.position)}\n  >\n    <modus-wc-alert alert-title=\"Message sent successfully!\" variant=\"success\"></modus-wc-alert>\n  </modus-wc-toast>\n</div>\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 toast included built-in dismiss functionality with delay timer and dismiss button. 2.0 components focus on positioning only.\n  - In 1.0 toast included built-in icons. 2.0 components rely on slotted content for visual elements.\n  - 2.0 toast components no longer support built-in types/variants, use slotted \\`modus-wc-alert\\` components instead.\n\n#### Prop Mapping\n\n| 1.0 Prop        | 2.0 Prop    | Notes                                      |\n|-----------------|-------------|--------------------------------------------|\n| aria-label      | aria-label  |                                            |\n| delay           |             | Not carried over                           |\n| dismissible     |             | Not carried over                           |\n| retain-element  |             | Not carried over                           |\n| role            |             | Not carried over                           |\n| show-icon       |             | Not carried over                           |\n| type            |             | Not carried over, use slotted content      |\n\n#### Event Mapping\n\n| 1.0 Event     | 2.0 Event | Notes            |\n|---------------|-----------|------------------|\n| dismissClick  |           | Not carried over |\n        `,\n      },\n    },\n    // To hide the actual story rendering and only show docs:\n    controls: { disable: true },\n    canvas: { disable: true },\n  },\n  // Simple render function or leave it empty\n  render: () => html`<div></div>`,\n};\n"
+  }
+}

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

@@ -0,0 +1,44 @@
+{
+  "description": "A customizable toolbar component used to organize content across the entire page. This component provides 'start', 'center', and 'end' `<slot>` elements for inserting custom HTML.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the outer div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 20
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [
+    {
+      "name": "start",
+      "description": "Slot for start content"
+    },
+    {
+      "name": "center",
+      "description": "Slot for center content"
+    },
+    {
+      "name": "end",
+      "description": "Slot for end content"
+    }
+  ],
+  "examples": {
+    "basic": "<modus-wc-toolbar custom-class=\"${ifDefined(args['custom-class'])}\">\n  <div slot=\"start\">Start</div>\n  <div slot=\"center\">Center</div>\n  <div slot=\"end\">End</div>\n</modus-wc-toolbar>",
+    "variations": [],
+    "args": {},
+    "argTypes": {},
+    "usage": []
+  },
+  "tag": "modus-wc-toolbar",
+  "storyExample": {
+    "template": "<modus-wc-toolbar custom-class=\"${ifDefined(args['custom-class'])}\">\n  <div slot=\"start\">Start</div>\n  <div slot=\"center\">Center</div>\n  <div slot=\"end\">End</div>\n</modus-wc-toolbar>",
+    "args": {},
+    "argTypes": {},
+    "events": [],
+    "fullContent": "import { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\ninterface ToolbarArgs {\n  'custom-class'?: string;\n}\n\nconst meta: Meta<ToolbarArgs> = {\n  title: 'Components/Toolbar',\n  component: 'modus-wc-toolbar',\n  parameters: {\n    layout: 'padded',\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<ToolbarArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<modus-wc-toolbar custom-class=\"${ifDefined(args['custom-class'])}\">\n  <div slot=\"start\">Start</div>\n  <div slot=\"center\">Center</div>\n  <div slot=\"end\">End</div>\n</modus-wc-toolbar>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n"
+  }
+}

package/versions/base/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": 194
+    }
+  ],
+  "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/base/component-docs/modus-wc-typography.json

@@ -0,0 +1,73 @@
+{
+  "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.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the typography element.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 29
+    },
+    {
+      "name": "hierarchy",
+      "type": "TypographyHierarchy",
+      "description": "The hierarchy of the typography component.",
+      "default": "'p'",
+      "mutable": false,
+      "end_line": 32
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "The text label to display.",
+      "default": null,
+      "mutable": false,
+      "end_line": 35
+    },
+    {
+      "name": "size",
+      "type": "TypographySize",
+      "description": "The size of the font.",
+      "default": "'md'",
+      "mutable": false,
+      "end_line": 38
+    },
+    {
+      "name": "weight",
+      "type": "TypographyWeight",
+      "description": "The weight of the text.",
+      "default": "'normal'",
+      "mutable": false,
+      "end_line": 41
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "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"
+  }
+}

package/versions/base/component-docs/modus-wc-utility-panel.json

@@ -0,0 +1,86 @@
+{
+  "description": "",
+  "properties": [
+    {
+      "name": "expanded",
+      "type": "boolean",
+      "description": "The panel is expanded or closed",
+      "default": "false",
+      "mutable": false,
+      "end_line": 18
+    },
+    {
+      "name": "pushContent",
+      "type": "boolean",
+      "description": "Determines if the panel pushes content or displays an overlay.",
+      "default": "false",
+      "mutable": false,
+      "end_line": 21
+    },
+    {
+      "name": "targetElement",
+      "type": "HTMLElement",
+      "description": "Target element reference to push content when panel opens",
+      "default": null,
+      "mutable": false,
+      "end_line": 24
+    }
+  ],
+  "events": [
+    {
+      "name": "panelOpened",
+      "detail": "void",
+      "description": "An event that fires when the panel is opened.",
+      "end_line": 27
+    },
+    {
+      "name": "panelClosed",
+      "detail": "void",
+      "description": "An event that fires when the panel is closed.",
+      "end_line": 30
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "header",
+      "description": "Slot for header content"
+    },
+    {
+      "name": "body",
+      "description": "Slot for body content"
+    },
+    {
+      "name": "footer",
+      "description": "Slot for footer content"
+    }
+  ],
+  "examples": {
+    "basic": null,
+    "variations": [],
+    "args": {
+      "expanded": "false",
+      "push-content": "true"
+    },
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "panelOpened",
+      "panelClosed"
+    ]
+  },
+  "tag": "modus-wc-utility-panel",
+  "storyExample": {
+    "template": "",
+    "args": {
+      "expanded": "false",
+      "push-content": "true"
+    },
+    "argTypes": {},
+    "events": [
+      "panelOpened",
+      "panelClosed"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\n\ninterface UtilityPanelArgs {\n  expanded: boolean;\n  'push-content': boolean;\n}\n\nconst meta: Meta<UtilityPanelArgs> = {\n  title: 'Components/Utility Panel',\n  component: 'modus-wc-utility-panel',\n  args: {\n    expanded: false,\n    'push-content': true,\n  },\n  argTypes: {\n    expanded: {\n      control: { type: 'boolean' },\n    },\n    'push-content': {\n      control: { type: 'boolean' },\n    },\n  },\n  decorators: [\n    withActions,\n    (story) => {\n      // Set up targetElement after story renders\n      requestAnimationFrame(() => {\n        const panels = document.querySelectorAll('modus-wc-utility-panel');\n        panels.forEach((panel) => {\n          const container = panel.closest('.demo-container');\n          if (container) {\n            const contentElement = container.querySelector('.main-content');\n            if (contentElement && panel) {\n              (\n                panel as HTMLElement & { targetElement: HTMLElement }\n              ).targetElement = contentElement as HTMLElement;\n            }\n          }\n        });\n      });\n      return story();\n    },\n  ],\n  parameters: {\n    actions: {\n      handles: ['panelOpened', 'panelClosed'],\n    },\n    docs: {\n      description: {\n        component:\n          \"A utility panel component that slides in from the right side of the screen. It can either push content or display as an overlay.\\n\\nThe component supports `<slot>` called 'header' for panel title content, 'body' for main content area, and 'footer' for action buttons or additional controls.\",\n      },\n    },\n    layout: 'fullscreen',\n  },\n};\n\n// Shared CSS styles as string for documentation\nconst utilityPanelStyles = `\n  .demo-container {\n    height: 100vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: white;\n  }\n\n  modus-wc-navbar {\n    flex-shrink: 0;\n  }\n\n  .main-content-wrapper {\n    flex: 1;\n    overflow: hidden;\n    position: relative;\n    background: var(--modus-wc-color-base-page);\n  }\n\n  .main-content {\n    height: 100%;\n    padding: 20px;\n    background: var(--modus-wc-color-base-page);\n    overflow: auto;\n  }\n\n  .main-content p,\n  .modus-wc-utility-panel-body p {\n    margin-bottom: var(--modus-wc-spacing-2xl);\n  }\n\n  .modus-wc-utility-panel-header {\n    font-size: 18px;\n    font-weight: 600;\n  }\n\n  .modus-wc-utility-panel-body {\n    padding: 20px 0;\n  }\n\n  .modus-wc-utility-panel-footer {\n    display: flex;\n    gap: 10px;\n    justify-content: flex-end;\n  }\n\n`;\n\nconst scriptBlock = `\n<script>\n  requestAnimationFrame(() => {\n  // Select the specific container for this story\n  const container = document.querySelector('.demo-container');\n\n  if (container) {\n    // Find the specific panel and content inside this container\n    const panel = container.querySelector('modus-wc-utility-panel');\n    const contentElement = container.querySelector('.main-content');\n\n    // Link them together\n    if (panel && contentElement) {\n      panel.targetElement = contentElement;\n    }\n  }\n});\n  const navbar = document.querySelector('modus-wc-navbar');\n  if (navbar) {\n    navbar.visibility = { user: false };\n  }\n</script>`;\n\nexport default meta;\ntype Story = StoryObj<UtilityPanelArgs>;\n\nexport const Default: Story = {\n  parameters: {\n    docs: {\n      source: {\n        transform: () => `\n\n<style>\n${utilityPanelStyles}\n</style>\n\n<div class=\"demo-container\">\n  <modus-wc-navbar id=\"navbar-default\">\n    <div slot=\"end\">\n      <modus-wc-tooltip content=\"Toggle Utility Panel\" position=\"left\">\n        <modus-wc-button\n          id=\"toggle-btn\"\n          color=\"primary\"\n          size=\"sm\"\n          variant=\"outlined\"\n          onclick=\"const panel = this.closest('.demo-container').querySelector('modus-wc-utility-panel'); panel.expanded = !panel.expanded\"\n        >\n          <modus-wc-icon name=\"menu\"></modus-wc-icon>\n        </modus-wc-button>\n      </modus-wc-tooltip>\n    </div>\n  </modus-wc-navbar>\n\n  <div class=\"main-content-wrapper\">\n    <div id=\"main-content\" class=\"main-content\">\n      <h1>Main Content Area</h1>\n      <p>\n        This is the main content area below the navbar. When the utility\n        panel opens with pushContent=true, this content will be pushed to\n        the left.\n      </p>\n      <p>\n        This is an example of how the utility panel interacts with the main\n        content. When the panel opens with push content enabled, this area\n        will shift to the left to make room for the panel.\n      </p>\n      <p>\n        The content area maintains its full functionality while the panel is\n        open. Users can continue to interact with the main content while\n        accessing the utility panel features.\n      </p>\n    </div>\n\n    <modus-wc-utility-panel\n      expanded=\"false\"\n      push-content=\"true\"\n    >\n      <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n        Utility Panel Header\n      </div>\n\n      <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n        <p>This is the utility panel body content.</p>\n        <p>\n          You can add any content here including forms, lists, or other\n          components.\n        </p>\n        <modus-wc-text-input\n          label=\"Example Input\"\n          placeholder=\"Enter text...\"\n        >\n        </modus-wc-text-input>\n      </div>\n\n      <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n        <modus-wc-button color=\"tertiary\" size=\"sm\"\n          >Cancel</modus-wc-button\n        >\n        <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n      </div>\n    </modus-wc-utility-panel>\n  </div>\n</div>\n${scriptBlock}`,\n      },\n    },\n  },\n  render: (args) => html`\n    <style>\n      ${utilityPanelStyles}\n    </style>\n    <div class=\"demo-container\">\n      <modus-wc-navbar id=\"navbar-default\" .visibility=${{ user: false }}>\n        <div slot=\"end\">\n          <modus-wc-tooltip content=\"Toggle Utility Panel\" position=\"left\">\n            <modus-wc-button\n              color=\"primary\"\n              size=\"sm\"\n              variant=\"outlined\"\n              onclick=\"const panel = this.closest('.demo-container').querySelector('modus-wc-utility-panel'); panel.expanded = !panel.expanded\"\n            >\n              <modus-wc-icon name=\"menu\"></modus-wc-icon>\n            </modus-wc-button>\n          </modus-wc-tooltip>\n        </div>\n      </modus-wc-navbar>\n\n      <div class=\"main-content-wrapper\">\n        <div id=\"main-content\" class=\"main-content\">\n          <h1>Main Content Area</h1>\n          <p>\n            This is the main content area below the navbar. When the utility\n            panel opens with pushContent=true, this content will be pushed to\n            the left.\n          </p>\n          <p>\n            This is an example of how the utility panel interacts with the main\n            content. When the panel opens with push content enabled, this area\n            will shift to the left to make room for the panel.\n          </p>\n          <p>\n            The content area maintains its full functionality while the panel is\n            open. Users can continue to interact with the main content while\n            accessing the utility panel features.\n          </p>\n        </div>\n\n        <modus-wc-utility-panel\n          ?expanded=\"${args.expanded}\"\n          ?push-content=\"${args['push-content']}\"\n        >\n          <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n            Utility Panel Header\n          </div>\n\n          <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n            <p>This is the utility panel body content.</p>\n            <p>\n              You can add any content here including forms, lists, or other\n              components.\n            </p>\n            <modus-wc-text-input\n              label=\"Example Input\"\n              placeholder=\"Enter text...\"\n            >\n            </modus-wc-text-input>\n          </div>\n\n          <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n            <modus-wc-button color=\"tertiary\" size=\"sm\">Cancel</modus-wc-button>\n            <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n          </div>\n        </modus-wc-utility-panel>\n      </div>\n    </div>\n  `,\n};\nexport const Expanded: Story = {\n  args: {\n    expanded: true,\n    'push-content': true,\n  },\n  parameters: {\n    docs: {\n      source: {\n        transform: () => `\n<style>\n${utilityPanelStyles}\n  .modus-wc-utility-panel-body {\n    background: var(--modus-wc-color-base-100);\n    }\n</style>\n\n<div class=\"demo-container\">\n  <modus-wc-navbar id=\"navbar-expanded\">\n    <div slot=\"end\">\n      <modus-wc-button\n        id=\"toggle-btn-expanded\"\n        color=\"primary\"\n        size=\"sm\"\n        variant=\"outlined\"\n        onclick=\"const panel = document.getElementById('panel-expanded'); panel.expanded = !panel.expanded\"\n      >\n        <modus-wc-icon name=\"menu\"></modus-wc-icon>\n      </modus-wc-button>\n    </div>\n  </modus-wc-navbar>\n\n  <div class=\"main-content-wrapper\">\n    <div id=\"main-content-expanded\" class=\"main-content\">\n      <h1>Main Content Area (Expanded Story)</h1>\n      <p>\n        This story shows the panel already expanded. The content should be\n        pushed to the left.\n      </p>\n      <p>\n        The utility panel provides quick access to additional tools and\n        information. It can be used for settings, filters, or any\n        supplementary content that enhances the main application.\n      </p>\n    </div>\n\n    <modus-wc-utility-panel\n      id=\"panel-expanded\"\n      expanded=\"true\"\n      push-content=\"true\"\n    >\n      <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n        Expanded Panel Header\n      </div>\n\n      <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n        <p>This panel starts in the expanded state.</p>\n      </div>\n\n      <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n        <modus-wc-button color=\"tertiary\" size=\"sm\"\n          >Cancel</modus-wc-button\n        >\n        <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n      </div>\n    </modus-wc-utility-panel>\n  </div>\n</div>\n${scriptBlock}`,\n      },\n    },\n  },\n  render: (args) =>\n    // prettier-ignore\n    html`\n    <style>\n      ${utilityPanelStyles} \n      .modus-wc-utility-panel-body {\n        padding: 20px 0;\n        background: var(--modus-wc-color-base-100);\n      }\n    </style>\n\n    <div class=\"demo-container\">\n      <modus-wc-navbar id=\"navbar-expanded\" .visibility=${{ user: false }}>\n        <div slot=\"end\">\n          <modus-wc-button\n            color=\"primary\"\n            size=\"sm\"\n            variant=\"outlined\"\n            onclick=\"const panel = this.closest('.demo-container').querySelector('modus-wc-utility-panel'); panel.expanded = !panel.expanded\"\n          >\n            <modus-wc-icon name=\"menu\"></modus-wc-icon>\n          </modus-wc-button>\n        </div>\n      </modus-wc-navbar>\n\n      <div class=\"main-content-wrapper\">\n        <div id=\"main-content-expanded\" class=\"main-content\">\n          <h1>Main Content Area (Expanded Story)</h1>\n          <p>\n            This story shows the panel already expanded. The content should be\n            pushed to the left.\n          </p>\n          <p>\n            The utility panel provides quick access to additional tools and\n            information. It can be used for settings, filters, or any\n            supplementary content that enhances the main application.\n          </p>\n        </div>\n\n        <modus-wc-utility-panel\n          id=\"panel-expanded\"\n          ?expanded=\"${args.expanded}\"\n          ?push-content=\"${args['push-content']}\"\n        >\n          <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n            Expanded Panel Header\n          </div>\n\n          <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n            <p>This panel starts in the expanded state.</p>\n          </div>\n\n          <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n            <modus-wc-button color=\"tertiary\" size=\"sm\">Cancel</modus-wc-button>\n            <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n          </div>\n        </modus-wc-utility-panel>\n      </div>\n    </div>\n  `,\n};\nexport const OverlayMode: Story = {\n  args: {\n    expanded: true,\n    'push-content': false,\n  },\n  parameters: {\n    docs: {\n      source: {\n        transform: () => `\n<style>\n${utilityPanelStyles}\n</style>\n\n<div class=\"demo-container\">\n  <modus-wc-navbar id=\"navbar-overlay\">\n    <div slot=\"end\">\n      <modus-wc-button\n        id=\"toggle-btn-overlay\"\n        color=\"primary\"\n        size=\"sm\"\n        variant=\"outlined\"\n        onclick=\"const panel = document.getElementById('panel-overlay'); panel.expanded = !panel.expanded\"\n      >\n        <modus-wc-icon name=\"menu\"></modus-wc-icon>\n      </modus-wc-button>\n    </div>\n  </modus-wc-navbar>\n\n  <div class=\"main-content-wrapper\">\n    <div id=\"main-content-overlay\" class=\"main-content\">\n      <h1>Main Content Area (Overlay Mode)</h1>\n      <p>\n        In overlay mode, the panel appears over the content without pushing\n        it.\n      </p>\n      <p>\n        This example demonstrates the overlay mode where the panel appears\n        on top of the content without pushing it aside. This is useful when\n        you want to preserve the layout of the main content area.\n      </p>\n    </div>\n\n    <modus-wc-utility-panel\n      id=\"panel-overlay\"\n      expanded=\"true\"\n      push-content=\"false\"\n    >\n      <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n        Overlay Panel Header\n      </div>\n\n      <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n        <p>This panel overlays the content without pushing it.</p>\n      </div>\n\n      <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n        <modus-wc-button color=\"tertiary\" size=\"sm\"\n          >Cancel</modus-wc-button\n        >\n        <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n      </div>\n    </modus-wc-utility-panel>\n  </div>\n</div>\n${scriptBlock}`,\n      },\n    },\n  },\n  render: (args) => html`\n    <style>\n      ${utilityPanelStyles}\n    </style>\n\n    <div class=\"demo-container\">\n      <modus-wc-navbar id=\"navbar-overlay\" .visibility=${{ user: false }}>\n        <div slot=\"end\">\n          <modus-wc-button\n            color=\"primary\"\n            size=\"sm\"\n            variant=\"outlined\"\n            onclick=\"const panel = document.getElementById('panel-overlay'); panel.expanded = !panel.expanded\"\n          >\n            <modus-wc-icon name=\"menu\"></modus-wc-icon>\n          </modus-wc-button>\n        </div>\n      </modus-wc-navbar>\n\n      <div class=\"main-content-wrapper\">\n        <div id=\"main-content-overlay\" class=\"main-content\">\n          <h1>Main Content Area (Overlay Mode)</h1>\n          <p>\n            In overlay mode, the panel appears over the content without pushing\n            it.\n          </p>\n          <p>\n            This example demonstrates the overlay mode where the panel appears\n            on top of the content without pushing it aside. This is useful when\n            you want to preserve the layout of the main content area.\n          </p>\n        </div>\n\n        <modus-wc-utility-panel\n          id=\"panel-overlay\"\n          ?expanded=\"${args.expanded}\"\n          ?push-content=\"${args['push-content']}\"\n        >\n          <div slot=\"header\" class=\"modus-wc-utility-panel-header\">\n            Overlay Panel Header\n          </div>\n\n          <div slot=\"body\" class=\"modus-wc-utility-panel-body\">\n            <p>This panel overlays the content without pushing it.</p>\n          </div>\n\n          <div slot=\"footer\" class=\"modus-wc-utility-panel-footer\">\n            <modus-wc-button color=\"tertiary\" size=\"sm\">Cancel</modus-wc-button>\n            <modus-wc-button color=\"primary\" size=\"sm\">Save</modus-wc-button>\n          </div>\n        </modus-wc-utility-panel>\n      </div>\n    </div>\n  `,\n};\nexport const WithoutHeaderFooter: Story = {\n  args: {\n    expanded: false,\n    'push-content': true,\n  },\n  render: (args: UtilityPanelArgs) => html`\n    <style>\n      .demo-container {\n        height: 100vh;\n        position: relative;\n        overflow: hidden;\n        background: var(--modus-wc-color-base-page);\n      }\n\n      .main-content {\n        height: 100%;\n        padding: 20px;\n        background: var(--modus-wc-color-base-page);\n      }\n    </style>\n\n    <div class=\"demo-container\">\n      <div id=\"main-content-2\" class=\"main-content\">\n        <h1>Main Content Area</h1>\n        <modus-wc-button\n          onclick=\"const panel = this.closest('.demo-container').querySelector('modus-wc-utility-panel'); panel.expanded = !panel.expanded\"\n        >\n          Toggle Panel\n        </modus-wc-button>\n      </div>\n\n      <modus-wc-utility-panel\n        id=\"panel-simple\"\n        ?expanded=\"${args.expanded}\"\n        ?push-content=\"${args['push-content']}\"\n      >\n        <div slot=\"body\">\n          <h3>Simple Body Content</h3>\n          <p>This panel only has body content without header or footer.</p>\n        </div>\n      </modus-wc-utility-panel>\n    </div>\n  `,\n};\n"
+  }
+}