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

package/components/Textarea/index.umd.js

@@ -1197,421 +1197,147 @@
    * 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$4;
   {
-      // 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)) {
+          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$4('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}`);
+      sanitizerFactoryInternal = newSanitizer;
   };
   /**
-   * 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
+   * Only used in internal tests, not a part of the public API.
    */
-  function property(options) {
-      return (protoOrTarget, nameOrContext
+  const _testOnlyClearSanitizerFactoryDoNotCallOrElse = () => {
+      sanitizerFactoryInternal = noopSanitizer;
+  };
+  const createSanitizer = (node, name, type) => {
+      return sanitizerFactoryInternal(node, name, type);
+  };
+  // Added to an attribute name to mark the attribute as bound so we can find
+  // it easily.
+  const boundAttributeSuffix = '$lit$';
+  // This marker is used in many syntactic positions in HTML, so it must be
+  // a valid element name and attribute name. We don't support dynamic names (yet)
+  // but this at least ensures that the parse tree is closer to the template
+  // intention.
+  const marker = `lit$${Math.random().toFixed(9).slice(2)}$`;
+  // String used to tell if a comment is a marker comment
+  const markerMatch = '?' + marker;
+  // Text used to insert a comment marker node. We use processing instruction
+  // syntax because it's slightly smaller, but parses as a comment node.
+  const nodeMarker = `<${markerMatch}>`;
+  const d = document;
+  // Creates a dynamic marker. We never have to search for these in the DOM.
+  const createMarker = () => d.createComment('');
+  const isPrimitive = (value) => value === null || (typeof value != 'object' && typeof value != 'function');
+  const isArray = Array.isArray;
+  const isIterable = (value) => isArray(value) ||
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ) => {
-          return (typeof nameOrContext === 'object'
-              ? standardProperty(options, protoOrTarget, nameOrContext)
-              : legacyProperty(options, protoOrTarget, nameOrContext));
-      };
-  }
-
+      typeof value?.[Symbol.iterator] === 'function';
+  const SPACE_CHAR = `[ \t\n\f\r]`;
+  const ATTR_VALUE_CHAR = `[^ \t\n\f\r"'\`<>=]`;
+  const NAME_CHAR = `[^\\s"'>=/]`;
+  // These regexes represent the five parsing states that we care about in the
+  // Template's HTML scanner. They match the *end* of the state they're named
+  // after.
+  // Depending on the match, we transition to a new state. If there's no match,
+  // we stay in the same state.
+  // Note that the regexes are stateful. We utilize lastIndex and sync it
+  // across the multiple regexes used. In addition to the five regexes below
+  // we also dynamically create a regex to find the matching end tags for raw
+  // text elements.
   /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
+   * End of text is: `<` followed by:
+   *   (comment start) or (tag) or (dynamic tag binding)
+   */
+  const textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
+  const COMMENT_START = 1;
+  const TAG_NAME = 2;
+  const DYNAMIC_TAG_NAME = 3;
+  const commentEndRegex = /-->/g;
+  /**
+   * Comments not started with <!--, like </{, can be ended by a single `>`
    */
+  const comment2EndRegex = />/g;
   /**
-   * Wraps up a few best practices when returning a property descriptor from a
-   * decorator.
+   * The tagEnd regex matches the end of the "inside an opening" tag syntax
+   * position. It either matches a `>`, an attribute-like sequence, or the end
+   * of the string after a space (attribute-name position ending).
    *
-   * 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).
+   * See attributes in the HTML spec:
+   * https://www.w3.org/TR/html5/syntax.html#elements-attributes
    *
-   * @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;
-  };
-  /**
-   * Only used in internal tests, not a part of the public API.
-   */
-  const _testOnlyClearSanitizerFactoryDoNotCallOrElse = () => {
-      sanitizerFactoryInternal = noopSanitizer;
-  };
-  const createSanitizer = (node, name, type) => {
-      return sanitizerFactoryInternal(node, name, type);
-  };
-  // Added to an attribute name to mark the attribute as bound so we can find
-  // it easily.
-  const boundAttributeSuffix = '$lit$';
-  // This marker is used in many syntactic positions in HTML, so it must be
-  // a valid element name and attribute name. We don't support dynamic names (yet)
-  // but this at least ensures that the parse tree is closer to the template
-  // intention.
-  const marker = `lit$${Math.random().toFixed(9).slice(2)}$`;
-  // String used to tell if a comment is a marker comment
-  const markerMatch = '?' + marker;
-  // Text used to insert a comment marker node. We use processing instruction
-  // syntax because it's slightly smaller, but parses as a comment node.
-  const nodeMarker = `<${markerMatch}>`;
-  const d = document;
-  // Creates a dynamic marker. We never have to search for these in the DOM.
-  const createMarker = () => d.createComment('');
-  const isPrimitive = (value) => value === null || (typeof value != 'object' && typeof value != 'function');
-  const isArray = Array.isArray;
-  const isIterable = (value) => isArray(value) ||
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      typeof value?.[Symbol.iterator] === 'function';
-  const SPACE_CHAR = `[ \t\n\f\r]`;
-  const ATTR_VALUE_CHAR = `[^ \t\n\f\r"'\`<>=]`;
-  const NAME_CHAR = `[^\\s"'>=/]`;
-  // These regexes represent the five parsing states that we care about in the
-  // Template's HTML scanner. They match the *end* of the state they're named
-  // after.
-  // Depending on the match, we transition to a new state. If there's no match,
-  // we stay in the same state.
-  // Note that the regexes are stateful. We utilize lastIndex and sync it
-  // across the multiple regexes used. In addition to the five regexes below
-  // we also dynamically create a regex to find the matching end tags for raw
-  // text elements.
-  /**
-   * End of text is: `<` followed by:
-   *   (comment start) or (tag) or (dynamic tag binding)
-   */
-  const textEndRegex = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
-  const COMMENT_START = 1;
-  const TAG_NAME = 2;
-  const DYNAMIC_TAG_NAME = 3;
-  const commentEndRegex = /-->/g;
-  /**
-   * Comments not started with <!--, like </{, can be ended by a single `>`
-   */
-  const comment2EndRegex = />/g;
-  /**
-   * The tagEnd regex matches the end of the "inside an opening" tag syntax
-   * position. It either matches a `>`, an attribute-like sequence, or the end
-   * of the string after a space (attribute-name position ending).
-   *
-   * See attributes in the HTML spec:
-   * https://www.w3.org/TR/html5/syntax.html#elements-attributes
-   *
-   * " \t\n\f\r" are HTML space characters:
-   * https://infra.spec.whatwg.org/#ascii-whitespace
-   *
-   * So an attribute is:
-   *  * The name: any character except a whitespace character, ("), ('), ">",
-   *    "=", or "/". Note: this is different from the HTML spec which also excludes control characters.
-   *  * Followed by zero or more space characters
-   *  * Followed by "="
-   *  * Followed by zero or more space characters
-   *  * Followed by:
-   *    * Any character except space, ('), ("), "<", ">", "=", (`), or
-   *    * (") then any non-("), or
-   *    * (') then any non-(')
+   * " \t\n\f\r" are HTML space characters:
+   * https://infra.spec.whatwg.org/#ascii-whitespace
+   *
+   * So an attribute is:
+   *  * The name: any character except a whitespace character, ("), ('), ">",
+   *    "=", or "/". Note: this is different from the HTML spec which also excludes control characters.
+   *  * Followed by zero or more space characters
+   *  * Followed by "="
+   *  * Followed by zero or more space characters
+   *  * Followed by:
+   *    * Any character except space, ('), ("), "<", ">", "=", (`), or
+   *    * (") then any non-("), or
+   *    * (') then any non-(')
    */
   const tagEndRegex = new RegExp(`>|${SPACE_CHAR}(?:(${NAME_CHAR}+)(${SPACE_CHAR}*=${SPACE_CHAR}*(?:${ATTR_VALUE_CHAR}|("|')|))|$)`, 'g');
   const ENTIRE_MATCH = 0;
@@ -1657,7 +1383,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$4('', `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 +1663,7 @@
                               throw new Error(m);
                           }
                           else
-                              issueWarning$2('', m);
+                              issueWarning$4('', m);
                       }
                   }
                   // TODO (justinfagnani): for attempted dynamic tag names, we don't
@@ -2783,7 +2509,7 @@
   // This line will be used in regexes to search for lit-html usage.
   (global$2.litHtmlVersions ??= []).push('3.2.0');
   if (global$2.litHtmlVersions.length > 1) {
-      issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. ` +
+      issueWarning$4('multiple-versions', `Multiple versions of Lit loaded. ` +
           `Loading multiple versions is not recommended.`);
   }
   /**
@@ -2862,589 +2588,249 @@
 
   /**
    * @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,
-  };
-  /**
-   * 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,
-  });
+  const NODE_MODE = false;
+  // Allows minifiers to rename references to globalThis
+  const global$1 = globalThis;
   /**
-   * Base class for creating custom directives. Users should extend this class,
-   * implement `render` and/or `update`, and then pass their subclass to
-   * `directive`.
+   * Whether the current browser supports `adoptedStyleSheets`.
    */
-  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);
-      }
-  }
-
+  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();
   /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
