@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251218145150154

package/generated/mcp/dropdown/api.md

@@ -0,0 +1,95 @@
+# gds-dropdown
+
+**Class**: `GdsDropdown`
+
+**Tag**: `<gds-dropdown>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `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. |
+| `supportingText` | `string` | `''` | The supporting text displayed between the label and the field itself. |
+| `open` | `boolean` | `false` | Sets the open state of the dropdown. |
+| `searchable` | `boolean` | `false` | Whether the dropdown should be searchable. |
+| `multiple` | `boolean` | `false` | Whether the dropdown should support multiple selections. When set to true, the dropdown will render a checkbox next to each option. The value of the dropdown will be an array of the selected values. |
+| `clearable` | `boolean` | `false` | Whether the dropdown should be clearable. |
+| `combobox` | `boolean` | `false` | Whether the dropdown should be rendered as a combobox. When set to true, the dropdown will render an input field instead of a button. The value of the dropdown will be a string representing the selected value. |
+| `compareWith` | `(a: unknown, b: unknown) => boolean` | `-` | Delegate function for comparing option values. By default the option values are compared using strict equality. If you want to compare objects by field values, you can provide a custom compare function here. The function should return true if the values are considered equal.  Example: ```ts dropdown.compareWith = (a, b) => a.id === b.id ``` |
+| `searchFilter` | `(q: string, o: GdsOption) => boolean` | `-` | Delegate function for customizing the search filtering. By default, the search filter will just check if the option label contains the search string using [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes).  This property allows you to provide a custom filter function to use instead.  For example, to filter on value instead of label: ```ts dropdown.searchFilter = (query, option) =>    option.value.toLowerCase().includes(query.toLowerCase()) ``` |
+| `syncPopoverWidth` | `boolean` | `false` | Whether the popover should sync its width to the trigger button. When this is set to `true`, the popover will always have the same width as the trigger button.  By default, line-breaks will be applied to the option content if it is wider than the popover width. If you use this option, make sure to verify that your options are still readable and apply appropriate custom layout or truncation if neccecary. |
+| `maxHeight` | `number` | `500` | Maximum height of the dropdown list. |
+| `size` | `'medium' \| 'small'` | `'medium'` | Size of the dropdown. Supports `medium` and `small`. There is no `large` size for dropdowns. `medium` is the default size. |
+| `hideLabel` | `boolean` | `false` | Whether to hide the label. |
+| `plain` | `boolean` | `false` | Hides the header and the footer, while still keeping the accessible label  Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. |
+| `disableMobileStyles` | `boolean` | `false` | Whether to disable the mobile styles. |
+| `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 the value of the dropdown is changed through user interaction (not when value prop is set programatically). |
+| `input` | `InputEvent` | Fired when the value of the dropdown is changed through user interaction. |
+| `gds-ui-state` | `CustomEvent<any>` | Fired when the dropdown is opened or closed by the user. Can be cancelled to prevent the dropdown from opening or closing. |
+| `gds-filter-input` | `CustomEvent<any>` | Fired when the user types in the search field. The event is cancellable, and the consumer is expected to handle filtering and updating the options list if the event is cancelled. |
+| `gds-input-cleared` | `CustomEvent<any>` | Fired when the user clears the input using the clear button. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements. |
+| `trigger` | Custom content for the trigger button can be assigned through this slot. |
+| `extended-supporting-text` | A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button. |
+| `message` | ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error. |
+| `sub-label` | ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button. |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.
+
+
+## Related Components
+
+This component is designed to work with the following child components:
+
+- **`gds-option`** - Defines an option in the dropdown
+- **`gds-menu-heading`** - Defines a non-selectable heading in the dropdown options list
+
+### Usage Example
+
+```html
+<gds-dropdown>
+  <gds-option>...</gds-option>
+  <gds-menu-heading>...</gds-menu-heading>
+</gds-dropdown>
+```

package/generated/mcp/dropdown/guidelines.md

@@ -0,0 +1,89 @@
+# Dropdown
+
+A dropdown enables the user to choose one or multiple options from a list.
+
+
+## Overview
+
+### Sizes
+
+*   **Large**
+    
+*   **Small**: Used in tables and in certain cases where space is very limited. (Custom layouts are not supported.)
+
+### Features
+
+#### Label
+
+All dropdown fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.
+
+#### Optional field indicator
+
+We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.
+
+#### Support text
+
+Use this to explain how to fill in the field, for example how to count or what to include.
+
+### Contextual help
+
+If the label and support text aren’t 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.
+
+#### Leading icon
+
+A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed.
+
+### Single select
+
+Use this version when users should select only one option from the list.
+
+### Multi select
+
+Use this version when users should be able to select one or multiple options from the list.
+
+### Search
+
+A search field can be used to filter the options.
+
+*   If the list is long (e.g., 10+ items), searching helps users find what they need faster.
+    
+*   When items are similar or not in a predictable order, searching improves efficiency.
+    
+*   If users have a specific item in mind, typing is often faster than scrolling.
+    
+*   Search helps users who navigate with keyboards or screen readers find options more quickly.
+
+### Option groups
+
+If the options can be grouped, this helps users find choices in large lists. The group can include a badge showing the number of options it contains.
+
+### Custom option layout
+
+The text slot for each dropdown and option supports a custom layout with multiple values, typically used for account selection. These layouts can be customised for specific use cases. Note that these fields are taller than a regular dropdown.
+
+#### Combo box
+
+This field allows users to type directly into it, like a standard input field. As they type, a list of matching options appears. If they enter an option that isn’t in the list, it is still accepted as a valid choice.
+
+#### Clearable
+
+To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.
+
+#### Error message
+
+Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.
+
+
+## UX Guidelines
+
+### Writing UX text for drop-downs
+
+### Use clear and informative words
+
+### Placeholder text
+
+### Capitalisation rules

package/generated/mcp/dropdown/index.json

@@ -0,0 +1,19 @@
+{
+  "name": "gds-dropdown",
+  "files": {
+    "api": "api.md",
+    "guidelines": "guidelines.md",
+    "angular": "angular.md",
+    "react": "react.md"
+  },
+  "subcomponents": [
+    {
+      "tagName": "gds-option",
+      "description": "Defines an option in the dropdown"
+    },
+    {
+      "tagName": "gds-menu-heading",
+      "description": "Defines a non-selectable heading in the dropdown options list"
+    }
+  ]
+}

package/generated/mcp/dropdown/react.md

@@ -0,0 +1,30 @@
+# gds-dropdown - React
+
+## Import
+
+```typescript
+import { GdsDropdown } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsDropdown>
+  <GdsOption>...</GdsOption>
+  <GdsMenuHeading>...</GdsMenuHeading>
+</GdsDropdown>
+```
+
+## 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}` |
+| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |
+| `gds-filter-input` | `onGdsFilterInput` | `onGdsFilterInput={handler}` |
+| `gds-input-cleared` | `onGdsInputCleared` | `onGdsInputCleared={handler}` |

