@sebgroup/green-core 3.1.0 → 3.5.0

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-03-31T10:42:15.495Z",
+  "generatedAt": "2026-04-10T07:14:04.624Z",
   "icons": [
     {
       "name": "gds-icon-ai",
@@ -1117,6 +1117,18 @@
         "react"
       ]
     },
+    {
+      "name": "gds-icon-chevron-grabber-vertical-reversed",
+      "tagName": "gds-icon-chevron-grabber-vertical-reversed",
+      "className": "IconChevronGrabberVerticalReversed",
+      "description": "",
+      "path": "icon-chevron-grabber-vertical-reversed/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-icon-chevron-left",
       "tagName": "gds-icon-chevron-left",

package/generated/mcp/img/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `'aspect-ratio'` | `string \| undefined` | `-` | Controls the aspect ratio of the image. Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.  You can apply the aspect ratio like this: ```html <gds-img aspect-ratio="16/9"></gds-img> ``` The above example will apply the aspect ratio of 16/9.  You can also apply different aspect ratios for different screen sizes like this: ```html <gds-img aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-img> ```  The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens. |

package/generated/mcp/index.json

@@ -1,8 +1,9 @@
 {
-  "generatedAt": "2026-03-31T10:42:15.495Z",
+  "generatedAt": "2026-04-10T07:14:04.624Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",
+  "tokens": "./tokens.json",
   "guides": [
     {
       "title": "Angular Setup Guide",

package/generated/mcp/input/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |

package/generated/mcp/link/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `-` | Provides an accessible name for the link that will be read by screen readers. Use this when: - The link contains only an icon - The visual text needs a different description for screen readers - Additional context is needed for accessibility |

package/generated/mcp/mask/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | 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> ``` |

package/generated/mcp/menu-button/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `disabled` | `boolean` | `-` | Whether the menu-button is disabled. |

package/generated/mcp/pagination/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `page` | `number` | `-` | Sets the active page, initially the first page. |

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

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |

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

@@ -12,6 +12,8 @@ default typography styles and standard element styles defined in the Green Desig
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `captureMode` | `'clone' \| 'move'` | `-` | 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 |

package/generated/mcp/segment/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `selected` | `boolean` | `-` | Whether the segment is selected |

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

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `size` | `'small' \| 'medium'` | `-` | Size of the segmented control |

package/generated/mcp/select/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |

package/generated/mcp/sensitive-account/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `hide` | `boolean` | `-` | When true, hides the sensitive account. |

package/generated/mcp/sensitive-date/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `hide` | `boolean` | `-` | When true, hides the sensitive date. |

package/generated/mcp/sensitive-number/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `hide` | `boolean` | `-` | When true, hides the sensitive number. |

package/generated/mcp/spinner/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `-` | The text to display as a label for the spinner |

package/generated/mcp/table/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `headline` | `string \| undefined` | `-` | The main headline text displayed at the top of the table. |

package/generated/mcp/table/react.md

@@ -28,3 +28,87 @@ Events are handled using React event handler props. Event names are converted fr
 | `gds-table-data-loaded` | `onGdsTableDataLoaded` | `onGdsTableDataLoaded={handler}` |
 | `gds-table-data-error` | `onGdsTableDataError` | `onGdsTableDataError={handler}` |
 | `gds-table-selection` | `onGdsTableSelection` | `onGdsTableSelection={handler}` |
+
+## Slots in React
+
+Web component slots work as regular React children. To target a named slot, add the `slot` attribute to the child element — no portals or refs needed.
+
+```tsx
+<GdsTable headline="Users" columns={columns} data={dataProvider} searchable>
+  {/* Named slot: header-lead */}
+  <GdsDropdown slot="header-lead" size="small" plain>
+    <span slot="trigger">Filter</span>
+    <GdsOption value="active">Active</GdsOption>
+    <GdsOption value="inactive">Inactive</GdsOption>
+  </GdsDropdown>
+
+  {/* Named slot: header-trail */}
+  <GdsButton slot="header-trail" rank="secondary" size="small">
+    Export
+  </GdsButton>
+
+  {/* Named slot: empty */}
+  <div slot="empty">No data available</div>
+</GdsTable>
+```
+
+### Custom cell slot content
+
+Cell slots require three steps: configure slots in the data provider using `Slot()`, listen for loaded data, and render slot content as children.
+
+#### Step 1: Configure slots in the data provider
+
+Import `Slot` from the types file and wrap cell values that need rich content:
+
+```tsx
+import { Slot } from '@sebgroup/green-core/components/table/table.types'
+
+// Slot(value, slotIds) — value is used for sorting/search, slotIds define the cell layout
+// The special slot ID 'value' renders the plain text value inline
+
+async function dataProvider(request) {
+  const data = await fetchData(request)
+  return {
+    ...data,
+    rows: data.rows.map((row) => ({
+      ...row,
+      name: Slot(row.name, ['avatar', 'value']), // image + text
+      email: Slot(row.email, ['value', 'copy-button']), // text + button
+      status: Slot(row.status, ['status']), // badge only (no plain text)
+    })),
+  }
+}
+```
+
+Cells without `Slot()` render as plain text automatically.
+
+#### Step 2: Listen for data and render slot content
+
+Slot elements use the naming convention `columnKey:rowId:slotId` and are rendered as direct children of `<GdsTable>`:
+
+```tsx
+function TableWithSlots() {
+  const [rows, setRows] = useState([])
+
+  return (
+    <GdsTable columns={columns} data={dataProvider} onGdsTableDataLoaded={(e) => setRows(e.detail.rows)}>
+      {rows.map((row) => (
+        <React.Fragment key={row.id}>
+          {/* name column: avatar slot */}
+          <GdsImg slot={`name:${row.id}:avatar`} src={row.avatarUrl} width="xl" height="xl" />
+
+          {/* email column: copy-button slot */}
+          <GdsButton slot={`email:${row.id}:copy-button`} rank="tertiary" size="small">
+            <IconCopy />
+          </GdsButton>
+
+          {/* status column: status slot */}
+          <GdsBadge slot={`status:${row.id}:status`} variant={row.status === 'Active' ? 'positive' : 'negative'} size="small">
+            {row.status}
+          </GdsBadge>
+        </React.Fragment>
+      ))}
+    </GdsTable>
+  )
+}
+```

package/generated/mcp/text/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `tag` | `string` | `-` | Controls the tag of the text. Supports all valid HTML tags like h1, h2, h3, h4, h5, h6, p, span, etc. |

package/generated/mcp/text/index.json

@@ -2,6 +2,7 @@
   "name": "gds-text",
   "files": {
     "api": "api.md",
+    "instructions": "instructions.md",
     "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"

package/generated/mcp/text/instructions.md

@@ -0,0 +1,4 @@
+- `tag` sets the semantic heading level. Default styles (font, weight, line-height) are already applied for each tag — do not override unless deliberately changing the visual hierarchy.
+- To override visual hierarchy, use the `font` property with a typography token (e.g. `font="heading-m"`). Look up available tokens with `get_tokens category=typography`.
+- Avoid setting `font-weight` directly. Heading tokens already include the correct weight.
+- Default tag-to-token mapping: h1→heading-xl, h2→heading-l, h3→heading-m, h4→heading-s, h5/h6→heading-xs, p→body-m-regular

package/generated/mcp/textarea/api.md

@@ -7,6 +7,8 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |