@sebgroup/green-core 2.20.0-rc.20251218145150154 → 2.21.0-rc.20251218133405834

package/generated/mcp/alert/angular.md

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

package/generated/mcp/alert/api.md

@@ -1,32 +0,0 @@
-# gds-alert
-
-**Class**: `GdsAlert`
-
-**Tag**: `<gds-alert>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'information' \| 'notice' \| 'positive' \| 'warning' \| 'negative'` | `'information'` | The variant of the alert, which determines its appearance and icon. |
-| `label` | `string` | `''` | The label for the alert, used for accessibility purposes. This needs be set to something relevant to the content of the alert. |
-| `role` | `'alert' \| 'status'` | `'alert'` | The role of the alert, which can be 'alert' or 'status'. 'alert' is used for critical messages that require immediate attention, while 'status' is for informational messages. These corresponds to the ARIA roles, which you can read more about on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role |
-| `dismissible` | `boolean` | `false` | The dismissibility of the alert, which determines whether it can be closed by the user. |
-| `timeout` | `number` | `0` | The time in milliseconds after which the alert will automatically dismiss itself. Set to 0 to disable auto-dismiss. |
-| `buttonLabel` | `string` | `''` | The text for the action button, if provided. If not set, no action button will be rendered. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `gds-close` | `CustomEvent<any>` | Fired when alert is dismissed |
-| `gds-action` | `CustomEvent<any>` | Fired when action button is clicked |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Alert message content |

package/generated/mcp/alert/guidelines.md

@@ -1,105 +0,0 @@
-# Alert
-
-An alert displays important messages, feedback, or time-sensitive information.
-
-
-## Overview
-
-### Variants
-
-A set of predefined styles that convey different meanings and states through consistent visual treatment each with specific icons.
-
-#### Information
-
-Used for _passive_, non-critical updates like tips or background information. It's quiet and unobtrusive.
-
-#### Notice
-
-Used for _actionable_, attention-worthy updates that are still non-critical, like a change in a process or a reminder to do something soon.
-
-#### Positive
-
-Confirms successful actions, such as form submissions, with a success message, optional next steps, and possible brand reinforcement.
-
-#### Warning
-
-Highlights non-critical issues, such as upcoming deadlines, with a concise issue summary, optional duration estimate, and suggested actions.
-
-#### Negative
-
-Communicates critical issues or errors, such as system outages, with a clear problem description, optional apology for system issues, and resolution guidance.
-
-### Action button
-
-Alert supports an optional action button with customisable text to trigger relevant actions.
-
-### Dismissible
-
-Alerts can be configured as `dismissible` in order to show a close button in the upper right corner. This also enabled closing the alert by pressing the escape key.
-
-### Auto-dismiss
-
-Alert can also be set up to use an auto-dismiss timer. In this configuration, a timer progress bar will be shown at the bottom of the alert, and the alert will close once the timer reaches the end.
-
-### Placement
-
-The most important rule is to place the alert near the issue that triggered it.
-
-#### Global alert
-
-Used for system-wide messages.
-
-*   Placed above the header and takes full width of the screen.
-    
-*   The icon, text content, and action button should be center-aligned horizontally.
-    
-*   The dismiss button is placed at the far right.
-
-#### Page alert
-
-Used for messages affecting the entire page (e.g., _Bankgiro is down_).
-
-*   Placed at the top of the page, below the header.
-
-#### Group alert
-
-Used for messages related to a specific module (e.g., _Transaction listing is unavailable_).
-
-*   Placed within the module, at the top.
-
-#### Specific alert
-
-Used for messages related to specific content (e.g., _Negative balance_).
-
-*   Placed directly in the content area, close to the element it concerns (such as a table or field).
-
-### Guidelines
-
-Select the appropriate variant to match the message’s intent, such as using positive for success messages or negative for errors. Also ensure a meaningful label property is set to describe the alert’s purpose for accessibility. A label should always be set when using alert.
-
-Choose the role property carefully, using alert for critical messages and status for informational updates, to align with ARIA best practices.
-
-For toast-like messages, like save confirmations and other non-critical messages, auto-dismiss can be used to avoid interrupting user workflows.
-
-
-## UX Guidelines
-
-### Writing UX text for alerts
-
-### Alert with a heading
-
-### Alert without a heading
-
-### Alert with a button
-
-### Alert with a link
-
-### Using buttons and links together
-
-### Information alert
-
-### Success alert
-
-### Warning alert
-
-### Critical and error alert

package/generated/mcp/alert/index.json

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

package/generated/mcp/alert/react.md

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

package/generated/mcp/backdrop/angular.md

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

package/generated/mcp/backdrop/api.md