package/generated/mcp/fab/angular.md

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

package/generated/mcp/fab/api.md

@@ -0,0 +1,67 @@
+# gds-fab
+
+**Class**: `GdsFab`
+
+**Tag**: `<gds-fab>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
+| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
+| `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. |
+| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
+| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
+| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
+| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
+| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
+| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
+| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
+| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
+| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
+| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
+| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
+| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
+| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
+| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
+| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
+| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
+| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
+| `disabled` | `boolean` | `false` | Whether the button is disabled. |
+| `'justify-content'` | `string \| undefined` | `-` | Spread the contents of the button |
+| `type` | `HTMLButtonElement['type'] \| undefined` | `-` | The type of the button. |
+| `rank` | `'primary' \| 'secondary' \| 'tertiary'` | `'primary'` | The rank of the button. Defaults to "primary". |
+| `variant` | `\| 'brand'     \| 'neutral'     \| 'positive'     \| 'negative'     \| 'notice'     \| 'warning'` | `'neutral'` | Defines which variant the button belongs to. Defaults to "neutral". |
+| `size` | `'xs' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Sets the size of the button. Defaults to "medium". |
+| `label` | `string` | `''` | The label of the button. Use this to add an accessible label to the button when no text is provided in the default slot. |
+| `href` | `string` | `''` | When set, the underlying button will be rendered as an anchor element. |
+| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Where to display the linked URL. Only used when href is present. |
+| `rel` | `string \| undefined` | `-` | The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to "noreferrer noopener" for security reasons when target is set. |
+| `download` | `string \| undefined` | `-` | Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present. |
+| `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. |
+| `value` | `any` | `-` | Get or set the value of the form control. |
+| `name` | `string` | `''` |  |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Content of the FAB |
+| `lead` | An optional slot that allows a `gds-icon-[ICON_NAME]` element to be placed before the label. |
+| `trail` | An optional slot that allows a `gds-icon-[ICON_NAME]` element to be placed after the label. |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.
+
+
+## Routing Support
+
+This component supports routing via the `href` property.

