@sebgroup/green-core 2.19.0-rc.20251217092059691 → 2.19.0-rc.20251218133050947

package/generated/mcp/formatted-number/react.md

@@ -0,0 +1,17 @@
+# gds-formatted-number - React
+
+## Import
+
+```typescript
+import { GdsFormattedNumber } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsFormattedNumber>
+  {/* content */}
+</GdsFormattedNumber>
+```

package/generated/mcp/grid/angular.md

@@ -0,0 +1,17 @@
+# gds-grid - Angular
+
+## Import
+
+```typescript
+import { GdsGridComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-grid>
+  <!-- content -->
+</gds-grid>
+```

package/generated/mcp/grid/api.md

@@ -0,0 +1,76 @@
+# gds-grid
+
+The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute.
+
+**Class**: `GdsGrid`
+
+**Tag**: `<gds-grid>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns` | `string \| undefined` | `-` | The number of columns to divide the space into. Accepts a unitless number. Example: `1; m { 2 }; l { 4 }` to vary number of columns based on viewport size. |
+| `gap` | `string \| undefined` | `-` | Defines the gap size between grid items. Uses same format as the CSS gap property, and expects space tokens. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the gap size for that device type respectively. |
+| `'auto-columns'` | `string \| undefined` | `-` | Defines the minimum column width. If set, the grid adjusts column size based on content and available width, even without other attributes. Accepts any valid CSS units. |
+| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
+| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
+| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
+| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
+| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
+| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
+| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
+| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
+| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
+| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
+| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
+| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. |
+| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
+| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
+| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
+| `padding` | `string \| undefined` | `-` | Style Expression Property that controls the `padding` property. Only accepts space tokens. |
+| `'padding-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-inline` property. Only accepts space tokens. |
+| `'padding-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-block` property. Only accepts space tokens. |
+| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
+| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
+| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
+| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
+| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
+| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
+| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
+| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
+| `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
+| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
+| `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. |
+| `display` | `string \| undefined` | `-` | Controls the display property. Supports all valid CSS display values. |
+| `level` | `GdsColorLevel` | `'2'` | The level of the container is used to resolve the color tokens from the corresponding level. Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.  Default for `gds-div` is level 2. |
+| `color` | `string \| undefined` | `-` | Style Expression Property that controls the `color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div color="neutral-01/0.2"></gds-div> ``` |
+| `background` | `string \| undefined` | `-` | Style Expression Property that controls the `background` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div background="neutral-01/0.2"></gds-div> ``` |
+| `border` | `string \| undefined` | `-` | Style Expression Property that controls the `border` property. Accepts a string of the same format as the CSS border property.  ```html <gds-div border="4xs solid subtle-01/0.2"></gds-div> ```  Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value. |
+| `'border-color'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div border-color="subtle-01/0.2"></gds-div> ``` |
+| `'border-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-width` property. Only accepts space tokens. |
+| `'border-style'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-style` property. Supports all valid CSS `border-style` values. |
+| `'border-radius'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-radius` property. Only accepts space tokens. |
+| `'box-shadow'` | `string \| undefined` | `-` | Style Expression Property for the `box-shadow` property.  Accepts shadow tokens from the design system.  `xs`, `s`, `m`, `l`, `xl` |
+| `opacity` | `string \| undefined` | `-` | Style Expression Property that controls the `opacity` property. Supports all valid CSS `opacity` values. |
+| `overflow` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow` property. Supports all valid CSS `overflow` values. |
+| `'box-sizing'` | `string \| undefined` | `-` | Style Expression Property that controls the `box-sizing` property. Supports all valid CSS `box-sizing` values. |
+| `'z-index'` | `string \| undefined` | `-` | Style Expression Property that controls the `z-index` property. Supports all valid CSS `z-index` values. |
+| `'font'` | `string \| undefined` | `-` | Style Expression Property that controls the `font` property. Supports all font tokens from the design system. |
+| `'font-weight'` | `string \| undefined` | `-` | Style Expression Property that controls the `font-weight` property. Supports all typography weight tokens from the design system. |
+| `'text-align'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-align` property. Supports all valid CSS `text-align` values. |
+| `'text-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-wrap` property. Supports all valid CSS `text-wrap` values. |
+| `'overflow-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow-wrap` property. Supports all valid CSS `overflow-wrap` values. |
+| `'white-space'` | `string \| undefined` | `-` | Style Expression Property that controls the `white-space` property. Supports all valid CSS `white-space` values. |
+| `'align-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-items` property. Supports all valid CSS `align-items` values. |
+| `'align-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-content` property. Supports all valid CSS `align-content` values. |
+| `'justify-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-content` property. Supports all valid CSS `justify-content` values. |
+| `'justify-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-items` property. Supports all valid CSS `justify-items` values. |
+| `'flex-direction'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-direction` property. Supports all valid CSS `flex-direction` values. |
+| `'flex-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-wrap` property. Supports all valid CSS `flex-wrap` values. |
+| `'place-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-items` property. Supports all valid CSS `place-items` values. |
+| `'place-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-content` property. Supports all valid CSS `place-content` values. |
+| `'aspect-ratio'` | `string \| undefined` | `-` | Style Expression Property that controls the `aspect-ratio` property. Supports all valid CSS `aspect-ratio` values. |
+| `cursor` | `string \| undefined` | `-` | Style Expression Property that controls the `cursor` property. Supports all valid CSS `cursor` values. |
+| `'pointer-events'` | `string \| undefined` | `-` | Style Expression Property that controls the `pointer-events` property. Supports all valid CSS `pointer-events` values. |

