@sebgroup/green-core 3.5.1 → 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.1";
+    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-24T13:51:13.604Z",
+  "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/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-24T13:51:13.604Z",
+  "generatedAt": "2026-04-28T12:37:25.805Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-24T13:51:13.604Z",
+  "generatedAt": "2026-04-28T12:37:25.805Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

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-24T13:51:12.719Z",
+  "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

@@ -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

@@ -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;