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

package/components/Datepicker/index.umd.js

@@ -13949,7 +13949,7 @@
   }
   SgdsElement.styles = [css_248z$g];
 
-  function genId (componentName = "", elementName = "") {
+  function generateId (componentName = "", elementName = "") {
       return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
   }
 
@@ -13971,7 +13971,7 @@
           /** @internal */
           this.bsDropdown = null;
           /** @internal Unique id generated for the dropdown menu */
-          this.dropdownMenuId = genId("dropdown-menu", "div");
+          this.dropdownMenuId = generateId("dropdown-menu", "div");
           /** @internal Controls auto-flipping of menu */
           this.noFlip = false;
           /** @internal When true, aligns right edge of menu with right edge of button */
@@ -18769,9 +18769,9 @@
 
   var css_248z$d = 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$c = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z$c = 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$b = 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}`;
+  var css_248z$b = 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}`;
 
   var css_248z$a = 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)}`;
 
@@ -18784,15 +18784,20 @@
           this.hintText = "";
           /** Disables the input. */
           this.disabled = false;
-          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-          this.hasFeedback = false;
-          /**Feedback text for error state when validated */
-          this.invalidFeedback = "";
           /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
           this.invalid = false;
-          /** Makes the input a required field. */
-          this.required = false;
-          this.labelId = genId("label");
+          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$d, css_248z$c, css_248z$b, css_248z$a];
@@ -18808,24 +18813,249 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], FormControlElement.prototype, "disabled", void 0);
-  __decorate([
-      property()
-  ], FormControlElement.prototype, "min", void 0);
-  __decorate([
-      property()
-  ], FormControlElement.prototype, "max", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "hasFeedback", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormControlElement.prototype, "invalidFeedback", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], FormControlElement.prototype, "invalid", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormControlElement.prototype, "required", void 0);
+
+  // @defaultValue decorator
+  const defaultValue = (propertyName = "value") => (proto, key) => {
+      const ctor = proto.constructor;
+      const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+      ctor.prototype.attributeChangedCallback = function (name, old, value) {
+          var _a;
+          const options = ctor.getPropertyOptions(propertyName);
+          const attributeName = (typeof options.attribute === "string" ? options.attribute : propertyName).toLowerCase();
+          if (name === attributeName) {
+              const converter = options.converter || defaultConverter;
+              const fromAttribute = typeof converter === "function" ? converter : (_a = converter === null || converter === void 0 ? void 0 : converter.fromAttribute) !== null && _a !== void 0 ? _a : defaultConverter.fromAttribute;
+              const newValue = fromAttribute(value, options.type);
+              if (this[propertyName] !== newValue) {
+                  this[key] = newValue;
+              }
+          }
+          attributeChangedCallback.call(this, name, old, value);
+      };
+  };
+
+  /**
+   * SGDS custom form validation methods and behaviours
+   */
+  class InputValidationController {
+      constructor(host, options) {
+          (this.host = host).addController(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.host.addEventListener("invalid", e => this.handleInvalid(e));
+      }
+      hostDisconnected() {
+          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;
+      }
+      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);
+          this._internals.setFormValue(value);
+      }
+      /**
+       * 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);
+                  }
+              }
+          }
+          else {
+              this._internals.setValidity({});
+          }
+      }
+  }
+
+  /**
+   * @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$9 = css`:host{--sgds-spinner-bg:var(--sgds-primary-bg);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-color-emphasis)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner{animation:spinner .75s linear infinite;border-radius:50%;border-right:.25em solid var(--sgds-alternate-bg);border:.25em solid var(--sgds-alternate-bg);border-right-color:var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-label{font-size:var(--sgds-font-size-1)}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:1.5s}}
 
@@ -18872,156 +19102,6 @@
       property({ reflect: true, type: String })
   ], SgdsSpinner.prototype, "label", void 0);
 
