@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

package/components/Radio/index.umd.js

@@ -4234,6 +4234,59 @@
       });
   }
 
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  // Note, in the future, we may extend this decorator to support the use case
+  // where the queried element may need to do work to become ready to interact
+  // with (e.g. load some implementation code). If so, we might elect to
+  // add a second argument defining a function that can be run to make the
+  // queried element loaded/updated/ready.
+  /**
+   * A property decorator that converts a class property into a getter that
+   * returns a promise that resolves to the result of a querySelector on the
+   * element's renderRoot done after the element's `updateComplete` promise
+   * resolves. When the queried property may change with element state, this
+   * decorator can be used instead of requiring users to await the
+   * `updateComplete` before accessing the property.
+   *
+   * @param selector A DOMString containing one or more selectors to match.
+   *
+   * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
+   *
+   * ```ts
+   * class MyElement {
+   *   @queryAsync('#first')
+   *   first: Promise<HTMLDivElement>;
+   *
+   *   render() {
+   *     return html`
+   *       <div id="first"></div>
+   *       <div id="second"></div>
+   *     `;
+   *   }
+   * }
+   *
+   * // external usage
+   * async doSomethingWithFirst() {
+   *  (await aMyElement.first).doSomething();
+   * }
+   * ```
+   * @category Decorator
+   */
+  function queryAsync(selector) {
+      return ((obj, name) => {
+          return desc(obj, name, {
+              async get() {
+                  await this.updateComplete;
+                  return this.renderRoot?.querySelector(selector) ?? null;
+              },
+          });
+      });
+  }
+
   /**
    * @license
    * Copyright 2021 Google LLC
@@ -4429,7 +4482,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$6 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4447,9 +4500,11 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$5];
+  SgdsElement.styles = [css_248z$6];
 
-  function genId (componentName = "", elementName = "") {
+  var css_248z$5 = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+
+  function generateId (componentName = "", elementName = "") {
       return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
   }
 
@@ -4492,8 +4547,6 @@
 
   var css_248z$4 = css`:host{outline:0}input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:50%;height:var(--sgds-form-height-sm);width:var(--sgds-form-height-sm)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-default-border-color-transparent)}.form-check-input:not([disabled]):not(.is-invalid):checked:focus-visible,.form-check-input:not([disabled]):not(.is-invalid):checked:hover,.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-bg-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
-  var css_248z$3 = css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
-
   /**
    * @summary Radio allows the user to select one option from a set while seeing all available options.
    *
@@ -4513,7 +4566,7 @@
           this.disabled = false;
           /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
           this.invalid = false;
-          this.radioId = genId("radio");
+          this.radioId = generateId("radio");
       }
       connectedCallback() {
           super.connectedCallback();
@@ -4578,7 +4631,7 @@
     `;
       }
   }
-  SgdsRadio.styles = [...SgdsElement.styles, css_248z$3, css_248z$4];
+  SgdsRadio.styles = [...SgdsElement.styles, css_248z$5, css_248z$4];
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsRadio.prototype, "checked", void 0);
@@ -4601,141 +4654,383 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsRadio.prototype, "handleDisabledChange", null);
 
-  const reportValidityOverloads = new WeakMap();
-  class FormSubmitController {
+  /**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  window.ShadyDOM?.inUse &&
+      window.ShadyDOM?.noPatch === true
+      ? window.ShadyDOM.wrap
+      : (node) => node;
+  /**
+   * Tests whether a part has only a single-expression with no strings to
+   * interpolate between.
+   *
+   * Only AttributePart and PropertyPart can have multiple expressions.
+   * Multi-expression parts have a `strings` property and single-expression
+   * parts do not.
+   */
+  const isSingleExpression = (part) => part.strings === undefined;
+  // A sentinel value that can never appear as a part value except when set by
+  // live(). Used to force a dirty-check to fail and cause a re-render.
+  const RESET_VALUE = {};
+  /**
+   * Sets the committed value of a ChildPart directly without triggering the
+   * commit stage of the part.
+   *
+   * This is useful in cases where a directive needs to update the part such
+   * that the next update detects a value change or not. When value is omitted,
+   * the next update will be guaranteed to be detected as a change.
+   *
+   * @param part
+   * @param value
+   */
+  const setCommittedValue = (part, value = RESET_VALUE) => (part._$committedValue = value);
+
+  /**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  class LiveDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          if (!(partInfo.type === PartType.PROPERTY ||
+              partInfo.type === PartType.ATTRIBUTE ||
+              partInfo.type === PartType.BOOLEAN_ATTRIBUTE)) {
+              throw new Error('The `live` directive is not allowed on child or event bindings');
+          }
+          if (!isSingleExpression(partInfo)) {
+              throw new Error('`live` bindings can only contain a single expression');
+          }
+      }
+      render(value) {
+          return value;
+      }
+      update(part, [value]) {
+          if (value === noChange || value === nothing) {
+              return value;
+          }
+          const element = part.element;
+          const name = part.name;
+          if (part.type === PartType.PROPERTY) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              if (value === element[name]) {
+                  return noChange;
+              }
+          }
+          else if (part.type === PartType.BOOLEAN_ATTRIBUTE) {
+              if (!!value === element.hasAttribute(name)) {
+                  return noChange;
+              }
+          }
+          else if (part.type === PartType.ATTRIBUTE) {
+              if (element.getAttribute(name) === String(value)) {
+                  return noChange;
+              }
+          }
+          // Resets the part's value, causing its dirty-check to fail so that it
+          // always sets the value.
+          setCommittedValue(part);
+          return value;
+      }
+  }
+  /**
+   * Checks binding values against live DOM values, instead of previously bound
+   * values, when determining whether to update the value.
+   *
+   * This is useful for cases where the DOM value may change from outside of
+   * lit-html, such as with a binding to an `<input>` element's `value` property,
+   * a content editable elements text, or to a custom element that changes it's
+   * own properties or attributes.
+   *
+   * In these cases if the DOM value changes, but the value set through lit-html
+   * bindings hasn't, lit-html won't know to update the DOM value and will leave
+   * it alone. If this is not what you want--if you want to overwrite the DOM
+   * value with the bound value no matter what--use the `live()` directive:
+   *
+   * ```js
+   * html`<input .value=${live(x)}>`
+   * ```
+   *
+   * `live()` performs a strict equality check against the live DOM value, and if
+   * the new value is equal to the live value, does nothing. This means that
+   * `live()` should not be used when the binding will cause a type conversion. If
+   * you use `live()` with an attribute binding, make sure that only strings are
+   * passed in, or the binding will update every render.
+   */
+  const live = directive(LiveDirective);
+
+  var css_248z$3 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
+
+  var css_248z$2 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
+
+  var css_248z$1 = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-heading)}`;
+
+  class FormControlElement extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The input's label  */
+          this.label = "";
+          /** The input's hint text */
+          this.hintText = "";
+          /** Disables the input. */
+          this.disabled = false;
+          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+          this.invalid = false;
+          this._controlId = generateId("input");
+          this._labelId = generateId("label");
+      }
+      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+      setInvalid(bool) {
+          this.invalid = bool;
+          if (bool) {
+              this.emit("sgds-invalid");
+          }
+          else {
+              this.emit("sgds-valid");
+          }
+      }
+  }
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$3, css_248z$2, css_248z$5, css_248z$1];
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "label", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "hintText", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "name", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "invalid", void 0);
+
+  /**
+   * SGDS custom form validation methods and behaviours
+   */
+  class InputValidationController {
       constructor(host, options) {
           (this.host = host).addController(this);
-          this.options = Object.assign({ form: (input) => {
-                  return input.closest("form");
-              }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => input.disabled, reportValidity: (input) => {
-                  return typeof input.reportValidity === "function" ? input.reportValidity() : true;
-              }, setValue: (input, value) => {
-                  input.value = value;
-              } }, options);
-          this.handleFormData = this.handleFormData.bind(this);
-          this.handleFormSubmit = this.handleFormSubmit.bind(this);
-          this.handleFormReset = this.handleFormReset.bind(this);
-          this.reportFormValidity = this.reportFormValidity.bind(this);
+          this._internals = this.host.attachInternals();
+          this.options = Object.assign({ setInvalid: (host, value) => {
+                  host.invalid = value;
+              }, value: (host) => {
+                  return host.value;
+              }, input: (host) => host.input }, options);
       }
       hostConnected() {
-          this.form = this.options.form(this.host);
-          if (this.form) {
-              this.form.addEventListener("formdata", this.handleFormData);
-              this.form.addEventListener("submit", this.handleFormSubmit);
-              this.form.addEventListener("reset", this.handleFormReset);
-              // Overload the form's reportValidity() method so it looks at Shoelace form controls
-              if (!reportValidityOverloads.has(this.form)) {
-                  reportValidityOverloads.set(this.form, this.form.reportValidity);
-                  this.form.reportValidity = () => this.reportFormValidity();
-              }
-          }
+          this.host.addEventListener("invalid", e => this.handleInvalid(e));
       }
       hostDisconnected() {
-          if (this.form) {
-              this.form.removeEventListener("formdata", this.handleFormData);
-              this.form.removeEventListener("submit", this.handleFormSubmit);
-              this.form.removeEventListener("reset", this.handleFormReset);
-              // Remove the overload and restore the original method
-              if (reportValidityOverloads.has(this.form)) {
-                  this.form.reportValidity = reportValidityOverloads.get(this.form);
-                  reportValidityOverloads.delete(this.form);
-              }
-              this.form = undefined;
-          }
+          this.host.removeEventListener("invalid", e => this.handleInvalid(e));
+      }
+      /**
+       * Prevents the native browser error message pop up when reportValidity() called by
+       * associated form or the component's reportValidity during constraint validation
+       * Sets invalid reactive prop to true
+       */
+      handleInvalid(e) {
+          e.preventDefault();
+          this.options.setInvalid(this.host, true);
+      }
+      /**
+       * Sets invalid to false when invoked and
+       * Updates the ValidityState based on new value, but
+       * does not update invalid reactive prop
+       * @param e
+       */
+      handleInput(e) {
+          const input = e.target;
+          this.options.setInvalid(this.host, false);
+          this.validateInput(input);
+      }
+      /**
+       * Validate the input's new value after onChange and
+       * update invalid reactive prop
+       * @param e
+       */
+      handleChange(e) {
+          const input = e.target;
+          this.validateInput(input);
+          this.options.setInvalid(this.host, !this.checkValidity());
+      }
+      get form() {
+          return this._internals.form;
+      }
+      get validity() {
+          return this._internals.validity;
+      }
+      get validationMessage() {
+          return this._internals.validationMessage;
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
+      get willValidate() {
+          return this._internals.willValidate;
+      }
+      /**
+       * Checks the validity and updates the invalid reactive prop of form components
+       */
+      updateInvalidState() {
+          this.options.setInvalid(this.host, !this.checkValidity());
+      }
+      /**
+       * Resets the ValidityState of the control
+       */
+      resetValidity() {
+          return this._internals.setValidity({});
+      }
+      /**
+       * Reports the validity
+       */
+      checkValidity() {
+          return this._internals.checkValidity();
+      }
+      /**
+       * Reports the validity with a error popup message
+       */
+      reportValidity() {
+          return this._internals.reportValidity();
+      }
+      /**
+       * Sets the form control value into FormData,
+       * making the value of control accessible via FormData
+       */
+      setFormValue() {
           const value = this.options.value(this.host);
-          if (!disabled && typeof name === "string" && typeof value !== "undefined") {
-              if (Array.isArray(value)) {
-                  value.forEach(val => {
-                      event.formData.append(name, val.toString());
-                  });
-              }
-              else {
-                  event.formData.append(name, value.toString());
-              }
-          }
+          this._internals.setFormValue(value);
       }
-      handleFormSubmit(event) {
-          const disabled = this.options.disabled(this.host);
-          const reportValidity = this.options.reportValidity;
-          if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
-              event.preventDefault();
-              event.stopImmediatePropagation();
-          }
-      }
-      handleFormReset() {
-          this.options.setValue(this.host, this.options.defaultValue(this.host));
-      }
-      reportFormValidity() {
-          //
-          // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
-          // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
-          // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
-          // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
-          //
-          // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
-          // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
-          // be necessary once we can use ElementInternals.
-          //
-          // Note that we're also honoring the form's novalidate attribute.
-          //
-          if (this.form && !this.form.noValidate) {
-              // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
-              // elements that support the constraint validation API.
-              const elements = this.form.querySelectorAll("*");
-              for (const element of elements) {
-                  if (typeof element.reportValidity === "function") {
-                      if (!element.reportValidity()) {
-                          return false;
-                      }
+      /**
+       * Updates the ValidityState of the input in form component at current state
+       */
+      validateInput(input) {
+          /** When the form control is disabled, its always valid */
+          if (this.options.input(this.host).disabled) {
+              return this._internals.setValidity({});
+          }
+          // get the validity of the internal <input>
+          const validState = input.validity;
+          // if the input is invalid, show the correct error
+          if (!validState.valid) {
+              // loop through the error reasons
+              for (const state in validState) {
+                  // if there is an error and corresponding attribute holding
+                  // the message
+                  if (validState[state]) {
+                      this.validationError = state.toString();
+                      // set the validity error reason and the corresponding
+                      // message
+                      this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);
                   }
               }
           }
-          return true;
-      }
-      doAction(type, invoker) {
-          if (this.form) {
-              const button = document.createElement("button");
-              button.type = type;
-              button.style.position = "absolute";
-              button.style.width = "0";
-              button.style.height = "0";
-              button.style.clipPath = "inset(50%)";
-              button.style.overflow = "hidden";
-              button.style.whiteSpace = "nowrap";
-              // Pass form attributes through to the temporary button
-              if (invoker) {
-                  ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
-                      if (invoker.hasAttribute(attr)) {
-                          button.setAttribute(attr, invoker.getAttribute(attr));
-                      }
-                  });
-              }
-              this.form.append(button);
-              button.click();
-              button.remove();
+          else {
+              this._internals.setValidity({});
           }
       }
-      /** Resets the form, restoring all the control to their default value */
-      reset(invoker) {
-          this.doAction("reset", invoker);
-      }
-      /** Submits the form, triggering validation and form data injection. */
-      submit(invoker) {
-          // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
-          // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
-          this.doAction("submit", invoker);
-      }
   }
 
-  var css_248z$2 = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
-
-  var css_248z$1 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
+  /**
+   * @summary The FormValidationMixin used by the form components
+   * @param superClass
+   * @returns
+   */
+  const SgdsFormValidatorMixin = (superClass) => {
+      class ToBeValidatedElement extends superClass {
+          constructor() {
+              super(...arguments);
+              this._isTouched = false;
+          }
+          connectedCallback() {
+              super.connectedCallback();
+              this.inputValidationController = new InputValidationController(this);
+          }
+          async firstUpdated(changedProperties) {
+              super.firstUpdated(changedProperties);
+              /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+              this.input =
+                  this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+              this._mixinValidate(this.input);
+          }
+          /**
+           * Native lifecycle of Form-Associated Custom Element Callbacks
+           */
+          formResetCallback() {
+              if (this._mixinResetFormControl) {
+                  this._mixinResetFormControl();
+              }
+              else {
+                  this.value = this.defaultValue;
+                  this._mixinResetValidity(this.input);
+              }
+              this._mixinSetFormValue();
+          }
+          /**
+           *
+           * Methods use by classes using this mixin
+           */
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run change handler
+           */
+          _mixinHandleChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleChange(e);
+          }
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run input handler
+           */
+          _mixinHandleInputChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleInput(e);
+          }
+          /**
+           * During form resetting,
+           * 1. ValidityState is reset
+           * 2. invalid reactive prop is updated after the reset
+           * 3. Revalidates the ValidityState (but do not update invalid prop)
+           * to prepare for the next validity check
+           * 4. Reset touched state to false for a pristine form
+           */
+          _mixinResetValidity(input) {
+              this.inputValidationController.resetValidity();
+              this.inputValidationController.updateInvalidState();
+              this.inputValidationController.validateInput(input);
+              this._isTouched ? (this._isTouched = false) : null;
+          }
+          _mixinValidate(input) {
+              this.inputValidationController.validateInput(input);
+          }
+          _mixinSetFormValue() {
+              this.inputValidationController.setFormValue();
+          }
+          _mixinCheckValidity() {
+              return this.inputValidationController.checkValidity();
+          }
+          _mixinReportValidity() {
+              return this.inputValidationController.reportValidity();
+          }
+          _mixinGetValidity() {
+              return this.inputValidationController.validity;
+          }
+          _mixinGetValidationMessage() {
+              return this.inputValidationController.validationMessage;
+          }
+      }
+      ToBeValidatedElement.formAssociated = true;
+      __decorate([
+          queryAsync("sgds-input")
+      ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+      return ToBeValidatedElement;
+  };
 
-  var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z = css`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
 
   /**
    * @summary RadioGroup group multiple radios so they function as a single form control.
@@ -4746,43 +5041,46 @@
    *
    *
    */
