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

package/generated/mcp/sensitive-number/api.md

@@ -0,0 +1,81 @@
+# gds-sensitive-number
+
+**Class**: `GdsSensitiveNumber`
+
+**Tag**: `<gds-sensitive-number>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `hide` | `boolean` | `false` | When true, hides the sensitive number. |
+| `value` | `number \| string \| undefined` | `-` | The numerical value to display. |
+| `locale` | `string \| undefined` | `-` | The locale used for number formatting. |
+| `currency` | `string \| undefined` | `-` | The currency used when formatting numbers. |
+| `decimals` | `number \| undefined` | `-` | The number of decimal places to display. |
+| `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/sensitive-number/index.json

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

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

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

package/generated/mcp/signal/angular.md

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

package/generated/mcp/signal/api.md

@@ -0,0 +1,12 @@
+# gds-signal
+
+**Class**: `GdsSignal`
+
+**Tag**: `<gds-signal>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string \| undefined` | `-` | Change signal color based on variant. The color can be customized using the `color` property. |

package/generated/mcp/signal/guidelines.md

@@ -0,0 +1,14 @@
+# Signal
+
+A signal draws attention to notifications and new content.
+
+
+## Overview
+
+### Usage
+
+The signal is mainly used on buttons and menu buttons. The signal's style matches the button's rank and variant by default.
+
+### Example
+
+On the intranet we use the signal on the “What's new?”-button to indicate a new function or feauture has been released. The button will trigger a popover with more information about what is new.

package/generated/mcp/signal/index.json

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

package/generated/mcp/signal/react.md

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

package/generated/mcp/spinner/angular.md

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

package/generated/mcp/spinner/api.md

@@ -0,0 +1,38 @@
+# gds-spinner
+
+**Class**: `GdsSpinner`
+
+**Tag**: `<gds-spinner>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `-` | The text to display as a label for the spinner |
+| `labelPosition` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` |  |
+| `showLabel` | `boolean` | `false` | Whether to display the label text visually If false, the label is still available for screen readers |
+| `cover` | `boolean` | `false` | When true, covers the parent container with a semi-transparent backdrop Parent must have position: relative |
+| `fullscreen` | `boolean` | `false` | When true, covers the entire viewport with a fixed position backdrop |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size variant of the spinner |
+| `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. |
+| `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. |
+| `'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-spinner-connected` | `CustomEvent<any>` | When the spinner is connected and visible |

package/generated/mcp/spinner/guidelines.md

@@ -0,0 +1,6 @@
+# Spinner
+
+
+## UX Guidelines
+
+### Writing UX text for spinners

package/generated/mcp/spinner/index.json

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

package/generated/mcp/spinner/react.md

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

package/generated/mcp/table/angular.md

@@ -0,0 +1,27 @@
+# gds-table - Angular
+
+## Import
+
+```typescript
+import { GdsTableComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-table>
+  <!-- content -->
+</gds-table>
+```
+
+## 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-table-data-loaded` | `gdsTableDataLoaded` | `(gdsTableDataLoaded)="handler($event)"` |
+| `gds-table-data-error` | `gdsTableDataError` | `(gdsTableDataError)="handler($event)"` |
+| `gds-table-selection` | `gdsTableSelection` | `(gdsTableSelection)="handler($event)"` |

package/generated/mcp/table/api.md