-  // @defaultValue decorator
-  const defaultValue = (propertyName = "value") => (proto, key) => {
-      const ctor = proto.constructor;
-      const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
-      ctor.prototype.attributeChangedCallback = function (name, old, value) {
-          var _a;
-          const options = ctor.getPropertyOptions(propertyName);
-          const attributeName = (typeof options.attribute === "string" ? options.attribute : propertyName).toLowerCase();
-          if (name === attributeName) {
-              const converter = options.converter || defaultConverter;
-              const fromAttribute = typeof converter === "function" ? converter : (_a = converter === null || converter === void 0 ? void 0 : converter.fromAttribute) !== null && _a !== void 0 ? _a : defaultConverter.fromAttribute;
-              const newValue = fromAttribute(value, options.type);
-              if (this[propertyName] !== newValue) {
-                  this[key] = newValue;
-              }
-          }
-          attributeChangedCallback.call(this, name, old, value);
-      };
-  };
-
-  const reportValidityOverloads = new WeakMap();
-  class FormSubmitController {
-      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);
-      }
-      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();
-              }
-          }
-      }
-      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;
-          }
-      }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
-          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());
-              }
-          }
-      }
-      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;
-                      }
-                  }
-              }
-          }
-          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();
-          }
-      }
-      /** 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$7 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;min-width:var(--sgds-dimension-256);padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color);display:block;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-heading);outline:none;padding:0}.form-control-group>.form-control:focus{z-index:3}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group.readonly{border-color:var(--sgds-form-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control-group.disabled{background-color:var(--sgds-form-bg-muted)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-icon{align-items:center;display:flex;height:var(--sgds-form-icon-size-lg);justify-content:center;width:var(--sgds-form-icon-size-lg)}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle)}.form-control-group.quantity-toggle{padding:0}`;
 
   /**
@@ -19031,14 +19111,13 @@
    * @event sgds-input - Emitted when the control receives input and its value changes.
    * @event sgds-focus - Emitted when input is in focus.
    * @event sgds-blur - Emitted when input is not in focus.
+   * @event sgds-invalid - Emitted when input is invalid
+   * @event sgds-valid - Emitted when input is valid
    *
    */
-  class SgdsInput extends FormControlElement {
+  class SgdsInput extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this);
-          /** The type of input which works the same as HTMLInputElement */
           this.type = "text";
           /** The input's placeholder text. */
           this.placeholder = "placeholder";
@@ -19046,16 +19125,17 @@
           this.autofocus = false;
           /** Makes the input readonly. */
           this.readonly = false;
-          /**The input's value attribute. */
-          this.value = "";
           /**Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
           this.defaultValue = "";
           /** Marks the component as valid. */
           this.valid = false;
           /** Marks the component as loading. */
           this.loading = false;