@@ -1,12 +0,0 @@
-# gds-backdrop
-
-**Class**: `GdsBackdrop`
-
-**Tag**: `<gds-backdrop>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `show` | `boolean` | `false` |  |

package/generated/mcp/backdrop/index.json

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

package/generated/mcp/backdrop/react.md

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

package/generated/mcp/badge/angular.md

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

package/generated/mcp/badge/api.md

@@ -1,36 +0,0 @@
-# gds-badge
-
-`gds-badge`
-
-**Class**: `GdsBadge`
-
-**Tag**: `<gds-badge>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `\| 'information'     \| 'notice'     \| 'positive'     \| 'warning'     \| 'negative'     \| 'disabled'` | `'information'` |  |
-| `size` | `'default' \| 'small'` | `'default'` |  |
-| `notification` | `boolean` | `false` |  |
-| `rounded` | `boolean` | `false` |  |
-| `mainSlotOccupied` | `boolean` | `false` |  |
-| `leadSlotOccupied` | `boolean` | `false` |  |
-| `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. |

package/generated/mcp/badge/guidelines.md

@@ -1,56 +0,0 @@
-# Badge
-
-A compact visual indicator for status, counts and notifications.
-
-
-## Overview
-
-### Usage
-
-Badges are especially useful for:
-
-*   **Status indicators** – Showing that something is new, in progress, needs attention, or has been successfully completed.
-    
-*   **Counters** – Indicating the number of new messages, notifications, or tasks.
-    
-*   **Contextual highlights** – Marking a feature as beta or signaling updates users should be aware of.
-    
-
-Use badges sparingly – too many can create visual noise and reduce their impact. Always ensure that the badge color, icon and label clearly support the intended message.
-
-### Variants
-
-A set of predefined styles that convey different meanings and states through consistent visual treatment.
-
-*   **Information** – For general updates or tips that help the user understand context.
-    
-*   **Notice** – For neutral alerts or flags that are not critical but still relevant.
-    
-*   **Positive** – For confirming success or a completed action (e.g., “Active” or “Paid”).
-    
-*   **Warning** – For potential issues users should be cautious about.
-    
-*   **Negative** – For errors, failed states, or items requiring immediate attention.
-
-### Size
-
-Available in large (default) and small sizes to accommodate different UI contexts and content requirements.
-
-### Notification mode
-
-Optimised for notification indicators.
-
-### Rounded
-
-The rounded property transforms the badge's appearance by applying fully circular corners, making it ideal for numerical indicators or status markers.
-
-### Lead and trail slots
-
-The badge component supports both lead and trail slots, enabling the placement of icons or additional content before or after the main text.
-
-
-## UX Guidelines
-
-### Writing UX text for badges
-
-### Our most common statuses

package/generated/mcp/badge/index.json

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

package/generated/mcp/badge/react.md

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

package/generated/mcp/blur/angular.md

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

package/generated/mcp/blur/api.md

@@ -1,12 +0,0 @@
-# gds-blur
-
-**Class**: `GdsBlur`
-
-**Tag**: `<gds-blur>`
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Content to be blurred. |

package/generated/mcp/blur/guidelines.md

@@ -1,3 +0,0 @@
-# Blur
-
-The Blur component is used to apply a blur effect over content, often used to obscure sensitive or background information.

package/generated/mcp/blur/index.json

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

package/generated/mcp/blur/react.md

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

package/generated/mcp/breadcrumb/angular.md

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

package/generated/mcp/breadcrumb/api.md

@@ -1,30 +0,0 @@
-# gds-breadcrumb
-
-**Class**: `GdsBreadcrumb`
-
-**Tag**: `<gds-breadcrumb>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | `''` | The URL that the breadcrumb item points to. |
-| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Where to display the linked breadcrumb URL. Only used when href is present. |
-| `rel` | `string \| undefined` | `-` | The relationship of the linked breadcrumb URL. Defaults to "noreferrer noopener" when target is "_blank". |
-| `label` | `string` | `''` | Accessible label for the breadcrumb item. Use when visual text needs a different description. |
-| `overflow` | `boolean` | `false` | When true, the breadcrumb item will render as an overflow menu instead of a regular link. |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Default slot for the breadcrumb content |
-| `lead` | Optional slot for leading content (usually icons) |
-| `trail` | Optional slot for trailing content |
-
-
-## Routing Support
-
-This component supports routing via the `href` property.

package/generated/mcp/breadcrumb/index.json

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

package/generated/mcp/breadcrumb/react.md

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

package/generated/mcp/breadcrumbs/angular.md

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

package/generated/mcp/breadcrumbs/api.md

@@ -1,30 +0,0 @@
-# gds-breadcrumbs
-
-**Class**: `GdsBreadcrumbs`
-
-**Tag**: `<gds-breadcrumbs>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `'large' \| 'small'` | `'large'` | Controls the font-size and spacing of separators and breadcrumbs items |
-| `label` | `string` | `-` | This property allow you to set the accessible label of the breadcrumbs. If not provided, the default label is "breadcrumbs". |
-| `'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. |
-| `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. |

package/generated/mcp/breadcrumbs/guidelines.md

@@ -1,35 +0,0 @@
-# Breadcrumbs
-
-A breadcrumb is a secondary navigation showing the website hierarchy.
-
-
-## Overview
-
-### When to use it
-
-Use for sites and applications that have a substantial amount of pages present deeper down in site structures.
-
-### Desktop
-
-The full path may not take up more than one row in the layout.
-
-### Mobile
-
-For mobile views we only display the link to the parent page, as the full path tends to take too much space.
-
-The same version may be used in shallow hierarchies where there still is a need to easily move one step up, or back to the page from where you came.
-
-### Overflow
-
-The breadcrumbs component is designed with flexibility in mind, allowing developers to implement \* custom overflow solutions that best fit their specific needs.
-
-
-## UX Guidelines
-
-### Writing UX text for breadcrums
-
-### Be clear and simple
-
-### Breadcrumbs on mobile web
-
-### Breadcrumbs in native apps

package/generated/mcp/breadcrumbs/index.json

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

package/generated/mcp/breadcrumbs/react.md

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