@sebgroup/green-core 1.88.5 → 1.88.6

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

@@ -1,4 +1,5 @@
 import { GdsElement } from '../../gds-element';
+import './form-request-submit-polyfill';
 export interface GdsValidator {
     /**
      * Validate the form control element. Should return the validity state and an optional validation message.
@@ -19,6 +20,7 @@ export declare abstract class GdsFormControlElement<ValueT = any> extends GdsEle
     #private;
     static formAssociated: boolean;
     constructor();
+    connectedCallback(): void;
     /**
      * A validator that can be used to validate the form control and set an error message.
      */

package/components/form/form-control.js

@@ -8,6 +8,7 @@ var _internals;
 import { property } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { watch } from "../../utils/decorators/index.js";
+import "./form-request-submit-polyfill";
 class GdsFormControlElement extends GdsElement {
   constructor() {
     super();
@@ -23,7 +24,7 @@ class GdsFormControlElement extends GdsElement {
       __privateSet(this, _internals, {
         form: this.closest("form"),
         setFormValue: (value) => {
-          this.value = value;
+          this._internalValue = value;
         },
         setValidity: (validity, validationMessage) => {
           ;
@@ -45,11 +46,21 @@ class GdsFormControlElement extends GdsElement {
           valid: true
         },
         willValidate: true,
-        checkValidity: () => true,
-        reportValidity: () => true
+        checkValidity: this.checkValidity.bind(this),
+        reportValidity: this.reportValidity.bind(this)
       });
     }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof this.attachInternals !== "function") {
+      const form = this.closest("form");
+      if (form) {
+        form.addEventListener("submit", this._handleFormSubmit.bind(this));
+        form.addEventListener("reset", this.formResetCallback.bind(this));
+      }
+    }
+  }
   set invalid(value) {
     const oldValue = this.invalid;
     __privateGet(this, _internals).setValidity(

package/components/form/form-request-submit-polyfill.js

@@ -0,0 +1,33 @@
+;
+(function(prototype) {
+  if (typeof prototype.requestSubmit == "function")
+    return;
+  prototype.requestSubmit = function(submitter = null) {
+    if (submitter) {
+      validateSubmitter(submitter, this);
+      submitter.click();
+    } else {
+      submitter = document.createElement("input");
+      submitter.type = "submit";
+      submitter.hidden = true;
+      this.appendChild(submitter);
+      submitter.click();
+      this.removeChild(submitter);
+    }
+  };
+  function validateSubmitter(submitter, form) {
+    submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+    submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
+    submitter.form == form || raise(
+      DOMException,
+      "The specified element is not owned by this form element",
+      "NotFoundError"
+    );
+  }
+  function raise(errorConstructor, message, name = "Error") {
+    throw new errorConstructor(
+      "Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".",
+      name
+    );
+  }
+})(HTMLFormElement.prototype);

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

@@ -8,6 +8,7 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     disabled?: boolean | undefined;
     value?: string | undefined;
     render?: (() => any) | undefined;
+    connectedCallback?: (() => void) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
     errorMessage?: string | undefined;
@@ -22,7 +23,6 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
     dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | undefined;

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

@@ -8,6 +8,7 @@ export declare const GdsFilterChips: (props: React.ComponentProps<ReturnType<typ
     rowCollapse?: boolean | undefined;
     render?: (() => any) | undefined;
     focus?: ((options?: FocusOptions) => void) | undefined;
+    connectedCallback?: (() => void) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
     errorMessage?: string | undefined;
@@ -23,7 +24,6 @@ export declare const GdsFilterChips: (props: React.ComponentProps<ReturnType<typ
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
     dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | undefined;

package/generated/react/index.d.ts

@@ -10,9 +10,9 @@ 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';
 export * from './dialog/index.js';
 export * from './div/index.js';
+export * from './details/index.js';
 export * from './divider/index.js';
 export * from './dropdown/index.js';
 export * from './fab/index.js';
@@ -20,11 +20,11 @@ export * from './filter-chips/index.js';
 export * from './flex/index.js';
 export * from './form-summary/index.js';
 export * from './grid/index.js';
+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 './input/index.js';
-export * from './grouped-list/index.js';
-export * from './list-item/index.js';
 export * from './link/index.js';
 export * from './mask/index.js';
 export * from './menu-button/index.js';
@@ -35,9 +35,9 @@ export * from './rich-text/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './signal/index.js';
+export * from './spacer/index.js';
 export * from './spinner/index.js';
 export * from './text/index.js';
-export * from './spacer/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './video/index.js';
@@ -54,8 +54,8 @@ 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 './sensitive-date/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';

package/generated/react/index.js

@@ -10,9 +10,9 @@ 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";
 export * from "./dialog/index.js";
 export * from "./div/index.js";
+export * from "./details/index.js";
 export * from "./divider/index.js";
 export * from "./dropdown/index.js";
 export * from "./fab/index.js";
@@ -20,11 +20,11 @@ export * from "./filter-chips/index.js";
 export * from "./flex/index.js";
 export * from "./form-summary/index.js";
 export * from "./grid/index.js";
+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 "./input/index.js";
-export * from "./grouped-list/index.js";
-export * from "./list-item/index.js";
 export * from "./link/index.js";
 export * from "./mask/index.js";
 export * from "./menu-button/index.js";
@@ -35,9 +35,9 @@ export * from "./rich-text/index.js";
 export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
+export * from "./spacer/index.js";
 export * from "./spinner/index.js";
 export * from "./text/index.js";
-export * from "./spacer/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";
@@ -54,8 +54,8 @@ 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 "./sensitive-date/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";

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

@@ -39,6 +39,7 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     focus?: ((options?: FocusOptions) => void) | undefined;
     render?: (() => any) | undefined;
     _getValidityAnchor?: (() => HTMLInputElement) | undefined;
+    connectedCallback?: (() => void) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
     errorMessage?: string | undefined;
@@ -56,7 +57,6 @@ export declare const GdsInput: (props: React.ComponentProps<ReturnType<typeof ge
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
     dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | 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.88.5",
+  "version": "1.88.6",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -93,6 +93,7 @@
     "./components/form-summary/index.js",
     "./components/form-summary/summary.js",
     "./components/form/form-control.js",
+    "./components/form/form-request-submit-polyfill.js",
     "./components/form/index.js",
     "./components/formatted-text/account/account-formatter.js",
     "./components/formatted-text/account/formatted-account.js",

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

@@ -9,23 +9,21 @@ const styles = css`
       align-items: center;
       line-height: var(--gds-sys-text-line-height-detail-m);
       color: var(--gds-sys-color-l2-content-primary);
+    }
 
-      & > div {
-        display: flex;
-        flex-direction: column;
-      }
+    #label-row > div {
+      display: flex;
+      flex-direction: column;
     }
 
     ::slotted(label) {
       font-weight: var(--gds-sys-text-weight-book);
     }
 
-    :host(.size-small) {
-      & slot[name='supporting-text'],
-      & ::slotted(label) {
-        font-size: var(--gds-sys-text-size-detail-s);
-        line-height: var(--gds-sys-text-line-height-detail-s);
-      }
+    :host(.size-small) slot[name='supporting-text'],
+    :host(.size-small) ::slotted(label) {
+      font-size: var(--gds-sys-text-size-detail-s);
+      line-height: var(--gds-sys-text-line-height-detail-s);
     }
 
     #extended-supporting-text {
@@ -39,20 +37,20 @@ const styles = css`
       background-color: var(--gds-sys-color-l3-background-secondary);
       color: var(--gds-sys-color-l3-content-tertiary);
       max-height: var(--_max-height);
+    }
 
-      &[aria-hidden='false'] {
-        margin: var(--gds-sys-space-2xs) 0 0 0;
-        padding: var(--gds-sys-space-s) var(--gds-sys-space-m);
-      }
+    #extended-supporting-text[aria-hidden='false'] {
+      margin: var(--gds-sys-space-2xs) 0 0 0;
+      padding: var(--gds-sys-space-s) var(--gds-sys-space-m);
+    }
 
-      &[aria-hidden='true'] {
-        max-height: 0;
-        opacity: 0;
-        translate: 0 2px;
-        padding: 0 var(--gds-sys-space-m);
-        margin: 0;
-        overflow: hidden;
-      }
+    #extended-supporting-text[aria-hidden='true'] {
+      max-height: 0;
+      opacity: 0;
+      translate: 0 2px;
+      padding: 0 var(--gds-sys-space-m);
+      margin: 0;
+      overflow: hidden;
     }
   }
 `;

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