-          /**@internal */
-          this.inputId = genId("input", this.type);
+          /** Makes the input a required field. */
+          this.required = false;
+          /**The input's value attribute. */
+          this.value = "";
+          this._isTouched = false;
       }
       /**@internal */
       static get scopedElements() {
@@ -19071,60 +19151,79 @@
       blur() {
           this.input.blur();
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          return this.input.reportValidity();
-      }
-      /** Sets a custom validation message. Pass an empty string to restore validity */
-      setCustomValidity(err) {
-          return this.input.setCustomValidity(err);
-      }
       /** 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");
+          }
       }
-      _handleClick() {
-          this.focus();
+      /**
+       * 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();
       }
-      _handleChange(event) {
-          this.value = this.input.value;
-          this.emit(event);
+      /**
+       * 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();
       }
       _handleFocus() {
           this.emit("sgds-focus");
       }
       _handleBlur() {
+          this._isTouched = true;
           this.emit("sgds-blur");
       }
-      _handleKeyDown(event) {
-          const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-          // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before
-          // submitting to allow users to cancel the keydown event if they need to
-          if (event.key === "Enter" && !hasModifier) {
-              setTimeout(() => {
-                  // Prevent submission when enter is click on a submission in an Input Method Editor with isComposing
-                  if (!event.defaultPrevented && !event.isComposing) {
-                      this.formSubmitController.submit();
-                  }
-              });
+      _handleClick() {
+          this.focus();
+      }
+      _handleChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-change");
+          super._mixinHandleChange(e);
+      }
+      _handleInputChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-input");
+          super._mixinHandleInputChange(e);
+      }
+      /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.setInvalid(!this._mixinCheckValidity());
           }
       }
       _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.input.disabled = this.disabled;
-          this.invalid = !this.input.checkValidity();
-      }
-      _handleValueChange() {
-          this.invalid = !this.input.checkValidity();
+          this.setInvalid(false);
       }
       _renderInput() {
+          const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
           return html `
       <div
         class="form-control-group ${classMap({
             disabled: this.disabled,
             readonly: this.readonly,
-            "is-invalid": this.invalid && this.hasFeedback,
-            "quantity-toggle": this.classList.contains("quantity-toggle")
+            "is-invalid": this.invalid && wantFeedbackStyle
         })}"
         @click=${this._handleClick}
       >
@@ -19133,7 +19232,7 @@
         <input
           class="form-control"
           type=${this.type}
-          id=${this.inputId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
           aria-invalid=${this.invalid ? "true" : "false"}
@@ -19148,15 +19247,14 @@
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           step=${ifDefined(this.step)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
-          @keydown=${this._handleKeyDown}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${() => this.setInvalid(true)}
           @focus=${this._handleFocus}
           @blur=${this._handleBlur}
-          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this.inputId}-invalid` : undefined)}
-          aria-labelledby="${this.labelId} ${this.inputId}Help ${this.invalid && this.hasFeedback
-            ? `${this.inputId}-invalid`
+          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
+          aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
+            ? `${this._controlId}-invalid`
             : ""}"
         />
         ${this.loading ? html `<sgds-spinner size="sm"></sgds-spinner>` : nothing}
@@ -19173,7 +19271,8 @@
     `;
       }
       _renderFeedback() {
-          return this.invalid && this.hasFeedback
+          const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
+          return this.invalid && wantFeedbackText
               ? html ` <div class="invalid-feedback-container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path
@@ -19181,15 +19280,17 @@
               fill="#B90000"
             />
           </svg>
-          <div id="${this.inputId}-invalid" class="invalid-feedback">${this.invalidFeedback}</div>
+          <div id="${this._controlId}-invalid" class="invalid-feedback">
+            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
+          </div>
         </div>`
               : html `${this._renderHintText()}`;
       }
       _renderLabel() {
           const labelTemplate = html `
       <label
-        for=${this.inputId}
-        id=${this.labelId}
+        for=${this._controlId}
+        id=${this._labelId}
         class=${classMap({
             "form-label": true,
             required: this.required
@@ -19200,7 +19301,7 @@
           return this.label && labelTemplate;
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div id="${this.inputId}Help" class="form-text">${this.hintText}</div> `;
+          const hintTextTemplate = html ` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;
           return this.hintText && hintTextTemplate;
       }
       render() {
@@ -19215,10 +19316,7 @@
     `;
       }
   }
-  SgdsInput.styles = [...FormControlElement.styles, css_248z$7];
-  __decorate([
-      query("input.form-control")
-  ], SgdsInput.prototype, "input", void 0);
+  SgdsInput.styles = [...FormControlElement.styles, css_248z$a, css_248z$7];
   __decorate([
       property({ reflect: true })
   ], SgdsInput.prototype, "type", void 0);
@@ -19237,6 +19335,12 @@
   __decorate([
       property({ type: Number, reflect: true })
   ], SgdsInput.prototype, "maxlength", void 0);
+  __decorate([
+      property()
+  ], SgdsInput.prototype, "min", void 0);
+  __decorate([
+      property()
+  ], SgdsInput.prototype, "max", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsInput.prototype, "placeholder", void 0);
@@ -19253,8 +19357,11 @@
       property()
   ], SgdsInput.prototype, "step", void 0);
   __decorate([
-      property({ reflect: true })
-  ], SgdsInput.prototype, "value", void 0);
+      property({ type: String, reflect: true })
+  ], SgdsInput.prototype, "hasFeedback", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsInput.prototype, "invalidFeedback", void 0);
   __decorate([
       defaultValue()
   ], SgdsInput.prototype, "defaultValue", void 0);
@@ -19264,12 +19371,21 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsInput.prototype, "loading", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], SgdsInput.prototype, "required", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], SgdsInput.prototype, "value", void 0);
+  __decorate([
+      state()
+  ], SgdsInput.prototype, "_isTouched", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsInput.prototype, "_handleIsTouched", null);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsInput.prototype, "_handleDisabledChange", null);
-  __decorate([
-      watch("value", { waitUntilFirstUpdate: true })
-  ], SgdsInput.prototype, "_handleValueChange", null);
 
   var css_248z$6 = css`.input-container{display:flex;flex-direction:row;width:-webkit-fill-available;width:-moz-available}.form-control-group{border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md)}.input-feedback{display:flex;flex-direction:column;width:-webkit-fill-available;width:-moz-available}`;
 
@@ -19306,15 +19422,28 @@
               }
           };
           this.type = "text";
-          this.hasFeedback = true;
-          this._handleValueChange = () => null;
+          this.hasFeedback = "both";
+          // this._handleChange = () => null;
+          // this._handleInputChange = () => null
+      }
+      // connectedCallback(): void {
+      //   super.connectedCallback();
+      //   this.addEventListener("sgds-change", this._validateInput);
+      // }
+      async _handleChange(e) {
+          this.value = this.input.value;
+          this.emit("sgds-change");
+          super._mixinHandleChange(e);
+          await this._validateInput();
       }
-      connectedCallback() {
-          super.connectedCallback();
-          this.addEventListener("sgds-change", this._validateInput);
+      /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched && this.required) {
+              this.invalid = true;
+          }
       }
-      async firstUpdated(changes) {
-          super.firstUpdated(changes);
+      async firstUpdated(changedProperties) {
+          super.firstUpdated(changedProperties);
           this._applyInputMask(this.dateFormat);
       }
       async _applyInputMask(dateFormat) {
@@ -19411,8 +19540,11 @@
   __decorate([
       queryAsync("input")
   ], DatepickerInput.prototype, "shadowInput", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], DatepickerInput.prototype, "_handleIsTouched", null);
 
-  var css_248z$5 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}`;
+  var css_248z$5 = css`:host{--sgds-btn-font-weight:var(--sgds-font-weight-regular);--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-hover-bg:var(--sgds-primary-bg-emphasis);--sgds-btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--sgds-btn-bg:var(--sgds-primary-bg);--sgds-btn-color:var(--sgds-default-color-on-dark)}:host([variant=outline]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color);--sgds-btn-border-width:var(--sgds-border-width-1);--sgds-btn-border-color:var(--sgds-primary-border-color)}:host([variant=ghost]){--sgds-btn-bg:var(--sgds-default-bg-transparent);--sgds-btn-hover-bg:var(--sgds-primary-bg-translucent);--sgds-btn-color:var(--sgds-primary-color)}:host([variant=danger]){--sgds-btn-bg:var(--sgds-danger-bg);--sgds-btn-hover-bg:var(--sgds-danger-bg-emphasis);--sgds-btn-color:var(--sgds-default-color-on-dark)}.btn{align-items:center;background-color:var(--sgds-btn-bg);border:1px solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-btn-border-radius);color:var(--sgds-default-color-on-dark);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--sgds-btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}.btn-ghost,.btn-outline,.btn-primary{color:var(--sgds-btn-color)}.btn-outline{border:var(--sgds-btn-border-width) solid var(--sgds-btn-border-color)}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--sgds-btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--sgds-btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--sgds-btn-color);opacity:var(--sgds-opacity-50);pointer-events:none}.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn slot::slotted(*){color:var(--sgds-btn-color)}`;
 
   class ButtonElement extends SgdsElement {
       constructor() {
@@ -19485,6 +19617,63 @@
 
   var css_248z$4 = css`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}`;
 
+  /**
+   * A controller to help with form submission
+   */
+  class FormSubmitController {
+      constructor(host, options) {
+          (this.host = host).addController(this);
+          this.options = Object.assign({ form: (input) => {
+                  return input.closest("form");
+              } }, options);
+      }
+      hostConnected() {
+          this.form = this.options.form(this.host);
+      }
+      hostDisconnected() {
+          if (this.form) {
+              this.form = undefined;
+          }
+      }
+      /**
+       * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+       * Button is removed once action is performed
+       */
+      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();
+          }
+      }
+      /** 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$3 = css`:host{display:inline-flex}.btn.full-width,:host([fullWidth]){max-width:var(--sgds-dimension-320);width:100%}.btn.full-width.has-left-icon{justify-content:flex-start}.btn.full-width.has-right-icon{justify-content:space-between}.btn.full-width.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}`;
 
   /**