@sebgroup/green-core 2.6.4 → 2.6.5

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

@@ -4,7 +4,7 @@ import {
   __privateGet,
   __privateMethod
 } from "../../../chunks/chunk.QU3DSPNU.js";
-var _handleInvalidChange, _CheckboxGroup_instances, renderCheckboxGroupContents_fn, renderFieldControlHeader_fn, renderCheckboxes_fn, handleCheckboxChange_fn, computeValue_fn, dispatchInputEvent_fn, renderFieldControlFooter_fn;
+var _syncCheckboxes, _CheckboxGroup_instances, renderCheckboxGroupContents_fn, renderFieldControlHeader_fn, renderCheckboxes_fn, handleCheckboxChange_fn, computeValue_fn, dispatchInputEvent_fn, renderFieldControlFooter_fn;
 import { localized } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -28,9 +28,10 @@ let CheckboxGroup = class extends GdsFormControlElement {
     this.direction = "column";
     this.supportingText = "";
     this.showExtendedSupportingText = false;
-    __privateAdd(this, _handleInvalidChange, () => {
+    __privateAdd(this, _syncCheckboxes, () => {
       this.checkboxes.forEach((checkbox) => {
         checkbox.invalid = this.invalid;
+        checkbox.errorMessage = this.errorMessage;
       });
     });
   }
@@ -59,14 +60,14 @@ let CheckboxGroup = class extends GdsFormControlElement {
     });
   }
   _handleGroupInvalidChange() {
-    __privateGet(this, _handleInvalidChange).call(this);
+    __privateGet(this, _syncCheckboxes).call(this);
   }
   focus() {
     this.checkboxes[0]?.focus();
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("gds-validity-state", __privateGet(this, _handleInvalidChange));
+    this.addEventListener("gds-validity-state", __privateGet(this, _syncCheckboxes));
   }
   render() {
     const classes = {
@@ -86,10 +87,11 @@ let CheckboxGroup = class extends GdsFormControlElement {
     </div>`;
   }
   _syncOnDOMChange() {
+    __privateGet(this, _syncCheckboxes).call(this);
     __privateMethod(this, _CheckboxGroup_instances, computeValue_fn).call(this);
   }
 };
-_handleInvalidChange = new WeakMap();
+_syncCheckboxes = new WeakMap();
 _CheckboxGroup_instances = new WeakSet();
 renderCheckboxGroupContents_fn = function() {
   const elements = [
@@ -173,7 +175,8 @@ __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], CheckboxGroup.prototype, "_handleValueChange", 1);
 __decorateClass([
-  watch("invalid")
+  watch("invalid"),
+  watch("errorMessage")
 ], CheckboxGroup.prototype, "_handleGroupInvalidChange", 1);
 __decorateClass([
   observeLightDOM({

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

@@ -35,6 +35,7 @@ export declare class GdsCheckbox extends GdsFormControlElement {
     set value(value: string);
     private _elCheckbox;
     private _handleIndeterminateChange;
+    focus(options?: FocusOptions): void;
     render(): any;
     protected _getValidityAnchor(): HTMLElement;
     protected formResetCallback(): void;

package/components/checkbox/checkbox.component.js

@@ -5,7 +5,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _GdsCheckbox_instances, toggleChecked_fn, dispatchChangeEvents_fn;
 import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
 import { GdsToggleControlBase } from "../../primitives/toggle-controls-base/toggle-control-base.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
@@ -37,6 +37,9 @@ let GdsCheckbox = class extends GdsFormControlElement {
       this.checked = false;
     }
   }
+  focus(options) {
+    this._elCheckbox.focus(options);
+  }
   render() {
     return html`
       <input
@@ -45,15 +48,17 @@ let GdsCheckbox = class extends GdsFormControlElement {
         ?disabled=${this.disabled}
         ?indeterminate=${this.indeterminate}
         aria-invalid=${this.invalid}
-        aria-describedby=${ifDefined(
-      this.supportingText ? "supporting-text" : ""
-    )}
+        aria-describedby="message supporting-text"
         id="checkbox-input"
         @change=${() => {
       this.checked = this._elCheckbox.checked;
       __privateMethod(this, _GdsCheckbox_instances, dispatchChangeEvents_fn).call(this);
     }}
       />
+      ${when(
+      this.errorMessage,
+      () => html`<span id="message">${this.errorMessage}</span>`
+    )}
       <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
         <label for="checkbox-input" slot="label"> ${this.label} </label>
         <span

package/components/checkbox/checkbox.styles.js

@@ -25,6 +25,10 @@ const style = css`
     height: 0;
     pointer-events: none;
   }
+
+  #message {
+    display: none;
+  }
 `;
 var checkbox_styles_default = style;
 export {

package/components/dropdown/dropdown.component.js

@@ -7,6 +7,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _optionElements, _GdsDropdown_instances, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, registerAutoCloseListener_fn, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
+import { nothing } from "lit";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -99,7 +100,7 @@ let GdsDropdown = class extends GdsFormControlElement {
         aria-haspopup="listbox"
         aria-controls="listbox"
         name="trigger"
-        aria-label="${this.label} ${this.displayValue}"
+        aria-label="${this.label}"
         aria-describedby="supporting-text extended-supporting-text sub-label message"
         aria-invalid="${this.invalid}"
         aria-required="${this.required}"
@@ -395,7 +396,7 @@ let GdsDropdown = class extends GdsFormControlElement {
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
-              ${this.errorMessage}
+              ${this.invalid ? this.errorMessage : nothing}
             </slot>
           </gds-form-control-footer>
         `

package/components/input/input.component.js

@@ -114,6 +114,7 @@ let Input = class extends GdsFormControlElement {
       ${when(
       __privateMethod(this, _Input_instances, shouldShowFooter_fn).call(this),
       () => html` <gds-form-control-footer
+            id="message"
             class="size-${this.size}"
             .charCounter=${__privateGet(this, _Input_instances, shouldShowRemainingChars_get) ? this.maxlength - (this.value?.length || 0) : void 0}
             .errorMessage=${this.invalid ? this.errorMessage : void 0}
@@ -159,6 +160,7 @@ renderNativeInput_fn = function() {
         ?disabled=${this.disabled}
         aria-describedby="supporting-text extended-supporting-text sub-label message"
         aria-invalid=${this.invalid}
+        aria-errormessage="message"
         aria-label=${this.plain && this.label || nothing}
         placeholder=" "
         type=${this.type}

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

@@ -72,6 +72,7 @@ let RadioGroup = class extends GdsFormControlElement {
       radio.checked = radio.value === this.value;
       radio.size = this.size;
       radio.invalid = this.invalid;
+      radio.errorMessage = this.errorMessage;
     });
   }
   render() {
@@ -246,7 +247,8 @@ __decorateClass([
   watch("value")
 ], RadioGroup.prototype, "_handleValueChange", 1);
 __decorateClass([
-  watch("invalid")
+  watch("invalid"),
+  watch("errorMessage")
 ], RadioGroup.prototype, "_syncRadioStates", 1);
 RadioGroup = __decorateClass([
   localized()

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

@@ -32,6 +32,13 @@ export declare class GdsRadio extends GdsElement {
      * Whether the radio button is invalid or not.
      */
     invalid: boolean;
+    /**
+     * The accessible error message text for the radio button.
+     *
+     * This text is not visually rendered, but will be announced by
+     * screen readers when the radio button is in an invalid state.
+     */
+    errorMessage?: string;
     private _isFocused;
     constructor();
     connectedCallback(): void;

package/components/radio/radio.component.js

@@ -50,6 +50,10 @@ let GdsRadio = class extends GdsElement {
     this.setAttribute("aria-checked", this.checked.toString());
     this.setAttribute("aria-disabled", this.disabled.toString());
     this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+    this.setAttribute(
+      "aria-description",
+      this.errorMessage ? this.errorMessage : ""
+    );
     this.toggleAttribute("aria-invalid", this.invalid);
   }
   updated(changedProperties) {
@@ -94,6 +98,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], GdsRadio.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: String })
+], GdsRadio.prototype, "errorMessage", 2);
 __decorateClass([
   state()
 ], GdsRadio.prototype, "_isFocused", 2);

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.6.4";
+    this.semanticVersion = "2.6.5";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

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

@@ -7,6 +7,7 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     indeterminate?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     connectedCallback?: (() => void) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
@@ -382,7 +383,6 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     nonce?: string | undefined;
     tabIndex?: number | undefined;
     blur?: (() => void) | undefined;
-    focus?: ((options?: FocusOptions) => void) | undefined;
 }, "children"> & {
     children?: import("react").ReactNode;
 } & Omit<import("react").HTMLAttributes<HTMLElement>, "children"> & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;

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

@@ -7,6 +7,7 @@ export declare const GdsRadio: (props: React.ComponentProps<ReturnType<typeof ge
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
     invalid?: boolean | undefined;
+    errorMessage?: string | undefined;
     connectedCallback?: (() => void) | undefined;
     updated?: ((changedProperties: Map<string, unknown>) => void) | undefined;
     render?: (() => any) | 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": "2.6.4",
+  "version": "2.6.5",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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

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