@sebgroup/green-core 3.26.3 → 3.27.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.26.3";
+    this.semanticVersion = "3.27.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-07T07:35:26.157Z",
+  "generatedAt": "2026-10-07T14:52:16.149Z",
   "components": [
     {
       "name": "gds-alert",

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-07T07:35:26.157Z",
+  "generatedAt": "2026-10-07T14:52:16.149Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-07T07:35:26.157Z",
+  "generatedAt": "2026-10-07T14:52:16.149Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/slider/api.md

@@ -40,6 +40,8 @@
 | `range` | `boolean` | `-` | Renders a dual-thumb range slider when true. |
 | `value` | `GdsSliderValue` | `-` | The current value. A plain number in single-value mode, or a `[start, end]` tuple when `range` is set. |
 | `hideTextbox` | `boolean` | `-` | Hides the interactive min/max value textboxes. |
+| `minLabel` | `string` | `-` | Label rendered underneath the control, pinned to its start edge. Works with or without the value textboxes. |
+| `maxLabel` | `string` | `-` | Label rendered underneath the control, pinned to its end edge. Works with or without the value textboxes. |
 | `readonly` | `boolean` | `-` | Makes the entire control read-only — slider thumbs and textbox inputs are non-interactive. |
 | `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. |

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-07T07:35:26.091Z",
+  "generatedAt": "2026-10-07T14:52:15.048Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/react/index.d.ts

@@ -1,9 +1,11 @@
+export * from './list-item-pattern-01/index.js';
+export * from './card-pattern-01/index.js';
 export * from './alert/index.js';
-export * from './badge/index.js';
 export * from './avatar/index.js';
-export * from './button/index.js';
+export * from './badge/index.js';
 export * from './blur/index.js';
 export * from './breadcrumbs/index.js';
+export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './card-linked/index.js';
@@ -46,8 +48,6 @@ export * from './text/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './video/index.js';
-export * from './card-pattern-01/index.js';
-export * from './list-item-pattern-01/index.js';
 export * from './avatar-group/index.js';
 export * from './breadcrumb/index.js';
 export * from './checkbox-group/index.js';
@@ -62,7 +62,6 @@ export * from './segment/index.js';
 export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
 export * from './sensitive-number/index.js';
-export * from './tab/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -375,6 +374,7 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './tab/index.js';
 export * from './tab-panel/index.js';
 export * from './menu-item/index.js';
 export * from './menu-heading/index.js';

package/generated/react/index.js

@@ -1,9 +1,11 @@
+export * from "./list-item-pattern-01/index.js";
+export * from "./card-pattern-01/index.js";
 export * from "./alert/index.js";
-export * from "./badge/index.js";
 export * from "./avatar/index.js";
-export * from "./button/index.js";
+export * from "./badge/index.js";
 export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
+export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./card-linked/index.js";
@@ -46,8 +48,6 @@ export * from "./text/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";
-export * from "./card-pattern-01/index.js";
-export * from "./list-item-pattern-01/index.js";
 export * from "./avatar-group/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./checkbox-group/index.js";
@@ -62,7 +62,6 @@ export * from "./segment/index.js";
 export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
 export * from "./sensitive-number/index.js";
-export * from "./tab/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -375,6 +374,7 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./tab/index.js";
 export * from "./tab-panel/index.js";
 export * from "./menu-item/index.js";
 export * from "./menu-heading/index.js";

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

@@ -43,6 +43,8 @@ export declare const GdsSlider: {
         range?: boolean;
         value?: import("../../../components/slider/slider.component").GdsSliderValue | undefined;
         hideTextbox?: boolean;
+        minLabel?: string;
+        maxLabel?: string;
         readonly?: boolean;
         connectedCallback?: (() => void) | undefined;
         disconnectedCallback?: (() => void) | 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.26.3",
+  "version": "3.27.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/field-base/field-base.styles.js

@@ -23,12 +23,15 @@ const style = css`
       justify-content: space-between;
       gap: var(--gds-sys-space-xs);
       padding-block: var(--gds-sys-space-xs);
-      padding-inline: var(--gds-sys-space-m) var(--gds-sys-space-s);
-      min-block-size: var(--gds-sys-space-4xl);
-      block-size: var(--gds-sys-space-4xl);
+      padding-inline: var(
+        --_gds-input-padding-inline,
+        var(--gds-sys-space-m) var(--gds-sys-space-s)
+      );
+      min-block-size: var(--_gds-input-block-size, var(--gds-sys-space-4xl));
+      block-size: var(--_gds-input-block-size, var(--gds-sys-space-4xl));
       outline-style: solid;
       outline-width: 0;
-      border-radius: var(--gds-sys-radius-xs);
+      border-radius: var(--_gds-input-radius, var(--gds-sys-radius-xs));
       background: var(--gds-sys-color-l3-neutral-02);
       color: var(--gds-sys-color-content-neutral-01);
       outline-offset: 0;
@@ -63,10 +66,11 @@ const style = css`
 
     .field.small {
       gap: var(--gds-sys-space-3xs);
-      padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
+      padding-block: var(--gds-sys-space-3xs);
+      padding-inline: var(--_gds-input-padding-inline, var(--gds-sys-space-xs));
       min-block-size: var(--gds-sys-space-2xl);
       block-size: var(--gds-sys-space-2xl);
-      border-radius: var(--gds-sys-radius-2xs);
+      border-radius: var(--_gds-input-radius, var(--gds-sys-radius-2xs));
     }
 
     .field.multiline {

package/utils/decorators/aria-forwarding.d.ts

@@ -14,7 +14,8 @@ type Constructor<T = LitElement> = new (...args: any[]) => T;
  * from the host web component to inner shadow DOM elements.
  *
  * Both `aria-*` and `gds-aria-*` attributes are observed. When either changes,
- * the space-separated IDs are resolved to elements via `getElementById` and
+ * the space-separated IDs are resolved against the host's own root, so a host nested
+ * in a shadow root looks up IDs in that shadow root rather than the document, and
  * forwarded to the configured target element using the ARIAMixin element-reference
  * property (e.g., `ariaLabelledByElements`).
  *

package/utils/decorators/aria-forwarding.js

@@ -17,6 +17,10 @@ function getAriaRefMeta(key) {
 }
 const ARIA_STORE = /* @__PURE__ */ Symbol("ariaForwardingStore");
 const ARIA_INIT = /* @__PURE__ */ Symbol("ariaForwardingInit");
+function resolveId(host, id) {
+  const root = host.getRootNode();
+  return root.getElementById?.(id) ?? host.ownerDocument.getElementById(id);
+}
 function setElementProperty(el, prop, value, type = "list") {
   const record = el;
   if (value === null) {
@@ -128,7 +132,7 @@ function ariaForwarding(config) {
           return;
         }
         const ids = value.trim().split(/\s+/);
-        const elements = ids.map((id) => host.ownerDocument.getElementById(id)).filter((el) => el !== null);
+        const elements = ids.map((id) => resolveId(host, id)).filter((el) => el !== null);
         const resolved = meta.type === "single" ? elements[0] ?? null : elements.length > 0 ? elements : null;
         targets.forEach((t) => setElementProperty(t, meta.property, resolved, meta.type));
       });

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

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