@sebgroup/green-core 3.11.1 → 3.12.0

package/generated/react/sensitive-date/index.d.ts

@@ -213,6 +213,14 @@ export declare const GdsSensitiveDate: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

package/generated/react/sensitive-number/index.d.ts

@@ -214,6 +214,14 @@ export declare const GdsSensitiveNumber: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -144,6 +144,14 @@ export declare const GdsSignal: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -166,6 +166,14 @@ export declare const GdsSpinner: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -189,6 +189,14 @@ export declare const GdsSwitch: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -193,6 +193,14 @@ export declare const GdsTable: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -208,6 +208,14 @@ export declare const GdsText: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -11,6 +11,8 @@ type GdsTextareaProps = Omit<React.ComponentProps<ReturnType<typeof getReactComp
     }) => void;
     /** Fired when the clear button is clicked. */
     onGdsInputCleared?: (event: CustomEvent<any>) => void;
+    /** Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing. */
+    onGdsUiState?: (event: CustomEvent<any>) => void;
 };
 export declare const GdsTextarea: {
     (props: GdsTextareaProps & {
@@ -212,6 +214,14 @@ export declare const GdsTextarea: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -151,6 +151,14 @@ export declare const GdsTheme: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | undefined;

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

@@ -186,6 +186,14 @@ export declare const GdsVideo: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        ariaActiveDescendantElement?: Element | null | undefined;
+        ariaControlsElements?: Element[] | null | undefined;
+        ariaDescribedByElements?: Element[] | null | undefined;
+        ariaDetailsElements?: Element[] | null | undefined;
+        ariaErrorMessageElements?: Element[] | null | undefined;
+        ariaFlowToElements?: Element[] | null | undefined;
+        ariaLabelledByElements?: Element[] | null | undefined;
+        ariaOwnsElements?: Element[] | null | undefined;
         readonly baseURI?: string | undefined;
         readonly childNodes?: NodeListOf<ChildNode> | undefined;
         readonly firstChild?: ChildNode | null | 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.11.1",
+  "version": "3.12.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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

@@ -0,0 +1,38 @@
+import type { LitElement } from 'lit';
+import { type AriaForwardingConfig, type AriaRefKey, type AriaRefMeta } from './aria-forwarding.types';
+/**
+ * Derives the full ARIA metadata from a config key using naming conventions.
+ *
+ * Convention:
+ * - `labelledBy` → attr: `aria-labelledby`, prop: `ariaLabelledByElements`
+ * - `activeDescendant` → attr: `aria-activedescendant`, prop: `ariaActiveDescendantElement` (singular)
+ */
+export declare function getAriaRefMeta(key: AriaRefKey): AriaRefMeta;
+type Constructor<T = LitElement> = new (...args: any[]) => T;
+/**
+ * Class decorator that configures reactive ARIA element-reference forwarding
+ * 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
+ * forwarded to the configured target element using the ARIAMixin element-reference
+ * property (e.g., `ariaLabelledByElements`).
+ *
+ * The `aria*Elements` properties are also intercepted on the host, so programmatic
+ * setting (e.g., `el.ariaLabelledByElements = [label]`) is forwarded as well.
+ *
+ * Config values are CSS selector strings resolved against the component's shadowRoot.
+ *
+ * @example
+ * ```ts
+ * @ariaForwarding({
+ *   labelledBy: 'input',
+ *   describedBy: 'input',
+ *   activeDescendant: '[role="listbox"]',
+ * })
+ * @gdsCustomElement('gds-input')
+ * class GdsInput extends GdsFormControlElement { ... }
+ * ```
+ */
+export declare function ariaForwarding(config: AriaForwardingConfig): <T extends Constructor>(constructor: T) => T;
+export {};

package/utils/decorators/aria-forwarding.js

@@ -0,0 +1,130 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+import { observeAttributes } from "./observe-attributes.js";
+function getAriaRefMeta(key) {
+  const isSingle = key === "activeDescendant";
+  const attrSuffix = key.toLowerCase();
+  const propSuffix = isSingle ? "Element" : "Elements";
+  const property = `aria${key.charAt(0).toUpperCase()}${key.slice(1)}${propSuffix}`;
+  return {
+    ariaAttr: `aria-${attrSuffix}`,
+    gdsAriaAttr: `gds-aria-${attrSuffix}`,
+    property,
+    type: isSingle ? "single" : "list"
+  };
+}
+const ARIA_STORE = Symbol("ariaForwardingStore");
+const ARIA_INIT = Symbol("ariaForwardingInit");
+function setElementProperty(el, prop, value) {
+  const current = el[prop];
+  const record = el;
+  if (value === null) {
+    record[prop] = null;
+    return;
+  }
+  const currentArray = current === null ? [] : Array.isArray(current) ? current : [current];
+  const newArray = Array.isArray(value) ? value : [value];
+  const combined = Array.from(/* @__PURE__ */ new Set([...currentArray, ...newArray]));
+  record[prop] = combined.length > 0 ? combined : null;
+}
+function ariaForwarding(config) {
+  const configuredEntries = [];
+  for (const [key, selector] of Object.entries(config)) {
+    if (!selector)
+      continue;
+    configuredEntries.push({ key, selector });
+  }
+  return function(constructor) {
+    const origConnected = constructor.prototype.connectedCallback;
+    class AriaForwardingElement extends constructor {
+      connectedCallback() {
+        origConnected?.call(this);
+        initAriaForwarding(this);
+      }
+    }
+    const attrHandlers = {};
+    for (const { key } of configuredEntries) {
+      const meta = getAriaRefMeta(key);
+      const handler = (host, _oldValue, newValue) => {
+        forwardAriaRefFromAttribute(host, key, newValue);
+      };
+      attrHandlers[meta.ariaAttr] = handler;
+      attrHandlers[meta.gdsAriaAttr] = handler;
+    }
+    observeAttributes(AriaForwardingElement, attrHandlers);
+    function initAriaForwarding(host) {
+      if (host[ARIA_INIT])
+        return;
+      host[ARIA_INIT] = true;
+      host[ARIA_STORE] = {};
+      for (const { key } of configuredEntries) {
+        const meta = getAriaRefMeta(key);
+        const propName = meta.property;
+        if (!Object.getOwnPropertyDescriptor(
+          AriaForwardingElement.prototype,
+          propName
+        )) {
+          Object.defineProperty(AriaForwardingElement.prototype, propName, {
+            get() {
+              return this[ARIA_STORE]?.[propName] ?? null;
+            },
+            set(value) {
+              if (!this[ARIA_STORE])
+                this[ARIA_STORE] = {};
+              this[ARIA_STORE][propName] = value;
+              forwardAriaRefProperty(this, key, value);
+            },
+            configurable: true,
+            enumerable: true
+          });
+        }
+      }
+      host.updateComplete.then(() => {
+        for (const { key } of configuredEntries) {
+          const meta = getAriaRefMeta(key);
+          const gdsValue = host.getAttribute(meta.gdsAriaAttr);
+          const ariaValue = host.getAttribute(meta.ariaAttr);
+          const value = gdsValue ?? ariaValue;
+          if (value) {
+            forwardAriaRefFromAttribute(host, key, value);
+          }
+        }
+      });
+    }
+    function forwardAriaRefFromAttribute(host, refKey, value) {
+      const meta = getAriaRefMeta(refKey);
+      const selector = config[refKey];
+      if (!selector)
+        return;
+      host.updateComplete.then(() => {
+        const targets = host.shadowRoot?.querySelectorAll(selector);
+        if (!targets || targets.length === 0)
+          return;
+        if (!value) {
+          targets.forEach((t) => setElementProperty(t, meta.property, null));
+          return;
+        }
+        const ids = value.trim().split(/\s+/);
+        const elements = ids.map((id) => host.ownerDocument.getElementById(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));
+      });
+    }
+    function forwardAriaRefProperty(host, refKey, value) {
+      const selector = config[refKey];
+      if (!selector)
+        return;
+      const meta = getAriaRefMeta(refKey);
+      host.updateComplete.then(() => {
+        const targets = host.shadowRoot?.querySelectorAll(selector);
+        if (!targets || targets.length === 0)
+          return;
+        targets.forEach((t) => setElementProperty(t, meta.property, value));
+      });
+    }
+    return AriaForwardingElement;
+  };
+}
+export {
+  ariaForwarding,
+  getAriaRefMeta
+};

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

@@ -0,0 +1,59 @@
+/**
+ * TypeScript type augmentations for ARIAMixin element-reference properties.
+ *
+ * These properties are defined in the ARIA 1.3 spec (Section 10.1 - ARIAMixin)
+ * but are not yet included in TypeScript's DOM lib (as of TS 5.5.4).
+ */
+declare global {
+    interface Element {
+        ariaActiveDescendantElement: Element | null;
+        ariaControlsElements: Element[] | null;
+        ariaDescribedByElements: Element[] | null;
+        ariaDetailsElements: Element[] | null;
+        ariaErrorMessageElements: Element[] | null;
+        ariaFlowToElements: Element[] | null;
+        ariaLabelledByElements: Element[] | null;
+        ariaOwnsElements: Element[] | null;
+    }
+}
+/**
+ * Metadata for a single ARIA element-reference relationship.
+ * Derived automatically from the config key via convention.
+ */
+export interface AriaRefMeta {
+    /** The standard `aria-*` attribute name (e.g., `aria-labelledby`) */
+    ariaAttr: string;
+    /** The `gds-aria-*` prefixed attribute name (e.g., `gds-aria-labelledby`) */
+    gdsAriaAttr: string;
+    /** The ARIAMixin element-reference property name (e.g., `ariaLabelledByElements`) */
+    property: string;
+    /** Whether this is a single element reference or a list */
+    type: 'single' | 'list';
+}
+/**
+ * All known ARIA element-reference keys.
+ * The config key (e.g., `labelledBy`) maps by convention to:
+ * - Attribute: `aria-labelledby` / `gds-aria-labelledby`
+ * - Property: `ariaLabelledByElements`
+ * - Type: `single` for activeDescendant, `list` for all others
+ */
+export declare const ARIA_REF_KEYS: readonly ["activeDescendant", "controls", "describedBy", "details", "errorMessage", "flowTo", "labelledBy", "owns"];
+export type AriaRefKey = (typeof ARIA_REF_KEYS)[number];
+/**
+ * Configuration for the `@ariaForwarding` decorator.
+ *
+ * Each key is an ARIA relationship name. The value is a CSS selector string
+ * pointing to the target element inside the component's shadow DOM.
+ *
+ * @example
+ * ```ts
+ * @ariaForwarding({
+ *   labelledBy: 'input',
+ *   describedBy: 'input',
+ *   activeDescendant: '[role="listbox"]',
+ * })
+ * ```
+ */
+export type AriaForwardingConfig = {
+    [K in AriaRefKey]?: string;
+};

package/utils/decorators/aria-forwarding.types.js

@@ -0,0 +1,14 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+const ARIA_REF_KEYS = [
+  "activeDescendant",
+  "controls",
+  "describedBy",
+  "details",
+  "errorMessage",
+  "flowTo",
+  "labelledBy",
+  "owns"
+];
+export {
+  ARIA_REF_KEYS
+};

package/utils/decorators/observe-attributes.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A low-level utility for observing DOM attributes on custom elements
+ * without coupling to Lit's reactive property/rendering lifecycle.
+ *
+ * Handles:
+ * - Accumulating `observedAttributes` across multiple decorator calls
+ * - Routing `attributeChangedCallback` to per-attribute handler functions
+ * - Chaining with Lit's own `attributeChangedCallback` for its reactive properties
+ * - Inheritance-safe handler maps (own map per constructor)
+ *
+ * @example
+ * ```ts
+ * // Inside a decorator:
+ * observeAttributes(MyElement, {
+ *   'aria-labelledby': (host, oldVal, newVal) => { ... },
+ *   'gds-aria-labelledby': (host, oldVal, newVal) => { ... },
+ * })
+ * ```
+ */
+type AttrHandler = (host: any, oldValue: string | null, newValue: string | null) => void;
+/**
+ * Register one or more non-reactive attribute observers on a custom element class.
+ *
+ * Safe to call multiple times on the same constructor — handlers accumulate
+ * and the prototype patching is idempotent.
+ *
+ * @param ctor The custom element constructor (class) to patch.
+ * @param handlers A record mapping attribute names to handler functions.
+ */
+export declare function observeAttributes(ctor: any, handlers: Record<string, AttrHandler>): void;
+export {};

package/utils/decorators/observe-attributes.js

@@ -0,0 +1,54 @@
+import "../../chunks/chunk.CAV4X6PU.js";
+const ATTR_HANDLERS = Symbol("observeAttrHandlers");
+const PATCHED = Symbol("observeAttrPatched");
+function observeAttributes(ctor, handlers) {
+  if (!Object.prototype.hasOwnProperty.call(ctor, ATTR_HANDLERS)) {
+    const parentMap = Object.getPrototypeOf(ctor)?.[ATTR_HANDLERS];
+    ctor[ATTR_HANDLERS] = new Map(parentMap);
+  }
+  for (const [attr, handler] of Object.entries(handlers)) {
+    ctor[ATTR_HANDLERS].set(attr, handler);
+  }
+  if (ctor[PATCHED])
+    return;
+  ctor[PATCHED] = true;
+  const parentChainStart = Object.getPrototypeOf(ctor);
+  Object.defineProperty(ctor, "observedAttributes", {
+    get() {
+      let parent = [];
+      let proto = parentChainStart;
+      while (proto) {
+        const desc = Object.getOwnPropertyDescriptor(
+          proto,
+          "observedAttributes"
+        );
+        if (desc?.get) {
+          parent = desc.get.call(this);
+          break;
+        }
+        proto = Object.getPrototypeOf(proto);
+      }
+      const handlers2 = this[ATTR_HANDLERS];
+      const custom = Array.from(handlers2?.keys() ?? []);
+      return [...parent, ...custom];
+    },
+    configurable: true,
+    enumerable: true
+  });
+  const parentProto = Object.getPrototypeOf(ctor.prototype);
+  Object.defineProperty(ctor.prototype, "attributeChangedCallback", {
+    value: function(name, oldValue, newValue) {
+      const handler = this.constructor[ATTR_HANDLERS]?.get(name);
+      if (handler) {
+        handler(this, oldValue, newValue);
+        return;
+      }
+      parentProto.attributeChangedCallback?.call(this, name, oldValue, newValue);
+    },
+    configurable: true,
+    writable: true
+  });
+}
+export {
+  observeAttributes
+};

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 = "-7d0398";
+const VER_SUFFIX = "-3c11d8";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])