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

package/components/Input/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
@@ -144,7 +408,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 +426,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 +677,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 +789,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 +1001,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 +1067,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 +1149,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 +1285,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 +1452,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.`);
   }
 
@@ -1197,344 +1461,70 @@
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  let issueWarning$4;
+  // Allows minifiers to rename references to globalThis
+  const global$2 = globalThis;
+  /**
+   * Useful for visualizing and logging insights into what the Lit template system is doing.
+   *
+   * Compiled out of prod mode builds.
+   */
+  const debugLogEvent$1 = (event) => {
+          const shouldEmit = global$2
+              .emitLitDebugLogEvents;
+          if (!shouldEmit) {
+              return;
+          }
+          global$2.dispatchEvent(new CustomEvent('lit-debug', {
+              detail: event,
+          }));
+      }
+      ;
+  // Used for connecting beginRender and endRender events when there are nested
+  // renders when errors are thrown preventing an endRender event from being
+  // called.
+  let debugLogRenderId = 0;
+  let issueWarning$3;
   {
-      // Ensure warnings are issued only 1x, even if multiple versions of Lit
-      // are loaded.
-      const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
+      global$2.litIssuedWarnings ??= new Set();
       // Issue a warning, if we haven't already.
-      issueWarning$4 = (code, warning) => {
-          warning += ` See https://lit.dev/msg/${code} for more information.`;
-          if (!issuedWarnings.has(warning)) {
+      issueWarning$3 = (code, warning) => {
+          warning += code
+              ? ` See https://lit.dev/msg/${code} for more information.`
+              : '';
+          if (!global$2.litIssuedWarnings.has(warning)) {
               console.warn(warning);
-              issuedWarnings.add(warning);
+              global$2.litIssuedWarnings.add(warning);
           }
       };
+      issueWarning$3('dev-mode', `Lit is in dev mode. Not recommended for production!`);
   }
-  const legacyProperty = (options, proto, name) => {
-      const hasOwnProperty = proto.hasOwnProperty(name);
-      proto.constructor.createProperty(name, hasOwnProperty ? { ...options, wrapped: true } : options);
-      // For accessors (which have a descriptor on the prototype) we need to
-      // return a descriptor, otherwise TypeScript overwrites the descriptor we
-      // define in createProperty() with the original descriptor. We don't do this
-      // for fields, which don't have a descriptor, because this could overwrite
-      // descriptor defined by other decorators.
-      return hasOwnProperty
-          ? Object.getOwnPropertyDescriptor(proto, name)
-          : undefined;
-  };
-  // This is duplicated from a similar variable in reactive-element.ts, but
-  // actually makes sense to have this default defined with the decorator, so
-  // that different decorators could have different defaults.
-  const defaultPropertyDeclaration$1 = {
-      attribute: true,
-      type: String,
-      converter: defaultConverter$1,
-      reflect: false,
-      hasChanged: notEqual$1,
-  };
+  const wrap = global$2.ShadyDOM?.inUse &&
+      global$2.ShadyDOM?.noPatch === true
+      ? global$2.ShadyDOM.wrap
+      : (node) => node;
+  const trustedTypes$1 = global$2.trustedTypes;
   /**
-   * Wraps a class accessor or setter so that `requestUpdate()` is called with the
-   * property name and old value when the accessor is set.
+   * Our TrustedTypePolicy for HTML which is declared using the html template
+   * tag function.
+   *
+   * That HTML is a developer-authored constant, and is parsed with innerHTML
+   * before any untrusted expressions have been mixed in. Therefor it is
+   * considered safe by construction.
    */