+   * 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 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.');
+  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;
       }
-      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);
+      // 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);
               }
-          }
-          // 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);
+              if (styleSheet === undefined) {
+                  (this._styleSheet = styleSheet = new CSSStyleSheet()).replaceSync(this.cssText);
+                  if (cacheable) {
+                      cssTagCache.set(strings, styleSheet);
                   }
               }
           }
-          return noChange;
+          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.`);
+      }
+  };
   /**
-   * 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.
+   * Wrap a value for interpolation in a {@linkcode css} tagged template literal.
    *
-   * @param classInfo
+   * 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 classMap = directive(ClassMapDirective);
-
+  const unsafeCSS = (value) => new CSSResult(typeof value === 'string' ? value : String(value), undefined, constructionToken);
   /**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
+   * 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);
+  };
   /**
-   * 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.
+   * 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 ifDefined = (value) => value ?? nothing;
+  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 2020 Google LLC
+   * Copyright 2017 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;
-              }
+  // 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$3;
+  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$3 = (code, warning) => {
+          warning += ` See https://lit.dev/msg/${code} for more information.`;
+          if (!issuedWarnings.has(warning)) {
+              console.warn(warning);
+              issuedWarnings.add(warning);
           }
-          // Resets the part's value, causing its dirty-check to fail so that it
-          // always sets the value.
-          setCommittedValue(part);
-          return value;
+      };
+      issueWarning$3('dev-mode', `Lit is in dev mode. Not recommended for production!`);
+      // Issue polyfill support warning.
+      if (global.ShadyDOM?.inUse && polyfillSupport$1 === undefined) {
+          issueWarning$3('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
+              `the \`polyfill-support\` module has not been loaded.`);
       }
   }
   /**
-   * 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 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);
-
-  /**
-   * @license
-   * Copyright 2019 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const NODE_MODE = false;
-  // Allows minifiers to rename references to globalThis
-  const global$1 = globalThis;
-  /**
-   * 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.
+   * 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 = {
+  const defaultPropertyDeclaration$1 = {
       attribute: true,
       type: String,
       converter: defaultConverter,
@@ -3550,7 +2936,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;
@@ -3611,7 +2997,7 @@
                       `but it's actually declared as a value on the prototype. ` +
                       `Usually this is due to using @property or @state on a method.`);
               }
-              issueWarning$1('reactive-property-without-getter', `Field ${JSON.stringify(String(name))} on ` +
+              issueWarning$3('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.`);
@@ -3644,7 +3030,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
@@ -3723,11 +3109,11 @@
           this.elementStyles = this.finalizeStyles(this.styles);
           {
               if (this.hasOwnProperty('createProperty')) {
-                  issueWarning$1('no-override-create-property', 'Overriding ReactiveElement.createProperty() is deprecated. ' +
+                  issueWarning$3('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$3('no-override-get-property-descriptor', 'Overriding ReactiveElement.getPropertyDescriptor() is deprecated. ' +
                       'The override will not be called with standard decorators');
               }
           }
@@ -3935,7 +3321,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$3('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.`);
@@ -4001,7 +3387,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$3(``, `The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()`);
               }
               options ??= this.constructor.getPropertyOptions(name);
               const hasChanged = options.hasChanged ?? notEqual;
@@ -4083,7 +3469,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$3('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.`);
           }
@@ -4219,7 +3605,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$3('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 ` +
@@ -4332,223 +3718,924 @@
       firstUpdated(_changedProperties) { }
   }
   /**
-   * Memoized list of all element styles.
-   * Created lazily on user subclasses when finalizing the class.
-   * @nocollapse
-   * @category styles
+   * Memoized list of all element styles.
+   * Created lazily on user subclasses when finalizing the class.
+   * @nocollapse
+   * @category styles
+   */
+  ReactiveElement.elementStyles = [];
+  /**
+   * Options used when calling `attachShadow`. Set this property to customize
+   * the options for the shadowRoot; for example, to create a closed
+   * shadowRoot: `{mode: 'closed'}`.
+   *
+   * Note, these options are used in `createRenderRoot`. If this method
+   * is customized, options should be respected if possible.
+   * @nocollapse
+   * @category rendering
+   */
+  ReactiveElement.shadowRootOptions = { mode: 'open' };
+  // Assigned here to work around a jscompiler bug with static fields
+  // when compiling to ES5.
+  // https://github.com/google/closure-compiler/issues/3177
+  ReactiveElement[JSCompiler_renameProperty$1('elementProperties')] = new Map();
+  ReactiveElement[JSCompiler_renameProperty$1('finalized')] = new Map();
+  // Apply polyfills if available
+  polyfillSupport$1?.({ ReactiveElement });
+  // Dev mode warnings...
+  {
+      // Default warning set.
+      ReactiveElement.enabledWarnings = [
+          'change-in-update',
+          'async-perform-update',
+      ];
+      const ensureOwnWarnings = function (ctor) {
+          if (!ctor.hasOwnProperty(JSCompiler_renameProperty$1('enabledWarnings'))) {
+              ctor.enabledWarnings = ctor.enabledWarnings.slice();
+          }
+      };
+      ReactiveElement.enableWarning = function (warning) {
+          ensureOwnWarnings(this);
+          if (!this.enabledWarnings.includes(warning)) {
+              this.enabledWarnings.push(warning);
+          }
+      };
+      ReactiveElement.disableWarning = function (warning) {
+          ensureOwnWarnings(this);
+          const i = this.enabledWarnings.indexOf(warning);
+          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$3('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$2;
+  {
+      // Ensure warnings are issued only 1x, even if multiple versions of Lit
+      // are loaded.
+      const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
+      // Issue a warning, if we haven't already.
+      issueWarning$2 = (code, warning) => {
+          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$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
+   */
+  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);
+          }
+      };
+  }
+  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$1('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
+   */
+  let issueWarning;
+  {
+      // Ensure warnings are issued only 1x, even if multiple versions of Lit
+      // are loaded.
+      const issuedWarnings = (globalThis.litIssuedWarnings ??= new Set());
+      // Issue a warning, if we haven't already.
+      issueWarning = (code, warning) => {
+          warning += code
+              ? ` See https://lit.dev/msg/${code} for more information.`
+              : '';
+          if (!issuedWarnings.has(warning)) {
+              console.warn(warning);
+              issuedWarnings.add(warning);
+          }
+      };
+  }
+  /**
+   * 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('', `@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
+   */
+  // 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.
    */
-  ReactiveElement.elementStyles = [];
+  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 = {};
   /**
-   * Options used when calling `attachShadow`. Set this property to customize
-   * the options for the shadowRoot; for example, to create a closed
-   * shadowRoot: `{mode: 'closed'}`.
+   * Sets the committed value of a ChildPart directly without triggering the
+   * commit stage of the part.
    *
-   * Note, these options are used in `createRenderRoot`. If this method
-   * is customized, options should be respected if possible.
-   * @nocollapse
-   * @category rendering
+   * 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
    */
-  ReactiveElement.shadowRootOptions = { mode: 'open' };
-  // Assigned here to work around a jscompiler bug with static fields
-  // when compiling to ES5.
-  // https://github.com/google/closure-compiler/issues/3177
-  ReactiveElement[JSCompiler_renameProperty$1('elementProperties')] = new Map();
-  ReactiveElement[JSCompiler_renameProperty$1('finalized')] = new Map();
-  // Apply polyfills if available
-  polyfillSupport$1?.({ ReactiveElement });
-  // Dev mode warnings...
-  {
-      // Default warning set.
-      ReactiveElement.enabledWarnings = [
-          'change-in-update',
-          'async-perform-update',
-      ];
-      const ensureOwnWarnings = function (ctor) {
-          if (!ctor.hasOwnProperty(JSCompiler_renameProperty$1('enabledWarnings'))) {
-              ctor.enabledWarnings = ctor.enabledWarnings.slice();
+  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');
           }
-      };
-      ReactiveElement.enableWarning = function (warning) {
-          ensureOwnWarnings(this);
-          if (!this.enabledWarnings.includes(warning)) {
-              this.enabledWarnings.push(warning);
+          if (!isSingleExpression(partInfo)) {
+              throw new Error('`live` bindings can only contain a single expression');
           }
-      };
-      ReactiveElement.disableWarning = function (warning) {
-          ensureOwnWarnings(this);
-          const i = this.enabledWarnings.indexOf(warning);
-          if (i >= 0) {
-              this.enabledWarnings.splice(i, 1);
+      }
+      render(value) {
+          return value;
+      }
+      update(part, [value]) {
+          if (value === noChange || value === nothing) {
+              return value;
           }
-      };
-  }
-  // 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.`);
+          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
+   * Copyright 2020 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);
-          }
-      };
-  }
   /**
-   * Base element class that manages element properties and attributes, and
-   * renders a lit-html template.
+   * Prevents JSON injection attacks.
    *
-   * 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 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.
    */
