@sebgroup/green-core 2.19.0-rc.20251212142916599 → 2.20.0-rc.20251215154321804

package/mcp/radio/angular.md

@@ -1,25 +0,0 @@
-# gds-radio - Angular
-
-## Import
-
-```typescript
-import { GdsRadioComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-radio>
-  <!-- content -->
-</gds-radio>
-```
-
-## 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 |
-|---------------------|----------------|-----------------|
-| `input` | `input` | `(input)="handler($event)"` |

package/mcp/radio/api.md

@@ -1,25 +0,0 @@
-# gds-radio
-
-**Class**: `GdsRadio`
-
-**Tag**: `<gds-radio>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `string` | `''` | The label displayed next to the radio button. |
-| `supportingText` | `string` | `''` | The supporting text displayed below the label. This text provides additional context or information to the user. |
-| `value` | `string` | `''` | The value of the radio button. |
-| `checked` | `boolean` | `false` | Whether the radio button is checked or not. |
-| `disabled` | `boolean` | `false` | Whether the radio button is disabled or not. |
-| `invalid` | `boolean` | `false` | Whether the radio button is invalid or not. |
-| `errorMessage` | `string \| undefined` | `-` | The accessible error message text for the radio button.  This text is not visually rendered, but will be announced by screen readers when the radio button is in an invalid state. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `input` | `InputEvent` | Dispatched when the radio button is checked. |

package/mcp/radio/guidelines.md

@@ -1,65 +0,0 @@
-# Radio
-
-A radio button is a form control that allows users to select one of the predefined set of choices.
-
-
-## Overview
-
-### Variants
-
-*   **Default**
-    
-*   **Contained**: used only in combination with other contained form components.
-    
-*   **Contained extended(coming soon)**: The contained version but including Label support text.
-
-### Features
-
-#### Label
-
-All individual radio buttons must have a label to ensure clarity and accessibility. When radio buttons are grouped, the group must have a header label. Labels help users understand the purpose of the radio buttons, including those using assistive technologies.
-
-#### Label support
-
-This can be used for both the header and individual radio buttons. Use this to explain how to fill in the field, for example how to count or what to include. Contained radio buttons don’t have support text for the individual radio buttons.
-
-### Contextual help
-
-If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
-
-*   Use a tooltip if space is limited.
-    
-*   Use a modal for large amounts of text.
-
-### Error message
-
-If an error occurs we mark the entire group of options with error. The error is described with an error message.
-
-### Behaviour
-
-*   **Mutual exclusivity**: Only one radio button within a group can be selected at a time.
-    
-*   **Defaults**: Aim for having one option pre-selected.
-
-### Alignment
-
-We can align the radio buttons both horizontal and vertical.
-
-*   **Vertical**: This is the default alignment. It's easier to read and scan the available options.
-    
-*   **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
-
-### Do's and don'ts
-
-
-## UX Guidelines
-
-### Writing UX text for radio buttons
-
-### Radio button options
-
-### We ask the customers, they answer
-
-### Be consistent
-
-### Keep it simple

package/mcp/radio/index.json

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

package/mcp/radio/react.md

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

package/mcp/radio-group/angular.md

@@ -1,26 +0,0 @@
-# gds-radio-group - Angular
-
-## Import
-
-```typescript
-import { GdsRadioGroupComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-radio-group>
-  <!-- content -->
-</gds-radio-group>
-```
-
-## 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)"` |
-| `input` | `input` | `(input)="handler($event)"` |

package/mcp/radio-group/api.md

@@ -1,61 +0,0 @@
-# gds-radio-group
-
-**Class**: `GdsRadioGroup`
-
-**Tag**: `<gds-radio-group>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `'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. |
-| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
-| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
-| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
-| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
-| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
-| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
-| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
-| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
-| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
-| `size` | `'large' \| 'small'` | `'large'` | Controls the font-size of label and supporting text on group form control header and single radio buttons respectively. |
-| `direction` | `'row' \| 'column'` | `'column'` | The direction in which radio buttons are displayed. |
-| `supportingText` | `string` | `''` | The supporting text displayed between the label and the field. This text provides additional context or information to the user. |
-| `showExtendedSupportingText` | `boolean` | `false` | Whether the supporting text should be displayed or not. |
-| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
-| `required` | `boolean` | `false` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
-| `errorMessage` | `string` | `''` | This can be used to manually control the error message that will be displayed when the control is invalid. |
-| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
-| `label` | `string` | `''` | The label of the form control. |
-| `value` | `any` | `-` | Get or set the value of the form control. |
-| `name` | `string` | `''` |  |
-| `disabled` | `boolean` | `false` | If the input is Disabled |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `change` | `Event` | Fired when a radio button selection changes |
-| `input` | `InputEvent` | Fired when a radio button selection changes |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Default slot for radio buttons (accepts `gds-radio` elements) |
-| `extended-supporting-text` | A longer supporting text that will be displayed in a panel when the user clicks the info button |
-
-
-## Form Control
-
-This component is a form control and inherits form-related properties and methods.

package/mcp/radio-group/index.json

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

package/mcp/radio-group/react.md

@@ -1,26 +0,0 @@
-# gds-radio-group - React
-
-## Import
-
-```typescript
-import { GdsRadioGroup } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsRadioGroup>
-  {/* content */}
-</GdsRadioGroup>
-```
-
-## 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}` |
-| `input` | `onInput` | `onInput={handler}` |

package/mcp/rich-text/angular.md

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

package/mcp/rich-text/api.md

@@ -1,48 +0,0 @@
-# gds-rich-text
-
-`gds-rich-text` can be used to wrap generic HTML content and apply typography styles.
-
-The wrapped content will render inside the shadowRoot of the `gds-rich-text` element, thereby applying the
-default typography styles and standard element styles defined in the Green Design System.
-
-**Class**: `GdsRichText`
-
-**Tag**: `<gds-rich-text>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `captureMode` | `'clone' \| 'move'` | `'clone'` | Capture mode for the content.  - `clone` (default): Clones the content to the shadowRoot.\\   This is the default and most compatible behaviour, since it leaves the original DOM untouched.   the downside is that events added through `addEventListener` will not be retained in the cloned DOM.  - `move`: Moves the content to the inner shadowRoot.\\   This mode moves the full original sub-tree into the shadowRoot, leaving everything, including event   listeners, intact.   This mode is less compatible with some libraries that rely on the original DOM structure, for example React |
-| `innerHTML` | `string` | `-` | Forwards innerHTML from the inner shadowRoot. |
-| `'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. |
-| `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. |
-
-
-## Methods
-
-### `querySelectorAll(selector: string): NodeList`
-
-Forwards the selector to the corresponding function on the inner shadowRoot.
-
-**Parameters:**
-
-- `selector`: `string`
-
-### `querySelector(selector: string): Element | null`
-
-Forwards the selector to the corresponding function on the inner shadowRoot.
-
-**Parameters:**
-
-- `selector`: `string`

package/mcp/rich-text/guidelines.md

@@ -1,3 +0,0 @@
-# Rich text
-
-Rich text can be used to wrap generic HTML content and apply typography styles.

package/mcp/rich-text/index.json

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

package/mcp/rich-text/react.md

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

package/mcp/segment/angular.md

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

package/mcp/segment/api.md

@@ -1,21 +0,0 @@
-# gds-segment
-
-**Class**: `GdsSegment`
-
-**Tag**: `<gds-segment>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `selected` | `boolean` | `false` | Whether the segment is selected |
-| `value` | `ValueT \| undefined` | `-` | Value can be used to tie arbitrary data to the segment. |
-| `disabled` | `boolean` | `false` | Whether the segment is disabled. |
-| `_isVisible` | `boolean` | `true` |  |
-| `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. |

package/mcp/segment/index.json

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

package/mcp/segment/react.md

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

package/mcp/segmented-control/angular.md

@@ -1,25 +0,0 @@
-# gds-segmented-control - Angular
-
-## Import
-
-```typescript
-import { GdsSegmentedControlComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-segmented-control>
-  <gds-segment>...</gds-segment>
-</gds-segmented-control>
-```
-
-## 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)"` |

package/mcp/segmented-control/api.md

@@ -1,60 +0,0 @@
-# gds-segmented-control
-
-**Class**: `GdsSegmentedControl`
-
-**Tag**: `<gds-segmented-control>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `'small' \| 'medium'` | `'medium'` | Size of the segmented control |
-| `value` | `any` | `-` | The value of the currently selected segment. Setting this property will select the segment with the matching value. |
-| `intersectionObserver` | `IntersectionObserver \| null` | `null` |  |
-| `'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. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `change` | `Event` | Fires when the selected segment is changed |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Segments to display in the control |
-
-
-## Related Components
-
-This component is designed to work with the following child components:
-
-- **`gds-segment`** - Defines a segment in the segmented control
-
-### Usage Example
-
-```html
-<gds-segmented-control>
-  <gds-segment>...</gds-segment>
-</gds-segmented-control>
-```

package/mcp/segmented-control/guidelines.md

@@ -1,31 +0,0 @@
-# Segmented control
-
-Segmented control allows users to select a single option, immediately changing the display to reflect their selection. It is used for switching views or view options, not for navigation.
-
-
-## Overview
-
-### Size
-
-The segmented control comes in two sizes large (default) and small.
-
-### Behaviour
-
-Component acts as button and trigger a change on click. By default the first item is selected. Only one segment can be active simultaneously.
-
-### Icons
-
-Each segment button has optional leading and trailing icons. Use icons when you need to reinforce the meaning of the label.
-
-### Overflow
-
-Segments can have different widths depending on the content. If there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.
-
-Segment width can also be controlled individually.
-
-### Do's and don'ts
-
-
-## UX Guidelines
-
-### Writing UX text for segmented controls

package/mcp/segmented-control/index.json

@@ -1,15 +0,0 @@
-{
-  "name": "gds-segmented-control",
-  "files": {
-    "api": "api.md",
-    "guidelines": "guidelines.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  },
-  "subcomponents": [
-    {
-      "tagName": "gds-segment",
-      "description": "Defines a segment in the segmented control"
-    }
-  ]
-}

package/mcp/segmented-control/react.md

@@ -1,25 +0,0 @@
-# gds-segmented-control - React
-
-## Import
-
-```typescript
-import { GdsSegmentedControl } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsSegmentedControl>
-  <GdsSegment>...</GdsSegment>
-</GdsSegmentedControl>
-```
-
-## 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}` |

package/mcp/select/angular.md

@@ -1,26 +0,0 @@
-# gds-select - Angular
-
-## Import
-
-```typescript
-import { GdsSelectComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-select>
-  <!-- content -->
-</gds-select>
-```
-
-## 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)"` |
-| `input` | `input` | `(input)="handler($event)"` |