@sebgroup/green-core 3.11.1 → 3.12.0

package/components/alert/alert.component.js

@@ -15,6 +15,7 @@ import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, getScopedTagName, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
 import { IconCircleCheck } from "../icon/icons/circle-check.component.js";
@@ -357,6 +358,10 @@ GdsAlert = __decorateClass([
       IconCrossSmall
     ]
   }),
+  ariaForwarding({
+    labelledBy: '[role="alert"]',
+    describedBy: '[role="alert"]'
+  }),
   localized()
 ], GdsAlert);
 export {

package/components/breadcrumbs/breadcrumbs.component.js

@@ -6,6 +6,7 @@ import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import {
   gdsCustomElement,
   html
@@ -68,6 +69,9 @@ GdsBreadcrumbs = __decorateClass([
   gdsCustomElement("gds-breadcrumbs", {
     dependsOn: [IconChevronLeft]
   }),
+  ariaForwarding({
+    labelledBy: "nav"
+  }),
   localized()
 ], GdsBreadcrumbs);
 export {

package/components/button/button.component.js

@@ -16,6 +16,7 @@ import { html as customElementHtml, gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { observeLightDOM } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import { forwardAttributes } from "../../utils/directives/index.js";
 import { stripWhitespace } from "../../utils/helpers/strip-white-space.js";
@@ -29,7 +30,7 @@ import ButtonStyles from "./button.styles.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
 const attributeForwards = [...ariaForwards, "gds-tabindex"];
 const html = stripWhitespace(customElementHtml);
-class Button extends GdsFormControlElement {
+let Button = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _isLink);
@@ -117,7 +118,7 @@ class Button extends GdsFormControlElement {
         @click="${__privateGet(this, _handleClick)}"
         @keydown="${__privateGet(this, _handleKeyDown)}"
         ${forwardAttributes(
-      (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role" || attributeForwards.includes(attr.name)
+      (attr) => attr.name === "gds-role" || attributeForwards.includes(attr.name)
     )}
       >
         <slot name="lead"></slot>
@@ -136,7 +137,7 @@ class Button extends GdsFormControlElement {
   _attributeChanged() {
     this.requestUpdate();
   }
-}
+};
 _isIconButton = new WeakMap();
 _isLink = new WeakSet();
 isLink_get = function() {
@@ -216,6 +217,13 @@ __decorateClass([
     characterData: false
   })
 ], Button.prototype, "_attributeChanged", 1);
+Button = __decorateClass([
+  ariaForwarding({
+    labelledBy: ".button",
+    describedBy: ".button",
+    controls: ".button"
+  })
+], Button);
 let GdsButton = class extends withSizeXProps(
   withMarginProps(withLayoutChildProps(Button))
 ) {

package/components/calendar/calendar.component.js

@@ -24,6 +24,7 @@ import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import CalendarStyles from "./calendar.styles.js";
 import { renderMonthGridView } from "./functions.js";
@@ -323,6 +324,10 @@ __decorateClass([
 ], GdsCalendar.prototype, "_valueChanged", 1);
 GdsCalendar = __decorateClass([
   gdsCustomElement("gds-calendar"),
+  ariaForwarding({
+    labelledBy: "table",
+    describedBy: "table"
+  }),
   localized()
 ], GdsCalendar);
 export {

package/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -47,6 +47,8 @@ declare const GdsCheckboxGroup_base: (new (...args: any[]) => import("../../../u
  *
  * @element gds-checkbox-group
  *
+ * @event gds-ui-state - Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing.
+ *
  */
 export declare class GdsCheckboxGroup extends GdsCheckboxGroup_base {
 }

package/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -11,6 +11,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
 import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
 import { gdsCustomElement, html } from "../../../scoping.js";
+import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../../utils/decorators/index.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
@@ -209,6 +210,11 @@ __decorateClass([
   })
 ], CheckboxGroup.prototype, "_syncOnDOMChange", 1);
 CheckboxGroup = __decorateClass([
+  ariaForwarding({
+    labelledBy: "#checkboxgroup",
+    describedBy: "#checkboxgroup",
+    errorMessage: "#checkboxgroup"
+  }),
   localized()
 ], CheckboxGroup);
 let GdsCheckboxGroup = class extends withLayoutChildProps(

package/components/checkbox/checkbox.component.js

@@ -12,6 +12,7 @@ import { gdsCustomElement, html } from "../../scoping.js";
 import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
 import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCheckmark } from "../icon/icons/checkmark.component.js";
@@ -154,6 +155,11 @@ __decorateClass([
 GdsCheckbox = __decorateClass([
   gdsCustomElement("gds-checkbox", {
     dependsOn: [GdsToggleControlBase, IconCheckmark, IconMinusSmall]
+  }),
+  ariaForwarding({
+    labelledBy: "#checkbox-input",
+    describedBy: "#checkbox-input",
+    errorMessage: "#checkbox-input"
   })
 ], GdsCheckbox);
 export {

package/components/context-menu/context-menu.component.js

@@ -15,6 +15,7 @@ import { GdsMenuItem } from "../../primitives/menu/menu-item.component.js";
 import { GdsMenu } from "../../primitives/menu/menu.component.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
@@ -194,6 +195,11 @@ GdsContextMenu = __decorateClass([
       IconDotGridOneHorizontal
     ]
   }),
+  ariaForwarding({
+    labelledBy: "#trigger",
+    describedBy: "#trigger",
+    controls: "#trigger"
+  }),
   localized()
 ], GdsContextMenu);
 export {

package/components/datepicker/datepicker.component.js

@@ -23,6 +23,7 @@ import formControlHostStyle from "../../shared-styles/form-control-host.style.js
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import {
   dateArrayConverter,
   dateConverter
@@ -793,6 +794,11 @@ __decorateClass([
   watch("open")
 ], Datepicker.prototype, "_handleOpenChange", 1);
 Datepicker = __decorateClass([
+  ariaForwarding({
+    labelledBy: ".spinner",
+    describedBy: ".spinner",
+    errorMessage: ".spinner"
+  }),
   localized()
 ], Datepicker);
 let GdsDatepicker = class extends withSizeXProps(

package/components/details/details.component.js

@@ -8,6 +8,7 @@ import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
@@ -159,7 +160,11 @@ __decorateClass([
   watch("open")
 ], GdsDetails.prototype, "__handleOpenChange", 1);
 GdsDetails = __decorateClass([
-  gdsCustomElement("gds-details", { dependsOn: [GdsButton, GdsIconDetails] })
+  gdsCustomElement("gds-details", { dependsOn: [GdsButton, GdsIconDetails] }),
+  ariaForwarding({
+    labelledBy: ".summary",
+    describedBy: ".summary"
+  })
 ], GdsDetails);
 export {
   GdsDetails

package/components/dialog/dialog.component.js

@@ -13,6 +13,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
@@ -346,6 +347,10 @@ GdsDialog = __decorateClass([
   gdsCustomElement("gds-dialog", {
     dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
   }),
+  ariaForwarding({
+    labelledBy: "dialog",
+    describedBy: "dialog"
+  }),
   localized()
 ], GdsDialog);
 export {

package/components/dropdown/dropdown.component.js

@@ -20,6 +20,7 @@ import { GdsListbox } from "../../primitives/listbox/listbox.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
@@ -609,6 +610,11 @@ __decorateClass([
   watch("open")
 ], Dropdown.prototype, "_handleOpenChange", 1);
 Dropdown = __decorateClass([
+  ariaForwarding({
+    labelledBy: "#trigger",
+    describedBy: "#trigger",
+    errorMessage: "#trigger"
+  }),
   localized()
 ], Dropdown);
 let GdsDropdown = class extends withSizeXProps(

package/components/filter-chips/filter-chips.component.js

@@ -8,6 +8,7 @@ import {
 var _handleChipClick, _collapseThreshold, _collapsedAt, _getChipHeight, getChipHeight_fn, _handleSlotChange, handleSlotChange_fn;
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { resizeObserver } from "../../utils/decorators/resize-observer.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { stringArrayConverter } from "../../utils/helpers/attribute-converters.js";
@@ -168,7 +169,11 @@ __decorateClass([
   watch("value")
 ], GdsFilterChips.prototype, "_updateSelectedFromValue", 1);
 GdsFilterChips = __decorateClass([
-  gdsCustomElement("gds-filter-chips", { dependsOn: [GdsFilterChip] })
+  gdsCustomElement("gds-filter-chips", { dependsOn: [GdsFilterChip] }),
+  ariaForwarding({
+    labelledBy: '[role="listbox"]',
+    describedBy: '[role="listbox"]'
+  })
 ], GdsFilterChips);
 export {
   GdsFilterChip,

package/components/input/input.component.d.ts

@@ -141,7 +141,9 @@ declare const GdsInput_base: (new (...args: any[]) => import("../../utils/mixins
  * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example.
  * @slot extended-supporting-text - A longer supporting text can be placed here. It will be
  *       displayed in a panel when the user clicks the info button.
+ *
  * @event gds-input-cleared - Fired when the clear button is clicked.
+ * @event gds-ui-state - Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing.
  */
 export declare class GdsInput extends GdsInput_base {
 }

package/components/input/input.component.js

@@ -18,6 +18,7 @@ import { GdsFormControlHeader } from "../../primitives/form-control-header/form-
 import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyles from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -389,6 +390,11 @@ __decorateClass([
   watch("value")
 ], Input.prototype, "_handleValueChange", 1);
 Input = __decorateClass([
+  ariaForwarding({
+    labelledBy: "input",
+    describedBy: "input",
+    errorMessage: "input"
+  }),
   localized()
 ], Input);
 let GdsInput = class extends withSizeXProps(

package/components/link/link.component.js

@@ -11,6 +11,7 @@ import { html as staticHtml } from "lit/static-html.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
   withLayoutChildProps,
@@ -67,7 +68,11 @@ __decorateClass([
   })
 ], GdsLink.prototype, "text-decoration", 2);
 GdsLink = __decorateClass([
-  gdsCustomElement("gds-link")
+  gdsCustomElement("gds-link"),
+  ariaForwarding({
+    labelledBy: "a",
+    describedBy: "a"
+  })
 ], GdsLink);
 export {
   GdsLink

package/components/menu-button/menu-button.component.js

@@ -11,6 +11,7 @@ import { literal, html as staticHtml } from "lit/static-html.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import {
   withLayoutChildProps,
   withSizeXProps
@@ -91,7 +92,12 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsMenuButton.prototype, "selected", 2);
 GdsMenuButton = __decorateClass([
-  gdsCustomElement("gds-menu-button")
+  gdsCustomElement("gds-menu-button"),
+  ariaForwarding({
+    labelledBy: "button",
+    describedBy: "button",
+    controls: "button"
+  })
 ], GdsMenuButton);
 export {
   GdsMenuButton

package/components/menu-button/menu-button.styles.js

@@ -97,7 +97,6 @@ const style = css`
       --_padding-inline: var(--gds-sys-space-s);
       --_gap: 1px;
       font-size: 0.875rem;
-      height: 56px;
       justify-content: center;
 
       & > slot[name] {

package/components/pagination/pagination.component.js

@@ -13,6 +13,7 @@ import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
 import { watchMediaQuery } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import {
   gdsCustomElement,
   html
@@ -110,25 +111,27 @@ let GdsPagination = class extends withMarginProps(
     if (!showNavigation && !pageSizeMenu)
       return nothing;
     return html`
-      <gds-flex
-        align-items="center"
-        justify-content="space-between"
-        width="100%"
-        gap="${__privateGet(this, _config, config_get).gap}"
-      >
-        ${__privateMethod(this, _renderLabel, renderLabel_fn).call(this)}
+      <nav aria-label="${this.label || msg("Pagination")}">
         <gds-flex
-          aling-items="center"
+          align-items="center"
+          justify-content="space-between"
+          width="100%"
           gap="${__privateGet(this, _config, config_get).gap}"
-          flex="1"
-          justify-content="${showNavigation ? "space-between" : "flex-end"}"
         >
-          ${[
+          ${__privateMethod(this, _renderLabel, renderLabel_fn).call(this)}
+          <gds-flex
+            aling-items="center"
+            gap="${__privateGet(this, _config, config_get).gap}"
+            flex="1"
+            justify-content="${showNavigation ? "space-between" : "flex-end"}"
+          >
+            ${[
       when(showNavigation, () => __privateMethod(this, _renderNavigationControls, renderNavigationControls_fn).call(this)),
       pageSizeMenu
     ]}
+          </gds-flex>
         </gds-flex>
-      </gds-flex>
+      </nav>
     `;
   }
 };
@@ -491,6 +494,10 @@ GdsPagination = __decorateClass([
       IconChevronRightSmall,
       IconChevronDoubleRight
     ]
+  }),
+  ariaForwarding({
+    labelledBy: "nav",
+    describedBy: "nav"
   })
 ], GdsPagination);
 export {

package/components/popover/popover.component.js

@@ -19,6 +19,7 @@ import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch, watchMediaQuery } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import PopoverStyles from "./popover.styles.js";
 function applyTriggerAriaAttributes(trigger, open, popupRole) {
@@ -434,6 +435,10 @@ __decorateClass([
 ], GdsPopover.prototype, "_handleMobileLayout", 1);
 GdsPopover = __decorateClass([
   gdsCustomElement("gds-popover", { dependsOn: [IconCrossSmall] }),
+  ariaForwarding({
+    labelledBy: "dialog",
+    describedBy: "dialog"
+  }),
   localized()
 ], GdsPopover);
 export {

package/components/radio/radio-group/radio-group.component.d.ts

@@ -47,6 +47,8 @@ declare const GdsRadioGroup_base: (new (...args: any[]) => import("../../../util
  *
  * @event change - Fired when a radio button selection changes
  * @event input - Fired when a radio button selection changes
+ * @event gds-ui-state - Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing.
+ *
  */
 export declare class GdsRadioGroup extends GdsRadioGroup_base {
 }

package/components/radio/radio-group/radio-group.component.js

@@ -11,6 +11,7 @@ import { GdsFormControlFooter } from "../../../primitives/form-control-footer/fo
 import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { tokens } from "../../../tokens.style.js";
+import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -277,6 +278,11 @@ __decorateClass([
   watch("errorMessage")
 ], RadioGroup.prototype, "_syncRadioStates", 1);
 RadioGroup = __decorateClass([
+  ariaForwarding({
+    labelledBy: "#radiogroup",
+    describedBy: "#radiogroup",
+    errorMessage: "#radiogroup"
+  }),
   localized()
 ], RadioGroup);
 let GdsRadioGroup = class extends withLayoutChildProps(

package/components/radio/radio.component.js

@@ -10,6 +10,7 @@ import { GdsToggleControlBase } from "../../primitives/toggle-controls-base/togg
 import { gdsCustomElement, html } from "../../scoping.js";
 import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
 import { radioToggle } from "../../shared-styles/rbcb-toggle.template.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import RadioStyles from "./radio.styles.js";
 let GdsRadio = class extends GdsElement {
   constructor() {
@@ -107,7 +108,11 @@ __decorateClass([
   state()
 ], GdsRadio.prototype, "_isFocused", 2);
 GdsRadio = __decorateClass([
-  gdsCustomElement("gds-radio", { dependsOn: [GdsToggleControlBase] })
+  gdsCustomElement("gds-radio", { dependsOn: [GdsToggleControlBase] }),
+  ariaForwarding({
+    labelledBy: "gds-toggle-control-base",
+    describedBy: "gds-toggle-control-base"
+  })
 ], GdsRadio);
 export {
   GdsRadio

package/components/segmented-control/segmented-control.component.js

@@ -12,6 +12,7 @@ import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { resizeObserver } from "../../utils/decorators/resize-observer.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
@@ -233,6 +234,10 @@ GdsSegmentedControl = __decorateClass([
   gdsCustomElement("gds-segmented-control", {
     dependsOn: [GdsSegment, IconChevronLeft, IconChevronRight]
   }),
+  ariaForwarding({
+    labelledBy: '[role="list"]',
+    describedBy: '[role="list"]'
+  }),
   localized()
 ], GdsSegmentedControl);
 export {

package/components/select/select.component.d.ts

@@ -75,8 +75,9 @@ declare const GdsSelect_base: (new (...args: any[]) => import("../../utils/mixin
  * element, and not on the enclosed select element. Also, state should also be handled only through the host.
  * Setting value or selected props on the select element will not work as expected.
  *
- * @event {CustomEvent} change - Fired when the selection changes with detail: { value: string }
- * @event {CustomEvent} input - Fired on input with detail: { value: string }
+ * @event change - Fired when the selection changes with detail: { value: string }
+ * @event input - Fired on input with detail: { value: string }
+ * @event gds-ui-state - Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing.
  *
  * @slot - Default slot for the native select element
  * @slot lead - Slot for leading content (e.g., icons)

package/components/select/select.component.js

@@ -15,6 +15,7 @@ import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-
 import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component.js";
 import formControlHostStyles from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { watch } from "../../utils/decorators/watch.js";
 import {
@@ -305,6 +306,11 @@ __decorateClass([
   watch("value")
 ], Select.prototype, "_handleValueChange", 1);
 Select = __decorateClass([
+  ariaForwarding({
+    labelledBy: "select",
+    describedBy: "select",
+    errorMessage: "select"
+  }),
   localized()
 ], Select);
 let GdsSelect = class extends withLayoutChildProps(

package/components/switch/switch.component.js

@@ -9,6 +9,7 @@ import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
   withLayoutChildProps,
@@ -18,7 +19,7 @@ import {
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCheckmark } from "../icon/icons/checkmark.component.js";
 import { styles } from "./switch.styles.js";
-class Switch extends GdsFormControlElement {
+let Switch = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _renderNativeInput);
@@ -80,7 +81,7 @@ class Switch extends GdsFormControlElement {
       </label>
     `;
   }
-}
+};
 _renderNativeInput = new WeakSet();
 renderNativeInput_fn = function() {
   return html`
@@ -173,6 +174,13 @@ __decorateClass([
 __decorateClass([
   query(".perimeter")
 ], Switch.prototype, "_perimeter", 2);
+Switch = __decorateClass([
+  ariaForwarding({
+    labelledBy: "#switch-input",
+    describedBy: "#switch-input",
+    errorMessage: "#switch-input"
+  })
+], Switch);
 let GdsSwitch = class extends withLayoutChildProps(
   withMarginProps(withSizeXProps(Switch))
 ) {

package/components/table/table.component.js

@@ -14,6 +14,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { watchMediaQuery } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { forSpaceTokensAndCustomValues } from "../../utils/helpers/index.js";
@@ -1913,6 +1914,10 @@ GdsTable = __decorateClass([
   localized(),
   gdsCustomElement("gds-table", {
     dependsOn: Table.Dependencies
+  }),
+  ariaForwarding({
+    labelledBy: "table",
+    describedBy: "table"
   })
 ], GdsTable);
 export {

package/components/textarea/textarea.component.d.ts

@@ -136,7 +136,10 @@ declare const GdsTextarea_base: (new (...args: any[]) => import("../../utils/mix
  * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example.
  * @slot extended-supporting-text - A longer supporting text can be placed here. It will be
  *       displayed in a panel when the user clicks the info button.
+ *
  * @event gds-input-cleared - Fired when the clear button is clicked.
+ * @event gds-ui-state - Fired when the extended supporting text is opened or closed by the user. Can be cancelled to prevent it from opening or closing.
+ *
  */
 export declare class GdsTextarea extends GdsTextarea_base {
 }

package/components/textarea/textarea.component.js

@@ -18,6 +18,7 @@ import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
 import { watch } from "../../utils/decorators/index.js";
+import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { resizeObserver } from "../../utils/decorators/resize-observer.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import {
@@ -459,6 +460,11 @@ __decorateClass([
   watch("rows")
 ], Textarea.prototype, "_handleRowsChange", 1);
 Textarea = __decorateClass([
+  ariaForwarding({
+    labelledBy: "textarea",
+    describedBy: "textarea",
+    errorMessage: "textarea"
+  }),
   localized()
 ], Textarea);
 let GdsTextarea = class extends withLayoutChildProps(