-  class SgdsRadioGroup extends SgdsElement {
+  class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
           /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              defaultValue: (control) => control.defaultValue
-          });
-          /**@internal */
           this.defaultValue = "";
-          /**@internal */
-          this.customErrorMessage = "";
-          /** The radio group's label  */
-          this.label = "";
-          /**  This will be true when the control is in an invalid state. */
-          this.invalid = false;
           /** The selected value of the control. */
           this.value = "";
-          /** The name assigned to the radio controls. */
-          this.name = "option";
-          /** Ensures a child radio is checked before allowing the containing form to submit. */
-          this.required = false;
           /**Feedback text for error state when validated */
           this.invalidFeedback = "";
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
-          /** The radio group's hint text */
-          this.hintText = "";
+          /** Makes the input as a required field. */
+          this.required = false;
+          this._isTouched = false;
       }
       _handleValueChange() {
           this.emit("sgds-change", { detail: { value: this.value } });
           this._updateCheckedRadio();
       }
+      _handleInvalidChange() {
+          this._radios.forEach(r => (r.invalid = this.invalid));
+      }
+      /**
+       * radio requries a custom _mixinResetFormControl as the update of input value
+       * requires to fire a reset event manually
+       * */
+      _mixinResetFormControl() {
+          this.value = this.input.value = this.defaultValue;
+          this._updateInputValue("reset");
+          this._mixinResetValidity(this.input);
+      }
       connectedCallback() {
           super.connectedCallback();
           this.defaultValue = this.value;
+          this.addEventListener("sgds-blur", () => {
+              this._isTouched = true;
+          });
       }
