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

package/components/Checkbox/index.umd.js

@@ -144,7 +144,7 @@
   const { is: is$1, defineProperty: defineProperty$1, getOwnPropertyDescriptor: getOwnPropertyDescriptor$1, getOwnPropertyNames: getOwnPropertyNames$1, getOwnPropertySymbols: getOwnPropertySymbols$1, getPrototypeOf: getPrototypeOf$1, } = Object;
   // Lets a minifier replace globalThis references with a minified name
   const global$3 = globalThis;
-  let issueWarning$5;
+  let issueWarning$4;
   const trustedTypes$2 = global$3
       .trustedTypes;
   // Temporary workaround for https://crbug.com/993268
@@ -162,17 +162,17 @@
       const issuedWarnings = (global$3.litIssuedWarnings ??=
           new Set());
       // Issue a warning, if we haven't already.
-      issueWarning$5 = (code, warning) => {
+      issueWarning$4 = (code, warning) => {
           warning += ` See https://lit.dev/msg/${code} for more information.`;
           if (!issuedWarnings.has(warning)) {
               console.warn(warning);
               issuedWarnings.add(warning);
           }
       };
-      issueWarning$5('dev-mode', `Lit is in dev mode. Not recommended for production!`);
+      issueWarning$4('dev-mode', `Lit is in dev mode. Not recommended for production!`);
       // Issue polyfill support warning.
       if (global$3.ShadyDOM?.inUse && polyfillSupport$3 === undefined) {
-          issueWarning$5('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
+          issueWarning$4('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
               `the \`polyfill-support\` module has not been loaded.`);
       }
   }
@@ -413,7 +413,7 @@
                       `but it's actually declared as a value on the prototype. ` +
                       `Usually this is due to using @property or @state on a method.`);
               }
