@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251218145150154

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

@@ -0,0 +1,5 @@
+# gds-list-item
+
+**Class**: `GdsListItem`
+
+**Tag**: `<gds-list-item>`

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

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

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

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

package/generated/mcp/mask/angular.md

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

package/generated/mcp/mask/api.md

@@ -0,0 +1,77 @@
+# gds-mask
+
+**Class**: `GdsMask`
+
+**Tag**: `<gds-mask>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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> ``` |
+| `'mask-image'` | `string \| undefined` | `-` |  |
+| `'mask-size'` | `string` | `'cover'` |  |
+| `'mask-repeat'` | `string` | `'no-repeat'` |  |
+| `'mask-position'` | `string` | `'center'` |  |
+| `'backdrop-filter'` | `string \| undefined` | `-` | Controls the backdrop-filter property of the container. When you want to apply a backdrop blur filter to the container you can use this property.  ```html <gds-mask backdrop-filter="20px"></gds-mask> ```  The above example will apply a backdrop blur filter of `20px`.   The filter also support breakpoint syntax like this:  ```html <gds-mask backdrop-filter="s{20px} m{40px} l{60px}"></gds-mask> ```  The above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices. |
+| `position` | `string \| undefined` | `'relative'` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
+| `display` | `string \| undefined` | `'flex'` | Controls the display property. Supports all valid CSS display values. |
+| `inset` | `string \| undefined` | `'0'` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` 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. |
+| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` 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> ``` |
+| `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. |

package/generated/mcp/mask/index.json

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

package/generated/mcp/mask/react.md

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

package/generated/mcp/menu-button/angular.md

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

package/generated/mcp/menu-button/api.md

