@sebgroup/green-core 3.5.0 → 3.6.2

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.5.0";
+    this.semanticVersion = "3.6.2";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-10T07:14:04.624Z",
+  "generatedAt": "2026-04-28T12:37:25.805Z",
   "components": [
     {
       "name": "gds-alert",
@@ -700,6 +700,19 @@
         "react"
       ]
     },
+    {
+      "name": "gds-switch",
+      "tagName": "gds-switch",
+      "className": "GdsSwitch",
+      "description": "",
+      "path": "switch/",
+      "files": [
+        "api",
+        "guidelines",
+        "angular",
+        "react"
+      ]
+    },
     {
       "name": "gds-table",
       "tagName": "gds-table",

package/generated/mcp/form-summary/guidelines.md

@@ -9,11 +9,15 @@ Form summary shows all form errors in one place.
 
 Form summary works automatically when placed in a form with form controls from Green Core. It has two update modes, `default` and `reactive`. In the default mode, a `refresh()` method needs to be called for the component to update and reflect the current state of the form. In the `reactive` mode, it will update on the fly as soon as the status of a control in the form changes. The `reactive` mode requires less setup to use, but the `default` mode allows for more control over the behavior.
 
-#### Accessibility
+#### Fieldset labels
+
+To reflect the structure of the form, the summary content can be grouped using fieldset labels. These act as headings for related fields and help users quickly understand how the information is organized. By mirroring the same grouping as in the form, it becomes easier to recognize and review the content, improving both clarity and confidence before submission.
+
+### Accessibility
 
 Semantically, the form summary is represented as a navigation region containing an unordered list of links.
 
-#### Compatibility
+### Compatibility
 
 Form summary is mainly intended for use with form controls from Green Core, but it also works with generic native form controls by using data-attributes.
 

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-10T07:14:04.624Z",
+  "generatedAt": "2026-04-28T12:37:25.805Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-10T07:14:04.624Z",
+  "generatedAt": "2026-04-28T12:37:25.805Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/pagination/guidelines.md

@@ -1,14 +1,24 @@
 # Pagination
 
-Pagination helps users navigate large result sets by dividing content into clear, manageable pages.
+Pagination helps users navigate large result sets by dividing content into clear, manageable pages. 
 
 
 ## Overview
 
 ### Usage
 
-*   Use pagination for long lists such as tables, search results, or content listings.
-    
-*   Pagination is preferred over infinite scroll when users need overview, comparison, or predictable navigation.
-    
-*   Always associate pagination with the content it controls.
+Pagination is used to divide large amounts of content into smaller pages, making it easier to navigate and understand a dataset. It is most useful when content cannot be displayed at once, or when users need to move through information in a defined order.
+
+Use pagination when it improves readability and control, for example in tables or long lists, search results, or content listings. Avoid using pagination for small datasets or when continuous scrolling provides a better experience.
+
+
+
+### Behaviour
+
+Pagination should clearly indicate the current page and keep navigation consistent and predictable. Unavailable actions should be disabled at the start or end of the page range. When used with data tables, the item range and total number of items should be displayed.
+
+### Accessibility
+
+Pagination should use a semantic navigation structure and ensure that all controls are keyboard accessible. The current page should be communicated programmatically, and visual styling alone should not be relied on to convey state.
+
+### Do's and don'ts

package/generated/mcp/switch/angular.md

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

package/generated/mcp/switch/api.md

@@ -0,0 +1,56 @@
+# gds-switch
+
+**Class**: `GdsSwitch`
+
+**Tag**: `<gds-switch>`
+
+
+## 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. |
+| `'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. |
+| `checked` | `boolean` | `-` | The checked state of the switch. |
+| `controlPlacement` | `'start' \| 'end'` | `-` | Controls where the control is placed relative to the label. |
+| `size` | `'large' \| 'small'` | `-` | Controls text and control sizing. |
+| `'justify-content'` | `string` | `-` | Controls horizontal distribution of label and control. |
+| `value` | `string` | `-` | The value submitted with the form when the switch is checked. Defaults to 'on', matching native checkbox behaviour. |
+| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
+| `required` | `boolean` | `-` | 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. |
+| `name` | `string` | `-` |  |
+| `disabled` | `boolean` | `-` | If the input is Disabled |
+| `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 |
+|------|------|-------------|
+| `input` | `InputEvent` | Dispatched when the checked state changes. |
+| `change` | `Event` | Dispatched when the checked state changes. |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.

package/generated/mcp/switch/guidelines.md

@@ -0,0 +1,35 @@
+# Switch
+
+A toggle lets users switch a setting on or off. 
+
+
+## Overview
+
+### Behaviour
+
+Changing the toggle updates the state immediately. The current state should always be clear to the user, and the component should provide feedback for different interaction states such as hover, focus, pressed, and disabled.
+
+### Size
+
+The toggle is available in two sizes: default and small. The small size should only be used in compact views where space is limited, such as dense layouts or smaller components.
+
+### Label
+
+Labels describe the setting, not the state. They should be short and specific, remain clear in both on and off states, and not require additional context to understand.
+
+For example, use labels like “Email notifications”, “Show balance”, or “Enable dark mode”. Avoid labels such as “On / Off”, “Active”, or “Enabled”, as they do not clearly communicate what the toggle controls.
+
+### Accessibility
+
+A toggle must have a visible and persistent label and communicate its state programmatically as on or off. It should be operable via keyboard and include a visible focus indicator. The state should not rely on color alone to be understood, and the component must meet contrast requirements in all states.
+
+### Do's and Don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for toggle
+
+### Keep labels short
+
+### Provide context where needed

package/generated/mcp/switch/index.json

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

package/generated/mcp/switch/react.md

@@ -0,0 +1,24 @@
+# gds-switch - React
+
+## Import
+
+```typescript
+import { GdsSwitch } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsSwitch />
+```
+
+## 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}` |
+| `change` | `onChange` | `onChange={handler}` |

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-10T07:14:04.518Z",
+  "generatedAt": "2026-04-28T12:37:25.720Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/react/index.d.ts

@@ -1,6 +1,6 @@
 export * from './alert/index.js';
-export * from './badge/index.js';
 export * from './blur/index.js';
+export * from './badge/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
@@ -36,6 +36,7 @@ export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './signal/index.js';
 export * from './spinner/index.js';
+export * from './switch/index.js';
 export * from './table/index.js';
 export * from './text/index.js';
 export * from './textarea/index.js';

package/generated/react/index.js

@@ -1,6 +1,6 @@
 export * from "./alert/index.js";
-export * from "./badge/index.js";
 export * from "./blur/index.js";
+export * from "./badge/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
@@ -36,6 +36,7 @@ export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
+export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./text/index.js";
 export * from "./textarea/index.js";

package/generated/react/input/index.d.ts

@@ -43,7 +43,7 @@ export declare const GdsInput: {
         min?: (number | string) | undefined;
         max?: (number | string) | undefined;
         step?: (number | "any") | undefined;
-        autocapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+        autocapitalize?: "none" | "on" | "off" | "sentences" | "words" | "characters" | undefined;
         autocorrect?: boolean | undefined;
         autocomplete?: string | undefined;
         autofocus?: boolean | undefined;