@@ -0,0 +1,72 @@
+# gds-table
+
+**Class**: `GdsTable`
+
+**Tag**: `<gds-table>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `array` | `[5, 10, 20, 50, 100]` | Configurable options for rows per page. Accepts: number array (e.g., `[5, 10, 20, 50, 100]`) |
+| `page` | `number` | `1` | Current page number in pagination. |
+| `rows` | `number` | `10` | Number of rows displayed per page. |
+| `columns` | `Types.Column[]` | `[]` | Defines table column structure. Accepts: array of column configurations with keys, labels, etc. |
+| `data` | `(request: Types.Request) => Promise<Types.Response<T>>` | `-` | Asynchronous data provider function. Accepts: function that returns Promise with rows and total count |
+| `density` | `Types.Density` | `'comfortable'` | Controls row density. Accepts: `comfortable`, `compact`, `spacious` |
+| `selectable` | `boolean` | `false` | Enables row selection functionality. |
+| `responsive` | `boolean` | `false` | Transforms table layout for mobile screens. |
+| `plain` | `boolean` | `false` | Removes table header and footer. |
+| `searchable` | `boolean` | `false` | Adds search input for data filtering. |
+| `settings` | `boolean` | `false` | Enables column visibility settings. |
+| `striped` | `boolean` | `false` | Applies alternating row background colors. |
+| `actions` | `Types.Actions \| ((row: T, index: number) => any) \| undefined` | `-` | Defines row-level actions. Accepts: action configuration or custom rendering function |
+| `nocache` | `boolean` | `false` | Disables data caching mechanism. |
+| `dataLoadKey` | `string \| undefined` | `-` | Key to trigger data reloading when changed. Setting this to a new value forces the table to clear the cache and request new data from the data provider.  The value can be any string that is not equal to the previous value. |
+| `height` | `string \| undefined` | `-` | Style Expression Property that controls the height property. Supports space tokens and all valid CSS width values.  Sets the height of the table content area and enables vertical scrolling with a sticky header that remains visible. |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | `'secondary'` | Sets the visual variant of the table container card. Forwards to the underlying `gds-card` component. Accepts: `primary`, `secondary` (default), `tertiary`.  > Variant naming will change in the next major release. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-table-data-loaded` | `CustomEvent<any>` | Fired when data is successfully loaded. |
+| `gds-table-data-error` | `CustomEvent<any>` | Fired when data loading fails. |
+| `gds-table-selection` | `CustomEvent<any>` | Fired when row selection changes. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| ``header-lead`` | Content displayed at the start of the table header (after search). |
+| ``header-trail`` | Content displayed at the end of the table header (before settings). |
+| ``error`` | Custom error state content when data loading fails. |
+| ``empty`` | Custom empty state content when no data is available. |
+| ``no-results`` | Custom no results content when search returns empty. |
+
+
+## Methods
+
+### `clearSelection(): void`
+
+Public API
+Clear all selections
+
+### `selectAll(): void`
+
+Select all rows
+
+### `setSelection(indices: number[]): void`
+
+Select specific rows by indices
+
+**Parameters:**
+
+- `indices`: `number[]`
+
+### `getSelection(): { indices: number[]; data: T[] }`
+
+Get selected row data

package/generated/mcp/table/guidelines.md

