@sebgroup/green-core 3.5.1 → 3.6.3

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.3";
     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-29T15:59:02.891Z",
   "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/concepts/scoping.md

@@ -54,4 +54,19 @@ use the `html` template tag or template tag factory from Green Core.
 
 At some point in the future, when the scoped custom element registry proposal has been
 implemented in all major browsers, we might remove this custom scoping mechanism and
-switch to using native scoped registries instead.
+switch to using native scoped registries instead.
+
+## CSS Variables
+
+Shadow DOM encapsulation guards against style leaks in and out of components and custom element scoping ensures
+that multiple versions can coexist. This leaves out CSS variables however. CSS variables, or
+"CSS custom properties" as they are really called, inherit though the DOM, including shadow DOM.
+This means that conflicts *can* still occur here.
+
+But Green provides a way to guard against this type of conflict as well: `<gds-theme>`.
+
+`<gds-theme>` defines a copy of all the CSS variables on its `:host` selector. This means that
+it will override any same-name variables defined on `:root` or inherited from outside.
+
+So by using `<gds-theme>` at the root of your application, you can ensure that all components get
+their variables from the version you expect.

package/generated/mcp/guides/migration.md

@@ -6,6 +6,10 @@ If you need to update several versions at once, it is recommended to follow the
 
 Before you begin, make sure you have the latest feature/patch version of your current major version.
 
+## CSS variables
+
+Please ensure that you have at least one instance of `gds-theme` at the root of your application. This ensures that all components have the correct variables versions, and guards against conflicts from shell or other MFEs.
+
 ## Automated migrations
 
 Many migrations can be automated using the `green-core-context migrate` command. This will detect and apply code changes for supported automated migrations.

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-24T13:51:13.604Z",
+  "generatedAt": "2026-04-29T15:59:02.891Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-24T13:51:13.604Z",
+  "generatedAt": "2026-04-29T15:59:02.891Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/input/api.md

@@ -34,7 +34,7 @@
 | `maxlength` | `number` | `-` | The maximum number of characters allowed in the field. |
 | `size` | `'large' \| 'small'` | `-` | Controls the font-size of texts and height of the field. |
 | `plain` | `boolean` | `-` | Hides the header and the footer, while still keeping the accessible label  Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set. |
-| `type` | `\| 'date'     \| 'datetime-local'     \| 'email'     \| 'number'     \| 'password'     \| 'search'     \| 'tel'     \| 'text'     \| 'time'     \| 'url'` | `-` | The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`. |
+| `type` | `\| 'date'     \| 'datetime-local'     \| 'email'     \| 'file'     \| 'number'     \| 'password'     \| 'search'     \| 'tel'     \| 'text'     \| 'time'     \| 'url'` | `-` | The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`. |
 | `min` | `number \| string \| undefined` | `-` | The input's minimum value. Only applies to date and number input types. |
 | `max` | `number \| string \| undefined` | `-` | The input's maximum value. Only applies to date and number input types. |
 | `step` | `number \| 'any' \| undefined` | `-` | Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types. |

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-29T15:59:02.787Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/react/index.d.ts

@@ -1,7 +1,7 @@
 export * from './alert/index.js';
-export * from './blur/index.js';
 export * from './badge/index.js';
 export * from './breadcrumbs/index.js';
+export * from './blur/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
@@ -12,9 +12,9 @@ export * from './context-menu/index.js';
 export * from './datepicker/index.js';
 export * from './details/index.js';
 export * from './dialog/index.js';
-export * from './div/index.js';
 export * from './divider/index.js';
 export * from './dropdown/index.js';
+export * from './div/index.js';
 export * from './fab/index.js';
 export * from './filter-chips/index.js';
 export * from './flex/index.js';
@@ -25,8 +25,8 @@ export * from './list-item/index.js';
 export * from './img/index.js';
 export * from './input/index.js';
 export * from './link/index.js';
-export * from './mask/index.js';
 export * from './menu-button/index.js';
+export * from './mask/index.js';
 export * from './pagination/index.js';
 export * from './backdrop/index.js';
 export * from './popover/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,7 +1,7 @@
 export * from "./alert/index.js";
-export * from "./blur/index.js";
 export * from "./badge/index.js";
 export * from "./breadcrumbs/index.js";
+export * from "./blur/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
@@ -12,9 +12,9 @@ export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
 export * from "./details/index.js";
 export * from "./dialog/index.js";
-export * from "./div/index.js";
 export * from "./divider/index.js";
 export * from "./dropdown/index.js";
+export * from "./div/index.js";
 export * from "./fab/index.js";
 export * from "./filter-chips/index.js";
 export * from "./flex/index.js";
@@ -25,8 +25,8 @@ export * from "./list-item/index.js";
 export * from "./img/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
-export * from "./mask/index.js";
 export * from "./menu-button/index.js";
+export * from "./mask/index.js";
 export * from "./pagination/index.js";
 export * from "./backdrop/index.js";
 export * from "./popover/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

@@ -39,11 +39,11 @@ export declare const GdsInput: {
         maxlength?: number | undefined;
         size?: "small" | "large" | undefined;
         plain?: boolean | undefined;
-        type?: "number" | "search" | "time" | "text" | "date" | "email" | "datetime-local" | "password" | "tel" | "url" | undefined;
+        type?: "number" | "search" | "time" | "text" | "date" | "email" | "datetime-local" | "file" | "password" | "tel" | "url" | undefined;
         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;