@sebgroup/green-core 1.85.4 → 1.86.0

package/components/button/button.component.d.ts

@@ -53,6 +53,7 @@ declare class Button extends GdsFormControlElement<any> {
     private _mainSlot?;
     private _button?;
     connectedCallback(): void;
+    focus(options?: FocusOptions): void;
     render(): import("lit-html").TemplateResult;
     protected _getValidityAnchor(): HTMLElement;
     private _attributeChanged;

package/components/button/button.component.js

@@ -68,6 +68,9 @@ class Button extends GdsFormControlElement {
     this.setAttribute("role", "none");
     TransitionalStyles.instance.apply(this, "gds-button");
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   render() {
     const buttonClasses = {
       button: true,

package/components/datepicker/datepicker.component.d.ts

@@ -112,6 +112,7 @@ declare class Datepicker extends GdsFormControlElement<Date> {
     private _elField;
     constructor();
     connectedCallback(): void;
+    focus(options?: FocusOptions): void;
     render(): any;
     protected _getValidityAnchor(): HTMLElement;
     private _handleValueChange;

package/components/datepicker/datepicker.component.js

@@ -282,6 +282,9 @@ let Datepicker = class extends GdsFormControlElement {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-datepicker");
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   render() {
     return html`
       ${when(

package/components/filter-chips/filter-chips.component.d.ts

@@ -41,6 +41,7 @@ export declare class GdsFilterChips<ValueT = any> extends GdsFormControlElement<
     private _collapsed;
     private _elSlot;
     render(): any;
+    focus(options?: FocusOptions): void;
     protected _getValidityAnchor(): HTMLElement;
     private _handleResize;
     private _updateSelectedFromValue;

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

@@ -83,8 +83,11 @@ let GdsFilterChips = class extends GdsFormControlElement {
       ></slot>
     </div>`;
   }
+  focus(options) {
+    this.chips[0]?.focus(options);
+  }
   _getValidityAnchor() {
-    return this;
+    return this.shadowRoot?.querySelector("div");
   }
   _handleResize() {
     if (!this.rowCollapse)

package/components/form/form-control.d.ts

@@ -67,9 +67,10 @@ export declare abstract class GdsFormControlElement<ValueT = any> extends GdsEle
     protected formResetCallback(): void;
     protected formAssociatedCallback(form?: HTMLFormElement): void;
     protected _handleFormSubmit(e: Event): void;
-    focus(options?: FocusOptions | undefined): void;
     /**
-     * This should return a reference to the HTML element that will recive the focus when the form control is invalid.
+     * This should return a reference to the HTML element that the browser will refer to when the form control is invalid.
+     * The reference is used when setting the validity state in ElementInternals.
+     * For reference: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setValidity#anchor
      */
     protected abstract _getValidityAnchor(): HTMLElement;
 }

package/components/form/form-control.js

@@ -140,10 +140,6 @@ 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);
-  }
 }
 _internals = new WeakMap();
 GdsFormControlElement.formAssociated = true;

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

@@ -79,6 +79,7 @@ declare class Input extends GdsFormControlElement<string> {
      */
     test_getFieldElement(): Element | null | undefined;
     constructor();
+    focus(options?: FocusOptions): void;
     render(): any;
     _getValidityAnchor(): HTMLInputElement;
 }

package/components/input/input.component.js

@@ -89,6 +89,9 @@ let Input = class extends GdsFormControlElement {
   test_getFieldElement() {
     return this.shadowRoot?.querySelector("#field");
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   render() {
     return html`
       ${when(

package/components/popover/popover.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _handleTriggerSlotChange, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _setupTriggerAttributes, setupTriggerAttributes_fn, _registerAutoPositioning, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside;
+var _handleTriggerSlotChange, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _setupTriggerAttributes, setupTriggerAttributes_fn, _registerAutoPositioning, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside, _handlePageScroll;
 import { localized, msg } from "@lit/localize";
 import { unsafeCSS } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -109,6 +109,11 @@ let GdsPopover = class extends GdsElement {
         }
       }
     });
+    __privateAdd(this, _handlePageScroll, () => {
+      if (this.open && __privateGet(this, _dispatchUiStateEvent).call(this, "close")) {
+        this.open = false;
+      }
+    });
   }
   _handleTriggerRefChanged() {
     this.triggerRef?.then((el) => {
@@ -158,6 +163,7 @@ let GdsPopover = class extends GdsElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
+    window.removeEventListener("scroll", __privateGet(this, _handlePageScroll));
   }
   render() {
     return html`<slot
@@ -211,12 +217,16 @@ let GdsPopover = class extends GdsElement {
           ),
           0
         );
+        window.addEventListener("scroll", __privateGet(this, _handlePageScroll), {
+          passive: true
+        });
       } else {
         this._elDialog?.close();
         clickOutsideTarget.removeEventListener(
           "click",
           __privateGet(this, _handleClickOutside)
         );
+        window.removeEventListener("scroll", __privateGet(this, _handlePageScroll));
         if (__privateGet(this, _backdropEl))
           __privateGet(this, _backdropEl).show = false;
       }
@@ -323,6 +333,7 @@ _handleTriggerKeyDown = new WeakMap();
 _handleTriggerClick = new WeakMap();
 _focusFirstSlottedChild = new WeakMap();
 _handleClickOutside = new WeakMap();
+_handlePageScroll = new WeakMap();
 GdsPopover.styles = unsafeCSS(styles);
 /**
  * The default set of middleware for Floating UI positioning used by GdsPopover.

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

@@ -30,6 +30,7 @@ declare class RadioGroup extends GdsFormControlElement<string> {
     private _isConnected;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    focus(options?: FocusOptions): void;
     protected _getValidityAnchor(): HTMLElement;
     private _handleValueChange;
     private _syncRadioStates;

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

@@ -62,6 +62,9 @@ let RadioGroup = class extends GdsFormControlElement {
     this._isConnected = false;
     this.removeEventListener("invalid", this._syncRadioStates);
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   _getValidityAnchor() {
     return this._contentElement;
   }

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

@@ -45,6 +45,7 @@ declare class Select<ValueT = string> extends GdsFormControlElement<ValueT | Val
     get multiple(): boolean;
     private _elSelectContainer?;
     connectedCallback(): void;
+    focus(options?: FocusOptions): void;
     render(): any;
     private _captureDOM;
     /**

package/components/select/select.component.js

@@ -110,6 +110,9 @@ let Select = class extends GdsFormControlElement {
       this._handleValueChange();
     });
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   render() {
     const CLASSES = {
       multiple: this.multiple

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

@@ -78,6 +78,7 @@ declare class Textarea extends GdsFormControlElement<string> {
      * Intended for use in integration tests.
      */
     test_getFieldElement(): Element | null | undefined;
+    focus(options?: FocusOptions): void;
     private _handleResize;
     private _handleSlotChange;
     constructor();

package/components/textarea/textarea.component.js

@@ -117,6 +117,9 @@ let Textarea = class extends GdsFormControlElement {
   test_getFieldElement() {
     return this.shadowRoot?.querySelector("#field");
   }
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
   _handleResize() {
     if (!this.fieldBase)
       return;

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

@@ -29,6 +29,7 @@ export declare const GdsButton: (props: React.ComponentProps<ReturnType<typeof g
     rel?: string | undefined;
     download?: string | undefined;
     connectedCallback?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => import("lit-html").TemplateResult) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
@@ -42,7 +43,6 @@ export declare const GdsButton: (props: React.ComponentProps<ReturnType<typeof g
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

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

@@ -20,7 +20,6 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
@@ -382,6 +381,7 @@ 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/datepicker/index.d.ts

@@ -40,6 +40,7 @@ export declare const GdsDatepicker: (props: React.ComponentProps<ReturnType<type
     test_todayButton?: HTMLButtonElement | undefined;
     test_getDateCell?: ((dayNumber: number) => Promise<Element | null | undefined>) | undefined;
     connectedCallback?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
@@ -54,7 +55,6 @@ export declare const GdsDatepicker: (props: React.ComponentProps<ReturnType<type
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

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

@@ -32,6 +32,7 @@ export declare const GdsFab: (props: React.ComponentProps<ReturnType<typeof getR
     target?: ("_self" | "_blank" | "_parent" | "_top") | undefined;
     rel?: string | undefined;
     download?: string | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => import("lit-html").TemplateResult) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
@@ -45,7 +46,6 @@ export declare const GdsFab: (props: React.ComponentProps<ReturnType<typeof getR
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

package/generated/react/filter-chips/index.d.ts

@@ -7,6 +7,7 @@ export declare const GdsFilterChips: (props: React.ComponentProps<ReturnType<typ
     readonly chips?: import("../../../components/filter-chips/filter-chips.component").GdsFilterChip<any>[] | undefined;
     rowCollapse?: boolean | undefined;
     render?: (() => any) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
     errorMessage?: string | undefined;
@@ -19,7 +20,6 @@ export declare const GdsFilterChips: (props: React.ComponentProps<ReturnType<typ
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

package/generated/react/index.d.ts

@@ -15,7 +15,6 @@ export * from './dialog/index.js';
 export * from './div/index.js';
 export * from './divider/index.js';
 export * from './dropdown/index.js';
-export * from './fab/index.js';
 export * from './filter-chips/index.js';
 export * from './flex/index.js';
 export * from './form-summary/index.js';
@@ -24,6 +23,7 @@ export * from './grouped-list/index.js';
 export * from './list-item/index.js';
 export * from './icons/icon/index.js';
 export * from './img/index.js';
+export * from './fab/index.js';
 export * from './input/index.js';
 export * from './link/index.js';
 export * from './mask/index.js';

package/generated/react/index.js

@@ -15,7 +15,6 @@ export * from "./dialog/index.js";
 export * from "./div/index.js";
 export * from "./divider/index.js";
 export * from "./dropdown/index.js";
-export * from "./fab/index.js";
 export * from "./filter-chips/index.js";
 export * from "./flex/index.js";
 export * from "./form-summary/index.js";
@@ -24,6 +23,7 @@ export * from "./grouped-list/index.js";
 export * from "./list-item/index.js";
 export * from "./icons/icon/index.js";
 export * from "./img/index.js";
+export * from "./fab/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./mask/index.js";

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

@@ -36,6 +36,7 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     inputmode?: ("none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url") | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     _getValidityAnchor?: (() => HTMLInputElement) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
@@ -52,7 +53,6 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

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

@@ -24,6 +24,7 @@ export declare const GdsRadioGroup: (props: React.ComponentProps<ReturnType<type
     readonly radios?: import("../../..").GdsRadio[] | undefined;
     connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
@@ -39,7 +40,6 @@ export declare const GdsRadioGroup: (props: React.ComponentProps<ReturnType<type
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

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

@@ -26,6 +26,7 @@ export declare const GdsSelect: (props: React.ComponentProps<ReturnType<typeof g
     readonly displayValue?: string | undefined;
     readonly multiple?: boolean | undefined;
     connectedCallback?: (() => void) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     formResetCallback?: (() => void) | undefined;
     _getValidityAnchor?: (() => HTMLElement) | undefined;
@@ -42,7 +43,6 @@ export declare const GdsSelect: (props: React.ComponentProps<ReturnType<typeof g
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;

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

@@ -35,6 +35,7 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     inputmode?: ("none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url") | undefined;
     test_getClearButton?: (() => import("../../..").GdsButton | null | undefined) | undefined;
     test_getFieldElement?: (() => Element | null | undefined) | undefined;
+    focus?: ((options?: FocusOptions) => void) | undefined;
     connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;
@@ -52,7 +53,6 @@ export declare const GdsTextarea: (props: React.ComponentProps<ReturnType<typeof
     readonly willValidate?: boolean | undefined;
     checkValidity?: (() => boolean) | undefined;
     reportValidity?: (() => boolean) | undefined;
-    focus?: ((options?: FocusOptions | undefined) => void) | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | 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": "1.85.4",
+  "version": "1.86.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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