@@ -0,0 +1,54 @@
+# gds-menu-button
+
+**Class**: `GdsMenuButton`
+
+**Tag**: `<gds-menu-button>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `disabled` | `boolean` | `false` | Whether the menu-button is disabled. |
+| `label` | `string` | `''` | The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot. |
+| `href` | `string` | `''` | When set, the underlying button will be rendered as an anchor element. |
+| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Where to display the linked URL. Only used when href is present. |
+| `rel` | `string \| undefined` | `-` | The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to "noreferrer noopener" for security reasons when target is set. |
+| `download` | `string \| undefined` | `-` | Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present. |
+| `compact` | `boolean` | `false` | The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot. |
+| `selected` | `boolean` | `false` | Whether the menu button is selected |
+| `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. |
+| `'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 |
+|------|------|-------------|
+| `click` | `MouseEvent` | Fired when the button is clicked. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Content to be displayed as the button label. |
+| `lead` | An optional slot that allows a `gds-icon` element to be placed before the label. |
+| `trail` | An optional slot that allows a `gds-icon` element to be placed after the label. |
+
+
+## Routing Support
+
+This component supports routing via the `href` property.

package/generated/mcp/menu-button/guidelines.md

@@ -0,0 +1,39 @@
+# Menu button
+
+A menu button combines button and link behaviors for navigation menus.
+
+
+## Overview
+
+### Usage
+
+Use the menu button to create clear and accessible navigation. Choose the appropriate combination of text and icon depending on the context:
+
+*   **Text only** is best for straightforward links where the label clearly communicates the destination.
+    
+*   **Text with icon** adds clarity, especially when the icon reinforces the meaning (e.g., a user icon for profile-related links).
+    
+*   **Icon only** can be used when space is limited, but only if the icon is widely recognized and its meaning is clear.
+    
+
+Menu buttons have a selected state that visually indicate the current page or section.
+
+### Sizes
+
+The menu button comes in three sizes to fit different layout needs and navigation contexts:

+
+*   **Large** - Typically used in primary navigation where space allows for larger, more prominent buttons. It provides good readability and clear touch targets.
+    
+*   **Medium** - Works well when space is limited but readability and clarity are still important.
+    
+*   **Small** - Optimized for tighter layouts and smaller viewports. The text and icon are vertically aligned to maintain visual balance in compact spaces, such as in mobile navigation or secondary toolbars.
+    
+
+Regardless of size, the height of the menu button will adapt to match the height set by the container. This ensures consistent alignment and spacing across the entire navigation.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for menu buttons

package/generated/mcp/menu-button/index.json

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

package/generated/mcp/menu-button/react.md

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

package/generated/mcp/menu-heading/angular.md

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

package/generated/mcp/menu-heading/api.md

@@ -0,0 +1,12 @@
+# gds-menu-heading
+
+**Class**: `GdsMenuHeading`
+
+**Tag**: `<gds-menu-heading>`
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | The default slot for the menu heading content. |

package/generated/mcp/menu-heading/index.json

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

package/generated/mcp/menu-heading/react.md

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

package/generated/mcp/menu-item/angular.md

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

package/generated/mcp/menu-item/api.md

@@ -0,0 +1,5 @@
+# gds-menu-item
+
+**Class**: `GdsMenuItem`
+
+**Tag**: `<gds-menu-item>`

package/generated/mcp/menu-item/index.json

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

package/generated/mcp/menu-item/react.md

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

package/generated/mcp/option/angular.md

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

package/generated/mcp/option/api.md

@@ -0,0 +1,29 @@
+# gds-option
+
+**Class**: `GdsOption`
+
+**Tag**: `<gds-option>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `any` | `-` | The value of the option. |
+| `hidden` | `boolean` | `-` | Controls whether the option is visible or not. |
+| `selected` | `boolean` | `false` | Returns true if the option is selected. Setting this property will select or unselect the option. |
+| `isPlaceholder` | `boolean` | `false` | Sets this option as a placeholder. A placehodler option does not have a value and will act as the default option.  In a multiple select listbox, placeholder options will not be rendered in the list. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-select` | `CustomEvent<any>` | Fired when the option is selected. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | The default slot. Custom content can be used to display the option. |

package/generated/mcp/option/index.json

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

package/generated/mcp/option/react.md

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

package/generated/mcp/pagination/angular.md

@@ -0,0 +1,26 @@
+# gds-pagination - Angular
+
+## Import
+
+```typescript
+import { GdsPaginationComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-pagination>
+  <!-- content -->
+</gds-pagination>
+```
+
+## 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-page-change` | `gdsPageChange` | `(gdsPageChange)="handler($event)"` |
+| `gds-rows-change` | `gdsRowsChange` | `(gdsRowsChange)="handler($event)"` |

package/generated/mcp/pagination/api.md

@@ -0,0 +1,43 @@
+# gds-pagination
+
+**Class**: `GdsPagination`
+
+**Tag**: `<gds-pagination>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `page` | `number` | `1` | Sets the active page, initially the first page. |
+| `rows` | `number` | `10` | Sets the numbers of rows to show, defaults to 10 |
+| `total` | `number` | `0` |  |
+| `options` | `array` | `[5, 10, 25, 50]` | Options array to set the nunber of items per page. Defaults to `[5, 10, 25, 50]` |
+| `jump` | `boolean` | `false` | Enables first and last button |
+| `density` | `DensityMode` | `'comfortable'` | Controls density mode on pagination Accepts: `comfortable`, `compact`, `spacious` |
+| `label` | `string` | `''` | The text summary to display on the left side (e.g. "1-10 of 100"). If a slot named "label" is provided, this property is ignored. |
+| `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. |
+| `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. |
+| `'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-page-change` | `CustomEvent<any>` | Fired when the active page changes. |
+| `gds-rows-change` | `CustomEvent<any>` | Fired when the rows per page value changes. |

package/generated/mcp/pagination/guidelines.md

@@ -0,0 +1,14 @@
+# Pagination
+
+Pagination helps users navigate large result sets by dividing content into clear, manageable pages.
+
+
+## Overview
+
+### Usage
+
+*   Use pagination for long lists such as tables, search results, or content listings.
+    
+*   Pagination is preferred over infinite scroll when users need overview, comparison, or predictable navigation.
+    
+*   Always associate pagination with the content it controls.

package/generated/mcp/pagination/index.json

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