-              issueWarning$5('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
+              issueWarning$4('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
                   `${this.name} was declared as a reactive property ` +
                   `but it does not have a getter. This will be an error in a ` +
                   `future version of Lit.`);
@@ -525,11 +525,11 @@
           this.elementStyles = this.finalizeStyles(this.styles);
           {
               if (this.hasOwnProperty('createProperty')) {
-                  issueWarning$5('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
+                  issueWarning$4('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
                       'The override will not be called with standard decorators');
               }
               if (this.hasOwnProperty('getPropertyDescriptor')) {
-                  issueWarning$5('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
+                  issueWarning$4('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
                       'The override will not be called with standard decorators');
               }
           }
@@ -737,7 +737,7 @@
               const attrValue = converter.toAttribute(value, options.type);
               if (this.constructor.enabledWarnings.includes('migration') &&
                   attrValue === undefined) {
-                  issueWarning$5('undefined-attribute-value', `The attribute value for the ${name} property is ` +
+                  issueWarning$4('undefined-attribute-value', `The attribute value for the ${name} property is ` +
                       `undefined on element ${this.localName}. The attribute will be ` +
                       `removed, but in the previous version of \`ReactiveElement\`, ` +
                       `the attribute would not have changed.`);
@@ -803,7 +803,7 @@
           // If we have a property key, perform property update steps.
           if (name !== undefined) {
               if (name instanceof Event) {
-                  issueWarning$5(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
+                  issueWarning$4(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
               }
               options ??= this.constructor.getPropertyOptions(name);
               const hasChanged = options.hasChanged ?? notEqual$1;
@@ -885,7 +885,7 @@
           if (this.constructor.enabledWarnings.includes('async-perform-update') &&
               typeof result?.then ===
                   'function') {
-              issueWarning$5('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
+              issueWarning$4('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
                   `This behavior is deprecated and will be removed in a future ` +
                   `version of ReactiveElement.`);
           }
@@ -1021,7 +1021,7 @@
           this.updated(changedProperties);
           if (this.isUpdatePending &&
               this.constructor.enabledWarnings.includes('change-in-update')) {
-              issueWarning$5('change-in-update', `Element ${this.localName} scheduled an update ` +
+              issueWarning$4('change-in-update', `Element ${this.localName} scheduled an update ` +
                   `(generally because a property was set) ` +
                   `after an update completed, causing a new update to be scheduled. ` +
                   `This is inefficient and should be avoided unless the next update ` +
@@ -1188,7 +1188,7 @@
   // This line will be used in regexes to search for ReactiveElement usage.
   (global$3.reactiveElementVersions ??= []).push('2.0.4');
   if (global$3.reactiveElementVersions.length > 1) {
-      issueWarning$5('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+      issueWarning$4('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
 
@@ -1219,11 +1219,11 @@
   // renders when errors are thrown preventing an endRender event from being
   // called.
   let debugLogRenderId = 0;
-  let issueWarning$4;
+  let issueWarning$3;
   {
       global$2.litIssuedWarnings ??= new Set();
       // Issue a warning, if we haven't already.
-      issueWarning$4 = (code, warning) => {
+      issueWarning$3 = (code, warning) => {
           warning += code
               ? ` See https://lit.dev/msg/${code} for more information.`
               : '';
@@ -1232,7 +1232,7 @@
               global$2.litIssuedWarnings.add(warning);
           }
       };
-      issueWarning$4('dev-mode', `Lit is in dev mode. Not recommended for production!`);
+      issueWarning$3('dev-mode', `Lit is in dev mode. Not recommended for production!`);
   }
   const wrap = global$2.ShadyDOM?.inUse &&
       global$2.ShadyDOM?.noPatch === true
@@ -1383,7 +1383,7 @@
           // handle. Instead we know that static values must have the field
           // `_$litStatic$`.
           if (values.some((val) => val?.['_$litStatic$'])) {
-              issueWarning$4('', `Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\n` +
+              issueWarning$3('', `Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\n` +
                   `Please use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions`);
           }
       }
@@ -1663,7 +1663,7 @@
                               throw new Error(m);
                           }
                           else
-                              issueWarning$4('', m);
+                              issueWarning$3('', m);
                       }
                   }
                   // TODO (justinfagnani): for attempted dynamic tag names, we don't
@@ -2509,7 +2509,7 @@
   // This line will be used in regexes to search for lit-html usage.
   (global$2.litHtmlVersions ??= []).push('3.2.0');
   if (global$2.litHtmlVersions.length > 1) {
-      issueWarning$4('multiple-versions', `Multiple versions of Lit loaded. ` +
+      issueWarning$3('multiple-versions', `Multiple versions of Lit loaded. ` +
           `Loading multiple versions is not recommended.`);
   }
   /**
@@ -2728,7 +2728,7 @@
   const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
   // Lets a minifier replace globalThis references with a minified name
   const global = globalThis;
-  let issueWarning$3;
+  let issueWarning$2;
   const trustedTypes = global
       .trustedTypes;
   // Temporary workaround for https://crbug.com/993268
@@ -2746,17 +2746,17 @@
       const issuedWarnings = (global.litIssuedWarnings ??=
           new Set());
       // Issue a warning, if we haven't already.
-      issueWarning$3 = (code, warning) => {
+      issueWarning$2 = (code, warning) => {
           warning += ` See https://lit.dev/msg/${code} for more information.`;
           if (!issuedWarnings.has(warning)) {
               console.warn(warning);
               issuedWarnings.add(warning);
           }
       };
-      issueWarning$3('dev-mode', `Lit is in dev mode. Not recommended for production!`);
+      issueWarning$2('dev-mode', `Lit is in dev mode. Not recommended for production!`);
       // Issue polyfill support warning.
       if (global.ShadyDOM?.inUse && polyfillSupport$1 === undefined) {
-          issueWarning$3('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
+          issueWarning$2('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
               `the \`polyfill-support\` module has not been loaded.`);
       }
   }
@@ -2997,7 +2997,7 @@
                       `but it's actually declared as a value on the prototype. ` +
                       `Usually this is due to using @property or @state on a method.`);
               }
-              issueWarning$3('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
+              issueWarning$2('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
                   `${this.name} was declared as a reactive property ` +
                   `but it does not have a getter. This will be an error in a ` +
                   `future version of Lit.`);
@@ -3109,11 +3109,11 @@
           this.elementStyles = this.finalizeStyles(this.styles);
           {
               if (this.hasOwnProperty('createProperty')) {
-                  issueWarning$3('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
+                  issueWarning$2('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
                       'The override will not be called with standard decorators');
               }
               if (this.hasOwnProperty('getPropertyDescriptor')) {
-                  issueWarning$3('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
+                  issueWarning$2('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
                       'The override will not be called with standard decorators');
               }
           }
@@ -3321,7 +3321,7 @@
               const attrValue = converter.toAttribute(value, options.type);
               if (this.constructor.enabledWarnings.includes('migration') &&
                   attrValue === undefined) {
-                  issueWarning$3('undefined-attribute-value', `The attribute value for the ${name} property is ` +
+                  issueWarning$2('undefined-attribute-value', `The attribute value for the ${name} property is ` +
                       `undefined on element ${this.localName}. The attribute will be ` +
                       `removed, but in the previous version of \`ReactiveElement\`, ` +
                       `the attribute would not have changed.`);
@@ -3387,7 +3387,7 @@
           // If we have a property key, perform property update steps.
           if (name !== undefined) {
               if (name instanceof Event) {
-                  issueWarning$3(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
+                  issueWarning$2(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
               }
               options ??= this.constructor.getPropertyOptions(name);
               const hasChanged = options.hasChanged ?? notEqual;
@@ -3469,7 +3469,7 @@
           if (this.constructor.enabledWarnings.includes('async-perform-update') &&
               typeof result?.then ===
                   'function') {
-              issueWarning$3('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
+              issueWarning$2('async-perform-update', `Element ${this.localName} returned a Promise from performUpdate(). ` +
                   `This behavior is deprecated and will be removed in a future ` +
                   `version of ReactiveElement.`);
           }
@@ -3605,7 +3605,7 @@
           this.updated(changedProperties);
           if (this.isUpdatePending &&
               this.constructor.enabledWarnings.includes('change-in-update')) {
-              issueWarning$3('change-in-update', `Element ${this.localName} scheduled an update ` +
+              issueWarning$2('change-in-update', `Element ${this.localName} scheduled an update ` +
                   `(generally because a property was set) ` +
                   `after an update completed, causing a new update to be scheduled. ` +
                   `This is inefficient and should be avoided unless the next update ` +
@@ -3772,7 +3772,7 @@
   // This line will be used in regexes to search for ReactiveElement usage.
   (global.reactiveElementVersions ??= []).push('2.0.4');
   if (global.reactiveElementVersions.length > 1) {
-      issueWarning$3('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+      issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
 
@@ -3789,13 +3789,13 @@
    */
   /*@__INLINE__*/
   const JSCompiler_renameProperty = (prop, _obj) => prop;
-  let issueWarning$2;
+  let issueWarning$1;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
       const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
       // Issue a warning, if we haven't already.
-      issueWarning$2 = (code, warning) => {
+      issueWarning$1 = (code, warning) => {
           warning += ` See https://lit.dev/msg/${code} for more information.`;
           if (!issuedWarnings.has(warning)) {
               console.warn(warning);
@@ -3930,7 +3930,7 @@
   // This line will be used in regexes to search for LitElement usage.
   (globalThis.litElementVersions ??= []).push('4.1.0');
   if (globalThis.litElementVersions.length > 1) {
-      issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+      issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
 
@@ -3939,13 +3939,13 @@
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  let issueWarning$1;
+  let issueWarning;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
       const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
       // Issue a warning, if we haven't already.
-      issueWarning$1 = (code, warning) => {
+      issueWarning = (code, warning) => {
           warning += ` See https://lit.dev/msg/${code} for more information.`;
           if (!issuedWarnings.has(warning)) {
               console.warn(warning);
@@ -3982,7 +3982,7 @@
   const standardProperty = (options = defaultPropertyDeclaration, target, context) => {
       const { kind, metadata } = context;
       if (metadata == null) {
-          issueWarning$1('missing-class-metadata', `The class ${target} is missing decorator metadata. This ` +
+          issueWarning('missing-class-metadata', `The class ${target} is missing decorator metadata. This ` +
               `could mean that you're using a compiler that supports decorators ` +
               `but doesn't support decorator metadata, such as TypeScript 5.1. ` +
               `Please update your compiler.`);
@@ -4127,36 +4127,38 @@
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  let issueWarning;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
-      const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
-      // Issue a warning, if we haven't already.
-      issueWarning = (code, warning) => {
-          warning += code
-              ? ` See https://lit.dev/msg/${code} for more information.`
-              : '';
-          if (!issuedWarnings.has(warning)) {
-              console.warn(warning);
-              issuedWarnings.add(warning);
-          }
-      };
+      (globalThis.litIssuedWarnings ??= new Set());
   }
+
+  /**
+   * @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
-   * executes a querySelector on the element's renderRoot.
+   * 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.
-   * @param cache An optional boolean which when true performs the DOM query only
-   *     once and caches the result.
    *
    * See: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
    *
    * ```ts
    * class MyElement {
-   *   @query('#first')
-   *   first: HTMLDivElement;
+   *   @queryAsync('#first')
+   *   first: Promise<HTMLDivElement>;
    *
    *   render() {
    *     return html`
@@ -4165,72 +4167,22 @@
    *     `;
    *   }
    * }
+   *
+   * // external usage
+   * async doSomethingWithFirst() {
+   *  (await aMyElement.first).doSomething();
+   * }
    * ```
    * @category Decorator
    */
-  function query(selector, cache) {
-      return ((protoOrTarget, nameOrContext, descriptor) => {
-          const doQuery = (el) => {
-              const result = (el.renderRoot?.querySelector(selector) ?? null);
-              if (result === null && cache && !el.hasUpdated) {
-                  const name = typeof nameOrContext === 'object'
-                      ? nameOrContext.name
-                      : nameOrContext;
-                  issueWarning('', `@query'd field ${JSON.stringify(String(name))} with the 'cache' ` +
-                      `flag set for selector '${selector}' has been accessed before ` +
-                      `the first update and returned null. This is expected if the ` +
-                      `renderRoot tree has not been provided beforehand (e.g. via ` +
-                      `Declarative Shadow DOM). Therefore the value hasn't been cached.`);
-              }
-              // TODO: if we want to allow users to assert that the query will never
-              // return null, we need a new option and to throw here if the result
-              // is null.
-              return result;
-          };
-          if (cache) {
-              // Accessors to wrap from either:
-              //   1. The decorator target, in the case of standard decorators
-              //   2. The property descriptor, in the case of experimental decorators
-              //      on auto-accessors.
-              //   3. Functions that access our own cache-key property on the instance,
-              //      in the case of experimental decorators on fields.
-              const { get, set } = typeof nameOrContext === 'object'
-                  ? protoOrTarget
-                  : descriptor ??
-                      (() => {
-                          const key = Symbol(`${String(nameOrContext)} (@query() cache)`)
-                              ;
-                          return {
-                              get() {
-                                  return this[key];
-                              },
-                              set(v) {
-                                  this[key] = v;
-                              },
-                          };
-                      })();
-              return desc(protoOrTarget, nameOrContext, {
-                  get() {
-                      let result = get.call(this);
-                      if (result === undefined) {
-                          result = doQuery(this);
-                          if (result !== null || this.hasUpdated) {
-                              set.call(this, result);
-                          }
-                      }
-                      return result;
-                  },
-              });
-          }
-          else {
-              // This object works as the return type for both standard and
-              // experimental decorators.
-              return desc(protoOrTarget, nameOrContext, {
-                  get() {
-                      return doQuery(this);
-                  },
-              });
-          }
+  function queryAsync(selector) {
+      return ((obj, name) => {
+          return desc(obj, name, {
+              async get() {
+                  await this.updateComplete;
+                  return this.renderRoot?.querySelector(selector) ?? null;
+              },
+          });
       });
   }
 
@@ -4429,6 +4381,188 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
+  /**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  window.ShadyDOM?.inUse &&
+      window.ShadyDOM?.noPatch === true
+      ? window.ShadyDOM.wrap
+      : (node) => node;
+  /**
+   * Tests whether a part has only a single-expression with no strings to
+   * interpolate between.
+   *
+   * Only AttributePart and PropertyPart can have multiple expressions.
+   * Multi-expression parts have a `strings` property and single-expression
+   * parts do not.
+   */
+  const isSingleExpression = (part) => part.strings === undefined;
+  // A sentinel value that can never appear as a part value except when set by
+  // live(). Used to force a dirty-check to fail and cause a re-render.
+  const RESET_VALUE = {};
+  /**
+   * Sets the committed value of a ChildPart directly without triggering the
+   * commit stage of the part.
+   *
+   * This is useful in cases where a directive needs to update the part such
+   * that the next update detects a value change or not. When value is omitted,
+   * the next update will be guaranteed to be detected as a change.
+   *
+   * @param part
+   * @param value
+   */
+  const setCommittedValue = (part, value = RESET_VALUE) => (part._$committedValue = value);
+
+  /**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  class LiveDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          if (!(partInfo.type === PartType.PROPERTY ||
+              partInfo.type === PartType.ATTRIBUTE ||
+              partInfo.type === PartType.BOOLEAN_ATTRIBUTE)) {
+              throw new Error('The `live` directive is not allowed on child or event bindings');
+          }
+          if (!isSingleExpression(partInfo)) {
+              throw new Error('`live` bindings can only contain a single expression');
+          }
+      }
+      render(value) {
+          return value;
+      }
+      update(part, [value]) {
+          if (value === noChange || value === nothing) {
+              return value;
+          }
+          const element = part.element;
+          const name = part.name;
+          if (part.type === PartType.PROPERTY) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              if (value === element[name]) {
+                  return noChange;
+              }
+          }
+          else if (part.type === PartType.BOOLEAN_ATTRIBUTE) {
+              if (!!value === element.hasAttribute(name)) {
+                  return noChange;
+              }
+          }
+          else if (part.type === PartType.ATTRIBUTE) {
+              if (element.getAttribute(name) === String(value)) {
+                  return noChange;
+              }
+          }
+          // Resets the part's value, causing its dirty-check to fail so that it
+          // always sets the value.
+          setCommittedValue(part);
+          return value;
+      }
+  }
+  /**
+   * Checks binding values against live DOM values, instead of previously bound
+   * values, when determining whether to update the value.
+   *
+   * This is useful for cases where the DOM value may change from outside of
+   * lit-html, such as with a binding to an `<input>` element's `value` property,
+   * a content editable elements text, or to a custom element that changes it's
+   * own properties or attributes.
+   *
+   * In these cases if the DOM value changes, but the value set through lit-html
+   * bindings hasn't, lit-html won't know to update the DOM value and will leave
+   * it alone. If this is not what you want--if you want to overwrite the DOM
+   * value with the bound value no matter what--use the `live()` directive:
+   *
+   * ```js
+   * html`<input .value=${live(x)}>`
+   * ```
+   *
+   * `live()` performs a strict equality check against the live DOM value, and if
+   * the new value is equal to the live value, does nothing. This means that
+   * `live()` should not be used when the binding will cause a type conversion. If
+   * you use `live()` with an attribute binding, make sure that only strings are
+   * passed in, or the binding will update every render.
+   */
+  const live = directive(LiveDirective);
+
+  var css_248z$6 = 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$5 = 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$4 = 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$3 = 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$2 = 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
+   * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value
+   * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value
+   * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value
+   * @cssprop --overlay-background-color - The drawer and modal component overlay background color
+   * @cssprop --zindex-modal - The drawer and modal component z-index value
+   */
+  class SgdsElement extends LitElement {
+      /** Emits a custom event with more convenient defaults. */
+      emit(name, options) {
+          const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
+          this.dispatchEvent(event);
+          return event;
+      }
+  }
+  SgdsElement.styles = [css_248z$2];
+
+  function generateId (componentName = "", elementName = "") {
+      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
+  }
+
+  class FormControlElement extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The input's label  */
+          this.label = "";
+          /** The input's hint text */
+          this.hintText = "";
+          /** Disables the input. */
+          this.disabled = false;
+          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+          this.invalid = false;
+          this._controlId = generateId("input");
+          this._labelId = generateId("label");
+      }
+      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+      setInvalid(bool) {
+          this.invalid = bool;
+          if (bool) {
+              this.emit("sgds-invalid");
+          }
+          else {
+              this.emit("sgds-valid");
+          }
+      }
+  }
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$6, css_248z$5, css_248z$4, css_248z$3];
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "label", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "hintText", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "name", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "invalid", void 0);
+
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
       const ctor = proto.constructor;
@@ -4449,135 +4583,225 @@
       };
   };
 
-  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));
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
+      /**
+       * 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);
-          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();
               }
-              this.form.append(button);
-              button.click();
-              button.remove();
+              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;
           }
       }
-      /** 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;
+  };
 
   // @watch decorator
   //
@@ -4616,188 +4840,7 @@
       };
   }
 
-  var css_248z$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
-
-  /**
-   * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
-   * @cssprop --sgds-{stateColor}-rgb - State colors in rgb value
-   * @cssprop --sgds-{stateColor}-{weights} - State colors with different weightage in hexadecimal value
-   * @cssprop --sgds-gray-{weights} - State colors with different weightage in hexadecimal value
-   * @cssprop --overlay-background-color - The drawer and modal component overlay background color
-   * @cssprop --zindex-modal - The drawer and modal component z-index value
-   */
-  class SgdsElement extends LitElement {
-      /** Emits a custom event with more convenient defaults. */
-      emit(name, options) {
-          const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
-          this.dispatchEvent(event);
-          return event;
-      }
-  }
-  SgdsElement.styles = [css_248z$5];
-
-  class FormCheckElement extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              value: (control) => (control.checked ? control.value : undefined),
-              defaultValue: (control) => control.defaultChecked,
-              setValue: (control, checked) => (control.checked = checked)
-          });
-          /** For aria-label when there is no appropriate text label visible */
-          this.ariaLabel = "checkbox";
-          /** Makes the checkbox a required field. */
-          this.required = false;
-          /** Draws the checkbox in a checked state. */
-          this.checked = false;
-          /** Disables the checkbox (so the user can't check / uncheck it). */
-          this.disabled = false;
-          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-          this.hasFeedback = false;
-          /** 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.defaultChecked = false;
-          /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
-          /** Marks the checkbox input as indeterminate , with indeterminate logo  */
-          this.indeterminate = false;
-      }
-      _handleInvalidChange() {
-          this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
-      }
-      /** Simulates a click on the checkbox. */
-      click() {
-          this.input.click();
-      }
-      /** Sets focus on the checkbox. */
-      focus(options) {
-          this.input.focus(options);
-      }
-      /** Removes focus from the checkbox. */
-      blur() {
-          this.input.blur();
-      }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          if (!this.input.reportValidity()) {
-              this.invalid = !this.input.checkValidity();
-          }
-          return this.input.reportValidity();
-      }
-      _handleChange() {
-          if (this.indeterminate) {
-              this.indeterminate = !this.indeterminate;
-          }
-          this.checked = !this.checked;
-          this.value = this.input.value;
-          this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
-      }
-      _handleKeyDown(event) {
-          const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-          if (event.key === "Enter" && !hasModifier) {
-              this.click();
-          }
-      }
-      _handleInvalid(e) {
-          e.preventDefault();
-          this.invalid = true;
-      }
-      /** @internal */
-      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();
-      }
-      /** @internal */
-      handleStateChange() {
-          this.invalid = !this.input.checkValidity();
-      }
-      render() {
-          return html `
-      <div
-        class=${classMap({
-            "form-check": true
-        })}
-      >
-        <input
-          class=${classMap({
-            "form-check-input": true,
-            "is-invalid": this.hasFeedback && this.invalid,
-            md: this._size === "md"
-        })}
-          type="checkbox"
-          id=${this._inputId}
-          aria-invalid=${this.invalid ? "true" : "false"}
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          ?checked=${this.checked}
-          ?indeterminate=${this.indeterminate}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          aria-checked=${this.checked ? "true" : "false"}
-          @change=${this._handleChange}
-          @keydown=${this._handleKeyDown}
-          @invalid=${(e) => this._handleInvalid(e)}
-        />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-      </div>
-    `;
-      }
-  }
-  __decorate([
-      query('input[type="checkbox"]')
-  ], FormCheckElement.prototype, "input", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "name", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "ariaLabel", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], FormCheckElement.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "required", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "checked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "hasFeedback", void 0);
-  __decorate([
-      defaultValue("checked")
-  ], FormCheckElement.prototype, "defaultChecked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "invalid", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], FormCheckElement.prototype, "indeterminate", void 0);
-  __decorate([
-      watch("invalid", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "_handleInvalidChange", null);
-  __decorate([
-      property({ type: String })
-  ], FormCheckElement.prototype, "_size", void 0);
-  __decorate([
-      watch("disabled", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "handleDisabledChange", null);
-  __decorate([
-      watch("checked", { waitUntilFirstUpdate: true })
-  ], FormCheckElement.prototype, "handleStateChange", null);
-
-  function genId (componentName = "", elementName = "") {
-      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
-  }
-
-  var css_248z$4 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
+  var css_248z$1 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}`;
 
   /**
    * @summary Checkbox component is used when you require users to select multiple items from a list.
@@ -4805,36 +4848,29 @@
    * @slot default - The label of checkbox.
    *
    * @event sgds-change - Emitted when the checked state changes.
+   * @event sgds-blur - Emitted when input is not in focus.
+   * @event sgds-focus - Emitted when input is in focus.
    * @event sgds-validity-change - Emitted when the invalid state changes. This event is used by sgds-checkbox-group to check the invalid state change of its children
    */
-  class SgdsCheckbox extends SgdsElement {
+  class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this, {
-              value: (control) => (control.checked ? control.value : undefined),
-              defaultValue: (control) => control.defaultChecked,
-              setValue: (control, checked) => (control.checked = checked)
-          });
-          /** Makes the checkbox a required field. */
-          this.required = false;
           /** Draws the checkbox in a checked state. */
           this.checked = false;
-          /** Disables the checkbox (so the user can't check / uncheck it). */
-          this.disabled = false;
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
           /** 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.defaultChecked = false;
-          /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
           /** Marks the checkbox input as indeterminate , with indeterminate logo  */
           this.indeterminate = false;
-          /** @internal For Id/For pair of the HTML form control and label. */
-          this._inputId = genId("checkbox");
+          /** Makes the checkbox a required field. */
+          this.required = false;
+          this._isTouched = false;
       }
       _handleInvalidChange() {
-          this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
+          this.emit("sgds-validity-change", {
+              detail: { invalid: this.invalid, validationMessage: this.input.validationMessage }
+          });
       }
       /** Simulates a click on the checkbox. */
       click() {
@@ -4848,19 +4884,13 @@
       blur() {
           this.input.blur();
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
-      reportValidity() {
-          if (!this.input.reportValidity()) {
-              this.invalid = !this.input.checkValidity();
-          }
-          return this.input.reportValidity();
-      }
-      _handleChange() {
+      _handleChange(e) {
           if (this.indeterminate) {
               this.indeterminate = !this.indeterminate;
           }
           this.checked = !this.checked;
           this.value = this.input.value;
+          super._mixinHandleChange(e);
           this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
       }
       _handleKeyDown(event) {
@@ -4869,6 +4899,13 @@
               this.click();
           }
       }
+      _handleBlur() {
+          this._isTouched = true;
+          this.emit("sgds-blur");
+      }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       _handleInvalid(e) {
           e.preventDefault();
           this.invalid = true;
@@ -4876,12 +4913,43 @@
       /** @internal */
       _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();
+          this.setInvalid(false);
       }
-      /** @internal */
-      _handleStateChange() {
-          this.invalid = !this.input.checkValidity();
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.input.checkValidity();
+          }
+      }
+      _mixinResetFormControl() {
+          this._isTouched = false;
+          this.checked = this.input.checked = this.defaultChecked;
+          this.input.dispatchEvent(new InputEvent("reset"));
+          this._mixinResetValidity(this.input);
+      }
+      /**
+       * 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();
       }
       render() {
           return html `
@@ -4893,45 +4961,35 @@
             "is-invalid": this.hasFeedback && this.invalid
         })}
             type="checkbox"
-            id=${this._inputId}
+            id=${this._controlId}
             aria-invalid=${this.invalid ? "true" : "false"}
             name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            ?checked=${this.checked}
             ?indeterminate=${this.indeterminate}
-            ?disabled=${this.disabled}
             ?required=${this.required}
             aria-disabled=${this.disabled ? "true" : "false"}
             aria-checked=${this.checked ? "true" : "false"}
-            @change=${this._handleChange}
+            @change=${(e) => this._handleChange(e)}
             @keydown=${this._handleKeyDown}
             @invalid=${(e) => this._handleInvalid(e)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            @blur=${this._handleBlur}
+            @focus=${this._handleFocus}
           />
         </div>
-        <label for="${this._inputId}" class="form-check-label"><slot></slot></label>
+        <label for="${this._controlId}" class="form-check-label" id="${this._labelId}"><slot></slot></label>
       </div>
     `;
       }
   }
-  SgdsCheckbox.styles = [...FormCheckElement.styles, css_248z$4];
-  __decorate([
-      query('input[type="checkbox"]')
-  ], SgdsCheckbox.prototype, "input", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsCheckbox.prototype, "name", void 0);
+  SgdsCheckbox.styles = [...FormControlElement.styles, css_248z$1];
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCheckbox.prototype, "value", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "required", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "checked", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "disabled", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsCheckbox.prototype, "hasFeedback", void 0);
@@ -4940,10 +4998,13 @@
   ], SgdsCheckbox.prototype, "defaultChecked", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "invalid", void 0);
+  ], SgdsCheckbox.prototype, "indeterminate", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsCheckbox.prototype, "indeterminate", void 0);
+  ], SgdsCheckbox.prototype, "required", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckbox.prototype, "_isTouched", void 0);
   __decorate([
       watch("invalid", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleInvalidChange", null);
@@ -4951,21 +5012,20 @@
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleDisabledChange", null);
   __decorate([
-      watch("checked", { waitUntilFirstUpdate: true })
-  ], SgdsCheckbox.prototype, "_handleStateChange", null);
-
-  var css_248z$3 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
-
-  var css_248z$2 = css`.form-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}`;
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsCheckbox.prototype, "_handleIsTouched", null);
 
-  var css_248z$1 = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
-
-  var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}`;
 
+  /**
+   * @summary CheckboxGroup is the container that group multiple checkboxes under a single question field.
+   * It handles the display of validation feedback of its checkboxes children.
+   *
+   * @slot default - Pass in `sgds-checkbox` into the default slot
+   */
   class SgdsCheckboxGroup extends SgdsElement {
       constructor() {
           super();
-          /**@internal */
           this.hasInvalidCheckbox = false;
           /** The checkbox group's label  */
           this.label = "";
@@ -4977,6 +5037,7 @@
           this.hintText = "";
           this.addEventListener("sgds-validity-change", (e) => {
               this.hasInvalidCheckbox = e.detail.invalid;
+              this.validationMessage = e.detail.validationMessage;
           });
       }
       _checkInvalidState() {
@@ -5004,7 +5065,7 @@
           ${this._renderHintText()}
         </div>
         <div class="checkbox-container">
-          <slot name="checkbox"></slot>
+          <slot></slot>
         </div>
         ${this.hasInvalidCheckbox && this.hasFeedback
             ? html `
@@ -5015,7 +5076,9 @@
                     fill="#B90000"
                   />
                 </svg>
-                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">${this.invalidFeedback}</div>
+                <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
+                  ${this.invalidFeedback ? this.invalidFeedback : this.validationMessage}
+                </div>
               </div>
             `
             : nothing}
@@ -5023,13 +5086,16 @@
     `;
       }
   }
-  SgdsCheckboxGroup.styles = [...SgdsElement.styles, css_248z$3, css_248z$2, css_248z$1, css_248z];
+  SgdsCheckboxGroup.styles = [...SgdsElement.styles, css_248z$6, css_248z$4, css_248z, css_248z$5];
   __decorate([
-      queryAssignedElements({ slot: "checkbox", flatten: true })
+      queryAssignedElements({ flatten: true })
   ], SgdsCheckboxGroup.prototype, "checkboxes", void 0);
   __decorate([
       state()
   ], SgdsCheckboxGroup.prototype, "hasInvalidCheckbox", void 0);
+  __decorate([
+      state()
+  ], SgdsCheckboxGroup.prototype, "validationMessage", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsCheckboxGroup.prototype, "label", void 0);