-  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);
+  const brand = Symbol.for('');
+  /** Safely extracts the string part of a StaticValue. */
+  const unwrapStaticValue = (value) => {
+      if (value?.r !== brand) {
+          return undefined;
       }
-      /**
-       * 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);
+      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;
+          }
+          // If the last value is static, we don't need to push it.
+          if (i !== l) {
+              dynamicValues.push(dynamicValue);
+          }
+          staticStrings.push(s);
+          i++;
       }
-      /**
-       * 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 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]);
       }
-      /**
-       * 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 (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;
       }
-  }
-  // This property needs to remain unminified.
-  LitElement['_$litElement$'] = true;
+      return coreTag(strings, ...values);
+  };
   /**
-   * Ensure this class is marked as `finalized` as an optimization ensuring
-   * it will not needlessly try to `finalize`.
+   * Interprets a template literal as an HTML template that can efficiently
+   * render to and update a container.
    *
-   * Note this property name is a string to prevent breaking Closure JS Compiler
-   * optimizations. See @lit/reactive-element for more information.
+   * Includes static value support from `lit-html/static.js`.
    */
-  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.`);
-  }
+  const html = withStatic(html$1);
+
+  var css_248z$5 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
 
-  var css_248z$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$4 = 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$3 = 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$2 = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-heading)}`;
+
+  var css_248z$1 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4566,7 +4653,53 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$5];
+  SgdsElement.styles = [css_248z$1];
+
+  function generateId (componentName = "", elementName = "") {
+      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
+  }
+
+  class FormControlElement extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** The input's label  */
+          this.label = "";
+          /** The input's hint text */
+          this.hintText = "";
+          /** Disables the input. */
+          this.disabled = false;
+          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
+          this.invalid = false;
+          this._controlId = generateId("input");
+          this._labelId = generateId("label");
+      }
+      /** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
+      setInvalid(bool) {
+          this.invalid = bool;
+          if (bool) {
+              this.emit("sgds-invalid");
+          }
+          else {
+              this.emit("sgds-valid");
+          }
+      }
+  }
+  FormControlElement.styles = [...SgdsElement.styles, css_248z$5, css_248z$4, css_248z$3, css_248z$2];
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "label", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "hintText", void 0);
+  __decorate([
+      property({ reflect: true })
+  ], FormControlElement.prototype, "name", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "disabled", void 0);
+  __decorate([
+      property({ type: Boolean, reflect: true })
+  ], FormControlElement.prototype, "invalid", void 0);
 
   // @defaultValue decorator
   const defaultValue = (propertyName = "value") => (proto, key) => {
@@ -4588,139 +4721,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;
+      }
+      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();
       }
-      handleFormData(event) {
-          const disabled = this.options.disabled(this.host);
-          const name = this.options.name(this.host);
+      /**
+       * 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;
-      }
-      doAction(type, invoker) {
-          if (this.form) {
-              const button = document.createElement("button");
-              button.type = type;
-              button.style.position = "absolute";
-              button.style.width = "0";
-              button.style.height = "0";
-              button.style.clipPath = "inset(50%)";
-              button.style.overflow = "hidden";
-              button.style.whiteSpace = "nowrap";
-              // Pass form attributes through to the temporary button
-              if (invoker) {
-                  ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
-                      if (invoker.hasAttribute(attr)) {
-                          button.setAttribute(attr, invoker.getAttribute(attr));
-                      }
-                  });
-              }
-              this.form.append(button);
-              button.click();
-              button.remove();
+          else {
+              this._internals.setValidity({});
           }
       }
-      /** 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);
-      }
   }
 
-  function genId (componentName = "", elementName = "") {
-      return `id-${Math.random().toString().substring(2, 6)}-sgds-${componentName}-${elementName}`;
-  }
+  /**
+   * @summary The FormValidationMixin used by the form components
+   * @param superClass
+   * @returns
+   */
+  const SgdsFormValidatorMixin = (superClass) => {
+      class ToBeValidatedElement extends superClass {
+          constructor() {
+              super(...arguments);
+              this._isTouched = false;
+          }
+          connectedCallback() {
+              super.connectedCallback();
+              this.inputValidationController = new InputValidationController(this);
+          }
+          async firstUpdated(changedProperties) {
+              super.firstUpdated(changedProperties);
+              /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+              this.input =
+                  this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+              this._mixinValidate(this.input);
+          }
+          /**
+           * Native lifecycle of Form-Associated Custom Element Callbacks
+           */
+          formResetCallback() {
+              if (this._mixinResetFormControl) {
+                  this._mixinResetFormControl();
+              }
+              else {
+                  this.value = this.defaultValue;
+                  this._mixinResetValidity(this.input);
+              }
+              this._mixinSetFormValue();
+          }
+          /**
+           *
+           * Methods use by classes using this mixin
+           */
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run change handler
+           */
+          _mixinHandleChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleChange(e);
+          }
+          /**
+           * OnChange of form component
+           * 1. Make value of control accessible via FormData
+           * 2. Run input handler
+           */
+          _mixinHandleInputChange(e) {
+              this._mixinSetFormValue();
+              this.inputValidationController.handleInput(e);
+          }
+          /**
+           * During form resetting,
+           * 1. ValidityState is reset
+           * 2. invalid reactive prop is updated after the reset
+           * 3. Revalidates the ValidityState (but do not update invalid prop)
+           * to prepare for the next validity check
+           * 4. Reset touched state to false for a pristine form
+           */
+          _mixinResetValidity(input) {
+              this.inputValidationController.resetValidity();
+              this.inputValidationController.updateInvalidState();
+              this.inputValidationController.validateInput(input);
+              this._isTouched ? (this._isTouched = false) : null;
+          }
+          _mixinValidate(input) {
+              this.inputValidationController.validateInput(input);
+          }
+          _mixinSetFormValue() {
+              this.inputValidationController.setFormValue();
+          }
+          _mixinCheckValidity() {
+              return this.inputValidationController.checkValidity();
+          }
+          _mixinReportValidity() {
+              return this.inputValidationController.reportValidity();
+          }
+          _mixinGetValidity() {
+              return this.inputValidationController.validity;
+          }
+          _mixinGetValidationMessage() {
+              return this.inputValidationController.validationMessage;
+          }
+      }
+      ToBeValidatedElement.formAssociated = true;
+      __decorate([
+          queryAsync("sgds-input")
+      ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+      return ToBeValidatedElement;
+  };
 
   // @watch decorator
   //
@@ -4759,15 +4978,7 @@
       };
   }
 
