@sebgroup/green-core 1.81.0 → 1.83.0

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

@@ -153,7 +153,7 @@ renderFieldControlFooter_fn = function() {
   return html`<gds-form-control-footer
       id="footer"
       class="size-${this.size}"
-      .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+      .errorMessage=${this.invalid ? this.errorMessage : void 0}
     >
     </gds-form-control-footer>`;
 };

package/components/datepicker/datepicker.component.js

@@ -239,10 +239,14 @@ let Datepicker = class extends GdsFormControlElement {
     return "gds-datepicker";
   }
   get value() {
-    return this._internalValue;
+    const dateValue = super.value;
+    if (dateValue instanceof Date) {
+      return new Date(dateValue);
+    }
+    return void 0;
   }
   set value(value) {
-    this._internalValue = value;
+    super.value = value;
   }
   get dateformat() {
     return this._dateFormatLayout.layout.map((f) => f.token).join(this._dateFormatLayout.delimiter);
@@ -369,13 +373,16 @@ let Datepicker = class extends GdsFormControlElement {
 
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
-      () => html`<gds-form-control-footer class="size-${this.size}">
+      () => html`<gds-form-control-footer
+            class="size-${this.size}"
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
+          >
             ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.errorMessage || this.validationMessage}
+              ${this.errorMessage}
             </slot>
           </gds-form-control-footer>`
     )}
@@ -553,7 +560,7 @@ let Datepicker = class extends GdsFormControlElement {
 _valueOnOpen = new WeakMap();
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && this.invalid;
+  return !this.plain;
 };
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {

package/components/datepicker/datepicker.styles.js

@@ -38,8 +38,8 @@ const styles = css`
       text-align: center;
 
       &:focus {
-        background-color: var(--gds-color-l2-background-tertiary);
-        color: var(--gds-color-l2-content-tertiary);
+        background-color: var(--gds-sys-color-l2-background-tertiary);
+        color: var(--gds-sys-color-l2-content-tertiary);
       }
     }
   }

package/components/dialog/dialog.component.d.ts

@@ -4,7 +4,7 @@ declare const GdsDialog_base: (new (...args: any[]) => import("../../utils/mixin
  * @element gds-dialog
  * @status beta
  *
- * @event gds-ui-state - Fired when the dialog is opened or closed
+ * @event gds-ui-state - Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing.
  * @event gds-close - Fired when the dialog is closed
  * @event gds-show - Fired when the dialog is opened
  *

package/components/dialog/dialog.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _returnValue, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _handleTriggerSlotChange, handleTriggerSlotChange_fn, _handleTriggerClick;
+var _returnValue, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _handleTriggerSlotChange, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
 import { localized, msg } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
@@ -42,9 +42,14 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
     __privateAdd(this, _handleNativeClose, (e) => {
       const dialog = e.target;
       const returnValue = dialog.returnValue;
+      if (returnValue !== "prop-change") {
+        if (!__privateGet(this, _dispatchCloseEvent).call(this, returnValue)) {
+          return;
+        }
+        this.close(returnValue || "native-close");
+        return;
+      }
       this.close(returnValue || "native-close");
-      if (returnValue !== "prop-change")
-        __privateGet(this, _dispatchCloseEvent).call(this, returnValue);
     });
     __privateAdd(this, _dispatchCloseEvent, (reason) => {
       this.dispatchEvent(
@@ -54,7 +59,7 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
           composed: false
         })
       );
-      __privateGet(this, _dispatchUiStateEvent).call(this, reason);
+      return __privateGet(this, _dispatchUiStateEvent).call(this, reason);
     });
     __privateAdd(this, _dispatchShowEvent, (reason) => {
       this.dispatchEvent(
@@ -64,20 +69,34 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
           composed: false
         })
       );
