@sebgroup/green-core 2.21.0-rc.20251218133405834 → 2.21.0-rc.20260112150926042

package/generated/mcp/datepicker/guidelines.md

@@ -0,0 +1,41 @@
+# Datepicker
+
+⁠The datepicker allows users to select a date.
+
+
+## Overview
+
+### Features
+
+*   Configurable date format display
+    
+*   `plain` mode to hide labels and error messages
+    
+*   Clearable for quick state reset
+    
+*   Min and max dates
+    
+*   Can be configured with visible or hidden week numbers
+    
+*   Individual dates can be marked as disabled in the calendar
+    
+*   Buttons in the calendar footer are configurable
+
+### Usage
+
+Use datepicker when a complete date should be entered.
+
+### Size
+
+The datepicker comes in two sizes.
+
+*   **Large** (default)
+    
+*   **Small**: used in tables and in some special cases where the space is very limited.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for date pickers

package/generated/mcp/datepicker/index.json

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

package/generated/mcp/datepicker/react.md

@@ -0,0 +1,26 @@
+# gds-datepicker - React
+
+## Import
+
+```typescript
+import { GdsDatepicker } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsDatepicker>
+  {/* content */}
+</GdsDatepicker>
+```
+
+## Event Handling
+
+Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
+
+| Web Component Event | React Handler Prop | Handler Example |
+|---------------------|--------------------|-----------------|
+| `change` | `onChange` | `onChange={handler}` |
+| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |

package/generated/mcp/details/angular.md

@@ -0,0 +1,25 @@
+# gds-details - Angular
+
+## Import
+
+```typescript
+import { GdsDetailsComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-details>
+  <!-- content -->
+</gds-details>
+```
+
+## Event Handling
+
+Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
+
+| Web Component Event | Angular Output | Handler Example |
+|---------------------|----------------|-----------------|
+| `gds-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |

package/generated/mcp/details/api.md

@@ -0,0 +1,48 @@
+# gds-details
+
+Details component that provides collapsible content sections.
+
+**Class**: `GdsDetails`
+
+**Tag**: `<gds-details>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `summary` | `string` | `''` | The summary text displayed in the details header |
+| `name` | `string` | `''` | Group identifier for details behavior synchronization |
+| `open` | `boolean` | `false` | Controls the expanded state of the details |
+| `size` | `DetailsSize` | `'large'` | Controls the size variant of the details |
+| `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. |
+| `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. |
+| `'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. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-ui-state` | `CustomEvent<any>` | Fired when details opens or closes |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Default slot for details content |

package/generated/mcp/details/guidelines.md

@@ -0,0 +1,24 @@
+# Details
+
+The details component is a collapsible section that helps organize and hide content until needed.
+
+
+## Overview
+
+### Usage
+
+Details provide similar semantics and functionality as the native `<details>` html element, including the ability to connect several details together to form an accordion.
+
+Accordions or single details components are commonly used to manage dense information in interfaces like FAQs, settings panels, or forms. Saving space, reducing cognitive overload, and improving scannability while maintaining a clean, organized layout.
+
+Use it when presenting large amounts of secondary or optional information that users don’t need to see all at once.
+
+### Size
+
+The details component comes in two sizes:
+
+*   **Large** (default)
+    
+*   **Small**
+
+### Do's and don'ts

package/generated/mcp/details/index.json

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

package/generated/mcp/details/react.md

@@ -0,0 +1,25 @@
+# gds-details - React
+
+## Import
+
+```typescript
+import { GdsDetails } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsDetails>
+  {/* content */}
+</GdsDetails>
+```
+
+## Event Handling
+
+Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
+
+| Web Component Event | React Handler Prop | Handler Example |
+|---------------------|--------------------|-----------------|
+| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |

package/generated/mcp/dialog/angular.md