package/generated/mcp/fab/guidelines.md

@@ -0,0 +1,27 @@
+# FAB
+
+Floating action button persists across screens for constant access to features that needs to be accessible at all times.
+
+
+## Overview
+
+### Usage
+
+The FAB is a high-visibility button used to promote a **key action** on a screen. It typically floats above the content, anchored to a corner (usually bottom-right or bottom-center on mobile).
+
+Use the FAB when a single, standout action is needed such as "Add", "Create", or "Start". It should never compete with other primary actions and should be used **sparingly** to avoid visual clutter.
+
+### Variants
+
+The FAB can be adapted based on layout and context:
+
+*   **FAB** – A circular button with an icon (e.g. a plus sign for “Add”)
+    
+*   **Extended FAB** – A wider button with both an icon and a label (e.g. “Add item”). Useful when more clarity is needed.
+
+### Do’s and don’ts
+
+
+## UX Guidelines
+
+### Writing UX text for FAB's

package/generated/mcp/fab/index.json

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

package/generated/mcp/fab/react.md

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

package/generated/mcp/filter-chip/angular.md

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

package/generated/mcp/filter-chip/api.md

@@ -0,0 +1,14 @@
+# gds-filter-chip
+
+**Class**: `GdsFilterChip`
+
+**Tag**: `<gds-filter-chip>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `selected` | `boolean` | `false` | Whether the chip is selected |
+| `value` | `ValueT \| undefined` | `-` | The value of the chip |
+| `size` | `'small' \| 'large'` | `'large'` | The size of the chip |

package/generated/mcp/filter-chip/index.json

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

package/generated/mcp/filter-chip/react.md

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

package/generated/mcp/filter-chips/angular.md

@@ -0,0 +1,25 @@
+# gds-filter-chips - Angular
+
+## Import
+
+```typescript
+import { GdsFilterChipsComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-filter-chips>
+  <!-- content -->
+</gds-filter-chips>
+```
+
+## 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/filter-chips/api.md

@@ -0,0 +1,49 @@
+# gds-filter-chips
+
+**Class**: `GdsFilterChips`
+
+**Tag**: `<gds-filter-chips>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `any` | `-` | The value of the currently selected chip or chips. This will be an array if multi-select is enabled. |
+| `multiple` | `boolean` | `false` | Whether multiple chips can be selected at once. |
+| `label` | `string` | `''` | The accessible label for the control |
+| `rowCollapse` | `boolean` | `false` | Whether the chips should collapse into a single row when space is limited |
+| `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. |
+| `name` | `string` | `''` |  |
+| `disabled` | `boolean` | `false` | If the input is Disabled |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `change` | `Event` | When a chip is clicked |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | The filter chips to display |
+
+
+## Methods
+
+### `focus(options?: FocusOptions): void`
+
+**Parameters:**
+
+- `options`: `FocusOptions` _(optional)_
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.

package/generated/mcp/filter-chips/guidelines.md

@@ -0,0 +1,41 @@
+# Filter chips
+
+Filter chips allow users to narrow down the data they want to see on the page.
+
+
+## Overview
+
+### Variants
+
+The filter chip component comes in two variants, each supporting a different stage of the filtering experience:
+
+*   **Selectable** – The default state, displaying only a label. Use this variant when presenting available filter options. When selected the chips updates to show a checkmark icon alongside the label, indicating an active filter.
+    
+*   **Removable** – Used to represent an applied filter. This chip includes a label and a close (×) icon, allowing users to remove the filter with a single click or tap.
+
+### Example
+
+If a user has accounts in three countries, only those three countries should be shown as filter chips. If they have accounts in just one country, there's no need to show a country filter at all.

+
+To improve clarity and support informed decisions, display the number of results each selected filter will return. This gives users immediate feedback on how their choices are narrowing or broadening the data set.
+
+### Sizes
+
+The filter chips comes in two sizes:
+
+*   **Large** (default)
+    
+*   **Small**
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for filter chips
+
+### Avoid the & sign
+
+### Do not mix word classes
+
+### Do's and don'ts

package/generated/mcp/filter-chips/index.json

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

package/generated/mcp/filter-chips/react.md

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

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