package/generated/mcp/grid/guidelines.md

@@ -0,0 +1,3 @@
+# Grid
+
+The grid is a custom element that provides a flexible grid system.

package/generated/mcp/grid/index.json

@@ -0,0 +1,9 @@
+{
+  "name": "gds-grid",
+  "files": {
+    "api": "api.md",
+    "guidelines": "guidelines.md",
+    "angular": "angular.md",
+    "react": "react.md"
+  }
+}

package/generated/mcp/grid/react.md

@@ -0,0 +1,17 @@
+# gds-grid - React
+
+## Import
+
+```typescript
+import { GdsGrid } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsGrid>
+  {/* content */}
+</GdsGrid>
+```

package/generated/mcp/grouped-list/angular.md

@@ -0,0 +1,17 @@
+# gds-grouped-list - Angular
+
+## Import
+
+```typescript
+import { GdsGroupedListComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-grouped-list>
+  <!-- content -->
+</gds-grouped-list>
+```

package/generated/mcp/grouped-list/api.md

@@ -0,0 +1,12 @@
+# gds-grouped-list
+
+**Class**: `GdsGroupedList`
+
+**Tag**: `<gds-grouped-list>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `''` | The label for the list that will render in the shadowDOM as the first <li> element in the list with the class `gds-list-heading` |

package/generated/mcp/grouped-list/index.json

@@ -0,0 +1,8 @@
+{
+  "name": "gds-grouped-list",
+  "files": {
+    "api": "api.md",
+    "angular": "angular.md",
+    "react": "react.md"
+  }
+}

package/generated/mcp/grouped-list/react.md

@@ -0,0 +1,17 @@
+# gds-grouped-list - React
+
+## Import
+
+```typescript
+import { GdsGroupedList } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsGroupedList>
+  {/* content */}
+</GdsGroupedList>
+```

package/generated/mcp/guides/angular.md

@@ -0,0 +1,168 @@
+# Using Green Core components with Angular
+
+There are a few things you need to know about and set up in order to use the Green Core web components with Angular. This document covers how to use the components, handle element name scoping, form controls and how to integrate with Angulars router. It is recommended to at least skim through this document before you begin.
+
+## Wrappers 🌯
+
+Angular has support for using web components directly by using [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.dev/guide/components/advanced-configuration#custom-element-schemas) in your module or component. However, this also disables type-checking for any non-angular components in your templates, which can lead to a frustrating developer experience.
+
+To improve this situation, Green provides a wrapper library for Angular. To use it, install `@sebgroup/green-core-ng` instead of `@sebgroup/green-core` in your project. The wrapper library is automatically built, versioned and published alongside Core, and has `@sebgroup/green-core` defined as a sub-dependency, so you typically only need to have `@sebgroup/green-core-ng` as a direct dependency. Since the wrapper components are tightly mapped to their underlying counterparts, it's important that the versions of these two packages are always in sync in your project.
+
+To migrate existing code from using `@sebgroup/green-core` with `CUSTOM_ELEMENTS_SCHEMA`, check out the [migration section](#migrating-from-custom_elements_schema) at the end of this document.
+
+### Status: Beta
+
+Even though `@sebgroup/green-core-ng` follows the same semantic version number as `@sebgroup/green-core`, it is still considered to be in beta for as long as this sentance remains here.
+
+## Scoping
+
+You also need to handle Green Core's [element name scoping](/docs/concepts-scoping--docs). There are two ways to do this:
+
+- **Use the `GdsCoreRenderer` custom renderer** (preferred)<br/>
+  This renderer automatically applies scoping to all Green Core elements in your template.
+- **Use the `GdsCoreScopeModule` module**<br/>
+  This module provides a directive, `*gdsCoreScope` that you can use to apply scoping to individual sections of your template.
+
+The renderer is the most convenient way to use Green Core components with Angular, but the directive can provide more explicit control when needed, or should the renderer conflict with other custom renderers, or cause any other unexpected side effects.
+
+### Using `GdsCoreRenderer`
+
+The `GdsCoreRenderer` is a custom renderer that automatically applies scoping to all Green Core elements in your template. It does this by overriding the call to `document.createElement()` and applying the scoping suffix to the element names before creation. This is the easiest way to use Green Core components in your Angular application.
+
+**In your module:**
+
+```ts
+
+@NgModule({
+    // Provides `GdsCoreRenderer` as a custom renderer
+    providers: [provideCoreRenderer()],
+})
+```
+
+Or, if you are only using standalone components, you can either create a root app module and provide the renderer there, or you can provide it in bootstrapping:
+
+```ts
+// app.config.ts
+const appConfig: ApplicationConfig = {
+  providers: [...other providers..., provideCoreRenderer()],
+};
+
+// main.ts
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
+
+**In your component:**
+
+```ts
+// Import standalone wrapper component
+
+@Component({
+    standalone: true,
+    imports: [GdsButtonComponent],
+})
+export class MyComponent {}
+```
+
+Or, you can get everything from a module:
+
+```ts
+
+@Component({
+    standalone: true,
+    imports: [GreenCoreNgModule],
+})
+export class MyComponent {}
+```
+
+Now you can use Green Core components in your template like any other elements, and intellisense and type checking should work as expected.
+
+```html
+<gds-button (click)="handleEvent($event)">Click me!</gds-button>
+```
+
+#### Using the custom renderer with Angular animations
+
+If you also need to use Angular animations, you need to use a special version of the provider. This is because Angular animations also use a custom renderer under the hood, so we need a bit of specialized initialization to make sure both the Green Core renderer and the Angular animations renderer can coexist and do their things.
+
+All you need to do on your end is to use `provideCoreRendererWithAnimations()` instead of `provideCoreRenderer()`.
+
+```ts
+
+@NgModule({
+    imports: [BrowserAnimationsModule] // You also need to make sure you have imported the `BrowserAnimationsModule` module
+    providers: [provideCoreRendererWithAnimations()],
+})
+```
+
+### Using `GdsCoreScopeModule`
+
+The `GdsCoreScopeModule` is a module that provides a directive, `*gdsCoreScope`, that you can use to only apply scoping to individual sections in your template. This can be useful if you need more explicit control over which elements are scoped, or if the `GdsCoreRenderer` is causing any issues.
+
+**In your module:**
+
+```ts
+
+@NgModule({
+    // Add the GdsCoreScopeModule to the `imports` array
+    imports: [GdsCoreScopeModule],
+})
+```
+Use the web component in your template with the `*gdsCoreScope` directive.
+
+**In your template:**
+
+```html
+<gds-button *gdsCoreScope (click)="handleEvent($event)">Click me!</gds-button>
+
+// Or, to scope a whole section:
+<div *gdsCoreScope>
+  <gds-input label="Name"></gds-input>
+  <gds-button (click)="submit()">Submit</gds-button>
+</div>
+```
+
+## Form controls
+
+The wrappers for Green Core form controls, such as `<gds-input>`, `<gds-select>`, and `<gds-checkbox>`, implement Angular's `ControlValueAccessor` interface. This means that they can be used seamlessly with Angular forms, both template-driven and reactive forms. No additional directives or configuration is needed.
+
+## Routing
+
+The wrapper library also provides support for Angular's `RouterLink` directive. This allows you to use Green Core link components, such as `<gds-link>`, `<gds-menu-button>`, and `<gds-breadcrumb>`, with Angular's router.
+
+**In your template:**<br/>
+This assumes you have routes already defined in `routes`.
+
+```html
+<gds-menu-button
+  *ngFor="let route of routes"
+  [routerLink]="route.path"
+  routerLinkActive
+>
+  {{ route.data?.name }}
+</gds-menu-button>
+```
+
+This should work as expected, with the `href` attribute being set automatically based on the `routerLink` value, and the `selected` property being set based on the active route.
+
+## Migrating from CUSTOM_ELEMENTS_SCHEMA
+
+To migrate an existing Angular project that uses Green Core components with `CUSTOM_ELEMENTS_SCHEMA`, you need to do the following steps:
+
+1. **Remove `CUSTOM_ELEMENTS_SCHEMA`** from your module or component schemas.
+2. **Install `@sebgroup/green-core-ng`** and replace any imports of `@sebgroup/green-core` with `@sebgroup/green-core-ng`.\
+   Example:
+   ```ts
+    // Before
+    import { GdsButton } from '@sebgroup/green-core'
+
+    // After
+    import { GdsButtonComponent } from '@sebgroup/green-core-ng'
+
+    @Component({
+        imports: [GdsButtonComponent], // Add to imports array
+    })
+    // ...
+    ```
+3. **Set up scoping** using either the `GdsCoreRenderer` or the `GdsCoreScopeModule` as described above.
+4. You can also remove any usages of `NggCoreFormsModule` and `NggCoreRoutingModule`, as these aspects are now handled out of the box.

