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

package/components/QuantityToggle/index.umd.js

@@ -30,6 +30,270 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
+  const appliedClassMixins = new WeakMap();
+
+  /** Vefify if the Mixin was previously applyed
+   * @private
+   * @param {function} mixin      Mixin being applyed
+   * @param {object} superClass   Class receiving the new mixin
+   * @returns {boolean}
+   */
+  function wasMixinPreviouslyApplied(mixin, superClass) {
+    let klass = superClass;
+    while (klass) {
+      if (appliedClassMixins.get(klass) === mixin) {
+        return true;
+      }
+      klass = Object.getPrototypeOf(klass);
+    }
+    return false;
+  }
+
+  /** Apply each mixin in the chain to make sure they are not applied more than once to the final class.
+   * @export
+   * @param {function} mixin      Mixin to be applyed
+   * @returns {object}            Mixed class with mixin applied
+   */
+  function dedupeMixin(mixin) {
+    return superClass => {
+      if (wasMixinPreviouslyApplied(mixin, superClass)) {
+        return superClass;
+      }
+      const mixedClass = mixin(superClass);
+      appliedClassMixins.set(mixedClass, mixin);
+      return mixedClass;
+    };
+  }
+
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const global$5 = window;
+  /**
+   * Whether the current browser supports `adoptedStyleSheets`.
+   */
+  const supportsAdoptingStyleSheets$2 = global$5.ShadowRoot &&
+      (global$5.ShadyCSS === undefined || global$5.ShadyCSS.nativeShadow) &&
+      'adoptedStyleSheets' in Document.prototype &&
+      'replace' in CSSStyleSheet.prototype;
+  /**
+   * Applies the given styles to a `shadowRoot`. When Shadow DOM is
+   * available but `adoptedStyleSheets` is not, styles are appended to the
+   * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
+   * Note, when shimming is used, any styles that are subsequently placed into
+   * the shadowRoot should be placed *before* any shimmed adopted styles. This
+   * will match spec behavior that gives adopted sheets precedence over styles in
+   * shadowRoot.
+   */
+  const adoptStyles$2 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$2) {
+          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+      }
+      else {
+          styles.forEach((s) => {
+              const style = document.createElement('style');
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const nonce = global$5['litNonce'];
+              if (nonce !== undefined) {
+                  style.setAttribute('nonce', nonce);
+              }
+              style.textContent = s.cssText;
+              renderRoot.appendChild(style);
+          });
+      }
+  };
+
+  /**
+   * @typedef {import('./types').RenderOptions} RenderOptions
+   * @typedef {import('./types').ScopedElementsMixin} ScopedElementsMixin
+   * @typedef {import('./types').ScopedElementsHost} ScopedElementsHost
+   * @typedef {import('./types').ScopedElementsMap} ScopedElementsMap
+   * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
+   */
+
+  // @ts-ignore
+  const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
+
+  /**
+   * @template {import('./types').Constructor<HTMLElement>} T
+   * @param {T} superclass
+   * @return {T & import('./types').Constructor<ScopedElementsHost>}
+   */
+  const ScopedElementsMixinImplementation = superclass =>
+    /** @type {ScopedElementsHost} */
+    class ScopedElementsHost extends superclass {
+      /**
+       * Obtains the scoped elements definitions map if specified.
+       *
+       * @returns {ScopedElementsMap}
+       */
+      static get scopedElements() {
+        return {};
+      }
+
+      /**
+       * Obtains the ShadowRoot options.
+       *
+       * @type {ShadowRootInit}
+       */
+      static get shadowRootOptions() {
+        return this.__shadowRootOptions;
+      }
+
+      /**
+       * Set the shadowRoot options.
+       *
+       * @param {ShadowRootInit} value
+       */
+      static set shadowRootOptions(value) {
+        this.__shadowRootOptions = value;
+      }
+
+      /**
+       * Obtains the element styles.
+       *
+       * @returns {CSSResultOrNative[]}
+       */
+      static get elementStyles() {
+        return this.__elementStyles;
+      }
+
+      static set elementStyles(styles) {
+        this.__elementStyles = styles;
+      }
+
+      // either TS or ESLint will complain here
+      // eslint-disable-next-line no-unused-vars
+      constructor(..._args) {
+        super();
+        /** @type {RenderOptions} */
+        this.renderOptions = this.renderOptions || undefined;
+      }
+
+      /**
+       * Obtains the CustomElementRegistry associated to the ShadowRoot.
+       *
+       * @returns {CustomElementRegistry}
+       */
+      get registry() {
+        // @ts-ignore
+        return this.constructor.__registry;
+      }
+
+      /**
+       * Set the CustomElementRegistry associated to the ShadowRoot
+       *
+       * @param {CustomElementRegistry} registry
+       */
+      set registry(registry) {
+        // @ts-ignore
+        this.constructor.__registry = registry;
+      }
+
+      createRenderRoot() {
+        const { scopedElements, shadowRootOptions, elementStyles } =
+          /** @type {typeof ScopedElementsHost} */ (this.constructor);
+
+        const shouldCreateRegistry =
+          !this.registry ||
+          // @ts-ignore
+          (this.registry === this.constructor.__registry &&
+            !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
+
+        /**
+         * Create a new registry if:
+         * - the registry is not defined
+         * - this class doesn't have its own registry *AND* has no shared registry
+         */
+        if (shouldCreateRegistry) {
+          this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+          for (const [tagName, klass] of Object.entries(scopedElements)) {
+            this.defineScopedElement(tagName, klass);
+          }
+        }
+
+        /** @type {ShadowRootInit} */
+        const options = {
+          mode: 'open',
+          ...shadowRootOptions,
+          customElements: this.registry,
+        };
+
+        const createdRoot = this.attachShadow(options);
+        if (supportsScopedRegistry) {
+          this.renderOptions.creationScope = createdRoot;
+        }
+
+        if (createdRoot instanceof ShadowRoot) {
+          adoptStyles$2(createdRoot, elementStyles);
+          this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
+        }
+
+        return createdRoot;
+      }
+
+      createScopedElement(tagName) {
+        const root = supportsScopedRegistry ? this.shadowRoot : document;
+        // @ts-ignore polyfill to support createElement on shadowRoot is loaded
+        return root.createElement(tagName);
+      }
+
+      /**
+       * Defines a scoped element.
+       *
+       * @param {string} tagName
+       * @param {typeof HTMLElement} klass
+       */
+      defineScopedElement(tagName, klass) {
+        const registeredClass = this.registry.get(tagName);
+        if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+          // eslint-disable-next-line no-console
+          console.error(
+            [
+              `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
+              'This is only possible with a CustomElementRegistry.',
+              'Your browser does not support this feature so you will need to load a polyfill for it.',
+              'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+              'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+              'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+            ].join('\n'),
+          );
+        }
+        if (!registeredClass) {
+          return this.registry.define(tagName, klass);
+        }
+        return this.registry.get(tagName);
+      }
+
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.constructor.getScopedTagName(tagName);
+      }
+
+      /**
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
+       */
+      // eslint-disable-next-line class-methods-use-this
+      static getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.__registry.get(tagName) ? tagName : undefined;
+      }
+    };
+
+  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
+
   /**
    * @license
    * Copyright 2019 Google LLC
@@ -1322,6 +1586,32 @@
       };
   }
 
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * Declares a private or protected reactive property that still triggers
+   * updates to the element when it changes. It does not reflect from the
+   * corresponding attribute.
+   *
+   * Properties declared this way must not be used from HTML or HTML templating
+   * systems, they're solely for properties internal to the element. These
+   * properties may be renamed by optimization tools like closure compiler.
+   * @category Decorator
+   */
+  function state(options) {
+      return property({
+          ...options,
+          // Add both `state` and `attribute` because we found a third party
+          // controller that is keying off of PropertyOptions.state to determine
+          // whether a field is a private internal property or not.
+          state: true,
+          attribute: false,
+      });
+  }
+
   /**
    * @license
    * Copyright 2017 Google LLC
@@ -1466,6 +1756,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 2017 Google LLC
@@ -3227,10 +3570,6 @@
    */
   const html = withStatic(html$1);
 
-  function genId (componentName = "", elementName = "") {
-      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
-  }
-
   /**
    * @license
    * Copyright 2019 Google LLC
@@ -4579,15 +4918,15 @@
           `is not recommended.`);
   }
 
-  var css_248z$b = 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`.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$a = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z$b = 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$9 = 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$a = 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$8 = 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)}`;
+  var css_248z$9 = 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)}`;
 
-  var css_248z$7 = 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$8 = 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
@@ -4605,7 +4944,11 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$7];
+  SgdsElement.styles = [css_248z$8];
+
+  function generateId (componentName = "", elementName = "") {
+      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
+  }
 
   class FormControlElement extends SgdsElement {
       constructor() {
@@ -4616,18 +4959,23 @@
           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$b, css_248z$a, css_248z$9, css_248z$8];
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$c, css_248z$b, css_248z$a, css_248z$9];
   __decorate([
       property({ reflect: true })
   ], FormControlElement.prototype, "label", void 0);
@@ -4640,24 +4988,11 @@
   __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);
+
+  var css_248z$7 = css`svg{vertical-align:middle}`;
 
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
@@ -4679,137 +5014,227 @@
       };
   };
 