@@ -0,0 +1,161 @@
+# Table
+
+A table displays structured data for overview and comparison.
+
+
+## Overview
+
+The table component is used to display structured data in rows and columns. It supports overview, comparison and data-driven tasks where users need to scan or interact with multiple items. Tables should represent meaningful data relationships and must not be used for layout or visual alignment.
+
+### Density
+
+The density property allows customizing the table's visual spacing with these options:
+
+*   **Comfortable** (Default) - Standard spacing for balanced readability
+    
+*   **Compact** - Reduced spacing to maximize information density
+    
+*   **Spacious** - Increased spacing for enhanced readability
+
+### Variants
+
+The `variant` property controls the visual style of the table container card. There are three variants available:
+
+1.  **Primary**
+    
+2.  **Secondary**
+    
+3.  **Tertiary**
+    
+
+**Naming will change on the next major release:**  
+Primary - Neutral 01, Secondary - Neutral 02, Tertiary - Neutral 02 (Outlined boolean).
+
+### Striped
+
+When the `striped`option is enabled, alternating background colors are applied to even rows.
+
+### Sorting
+
+Table head cells can support sorting when enabled. Sorting helps users organise data and compare values within a column.
+
+*   A sorting indicator is shown on hover when sorting is enabled.
+    
+*   Selecting a column head sorts the table by that column.
+    
+*   The sorting indicator remains visible while the column is sorted.
+    
+*   Selecting the same column head again reverses the sort order.
+    
+*   In right-aligned columns, the sorting indicator is positioned to the left, with the column label placed to the right.
+    
+*   Only one column can be sorted at a time.
+
+#### Sorting guidelines
+
+*   Enable sorting only when it adds clear value for the user.
+    
+*   Use sorting primarily for columns with comparable values, such as numbers, dates or statuses.
+    
+*   Avoid enabling sorting on columns where order is not meaningful.
+    
+*   Ensure the sorting state is clearly communicated visually.
+
+#### Sorting accessibility considerations
+
+*   Sorting must be available using keyboard interaction.
+    
+*   The current sort state should be communicated to assistive technologies.
+    
+*   The sorting indicator should not be the only way to convey sorting state.
+
+### Interactions
+
+Tables may support interaction when it helps users complete their task. Only add interaction when it adds clear value and does not reduce clarity. Supported behaviours may include:
+
+*   Column sorting
+    
+*   Row selection
+    
+*   Bulk actions
+    
+*   Interactive cells such as links or status indicators
+
+### Cell
+
+The table supports multiple cell types, each mapped to corresponding Green Design System components and their available properties. Any cell type can be used in the main value, lead or trail slot.
+
+1.  **Badge**
+    
+2.  **Image**
+    
+3.  **Icon**
+    
+4.  **Button**
+    
+5.  **Link**
+    
+6.  **Context menu**
+    
+7.  **Formatted text - Number, account, date**
+
+### Actions
+
+All the cell content types can be used on actions. Actions accepts an array of cell types such as buttons. When you need to use two buttons align them to the left. If you have more than two buttons use the context menu. Actions will always show in the end of the row.
+
+### Formatting
+
+**Column justification**  
+Columns are left-aligned by default, with options for right alignment and space-between layouts. This is useful for columns where values and actions need clear separation and consistent alignment across rows.
+
+**Column width and wrapping**  
+Columns can have custom width. When width is set, content will wrap within the cell.
+
+**Cell vertical alignment**  
+Cells are vertically centered by default and can be aligned to the start. Start alignment is recommended when content wraps, ensuring consistent top alignment across rows.
+
+**Sortable columns**  
+Columns are left-aligned by default, with the label on the left and the sorting indicator on the right. For right-aligned columns, the sorting indicator is placed on the left and the label on the right.
+
+### Responsive
+
+When the responsive option is enabled, the table adapts its layout for smaller screens. Horizontal scrolling is used until the viewport is smaller than 760px, at which point rows are restructured into a card-like format with column names on the left and corresponding values on the right.
+
+### Searchable 
+
+If the table is searchable (set by a boolean), the header shows a search field.
+
+### Settings
+
+If you enable the settings, a dropdown for choosing columns is visable.
+
+### Pagination
+
+The pagination is placed in the footer, ([read more about the pagination here](https://seb.io/component/pagination)), and displays an item range indicating the currently visible rows and the total number of items, for example “1–10 of 100”.
+
+### Plain
+
+When the `plain` option is enabled, the table is rendered without a header or footer, displaying only the data table.
+
+### Slots
+
+The table supports state slots for error, empty and no results states. The table header includes dedicated slots for other Green Design System components, such as dropdowns or buttons, used for filtering and exporting data.
+
+### Guidelines
+
+*   Use clear and descriptive column labels.
+    
+*   Keep the structure predictable and consistent.
+    
+*   Text content should be left-aligned for readability.
+    
+*   Numeric values should be right-aligned, preferably aligned by decimal, to support comparison.
+    
+*   Avoid repeating information in table cells when it can be communicated through the column header.
+
+### Do's and Don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for table

package/generated/mcp/table/index.json

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

package/generated/mcp/table/react.md

@@ -0,0 +1,27 @@
+# gds-table - React
+
+## Import
+
+```typescript
+import { GdsTable } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsTable>
+  {/* content */}
+</GdsTable>
+```
+
+## 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-table-data-loaded` | `onGdsTableDataLoaded` | `onGdsTableDataLoaded={handler}` |
+| `gds-table-data-error` | `onGdsTableDataError` | `onGdsTableDataError={handler}` |
+| `gds-table-selection` | `onGdsTableSelection` | `onGdsTableSelection={handler}` |

package/generated/mcp/text/angular.md

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