@sebgroup/green-core 1.81.0 → 1.82.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

@@ -369,13 +369,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 +556,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/dropdown/dropdown.component.js

@@ -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
     );
@@ -99,6 +98,7 @@ class GdsFormControlElement extends GdsElement {
       { ...this.validity, valid: true },
       ""
     ];
+    this.errorMessage = validity[1] || this.errorMessage;
     __privateGet(this, _internals).setValidity(
       validity[0],
       validity[1],

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/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)}

package/generated/react/form-control-footer/index.d.ts

@@ -2,12 +2,12 @@ import { getReactComponent } from "../../../utils/react";
 import { GdsFormControlFooter as GdsFormControlFooterClass } from "../../../primitives/form-control-footer/form-control-footer.component";
 export declare const GdsFormControlFooter: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsFormControlFooterClass>>>) => import("react").ReactElement<Omit<{
     charCounter?: number | undefined;
-    validationMessage?: string | undefined;
+    errorMessage?: string | undefined;
+    connectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     readonly renderOptions?: import("lit-html").RenderOptions | undefined;
     readonly renderRoot?: HTMLElement | DocumentFragment | undefined;

package/generated/react/index.d.ts

@@ -1,12 +1,12 @@
 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 './blur/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
-export * from './container/index.js';
 export * from './coachmark/index.js';
+export * from './container/index.js';
 export * from './context-menu/index.js';
 export * from './datepicker/index.js';
 export * from './details/index.js';
@@ -52,8 +52,6 @@ export * from './formatted-number/index.js';
 export * from './radio-group/index.js';
 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 './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -341,3 +339,5 @@ 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 './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -1,12 +1,12 @@
 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 "./blur/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
-export * from "./container/index.js";
 export * from "./coachmark/index.js";
+export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
 export * from "./details/index.js";
@@ -52,8 +52,6 @@ export * from "./formatted-number/index.js";
 export * from "./radio-group/index.js";
 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 "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -341,3 +339,5 @@ 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 "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";

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": "1.81.0",
+  "version": "1.82.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/form-control-footer/form-control-footer.component.d.ts

@@ -6,6 +6,8 @@ export declare class GdsFormControlFooter extends GdsElement {
     #private;
     static styles: import("lit").CSSResult[];
     charCounter?: number;
-    validationMessage?: string;
+    errorMessage?: string;
+    private _handleVisibilityChange;
+    connectedCallback(): void;
     render(): any;
 }

package/primitives/form-control-footer/form-control-footer.component.js

@@ -9,6 +9,7 @@ import { when } from "lit/directives/when.js";
 import { GdsBadge } from "../../components/badge/badge.component.js";
 import { IconTriangleExclamation } from "../../components/icon/icons/triangle-exclamation.component.js";
 import { GdsElement } from "../../gds-element.js";
+import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
   html
@@ -19,22 +20,32 @@ let GdsFormControlFooter = class extends GdsElement {
     super(...arguments);
     __privateAdd(this, _renderRemainingCharsBadge);
   }
+  _handleVisibilityChange() {
+    this.classList.toggle(
+      "visually-hidden",
+      !this.errorMessage && !this.charCounter
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleVisibilityChange();
+  }
   render() {
     return html`<div aria-live="polite">
       <div class="error-message">
         <slot name="message"
           >${when(
-      this.validationMessage,
+      this.errorMessage,
       () => html`
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.validationMessage}
+              ${this.errorMessage}
             `
     )}</slot
         >
       </div>
-      <div class="char-counter">
+      <div class="char-counter" aria-hidden="true">
         ${when(
       Number.isInteger(this.charCounter),
       () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this, this.charCounter)
@@ -61,7 +72,11 @@ __decorateClass([
 ], GdsFormControlFooter.prototype, "charCounter", 2);
 __decorateClass([
   property()
-], GdsFormControlFooter.prototype, "validationMessage", 2);
+], GdsFormControlFooter.prototype, "errorMessage", 2);
+__decorateClass([
+  watch("charCounter"),
+  watch("errorMessage")
+], GdsFormControlFooter.prototype, "_handleVisibilityChange", 1);
 GdsFormControlFooter = __decorateClass([
   gdsCustomElement("gds-form-control-footer", {
     dependsOn: [GdsBadge, IconTriangleExclamation]

package/primitives/form-control-footer/form-control-footer.styles.js

@@ -3,6 +3,14 @@ import { css } from "lit";
 const styles = css`
   @layer base, reset, transitional-styles;
   @layer base {
+    :host(.visually-hidden) {
+      position: absolute;
+      clip: rect(0 0 0 0);
+      width: 0px;
+      height: 0px;
+      overflow: hidden;
+    }
+
     :host > *:not(style) {
       display: flex;
       justify-content: space-between;

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

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