@sebgroup/green-core 3.6.3 → 3.8.0

package/gds-element.js

@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "3.6.3";
+    this.semanticVersion = "3.8.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/avatar/angular.md

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

package/generated/mcp/avatar/api.md

@@ -0,0 +1,49 @@
+# gds-avatar
+
+`gds-avatar` is a visual element used to represent a user or entity.
+It supports displaying an image, slotted text content, or a fallback icon.
+
+**Class**: `GdsAvatar`
+
+**Tag**: `<gds-avatar>`
+
+
+## Properties
+
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | `-` | Image URL to display inside the avatar. When set, an `<img>` is rendered directly in the shadow DOM. |
+| `alt` | `string` | `-` | Alt text for the image when using the `src` property. |
+| `size` | `'xs' \| 's' \| 'm' \| 'l'` | `-` | The size of the avatar. |
+| `shape` | `'circular' \| 'square'` | `-` | The shape of the avatar. |
+| `level` | `GdsColorLevel` | `-` | The color level used when resolving color tokens for style expression properties. |
+| `background` | `string \| undefined` | `-` | Style Expression Property that controls the `background` color of the avatar shape. Only accepts color tokens and optional transparency values. |
+| `color` | `string \| undefined` | `-` | Style Expression Property that controls the text/icon `color` of the avatar. Accepts content color tokens and optional transparency values. |
+| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
+| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
+| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
+| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
+| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
+| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
+| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
+| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
+| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
+| `'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. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Default slot for avatar content (`<img>` or short text) |
+| `badge` | Optional slot rendered in the top-right corner. Use a `gds-badge` here. |

package/generated/mcp/avatar/guidelines.md

@@ -0,0 +1,40 @@
+# Avatar
+
+An avatar represents a user, entity, or object. It is typically displayed as an image, initials, or icon, and helps identify ownership, participation, or presence in the interface.
+
+
+## Overview
+
+### Usage
+
+Use an avatar when you need to represent a user, such as in lists, messages, or account-related contexts. It provides quick visual recognition and helps users understand who is involved in a specific action or piece of content. Avatars are especially useful in collaborative or communication-heavy interfaces where multiple people are present.
+
+### Variants
+
+The avatar comes in two shapes:
+
+- **Circular**  
+Used in more prominent or personal contexts, such as the top header or profile-related areas.
+- **Squared**  
+Used to represent products, accounts, or organizations. This includes cases like specific account types, funds, or company logos.
+
+
+
+### Sizes
+
+The avatar is available in four sizes:
+
+- **XS**
+- **S**
+- **M** 
+- **L**
+
+
+
+### Grouped avatars
+
+Avatars can be grouped to represent multiple users, for example in shared ownership or collaborative contexts. The avatars are displayed in a horizontal stack with a slight overlap to save space and create a cohesive visual unit.
+
+To maintain clarity, a maximum of three avatars should be visible at the same time. If more users are included, the remaining count is shown as a “+X” indicator, such as “+2”.
+
+

package/generated/mcp/avatar/index.json

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

package/generated/mcp/avatar/react.md

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

package/generated/mcp/avatar-group/angular.md

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

package/generated/mcp/avatar-group/api.md

@@ -0,0 +1,38 @@
+# gds-avatar-group
+
+`gds-avatar-group` stacks multiple avatars with an overlapping ring cutout effect.
+
+Accessibility:
+- Exposes `role="group"` by default.
+- Provide an `aria-label` (for example `aria-label="Authors"`) to describe the group context.
+
+**Class**: `GdsAvatarGroup`
+
+**Tag**: `<gds-avatar-group>`
+
+
+## Properties
+
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Slot for `gds-avatar` elements |

package/generated/mcp/avatar-group/index.json

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

package/generated/mcp/avatar-group/react.md

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

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-29T15:59:02.891Z",
+  "generatedAt": "2026-05-04T08:15:17.615Z",
   "components": [
     {
       "name": "gds-alert",
@@ -14,6 +14,31 @@
         "react"
       ]
     },
+    {
+      "name": "gds-avatar",
+      "tagName": "gds-avatar",
+      "className": "GdsAvatar",
+      "description": "`gds-avatar` is a visual element used to represent a user or entity.\nIt supports displaying an image, slotted text content, or a fallback icon.",
+      "path": "avatar/",
+      "files": [
+        "api",
+        "guidelines",
+        "angular",
+        "react"
+      ]
+    },
+    {
+      "name": "gds-avatar-group",
+      "tagName": "gds-avatar-group",
+      "className": "GdsAvatarGroup",
+      "description": "`gds-avatar-group` stacks multiple avatars with an overlapping ring cutout effect.\n\nAccessibility:\n- Exposes `role=\"group\"` by default.\n- Provide an `aria-label` (for example `aria-label=\"Authors\"`) to describe the group context.",
+      "path": "avatar-group/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-backdrop",
       "tagName": "gds-backdrop",

