@sebgroup/green-core 2.21.0-rc.20251218133405834 → 2.21.0-rc.20260112150926042

package/generated/mcp/popover/angular.md

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

package/generated/mcp/popover/api.md

@@ -0,0 +1,41 @@
+# gds-popover
+
+**Class**: `GdsPopover`
+
+**Tag**: `<gds-popover>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Whether the popover is open. |
+| `popupRole` | `'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'` | `'dialog'` | This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element. Read here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup |
+| `triggerRef` | `Promise<HTMLElement> \| undefined` | `-` | Optional way to assign a trigger element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the trigger element programatically. |
+| `anchorRef` | `Promise<HTMLElement> \| undefined` | `-` | Optional way to assign an anchor element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the anchor element programatically. |
+| `label` | `string \| undefined` | `undefined` | Optional trigger element for the popover. |
+| `placement` | `Placement` | `'bottom-start'` | The placement of the popover relative to the trigger. Accepts any of the placements supported by Floating UI. |
+| `disableMobileStyles` | `boolean` | `false` | Whether to use a modal dialog in mobile viewport. |
+| `autofocus` | `boolean` | `false` | Whether the popover should autofocus the first slotted child when opened. |
+| `calcMinWidth` | `any` | `-` | A callback that returns the minimum width of the popover. By default, the popover minWidth will be as wide as the trigger element. |
+| `calcMaxWidth` | `any` | `-` | A callback that returns the maximum width of the popover. By default, the popover maxWidth will be set to `auto` and will grow as needed. |
+| `calcMinHeight` | `any` | `-` | A callback that returns the minimum height of the popover. By default, the popover minHeight will be set to `auto` |
+| `calcMaxHeight` | `any` | `-` | A callback that returns the maximum height of the popover. By default, the popover maxHeight will be set to a hard coded pixel value (check source code). |
+| `nonmodal` | `boolean` | `false` | Whether the popover is nonmodal. When true, the popover will not trap focus and other elements on the page will still be interactable while the popover is open. |
+| `backdrop` | `string \| undefined` | `-` | When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is in modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be set to a selector matching a `<gds-backdrop>` element, in wich case the popover will take control of that backdrop.  Example: ```html <gds-popover backdrop=".my-backdrop">   <gds-button slot="trigger">Open</gds-button>   <p>Popover content</p> </gds-popover> <gds-backdrop class="my-backdrop"></gds-backdrop> ``` |
+| `floatingUIMiddleware` | `Middleware[]` | `-` | An array of middleware for the Floating UI positioning algorithm. Here you can pass in an array of middleware to customize positioning to your needs. This array is passed directly to Floting UI, so you can just follow the documentation here: https://floating-ui.com/docs/middleware  This property does not have a corresponding attribute, so it can only be set in JavaScript.  Defaults to `[offset(8), flip()]` |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-ui-state` | `CustomEvent<any>` | Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Content of the popover |
+| `trigger` | Trigger element for the popover. If this slot is occupied, the popover will listen to keydown and click events on the trigger and automtaiclly open when clicked or when the trigger is focused and `ArrowDown` is pressed. |

package/generated/mcp/popover/guidelines.md

@@ -0,0 +1,3 @@
+# Popover
+
+A popover is a temporary view that appears above other content.

package/generated/mcp/popover/index.json

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

package/generated/mcp/popover/react.md

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

package/generated/mcp/radio/angular.md

@@ -0,0 +1,23 @@
+# gds-radio - Angular
+
+## Import
+
+```typescript
+import { GdsRadioComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-radio></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/generated/mcp/radio/api.md

@@ -0,0 +1,25 @@
+# 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/generated/mcp/radio/guidelines.md

@@ -0,0 +1,65 @@
+# 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/generated/mcp/radio/index.json

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

package/generated/mcp/radio/instructions.md

@@ -0,0 +1,3 @@
+- Radio buttons should always be placed inside a radio group.
+- The visible label for radio buttons should be added in the `label` attribute.
+- The radio button element cannot have any children, including text nodes.

package/generated/mcp/radio/react.md

@@ -0,0 +1,23 @@
+# gds-radio - React
+
+## Import
+
+```typescript
+import { GdsRadio } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<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/generated/mcp/radio-group/angular.md

@@ -0,0 +1,26 @@
+# 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/generated/mcp/radio-group/api.md

@@ -0,0 +1,61 @@
+# 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/generated/mcp/radio-group/index.json

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

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

@@ -0,0 +1,26 @@
+# 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/generated/mcp/rich-text/angular.md

@@ -0,0 +1,15 @@
+# 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></gds-rich-text>
+```

package/generated/mcp/rich-text/api.md

@@ -0,0 +1,48 @@
+# 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/generated/mcp/rich-text/guidelines.md

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

package/generated/mcp/rich-text/index.json

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

package/generated/mcp/rich-text/react.md

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

package/generated/mcp/segment/angular.md

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

package/generated/mcp/segment/api.md

@@ -0,0 +1,21 @@
+# 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/generated/mcp/segment/index.json

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

package/generated/mcp/segment/react.md

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

package/generated/mcp/segmented-control/angular.md

@@ -0,0 +1,25 @@
+# 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/generated/mcp/segmented-control/api.md

@@ -0,0 +1,60 @@
+# 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>
+```