-  const reportValidityOverloads = new WeakMap();
-  class FormSubmitController {
+  /**
+   * 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;
+      }
+      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({});
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
+      /**
+       * 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;
+          else {
+              this._internals.setValidity({});
+          }
       }
-      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));
-                      }
-                  });
+  }
+
+  /**
+   * @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.form.append(button);
-              button.click();
-              button.remove();
+              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;
           }
       }
-      /** 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);
-      }
-  }
+      ToBeValidatedElement.formAssociated = true;
+      __decorate([
+          queryAsync("sgds-input")
+      ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+      return ToBeValidatedElement;
+  };
 
-  var css_248z$6 = 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$6 = 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() {
@@ -4880,11 +5305,13 @@
       property({ type: String })
   ], ButtonElement.prototype, "ariaLabel", void 0);
 
-  var css_248z$5 = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}.btn>svg{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-lg>svg{height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.btn-sm>svg{height:var(--sgds-dimension-20);width:var(--sgds-dimension-20)}`;
+  var css_248z$5 = css`.btn.btn-icon{display:flex;height:var(--sgds-dimension-48,56px);min-width:unset;padding:0;width:var(--sgds-dimension-48,56px)}.btn.btn-icon.btn-lg{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:unset;padding:0;width:var(--sgds-dimension-56)}.btn.btn-icon.btn-sm{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:unset;padding:0;width:var(--sgds-dimension-40)}`;
 
   /**
    * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
    *
+   * @slot default - The slot for sgds-icon
+   *
    * @event sgds-blur - Emitted when the button is blurred.
    * @event sgds-focus - Emitted when the button is focused.
    */
@@ -4901,7 +5328,7 @@
             [`btn-${this.size}`]: this.size
         })}"
             ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
