@sebgroup/green-core 3.6.2 → 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.6.2";
+    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-28T12:37:25.805Z",
+  "generatedAt": "2026-04-29T15:59:02.891Z",
   "components": [
     {
       "name": "gds-alert",

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-28T12:37:25.805Z",
+  "generatedAt": "2026-04-29T15:59:02.891Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-28T12:37:25.805Z",
+  "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/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-04-28T12:37:25.720Z",
+  "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';

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

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

@@ -39,7 +39,7 @@ 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-8bf991";
+const VER_SUFFIX = "-adade7";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])