@@ -0,0 +1,27 @@
+# gds-dialog - Angular
+
+## Import
+
+```typescript
+import { GdsDialogComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-dialog>
+  <!-- content -->
+</gds-dialog>
+```
+
+## Event Handling
+
+Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
+
+| Web Component Event | Angular Output | Handler Example |
+|---------------------|----------------|-----------------|
+| `gds-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |
+| `gds-close` | `gdsClose` | `(gdsClose)="handler($event)"` |
+| `gds-show` | `gdsShow` | `(gdsShow)="handler($event)"` |

package/generated/mcp/dialog/api.md

@@ -0,0 +1,70 @@
+# gds-dialog
+
+**Class**: `GdsDialog`
+
+**Tag**: `<gds-dialog>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Whether the dialog is open. The state of the dialog can be controlled either by setting this property or by calling the `show()` and `close()` methods. |
+| `heading` | `string \| undefined` | `-` | The dialog's heading. |
+| `variant` | `'default' \| 'slide-out'` | `'default'` | The dialog's variant. |
+| `placement` | `'initial' \| 'top' \| 'bottom' \| 'left' \| 'right'` | `'initial'` | The dialog's placement. |
+| `scrollable` | `boolean` | `false` | Whether the inner content of the dialog should have scrollable overflow. Scroll will appear if the content exceeds the dialog's height, which can be controlled using the `height` property.  This property have no effect if the `dialog` slot is used. In that case, you need to add overflow styles to the content inside the `dialog` slot. |
+| `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. |
+| `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. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-ui-state` | `CustomEvent<any>` | Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing. |
+| `gds-close` | `CustomEvent<any>` | Fired when the dialog is closed |
+| `gds-show` | `CustomEvent<any>` | Fired when the dialog is opened |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | The content of the dialog |
+| `trigger` | The trigger button for the dialog |
+| `footer` | The footer of the dialog |
+| `dialog` | Complete override of the dialog content, including header and footer |
+
+
+## Methods
+
+### `show(reason?: string): void`
+
+Opens the dialog.
+
+**Parameters:**
+
+- `reason`: `string` _(optional)_
+
+### `close(reason: string, returnValue: any): void`
+
+Closes the dialog.
+
+**Parameters:**
+
+- `reason`: `string`
+- `returnValue`: `any`

package/generated/mcp/dialog/guidelines.md

@@ -0,0 +1,35 @@
+# Dialog
+
+⁠A dialog appears in front of content to provide critical information or ask for a decision.
+
+
+## Overview
+
+### Features
+
+Dialogs are modal, meaning they block interaction with the rest of the application or interface until the user addresses the dialog (e.g., by clicking a button, entering input, or closing it). This ensures the user focuses on the dialog's content before returning to the main workflow, and also ensures that keyboard and screen reader focus is kept within the dialog.
+
+By default, the dialog will close when the user clicks the backdrop, but this behavior can be opted out from if the dialog needs to stay open until a flow is completed, for example.
+
+### Variants
+
+The dialog can be shown either as a regular dialog window or as a slide-out.
+
+#### Regular
+
+The regular window is positioned in the center of the screen.
+
+#### Slide-out
+
+The slide-out is positioned on the right-hand side and always takes up the full height of the viewport (minus padding). Height and width can be customized to suite various needs.
+
+### Usage
+
+Dialogs are powerful tools for focusing user attention, but their use should be deliberate to avoid disrupting the user experience.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for dialogs

package/generated/mcp/dialog/index.json

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

package/generated/mcp/dialog/react.md

@@ -0,0 +1,27 @@
+# gds-dialog - React
+
+## Import
+
+```typescript
+import { GdsDialog } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsDialog>
+  {/* content */}
+</GdsDialog>
+```
+
+## Event Handling
+
+Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
+
+| Web Component Event | React Handler Prop | Handler Example |
+|---------------------|--------------------|-----------------|
+| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |
+| `gds-close` | `onGdsClose` | `onGdsClose={handler}` |
+| `gds-show` | `onGdsShow` | `onGdsShow={handler}` |

package/generated/mcp/div/angular.md

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

package/generated/mcp/div/api.md

@@ -0,0 +1,72 @@
+# gds-div
+
+**Class**: `GdsDiv`
+
+**Tag**: `<gds-div>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `gap` | `string \| undefined` | `-` | Style Expression Property that controls the `gap` property. Only accepts space tokens. |
+| `'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. |
+| `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. |

package/generated/mcp/div/guidelines.md

@@ -0,0 +1,3 @@
+# Div
+
+Div is a base element in the declarative layout system.

package/generated/mcp/div/index.json

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

package/generated/mcp/div/react.md

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

package/generated/mcp/divider/angular.md

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

package/generated/mcp/divider/api.md

@@ -0,0 +1,21 @@
+# gds-divider
+
+**Class**: `GdsDivider`
+
+**Tag**: `<gds-divider>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string \| undefined` | `-` | Controls the color property of the divider. Supports all the color tokens from the design system.  You can apply color like this:  ```html <gds-divider color="interactive"></gds-divider> ``` |
+| `size` | `string \| undefined` | `-` | Controls the size property of the divider. Supports all the space tokens from the design system.  You can apply size like this:  ```html <gds-divider size="2xl"></gds-divider> ```  The above example will apply the size style of 2xl. |
+| `opacity` | `string \| undefined` | `-` | Controls the opacity property of the divider. Supports all the opacity tokens from the design system.  You can apply opacity like this:  ```html <gds-divider opacity="0.2"></gds-divider> ``` The above example will apply the opacity style of base400. |
+| `role` | `string \| null` | `null` | Use the role attribute primarily if you only want the divider to be a visual element.  ```html <!-- This divider will not be announced as a separator or thematic break --> <gds-divider role="presentation"></gds-divider> ``` |
+| `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. |

package/generated/mcp/divider/guidelines.md

@@ -0,0 +1,24 @@
+# Divider
+
+Divider creates visual and semantic separation between content.
+
+
+## Overview
+
+### Features
+
+#### Colors
+
+The color of the divider line can be set to a color token.
+
+#### Spacing
+
+Spacing around the divider can be controlled using the `size` attribute.
+
+### Usage
+
+Use dividers to support visual hierarchy when headings or spacing alone aren’t sufficient, such as between groups of menu items.
+
+By default dividers have a semantic meaning in the browser but it can be marked as presentational using `role="presentation"` .
+
+### Do's and don'ts

package/generated/mcp/divider/index.json

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

package/generated/mcp/divider/react.md

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

package/generated/mcp/dropdown/angular.md

@@ -0,0 +1,30 @@
+# gds-dropdown - Angular
+
+## Import
+
+```typescript
+import { GdsDropdownComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-dropdown>
+  <gds-option>...</gds-option>
+  <gds-menu-heading>...</gds-menu-heading>
+</gds-dropdown>
+```
+
+## Event Handling
+
+Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
+
+| Web Component Event | Angular Output | Handler Example |
+|---------------------|----------------|-----------------|
+| `change` | `change` | `(change)="handler($event)"` |
+| `input` | `input` | `(input)="handler($event)"` |
+| `gds-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |
+| `gds-filter-input` | `gdsFilterInput` | `(gdsFilterInput)="handler($event)"` |
+| `gds-input-cleared` | `gdsInputCleared` | `(gdsInputCleared)="handler($event)"` |