-            type="button"
+            type=${ifDefined(isLink ? undefined : "button")}
             href=${ifDefined(isLink ? this.href : undefined)}
             target=${ifDefined(isLink ? this.target : undefined)}
             download=${ifDefined(isLink ? this.download : undefined)}
@@ -4914,19 +5341,12 @@
             @blur=${this._handleBlur}
             aria-label=${ifDefined(this.ariaLabel)}
           >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M3 12C3 11.8295 3.06773 11.666 3.18828 11.5455C3.30883 11.4249 3.47233 11.3572 3.64282 11.3572H18.8043L14.7584 7.31258C14.6377 7.19187 14.5699 7.02817 14.5699 6.85746C14.5699 6.68676 14.6377 6.52305 14.7584 6.40235C14.8791 6.28165 15.0428 6.21384 15.2135 6.21384C15.3842 6.21384 15.5479 6.28165 15.6686 6.40235L20.8111 11.5449C20.871 11.6046 20.9185 11.6755 20.9509 11.7536C20.9833 11.8317 21 11.9154 21 12C21 12.0845 20.9833 12.1683 20.9509 12.2464C20.9185 12.3245 20.871 12.3954 20.8111 12.4551L15.6686 17.5976C15.5479 17.7183 15.3842 17.7861 15.2135 17.7861C15.0428 17.7861 14.8791 17.7183 14.7584 17.5976C14.6377 17.4769 14.5699 17.3132 14.5699 17.1425C14.5699 16.9718 14.6377 16.8081 14.7584 16.6874L18.8043 12.6428H3.64282C3.47233 12.6428 3.30883 12.5751 3.18828 12.4545C3.06773 12.334 3 12.1705 3 12Z" fill="currentColor"/>