-  const standardProperty = (options = defaultPropertyDeclaration$1, target, context) => {
-      const { kind, metadata } = context;
-      if (metadata == null) {
-          issueWarning$4('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.`);
-      }
-      // Store the property options
-      let properties = globalThis.litPropertyMetadata.get(metadata);
-      if (properties === undefined) {
-          globalThis.litPropertyMetadata.set(metadata, (properties = new Map()));
-      }
-      properties.set(context.name, options);
-      if (kind === 'accessor') {
-          // Standard decorators cannot dynamically modify the class, so we can't
-          // replace a field with accessors. The user must use the new `accessor`
-          // keyword instead.
-          const { name } = context;
-          return {
-              set(v) {
-                  const oldValue = target.get.call(this);
-                  target.set.call(this, v);
-                  this.requestUpdate(name, oldValue, options);
-              },
-              init(v) {
-                  if (v !== undefined) {
-                      this._$changeProperty(name, undefined, options);
-                  }
-                  return v;
-              },
-          };
-      }
-      else if (kind === 'setter') {
-          const { name } = context;
-          return function (value) {
-              const oldValue = this[name];
-              target.call(this, value);
-              this.requestUpdate(name, oldValue, options);
-          };
+  const policy = trustedTypes$1
+      ? trustedTypes$1.createPolicy('lit-html', {
+          createHTML: (s) => s,
+      })
+      : undefined;
+  const identityFunction = (value) => value;
+  const noopSanitizer = (_node, _name, _type) => identityFunction;
+  /** Sets the global sanitizer factory. */
+  const setSanitizer = (newSanitizer) => {
+      if (sanitizerFactoryInternal !== noopSanitizer) {
+          throw new Error(`Attempted to overwrite existing lit-html security policy.` +
+              ` setSanitizeDOMValueFactory should be called at most once.`);
       }
-      throw new Error(`Unsupported decorator location: ${kind}`);
-  };
-  /**
-   * A class field or accessor decorator which creates a reactive property that
-   * reflects a corresponding attribute value. When a decorated property is set
-   * the element will update and render. A {@linkcode PropertyDeclaration} may
-   * optionally be supplied to configure property features.
-   *
-   * This decorator should only be used for public fields. As public fields,
-   * properties should be considered as primarily settable by element users,
-   * either via attribute or the property itself.
-   *
-   * Generally, properties that are changed by the element should be private or
-   * protected fields and should use the {@linkcode state} decorator.
-   *
-   * However, sometimes element code does need to set a public property. This
-   * should typically only be done in response to user interaction, and an event
-   * should be fired informing the user; for example, a checkbox sets its
-   * `checked` property when clicked and fires a `changed` event. Mutating public
-   * properties should typically not be done for non-primitive (object or array)
-   * properties. In other cases when an element needs to manage state, a private
-   * property decorated via the {@linkcode state} decorator should be used. When
-   * needed, state properties can be initialized via public properties to
-   * facilitate complex interactions.
-   *
-   * ```ts
-   * class MyElement {
-   *   @property({ type: Boolean })
-   *   clicked = false;
-   * }
-   * ```
-   * @category Decorator
-   * @ExportDecoratedItems
-   */
-  function property(options) {
-      return (protoOrTarget, nameOrContext
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ) => {
-          return (typeof nameOrContext === 'object'
-              ? standardProperty(options, protoOrTarget, nameOrContext)
-              : legacyProperty(options, protoOrTarget, nameOrContext));
-      };
-  }
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  /**
-   * Wraps up a few best practices when returning a property descriptor from a
-   * decorator.
-   *
-   * Marks the defined property as configurable, and enumerable, and handles
-   * the case where we have a busted Reflect.decorate zombiefill (e.g. in Angular
-   * apps).
-   *
-   * @internal
-   */
-  const desc = (obj, name, descriptor) => {
-      // For backwards compatibility, we keep them configurable and enumerable.
-      descriptor.configurable = true;
-      descriptor.enumerable = true;
-      if (
-      // We check for Reflect.decorate each time, in case the zombiefill
-      // is applied via lazy loading some Angular code.
-      Reflect.decorate &&
-          typeof name !== 'object') {
-          // If we're called as a legacy decorator, and Reflect.decorate is present
-          // then we have no guarantees that the returned descriptor will be
-          // defined on the class, so we must apply it directly ourselves.
-          Object.defineProperty(obj, name, descriptor);
-      }
-      return descriptor;
-  };
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  let issueWarning$3;
-  {
-      // 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$3 = (code, warning) => {
-          warning += code
-              ? ` See https://lit.dev/msg/${code} for more information.`
-              : '';
-          if (!issuedWarnings.has(warning)) {
-              console.warn(warning);
-              issuedWarnings.add(warning);
-          }
-      };
-  }
-  /**
-   * A property decorator that converts a class property into a getter that
-   * executes a querySelector on the element's renderRoot.
-   *
-   * @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;
-   *
-   *   render() {
-   *     return html`
-   *       <div id="first"></div>
-   *       <div id="second"></div>
-   *     `;
-   *   }
-   * }
-   * ```
-   * @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$3('', `@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);
-                  },
-              });
-          }
-      });
-  }
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  // Allows minifiers to rename references to globalThis
-  const global$2 = globalThis;
-  /**
-   * Useful for visualizing and logging insights into what the Lit template system is doing.
-   *
-   * Compiled out of prod mode builds.
-   */
-  const debugLogEvent$1 = (event) => {
-          const shouldEmit = global$2
-              .emitLitDebugLogEvents;
-          if (!shouldEmit) {
-              return;
-          }
-          global$2.dispatchEvent(new CustomEvent('lit-debug', {
-              detail: event,
-          }));
-      }
-      ;
-  // Used for connecting beginRender and endRender events when there are nested
-  // renders when errors are thrown preventing an endRender event from being
-  // called.
-  let debugLogRenderId = 0;
-  let issueWarning$2;
-  {
-      global$2.litIssuedWarnings ??= new Set();
-      // Issue a warning, if we haven't already.
-      issueWarning$2 = (code, warning) => {
-          warning += code
-              ? ` See https://lit.dev/msg/${code} for more information.`
-              : '';
-          if (!global$2.litIssuedWarnings.has(warning)) {
-              console.warn(warning);
-              global$2.litIssuedWarnings.add(warning);
-          }
-      };
-      issueWarning$2('dev-mode', `Lit is in dev mode. Not recommended for production!`);
-  }
-  const wrap = global$2.ShadyDOM?.inUse &&
-      global$2.ShadyDOM?.noPatch === true
-      ? global$2.ShadyDOM.wrap
-      : (node) => node;
-  const trustedTypes$1 = global$2.trustedTypes;
-  /**
-   * Our TrustedTypePolicy for HTML which is declared using the html template
-   * tag function.
-   *
-   * That HTML is a developer-authored constant, and is parsed with innerHTML
-   * before any untrusted expressions have been mixed in. Therefor it is
-   * considered safe by construction.
-   */
-  const policy = trustedTypes$1
-      ? trustedTypes$1.createPolicy('lit-html', {
-          createHTML: (s) => s,
-      })
-      : undefined;
-  const identityFunction = (value) => value;
-  const noopSanitizer = (_node, _name, _type) => identityFunction;
-  /** Sets the global sanitizer factory. */
-  const setSanitizer = (newSanitizer) => {
-      if (sanitizerFactoryInternal !== noopSanitizer) {
-          throw new Error(`Attempted to overwrite existing lit-html security policy.` +
-              ` setSanitizeDOMValueFactory should be called at most once.`);
-      }
-      sanitizerFactoryInternal = newSanitizer;
+      sanitizerFactoryInternal = newSanitizer;
   };
   /**
    * Only used in internal tests, not a part of the public API.
@@ -1657,7 +1647,7 @@
           // handle. Instead we know that static values must have the field
           // `_$litStatic$`.
           if (values.some((val) => val?.['_$litStatic$'])) {
-              issueWarning$2('', `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`);
           }
       }
@@ -1937,7 +1927,7 @@
                               throw new Error(m);
                           }
                           else
-                              issueWarning$2('', m);
+                              issueWarning$3('', m);
                       }
                   }
                   // TODO (justinfagnani): for attempted dynamic tag names, we don't
@@ -2783,7 +2773,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$2('multiple-versions', `Multiple versions of Lit loaded. ` +
+      issueWarning$3('multiple-versions', `Multiple versions of Lit loaded. ` +
           `Loading multiple versions is not recommended.`);
   }
   /**
@@ -2862,681 +2852,267 @@
 
   /**
    * @license
-   * Copyright 2017 Google LLC
+   * Copyright 2019 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  const PartType = {
-      ATTRIBUTE: 1,
-      CHILD: 2,
-      PROPERTY: 3,
-      BOOLEAN_ATTRIBUTE: 4,
-      EVENT: 5,
-      ELEMENT: 6,
-  };
+  const NODE_MODE = false;
+  // Allows minifiers to rename references to globalThis
+  const global$1 = globalThis;
   /**
-   * Creates a user-facing directive function from a Directive class. This
-   * function has the same parameters as the directive's render() method.
+   * Whether the current browser supports `adoptedStyleSheets`.
    */
-  const directive = (c) => (...values) => ({
-      // This property needs to remain unminified.
-      ['_$litDirective$']: c,
-      values,
-  });
+  const supportsAdoptingStyleSheets = global$1.ShadowRoot &&
+      (global$1.ShadyCSS === undefined || global$1.ShadyCSS.nativeShadow) &&
+      'adoptedStyleSheets' in Document.prototype &&
+      'replace' in CSSStyleSheet.prototype;
+  const constructionToken = Symbol();
+  const cssTagCache = new WeakMap();
   /**
-   * Base class for creating custom directives. Users should extend this class,
-   * implement `render` and/or `update`, and then pass their subclass to
-   * `directive`.
+   * A container for a string of CSS text, that may be used to create a CSSStyleSheet.
+   *
+   * CSSResult is the return value of `css`-tagged template literals and
+   * `unsafeCSS()`. In order to ensure that CSSResults are only created via the
+   * `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.
    */
-  class Directive {
-      constructor(_partInfo) { }
-      // See comment in Disconnectable interface for why this is a getter
-      get _$isConnected() {
-          return this._$parent._$isConnected;
+  class CSSResult {
+      constructor(cssText, strings, safeToken) {
+          // This property needs to remain unminified.
+          this['_$cssResult$'] = true;
+          if (safeToken !== constructionToken) {
+              throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
+          }
+          this.cssText = cssText;
+          this._strings = strings;
       }
-      /** @internal */
-      _$initialize(part, parent, attributeIndex) {
-          this.__part = part;
-          this._$parent = parent;
-          this.__attributeIndex = attributeIndex;
+      // This is a getter so that it's lazy. In practice, this means stylesheets
+      // are not created until the first element instance is made.
+      get styleSheet() {
+          // If `supportsAdoptingStyleSheets` is true then we assume CSSStyleSheet is
+          // constructable.
+          let styleSheet = this._styleSheet;
+          const strings = this._strings;
+          if (supportsAdoptingStyleSheets && styleSheet === undefined) {
+              const cacheable = strings !== undefined && strings.length === 1;
+              if (cacheable) {
+                  styleSheet = cssTagCache.get(strings);
+              }
+              if (styleSheet === undefined) {
+                  (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(this.cssText);
+                  if (cacheable) {
+                      cssTagCache.set(strings, styleSheet);
+                  }
+              }
+          }
+          return styleSheet;
       }
-      /** @internal */
-      _$resolve(part, props) {
-          return this.update(part, props);
-      }
-      update(_part, props) {
-          return this.render(...props);
+      toString() {
+          return this.cssText;
       }
   }
-
-  /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  class ClassMapDirective extends Directive {
-      constructor(partInfo) {
-          super(partInfo);
-          if (partInfo.type !== PartType.ATTRIBUTE ||
-              partInfo.name !== 'class' ||
-              partInfo.strings?.length > 2) {
-              throw new Error('`classMap()` can only be used in the `class` attribute ' +
-                  'and must be the only part in the attribute.');
-          }
+  const textFromCSSResult = (value) => {
+      // This property needs to remain unminified.
+      if (value['_$cssResult$'] === true) {
+          return value.cssText;
       }
-      render(classInfo) {
-          // Add spaces to ensure separation from static classes
-          return (' ' +
-              Object.keys(classInfo)
-                  .filter((key) => classInfo[key])
-                  .join(' ') +
-              ' ');
+      else if (typeof value === 'number') {
+          return value;
       }
-      update(part, [classInfo]) {
-          // Remember dynamic classes on the first render
-          if (this._previousClasses === undefined) {
-              this._previousClasses = new Set();
-              if (part.strings !== undefined) {
-                  this._staticClasses = new Set(part.strings
-                      .join(' ')
-                      .split(/\s/)
-                      .filter((s) => s !== ''));
-              }
-              for (const name in classInfo) {
-                  if (classInfo[name] && !this._staticClasses?.has(name)) {
-                      this._previousClasses.add(name);
-                  }
-              }
-              return this.render(classInfo);
-          }
-          const classList = part.element.classList;
-          // Remove old classes that no longer apply
-          for (const name of this._previousClasses) {
-              if (!(name in classInfo)) {
-                  classList.remove(name);
-                  this._previousClasses.delete(name);
-              }
-          }
-          // Add or remove classes based on their classMap value
-          for (const name in classInfo) {
-              // We explicitly want a loose truthy check of `value` because it seems
-              // more convenient that '' and 0 are skipped.
-              const value = !!classInfo[name];
-              if (value !== this._previousClasses.has(name) &&
-                  !this._staticClasses?.has(name)) {
-                  if (value) {
-                      classList.add(name);
-                      this._previousClasses.add(name);
-                  }
-                  else {
-                      classList.remove(name);
-                      this._previousClasses.delete(name);
-                  }
-              }
-          }
-          return noChange;
+      else {
+          throw new Error(`Value passed to 'css' function must be a 'css' function result: ` +
+              `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +
+              `to ensure page security.`);
       }
-  }
-  /**
-   * A directive that applies dynamic CSS classes.
-   *
-   * This must be used in the `class` attribute and must be the only part used in
-   * the attribute. It takes each property in the `classInfo` argument and adds
-   * the property name to the element's `classList` if the property value is
-   * truthy; if the property value is falsy, the property name is removed from
-   * the element's `class`.
-   *
-   * For example `{foo: bar}` applies the class `foo` if the value of `bar` is
-   * truthy.
-   *
-   * @param classInfo
-   */
-  const classMap = directive(ClassMapDirective);
-
-  /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  /**
-   * For AttributeParts, sets the attribute if the value is defined and removes
-   * the attribute if the value is undefined.
-   *
-   * For other part types, this directive is a no-op.
-   */
-  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.
+   * Wrap a value for interpolation in a {@linkcode css} tagged template literal.
    *
-   * Only AttributePart and PropertyPart can have multiple expressions.
-   * Multi-expression parts have a `strings` property and single-expression
-   * parts do not.
+   * This is unsafe because untrusted CSS text can be used to phone home
+   * or exfiltrate data to an attacker controlled site. Take care to only use
+   * this with trusted input.
    */
-  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 = {};
+  const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), undefined, constructionToken);
   /**
-   * 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.
+   * A template literal tag which can be used with LitElement's
+   * {@linkcode LitElement.styles} property to set element styles.
    *
-   * @param part
-   * @param value
+   * For security reasons, only literal string values and number may be used in
+   * embedded expressions. To incorporate non-literal values {@linkcode unsafeCSS}
+   * may be used inside an expression.
    */
-  const setCommittedValue = (part, value = RESET_VALUE) => (part._$committedValue = value);
-
+  const css = (strings, ...values) => {
+      const cssText = strings.length === 1
+          ? strings[0]
+          : values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
+      return new CSSResult(cssText, strings, constructionToken);
+  };
   /**
-   * @license
-   * Copyright 2020 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
+   * 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.
    */
-  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;
+  const adoptStyles = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets) {
+          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
       }
-      update(part, [value]) {
-          if (value === noChange || value === nothing) {
-              return value;
-          }
-          const element = part.element;
-          const name = part.name;
-          if (part.type === PartType.PROPERTY) {
+      else {
+          for (const s of styles) {
+              const style = document.createElement('style');
               // 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;
+              const nonce = global$1['litNonce'];
+              if (nonce !== undefined) {
+                  style.setAttribute('nonce', nonce);
               }
+              style.textContent = s.cssText;
+              renderRoot.appendChild(style);
           }
-          // 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);
+  };
+  const cssResultFromStyleSheet = (sheet) => {
+      let cssText = '';
+      for (const rule of sheet.cssRules) {
+          cssText += rule.cssText;
+      }
+      return unsafeCSS(cssText);
+  };
+  const getCompatibleStyle = supportsAdoptingStyleSheets ||
+      (NODE_MODE )
+      ? (s) => s
+      : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
 
   /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  const HTML_RESULT = 1;
-  class UnsafeHTMLDirective extends Directive {
-      constructor(partInfo) {
-          super(partInfo);
-          this._value = nothing;
-          if (partInfo.type !== PartType.CHILD) {
-              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
-          }
-      }
-      render(value) {
-          if (value === nothing || value == null) {
-              this._templateResult = undefined;
-              return (this._value = value);
-          }
-          if (value === noChange) {
-              return value;
-          }
-          if (typeof value != 'string') {
-              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
-          }
-          if (value === this._value) {
-              return this._templateResult;
+  // TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
+  const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
+  // Lets a minifier replace globalThis references with a minified name
+  const global = globalThis;
+  let issueWarning$2;
+  const trustedTypes = global
+      .trustedTypes;
+  // Temporary workaround for https://crbug.com/993268
+  // Currently, any attribute starting with "on" is considered to be a
+  // TrustedScript source. Such boolean attributes must be set to the equivalent
+  // trusted emptyScript value.
+  const emptyStringForBooleanAttribute = trustedTypes
+      ? trustedTypes.emptyScript
+      : '';
+  const polyfillSupport$1 = global.reactiveElementPolyfillSupportDevMode
+      ;
+  {
+      // Ensure warnings are issued only 1x, even if multiple versions of Lit
+      // are loaded.
+      const issuedWarnings = (global.litIssuedWarnings ??=
+          new Set());
+      // Issue a warning, if we haven't already.
+      issueWarning$2 = (code, warning) => {
+          warning += ` See https://lit.dev/msg/${code} for more information.`;
+          if (!issuedWarnings.has(warning)) {
+              console.warn(warning);
+              issuedWarnings.add(warning);
           }
-          this._value = value;
-          const strings = [value];
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          strings.raw = strings;
-          // WARNING: impersonating a TemplateResult like this is extremely
-          // dangerous. Third-party directives should not do this.
-          return (this._templateResult = {
-              // Cast to a known set of integers that satisfy ResultType so that we
-              // don't have to export ResultType and possibly encourage this pattern.
-              // This property needs to remain unminified.
-              ['_$litType$']: this.constructor
-                  .resultType,
-              strings,
-              values: [],
-          });
+      };
+      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$2('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
+              `the \`polyfill-support\` module has not been loaded.`);
       }
   }
-  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
-  UnsafeHTMLDirective.resultType = HTML_RESULT;
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const SVG_RESULT = 2;
-  class UnsafeSVGDirective extends UnsafeHTMLDirective {
-  }
-  UnsafeSVGDirective.directiveName = 'unsafeSVG';
-  UnsafeSVGDirective.resultType = SVG_RESULT;
-  /**
-   * Renders the result as SVG, rather than text.
-   *
-   * The values `undefined`, `null`, and `nothing`, will all result in no content
-   * (empty string) being rendered.
-   *
-   * Note, this is unsafe to use with any user-provided input that hasn't been
-   * sanitized or escaped, as it may lead to cross-site-scripting
-   * vulnerabilities.
-   */
-  const unsafeSVG = directive(UnsafeSVGDirective);
-
-  /**
-   * @license
-   * Copyright 2020 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
   /**
-   * Prevents JSON injection attacks.
-   *
-   * The goals of this brand:
-   *   1) fast to check
-   *   2) code is small on the wire
-   *   3) multiple versions of Lit in a single page will all produce mutually
-   *      interoperable StaticValues
-   *   4) normal JSON.parse (without an unusual reviver) can not produce a
-   *      StaticValue
+   * Useful for visualizing and logging insights into what the Lit template system is doing.
    *
-   * Symbols satisfy (1), (2), and (4). We use Symbol.for to satisfy (3), but
-   * we don't care about the key, so we break ties via (2) and use the empty
-   * string.
+   * Compiled out of prod mode builds.
    */
-  const brand = Symbol.for('');
-  /** Safely extracts the string part of a StaticValue. */
-  const unwrapStaticValue = (value) => {
-      if (value?.r !== brand) {
-          return undefined;
+  const debugLogEvent = (event) => {
+          const shouldEmit = global
+              .emitLitDebugLogEvents;
+          if (!shouldEmit) {
+              return;
+          }
+          global.dispatchEvent(new CustomEvent('lit-debug', {
+              detail: event,
+          }));
       }
-      return value?.['_$litStatic$'];
-  };
-  const stringsCache = new Map();
-  /**
-   * Wraps a lit-html template tag (`html` or `svg`) to add static value support.
+      ;
+  /*
+   * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
+   * replaced at compile time by the munged name for object[property]. We cannot
+   * alias this function, so we have to use a small shim that has the same
+   * behavior when not compiling.
    */
-  const withStatic = (coreTag) => (strings, ...values) => {
-      const l = values.length;
-      let staticValue;
-      let dynamicValue;
-      const staticStrings = [];
-      const dynamicValues = [];
-      let i = 0;
-      let hasStatics = false;
-      let s;
-      while (i < l) {
-          s = strings[i];
-          // Collect any unsafeStatic values, and their following template strings
-          // so that we treat a run of template strings and unsafe static values as
-          // a single template string.
-          while (i < l &&
-              ((dynamicValue = values[i]),
-                  (staticValue = unwrapStaticValue(dynamicValue))) !== undefined) {
-              s += staticValue + strings[++i];
-              hasStatics = true;
-          }
-          // If the last value is static, we don't need to push it.
-          if (i !== l) {
-              dynamicValues.push(dynamicValue);
+  /*@__INLINE__*/
+  const JSCompiler_renameProperty$1 = (prop, _obj) => prop;
+  const defaultConverter = {
+      toAttribute(value, type) {
+          switch (type) {
+              case Boolean:
+                  value = value ? emptyStringForBooleanAttribute : null;
+                  break;
+              case Object:
+              case Array:
+                  // if the value is `null` or `undefined` pass this through
+                  // to allow removing/no change behavior.
+                  value = value == null ? value : JSON.stringify(value);
+                  break;
           }
-          staticStrings.push(s);
-          i++;
-      }
-      // If the last value isn't static (which would have consumed the last
-      // string), then we need to add the last string.
-      if (i === l) {
-          staticStrings.push(strings[l]);
-      }
-      if (hasStatics) {
-          const key = staticStrings.join('$$lit$$');
-          strings = stringsCache.get(key);
-          if (strings === undefined) {
-              // Beware: in general this pattern is unsafe, and doing so may bypass
-              // lit's security checks and allow an attacker to execute arbitrary
-              // code and inject arbitrary content.
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              staticStrings.raw = staticStrings;
-              stringsCache.set(key, (strings = staticStrings));
+          return value;
+      },
+      fromAttribute(value, type) {
+          let fromValue = value;
+          switch (type) {
+              case Boolean:
+                  fromValue = value !== null;
+                  break;
+              case Number:
+                  fromValue = value === null ? null : Number(value);
+                  break;
+              case Object:
+              case Array:
+                  // Do *not* generate exception when invalid JSON is set as elements
+                  // don't normally complain on being mis-configured.
+                  // TODO(sorvell): Do generate exception in *dev mode*.
+                  try {
+                      // Assert to adhere to Bazel's "must type assert JSON parse" rule.
+                      fromValue = JSON.parse(value);
+                  }
+                  catch (e) {
+                      fromValue = null;
+                  }
+                  break;
           }
-          values = dynamicValues;
-      }
-      return coreTag(strings, ...values);
+          return fromValue;
+      },
   };
   /**
-   * Interprets a template literal as an HTML template that can efficiently
-   * render to and update a container.
-   *
-   * Includes static value support from `lit-html/static.js`.
-   */
-  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
-   * SPDX-License-Identifier: BSD-3-Clause
+   * Change function that returns true if `value` is different from `oldValue`.
+   * This method is used as the default for a property's `hasChanged` function.
    */
-  const NODE_MODE = false;
-  // Allows minifiers to rename references to globalThis
-  const global$1 = globalThis;
+  const notEqual = (value, old) => !is(value, old);
+  const defaultPropertyDeclaration$1 = {
+      attribute: true,
+      type: String,
+      converter: defaultConverter,
+      reflect: false,
+      hasChanged: notEqual,
+  };
+  // Ensure metadata is enabled. TypeScript does not polyfill
+  // Symbol.metadata, so we must ensure that it exists.
+  Symbol.metadata ??= Symbol('metadata');
+  // Map from a class's metadata object to property options
+  // Note that we must use nullish-coalescing assignment so that we only use one
+  // map even if we load multiple version of this module.
+  global.litPropertyMetadata ??= new WeakMap();
   /**
-   * Whether the current browser supports `adoptedStyleSheets`.
-   */
-  const supportsAdoptingStyleSheets = global$1.ShadowRoot &&
-      (global$1.ShadyCSS === undefined || global$1.ShadyCSS.nativeShadow) &&
-      'adoptedStyleSheets' in Document.prototype &&
-      'replace' in CSSStyleSheet.prototype;
-  const constructionToken = Symbol();
-  const cssTagCache = new WeakMap();
-  /**
-   * A container for a string of CSS text, that may be used to create a CSSStyleSheet.
-   *
-   * CSSResult is the return value of `css`-tagged template literals and
-   * `unsafeCSS()`. In order to ensure that CSSResults are only created via the
-   * `css` tag and `unsafeCSS()`, CSSResult cannot be constructed directly.
-   */
-  class CSSResult {
-      constructor(cssText, strings, safeToken) {
-          // This property needs to remain unminified.
-          this['_$cssResult$'] = true;
-          if (safeToken !== constructionToken) {
-              throw new Error('CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
-          }
-          this.cssText = cssText;
-          this._strings = strings;
-      }
-      // This is a getter so that it's lazy. In practice, this means stylesheets
-      // are not created until the first element instance is made.
-      get styleSheet() {
-          // If `supportsAdoptingStyleSheets` is true then we assume CSSStyleSheet is
-          // constructable.
-          let styleSheet = this._styleSheet;
-          const strings = this._strings;
-          if (supportsAdoptingStyleSheets && styleSheet === undefined) {
-              const cacheable = strings !== undefined && strings.length === 1;
-              if (cacheable) {
-                  styleSheet = cssTagCache.get(strings);
-              }
-              if (styleSheet === undefined) {
-                  (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(this.cssText);
-                  if (cacheable) {
-                      cssTagCache.set(strings, styleSheet);
-                  }
-              }
-          }
-          return styleSheet;
-      }
-      toString() {
-          return this.cssText;
-      }
-  }
-  const textFromCSSResult = (value) => {
-      // This property needs to remain unminified.
-      if (value['_$cssResult$'] === true) {
-          return value.cssText;
-      }
-      else if (typeof value === 'number') {
-          return value;
-      }
-      else {
-          throw new Error(`Value passed to 'css' function must be a 'css' function result: ` +
-              `${value}. Use 'unsafeCSS' to pass non-literal values, but take care ` +
-              `to ensure page security.`);
-      }
-  };
-  /**
-   * Wrap a value for interpolation in a {@linkcode css} tagged template literal.
-   *
-   * This is unsafe because untrusted CSS text can be used to phone home
-   * or exfiltrate data to an attacker controlled site. Take care to only use
-   * this with trusted input.
-   */
-  const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), undefined, constructionToken);
-  /**
-   * A template literal tag which can be used with LitElement's
-   * {@linkcode LitElement.styles} property to set element styles.
-   *
-   * For security reasons, only literal string values and number may be used in
-   * embedded expressions. To incorporate non-literal values {@linkcode unsafeCSS}
-   * may be used inside an expression.
-   */
-  const css = (strings, ...values) => {
-      const cssText = strings.length === 1
-          ? strings[0]
-          : values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]);
-      return new CSSResult(cssText, strings, constructionToken);
-  };
-  /**
-   * 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 = (renderRoot, styles) => {
-      if (supportsAdoptingStyleSheets) {
-          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
-      }
-      else {
-          for (const s of styles) {
-              const style = document.createElement('style');
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const nonce = global$1['litNonce'];
-              if (nonce !== undefined) {
-                  style.setAttribute('nonce', nonce);
-              }
-              style.textContent = s.cssText;
-              renderRoot.appendChild(style);
-          }
-      }
-  };
-  const cssResultFromStyleSheet = (sheet) => {
-      let cssText = '';
-      for (const rule of sheet.cssRules) {
-          cssText += rule.cssText;
-      }
-      return unsafeCSS(cssText);
-  };
-  const getCompatibleStyle = supportsAdoptingStyleSheets ||
-      (NODE_MODE )
-      ? (s) => s
-      : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  // TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
-  const { is, defineProperty, getOwnPropertyDescriptor, getOwnPropertyNames, getOwnPropertySymbols, getPrototypeOf, } = Object;
-  // Lets a minifier replace globalThis references with a minified name
-  const global = globalThis;
-  let issueWarning$1;
-  const trustedTypes = global
-      .trustedTypes;
-  // Temporary workaround for https://crbug.com/993268
-  // Currently, any attribute starting with "on" is considered to be a
-  // TrustedScript source. Such boolean attributes must be set to the equivalent
-  // trusted emptyScript value.
-  const emptyStringForBooleanAttribute = trustedTypes
-      ? trustedTypes.emptyScript
-      : '';
-  const polyfillSupport$1 = global.reactiveElementPolyfillSupportDevMode
-      ;
-  {
-      // Ensure warnings are issued only 1x, even if multiple versions of Lit
-      // are loaded.
-      const issuedWarnings = (global.litIssuedWarnings ??=
-          new Set());
-      // Issue a warning, if we haven't already.
-      issueWarning$1 = (code, warning) => {
-          warning += ` See https://lit.dev/msg/${code} for more information.`;
-          if (!issuedWarnings.has(warning)) {
-              console.warn(warning);
-              issuedWarnings.add(warning);
-          }
-      };
-      issueWarning$1('dev-mode', `Lit is in dev mode. Not recommended for production!`);
-      // Issue polyfill support warning.
-      if (global.ShadyDOM?.inUse && polyfillSupport$1 === undefined) {
-          issueWarning$1('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
-              `the \`polyfill-support\` module has not been loaded.`);
-      }
-  }
-  /**
-   * Useful for visualizing and logging insights into what the Lit template system is doing.
-   *
-   * Compiled out of prod mode builds.
-   */
-  const debugLogEvent = (event) => {
-          const shouldEmit = global
-              .emitLitDebugLogEvents;
-          if (!shouldEmit) {
-              return;
-          }
-          global.dispatchEvent(new CustomEvent('lit-debug', {
-              detail: event,
-          }));
-      }
-      ;
-  /*
-   * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
-   * replaced at compile time by the munged name for object[property]. We cannot
-   * alias this function, so we have to use a small shim that has the same
-   * behavior when not compiling.
-   */
-  /*@__INLINE__*/
-  const JSCompiler_renameProperty$1 = (prop, _obj) => prop;
-  const defaultConverter = {
-      toAttribute(value, type) {
-          switch (type) {
-              case Boolean:
-                  value = value ? emptyStringForBooleanAttribute : null;
-                  break;
-              case Object:
-              case Array:
-                  // if the value is `null` or `undefined` pass this through
-                  // to allow removing/no change behavior.
-                  value = value == null ? value : JSON.stringify(value);
-                  break;
-          }
-          return value;
-      },
-      fromAttribute(value, type) {
-          let fromValue = value;
-          switch (type) {
-              case Boolean:
-                  fromValue = value !== null;
-                  break;
-              case Number:
-                  fromValue = value === null ? null : Number(value);
-                  break;
-              case Object:
-              case Array:
-                  // Do *not* generate exception when invalid JSON is set as elements
-                  // don't normally complain on being mis-configured.
-                  // TODO(sorvell): Do generate exception in *dev mode*.
-                  try {
-                      // Assert to adhere to Bazel's "must type assert JSON parse" rule.
-                      fromValue = JSON.parse(value);
-                  }
-                  catch (e) {
-                      fromValue = null;
-                  }
-                  break;
-          }
-          return fromValue;
-      },
-  };
-  /**
-   * Change function that returns true if `value` is different from `oldValue`.
-   * This method is used as the default for a property's `hasChanged` function.
-   */
-  const notEqual = (value, old) => !is(value, old);
-  const defaultPropertyDeclaration = {
-      attribute: true,
-      type: String,
-      converter: defaultConverter,
-      reflect: false,
-      hasChanged: notEqual,
-  };
-  // Ensure metadata is enabled. TypeScript does not polyfill
-  // Symbol.metadata, so we must ensure that it exists.
-  Symbol.metadata ??= Symbol('metadata');
-  // Map from a class's metadata object to property options
-  // Note that we must use nullish-coalescing assignment so that we only use one
-  // map even if we load multiple version of this module.
-  global.litPropertyMetadata ??= new WeakMap();
-  /**
-   * Base element class which manages element properties and attributes. When
-   * properties change, the `update` method is asynchronously called. This method
-   * should be supplied by subclasses to render updates as desired.
-   * @noInheritDoc
+   * Base element class which manages element properties and attributes. When
+   * properties change, the `update` method is asynchronously called. This method
+   * should be supplied by subclasses to render updates as desired.
+   * @noInheritDoc
    */
   class ReactiveElement
   // In the Node build, this `extends` clause will be substituted with
@@ -3624,7 +3200,7 @@
        * @nocollapse
        * @category properties
        */
-      static createProperty(name, options = defaultPropertyDeclaration) {
+      static createProperty(name, options = defaultPropertyDeclaration$1) {
           // If this is a state property, force the attribute to false.
           if (options.state) {
               options.attribute = false;
@@ -3685,7 +3261,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$1('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.`);
@@ -3718,7 +3294,7 @@
        * @category properties
        */
       static getPropertyOptions(name) {
-          return this.elementProperties.get(name) ?? defaultPropertyDeclaration;
+          return this.elementProperties.get(name) ?? defaultPropertyDeclaration$1;
       }
       /**
        * Initializes static own properties of the class used in bookkeeping
@@ -3797,11 +3373,11 @@
           this.elementStyles = this.finalizeStyles(this.styles);
           {
               if (this.hasOwnProperty('createProperty')) {
-                  issueWarning$1('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$1('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');
               }
           }
@@ -4009,7 +3585,7 @@
               const attrValue = converter.toAttribute(value, options.type);
               if (this.constructor.enabledWarnings.includes('migration') &&
                   attrValue === undefined) {
-                  issueWarning$1('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.`);
@@ -4075,7 +3651,7 @@
           // If we have a property key, perform property update steps.
           if (name !== undefined) {
               if (name instanceof Event) {
-                  issueWarning$1(``, `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;
@@ -4157,7 +3733,7 @@
           if (this.constructor.enabledWarnings.includes('async-perform-update') &&
               typeof result?.then ===
                   'function') {
-              issueWarning$1('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.`);
           }
@@ -4293,7 +3869,7 @@
           this.updated(changedProperties);
           if (this.isUpdatePending &&
               this.constructor.enabledWarnings.includes('change-in-update')) {
-              issueWarning$1('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 ` +
@@ -4454,179 +4030,841 @@
           if (i >= 0) {
               this.enabledWarnings.splice(i, 1);
           }
-      };
-  }
-  // IMPORTANT: do not change the property name or the assignment expression.
-  // This line will be used in regexes to search for ReactiveElement usage.
-  (global.reactiveElementVersions ??= []).push('2.0.4');
-  if (global.reactiveElementVersions.length > 1) {
-      issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
-          `is not recommended.`);
+      };
+  }
+  // IMPORTANT: do not change the property name or the assignment expression.
+  // This line will be used in regexes to search for ReactiveElement usage.
+  (global.reactiveElementVersions ??= []).push('2.0.4');
+  if (global.reactiveElementVersions.length > 1) {
+      issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+          `is not recommended.`);
+  }
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /*
+   * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
+   * replaced at compile time by the munged name for object[property]. We cannot
+   * alias this function, so we have to use a small shim that has the same
+   * behavior when not compiling.
+   */
+  /*@__INLINE__*/
+  const JSCompiler_renameProperty = (prop, _obj) => prop;
+  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$1 = (code, warning) => {
+          warning += ` See https://lit.dev/msg/${code} for more information.`;
+          if (!issuedWarnings.has(warning)) {
+              console.warn(warning);
+              issuedWarnings.add(warning);
+          }
+      };
+  }
+  /**
+   * Base element class that manages element properties and attributes, and
+   * renders a lit-html template.
+   *
+   * To define a component, subclass `LitElement` and implement a
+   * `render` method to provide the component's template. Define properties
+   * using the {@linkcode LitElement.properties properties} property or the
+   * {@linkcode property} decorator.
+   */
+  class LitElement extends ReactiveElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * @category rendering
+           */
+          this.renderOptions = { host: this };
+          this.__childPart = undefined;
+      }
+      /**
+       * @category rendering
+       */
+      createRenderRoot() {
+          const renderRoot = super.createRenderRoot();
+          // When adoptedStyleSheets are shimmed, they are inserted into the
+          // shadowRoot by createRenderRoot. Adjust the renderBefore node so that
+          // any styles in Lit content render before adoptedStyleSheets. This is
+          // important so that adoptedStyleSheets have precedence over styles in
+          // the shadowRoot.
+          this.renderOptions.renderBefore ??= renderRoot.firstChild;
+          return renderRoot;
+      }
+      /**
+       * Updates the element. This method reflects property values to attributes
+       * and calls `render` to render DOM via lit-html. Setting properties inside
+       * this method will *not* trigger another update.
+       * @param changedProperties Map of changed properties with old values
+       * @category updates
+       */
+      update(changedProperties) {
+          // Setting properties in `render` should not trigger an update. Since
+          // updates are allowed after super.update, it's important to call `render`
+          // before that.
+          const value = this.render();
+          if (!this.hasUpdated) {
+              this.renderOptions.isConnected = this.isConnected;
+          }
+          super.update(changedProperties);
+          this.__childPart = render(value, this.renderRoot, this.renderOptions);
+      }
+      /**
+       * Invoked when the component is added to the document's DOM.
+       *
+       * In `connectedCallback()` you should setup tasks that should only occur when
+       * the element is connected to the document. The most common of these is
+       * adding event listeners to nodes external to the element, like a keydown
+       * event handler added to the window.
+       *
+       * ```ts
+       * connectedCallback() {
+       *   super.connectedCallback();
+       *   addEventListener('keydown', this._handleKeydown);
+       * }
+       * ```
+       *
+       * Typically, anything done in `connectedCallback()` should be undone when the
+       * element is disconnected, in `disconnectedCallback()`.
+       *
+       * @category lifecycle
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.__childPart?.setConnected(true);
+      }
+      /**
+       * Invoked when the component is removed from the document's DOM.
+       *
+       * This callback is the main signal to the element that it may no longer be
+       * used. `disconnectedCallback()` should ensure that nothing is holding a
+       * reference to the element (such as event listeners added to nodes external
+       * to the element), so that it is free to be garbage collected.
+       *
+       * ```ts
+       * disconnectedCallback() {
+       *   super.disconnectedCallback();
+       *   window.removeEventListener('keydown', this._handleKeydown);
+       * }
+       * ```
+       *
+       * An element may be re-connected after being disconnected.
+       *
+       * @category lifecycle
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.__childPart?.setConnected(false);
+      }
+      /**
+       * Invoked on each update to perform rendering tasks. This method may return
+       * any value renderable by lit-html's `ChildPart` - typically a
+       * `TemplateResult`. Setting properties inside this method will *not* trigger
+       * the element to update.
+       * @category rendering
+       */
+      render() {
+          return noChange;
+      }
+  }
+  // This property needs to remain unminified.
+  LitElement['_$litElement$'] = true;
+  /**
+   * Ensure this class is marked as `finalized` as an optimization ensuring
+   * it will not needlessly try to `finalize`.
+   *
+   * Note this property name is a string to prevent breaking Closure JS Compiler
+   * optimizations. See @lit/reactive-element for more information.
+   */
+  LitElement[JSCompiler_renameProperty('finalized')] = true;
+  // Install hydration if available
+  globalThis.litElementHydrateSupport?.({ LitElement });
+  // Apply polyfills if available
+  const polyfillSupport = globalThis.litElementPolyfillSupportDevMode
+      ;
+  polyfillSupport?.({ LitElement });
+  // IMPORTANT: do not change the property name or the assignment expression.
+  // This line will be used in regexes to search for LitElement usage.
+  (globalThis.litElementVersions ??= []).push('4.1.0');
+  if (globalThis.litElementVersions.length > 1) {
+      issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+          `is not recommended.`);
+  }
+
+  /**
+   * @license
+   * 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 += ` See https://lit.dev/msg/${code} for more information.`;
+          if (!issuedWarnings.has(warning)) {
+              console.warn(warning);
+              issuedWarnings.add(warning);
+          }
+      };
+  }
+  const legacyProperty = (options, proto, name) => {
+      const hasOwnProperty = proto.hasOwnProperty(name);
+      proto.constructor.createProperty(name, hasOwnProperty ? { ...options, wrapped: true } : options);
+      // For accessors (which have a descriptor on the prototype) we need to
+      // return a descriptor, otherwise TypeScript overwrites the descriptor we
+      // define in createProperty() with the original descriptor. We don't do this
+      // for fields, which don't have a descriptor, because this could overwrite
+      // descriptor defined by other decorators.
+      return hasOwnProperty
+          ? Object.getOwnPropertyDescriptor(proto, name)
+          : undefined;
+  };
+  // This is duplicated from a similar variable in reactive-element.ts, but
+  // actually makes sense to have this default defined with the decorator, so
+  // that different decorators could have different defaults.
+  const defaultPropertyDeclaration = {
+      attribute: true,
+      type: String,
+      converter: defaultConverter$1,
+      reflect: false,
+      hasChanged: notEqual$1,
+  };
+  /**
+   * Wraps a class accessor or setter so that `requestUpdate()` is called with the
+   * property name and old value when the accessor is set.
+   */
+  const standardProperty = (options = defaultPropertyDeclaration, target, context) => {
+      const { kind, metadata } = context;
+      if (metadata == null) {
+          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.`);
+      }
+      // Store the property options
+      let properties = globalThis.litPropertyMetadata.get(metadata);
+      if (properties === undefined) {
+          globalThis.litPropertyMetadata.set(metadata, (properties = new Map()));
+      }
+      properties.set(context.name, options);
+      if (kind === 'accessor') {
+          // Standard decorators cannot dynamically modify the class, so we can't
+          // replace a field with accessors. The user must use the new `accessor`
+          // keyword instead.
+          const { name } = context;
+          return {
+              set(v) {
+                  const oldValue = target.get.call(this);
+                  target.set.call(this, v);
+                  this.requestUpdate(name, oldValue, options);
+              },
+              init(v) {
+                  if (v !== undefined) {
+                      this._$changeProperty(name, undefined, options);
+                  }
+                  return v;
+              },
+          };
+      }
+      else if (kind === 'setter') {
+          const { name } = context;
+          return function (value) {
+              const oldValue = this[name];
+              target.call(this, value);
+              this.requestUpdate(name, oldValue, options);
+          };
+      }
+      throw new Error(`Unsupported decorator location: ${kind}`);
+  };
+  /**
+   * A class field or accessor decorator which creates a reactive property that
+   * reflects a corresponding attribute value. When a decorated property is set
+   * the element will update and render. A {@linkcode PropertyDeclaration} may
+   * optionally be supplied to configure property features.
+   *
+   * This decorator should only be used for public fields. As public fields,
+   * properties should be considered as primarily settable by element users,
+   * either via attribute or the property itself.
+   *
+   * Generally, properties that are changed by the element should be private or
+   * protected fields and should use the {@linkcode state} decorator.
+   *
+   * However, sometimes element code does need to set a public property. This
+   * should typically only be done in response to user interaction, and an event
+   * should be fired informing the user; for example, a checkbox sets its
+   * `checked` property when clicked and fires a `changed` event. Mutating public
+   * properties should typically not be done for non-primitive (object or array)
+   * properties. In other cases when an element needs to manage state, a private
+   * property decorated via the {@linkcode state} decorator should be used. When
+   * needed, state properties can be initialized via public properties to
+   * facilitate complex interactions.
+   *
+   * ```ts
+   * class MyElement {
+   *   @property({ type: Boolean })
+   *   clicked = false;
+   * }
+   * ```
+   * @category Decorator
+   * @ExportDecoratedItems
+   */
+  function property(options) {
+      return (protoOrTarget, nameOrContext
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ) => {
+          return (typeof nameOrContext === 'object'
+              ? standardProperty(options, protoOrTarget, nameOrContext)
+              : legacyProperty(options, protoOrTarget, nameOrContext));
+      };
+  }
+
+  /**
+   * @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
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * Wraps up a few best practices when returning a property descriptor from a
+   * decorator.
+   *
+   * Marks the defined property as configurable, and enumerable, and handles
+   * the case where we have a busted Reflect.decorate zombiefill (e.g. in Angular
+   * apps).
+   *
+   * @internal
+   */
+  const desc = (obj, name, descriptor) => {
+      // For backwards compatibility, we keep them configurable and enumerable.
+      descriptor.configurable = true;
+      descriptor.enumerable = true;
+      if (
+      // We check for Reflect.decorate each time, in case the zombiefill
+      // is applied via lazy loading some Angular code.
+      Reflect.decorate &&
+          typeof name !== 'object') {
+          // If we're called as a legacy decorator, and Reflect.decorate is present
+          // then we have no guarantees that the returned descriptor will be
+          // defined on the class, so we must apply it directly ourselves.
+          Object.defineProperty(obj, name, descriptor);
+      }
+      return descriptor;
+  };
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  {
+      // Ensure warnings are issued only 1x, even if multiple versions of Lit
+      // are loaded.
+      (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
+   * 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
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const PartType = {
+      ATTRIBUTE: 1,
+      CHILD: 2,
+      PROPERTY: 3,
+      BOOLEAN_ATTRIBUTE: 4,
+      EVENT: 5,
+      ELEMENT: 6,
+  };
+  /**
+   * Creates a user-facing directive function from a Directive class. This
+   * function has the same parameters as the directive's render() method.
+   */
+  const directive = (c) => (...values) => ({
+      // This property needs to remain unminified.
+      ['_$litDirective$']: c,
+      values,
+  });
+  /**
+   * Base class for creating custom directives. Users should extend this class,
+   * implement `render` and/or `update`, and then pass their subclass to
+   * `directive`.
+   */
+  class Directive {
+      constructor(_partInfo) { }
+      // See comment in Disconnectable interface for why this is a getter
+      get _$isConnected() {
+          return this._$parent._$isConnected;
+      }
+      /** @internal */
+      _$initialize(part, parent, attributeIndex) {
+          this.__part = part;
+          this._$parent = parent;
+          this.__attributeIndex = attributeIndex;
+      }
+      /** @internal */
+      _$resolve(part, props) {
+          return this.update(part, props);
+      }
+      update(_part, props) {
+          return this.render(...props);
+      }
+  }
+
+  /**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  class ClassMapDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          if (partInfo.type !== PartType.ATTRIBUTE ||
+              partInfo.name !== 'class' ||
+              partInfo.strings?.length > 2) {
+              throw new Error('`classMap()` can only be used in the `class` attribute ' +
+                  'and must be the only part in the attribute.');
+          }
+      }
+      render(classInfo) {
+          // Add spaces to ensure separation from static classes
+          return (' ' +
+              Object.keys(classInfo)
+                  .filter((key) => classInfo[key])
+                  .join(' ') +
+              ' ');
+      }
+      update(part, [classInfo]) {
+          // Remember dynamic classes on the first render
+          if (this._previousClasses === undefined) {
+              this._previousClasses = new Set();
+              if (part.strings !== undefined) {
+                  this._staticClasses = new Set(part.strings
+                      .join(' ')
+                      .split(/\s/)
+                      .filter((s) => s !== ''));
+              }
+              for (const name in classInfo) {
+                  if (classInfo[name] && !this._staticClasses?.has(name)) {
+                      this._previousClasses.add(name);
+                  }
+              }
+              return this.render(classInfo);
+          }
+          const classList = part.element.classList;
+          // Remove old classes that no longer apply
+          for (const name of this._previousClasses) {
+              if (!(name in classInfo)) {
+                  classList.remove(name);
+                  this._previousClasses.delete(name);
+              }
+          }
+          // Add or remove classes based on their classMap value
+          for (const name in classInfo) {
+              // We explicitly want a loose truthy check of `value` because it seems
+              // more convenient that '' and 0 are skipped.
+              const value = !!classInfo[name];
+              if (value !== this._previousClasses.has(name) &&
+                  !this._staticClasses?.has(name)) {
+                  if (value) {
+                      classList.add(name);
+                      this._previousClasses.add(name);
+                  }
+                  else {
+                      classList.remove(name);
+                      this._previousClasses.delete(name);
+                  }
+              }
+          }
+          return noChange;
+      }
+  }
+  /**
+   * A directive that applies dynamic CSS classes.
+   *
+   * This must be used in the `class` attribute and must be the only part used in
+   * the attribute. It takes each property in the `classInfo` argument and adds
+   * the property name to the element's `classList` if the property value is
+   * truthy; if the property value is falsy, the property name is removed from
+   * the element's `class`.
+   *
+   * For example `{foo: bar}` applies the class `foo` if the value of `bar` is
+   * truthy.
+   *
+   * @param classInfo
+   */
+  const classMap = directive(ClassMapDirective);
+
+  /**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * For AttributeParts, sets the attribute if the value is defined and removes
+   * the attribute if the value is undefined.
+   *
+   * For other part types, this directive is a no-op.
+   */
+  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);
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const HTML_RESULT = 1;
+  class UnsafeHTMLDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          this._value = nothing;
+          if (partInfo.type !== PartType.CHILD) {
+              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
+          }
+      }
+      render(value) {
+          if (value === nothing || value == null) {
+              this._templateResult = undefined;
+              return (this._value = value);
+          }
+          if (value === noChange) {
+              return value;
+          }
+          if (typeof value != 'string') {
+              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
+          }
+          if (value === this._value) {
+              return this._templateResult;
+          }
+          this._value = value;
+          const strings = [value];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          strings.raw = strings;
+          // WARNING: impersonating a TemplateResult like this is extremely
+          // dangerous. Third-party directives should not do this.
+          return (this._templateResult = {
+              // Cast to a known set of integers that satisfy ResultType so that we
+              // don't have to export ResultType and possibly encourage this pattern.
+              // This property needs to remain unminified.
+              ['_$litType$']: this.constructor
+                  .resultType,
+              strings,
+              values: [],
+          });
+      }
   }
+  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
+  UnsafeHTMLDirective.resultType = HTML_RESULT;
 
   /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  /*
-   * When using Closure Compiler, JSCompiler_renameProperty(property, object) is
-   * replaced at compile time by the munged name for object[property]. We cannot
-   * alias this function, so we have to use a small shim that has the same
-   * behavior when not compiling.
-   */
-  /*@__INLINE__*/
-  const JSCompiler_renameProperty = (prop, _obj) => prop;
-  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 += ` See https://lit.dev/msg/${code} for more information.`;
-          if (!issuedWarnings.has(warning)) {
-              console.warn(warning);
-              issuedWarnings.add(warning);
-          }
-      };
+  const SVG_RESULT = 2;
+  class UnsafeSVGDirective extends UnsafeHTMLDirective {
   }
+  UnsafeSVGDirective.directiveName = 'unsafeSVG';
+  UnsafeSVGDirective.resultType = SVG_RESULT;
   /**
-   * Base element class that manages element properties and attributes, and
-   * renders a lit-html template.
+   * Renders the result as SVG, rather than text.
    *
-   * To define a component, subclass `LitElement` and implement a
-   * `render` method to provide the component's template. Define properties
-   * using the {@linkcode LitElement.properties properties} property or the
-   * {@linkcode property} decorator.
+   * The values `undefined`, `null`, and `nothing`, will all result in no content
+   * (empty string) being rendered.
+   *
+   * Note, this is unsafe to use with any user-provided input that hasn't been
+   * sanitized or escaped, as it may lead to cross-site-scripting
+   * vulnerabilities.
    */
-  class LitElement extends ReactiveElement {
-      constructor() {
-          super(...arguments);
-          /**
-           * @category rendering
-           */
-          this.renderOptions = { host: this };
-          this.__childPart = undefined;
-      }
-      /**
-       * @category rendering
-       */
-      createRenderRoot() {
-          const renderRoot = super.createRenderRoot();
-          // When adoptedStyleSheets are shimmed, they are inserted into the
-          // shadowRoot by createRenderRoot. Adjust the renderBefore node so that
-          // any styles in Lit content render before adoptedStyleSheets. This is
-          // important so that adoptedStyleSheets have precedence over styles in
-          // the shadowRoot.
-          this.renderOptions.renderBefore ??= renderRoot.firstChild;
-          return renderRoot;
+  const unsafeSVG = directive(UnsafeSVGDirective);
+
+  /**
+   * @license
+   * Copyright 2020 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  /**
+   * Prevents JSON injection attacks.
+   *
+   * The goals of this brand:
+   *   1) fast to check
+   *   2) code is small on the wire
+   *   3) multiple versions of Lit in a single page will all produce mutually
+   *      interoperable StaticValues
+   *   4) normal JSON.parse (without an unusual reviver) can not produce a
+   *      StaticValue
+   *
+   * Symbols satisfy (1), (2), and (4). We use Symbol.for to satisfy (3), but
+   * we don't care about the key, so we break ties via (2) and use the empty
+   * string.
+   */
+  const brand = Symbol.for('');
+  /** Safely extracts the string part of a StaticValue. */
+  const unwrapStaticValue = (value) => {
+      if (value?.r !== brand) {
+          return undefined;
       }
-      /**
-       * Updates the element. This method reflects property values to attributes
-       * and calls `render` to render DOM via lit-html. Setting properties inside
-       * this method will *not* trigger another update.
-       * @param changedProperties Map of changed properties with old values
-       * @category updates
-       */
-      update(changedProperties) {
-          // Setting properties in `render` should not trigger an update. Since
-          // updates are allowed after super.update, it's important to call `render`
-          // before that.
-          const value = this.render();
-          if (!this.hasUpdated) {
-              this.renderOptions.isConnected = this.isConnected;
+      return value?.['_$litStatic$'];
+  };
+  const stringsCache = new Map();
+  /**
+   * Wraps a lit-html template tag (`html` or `svg`) to add static value support.
+   */
+  const withStatic = (coreTag) => (strings, ...values) => {
+      const l = values.length;
+      let staticValue;
+      let dynamicValue;
+      const staticStrings = [];
+      const dynamicValues = [];
+      let i = 0;
+      let hasStatics = false;
+      let s;
+      while (i < l) {
+          s = strings[i];
+          // Collect any unsafeStatic values, and their following template strings
+          // so that we treat a run of template strings and unsafe static values as
+          // a single template string.
+          while (i < l &&
+              ((dynamicValue = values[i]),
+                  (staticValue = unwrapStaticValue(dynamicValue))) !== undefined) {
+              s += staticValue + strings[++i];
+              hasStatics = true;
           }
-          super.update(changedProperties);
-          this.__childPart = render(value, this.renderRoot, this.renderOptions);
-      }
-      /**
-       * Invoked when the component is added to the document's DOM.
-       *
-       * In `connectedCallback()` you should setup tasks that should only occur when
-       * the element is connected to the document. The most common of these is
-       * adding event listeners to nodes external to the element, like a keydown
-       * event handler added to the window.
-       *
-       * ```ts
-       * connectedCallback() {
-       *   super.connectedCallback();
-       *   addEventListener('keydown', this._handleKeydown);
-       * }
-       * ```
-       *
-       * Typically, anything done in `connectedCallback()` should be undone when the
-       * element is disconnected, in `disconnectedCallback()`.
-       *
-       * @category lifecycle
-       */
-      connectedCallback() {
-          super.connectedCallback();
-          this.__childPart?.setConnected(true);
-      }
-      /**
-       * Invoked when the component is removed from the document's DOM.
-       *
-       * This callback is the main signal to the element that it may no longer be
-       * used. `disconnectedCallback()` should ensure that nothing is holding a
-       * reference to the element (such as event listeners added to nodes external
-       * to the element), so that it is free to be garbage collected.
-       *
-       * ```ts
-       * disconnectedCallback() {
-       *   super.disconnectedCallback();
-       *   window.removeEventListener('keydown', this._handleKeydown);
-       * }
-       * ```
-       *
-       * An element may be re-connected after being disconnected.
-       *
-       * @category lifecycle
-       */
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          this.__childPart?.setConnected(false);
+          // If the last value is static, we don't need to push it.
+          if (i !== l) {
+              dynamicValues.push(dynamicValue);
+          }
+          staticStrings.push(s);
+          i++;
       }
-      /**
-       * Invoked on each update to perform rendering tasks. This method may return
-       * any value renderable by lit-html's `ChildPart` - typically a
-       * `TemplateResult`. Setting properties inside this method will *not* trigger
-       * the element to update.
-       * @category rendering
-       */
-      render() {
-          return noChange;
+      // If the last value isn't static (which would have consumed the last
+      // string), then we need to add the last string.
+      if (i === l) {
+          staticStrings.push(strings[l]);
       }
-  }
-  // This property needs to remain unminified.
-  LitElement['_$litElement$'] = true;
-  /**
-   * Ensure this class is marked as `finalized` as an optimization ensuring
-   * it will not needlessly try to `finalize`.
-   *
-   * Note this property name is a string to prevent breaking Closure JS Compiler
-   * optimizations. See @lit/reactive-element for more information.
-   */
-  LitElement[JSCompiler_renameProperty('finalized')] = true;
-  // Install hydration if available
-  globalThis.litElementHydrateSupport?.({ LitElement });
-  // Apply polyfills if available
-  const polyfillSupport = globalThis.litElementPolyfillSupportDevMode
-      ;
-  polyfillSupport?.({ LitElement });
-  // IMPORTANT: do not change the property name or the assignment expression.
-  // This line will be used in regexes to search for LitElement usage.
-  (globalThis.litElementVersions ??= []).push('4.1.0');
-  if (globalThis.litElementVersions.length > 1) {
-      issueWarning('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
-          `is not recommended.`);
-  }
+      if (hasStatics) {
+          const key = staticStrings.join('$$lit$$');
+          strings = stringsCache.get(key);
+          if (strings === undefined) {
+              // Beware: in general this pattern is unsafe, and doing so may bypass
+              // lit's security checks and allow an attacker to execute arbitrary
+              // code and inject arbitrary content.
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              staticStrings.raw = staticStrings;
+              stringsCache.set(key, (strings = staticStrings));
+          }
+          values = dynamicValues;
+      }
+      return coreTag(strings, ...values);
+  };
+  /**
+   * Interprets a template literal as an HTML template that can efficiently
+   * render to and update a container.
+   *
+   * Includes static value support from `lit-html/static.js`.
+   */
+  const html = withStatic(html$1);
 
   var css_248z$7 = 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$6 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+  var css_248z$6 = 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$5 = 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$5 = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
   var css_248z$4 = 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)}`;
 
@@ -4650,6 +4888,10 @@
   }
   SgdsElement.styles = [css_248z$3];
 
+  function generateId (componentName = "", elementName = "") {
+      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
+  }
+
   class FormControlElement extends SgdsElement {
       constructor() {
           super(...arguments);
@@ -4659,15 +4901,20 @@
           this.hintText = "";
           /** Disables the input. */
           this.disabled = false;
-          /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-          this.hasFeedback = false;
-          /**Feedback text for error state when validated */
-          this.invalidFeedback = "";
           /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
           this.invalid = false;
-          /** Makes the input a required field. */
-          this.required = false;
-          this.labelId = genId("label");
+          this._controlId = generateId("input");
+          this._labelId = generateId("label");
+      }
+      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+      setInvalid(bool) {
+          this.invalid = bool;
+          if (bool) {
+              this.emit("sgds-invalid");
+          }
+          else {
+              this.emit("sgds-valid");
+          }
       }
   }
   FormControlElement.styles = [...SgdsElement.styles, css_248z$7, css_248z$6, css_248z$5, css_248z$4];
@@ -4683,69 +4930,9 @@
   __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$2 = 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$1 = 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.
-   *
-   */
-  class SgdsSpinner extends SgdsElement {
-      constructor() {
-          super(...arguments);
-          /** The variant of spinner */
-          this.variant = "primary";
-          /** Specifies a small, medium or large button, the size is medium by default. */
-          this.size = "md";
-      }
-      render() {
-          return html `
-      <div class="spinner-wrapper">
-        <div
-          class="spinner ${classMap({
-            [`spinner-${this.size}`]: this.size
-        })}"
-          role="status"
-        >
-          ${this.label ? nothing : html `<span class="sr-only">Loading...</span>`}
-        </div>
-        ${this.label ? html `<span class="spinner-label">${this.label}</span>` : nothing}
-      </div>
-    `;
-      }
-  }
-  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$1, css_248z$2];
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsSpinner.prototype, "variant", void 0);
-  __decorate([
-      property({ reflect: true })
-  ], SgdsSpinner.prototype, "size", void 0);
-  __decorate([
-      property({ reflect: true, type: String })
-  ], SgdsSpinner.prototype, "label", void 0);
 
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
@@ -4767,135 +4954,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));
+      }
+      /**
+       * 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;
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
+      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();
+              }
+              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;
+  };
 
   // @watch decorator
   //
@@ -4934,6 +5211,51 @@
       };
   }
 
+  var css_248z$2 = 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$1 = 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.
+   *
+   */
+  class SgdsSpinner extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The variant of spinner */
+          this.variant = "primary";
+          /** Specifies a small, medium or large button, the size is medium by default. */
+          this.size = "md";
+      }
+      render() {
+          return html `
+      <div class="spinner-wrapper">
+        <div
+          class="spinner ${classMap({
+            [`spinner-${this.size}`]: this.size
+        })}"
+          role="status"
+        >
+          ${this.label ? nothing : html `<span class="sr-only">Loading...</span>`}
+        </div>
+        ${this.label ? html `<span class="spinner-label">${this.label}</span>` : nothing}
+      </div>
+    `;
+      }
+  }
+  SgdsSpinner.styles = [...SgdsElement.styles, css_248z$1, css_248z$2];
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsSpinner.prototype, "variant", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], SgdsSpinner.prototype, "size", void 0);
+  __decorate([
+      property({ reflect: true, type: String })
+  ], SgdsSpinner.prototype, "label", void 0);
+
   var css_248z = 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}`;
 
   /**
@@ -4943,14 +5265,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";
@@ -4958,16 +5279,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() {
@@ -4983,60 +5305,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}
       >
@@ -5045,7 +5386,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"}
@@ -5060,15 +5401,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}
@@ -5085,7 +5425,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
@@ -5093,15 +5434,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
@@ -5112,7 +5455,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() {
@@ -5127,10 +5470,7 @@
     `;
       }
   }
-  SgdsInput.styles = [...FormControlElement.styles, css_248z];
-  __decorate([
-      query("input.form-control")
-  ], SgdsInput.prototype, "input", void 0);
+  SgdsInput.styles = [...FormControlElement.styles, css_248z$4, css_248z];
   __decorate([
       property({ reflect: true })
   ], SgdsInput.prototype, "type", void 0);
@@ -5149,6 +5489,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);
@@ -5165,8 +5511,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);
@@ -5176,12 +5525,21 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsInput.prototype, "loading", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], SgdsInput.prototype, "required", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], SgdsInput.prototype, "value", void 0);
+  __decorate([
+      state()
+  ], SgdsInput.prototype, "_isTouched", void 0);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsInput.prototype, "_handleIsTouched", null);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsInput.prototype, "_handleDisabledChange", null);
-  __decorate([
-      watch("value", { waitUntilFirstUpdate: true })
-  ], SgdsInput.prototype, "_handleValueChange", null);
 
   customElements.define("sgds-input", SgdsInput);