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

package/mcp/list-item/api.md

@@ -1,5 +0,0 @@
-# gds-list-item
-
-**Class**: `GdsListItem`
-
-**Tag**: `<gds-list-item>`

package/mcp/list-item/index.json

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

package/mcp/list-item/react.md

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

package/mcp/mask/angular.md

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

package/mcp/mask/api.md

@@ -1,77 +0,0 @@
-# gds-mask
-
-**Class**: `GdsMask`
-
-**Tag**: `<gds-mask>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `background` | `string \| undefined` | `-` | Style Expression Property that controls the `background` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div background="neutral-01/0.2"></gds-div> ``` |
-| `'mask-image'` | `string \| undefined` | `-` |  |
-| `'mask-size'` | `string` | `'cover'` |  |
-| `'mask-repeat'` | `string` | `'no-repeat'` |  |
-| `'mask-position'` | `string` | `'center'` |  |
-| `'backdrop-filter'` | `string \| undefined` | `-` | Controls the backdrop-filter property of the container. When you want to apply a backdrop blur filter to the container you can use this property.  ```html <gds-mask backdrop-filter="20px"></gds-mask> ```  The above example will apply a backdrop blur filter of `20px`.   The filter also support breakpoint syntax like this:  ```html <gds-mask backdrop-filter="s{20px} m{40px} l{60px}"></gds-mask> ```  The above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices. |
-| `position` | `string \| undefined` | `'relative'` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
-| `display` | `string \| undefined` | `'flex'` | Controls the display property. Supports all valid CSS display values. |
-| `inset` | `string \| undefined` | `'0'` | 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. |
-| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
-| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
-| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
-| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
-| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
-| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-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. |
-| `padding` | `string \| undefined` | `-` | Style Expression Property that controls the `padding` property. Only accepts space tokens. |
-| `'padding-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-inline` property. Only accepts space tokens. |
-| `'padding-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `padding-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. |
-| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
-| `level` | `GdsColorLevel` | `'2'` | The level of the container is used to resolve the color tokens from the corresponding level. Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.  Default for `gds-div` is level 2. |
-| `color` | `string \| undefined` | `-` | Style Expression Property that controls the `color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div color="neutral-01/0.2"></gds-div> ``` |
-| `border` | `string \| undefined` | `-` | Style Expression Property that controls the `border` property. Accepts a string of the same format as the CSS border property.  ```html <gds-div border="4xs solid subtle-01/0.2"></gds-div> ```  Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value. |
-| `'border-color'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-color` property. Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.  ```html <gds-div border-color="subtle-01/0.2"></gds-div> ``` |
-| `'border-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-width` property. Only accepts space tokens. |
-| `'border-style'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-style` property. Supports all valid CSS `border-style` values. |
-| `'border-radius'` | `string \| undefined` | `-` | Style Expression Property that controls the `border-radius` property. Only accepts space tokens. |
-| `'box-shadow'` | `string \| undefined` | `-` | Style Expression Property for the `box-shadow` property.  Accepts shadow tokens from the design system.  `xs`, `s`, `m`, `l`, `xl` |
-| `opacity` | `string \| undefined` | `-` | Style Expression Property that controls the `opacity` property. Supports all valid CSS `opacity` values. |
-| `overflow` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow` property. Supports all valid CSS `overflow` values. |
-| `'box-sizing'` | `string \| undefined` | `-` | Style Expression Property that controls the `box-sizing` property. Supports all valid CSS `box-sizing` values. |
-| `'z-index'` | `string \| undefined` | `-` | Style Expression Property that controls the `z-index` property. Supports all valid CSS `z-index` values. |
-| `'font'` | `string \| undefined` | `-` | Style Expression Property that controls the `font` property. Supports all font tokens from the design system. |
-| `'font-weight'` | `string \| undefined` | `-` | Style Expression Property that controls the `font-weight` property. Supports all typography weight tokens from the design system. |
-| `'text-align'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-align` property. Supports all valid CSS `text-align` values. |
-| `'text-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `text-wrap` property. Supports all valid CSS `text-wrap` values. |
-| `'overflow-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `overflow-wrap` property. Supports all valid CSS `overflow-wrap` values. |
-| `'white-space'` | `string \| undefined` | `-` | Style Expression Property that controls the `white-space` property. Supports all valid CSS `white-space` values. |
-| `gap` | `string \| undefined` | `-` | Style Expression Property that controls the `gap` property. Only accepts space tokens. |
-| `'align-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-items` property. Supports all valid CSS `align-items` values. |
-| `'align-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-content` property. Supports all valid CSS `align-content` values. |
-| `'justify-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-content` property. Supports all valid CSS `justify-content` values. |
-| `'justify-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-items` property. Supports all valid CSS `justify-items` values. |
-| `'flex-direction'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-direction` property. Supports all valid CSS `flex-direction` values. |
-| `'flex-wrap'` | `string \| undefined` | `-` | Style Expression Property that controls the `flex-wrap` property. Supports all valid CSS `flex-wrap` values. |
-| `'place-items'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-items` property. Supports all valid CSS `place-items` values. |
-| `'place-content'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-content` property. Supports all valid CSS `place-content` values. |
-| `'aspect-ratio'` | `string \| undefined` | `-` | Style Expression Property that controls the `aspect-ratio` property. Supports all valid CSS `aspect-ratio` values. |
-| `cursor` | `string \| undefined` | `-` | Style Expression Property that controls the `cursor` property. Supports all valid CSS `cursor` values. |
-| `'pointer-events'` | `string \| undefined` | `-` | Style Expression Property that controls the `pointer-events` property. Supports all valid CSS `pointer-events` values. |