-      firstUpdated() {
+      firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
           const radios = this._radios;
           radios.forEach((item, index) => {
               if (radios.length > 1) {
@@ -4798,33 +5096,9 @@
                   }
               }
           });
-      }
-      /** Gets and return the ValidityState object.  */
-      get validity() {
-          const hasMissingData = !((this.value && this.required) || !this.required);
-          const hasCustomError = this.customErrorMessage !== "";
-          return {
-              badInput: false,
-              customError: hasCustomError,
-              patternMismatch: false,
-              rangeOverflow: false,
-              rangeUnderflow: false,
-              stepMismatch: false,
-              tooLong: false,
-              tooShort: false,
-              typeMismatch: false,
-              valid: hasMissingData ? false : true,
-              valueMissing: !hasMissingData
-          };
-      }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          const validity = this.validity;
-          this.invalid = !validity.valid;
-          if (!validity.valid) {
-              this._showNativeErrorMessage();
+          if (this.value) {
+              this._updateInputValue("change");
           }
-          return !this.invalid;
       }
       _handleRadioClick(event) {
           event.preventDefault();
@@ -4833,11 +5107,20 @@
               return;
           }
           this.value = target.value;
+          this._updateInputValue();
           const radios = this._radios;
           radios.forEach(radio => {
               return (radio.checked = radio === target);
           });
       }
