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

package/components/ComboBox/index.umd.js

@@ -4498,6 +4498,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 2020 Google LLC
@@ -8201,7 +8254,7 @@
   }
   SgdsElement.styles = [css_248z$a];
 
-  function genId (componentName = "", elementName = "") {
+  function generateId (componentName = "", elementName = "") {
       return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
   }
 
@@ -8223,7 +8276,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 */
@@ -8997,9 +9050,9 @@
 
   var css_248z$8 = 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$7 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z$7 = 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$6 = 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$6 = 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$5 = 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)}`;
 
@@ -9012,15 +9065,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$8, css_248z$7, css_248z$6, css_248z$5];
@@ -9036,24 +9094,229 @@
   __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);
+
+  /**
+   * 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$4 = 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}}
 
@@ -9100,136 +9363,6 @@
       property({ reflect: true, type: String })
   ], SgdsSpinner.prototype, "label", void 0);
 
-  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$2 = 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}`;
 
   /**
@@ -9239,14 +9372,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";
@@ -9254,16 +9386,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() {
@@ -9279,60 +9412,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}
       >
@@ -9341,7 +9493,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"}
@@ -9356,15 +9508,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}
@@ -9381,7 +9532,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
@@ -9389,15 +9541,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
@@ -9408,7 +9562,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() {
@@ -9423,10 +9577,7 @@
     `;
       }
   }
-  SgdsInput.styles = [...FormControlElement.styles, css_248z$2];
-  __decorate([
-      query("input.form-control")
-  ], SgdsInput.prototype, "input", void 0);
+  SgdsInput.styles = [...FormControlElement.styles, css_248z$5, css_248z$2];
   __decorate([
       property({ reflect: true })
   ], SgdsInput.prototype, "type", void 0);
@@ -9445,6 +9596,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);
@@ -9461,8 +9618,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);
@@ -9472,12 +9632,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$1 = css`.sgds.combobox .form-control-icon{align-items:center;display:flex;font-size:1rem;height:3rem;justify-content:center;position:absolute;width:3rem;z-index:4}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.sgds.combobox .dropdown-toggle{width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}.form-control-icon{bottom:0}`;