package/mcp/mask/index.json

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

package/mcp/mask/react.md

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

package/mcp/menu-button/angular.md

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

package/mcp/menu-button/api.md

@@ -1,54 +0,0 @@
-# gds-menu-button
-
-**Class**: `GdsMenuButton`
-
-**Tag**: `<gds-menu-button>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | Whether the menu-button is disabled. |
-| `label` | `string` | `''` | The label of the menu-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. |
-| `compact` | `boolean` | `false` | The label of the menu-button. Use this to add an accessible label to the button when no text is provided in the default slot. |
-| `selected` | `boolean` | `false` | Whether the menu button is selected |
-| `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. |
-| `'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. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `click` | `MouseEvent` | Fired when the button is clicked. |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Content to be displayed as the button label. |
-| `lead` | An optional slot that allows a `gds-icon` element to be placed before the label. |
-| `trail` | An optional slot that allows a `gds-icon` element to be placed after the label. |
-
-
-## Routing Support
-
-This component supports routing via the `href` property.

package/mcp/menu-button/guidelines.md

@@ -1,39 +0,0 @@
-# Menu button
-
-A menu button combines button and link behaviors for navigation menus.
-
-
-## Overview
-
-### Usage
-
-Use the menu button to create clear and accessible navigation. Choose the appropriate combination of text and icon depending on the context:
-
-*   **Text only** is best for straightforward links where the label clearly communicates the destination.
-    
-*   **Text with icon** adds clarity, especially when the icon reinforces the meaning (e.g., a user icon for profile-related links).
-    
-*   **Icon only** can be used when space is limited, but only if the icon is widely recognized and its meaning is clear.
-    
-
-Menu buttons have a selected state that visually indicate the current page or section.
-
-### Sizes
-
-The menu button comes in three sizes to fit different layout needs and navigation contexts:

-
-*   **Large** - Typically used in primary navigation where space allows for larger, more prominent buttons. It provides good readability and clear touch targets.
-    
-*   **Medium** - Works well when space is limited but readability and clarity are still important.
-    
-*   **Small** - Optimized for tighter layouts and smaller viewports. The text and icon are vertically aligned to maintain visual balance in compact spaces, such as in mobile navigation or secondary toolbars.
-    
-
-Regardless of size, the height of the menu button will adapt to match the height set by the container. This ensures consistent alignment and spacing across the entire navigation.
-
-### Do's and don'ts
-
-
-## UX Guidelines
-
-### Writing UX text for menu buttons

package/mcp/menu-button/index.json

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

package/mcp/menu-button/react.md

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

package/mcp/menu-heading/angular.md

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

package/mcp/menu-heading/api.md

@@ -1,12 +0,0 @@
-# gds-menu-heading
-
-**Class**: `GdsMenuHeading`
-
-**Tag**: `<gds-menu-heading>`
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | The default slot for the menu heading content. |

package/mcp/menu-heading/index.json

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

package/mcp/menu-heading/react.md

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

package/mcp/menu-item/angular.md

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

package/mcp/menu-item/api.md

@@ -1,5 +0,0 @@
-# gds-menu-item
-
-**Class**: `GdsMenuItem`
-
-**Tag**: `<gds-menu-item>`

package/mcp/menu-item/index.json

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

package/mcp/menu-item/react.md

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

package/mcp/option/angular.md

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

package/mcp/option/api.md

@@ -1,29 +0,0 @@
-# gds-option
-
-**Class**: `GdsOption`
-
-**Tag**: `<gds-option>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `any` | `-` | The value of the option. |
-| `hidden` | `boolean` | `-` | Controls whether the option is visible or not. |
-| `selected` | `boolean` | `false` | Returns true if the option is selected. Setting this property will select or unselect the option. |
-| `isPlaceholder` | `boolean` | `false` | Sets this option as a placeholder. A placehodler option does not have a value and will act as the default option.  In a multiple select listbox, placeholder options will not be rendered in the list. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `gds-select` | `CustomEvent<any>` | Fired when the option is selected. |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | The default slot. Custom content can be used to display the option. |

package/mcp/option/index.json

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

package/mcp/option/react.md

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

package/mcp/popover/angular.md

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

@@ -1,41 +0,0 @@
-# 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/mcp/popover/guidelines.md

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

package/mcp/popover/index.json

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

package/mcp/popover/react.md

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