@sebgroup/green-core 3.13.0 → 3.14.0

package/gds-element.js

@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "3.13.0";
+    this.semanticVersion = "3.14.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-03T13:53:29.653Z",
+  "generatedAt": "2026-06-10T08:31:07.742Z",
   "components": [
     {
       "name": "gds-alert",
@@ -514,6 +514,7 @@
       "path": "list-item-pattern-01/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -763,6 +764,30 @@
         "react"
       ]
     },
+    {
+      "name": "gds-tab",
+      "tagName": "gds-tab",
+      "className": "GdsTab",
+      "description": "",
+      "path": "tab/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
+    {
+      "name": "gds-tab-panel",
+      "tagName": "gds-tab-panel",
+      "className": "GdsTabPanel",
+      "description": "",
+      "path": "tab-panel/",
+      "files": [
+        "api",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-table",
       "tagName": "gds-table",
@@ -776,6 +801,19 @@
         "react"
       ]
     },
+    {
+      "name": "gds-tabs",
+      "tagName": "gds-tabs",
+      "className": "GdsTabs",
+      "description": "",
+      "path": "tabs/",
+      "files": [
+        "api",
+        "guidelines",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-text",
       "tagName": "gds-text",

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-03T13:53:29.653Z",
+  "generatedAt": "2026-06-10T08:31:07.742Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-03T13:53:29.653Z",
+  "generatedAt": "2026-06-10T08:31:07.742Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/list-item-pattern-01/guidelines.md

@@ -0,0 +1 @@
+# List item pattern 01

package/generated/mcp/list-item-pattern-01/index.json

@@ -2,6 +2,7 @@
   "name": "gds-list-item-pattern-01",
   "files": {
     "api": "api.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/mcp/tab/angular.md

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

@@ -0,0 +1,32 @@
+# gds-tab
+
+**Class**: `GdsTab`
+
+**Tag**: `<gds-tab>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `'small' \| 'medium'` | `-` | Optional size variant. When set to "small", applies reduced padding. |
+| `disabled` | `boolean` | `-` | Disables selection of this tab. |
+| `selected` | `boolean` | `-` | Whether this tab is currently selected. Managed by the parent `<gds-tabs>`. |
+| `panel` | `string` | `-` | The `name` of the `<gds-tab-panel>` to associate with this tab. When set, this tab controls the panel whose `name` attribute matches, regardless of DOM order. When omitted, pairing falls back to position. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `click` | `MouseEvent` | Fired when the tab is clicked. Note that clicks on disabled tabs are ignored. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `lead` | Optional content before the label (e.g. an icon) |
+| `(default)` | The tab label text content |
+| `trail` | Optional content after the label (e.g. a badge) |

package/generated/mcp/tab/index.json

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

package/generated/mcp/tab/react.md

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

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

package/generated/mcp/tab-panel/api.md

@@ -0,0 +1,20 @@
+# gds-tab-panel
+
+**Class**: `GdsTabPanel`
+
+**Tag**: `<gds-tab-panel>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | `-` | A unique name used to associate this panel with a `<gds-tab panel="...">.` Must be unique within the parent `<gds-tabs>`. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | Panel content |

package/generated/mcp/tab-panel/index.json

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

package/generated/mcp/tab-panel/react.md

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

package/generated/mcp/tabs/angular.md

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

package/generated/mcp/tabs/api.md

@@ -0,0 +1,49 @@
+# gds-tabs
+
+**Class**: `GdsTabs`
+
+**Tag**: `<gds-tabs>`
+
+
+## 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` | `number` | `-` |  |
+| `label` | `string` | `-` | Accessible label for the tab list container |
+| `'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. |
+| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `click` | `MouseEvent` | Composed click events from child <gds-tab> elements. Note that clicks on disabled tabs are ignored. |
+| `gds-tab-change` | `CustomEvent<any>` | Fires when selected tab changes. Detail: { index: number, tab: GdsTab } |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `tab` | One or more <gds-tab> trigger elements |
+| `(default)` | One or more <gds-tab-panel> content elements |

package/generated/mcp/tabs/guidelines.md

@@ -0,0 +1,71 @@
+# Tabs
+
+Tabs allow users to navigate between groups of related content at the same level of hierarchy.
+
+
+## Overview
+
+### Default
+
+Tabs are used as local navigation to organise related content into logical groupings. Users can switch between views without losing the context of the page.
+
+### Overflow behaviour
+
+When tabs exceed the available width, all tabs that cannot fit are grouped into a list in a fold-out modal. On mobile with only two tabs, each tab takes up 50% of the width.
+
+### Tabs vs segmented control
+
+Tabs and segmented controls can look similar, but they serve very different purposes. Choosing the wrong component leads to user confusion and misaligned expectations.
+
+#### Use tabs when
+
+Use tabs to navigate between **completely different views or distinct sections of content**. Each tab reveals unique content that is unrelated to what the other tabs show.
+
+Think of tabs as separate binders — switching tabs takes the user to an entirely different set of content.
+
+*   The content under each tab is meaningfully different in nature
+    
+*   Users are unlikely to need to compare the contents of multiple tabs at once
+    
+*   The tabs act as primary or secondary navigation within the page
+    
+*   Content groupings are based on different topics, data sets, or tasks
+
+#### Use segmented control when
+
+Use segmented control to **filter or toggle the presentation of the same underlying content**. The data does not change — only how it is displayed or sorted.
+
+Think of segmented control as a switch that changes the lens through which you view the same document.
+
+*   You are switching between different representations of the same data (e.g. list vs. grid, weekly vs. monthly)
+    
+*   The options act as filters or view toggles within a single context
+    
+*   The component is embedded within a form or a content area, not used as page navigation
+
+### Guidelines
+
+Tabs are best suited for a small number of clearly distinct content groupings. Order tabs according to user needs, placing the most commonly accessed tab first.
+
+### Disabled tabs
+
+Individual tabs can be disabled to indicate that a section is unavailable. Use this sparingly and only when the reason for unavailability is clear to the user.
+
+### Link tabs
+
+Tabs can render as anchor links, navigating to a new URL rather than switching panel content inline. Use link tabs for top-level or cross-page navigation where each tab corresponds to a distinct URL.
+
+### Leading and trailing content
+
+Tab items support a leading slot for icons and a trailing slot for supplementary content such as notification badges or counts. Use these slots to aid recognition or communicate status — not for decoration.
+
+### Leading and trailing content guidelines
+
+
+## UX Guidelines
+
+### Writing UX text for tabs
+
+### Tab labels
+
+### Common tab labels in overviews

package/generated/mcp/tabs/index.json

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

package/generated/mcp/tabs/react.md

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

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-03T13:53:29.549Z",
+  "generatedAt": "2026-06-10T08:31:07.591Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",