@sebgroup/green-core 2.19.0-rc.20251217092059691 → 2.19.0-rc.20251218133050947

package/generated/mcp/button/api.md

@@ -0,0 +1,71 @@
+# gds-button
+
+**Class**: `GdsButton`
+
+**Tag**: `<gds-button>`
+
+
+## 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. |
+| `disabled` | `boolean` | `false` | Whether the button is disabled. |
+| `'justify-content'` | `string \| undefined` | `-` | Spread the contents of the button |
+| `type` | `HTMLButtonElement['type'] \| undefined` | `-` | The type of the button. |
+| `rank` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | The rank of the button. Defaults to "primary". |
+| `variant` | `\| 'brand'     \| 'neutral'     \| 'positive'     \| 'negative'     \| 'notice'     \| 'warning'` | `'neutral'` | Defines which variant the button belongs to. Defaults to "neutral". |
+| `size` | `'xs' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Sets the size of the button. Defaults to "medium". |
+| `label` | `string` | `''` | The label of the 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. |
+| `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. |
+| `value` | `any` | `-` | Get or set the value of the form control. |
+| `name` | `string` | `''` |  |
+
+
+## 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-[ICON_NAME]` element to be placed before the label. |
+| `trail` | An optional slot that allows a `gds-icon-[ICON_NAME]` element to be placed after the label. |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.
+
+
+## Routing Support
+
+This component supports routing via the `href` property.

package/generated/mcp/button/guidelines.md

@@ -0,0 +1,88 @@
+# Button
+
+A button can be tapped or clicked to perform an action.
+
+
+## Overview
+
+### Variants and ranks
+
+Variant is used to communicate the intent of the button, such as positive, negative, notice.
+
+Rank determines the priority of the button, and can be primary, secondary or tertiary. All variants are each available in those three ranks.
+
+### Neutral
+
+This is our default button used for most cases. Carefully choose what rank to use and avoid using more than one primary button for each context.
+
+### Brand
+
+Our brand button is used in specific scenarios, such as hero areas, login or brand enforcing messages.
+
+### Negative
+
+Used for destructive actions such as "Delete". Also used for sell actions (e.g. selling stocks or funds).
+
+### Notice
+
+Use only for the notice alert and for buy actions (e.g. buying stocks or funds).
+
+### Icon button
+
+Use an icon button only when the icon is universally understood and can stand on its own, such as a close or expand icon.
+
+If the action is not immediately clear, use a regular button with a text label instead to ensure clarity and accessibility.
+
+The icon button comes in the same ranks and variants as regular buttons.
+
+### Split button
+
+⚠️ Coming soon.
+
+The split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.
+
+The users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.
+
+The split button comes in both primary and secondary.
+
+### Next and back button
+
+Used inside flows to signal the direction forward or backward.
+
+Back button comes in both primary and secondary state depending on what suits the content. The next button comes as primary only.
+
+### Size
+
+Buttons can be xs, small, medium or large. The default size is medium.  
+Choose size depending on context. Avoid to mix different sizes in the same context.
+
+### Desktop placements
+
+*   **Left**: In overviews and widgets, the user tends to read from top to bottom following the left side, therefore the buttons are kept to the left. Place the primary button furthest to the left.
+    
+*   **Right**: Modals and flows move the user forward (interpreted as to the right in western culture), therefore the buttons are placed to the right. Place the primary button furthest to the right.
+
+### In a mobile device
+
+*   **One button**, use the full width of the content area.
+    
+*   **Two buttons**, aim to place them side by side. It is allowed to stack them if needed.
+    
+*   **Three buttons**, consider the need for all of them. "cancel or close" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.
+
+### Do’s and don’ts
+
+Only use one primary action in the same context of several actions.
+
+
+## UX Guidelines
+
+### Writing UX text for buttons
+
+### Use commands and requests in the button
+
+### Avoid Perform and Okay
+
+### Standard button texts
+
+### Do’s and don’ts

package/generated/mcp/button/index.json

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

package/generated/mcp/button/react.md

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

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

package/generated/mcp/calendar/api.md