-          </svg>
+            <slot></slot>
           </${tag}>
         `;
       }
   }
   SgdsIconButton.styles = [...ButtonElement.styles, css_248z$5];
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsIconButton.prototype, "name", void 0);
-
-  var css_248z$4 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-form-gap-lg);position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
 
   /**
    * @license
@@ -4998,11 +5418,48 @@
    */
   const unsafeSVG = directive(UnsafeSVGDirective);
 
-  var css_248z$3 = 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}}
+  // @watch decorator
+  //
+  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
+  //
+  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
+  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+  //
+  // Usage:
+  //
+  //  @watch('propName')
+  //  handlePropChange(oldValue, newValue) {
+  //    ...
+  //  }
+  function watch(propName, options) {
+      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
+      return (proto, decoratedFnName) => {
+          // @ts-expect-error -- update is a protected property
+          const { update } = proto;
+          if (propName in proto) {
+              const propNameKey = propName;
+              // @ts-expect-error -- update is a protected property
+              proto.update = function (changedProps) {
+                  if (changedProps.has(propNameKey)) {
+                      const oldValue = changedProps.get(propNameKey);
+                      const newValue = this[propNameKey];
+                      if (oldValue !== newValue) {
+                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                              this[decoratedFnName](oldValue, newValue);
+                          }
+                      }
+                  }
+                  update.call(this, changedProps);
+              };
+          }
+      };
+  }
+
+  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}}
 
 /*! CSS Used keyframes */@keyframes spinner{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 
-  var css_248z$2 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
+  var css_248z$3 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 
   /**
    * @summary Spinners notify the users that their request is being processed.
@@ -5032,7 +5489,7 @@
     `;
       }
   }
-  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$2, css_248z$3];
+  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$3, css_248z$4];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsSpinner.prototype, "variant", void 0);
@@ -5043,44 +5500,7 @@
       property({ reflect: true, type: String })
   ], SgdsSpinner.prototype, "label", void 0);
 
-  // @watch decorator
-  //
-  // Runs when an observed property changes, e.g. @property or @state, but before the component updates.
-  //
-  // To wait for an update to complete after a change occurs, use `await this.updateComplete` in the handler. To start
-  // watching after the initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
-  //
-  // Usage:
-  //
-  //  @watch('propName')
-  //  handlePropChange(oldValue, newValue) {
-  //    ...
-  //  }
-  function watch(propName, options) {
-      const resolvedOptions = Object.assign({ waitUntilFirstUpdate: false }, options);
-      return (proto, decoratedFnName) => {
-          // @ts-expect-error -- update is a protected property
-          const { update } = proto;
-          if (propName in proto) {
-              const propNameKey = propName;
-              // @ts-expect-error -- update is a protected property
-              proto.update = function (changedProps) {
-                  if (changedProps.has(propNameKey)) {
-                      const oldValue = changedProps.get(propNameKey);
-                      const newValue = this[propNameKey];
-                      if (oldValue !== newValue) {
-                          if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
-                              this[decoratedFnName](oldValue, newValue);
-                          }
-                      }
-                  }
-                  update.call(this, changedProps);
-              };
-          }
-      };
-  }
-
-  var css_248z$1 = 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}`;
+  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}`;
 
   /**
    * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.
@@ -5089,14 +5509,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";
@@ -5104,16 +5523,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() {
@@ -5129,60 +5549,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}
       >
@@ -5191,7 +5630,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"}
@@ -5206,15 +5645,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}
@@ -5231,7 +5669,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
@@ -5239,15 +5678,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
@@ -5258,7 +5699,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() {
@@ -5273,10 +5714,7 @@
     `;
       }
   }
-  SgdsInput.styles = [...FormControlElement.styles, css_248z$1];
-  __decorate([
-      query("input.form-control")
-  ], SgdsInput.prototype, "input", void 0);
+  SgdsInput.styles = [...FormControlElement.styles, css_248z$9, css_248z$2];
   __decorate([
       property({ reflect: true })
   ], SgdsInput.prototype, "type", void 0);
@@ -5295,6 +5733,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);
@@ -5311,8 +5755,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);
@@ -5322,57 +5769,160 @@
   __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 = css`svg{vertical-align:middle}`;
+  var css_248z$1 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.input-group{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-form-gap-lg);position:relative}.input-group>sgds-input{flex:1 1 auto;min-width:0;position:relative}.input-group sgds-button:focus,.input-group>sgds-input:focus{z-index:3}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}`;
+
+  var css_248z = css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
 
   /**
-   * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
+   * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
    *
-   * @csspart base - The base wrapper of the quantity toggle component.
-   * @csspart button - The plus and minus button of quantity toggle
+   * @event sgds-blur - Emitted when the button is blurred.
+   * @event sgds-focus - Emitted when the button is focused.
+   */
+  class SgdsIcon extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** Specifies a small, medium or large icon, the size is medium by default. */
+          this.size = "lg";
+          /** @internal */
+          this._svgContent = null;
+      }
+      async firstUpdated() {
+          if (this.name) {
+              this.loadSvg(this.name);
+          }
+      }
+      updated() {
+          this.style.display = this._svgContent ? "flex" : "none";
+      }
+      async loadSvg(name) {
+          if (name) {
+              // Dynamically import the SVG if not cached
+              try {
+                  //TODO: This path is too specific to our repo, it won't work for users
+                  const response = await fetch(`/src/icons/${name}.svg`);
+                  if (response.ok) {
+                      const svgContent = await response.text();
+                      // Render the SVG
+                      // this.renderSvg(svgContent);
+                      this._svgContent = svgContent;
+                  }
+              }
+              catch (error) {
+                  console.error(`Error loading SVG: ${name}`, error);
+              }
+          }
+      }
+      render() {
+          return html `${unsafeSVG(this._svgContent)}`;
+      }
+  }
+  SgdsIcon.styles = [...SgdsElement.styles, css_248z];
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsIcon.prototype, "name", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsIcon.prototype, "size", void 0);
+  __decorate([
+      state()
+  ], SgdsIcon.prototype, "_svgContent", void 0);
+
+  /**
+   * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
    *
    * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.
    * @event sgds-input - Emitted when the control receives input and its value changes.
    *
    */