-      __privateGet(this, _dispatchUiStateEvent).call(this, reason);
+      return __privateGet(this, _dispatchUiStateEvent).call(this, reason);
     });
     __privateAdd(this, _dispatchUiStateEvent, (reason) => {
-      this.dispatchEvent(
+      return this.dispatchEvent(
         new CustomEvent("gds-ui-state", {
           detail: { reason, open: this.open },
           bubbles: false,
-          composed: false
+          composed: false,
+          cancelable: true
         })
       );
     });
     __privateAdd(this, _handleTriggerClick, (e) => {
       this.show("slotted-trigger");
     });
+    __privateAdd(this, _handleClickOutside, (evt) => {
+      const e = evt;
+      const dialog = this._elDialog;
+      const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
+      if (isNotEnterKey && dialog && this.open) {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
+        const closeReason = "click-outside";
+        if (!isInDialog && __privateGet(this, _dispatchCloseEvent).call(this, closeReason)) {
+          this.close(closeReason);
+        }
+      }
+    });
   }
   /**
    * Opens the dialog.
@@ -166,6 +185,10 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
       this.updateComplete.then(() => {
         this._elDialog?.showModal();
         lockBodyScrolling(this);
+        document.removeEventListener("click", __privateGet(this, _handleClickOutside));
+        requestAnimationFrame(
+          () => document.addEventListener("click", __privateGet(this, _handleClickOutside))
+        );
         if (isIOS) {
           this._elDialog?.focus();
         }
@@ -174,6 +197,7 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
       __privateSet(this, _returnValue, __privateGet(this, _returnValue) || "prop-change");
       this._elDialog?.close(__privateGet(this, _returnValue));
       unlockBodyScrolling(this);
+      document.removeEventListener("click", __privateGet(this, _handleClickOutside));
       this.requestUpdate("open");
     }
   }
@@ -192,6 +216,7 @@ handleTriggerSlotChange_fn = function() {
   }
 };
 _handleTriggerClick = new WeakMap();
+_handleClickOutside = new WeakMap();
 GdsDialog.styles = [styles];
 GdsDialog.styleExpressionBaseSelector = "dialog";
 __decorateClass([

package/components/dropdown/dropdown.component.js

@@ -268,13 +268,13 @@ let GdsDropdown = class extends GdsFormControlElement {
     let displayValue;
     if (Array.isArray(this.value)) {
       this.value.length > 2 ? displayValue = msg(str`${this.value.length} selected`) : displayValue = this.value.reduce(
-        (acc, cur) => acc + this.options.find((v) => v.value === cur)?.innerHTML + ", ",
+        (acc, cur) => acc + this.options.find((v) => v.value === cur)?.innerText + ", ",
         ""
       ).slice(0, -2);
     } else {
-      displayValue = this.options.find((v) => v.selected)?.innerHTML;
+      displayValue = this.options.find((v) => v.selected)?.innerText;
     }
-    return displayValue || this.placeholder?.innerHTML || "";
+    return displayValue || this.placeholder?.innerText || "";
   }
   /**
    * Moves focus to this element.
@@ -373,13 +373,16 @@ let GdsDropdown = class extends GdsFormControlElement {
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
       () => html`
-          <gds-form-control-footer class="size-${this.size}">
+          <gds-form-control-footer
+            class="size-${this.size}"
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
+          >
             ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.errorMessage || this.validationMessage}
+              ${this.validationMessage || this.errorMessage}
             </slot>
           </gds-form-control-footer>
         `
@@ -439,7 +442,7 @@ let GdsDropdown = class extends GdsFormControlElement {
 _optionElements = new WeakMap();
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && this.invalid;
+  return !this.plain;
 };
 _renderCombobox = new WeakMap();
 _renderTriggerButton = new WeakMap();

package/components/form/form-control.js

@@ -5,7 +5,6 @@ import {
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
 var _internals;
-import { msg } from "@lit/localize";
 import { property } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { watch } from "../../utils/decorators/index.js";
@@ -59,7 +58,7 @@ class GdsFormControlElement extends GdsElement {
         customError: value,
         valid: !value
       },
-      this.validationMessage || msg(`Error message.`),
+      this.errorMessage || this.validationMessage || "   ",
       // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
       this._getValidityAnchor() || void 0
     );
@@ -74,6 +73,7 @@ class GdsFormControlElement extends GdsElement {
   }
   set value(value) {
     this._internalValue = value;
+    __privateGet(this, _internals).setFormValue(value);
   }
   /**
    * The form element that the form control is associated with.
@@ -99,6 +99,7 @@ class GdsFormControlElement extends GdsElement {
       { ...this.validity, valid: true },
       ""
     ];
+    this.errorMessage = validity[1] || this.errorMessage;
     __privateGet(this, _internals).setValidity(
       validity[0],
       validity[1],
@@ -124,7 +125,6 @@ class GdsFormControlElement extends GdsElement {
     return __privateGet(this, _internals).reportValidity();
   }
   __handleValueChange() {
-    __privateGet(this, _internals).setFormValue(this.value);
     this.checkValidity();
   }
   formResetCallback() {
@@ -143,6 +143,7 @@ class GdsFormControlElement extends GdsElement {
     if (!this.validity.valid)
       e.preventDefault();
   }
+  // TODO: This needs to be handled on a component by component basis, since it's not always the validity anchor that should be the focus reciever.
   focus(options) {
     this._getValidityAnchor().focus(options);
   }

package/components/form/index.d.ts

@@ -1 +1 @@
-export * from './summary';
+export * from '../form-summary';

package/components/form/index.js

@@ -1 +1 @@
-export * from "./summary/index.js";
+export * from "../form-summary/index.js";

package/components/form-summary/summary.component.d.ts

@@ -0,0 +1,41 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-form-summary
+ *
+ * When a user attempts to submit a form with errors, this component displays a summary of those errors.
+ * Including an error summary greatly assists users in promptly identifying and addressing multiple errors
+ * in a consolidated manner. It provides a clear indication of what went wrong and what needs to be corrected.
+ */
+export declare class GdsFormSummary extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Whether to hide the error messages under the labels.
+     */
+    hideErrors: boolean;
+    /**
+     * Whether to refresh the summary automatically as controls in the form change validation state.
+     *
+     * Avoid this setting if the summary is located above the form controls, as it may cause the form
+     * to jump around as the summary is updated.
+     */
+    reactive: boolean;
+    /**
+     * The current number of errors displayed in the summary.
+     *
+     * This is a convenience property that can be used to display the number of errors in the summary.
+     */
+    get errorCount(): number;
+    /**
+     * Focuses the first focusable element in the summary.
+     */
+    focus(options?: FocusOptions): void;
+    private _elRoot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Refresh the component to reflext the current state of the form.
+     */
+    refresh(): void;
+    render(): any;
+}

