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

package/generated/mcp/img/angular.md

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

package/generated/mcp/img/api.md

@@ -0,0 +1,39 @@
+# gds-img
+
+**Class**: `GdsImg`
+
+**Tag**: `<gds-img>`
+
+
+## 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-img aspect-ratio="16/9"></gds-img> ``` 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-img aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-img> ```  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. |
+| `'border-radius'` | `string \| undefined` | `-` | Controls the border-radius property of the image. Supports all the size tokens from the design system.  You can apply radius in each corner like this: ```html <gds-img border-radius="none none m m" ></gds-img> ```  Also for different breakpoints like this: ```html <gds-img border-radius="s{xs} m{xs} l{s}"></gds-img> ``` |
+| `'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. |
+| `'object-position'` | `string \| undefined` | `-` | Controls the `object-position` of the img. Supports all common CSS 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. |
+| `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. |
+| `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. |
+| `src` | `string \| undefined` | `-` | The URL of the image |
+| `srcset` | `string \| undefined` | `-` | The srcset attribute for responsive images Format: "image.jpg 1x, image-2x.jpg 2x" or "image-320.jpg 320w, image-640.jpg 640w" |
+| `sizes` | `string \| undefined` | `-` | The sizes attribute for responsive images Format: "(max-width: 320px) 280px, (max-width: 640px) 580px, 800px" |
+| `alt` | `string \| undefined` | `-` | Alternative text description of the image Required for accessibility. Should be empty string if image is decorative. |
+| `loading` | `'lazy' \| 'eager' \| undefined` | `'lazy'` | Loading strategy for the image |
+| `decoding` | `'auto' \| 'sync' \| 'async' \| undefined` | `'auto'` | Decoding strategy for the image |

package/generated/mcp/img/index.json

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

package/generated/mcp/img/react.md

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

package/generated/mcp/index.json

@@ -0,0 +1,142 @@
+{
+  "version": "1.0.0",
+  "generatedAt": "2026-01-12T14:29:30.326Z",
+  "components": "./components.json",
+  "icons": "./icons.json",
+  "guides": [
+    {
+      "title": "Angular Setup Guide",
+      "path": "guides/angular.md",
+      "category": "framework-setup",
+      "description": "Complete setup for Angular projects including wrappers, scoping, forms, and routing integration",
+      "tags": [
+        "angular",
+        "setup",
+        "forms",
+        "routing",
+        "wrapper-library",
+        "scoping"
+      ]
+    },
+    {
+      "title": "React Setup Guide",
+      "path": "guides/react.md",
+      "category": "framework-setup",
+      "description": "Using Green Core with React 19 and legacy versions, including event handling and transitional styles",
+      "tags": [
+        "react",
+        "setup",
+        "react-19",
+        "lit-react",
+        "events"
+      ]
+    },
+    {
+      "title": "Installation & Basic Usage",
+      "path": "guides/installing.md",
+      "category": "getting-started",
+      "description": "General installation instructions, tree-shaking, scoping, and framework-agnostic usage patterns",
+      "tags": [
+        "installation",
+        "setup",
+        "scoping",
+        "tree-shaking",
+        "angular",
+        "react",
+        "lit"
+      ]
+    },
+    {
+      "title": "Troubleshooting Guide",
+      "path": "guides/troubleshooting.md",
+      "category": "troubleshooting",
+      "description": "Common issues and solutions when using Green Core components",
+      "tags": [
+        "troubleshooting",
+        "debugging",
+        "common-issues"
+      ]
+    },
+    {
+      "title": "Migration Guide",
+      "path": "guides/migration.md",
+      "category": "migration",
+      "description": "Guide for migrating between versions and upgrading projects",
+      "tags": [
+        "migration",
+        "upgrade",
+        "breaking-changes"
+      ]
+    },
+    {
+      "title": "Architecture Overview",
+      "path": "concepts/architecture.md",
+      "category": "concepts",
+      "description": "Understanding Green's component hierarchy, primitives, composition patterns, and public API boundaries",
+      "tags": [
+        "architecture",
+        "web-components",
+        "primitives",
+        "composition"
+      ]
+    },
+    {
+      "title": "Design Tokens",
+      "path": "concepts/tokens.md",
+      "category": "concepts",
+      "description": "Token-based design approach covering colors, spacing, typography, shadows, and CSS variable usage",
+      "tags": [
+        "tokens",
+        "theming",
+        "css-variables",
+        "design-system"
+      ]
+    },
+    {
+      "title": "Element Name Scoping",
+      "path": "concepts/scoping.md",
+      "category": "concepts",
+      "description": "Understanding versioned element names and scoping strategies for microfrontends",
+      "tags": [
+        "scoping",
+        "versioning",
+        "microfrontends"
+      ]
+    },
+    {
+      "title": "Localization",
+      "path": "concepts/localization.md",
+      "category": "concepts",
+      "description": "Internationalization and localization support in Green components",
+      "tags": [
+        "localization",
+        "i18n",
+        "internationalization"
+      ]
+    },
+    {
+      "title": "Declarative Layout",
+      "path": "concepts/declarative-layout.md",
+      "category": "concepts",
+      "description": "Using declarative layout components for responsive designs",
+      "tags": [
+        "layout",
+        "responsive",
+        "container",
+        "flex",
+        "grid"
+      ]
+    },
+    {
+      "title": "Transitional Styles",
+      "path": "concepts/transitional-styles.md",
+      "category": "concepts",
+      "description": "Supporting legacy 2016 design with transitional styles",
+      "tags": [
+        "transitional-styles",
+        "legacy",
+        "2016-design"
+      ]
+    }
+  ]
+}

package/generated/mcp/input/angular.md

@@ -0,0 +1,25 @@
+# gds-input - Angular
+
+## Import
+
+```typescript
+import { GdsInputComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-input>
+  <!-- content -->
+</gds-input>
+```
+
+## 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/input/api.md

@@ -0,0 +1,75 @@
+# gds-input
+
+**Class**: `GdsInput`
+
+**Tag**: `<gds-input>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
+| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
+| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
+| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
+| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
+| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
+| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
+| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
+| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
+| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
+| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
+| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
+| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
+| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
+| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
+| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
+| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
+| `supportingText` | `string` | `''` | The supporting text displayed between the label and the field. This text provides additional context or information to the user. |
+| `showExtendedSupportingText` | `boolean` | `false` | Whether the supporting text should be displayed or not. |
+| `clearable` | `boolean` | `false` | Whether the field should be clearable or not. Clearable fields will display a clear button when the field has a value. |
+| `maxlength` | `number` | `-` | The maximum number of characters allowed in the field. |
+| `size` | `'large' \| 'small'` | `'large'` | Controls the font-size of texts and height of the field. |
+| `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. |
+| `type` | `\| 'date'     \| 'datetime-local'     \| 'email'     \| 'number'     \| 'password'     \| 'search'     \| 'tel'     \| 'text'     \| 'time'     \| 'url'` | `'text'` | The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`. |
+| `min` | `number \| string \| undefined` | `-` | The input's minimum value. Only applies to date and number input types. |
+| `max` | `number \| string \| undefined` | `-` | The input's maximum value. Only applies to date and number input types. |
+| `step` | `number \| 'any' \| undefined` | `-` | Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types. |
+| `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. |
+| `enterkeyhint` | `\| 'enter'     \| 'done'     \| 'go'     \| 'next'     \| 'previous'     \| 'search'     \| 'send' \| undefined` | `-` | Used to customize the label or icon of the Enter key on virtual keyboards. |
+| `spellcheck` | `boolean` | `true` | Enables spell checking on the input. |
+| `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 displayed. |
+| `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/input/guidelines.md

@@ -0,0 +1,107 @@
+# Input
+
+An input lets users enter and edit text or numerical values in forms.
+
+
+## Overview
+
+### Variants
+
+To be able to use forms in all context's we provide two versions of input fields.
+
+*   **Default**
+    
+*   Coming soon **Floating label** (label inside): Can only be used in specific contexts. Limited features due to accessibility. Read more about how to use the Floating label on the UX text page [Input field floating label](https://seb.io/component/input/ux-text#input-field-floating-label-5)
+
+#### Sizes
+
+The input field comes in two sizes.
+
+*   **Large**
+    
+*   **Small**: used in tables and in some special cases where the space is very limited.
+
+### 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.
+
+#### 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 are not 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. For example: search fields or card number.
+
+#### 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.
+
+#### Badge
+
+Use it to show what the unit input value is.
+
+For example: EUR
+
+#### 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.
+
+#### Dynamic information
+
+(Not available for Floating label variant) Used to perform comparative calculations next to the field.
+
+#### Placeholder
+
+Avoid using placeholder text (also known as watermark), as it can confuse users into thinking the field is already filled with data. Instructions should not be placed in the field, as they disappear once the user starts typing. Instead, use support text to guide users on what should be entered.
+
+### Do’s and dont’s
+
+
+## UX Guidelines
+
+### Input field default
+
+### Labels
+
+### Single-word or complete sentence
+
+### Write the time period in the label
+
+### Avoid fixed text inside the field
+
+### Display the currency with a badge
+
+### Placeholder text
+
+### Labels do’s and dont’s
+
+### Error message
+
+### Input field floating label
+
+### Do’s and dont’s input field floating label
+
+### Default or floating label?

package/generated/mcp/input/index.json

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

package/generated/mcp/input/react.md

@@ -0,0 +1,25 @@
+# gds-input - React
+
+## Import
+
+```typescript
+import { GdsInput } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsInput>
+  {/* content */}
+</GdsInput>
+```
+
+## 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/link/angular.md

@@ -0,0 +1,25 @@
+# gds-link - Angular
+
+## Import
+
+```typescript
+import { GdsLinkComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-link>
+  <!-- content -->
+</gds-link>
+```
+
+## 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/link/api.md

@@ -0,0 +1,56 @@
+# gds-link
+
+**Class**: `GdsLink`
+
+**Tag**: `<gds-link>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `''` | Provides an accessible name for the link that will be read by screen readers. Use this when: - The link contains only an icon - The visual text needs a different description for screen readers - Additional context is needed for accessibility |
+| `'text-decoration'` | `string \| undefined` | `-` | Controls the text-decoration property of the link. Supports all valid CSS text-decoration values.  Setting `text-decoration` on hover you can do it like this: ```html <gds-link text-decoration="hover:underline">Underline on Hover</gds-link> ``` |
+| `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. |
+| `href` | `string \| undefined` | `-` | URL that the link points to Can be absolute, relative, or fragment identifier |
+| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Specifies where to open the linked document |
+| `rel` | `string \| undefined` | `-` | Specifies the relationship between the current document and the linked document Automatically adds security-related values when target="_blank" |
+| `download` | `string \| boolean \| undefined` | `-` | When present, indicates that the linked resource should be downloaded |
+| `ping` | `string \| undefined` | `-` | Specifies a space-separated list of URLs to which, when the link is followed, POST requests with the body ping will be sent by the browser. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `click` | `MouseEvent` | Fired when the link is clicked. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `main` | Content to be displayed as the link string. |
+| `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/link/guidelines.md

@@ -0,0 +1,43 @@
+# Link
+
+A link navigates users to other pages or sections of content.
+
+
+## Overview
+
+### Usage
+
+Use links for navigation whether it’s within the same page, across pages, or to external sites. A good link is easy to recognize, descriptive, and accessible. It should clearly communicate where it will take the user, even when read out of context (for example, by a screen reader). Avoid using links for actions such as submitting forms or opening modals use buttons instead.
+
+### Variants
+
+#### Leading icon
+
+Use when an icon helps reinforce the meaning of the link (e.g., a document or download icon before the text).
+
+#### Trailing icon
+
+Use for links that lead to another page or outside the current application, such as external websites.
+
+#### Text decoration
+
+Used when a stronger visual indication is needed for example, in long bodies of text or when links need to stand out clearly from surrounding content.
+
+### Do’s and don’ts
+
+
+## UX Guidelines
+
+### Writing UX text for links
+
+### Only include necessary words
+
+### Placing links
+
+### Links within text
+
+### Link outside of the text
+
+### Links before a form component
+
+### Add items to a list

package/generated/mcp/link/index.json

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

package/generated/mcp/link/react.md

@@ -0,0 +1,25 @@
+# gds-link - React
+
+## Import
+
+```typescript
+import { GdsLink } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsLink>
+  {/* content */}
+</GdsLink>
+```
+
+## 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/list-item/angular.md

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