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

package/generated/mcp/guides/troubleshooting.md

@@ -0,0 +1,119 @@
+# Troubleshooting common problems
+
+This guide will help you troubleshoot common problems that you might encounter when developing with Green.
+
+## Component is not rendering
+
+If a component is not rendering, there are a few things you can check:
+
+- Make sure that the component is imported correctly. For example, if you are using the button component, you need
+  to import it like this:
+
+```ts
+import '@sebgroup/green-core/components/button/index.js'
+```
+
+- Check that [custom element scoping](https://storybook.seb.io/latest/core/?path=/docs/concepts-scoping--docs) is
+  correctly applied. If you inspect the component in the browser, you should see that the custom element name has a
+  version suffix, like this:`<gds-button-VERSIONSTRING>`.
+
+  If the version suffix is missing, it usually means one of two things:
+
+  - The component is not imported correctly. See previous point.
+  - The suffix is not being applied in your template. There are a few different ways to accomplish this, depending on
+    what framework you are working with. Check the examples in the [Welcome](https://storybook.seb.io/latest/core/?path=/docs/welcome--docs)
+    docs to see how it is done in Lit, React and Angular.
+
+  When the component is properly initialized, it should have an attribute called `gds-element`, and a shadow root
+  attached, similar to this:
+
+  <img
+    width="335"
+    alt="image"
+    src="https://github.com/user-attachments/assets/5918f952-4713-4ee8-a298-2ae9b71c45fa"
+  />
+
+## Component is not styled correctly
+
+### I'm trying to get 2016 design
+
+<details>
+First, check that you have loaded and registered Transistional Styles accoring to the examples in the [Welcome](https://storybook.seb.io/latest/core/?path=/docs/welcome--docs) docs.
+
+If you are still having issues, continue reading.
+
+A common cause of styling issues with Green Core components is that [transitional styles](https://storybook.seb.io/latest/core/?path=/docs/concepts-transitional-styles--docs)
+often rely on [Chlorophyll](https://storybook.seb.io/latest/chlorophyll) CSS variables being in scope.
+
+When you already have the Chlorophyll CSS loaded on the page, this is usually not an issue, but if you try to use the components in isolation, you might run into this problem.
+
+There are two ways to solve it:
+
+- Make sure that the Chlorophyll CSS is loaded on the page. This can be done by importing SCSS or precompiled CSS from the `@sebgroup/chlorophyll` package.
+- Use the `<gds-theme>` component. This component will automatically load the Chlorophyll CSS variables, and make sure that they are in scope.
+
+  You can use the `<gds-theme>` component like this:
+
+```ts
+// Import the theme component
+import '@sebgroup/green-core/components/theme/index.js'
+
+// Import and register transitional styles for the theme component
+// This is important, as it will make sure that the actual Chlorophyll CSS variables are loaded
+
+themeTransStyles.register()
+```
+
+Then use it in your template:
+
+```html
+<gds-theme>
+  <!-- Green Core components here -->
+</gds-theme>
+```
+</details>
+
+### I'm trying to get 2023 design
+
+<details>
+The 2023 design is the default design for Green Core components, so if you are not seeing the correct styling, here are some things to check.
+
+If all instances of the component should use 2023 design in your app, then check that Transitional Styles **are not** loaded for the component at all. If they are, they will override the 2023 styles with 2016 styles. In this case, you can simply remove the importing and registering of the transitional styles. This way, the component will simply use it's built-in default 2023 styles.
+
+If some instances still need to have 2016 style, the situation is somewhat different. In this case, you need to keep the transitional styles, but you can use the `<gds-theme>` component to override the transitional styles for specific components.
+
+```html
+<gds-theme design-version="2023">
+  <!-- Green Core components here will use 2023, even if they have transitional styles loaded -->
+</gds-theme>
+```
+
+#### It's still not working...
+If it's an older component, it could be that it doesn't have the 2023 design yet.
+In this case, since the component may need to be updated or a new one written, reach out to the Green Core team for help.
+
+Also, all of the information here only applies to components from the `@sebgroup/green-core` package. If you are using components from the Angular or React package that still only use Chlorophyll styling, this does not apply.
+</details>
+
+## Errors in the console
+
+- `Class constructor LitElement cannot be invoked without 'new'`
+
+  This error usually occurs when incorrect transformations are applied in the build step.
+
+  Make sure that:
+
+  - The `@babel/preset-env` is configured correctly in your Babel configuration.
+  - The compile target for both Babel and TypeScript is set to at least `es2015`.
+  - You are using Typescript version 5.0 or later.
+
+## Problems testing with Jest
+
+The most common source of issues when tesing with Jest is that, by default, Jest does not apply babel transformations to modules in `node_modules`.
+Because of this, you need to configure Jest to transform the Green Core modules. Core already have a configureation for this that you can import
+and apply to your Jest configuration.
+
+Check the docs for React or Angular for more details on how to do this:
+
+- [React](https://storybook.seb.io/latest/react/?path=/docs/testing--docs)
+- [Angular](https://storybook.seb.io/latest/angular/?path=/docs/testing--docs)

package/generated/mcp/icon-ai/angular.md

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

package/generated/mcp/icon-ai/api.md

@@ -0,0 +1,28 @@
+# gds-icon-ai
+
+**Class**: `IconAi`
+
+**Tag**: `<gds-icon-ai>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-ai/index.json

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

package/generated/mcp/icon-ai/react.md

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

package/generated/mcp/icon-airplane-up/angular.md

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

package/generated/mcp/icon-airplane-up/api.md

@@ -0,0 +1,28 @@
+# gds-icon-airplane-up
+
+**Class**: `IconAirplaneUp`
+
+**Tag**: `<gds-icon-airplane-up>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-airplane-up/index.json

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

package/generated/mcp/icon-airplane-up/react.md

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

package/generated/mcp/icon-archive/angular.md

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

package/generated/mcp/icon-archive/api.md

@@ -0,0 +1,28 @@
+# gds-icon-archive
+
+**Class**: `IconArchive`
+
+**Tag**: `<gds-icon-archive>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-archive/index.json

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

package/generated/mcp/icon-archive/react.md

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

package/generated/mcp/icon-arrow/angular.md

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

package/generated/mcp/icon-arrow/api.md

@@ -0,0 +1,28 @@
+# gds-icon-arrow
+
+**Class**: `IconArrow`
+
+**Tag**: `<gds-icon-arrow>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-arrow/index.json

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

package/generated/mcp/icon-arrow/react.md

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

package/generated/mcp/icon-arrow-bottom-top/angular.md

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

package/generated/mcp/icon-arrow-bottom-top/api.md

@@ -0,0 +1,28 @@
+# gds-icon-arrow-bottom-top
+
+**Class**: `IconArrowBottomTop`
+
+**Tag**: `<gds-icon-arrow-bottom-top>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-arrow-bottom-top/index.json

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

package/generated/mcp/icon-arrow-bottom-top/react.md

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

package/generated/mcp/icon-arrow-box-left/angular.md

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

package/generated/mcp/icon-arrow-box-left/api.md

@@ -0,0 +1,28 @@
+# gds-icon-arrow-box-left
+
+**Class**: `IconArrowBoxLeft`
+
+**Tag**: `<gds-icon-arrow-box-left>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-arrow-box-left/index.json

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

package/generated/mcp/icon-arrow-box-left/react.md

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

package/generated/mcp/icon-arrow-box-right/angular.md

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

package/generated/mcp/icon-arrow-box-right/api.md

@@ -0,0 +1,28 @@
+# gds-icon-arrow-box-right
+
+**Class**: `IconArrowBoxRight`
+
+**Tag**: `<gds-icon-arrow-box-right>`
+
+
+## Properties
+
+| 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` | `false` | 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` | `'2'` | 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. |

package/generated/mcp/icon-arrow-box-right/index.json

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