+      /**
+       * when input value is set programatically, need to manually dispatch a change event
+       * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input
+       */
+      _updateInputValue(eventName = "change") {
+          this.input.value = this.value;
+          this.input.dispatchEvent(new InputEvent(eventName));
+      }
       _handleKeyDown(event) {
           var _a;
           if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
@@ -4859,6 +5142,7 @@
               radio.tabIndex = -1;
           });
           this.value = radios[index].value;
+          this._updateInputValue();
           radios[index].checked = true;
           radios[index].tabIndex = 0;
           // preventDefault at the end to allow Tab
@@ -4867,29 +5151,61 @@
       _handleSlotChange() {
           const radios = this._radios;
           radios.forEach(radio => (radio.checked = radio.value === this.value));
+          this._disabledChildRadios();
           if (!radios.some(radio => radio.checked)) {
               if (radios[0])
                   radios[0].tabIndex = 0;
           }
       }
-      _handleInvalid(e) {
-          e.preventDefault();
-          this.invalid = true;
-          this._radios.forEach(radio => (radio.invalid = true));
-      }
-      _showNativeErrorMessage() {
-          this.input.reportValidity();
-      }
       _updateCheckedRadio() {
           const radios = this._radios;
           radios.forEach(radio => (radio.checked = radio.value === this.value));
-          this.invalid = !this.validity.valid;
-          this._radios.forEach(radio => (radio.invalid = this.invalid));
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
+      /**
+       * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
+       * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
+       */
+      reportValidity() {
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
+      }
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.input.checkValidity();
+          }
+      }
+      _handleDisabledChange() {
+          // Disabled form controls are always valid, so we need to recheck validity when the state changes
+          this.setInvalid(false);
+          this._disabledChildRadios();
+      }
+      _disabledChildRadios() {
+          if (this.disabled) {
+              const radios = this._radios;
+              radios.forEach(radio => (radio.disabled = this.disabled));
+          }
+      }
       render() {
           const defaultSlot = html `
       <slot
@@ -4921,7 +5237,8 @@
         })}"
           ?required=${this.required}
           tabindex="-1"
-          @invalid=${(e) => this._handleInvalid(e)}
+          @change=${(e) => super._mixinHandleChange(e)}
+          .value=${live(this.value)}
         />
         ${this.invalid && this.hasFeedback
             ? html `
@@ -4932,7 +5249,9 @@
                     fill="#B90000"
                   />
                 </svg>
-                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="radio-group-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -4940,34 +5259,16 @@
     `;
       }
   }
-  SgdsRadioGroup.styles = [...SgdsElement.styles, css_248z$1, css_248z$3, css_248z$2, css_248z];
+  SgdsRadioGroup.styles = [...FormControlElement.styles, css_248z];
   __decorate([
       query("slot:not([name])")
   ], SgdsRadioGroup.prototype, "defaultSlot", void 0);
-  __decorate([
-      query(".radio-group-validation-input")
-  ], SgdsRadioGroup.prototype, "input", void 0);
   __decorate([
       state()
   ], SgdsRadioGroup.prototype, "defaultValue", void 0);
-  __decorate([
-      state()
-  ], SgdsRadioGroup.prototype, "customErrorMessage", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "label", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsRadioGroup.prototype, "invalid", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsRadioGroup.prototype, "value", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "name", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsRadioGroup.prototype, "required", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsRadioGroup.prototype, "invalidFeedback", void 0);
@@ -4975,14 +5276,26 @@
       property({ type: Boolean, reflect: true })
   ], SgdsRadioGroup.prototype, "hasFeedback", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsRadioGroup.prototype, "hintText", void 0);
+      property({ type: Boolean, reflect: true })
+  ], SgdsRadioGroup.prototype, "required", void 0);
   __decorate([
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsRadioGroup.prototype, "_handleValueChange", null);
+  __decorate([
+      watch("invalid", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleInvalidChange", null);
+  __decorate([
+      state()
+  ], SgdsRadioGroup.prototype, "_isTouched", void 0);
   __decorate([
       queryAssignedElements()
   ], SgdsRadioGroup.prototype, "_radios", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleIsTouched", null);
+  __decorate([
+      watch("disabled", { waitUntilFirstUpdate: true })
+  ], SgdsRadioGroup.prototype, "_handleDisabledChange", null);
 
   customElements.define("sgds-radio", SgdsRadio);
   customElements.define("sgds-radio-group", SgdsRadioGroup);