@sebgroup/green-core 2.20.0 → 2.21.0-rc.20260112142904069

package/generated/mcp/text/api.md

@@ -0,0 +1,76 @@
+# gds-text
+
+**Class**: `GdsText`
+
+**Tag**: `<gds-text>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `string` | `'span'` | Controls the tag of the text. Supports all valid HTML tags like h1, h2, h3, h4, h5, h6, p, span, etc. |
+| `'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-transform'` | `string \| undefined` | `-` | Controls the text-transform property of the text. Supports all valid CSS text-transform values. |
+| `'text-decoration'` | `string \| undefined` | `-` | Controls the text-decoration property of the inner element. Supports all valid CSS text-decoration values. |
+| `lines` | `number \| undefined` | `-` | Controls the number of lines it should show. |
+| `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. |
+| `'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. |

package/generated/mcp/text/guidelines.md

@@ -0,0 +1,3 @@
+# Text
+
+Text summary

package/generated/mcp/text/index.json

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

package/generated/mcp/text/react.md

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

package/generated/mcp/textarea/angular.md

@@ -0,0 +1,25 @@
+# gds-textarea - Angular
+
+## Import
+
+```typescript
+import { GdsTextareaComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-textarea>
+  <!-- content -->
+</gds-textarea>
+```
+
+## 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-input-cleared` | `gdsInputCleared` | `(gdsInputCleared)="handler($event)"` |

package/generated/mcp/textarea/api.md

@@ -0,0 +1,74 @@
+# gds-textarea
+
+**Class**: `GdsTextarea`
+
+**Tag**: `<gds-textarea>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `'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. |
+| `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. |
+| `rows` | `number` | `4` | Rows of the textarea |
+| `supportingText` | `string` | `''` | The supporting text displayed between the label and the field itself |
+| `clearable` | `boolean` | `false` | Whether the field should be clearable or not. Clearable fields will display a clear button when the field has a value. |
+| `resizable` | `'auto' \| 'manual' \| 'false'` | `'auto'` | The resizable attribute of the textarea. It can be set to 'auto', 'manual' or 'false'. When set to 'auto', the textarea will be resizable in the vertical direction based on content. When set to 'manual', the textarea will be resizable in both the vertical and horizontal directions. When set to 'false', the textarea will not be resizable. |
+| `showExtendedSupportingText` | `boolean` | `false` | Whether the supporting text should be displayed or not. |
+| `maxlength` | `any` | `-` | The maximum number of characters allowed in the field. |
+| `size` | `'large' \| 'small'` | `'large'` | Controls the font-size of texts. |
+| `plain` | `boolean` | `false` | Hides the header and the footer, while still keeping the accessible label  Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. |
+| `autocapitalize` | `'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'` | `'off'` | Controls whether and how text input is automatically capitalized as it is entered by the user. |
+| `autocorrect` | `boolean` | `false` | Indicates whether the browser's autocorrect feature is on or off. |
+| `autocomplete` | `string \| undefined` | `-` | Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. |
+| `autofocus` | `boolean` | `false` | Indicates that the input should receive focus on page load. |
+| `spellcheck` | `boolean` | `true` | Enables spell checking on the input. |
+| `wrap` | `'hard' \| 'soft'` | `-` | Indicates how the control should wrap the value for form submission. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea#wrap) for available values. |
+| `enterkeyhint` | `\| 'enter'     \| 'done'     \| 'go'     \| 'next'     \| 'previous'     \| 'search'     \| 'send' \| undefined` | `-` | Used to customize the label or icon of the Enter key on virtual keyboards. |
+| `inputmode` | `\| 'none'     \| 'text'     \| 'decimal'     \| 'numeric'     \| 'tel'     \| 'search'     \| 'email'     \| 'url' \| undefined` | `-` | Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. |
+| `charCounterCallback` | `any` | `charCounterCallbackDefault` | This callback allows for customization of the character counter. It should return a tuple with the first value being the number of remaining characters, and the second value being the variant of the badge. If the second value is `false`, no badge will be shown. |
+| `value` | `string` | `''` | Get or set the value of the form control. |
+| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
+| `required` | `boolean` | `false` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
+| `errorMessage` | `string` | `''` | This can be used to manually control the error message that will be displayed when the control is invalid. |
+| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
+| `label` | `string` | `''` | The label of the form control. |
+| `name` | `string` | `''` |  |
+| `disabled` | `boolean` | `false` | If the input is Disabled |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-input-cleared` | `CustomEvent<any>` | Fired when the clear button is clicked. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `lead` | Accepts `gds-icon-[ICON_NAME]`. Use this to place an icon in the start of the field. |
+| `trail` | Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example. |
+| `extended-supporting-text` | A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button. |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.

package/generated/mcp/textarea/guidelines.md

@@ -0,0 +1,64 @@
+# Textarea
+
+Textarea allow users to input text and digits on multiple lines.
+
+
+## Overview
+
+### Variants
+
+We provide two versions of textarea.
+
+*   **Default**
+    
+*   **Floating label** (coming soon): Can only be used in specific contexts. Limited features due to accessibility.
+
+### Features
+
+#### Label
+
+All input fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.
+
+#### Optional field indicator
+
+We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.
+
+#### Support text
+
+Use this to explain how to fill in the field, for example how to count or what to include.
+
+### Contextual help
+
+If the label and support text aren’t enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
+
+*   Use a tooltip if space is limited.
+    
+*   Use a modal for large amounts of text.
+
+#### Leading icon
+
+A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed.
+
+#### Clearable
+
+To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.
+
+#### Error message
+
+Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.
+
+### Character counter
+
+For fields with a character limit, a counter can be added to show users how many characters they have left.
+
+The counter starts with the maximum allowed characters. As the user types, the remaining characters decrease. When the limit is nearly reached, the counter turns yellow. When or if the user exceeds the limit, the counter turns red.
+
+If the user ignores this and attempts to submit, an error message will appear indicating that the maximum character limit has been reached.
+
+### Resize
+
+The default Textarea has a fixed height based on the expected input. This helps users understand how much text the field is intended for. If the field should be resizable, there are two options:
+
+*   **Automatic**: Adjusts dynamically as the user types.
+    
+*   **Manual**: Users can resize it by dragging the corner.

package/generated/mcp/textarea/index.json

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

package/generated/mcp/textarea/react.md

@@ -0,0 +1,25 @@
+# gds-textarea - React
+
+## Import
+
+```typescript
+import { GdsTextarea } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsTextarea>
+  {/* content */}
+</GdsTextarea>
+```
+
+## 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-input-cleared` | `onGdsInputCleared` | `onGdsInputCleared={handler}` |

package/generated/mcp/theme/angular.md

@@ -0,0 +1,26 @@
+# gds-theme - Angular
+
+## Import
+
+```typescript
+import { GdsThemeComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-theme>
+  <!-- content -->
+</gds-theme>
+```
+
+## 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-color-scheme-changed` | `gdsColorSchemeChanged` | `(gdsColorSchemeChanged)="handler($event)"` |
+| `gds-design-version-changed` | `gdsDesignVersionChanged` | `(gdsDesignVersionChanged)="handler($event)"` |

package/generated/mcp/theme/api.md

@@ -0,0 +1,28 @@
+# gds-theme
+
+**Class**: `GdsTheme`
+
+**Tag**: `<gds-theme>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `colorScheme` | `'light' \| 'dark' \| 'auto'` | `'light'` | The theme mode. Can be `light`, `dark`, or `auto`. |
+| `designVersion` | `'2016' \| '2023'` | `'2023'` | The design version to use. Can be `16` or `23`. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-color-scheme-changed` | `CustomEvent<any>` | Fired when the color scheme changes. |
+| `gds-design-version-changed` | `CustomEvent<any>` | Fired when the design version changes. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | The content to apply the theme to. |

package/generated/mcp/theme/guidelines.md

@@ -0,0 +1,3 @@
+# Theme
+
+Theme summary

package/generated/mcp/theme/index.json

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

package/generated/mcp/theme/react.md

@@ -0,0 +1,26 @@
+# gds-theme - React
+
+## Import
+
+```typescript
+import { GdsTheme } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsTheme>
+  {/* content */}
+</GdsTheme>
+```
+
+## 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-color-scheme-changed` | `onGdsColorSchemeChanged` | `onGdsColorSchemeChanged={handler}` |
+| `gds-design-version-changed` | `onGdsDesignVersionChanged` | `onGdsDesignVersionChanged={handler}` |

package/generated/mcp/video/angular.md

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

package/generated/mcp/video/api.md

@@ -0,0 +1,58 @@
+# gds-video
+
+`gds-video` is a custom video element that provides configurable .mp4 video playback that can be used as background or hero video without controls.
+The video can be customized with different properties like ratio, position, inset, width, height, opacity, fit, and radius.
+
+**Class**: `GdsVideo`
+
+**Tag**: `<gds-video>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `'aspect-ratio'` | `string \| undefined` | `-` | Controls the aspect ratio of the image. Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.  You can apply the aspect ratio like this:  ```html <gds-video aspect-ratio="16/9"></gds-video> ```  The above example will apply the aspect ratio of 16/9.  You can also apply different aspect ratios for different screen sizes like this:  ```html <gds-video aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-video> ```   The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens. |
+| `'object-position'` | `string \| undefined` | `-` | Controls the `object-position` of the video. Supports all common CSS values. |
+| `opacity` | `string \| undefined` | `-` | Controls the opacity property of the image.  You can apply opacity like this:  ```html <gds-img opacity="0.2"></gds-img> ```  The above example will apply the opacity style of 0.2. This is useful when you want to apply a transparent effect to the image when having a darkened background to increase the readability of the text. |
+| `'object-fit'` | `string \| undefined` | `-` | Controls the object-fit property of the image.  You can apply fit like this:  ```html <gds-img object-fit="cover"></gds-img> ```   The above example will apply the object-fit style of cover. |
+| `'pointer-events'` | `string \| undefined` | `-` | Controls the pointer-events property of the video. Supports all valid CSS pointer-events values. |
+| `'border-radius'` | `string \| undefined` | `-` | Controls the border-radius property of the video. Supports all the size tokens from the design system. |
+| `src` | `string \| undefined` | `-` |  |
+| `poster` | `string \| undefined` | `-` |  |
+| `muted` | `boolean \| undefined` | `-` |  |
+| `playsinline` | `boolean \| undefined` | `-` |  |
+| `autoplay` | `boolean \| undefined` | `-` |  |
+| `loop` | `boolean \| undefined` | `-` |  |
+| `videoElement` | `HTMLVideoElement` | `-` |  |
+| `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. |
+| `'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. |
+
+
+## Methods
+
+### `applyVideoSettings(): void`

package/generated/mcp/video/guidelines.md

@@ -0,0 +1,3 @@
+# Video
+
+Video summary

package/generated/mcp/video/index.json

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

package/generated/mcp/video/react.md

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