package/generated/mcp/guides/installing.md

@@ -0,0 +1,135 @@
+## Install
+
+```bash
+yarn install @sebgroup/green-core
+
+# or use npm
+npm install @sebgroup/green-core
+```
+
+## Use
+
+The components in Green Core are standard web components, so you can use them with or without any framework, but since most consumers will be useing Angular or React, some extra convenience features are provided for these frameworks.
+
+Web components needs to be defined in the custom elements registry before they can be used, and there are a few different ways of handling this:
+
+- Use a sub-path side-effect import:
+  ```ts
+  import '@sebgroup/green-core/components/button/index.js'
+  ```
+  This will automatically register the component in the custom elements registry, and you can use it immediately, but it will not be tree-shakable, so it will be included in your bundle whether you use it or not.
+
+- Use a pure import and define separately:
+  ```ts
+  // Import the component class
+  import { GdsButton } from '@sebgroup/green-core/pure'
+
+  // Call define to register with the custom elements registry
+  GdsButton.define()
+  ```
+
+- For POCs and prototyping where you just want to gain access to all the components quickly, you can import everything at once:
+  ```ts
+  import '@sebgroup/green-core/everything'
+  ```
+  This will import all components and icons, and register them in the custom elements registry. This is not tree-shakable and not recommended for production use, as it will include everything in your bundle (~700kb).
+
+### Scoping
+Finally, you need to handle [scoping](/docs/concepts-scoping--docs) of the element names. This is done automatically for React, and for Lit and Angular we provide simple solutions (see below), but if you are using the components in some other way, you need to set up your own solution or disable scoping.
+
+For POCs and prototyping, you can disable scoping by setting the `GDS_DISABLE_VERSIONED_ELEMENTS` global variable to `true` before importing any components. This will make all components use their original element names (e.g. `<gds-button>` instead of `<gds-button-abc123>`).
+
+```html
+<head>
+  <script>globalThis.GDS_DISABLE_VERSIONED_ELEMENTS = true</script>
+  ...
+</head>
+```
+
+***Warning:** Never disable scoping for a microfrontend or production application, as this will cause conflicts with other applications using the same components.*
+
+## Using with Angular
+
+Angular has support for using web components directly. To enable this support, you need to do the following:
+
+- Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components.
+- Provide `NggCoreRenderer` or import `NggCoreWrapperModule` to handle Green Core's element name scoping.
+
+The renderer is more convenient, but the wrapper module can provide more explicit control.
+
+For a more detailed break-down of how to use Green Core components with Angular, and some additional information about use with the router, see the full [Angular guide](/docs/guides-angular--docs).
+
+Below is a minimal example using the renderer.
+
+**In your module:**
+```ts
+
+@NgModule({
+    // Provides `NggCoreRenderer` as a custom renderer
+    providers: [provideCoreRenderer(getScopedTagName)],
+    // CUSTOM_ELEMENTS_SCHEMA is still needed
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+```
+
+If you need animations, use `provideCoreRendererWithAnimations()` instead, and make sure to import `BrowserAnimationsModule` too.
+
+**In your component:**
+
+```ts
+import '@sebgroup/green-core/components/button/index.js'
+```
+
+**In your template:**
+```html
+<gds-button (click)="handleEvent($event)">Click me!</gds-button>
+```
+
+## Using with React
+
+React 19 has built-in support for web components, and Green Core automatically generates typed JSX wrappers for all components and icons. This means you can use the components directly in your JSX templates.
+
+For example:
+
+```ts
+
+```
+
+Then, in your JSX template:
+
+```tsx
+ console.log('Hello')}>
+  Click me!
+
+```
+
+These imports are tree-shakable and the underlying web components will be defined automatically on first use.
+
+For full details on how to use Green Core with React, and how to handle older React versions (pre 19), see the full [React guide](/docs/guides-react--docs).
+
+## Using with Lit
+
+The components in Green core rely on the Lit framework for their internal implementations, and it is of course also possible to use the components in applications or other components using Lit.
+
+Here is a minimal example:
+
+```ts
+
+// This custom `html` template literal tag from Green Core extends the default `lit-html` tag to handle element version scoping.
+
+// Import the components that you need
+import '@sebgroup/green-core/components/button/index.js'
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+  static styles = css``
+
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`<gds-button>Click me!</gds-button>`
+  }
+}
+```