-  var css_248z$4 = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;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);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{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.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
-
-  var css_248z$3 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback{color:var(--sgds-form-danger-color);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}`;
-
-  var css_248z$2 = css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
-
-  var css_248z$1 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
-
-  var css_248z = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-heading)}`;
+  var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.form-control-container.disabled{opacity:var(--sgds-opacity-50)}textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}.form-control{appearance:none;background-clip:padding-box;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);color:var(--sgds-form-color);min-height:var(--sgds-dimension-136);outline:0;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.form-control[readonly]{border-color:var(--sgds-form-border-color-muted)}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:not([disabled]):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control:not([disabled]):not(.is-invalid):focus,.form-control:not([disabled]):not(.is-invalid):focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus)}.form-control.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control:disabled{background-color:var(--sgds-form-bg-muted)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`;
 
   /**
    * @summary Text areas allow for the collection of input longer than a single line.
@@ -4777,13 +4988,9 @@
    * @event sgds-focus - Emitted when textarea is in focus.
    * @event sgds-blur - Emitted when textarea loses focus.
    */
-  class SgdsTextarea extends SgdsElement {
+  class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) {
       constructor() {
           super(...arguments);
-          /**@internal */
-          this.formSubmitController = new FormSubmitController(this);
-          /**The textarea's label */
-          this.label = "label";
           /**The textarea's value attribute. */
           this.value = "";
           /**Enables spell checking on the textarea */
@@ -4792,14 +4999,10 @@
           this.rows = 4;
           /**The textarea's placeholder text. */
           this.placeholder = "Placeholder";
-          /**Feedback text for error state when validated */
+          /** Custom feedback text for error state when validated */
           this.invalidFeedback = "";
           /**Autofocus the textarea */
           this.autofocus = false;
-          /**Disables the textarea. */
-          this.disabled = false;
-          /**Makes the textarea a required field. */
-          this.required = false;
           /** Makes the textarea readonly. */
           this.readonly = false;
           /** Controls how the textarea can be resized. */
@@ -4808,32 +5011,44 @@
           this.defaultValue = "";
           /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
           this.hasFeedback = false;
-          /** Marks the component as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-          this.invalid = false;
+          /** Makes the textarea as a required field. */
+          this.required = false;
           /** The textarea's hint text */
           this.hintText = "";
-          /** @internal The textarea's unique id */
-          this.textareaId = genId("textarea", "input");
-      }
-      connectedCallback() {
-          super.connectedCallback();
-          this.resizeObserver = new ResizeObserver(() => this._setTextareaHeight());
-          this.updateComplete.then(() => {
-              this._setTextareaHeight();
-              this.resizeObserver.observe(this.textarea);
-          });
-      }
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          this.resizeObserver.unobserve(this.textarea);
+          this._isTouched = false;
       }
       /** Sets focus on the textarea. */
       focus(options) {
           this.textarea.focus(options);
       }
-      /** Checks for validity and shows the browser's validation message if the control is invalid. */
+      /** Sets blur on the textarea. */
+      blur() {
+          this.textarea.blur();
+      }
+      /**
+       * 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.textarea.reportValidity();
+          return this._mixinReportValidity();
+      }
+      /**
+       * Checks for validity without any native error popup message
+       */
+      checkValidity() {
+          return this._mixinCheckValidity();
+      }
+      /**
+       * Returns the ValidityState object
+       */
+      get validity() {
+          return this._mixinGetValidity();
+      }
+      /**
+       * Returns the validation message based on the ValidityState
+       */
+      get validationMessage() {
+          return this._mixinGetValidationMessage();
       }
       /** Selects all the text in the textarea. */
       select() {
@@ -4843,14 +5058,21 @@
           e.preventDefault();
           this.invalid = true;
       }
-      _handleChange(event) {
-          this.value = this.textarea.value;
-          this.emit(event);
+      _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);
       }
       _handleFocus() {
           this.emit("sgds-focus");
       }
-      handleBlur() {
+      _handleBlur() {
+          this._isTouched = true;
           this.emit("sgds-blur");
       }
       /** @internal */
@@ -4867,23 +5089,26 @@
           }
       }
       /** @internal */
+      _handleIsTouched() {
+          if (this._isTouched) {
+              this.invalid = !this.textarea.checkValidity();
+          }
+      }
+      /** @internal */
       _handleDisabledChange() {
           // Disabled form controls are always valid, so we need to recheck validity when the state changes
-          this.textarea.disabled = this.disabled;
-          this.invalid = !this.textarea.checkValidity();
+          this.setInvalid(false);
       }
       /** @internal */
       _handleValueChange() {
-          this.invalid = !this.textarea.checkValidity();
           this.updateComplete.then(() => this._setTextareaHeight());
       }
       _renderHintText() {
-          const hintTextTemplate = html ` <div id="${this.textareaId}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() {
-          // if maxlength is defined
-          const wordCount = html `
+      _wordCount() {
+          return html `
       <div
         class="form-text word-count ${classMap({
             "invalid-feedback": this.invalid && this.hasFeedback
@@ -4892,13 +5117,15 @@
         ${this.value.length}/${this.maxlength}
       </div>
     `;
+      }
+      render() {
           return html `
       <div
         class="form-control-container ${classMap({
             disabled: this.disabled
         })}"
       >
