@trimble-oss/moduswebcomponents-mcp 1.0.0

package/versions/1.1.1/docs/angular.mdx

@@ -0,0 +1,374 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Frameworks/Angular" />
+
+# Angular Framework Integration
+
+This guide will help you get started with consuming the Modus Angular Web Component library in your Angular project.
+
+We highly recommend using the Modus Angular Components library for Angular based projects.
+These components are automatically generated using the Stencil Angular Framework Integration.
+
+Follow the steps outlined below to integrate and use Modus Angular Web Components effectively.
+
+Please refer to the [official stencil documentation](https://stenciljs.com/docs/angular#consumer-usage) for more information on how to integrate with your Angular project.
+
+## Angular with modules
+
+Modus Angular Components have a peer dependency with Modus Web Components and require the
+installation of both packages.
+
+### 1. Install both `modus-wc` and `modus-wc-angular` dependencies:
+
+Ensure that you specify the target version of Angular for the `modus-wc-angular` package (e.g., `ng18` for Angular 18).
+
+<b>
+  Lock the installed package versions to avoid unintended breakages on future
+  npm installs.
+</b>
+
+```bash
+npm install @trimble-oss/moduswebcomponents @trimble-oss/moduswebcomponents-angular@<latest-version>-ng<target-version>
+```
+
+### 2. Set up the styling:
+
+You will need to import our styling in your main JavaScript or CSS file:
+
+```js
+import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+### 3. Configure asset copying in `angular.json`:
+
+For components that use static assets (like `modus-wc-logo`), you need to configure Angular to copy the assets to your build output.
+
+Add this to your `angular.json` under `projects > your-app > architect > build > options`:
+
+```json
+{
+  "projects": {
+    "your-app": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/@trimble-oss/moduswebcomponents/assets",
+                "output": "/assets"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### 4. Import Modus Angular Web Components library into your Angular app's module:
+
+```ts
+// app.module.ts
+import { ModusAngularComponentsModule } from '@trimble-oss/moduswebcomponents-angular';
+
+@NgModule({
+  ...
+  imports: [ComponentLibraryModule],
+  ...
+})
+export class AppModule {}
+```
+
+### 4. Use Modus Angular Web Components while leveraging Angular template binding syntax:
+
+```ts
+// app.component.html
+<modus-wc-button label="Click Me" />
+```
+
+## Angular with standalone components
+
+Modus Angular Components have a peer dependency with Modus Web Components and require the
+installation of both packages.
+
+### 1. Install both `modus-wc` and `modus-wc-angular` dependencies:
+
+Ensure that you specify the target version of Angular for the `modus-wc-angular` package (e.g., `ng18` for Angular 18).
+
+<b>
+  Lock the installed package versions to avoid unintended breakages on future
+  npm installs.
+</b>
+
+```bash
+npm install @trimble-oss/moduswebcomponents @trimble-oss/moduswebcomponents-angular@<latest-version>-ng<target-version>
+```
+
+### 2. Set up the styling:
+
+You will need to import our styling in your main JavaScript or CSS file:
+
+```js
+import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+### 3. Import your component library into your component.
+
+You must distribute your components through a primary `NgModule` to use your components in a standalone component.
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { ModusAngularComponentsModule } from '@trimble-oss/moduswebcomponents-angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [ModusAngularComponentsModule],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {}
+```
+
+### 4. Use Modus Angular Web Components while leveraging Angular template binding syntax:
+
+```ts
+// app.component.html
+<modus-wc-button label="Click Me" />
+```
+
+### Custom Elements Schema
+
+In the `app.module.ts` file, you need to tell angular that you are using custom element schemas
+so that it does not throw errors when unknown element names are used in the markup.
+
+Import `CUSTOM_ELEMENTS_SCHEMA` and add it to your `@NgModule`'s schemas:
+
+```ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+@NgModule({
+  ...
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  ...
+})
+```
+
+### Wrapping Components
+
+When using Modus Web Components directly, it is recommended to wrap it in corresponding Angular components within your application. This will abstract away from the library dependency, allowing more flexibility for you and your application in the future. Each part of the component is able to be abstracted, leaving you with an Angular-native component.
+
+Notice Angular allows `[]` and `()` markup syntax for the web component's inputs and outputs, respectively.
+
+Wrapped Modus Button Example:
+
+```ts
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'button-component',
+  template: `
+    <modus-wc-button
+      [buttonStyle]="buttonStyle"
+      [color]="color"
+      [disabled]="disabled"
+      [size]="size"
+      (buttonClick)="onButtonClick.emit()"
+    >
+      <ng-content></ng-content>
+    </modus-wc-button>
+  `,
+})
+export class ButtonComponent {
+  @Input() buttonStyle: 'borderless' | 'fill' | 'outline' = 'fill';
+  @Input() color: 'danger' | 'default' | 'primary' | 'secondary' | 'warning' =
+    'default';
+  @Input() disabled: boolean;
+  @Input() size: 'small' | 'medium' | 'large' = 'medium';
+
+  @Output() onButtonClick = new EventEmitter();
+}
+```
+
+### Reactive Forms
+
+Working with a web component's inputs/outputs works great but these components do not integrate with Angular's reactive forms quite as easily. Since web components do not know about Angular's form APIs, we must extend form-compatible components' behavior with simple directives. These directives are applied to the web component selectors, giving the components Angular form functionality.
+
+Let's take a look at a directive implementation for a Modus Select's form functionality.
+
+#### Wrapper
+
+You'll notice the `modus-select` in the markup is taking extra inputs, such as `formControl` and `optionsDisplayProp`, these inputs are provided by the directive below. Here is what our wrapper looks like:
+
+```ts
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'select-component',
+  template: `
+    <modus-wc-select
+      #select
+      [disabled]="disabled"
+      [errorText]="errorText"
+      [formControl]="formControl"
+      [helperText]="helperText"
+      [label]="label"
+      [options]="options"
+      [optionsDisplayProp]="optionsDisplayProp"
+      [required]="required"
+      [selectValue]="value"
+      [size]="size"
+      [validText]="validText"
+      (valueChange)="onSelectValueChange.emit(select.value)"
+    >
+    </modus-wc-select>
+  `,
+})
+export class SelectComponent {
+  @Input() disabled: boolean;
+  @Input() errorText: string;
+  @Input() formControl: FormControl;
+  @Input() helperText: string;
+  @Input() label: string;
+  @Input() options: unknown[] = [];
+  @Input() optionsDisplayProp: string;
+  @Input() required: boolean;
+  @Input() size: 'medium' | 'large' = 'medium';
+  @Input() validText: string;
+  @Input() value: unknown;
+
+  @Output() onSelectValueChange = new EventEmitter<unknown>();
+}
+```
+
+#### Directive
+
+Moving onto the directive, there are a few things to keep in mind.
+
+- The directive's selector is set to the web component's tag, not the wrapper's.
+- Implementing the `ControlValueAccessor` interface helps Angular understand when the form control has been updated or changed.
+  - When the value is set, `onChange()` notifies that the control has been updated.
+  - Calling `onTouched()` lets Angular know the component has been touched, which is needed for form validation.
+- The `get value()`, and `set value()` are used by Angular's form control.
+- Using the `@HostListener` decorator lets you listen to events from the web component, and execute appropriate logic.
+
+Here is what our directive looks like:
+
+```ts
+import {
+  Directive,
+  forwardRef,
+  ElementRef,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+@Directive({
+  selector: 'modus-wc-select',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => ModusSelectDirective),
+      multi: true,
+    },
+  ],
+})
+export class ModusSelectDirective implements ControlValueAccessor, OnInit {
+  @Input() disabled: boolean;
+  @Input() errorText: string;
+  @Input() formControl: FormControl;
+  @Input() helperText: string;
+  @Input() label: string;
+  @Input() options: unknown[];
+  @Input() optionsDisplayProp: string;
+  @Input() required: boolean;
+  @Input() selectValue: unknown;
+  @Input() size: 'medium' | 'large';
+  @Input() validText: string;
+
+  @Output() valueChange = new EventEmitter<string>();
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  private _value: string;
+
+  get value() {
+    return this._value;
+  }
+
+  set value(value) {
+    if (value !== this._value) {
+      this._value = value;
+      this.onChange(this._value);
+      this.onTouched();
+      this.elementRef.nativeElement.value = value;
+    }
+  }
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    const modusSelect = this.elementRef.nativeElement as HTMLModusSelectElement;
+    modusSelect.disabled = this.disabled;
+    modusSelect.errorText = this.errorText;
+    modusSelect.helperText = this.helperText;
+    modusSelect.label = this.label;
+    modusSelect.options = this.options;
+    modusSelect.optionsDisplayProp = this.optionsDisplayProp;
+    modusSelect.required = this.required;
+    modusSelect.size = this.size;
+    modusSelect.validText = this.validText;
+    modusSelect.value = this.selectValue;
+
+    if (!this.formControl) {
+      this.formControl = new FormControl(null);
+    }
+  }
+
+  @HostListener('valueChange', ['$event.detail'])
+  listenForValueChange(value: string): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: Function): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: Function): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  writeValue(value: string): void {
+    if (value) {
+      this.value = value;
+    }
+  }
+}
+```
+
+Now adding the Modus Select as a form control is as easy as:
+
+```ts
+<select-component
+  [formControl]="$any(form).controls['select1']"
+  [label]="'Select Form Demo'"
+  [options]="options"
+  [optionsDisplayProp]="'display'">
+</select-component>
+```

package/versions/1.1.1/docs/getting-started.mdx

@@ -0,0 +1,131 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Getting Started" />
+
+# Getting Started
+
+## Installation
+
+<b>
+  Lock the installed package version to avoid unintended breakages on future npm
+  installs.
+</b>
+
+```bash
+npm install @trimble-oss/moduswebcomponents
+```
+
+## Usage
+
+### 1. Set up the styling:
+
+You will need to import our styling in your main JavaScript or CSS file:
+
+```js
+import '@trimble-oss/moduswebcomponents/modus-wc-styles.css';
+```
+
+#### Variables-Only CSS
+
+If you want Modus styling to apply only to your components and **not affect the rest of your application**, you can import the lightweight variables-only file instead:
+
+```js
+import '@trimble-oss/moduswebcomponents/modus-wc-variables.css';
+```
+
+Modus components inside Shadow DOM will automatically inject their own class rules via `handleShadowDOMStyles()`, so they render correctly without the full stylesheet being loaded globally.
+
+> **Note:** Both imports work with Shadow DOM. We recommend `modus-wc-styles.css` for new applications. Consider `modus-wc-variables.css` for existing applications where you want to avoid global style changes.
+
+### 2. Set the theme:
+
+The theme can be set manually or by using the `ThemeSwitcher` component. See the "Use a Theme" section of [Styling](/docs/documentation-styling--docs) for guidance.
+
+Available themes are:
+
+- `modus-modern-light` (default)
+- `modus-modern-dark`
+- `modus-classic-light`
+- `modus-classic-dark`
+- `connect-light`
+- `connect-dark`
+
+### 3. Register custom elements:
+
+```javascript
+import { defineCustomElements } from '@trimble-oss/moduswebcomponents/loader';
+
+// Call during the initial loading of your application
+const Root = () => {
+  defineCustomElements();
+
+  return <App />;
+};
+```
+
+### 4. Use the components:
+
+```javascript
+// Use in HTML
+<modus-wc-button variant="primary">Click me</modus-wc-button>
+```
+
+## Types
+
+Types are a crucial part of our component library, providing robust type safety and enhanced developer experience through comprehensive TypeScript definitions for all components.
+
+```javascript
+import { ISelectOption, ModusWcSelectCustomEvent } from '@trimble-oss/moduswebcomponents';
+
+const options: ISelectOption[] = [
+  {
+    label: 'Option 1',
+    value: '1',
+  },
+  {
+    label: 'Option 2',
+    value: '2',
+  },
+];
+
+const handleEvent = (e: ModusWcSelectCustomEvent<ISelectOption>) => {}
+```
+
+## Testing with Jest
+
+If you are using the React integration package (`@trimble-oss/moduswebcomponents-react`), this package is published as ES modules. To use it in a Jest environment you need to configure Babel to transpile it.
+
+Add `transformIgnorePatterns` to your Jest config (`package.json` or `jest.config.js`):
+
+```json
+{
+  "jest": {
+    "transformIgnorePatterns": ["/node_modules/(?!(@trimble-oss|@stencil))"]
+  }
+}
+```
+
+Ensure your `babel.config.js` includes these presets:
+
+```js
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};
+```
+
+## Framework Integrations
+
+- ### [Angular](?path=/docs/documentation-frameworks-angular--docs)
+
+- ### [React](?path=/docs/documentation-frameworks-react--docs)
+
+- ### [Vue](?path=/docs/documentation-frameworks-vue--docs)
+
+---
+
+Need help? Check out our [GitHub repository](https://github.com/trimble-oss/modus-wc-2.0)
+or [raise an issue](https://github.com/trimble-oss/modus-wc-2.0/issues).

package/versions/base/component-docs/_all_components.json

@@ -0,0 +1,55 @@
+{
+  "total": 49,
+  "components": [
+    "modus-wc-accordion",
+    "modus-wc-alert",
+    "modus-wc-autocomplete",
+    "modus-wc-avatar",
+    "modus-wc-badge",
+    "modus-wc-breadcrumbs",
+    "modus-wc-button",
+    "modus-wc-button-group",
+    "modus-wc-card",
+    "modus-wc-checkbox",
+    "modus-wc-chip",
+    "modus-wc-collapse",
+    "modus-wc-date",
+    "modus-wc-divider",
+    "modus-wc-dropdown-menu",
+    "modus-wc-file-dropzone",
+    "modus-wc-handle",
+    "modus-wc-icon",
+    "modus-wc-input-feedback",
+    "modus-wc-input-label",
+    "modus-wc-loader",
+    "modus-wc-logo",
+    "modus-wc-menu",
+    "modus-wc-menu-item",
+    "modus-wc-modal",
+    "modus-wc-navbar",
+    "modus-wc-number-input",
+    "modus-wc-pagination",
+    "modus-wc-panel",
+    "modus-wc-progress",
+    "modus-wc-radio",
+    "modus-wc-rating",
+    "modus-wc-select",
+    "modus-wc-side-navigation",
+    "modus-wc-skeleton",
+    "modus-wc-slider",
+    "modus-wc-stepper",
+    "modus-wc-switch",
+    "modus-wc-table",
+    "modus-wc-tabs",
+    "modus-wc-text-input",
+    "modus-wc-textarea",
+    "modus-wc-theme-switcher",
+    "modus-wc-time-input",
+    "modus-wc-toast",
+    "modus-wc-toolbar",
+    "modus-wc-tooltip",
+    "modus-wc-typography",
+    "modus-wc-utility-panel"
+  ],
+  "last_updated": "1774599201.21"
+}

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

@@ -0,0 +1,48 @@
+{
+  "description": "A customizable accordion component used for showing and hiding related groups of content. The component supports a `<slot>` called 'content' for injecting `<modus-wc-collapse>` elements. See [Collapse](/docs/components-collapse--docs) docs for additional info.",
+  "properties": [
+    {
+      "name": "customClass",
+      "type": "string",
+      "description": "Custom CSS class to apply to the inner div.",
+      "default": "''",
+      "mutable": false,
+      "end_line": 29
+    }
+  ],
+  "events": [
+    {
+      "name": "expandedChange",
+      "detail": "{ expanded: boolean; index: number; }",
+      "description": "When a collapse expanded state is changed, this event outputs the relevant index and state",
+      "end_line": 35
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Slot for default content"
+    }
+  ],
+  "examples": {
+    "basic": "<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>",
+    "variations": [],
+    "args": {},
+    "argTypes": {},
+    "usage": [],
+    "events": [
+      "expandedChange"
+    ]
+  },
+  "tag": "modus-wc-accordion",
+  "storyExample": {
+    "template": "<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>",
+    "args": {},
+    "argTypes": {},
+    "events": [
+      "expandedChange"
+    ],
+    "fullContent": "import { withActions } from '@storybook/addon-actions/decorator';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createShadowHostClass } from '../../providers/shadow-dom/shadow-host-helper';\nimport { ICollapseOptions } from '../modus-wc-collapse/modus-wc-collapse';\n\ninterface AccordionArgs {\n  'custom-class'?: string;\n}\n\nconst collapseOptions: ICollapseOptions[] = [\n  {\n    description: 'Item one description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item One',\n  },\n  {\n    description: 'Item two description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item Two',\n  },\n  {\n    description: 'Item three description',\n    icon: 'alert',\n    iconAriaLabel: 'Alert',\n    title: 'Item Three',\n  },\n];\n\nconst meta: Meta<AccordionArgs> = {\n  title: 'Components/Accordion',\n  component: 'modus-wc-accordion',\n  decorators: [withActions],\n  parameters: {\n    actions: {\n      handles: ['expandedChange'],\n    },\n    layout: {\n      padded: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<AccordionArgs>;\n\nconst Template: Story = {\n  render: (args) => {\n    // prettier-ignore\n    return html`\n<div style=\"padding: 20px;\">\n  <modus-wc-accordion custom-class=${ifDefined(args['custom-class'])}>\n    <modus-wc-collapse .options=${collapseOptions[0]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[1]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n    <modus-wc-collapse .options=${collapseOptions[2]}>\n      <div slot=\"content\">Collapse content</div>\n    </modus-wc-collapse>\n  </modus-wc-accordion>\n</div>\n<script>\n  const collapseOptions = [\n    {\n      description: 'Item one description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item One',\n    },\n    {\n      description: 'Item two description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Two',\n    },\n    {\n      description: 'Item three description',\n      icon: 'alert',\n      iconAriaLabel: 'Alert',\n      title: 'Item Three',\n    },\n  ];\n // Adding this block to show how to set options via JS \n  // const items = document.querySelectorAll('modus-wc-collapse');\n  // items.forEach((item, index) => {\n  //  item.options = collapseOptions[index];\n  // });\n</script>\n    `;\n  },\n};\n\nexport const Default: Story = { ...Template };\n\nexport const ShadowDomParent: Story = {\n  render: () => {\n    // Create a unique shadow host for accordion component\n    if (!customElements.get('accordion-shadow-host')) {\n      const AccordionShadowHost = createShadowHostClass<AccordionArgs>({\n        componentTag: 'modus-wc-accordion',\n        propsMapper: (v: AccordionArgs, el: HTMLElement) => {\n          const accordionEl = el as unknown as {\n            customClass: string;\n          };\n          accordionEl.customClass = v['custom-class'] || '';\n\n          // Create and append collapse elements (no whitespace between to avoid gaps)\n          el.innerHTML = '';\n          collapseOptions.forEach((options) => {\n            const collapse = document.createElement('modus-wc-collapse');\n            (collapse as unknown as { options: ICollapseOptions }).options =\n              options;\n            const contentDiv = document.createElement('div');\n            contentDiv.setAttribute('slot', 'content');\n            contentDiv.textContent = 'Collapse content';\n            collapse.appendChild(contentDiv);\n            el.appendChild(collapse);\n          });\n        },\n      });\n      customElements.define('accordion-shadow-host', AccordionShadowHost);\n    }\n\n    return html`<accordion-shadow-host\n      style=\"display: block; padding: 20px;\"\n      .props=${{}}\n    ></accordion-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 the accordion was composed of child accordion-item components. In 2.0 accordion children are collapse\n  components.\n  - The new accordion supports \\`header\\` and \\`content\\` slots to provide maximum flexibility.\n  - Size values have changed from (\\`condensed\\`, \\`standard\\`) in 1.0 accordion-item to abbreviations (\\`xs\\`, \\`sm\\`, \\`md\\`, \\`lg\\`) in 2.0 collapse.\n\n#### Prop Mapping\n\n##### accordion\n\n| 1.0 Prop           | 2.0 Prop           | Notes            |\n|--------------------|--------------------|------------------|\n| aria-label         | aria-label         |                  |\n\n##### accordion-item → collapse\n\n| 1.0 Prop           | 2.0 Prop            | Notes            |\n|--------------------|---------------------|------------------|\n| aria-label         | aria-label          |                  |\n| disabled           |                     | Not carried over |\n| expand-button-type |                     | Not carried over |\n| expanded           | expanded            |                  |\n| header-text        | options.title       |                  |\n| icon               | options.icon        |                  |\n| supporting-label   | options.description |                  |\n| size               | options.size        |                  |\n\n#### Event Mapping\n\n##### accordion-item → accordion\n\nThe new accordion and collapse have their own events. We recommend using the\naccordion events to migrate.\n\n| 1.0 Event | 2.0 Event      | Notes            |\n|-----------|----------------|------------------|\n| closed    | expandedChange |                  |\n| opened    | expandedChange |                  |\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"
+  }
+}