package/generated/mcp/concepts/architecture.md

@@ -1,11 +1,46 @@
+import '../../components/dialog/dialog'
+import '../../components/img/img'
+import '../../components/theme/theme'
+
+import archImage from './arch-overview.png';
+
 # Green architecture
 
-Green Core is the foundation of the Green Design System, and consists of a set of Web Components that underpins the React and Angular components that are typically used when building applications.
+Green Core is the foundation of the Green Design System, and consists of a set of framework agnostic Web Components. These components can be used in any front-end framework, or without a framework, for example rendered on the server side. The Web Components are built using the Lit library, but this is an implementation detail that is typically not exposed to consumers, and consumers are not expected or required to use Lit.
+
+The Green architecture roughly looks like this:
+
+<gds-theme>
+<gds-dialog heading="Architecture overview" width="95vw" height="95vh" scrollable><gds-link slot="trigger"><gds-img src={archImage} width="800px"></gds-img></gds-link><img></gds-dialog>
+</gds-theme>
+
+The dashed curvy lines illustrate roughly how different roles, like designers and developers, interact with the system, while the straight black lines illustrate actual code flows.
+
+Public API Boundry before Web Components means that anything that is lower level than a complete component is considered internal to the framework and should not be used by consumers. We only guarantee semantic versioning for the public api. Anything that is considered internal could change in breaking ways in any release.
+
+## Web Components
+
+All the components in Green Core are implemented as [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) using the [Lit](https://lit.dev/) library. The components makes use of [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) to encapsulate their styles and behavior, so they won't interfere with the rest of your application.
+
+The reason the components use Shadow DOM is twofold:
+
+- Provide style encapsulation to protect against styling conflicts which can occur in a micro-frontend environment
+- Put constraints on the design itself. When a feature is missing, it is important that it is implemented in the Design System and designed according to brand guidelines following all the principles that are in place. If every team were to add their own tweaks, consistency becomes very difficult to maintain. So while this restriction can feel like a limitation at times, it serves an important purpose in the larger context of the Design System.
+
+Internally, these Web Components are often composed of a hierarchy of smaller Web Componentes that defines the various atomic pieces that make up a component. These atomic parts could either be other public components from the library, or they could be private components that are not exposed to consumers. In Green Core, those private components are called 'primitives'. This internal composition serves to both make the library more efficient by rusing code, but also as a consistency constraint: It ensures that the design of these atoms does not accidentally drift appart over time.
+
+## Fonts
+
+Fonts are not imported automatically in the Core library, so applications need to add this separately. There are plenty of strategies for how static files like fonts are handled and hosted, and often they are already loaded and avaible in the shells.
+
+The CSS `font-family` property is inherited though shadow DOM boundaries, so the components will render whichever font is used in the parent document.
+
+## Wrappers
 
-The Web Components are themselves often composed of a hierarchy of smaller Web Componentes, called primitives, that defines the various atomic pieces that make up a component.
+Since React and Angular are the most commmonly used frameworks at SEB, we generate dedicated wrapper components for those frameworks, so that components can be used in a more idiomatic way, side-stepping some of the common comporomises associated with using plain web components directly.
 
-The Green architecture roughly looks something like this:
+The wrappers are generated automatically based on Custom Elements Schema.
 
-Of course, design tokens, markup and styles can be used on all levels of composition, but are only drawn at the top here in order to simplify the diagram.
+## MCP / CLI
 
-Public API Boundry before Web Components means that anything that is lower level than a complete component is considered internal to the framework and should not be used by consumers. We only guarantee semantic versioning for the public api. Anything that is considered internal could change in breaking ways in any release.
+From the same schematic data, context docs for AI coding agents are also generated. This is included in the Core package as a local MCP server as well as a command line interface (CLI)

package/generated/mcp/guides/installing.md

@@ -1,17 +1,15 @@
-## Install
+# Getting started
 
-```bash
-yarn install @sebgroup/green-core
+The components in Green Core are standard web components, so you can use them with or without any framework, but since most consumers will be using Angular or React, idiomatic wrappers are provided for those frameworks.
 
-# or use npm
-npm install @sebgroup/green-core
-```
+### [Go here for Angular](/docs/guides-angular--docs)
+### [Go here for React](/docs/guides-react--docs)
 
-## Use
+Keep reading below for other usages
 
-The components in Green Core are standard web components, so you can use them with or without any framework, but since most consumers will be useing Angular or React, some extra convenience features are provided for these frameworks.
+### Defining and tree-shaking
 
-Web components needs to be defined in the custom elements registry before they can be used, and there are a few different ways of handling this:
+Web components needs to be defined in the custom elements registry before they can be used, and there are a few different ways to handle this.
 
 - Use a sub-path side-effect import:
   ```ts
@@ -34,8 +32,10 @@ Web components needs to be defined in the custom elements registry before they c
   ```
   This will import all components and icons, and register them in the custom elements registry. This is not tree-shakable and not recommended for production use, as it will include everything in your bundle (~700kb).
 
+When using Green with Angular or React, the importing and defining is done automatically in a tree-shakable way.
+
 ### Scoping
-Finally, you need to handle [scoping](/docs/concepts-scoping--docs) of the element names. This is done automatically for React, and for Lit and Angular we provide simple solutions (see below), but if you are using the components in some other way, you need to set up your own solution or disable scoping.
+Scoping is done automatically for React, and for Lit and Angular we provide simple solutions (see below for Lit, and link above for Angular), but if you are using the components in some other way, you need to set up your own solution or disable scoping.
 
 For POCs and prototyping, you can disable scoping by setting the `GDS_DISABLE_VERSIONED_ELEMENTS` global variable to `true` before importing any components. This will make all components use their original element names (e.g. `<gds-button>` instead of `<gds-button-abc123>`).
 
@@ -48,65 +48,6 @@ For POCs and prototyping, you can disable scoping by setting the `GDS_DISABLE_VE
 
 ***Warning:** Never disable scoping for a microfrontend or production application, as this will cause conflicts with other applications using the same components.*
 
-## Using with Angular
-
-Angular has support for using web components directly. To enable this support, you need to do the following:
-
-- Add the `CUSTOM_ELEMENTS_SCHEMA` in the module where you plan to use the components.
-- Provide `NggCoreRenderer` or import `NggCoreWrapperModule` to handle Green Core's element name scoping.
-
-The renderer is more convenient, but the wrapper module can provide more explicit control.
-
-For a more detailed break-down of how to use Green Core components with Angular, and some additional information about use with the router, see the full [Angular guide](/docs/guides-angular--docs).
-
-Below is a minimal example using the renderer.
-
-**In your module:**
-```ts
-
-@NgModule({
-    // Provides `NggCoreRenderer` as a custom renderer
-    providers: [provideCoreRenderer(getScopedTagName)],
-    // CUSTOM_ELEMENTS_SCHEMA is still needed
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-```
-
-If you need animations, use `provideCoreRendererWithAnimations()` instead, and make sure to import `BrowserAnimationsModule` too.
-
-**In your component:**
-
-```ts
-import '@sebgroup/green-core/components/button/index.js'
-```
-
-**In your template:**
-```html
-<gds-button (click)="handleEvent($event)">Click me!</gds-button>
-```
-
-## Using with React
-
-React 19 has built-in support for web components, and Green Core automatically generates typed JSX wrappers for all components and icons. This means you can use the components directly in your JSX templates.
-
-For example:
-
-```ts
-
-```
-
-Then, in your JSX template:
-
-```tsx
- console.log('Hello')}>
-  Click me!
-
-```
-
-These imports are tree-shakable and the underlying web components will be defined automatically on first use.
-
-For full details on how to use Green Core with React, and how to handle older React versions (pre 19), see the full [React guide](/docs/guides-react--docs).
-
 ## Using with Lit
 
 The components in Green core rely on the Lit framework for their internal implementations, and it is of course also possible to use the components in applications or other components using Lit.

package/generated/mcp/icon-arrows-repeat-right/angular.md

@@ -0,0 +1,15 @@
+# gds-icon-arrows-repeat-right - Angular
+
+## Import
+
+```typescript
+import { IconArrowsRepeatRightComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-icon-arrows-repeat-right></gds-icon-arrows-repeat-right>
+```

package/generated/mcp/icon-arrows-repeat-right/api.md

@@ -0,0 +1,31 @@
+# gds-icon-arrows-repeat-right
+
+**Class**: `IconArrowsRepeatRight`
+
+**Tag**: `<gds-icon-arrows-repeat-right>`
+
+
+## Properties
+
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `size` | `string \| undefined` | `-` | This property allow you to set the size of the icon with the token and custom values. If not provided, uses the icon's default size.  The size is a shorthand for setting both width and height at once. |
+| `solid` | `boolean` | `-` | When set to true, the solid version of the icon is displayed. When set to false or not provided, the regular version of the icon is displayed. |
+| `stroke` | `number \| undefined` | `-` | When set to true, you can apply custom stroke width to the icon. |
+| `level` | `GdsColorLevel` | `-` | The level of the icon 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-icon-*` 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-icon-ai color="neutral-01/0.2"></gds-icon-ai> ``` |
+| `label` | `string` | `-` | This property allow you to set the accessible label of the icon. If not provided, the icon will be presentational. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |

package/generated/mcp/icon-arrows-repeat-right/index.json

@@ -0,0 +1,8 @@
+{
+  "name": "gds-icon-arrows-repeat-right",
+  "files": {
+    "api": "api.md",
+    "angular": "angular.md",
+    "react": "react.md"
+  }
+}

package/generated/mcp/icon-arrows-repeat-right/react.md

@@ -0,0 +1,15 @@
+# gds-icon-arrows-repeat-right - React
+
+## Import
+
+```typescript
+import { IconArrowsRepeatRight } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsIconArrowsRepeatRight />
+```

package/generated/mcp/icon-calendar-repeat/angular.md

@@ -0,0 +1,15 @@
+# gds-icon-calendar-repeat - Angular
+
+## Import
+
+```typescript
+import { IconCalendarRepeatComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-icon-calendar-repeat></gds-icon-calendar-repeat>
+```

package/generated/mcp/icon-calendar-repeat/api.md

@@ -0,0 +1,31 @@
+# gds-icon-calendar-repeat
+
+**Class**: `IconCalendarRepeat`
+
+**Tag**: `<gds-icon-calendar-repeat>`
+
+
+## Properties
+
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `size` | `string \| undefined` | `-` | This property allow you to set the size of the icon with the token and custom values. If not provided, uses the icon's default size.  The size is a shorthand for setting both width and height at once. |
+| `solid` | `boolean` | `-` | When set to true, the solid version of the icon is displayed. When set to false or not provided, the regular version of the icon is displayed. |
+| `stroke` | `number \| undefined` | `-` | When set to true, you can apply custom stroke width to the icon. |
+| `level` | `GdsColorLevel` | `-` | The level of the icon 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-icon-*` 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-icon-ai color="neutral-01/0.2"></gds-icon-ai> ``` |
+| `label` | `string` | `-` | This property allow you to set the accessible label of the icon. If not provided, the icon will be presentational. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |

package/generated/mcp/icon-calendar-repeat/index.json

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

package/generated/mcp/icon-calendar-repeat/react.md

@@ -0,0 +1,15 @@
+# gds-icon-calendar-repeat - React
+
+## Import
+
+```typescript
+import { IconCalendarRepeat } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsIconCalendarRepeat />
+```

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-29T15:59:02.891Z",
+  "generatedAt": "2026-05-04T08:15:17.615Z",
   "icons": [
     {
       "name": "gds-icon-ai",
@@ -349,6 +349,18 @@
         "react"
       ]
     },
+    {
+      "name": "gds-icon-arrows-repeat-right",
+      "tagName": "gds-icon-arrows-repeat-right",
+      "className": "IconArrowsRepeatRight",
+      "description": "",
+      "path": "icon-arrows-repeat-right/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-icon-asterisk",
       "tagName": "gds-icon-asterisk",
@@ -925,6 +937,18 @@
         "react"
       ]
     },
+    {
+      "name": "gds-icon-calendar-repeat",
+      "tagName": "gds-icon-calendar-repeat",
+      "className": "IconCalendarRepeat",
+      "description": "",
+      "path": "icon-calendar-repeat/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-icon-calender-add",
       "tagName": "gds-icon-calender-add",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-29T15:59:02.891Z",
+  "generatedAt": "2026-05-04T08:15:17.615Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",