package/generated/mcp/guides/migration.md

@@ -0,0 +1,61 @@
+# Migration guides
+
+This document contains instructions on how to update to each new major version from the previous version.
+
+If you need to update several versions at once, it is recommended to follow the steps for one version at a time until you reach the latest one.
+
+Before you begin, make sure you have the latest feature/patch version of your current major version.
+
+## 1.90.2 to 2.x.x
+
+This release contains several updates and refinements related to the design tokens and declarative layout system. A lot of work has gone into aligning things between code and design (Figma), in order to make the design and development process as seamless as possible for everyone.
+
+Many of the breaking changes relates to how tokens are named and used, but we also took the opporutinity to remove some old deprecations and implement some much needed refactorings.
+
+- **Badge:** Removed disabled property in favor for making it a variant.
+  - **Migration step:** use `<gds-badge variant="disabled">` instead of `<gds-badge disabled>`
+- **Badge:** There is no positive variant of the notification property of the badge
+  - **Migration step:** No action necessary, but variant will be ignored when the notification property is set to true.
+- **Button:** Button variants `brand`, `warning` and `notice` is now added. Default button variant is now `neutral` instead of `brand` that was before.
+   - **Migration step:** Add `variant="brand"` to buttons that should have the senior green colour.
+- **Card:** Removed `shadow` prop from `gds-card`
+   - **Migration step:** Use `box-shadow` property instead of `shadow`.
+- **Colors:** Overhaul of color tokens structure and naming conventions.
+  - **Migration step:** Many of the color tokens used for `color`, `background`, `border-color`, and similar properties that accepts color tokens, have changed names. Refer to cheat sheet below for how to update the most commonly used colors.
+- **Container:** Removed `gds-container`
+  - **Migration step:** Use `gds-div` instead.
+- **Dialog:** Removed overflow style by default.
+  - **Migration step:** If you were relying on the overflow behavior for long content to be scrollable, you now need to add overflow styles to the slotted element instead. For example, wrap the content in a `<gds-div>` with overflow and height set.
+- **Divider:** Removed levels from Divider since it's no longer relevant due to border lot being a part of the levels structure.
+  - **Migration step:** If you have been using the levels prop to control the color you should now insted use the color prop to set the possible colors on the divider. See color documentation to see possible border colors.
+- **Font:** `font-size` changed to `font`, and font tokens updated.
+  - **Migration step:** Change all occurences of the `font-size` style expression property and replace with font. Add font-weight to token name. Example: `<gds-text font-size="body-m">` --> `<gds-text font="body-regular-m">`
+  - **Note:** Because the `font` shorthand property includes the `font-family` property, components now expect the `SEB SansSerif GDS` font-family to be present, whereas before they just inherited `font-family` from higher in the document. Make sure you import the `SEB SansSerif GDS` font from the `@sebgroup/fonts` package and include the font declaration CSS from there.
+- **Icon:** Removed deprecated `width` and `height` properties.
+  - **Migration step:** Use the `size` property instead.
+- **Spacer:** Removed `gds-spacer`
+  - **Migration step:** Use `gds-div` instead, and set height using the `height` property.
+- **Theme:** Default design-version of `gds-theme` is changed to `2023`
+  - **Migration step:** To keep 2016 style, set the design-version attribute to "2016" explicitly.
+- **Theme:** `gds-theme` now sets the `color` CSS property by default.
+  - **Migration step:** If you were relying on inheriting `color` from higher in the document, you need to override this now by setting the `color` CSS property explicitly.
+
+### Color token migration cheat-sheet for the most commonly used colors
+
+**Background**
+- primary -> neutral-01
+- secondary -> neutral-02
+- tertiary -> neutral-03
+- positive -> positive-01
+- negative -> negative-01
+
+**Color**
+- primary -> neutral-01
+- secondary -> neutral-02
+- tertiary -> neutral-03
+- positive -> positive-01
+- negative -> negative-01
+
+**Border**-color
+- primary -> subtle-01
+- secondary -> strong