@@ -0,0 +1,47 @@
+# gds-calendar
+
+**Class**: `GdsCalendar`
+
+**Tag**: `<gds-calendar>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| undefined` | `-` | The currently selected date. |
+| `min` | `any` | `new Date(new Date().getFullYear() - 10, 0, 1)` | The minimum date that can be selected. |
+| `max` | `any` | `new Date(new Date().getFullYear() + 10, 0, 1)` | The maximum date that can be selected. |
+| `focusedDate` | `any` | `new Date()` | The date that is currently focused. |
+| `disabledWeekends` | `boolean` | `false` | Whether to disable weekends or not. |
+| `disabledDates` | `Date[] \| undefined` | `-` | An array of dates that should be disabled in the calendar. |
+| `focusedMonth` | `any` | `-` | The month that is currently focused. |
+| `focusedYear` | `any` | `-` | The year that is currently focused. |
+| `size` | `'small' \| 'large'` | `'large'` | Sets the size of the grid. Defaults to "large". |
+| `showWeekNumbers` | `boolean` | `false` | Whether to show week numbers or not. |
+| `hideExtraneousDays` | `boolean` | `false` | Whether to hide extraneous days (that fall ouside of current month) |
+| `hideDayNames` | `boolean` | `false` | Whether to hide the day names shown above the calendar. |
+| `customizedDates` | `CustomizedDate[] \| undefined` | `-` | An array of `CustomizedDate` objects that can be used customize the appearance of dates. This can only be set through the property, not through an attribute. |
+| `label` | `string \| undefined` | `-` | The accessible label for the calendar. |
+| `dateLabelTemplate` | `any` | `-` | A template function to customize the accessible date label. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `change` | `Event` | Fired when a date is selected. |
+| `gds-date-focused` | `CustomEvent<any>` | Fired when focus is changed. Can be cancelled using `event.preventDefault()`. |
+
+
+## Methods
+
+### `getDateCell(dayNumber: number): void`
+
+Returns the date cell element for the given day number.
+
+**Parameters:**
+
+- `dayNumber`: `number`
+
+### `focus(): void`

package/generated/mcp/calendar/guidelines.md

@@ -0,0 +1,3 @@
+# Calendar
+
+The calendar displays a grid of selectable dates.

package/generated/mcp/calendar/index.json

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

package/generated/mcp/calendar/react.md

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

package/generated/mcp/card/angular.md

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

package/generated/mcp/card/api.md

@@ -0,0 +1,78 @@
+# gds-card
+
+A container for content representing a single entity. e.g. a contact, article, or task.
+
+`gds-card` inherits all properties from `gds-div`, but comes with some predefined defaults
+and a shortcut property for specifiying different card variants.
+
+**Class**: `GdsCard`
+
+**Tag**: `<gds-card>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `string` | `'primary'` | Shortcut for setting the border, background and text color of the card to the specified color variant, such as 'primary', 'secondary', 'tertiary', etc.  You can find all available variants in the L2 section of the [Color System documentation page](./?path=/docs/style-colors--docs)  Supports Style Expression syntax for setting the value responsively. |
+| `padding` | `string \| undefined` | `'m;m{xl}'` | Style Expression Property that controls the `padding` 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. |
+| `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-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. |
+| `'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/card/guidelines.md

@@ -0,0 +1,36 @@
+# Card
+
+The card groups related content into a single container.
+
+
+## Overview
+
+### Variants
+
+### Brand 01
+
+Can only be used in special contexts and with specific content. This will be added as guidelines soon. Since we do not have any matching action components for now you can only slot text, link and icon.
+
+### Interactions
+
+#### Default
+
+The entire card area is not clickable. The slotted content can contain one or several clickable elements, such as button and link.
+
+#### Linked
+
+The entire card area is clickable. The slotted content can include one decorative element. This element must be inert (non-interactive) since the whole card already functions as the clickable target.
+
+### Usage
+
+Don't mix linked and default cards in the same group or grid. Interactions should be consistent across a set of cards to ensure a predictable and accessible experience. If you must use both in the same view, do it with care, for example, by visually separating them or clearly communicating the interaction difference.
+
+#### Why this matters:
+
+*   **Consistency** – users should understand how a card behaves before they interact with it. Mixing types can make it unclear whether the whole card or only parts are clickable.
+    
+*   **Accessibility** – linked cards rely on different interaction logic and focus handling compared to cards with multiple actions. Mixing them can create confusion for keyboard and screen-reader users.
+    
+*   **Visual clarity** – linked cards use hover and press states that don’t apply to default cards, which can create inconsistent visual feedback.
+
+### Do's and don'ts

package/generated/mcp/card/index.json

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

package/generated/mcp/card/react.md

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

package/generated/mcp/card-linked/angular.md

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

package/generated/mcp/card-linked/api.md

@@ -0,0 +1,83 @@
+# gds-card-linked
+
+**Class**: `GdsCardLinked`
+
+**Tag**: `<gds-card-linked>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `variant` | `string` | `'primary'` | Shortcut for setting the border, background and text color of the card to the specified color variant, such as 'primary', 'secondary', 'tertiary', etc.  You can find all available variants in the L2 section of the [Color System documentation page](./?path=/docs/style-colors--docs)  Supports Style Expression syntax for setting the value responsively. |
+| `padding` | `string \| undefined` | `'m;m{xl}'` | Style Expression Property that controls the `padding` 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. |
+| `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-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. |
+| `'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. |
+
+
+## Routing Support
+
+This component supports routing via the `href` property.

package/generated/mcp/card-linked/index.json

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

package/generated/mcp/card-linked/react.md

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

package/generated/mcp/card-pattern-01/angular.md

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