package/components/form-summary/summary.component.js

@@ -0,0 +1,197 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _form, _formObserver, _getFormControls, getFormControls_fn, _getErrorControls, getErrorControls_fn, _renderArrowIcon, renderArrowIcon_fn;
+import { msg, str } from "@lit/localize";
+import { nothing } from "lit";
+import { property, queryAsync } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import { when } from "lit/directives/when.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { GdsButton } from "../button/button.component.js";
+import { GdsCard } from "../card/card.component.js";
+import { GdsDiv } from "../div/div.component.js";
+import { GdsFlex } from "../flex/flex.component.js";
+import { IconArrowUp } from "../icon/icons/arrow-up.component.js";
+import styles from "./summary.styles.js";
+let GdsFormSummary = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _getFormControls);
+    __privateAdd(this, _getErrorControls);
+    __privateAdd(this, _renderArrowIcon);
+    this.hideErrors = false;
+    this.reactive = false;
+    __privateAdd(this, _form, void 0);
+    __privateAdd(this, _formObserver, void 0);
+  }
+  /**
+   * The current number of errors displayed in the summary.
+   *
+   * This is a convenience property that can be used to display the number of errors in the summary.
+   */
+  get errorCount() {
+    return __privateMethod(this, _getErrorControls, getErrorControls_fn).call(this).length;
+  }
+  /**
+   * Focuses the first focusable element in the summary.
+   */
+  focus(options) {
+    this._elRoot.then((el) => {
+      const firstFocusable = el.querySelector(
+        '[gds-element="gds-button"]'
+      );
+      if (firstFocusable) {
+        firstFocusable.focus(options);
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _form, this.closest("form") || void 0);
+    if (__privateGet(this, _form) && this.reactive) {
+      __privateSet(this, _formObserver, new MutationObserver(() => {
+        this.refresh();
+      }));
+      __privateGet(this, _formObserver).observe(__privateGet(this, _form), {
+        attributes: true,
+        subtree: true
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _formObserver)?.disconnect();
+  }
+  /**
+   * Refresh the component to reflext the current state of the form.
+   */
+  refresh() {
+    this.requestUpdate();
+  }
+  render() {
+    const formControls = __privateMethod(this, _getFormControls, getFormControls_fn).call(this);
+    const errorControls = __privateMethod(this, _getErrorControls, getErrorControls_fn).call(this);
+    return when(
+      errorControls.length > 0,
+      () => html`<gds-card
+          id="root"
+          role="navigation"
+          border-color="negative"
+          border-radius="xs"
+          border-width="0"
+          padding="l"
+          background="negative"
+          color="negative"
+          overflow="hidden"
+          aria-describedby="description"
+          aria-label=${msg(`Form error summary`)}
+        >
+          <gds-flex gap="0" flex-direction="column">
+            <gds-text
+              font-size="heading-xs"
+              font-weight="book"
+              id="description"
+            >
+              ${msg(
+        str`There are ${errorControls.length} errors to correct before you can continue:`
+      )}
+            </gds-text>
+            <ul>
+              ${formControls.map(
+        (el, idx) => html`<li ?inert=${!(el.ariaInvalid === "true" || el.invalid)}>
+                    <gds-card
+                      display="flex"
+                      padding="s"
+                      flex-direction="row"
+                      align-items="center"
+                      justify-content="space-between"
+                      gap="xs"
+                      level="3"
+                      color="negative"
+                      background="transparent; hover: negative/.2"
+                      style="cursor: pointer"
+                      border-width="0"
+                      border-radius="xs"
+                      margin="0 -xs"
+                      @click=${(e) => {
+          e.preventDefault();
+          el.focus();
+        }}
+                    >
+                      <div id=${`error-label-${idx}`}>
+                        <gds-div font-weight="book"
+                          >${el.dataset.label || el.label || el.ariaLabel}</gds-div
+                        >
+                        ${when(
+          !this.hideErrors,
+          () => html`<gds-div font-size="body-s">
+                              ${el.dataset.errormessage || el.errorMessage || el.ariaErrorMessage}
+                            </gds-div>`
+        )}
+                      </div>
+                      <gds-button
+                        size="small"
+                        variant="negative"
+                        label=${`Move focus to ${el.label} field`}
+                      >
+                        ${until(__privateMethod(this, _renderArrowIcon, renderArrowIcon_fn).call(this, el), nothing)}
+                      </gds-button>
+                    </gds-card>
+                  </li>`
+      )}
+            </ul>
+          </gds-flex>
+        </gds-card>`
+    );
+  }
+};
+_form = new WeakMap();
+_formObserver = new WeakMap();
+_getFormControls = new WeakSet();
+getFormControls_fn = function() {
+  return Array.from(__privateGet(this, _form)?.elements || []).filter(
+    // Individual checkboxes can be used as form controls, but they don't support error messages,
+    // so we filter them out here. Checkboxes needs to be wrapped in a group to work with form summary.
+    (el) => el.gdsElementName !== "gds-checkbox"
+  );
+};
+_getErrorControls = new WeakSet();
+getErrorControls_fn = function() {
+  return __privateMethod(this, _getFormControls, getFormControls_fn).call(this).filter(
+    (el) => el.ariaInvalid === "true" || el.invalid
+  );
+};
+_renderArrowIcon = new WeakSet();
+renderArrowIcon_fn = async function(el) {
+  const selfTop = (await this._elRoot).getBoundingClientRect().top;
+  const elTop = el.getBoundingClientRect().top;
+  const isAbove = elTop < selfTop;
+  return isAbove ? html`<gds-icon-arrow-up></gds-icon-arrow-up>` : html`<gds-icon-arrow-up
+          style="transform: rotate(180deg)"
+        ></gds-icon-arrow-up>`;
+};
+GdsFormSummary.styles = [tokens, styles];
+__decorateClass([
+  property({ type: Boolean })
+], GdsFormSummary.prototype, "hideErrors", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsFormSummary.prototype, "reactive", 2);
+__decorateClass([
+  queryAsync("#root")
+], GdsFormSummary.prototype, "_elRoot", 2);
+GdsFormSummary = __decorateClass([
+  gdsCustomElement("gds-form-summary", {
+    dependsOn: [GdsCard, GdsFlex, GdsDiv, GdsButton, IconArrowUp]
+  })
+], GdsFormSummary);
+export {
+  GdsFormSummary
+};

package/components/{form/summary → form-summary}/summary.js

@@ -1,4 +1,4 @@
-import "../../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QTSIPXV3.js";
 import { GdsFormSummary } from "./summary.component.js";
 GdsFormSummary.define();
 export {

package/components/form-summary/summary.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/form-summary/summary.styles.js

@@ -0,0 +1,33 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+var summary_styles_default = css`
+  :host {
+    display: contents;
+  }
+  ul {
+    list-style-type: none;
+    margin: 1rem 0 0;
+    padding: 0;
+  }
+  li {
+    margin: 0;
+    transition:
+      max-height 0.3s ease-in-out,
+      opacity 0.3s ease-in-out,
+      margin 0.3s ease-in-out;
+  }
+  li[inert] {
+    max-height: 0;
+    opacity: 0;
+  }
+  li:not([inert]) {
+    max-height: 4rem;
+    opacity: 1;
+  }
+  a {
+    color: inherit;
+  }
+`;
+export {
+  summary_styles_default as default
+};

package/components/input/input.component.js

@@ -121,10 +121,10 @@ let Input = class extends GdsFormControlElement {
       </gds-field-base>
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
-      () => html`<gds-form-control-footer
+      () => html` <gds-form-control-footer
             class="size-${this.size}"
-            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (this.value?.length || 0)}
-            .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
@@ -135,7 +135,7 @@ let Input = class extends GdsFormControlElement {
 };
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
+  return !this.plain;
 };
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();

package/components/popover/popover.component.js

@@ -145,7 +145,7 @@ let GdsPopover = class extends GdsElement {
     });
     this.addEventListener("focusin", (e) => {
       const t = e.target;
-      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+      if (t === this || t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
         this._isVirtKbVisible = true;
       } else {
         this._isVirtKbVisible = false;

package/components/pure.d.ts

@@ -31,7 +31,7 @@ export * from './icon/icon.component';
 export * from './segmented-control/segmented-control.component';
 export * from './theme/theme.component';
 export * from './filter-chips/filter-chips.component';
-export * from './form/summary/summary.component';
+export * from './form-summary/summary.component';
 export * from './input/input.component';
 export * from './select/select.component';
 export * from './spinner/spinner.component';

package/components/pure.js

@@ -31,7 +31,7 @@ export * from "./icon/icon.component.js";
 export * from "./segmented-control/segmented-control.component.js";
 export * from "./theme/theme.component.js";
 export * from "./filter-chips/filter-chips.component.js";
-export * from "./form/summary/summary.component.js";
+export * from "./form-summary/summary.component.js";
 export * from "./input/input.component.js";
 export * from "./select/select.component.js";
 export * from "./spinner/spinner.component.js";

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

@@ -245,7 +245,7 @@ renderFieldControlFooter_fn = function() {
   return html` <gds-form-control-footer
       id="footer"
       class="size-${this.size}"
-      .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+      .errorMessage=${this.invalid ? this.errorMessage : void 0}
     >
     </gds-form-control-footer>`;
 };

package/components/textarea/textarea.component.js

@@ -188,9 +188,10 @@ let Textarea = class extends GdsFormControlElement {
       ${when(
       __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
       () => html`<gds-form-control-footer
-            lass="size-${this.size}"
-            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (this.value?.length || 0)}
-            .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+            id="footer"
+            class="size-${this.size}"
+            .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
+            .errorMessage=${this.invalid ? this.errorMessage : void 0}
           ></gds-form-control-footer>`
     )}
     `;
@@ -239,7 +240,7 @@ let Textarea = class extends GdsFormControlElement {
 };
 _shouldShowFooter = new WeakSet();
 shouldShowFooter_fn = function() {
-  return !this.plain && (this.invalid || __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get));
+  return !this.plain;
 };
 _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
@@ -276,6 +277,7 @@ renderNativeTextarea_fn = function() {
         class="native-control resize-${this.resizable}"
         aria-label=${this.plain && this.label || nothing}
         aria-describedby="supporting-text extended-supporting-text sub-label message"
+        aria-errormessage="footer"
         placeholder=" "
         autocapitalize=${ifDefined(this.autocapitalize)}
         autocomplete=${ifDefined(this.autocomplete)}