package/generated/mcp/guides/react.md

@@ -0,0 +1,78 @@
+# Using Green Core components with React
+
+## React 19
+
+React 19 has built-in support for web components, and Green Core automatically generates typed JSX wrappers for all components and icons. This means you can use the components directly in your JSX templates.
+
+For example:
+
+```ts
+
+```
+
+Then, in your JSX template:
+
+```tsx
+ console.log('Hello')}>
+  Click me!
+
+```
+
+These imports are tree-shakable and the underlying web components will be defined automatically on first use.
+
+Then, you can use the component in your JSX template as shown above.
+
+### Events
+
+All events in Green Core has a corresponding CamelCased version that you can use in React. For example, if you see an event called `gds-ui-state`, you can use `onGdsUiState` in react.
+
+### Web component quirks with React
+
+There are a few quirks to be aware of when using web components with React:
+- **Event handling**: React does not apply some of its regular conventions to web components, for example, when you use `<input>` in React, it will automatically map the `input` event to the `onChange` callback. When using a web component, you need to explicity listen to the events you are interested in. For example, if you want to listen to the `input` event of a web component, you need to use `onInput` instead of `onChange`.
+- **State synchronization**: React does not automatically enforce state synchronisation on form controls on dispatch of the input event, so to ensure that your state is in sync with the component, you need to use `onInput` and explicitly update your state there. In other words, web components do not act like fully controlled components in React, unless you explicitly set them up that way.
+
+  Example:
+  ```tsx
+  const [email, setEmail] = useState('')
+  // ...
+  <GdsInput
+    label={'Email'}
+    value={email} // <-- Whenever `email` is changed, this will update, like you'd expect
+    validator={requiredValidator}
+    onInput={(e) => setEmail((e.target as HTMLInputElement).value)} // <-- But if the `setEmail` was omitted here,
+    // state would get out of sync when the user types, as React will not enforce it behind the scenes as it does
+    // with regular inputs
+  />
+  ```
+  Check out [this](https://github.com/seb-oss/green/blob/main/apps/react-lib-dev/src/app/green-core-form.tsx) for a full example of a form with validation in React.
+
+## Transitional styles
+
+If you are using the 2016 design, you need to add transitional styles. You can import them like this and register separately:
+
+```ts
+
+ButtonStyles.register()
+```
+
+## React 18 and older
+
+React 18 and older versions do not have proper built-in support for web components. You can still use Green Core components in your React application, but you need to provide a wrapper for each component.
+You can use the `createComponent` function from `@lit/react` to create these wrappers.
+
+Here is an example:
+
+```ts
+
+ButtonStyles.register()
+
+export const GdsButton = createComponent({
+  tagName: getScopedTagName('gds-button'),
+  elementClass: GdsButtonClass,
+  react: React,
+  events: { onClick: 'click' }, // Event callbacks need to be explicitly mapped to DOM events
+})
+```
+
+Then you can just use `` like a regular React component.