-        <label for=${this.textareaId} class="form-label">${this.label}</label>
+        <label for=${this._controlId} class="form-label">${this.label}</label>
         <textarea
           class=${classMap({
             "form-control": true,
@@ -4907,7 +5134,7 @@
             "textarea-resize-vertical": this.resize === "vertical",
             "textarea-resize-auto": this.resize === "auto"
         })}
-          id=${this.textareaId}
+          id=${this._controlId}
           name=${ifDefined(this.name)}
           rows=${ifDefined(this.rows)}
           placeholder=${ifDefined(this.placeholder)}
@@ -4922,13 +5149,12 @@
           ?autofocus=${this.autofocus}
           autocorrect=${ifDefined(this.autocorrect)}
           inputmode=${ifDefined(this.inputmode)}
-          @input=${() => this._handleChange("sgds-input")}
-          @change=${() => this._handleChange("sgds-change")}
+          @input=${(e) => this._handleInputChange(e)}
+          @change=${(e) => this._handleChange(e)}
           @invalid=${(e) => this._handleInvalid(e)}
           @focus=${this._handleFocus}
-          @blur=${this.handleBlur}
-        >
-        </textarea>
+          @blur=${this._handleBlur}
+        ></textarea>
         <div class="textarea-info-container">
           ${this.invalid && this.hasFeedback
             ? html `
@@ -4939,30 +5165,22 @@
                       fill="#B90000"
                     />
                   </svg>
-                  <div id="${this.textareaId}-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()}`}
-          ${this.maxlength > 0 ? wordCount : undefined}
+          ${this.maxlength > 0 ? this._wordCount() : nothing}
         </div>
       </div>
     `;
       }
   }
-  SgdsTextarea.styles = [
-      ...SgdsElement.styles,
-      css_248z$1,
-      css_248z$2,
-      css_248z$3,
-      css_248z,
-      css_248z$4
-  ];
+  SgdsTextarea.styles = [...FormControlElement.styles, css_248z];
   __decorate([
       query("textarea.form-control")
   ], SgdsTextarea.prototype, "textarea", void 0);
-  __decorate([
-      property({ type: String, reflect: true })
-  ], SgdsTextarea.prototype, "label", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsTextarea.prototype, "name", void 0);
@@ -4990,12 +5208,6 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsTextarea.prototype, "autofocus", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "disabled", void 0);
-  __decorate([
-      property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "required", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsTextarea.prototype, "readonly", void 0);
@@ -5016,13 +5228,19 @@
   ], SgdsTextarea.prototype, "hasFeedback", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
-  ], SgdsTextarea.prototype, "invalid", void 0);
+  ], SgdsTextarea.prototype, "required", void 0);
   __decorate([
       property({ reflect: true })
   ], SgdsTextarea.prototype, "hintText", void 0);
+  __decorate([
+      state()
+  ], SgdsTextarea.prototype, "_isTouched", void 0);
   __decorate([
       watch("rows", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleRowsChange", null);
+  __decorate([
+      watch("_isTouched", { waitUntilFirstUpdate: true })
+  ], SgdsTextarea.prototype, "_handleIsTouched", null);
   __decorate([
       watch("disabled", { waitUntilFirstUpdate: true })
   ], SgdsTextarea.prototype, "_handleDisabledChange", null);