-  class SgdsQuantityToggle extends FormControlElement {
+  class SgdsQuantityToggle extends SgdsFormValidatorMixin(ScopedElementsMixin(FormControlElement)) {
       constructor() {
           super(...arguments);
-          /** @internal */
-          this.formSubmitController = new FormSubmitController(this);
           /** Controls the size of the quantity toggle */
           this.size = "md";
           /** The input's value. Set to 0 by default */
           this.value = 0;
-          /** Disables the entire quantity toggle  */
-          this.disabled = false;
-          /** The quantity toggle's button variants */
-          this.iconButtonVariant = "ghost";
+          // /** The quantity toggle's button variants */
+          // @property({ type: String }) iconButtonVariant = "ghost";
           /**  Controls the incremental / decremental value of the input */
           this.step = 1;
           /** 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 = 0;
-          /** @internal The id forwarded to input element */
-          this.inputId = genId("quantity-toggle", "input");
       }
       /** @internal */
       static get scopedElements() {
           return {
               "sgds-input": SgdsInput,
-              "sgds-icon-button": SgdsIconButton
+              "sgds-icon-button": SgdsIconButton,
+              "sgds-icon": SgdsIcon
           };
       }
-      _handleChange() {
-          if (parseInt(this.input.value) < this.step || this.input.value === "") {
-              this.input.value = "0";
+      /**
+       * 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();
+      }
+      async _handleChange() {
+          const sgdsInput = await this._sgdsInput;
+          if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+              sgdsInput.value = "0";
+          }
+          this.value = parseInt(sgdsInput.value);
+          this._mixinSetFormValue();
+          this._mixinValidate(sgdsInput.input);
+          this.invalid = !this._mixinReportValidity();
+      }
+      async _handleInputChange() {
+          const sgdsInput = await this._sgdsInput;
+          this.invalid = false;
+          if (parseInt(sgdsInput.value) < this.step || sgdsInput.value === "") {
+              sgdsInput.value = "0";
           }
-          this.value = parseInt(this.input.value);
+          this.value = parseInt(sgdsInput.value);
+          this._mixinSetFormValue();
+          this._mixinValidate(sgdsInput.input);
+      }
+      async _mixinResetFormControl() {
+          const sgdsInput = await this._sgdsInput;
+          this.value = this.defaultValue;
+          sgdsInput.input.value = this.value.toString();
+          this._mixinResetValidity(sgdsInput.input);
       }
       _handleKeyDown(event) {
           const allowedKeys = [
@@ -5389,6 +5939,12 @@
               event.preventDefault();
           }
       }
+      _handleInvalid() {
+          this.invalid = true;
+      }
+      _handleValid() {
+          this.invalid = false;
+      }
       /** Simulates a click on the plus button */
       plus() {
           this.plusBtn.click();
@@ -5397,23 +5953,41 @@
       minus() {
           this.minusBtn.click();
       }
-      _onPlus(event) {
+      async _onPlus(event) {
+          const sgdsInput = await this._sgdsInput;
           event.preventDefault();
           event.stopPropagation();
-          this.value = parseInt(this.input.value) + parseInt(this.input.step);
+          this.value = parseInt(sgdsInput.value) + parseInt(sgdsInput.step.toString());
+          this._validateOnClick(sgdsInput.input);
       }
-      _onMinus(event) {
+      async _onMinus(event) {
+          const sgdsInput = await this._sgdsInput;
           event.preventDefault();
           event.stopPropagation();
           if (this.value < this.step) {
               this.value = 0;
           }
           else {
-              this.value = parseInt(this.input.value) - parseInt(this.input.step);
+              this.value = parseInt(sgdsInput.value) - parseInt(sgdsInput.step.toString());
           }
+          this._validateOnClick(sgdsInput.input);
+      }
+      /**
+       * Validates the input on button clicks of the toggle.
+       * Input is validated every time the button is click to update the invalid state
+       * to indiciate the validity of quantity toggle
+       * @param input native HTMLInputElement
+       */
+      async _validateOnClick(input) {
+          const sgdsInput = await this._sgdsInput;
+          await sgdsInput.updateComplete;
+          this._mixinSetFormValue();
+          this._mixinValidate(input);
+          this.invalid = !this._mixinReportValidity();
       }
       _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
@@ -5421,17 +5995,20 @@
               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.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
+            "form-label": true,
+            disabled: this.disabled
         })}
         >${this.label}</label
       >
@@ -5439,30 +6016,22 @@
           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() {
           return html `
       <div class="form-control-container">
         ${this._renderLabel()}
-        <div
-          part="base"
-          class="${classMap({
-            disabled: this.disabled,
-            "input-group": true,
-            [`input-group-${this.size}`]: this.size
-        })}"
-          variant="quantity-toggle"
-          size=${this.size}
-        >
+        <div class="input-group">
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`decrease by ${this.step}`}
-            part="button"
             ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
             @click=${this._onMinus}
-          ></sgds-icon-button>
+          >
+            <sgds-icon name="dash"></sgds-icon>
+          </sgds-icon-button>
           <sgds-input
             type="number"
             class="quantity-toggle"
@@ -5470,21 +6039,24 @@
             step=${ifDefined(this.step)}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
-            .value=${live(this.value.toString())}
-            @sgds-change=${() => this._handleChange()}
-            @sgds-input=${() => this._handleChange()}
+            .value=${live(this.value)}
+            @sgds-change=${this._handleChange}
+            @sgds-input=${this._handleInputChange}
+            @sgds-invalid=${this._handleInvalid}
+            @sgds-valid=${this._handleValid}
             @keydown=${this._handleKeyDown}
             ?disabled=${this.disabled}
+            id=${this._controlId}
             ?invalid=${this.invalid}
-            id=${this.inputId}
+            hasFeedback=${ifDefined(this.hasFeedback !== "text" ? "style" : undefined)}
           ></sgds-input>
           <sgds-icon-button
-            variant=${this.iconButtonVariant}
+            variant="ghost"
             ariaLabel=${`increase by ${this.step}`}
-            part="button"
             @click=${this._onPlus}
             ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
-          ></sgds-icon-button>
+            ><sgds-icon name="plus"></sgds-icon>
+          </sgds-icon-button>
         </div>
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>
         ${this._renderFeedback()}
@@ -5492,10 +6064,7 @@
     `;
       }
   }
-  SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z, css_248z$4];
-  __decorate([
-      query("sgds-input")
-  ], SgdsQuantityToggle.prototype, "input", void 0);
+  SgdsQuantityToggle.styles = [...FormControlElement.styles, css_248z$9, css_248z$7, css_248z$1];
   __decorate([
       query("sgds-icon-button[ariaLabel^='increase by']")
   ], SgdsQuantityToggle.prototype, "plusBtn", void 0);
@@ -5508,18 +6077,27 @@
   __decorate([
       property({ type: Number, reflect: true })
   ], SgdsQuantityToggle.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsQuantityToggle.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: String })
-  ], SgdsQuantityToggle.prototype, "iconButtonVariant", void 0);
   __decorate([
       property({ type: Number })
   ], SgdsQuantityToggle.prototype, "step", void 0);
+  __decorate([
+      property()
+  ], SgdsQuantityToggle.prototype, "min", void 0);
+  __decorate([
+      property()
+  ], SgdsQuantityToggle.prototype, "max", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsQuantityToggle.prototype, "hasFeedback", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsQuantityToggle.prototype, "invalidFeedback", void 0);
   __decorate([
       defaultValue()
   ], SgdsQuantityToggle.prototype, "defaultValue", void 0);
+  __decorate([
+      queryAsync("sgds-input")
+  ], SgdsQuantityToggle.prototype, "_sgdsInput", void 0);
 
   customElements.define("sgds-quantity-toggle", SgdsQuantityToggle);