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

package/components/Alert/index.umd.js

@@ -30,270 +30,6 @@
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  const appliedClassMixins = new WeakMap();
-
-  /** Vefify if the Mixin was previously applyed
-   * @private
-   * @param {function} mixin      Mixin being applyed
-   * @param {object} superClass   Class receiving the new mixin
-   * @returns {boolean}
-   */
-  function wasMixinPreviouslyApplied(mixin, superClass) {
-    let klass = superClass;
-    while (klass) {
-      if (appliedClassMixins.get(klass) === mixin) {
-        return true;
-      }
-      klass = Object.getPrototypeOf(klass);
-    }
-    return false;
-  }
-
-  /** Apply each mixin in the chain to make sure they are not applied more than once to the final class.
-   * @export
-   * @param {function} mixin      Mixin to be applyed
-   * @returns {object}            Mixed class with mixin applied
-   */
-  function dedupeMixin(mixin) {
-    return superClass => {
-      if (wasMixinPreviouslyApplied(mixin, superClass)) {
-        return superClass;
-      }
-      const mixedClass = mixin(superClass);
-      appliedClassMixins.set(mixedClass, mixin);
-      return mixedClass;
-    };
-  }
-
-  /**
-   * @license
-   * Copyright 2019 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const global$5 = window;
-  /**
-   * Whether the current browser supports `adoptedStyleSheets`.
-   */
-  const supportsAdoptingStyleSheets$2 = global$5.ShadowRoot &&
-      (global$5.ShadyCSS === undefined || global$5.ShadyCSS.nativeShadow) &&
-      'adoptedStyleSheets' in Document.prototype &&
-      'replace' in CSSStyleSheet.prototype;
-  /**
-   * Applies the given styles to a `shadowRoot`. When Shadow DOM is
-   * available but `adoptedStyleSheets` is not, styles are appended to the
-   * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
-   * Note, when shimming is used, any styles that are subsequently placed into
-   * the shadowRoot should be placed *before* any shimmed adopted styles. This
-   * will match spec behavior that gives adopted sheets precedence over styles in
-   * shadowRoot.
-   */
-  const adoptStyles$2 = (renderRoot, styles) => {
-      if (supportsAdoptingStyleSheets$2) {
-          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
-      }
-      else {
-          styles.forEach((s) => {
-              const style = document.createElement('style');
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const nonce = global$5['litNonce'];
-              if (nonce !== undefined) {
-                  style.setAttribute('nonce', nonce);
-              }
-              style.textContent = s.cssText;
-              renderRoot.appendChild(style);
-          });
-      }
-  };
-
-  /**
-   * @typedef {import('./types').RenderOptions} RenderOptions
-   * @typedef {import('./types').ScopedElementsMixin} ScopedElementsMixin
-   * @typedef {import('./types').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types').ScopedElementsMap} ScopedElementsMap
-   * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
-   */
-
-  // @ts-ignore
-  const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
-
-  /**
-   * @template {import('./types').Constructor<HTMLElement>} T
-   * @param {T} superclass
-   * @return {T & import('./types').Constructor<ScopedElementsHost>}
-   */
-  const ScopedElementsMixinImplementation = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends superclass {
-      /**
-       * Obtains the scoped elements definitions map if specified.
-       *
-       * @returns {ScopedElementsMap}
-       */
-      static get scopedElements() {
-        return {};
-      }
-
-      /**
-       * Obtains the ShadowRoot options.
-       *
-       * @type {ShadowRootInit}
-       */
-      static get shadowRootOptions() {
-        return this.__shadowRootOptions;
-      }
-
-      /**
-       * Set the shadowRoot options.
-       *
-       * @param {ShadowRootInit} value
-       */
-      static set shadowRootOptions(value) {
-        this.__shadowRootOptions = value;
-      }
-
-      /**
-       * Obtains the element styles.
-       *
-       * @returns {CSSResultOrNative[]}
-       */
-      static get elementStyles() {
-        return this.__elementStyles;
-      }
-
-      static set elementStyles(styles) {
-        this.__elementStyles = styles;
-      }
-
-      // either TS or ESLint will complain here
-      // eslint-disable-next-line no-unused-vars
-      constructor(..._args) {
-        super();
-        /** @type {RenderOptions} */
-        this.renderOptions = this.renderOptions || undefined;
-      }
-
-      /**
-       * Obtains the CustomElementRegistry associated to the ShadowRoot.
-       *
-       * @returns {CustomElementRegistry}
-       */
-      get registry() {
-        // @ts-ignore
-        return this.constructor.__registry;
-      }
-
-      /**
-       * Set the CustomElementRegistry associated to the ShadowRoot
-       *
-       * @param {CustomElementRegistry} registry
-       */
-      set registry(registry) {
-        // @ts-ignore
-        this.constructor.__registry = registry;
-      }
-
-      createRenderRoot() {
-        const { scopedElements, shadowRootOptions, elementStyles } =
-          /** @type {typeof ScopedElementsHost} */ (this.constructor);
-
-        const shouldCreateRegistry =
-          !this.registry ||
-          // @ts-ignore
-          (this.registry === this.constructor.__registry &&
-            !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
-
-        /**
-         * Create a new registry if:
-         * - the registry is not defined
-         * - this class doesn't have its own registry *AND* has no shared registry
-         */
-        if (shouldCreateRegistry) {
-          this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
-          for (const [tagName, klass] of Object.entries(scopedElements)) {
-            this.defineScopedElement(tagName, klass);
-          }
-        }
-
-        /** @type {ShadowRootInit} */
-        const options = {
-          mode: 'open',
-          ...shadowRootOptions,
-          customElements: this.registry,
-        };
-
-        const createdRoot = this.attachShadow(options);
-        if (supportsScopedRegistry) {
-          this.renderOptions.creationScope = createdRoot;
-        }
-
-        if (createdRoot instanceof ShadowRoot) {
-          adoptStyles$2(createdRoot, elementStyles);
-          this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
-        }
-
-        return createdRoot;
-      }
-
-      createScopedElement(tagName) {
-        const root = supportsScopedRegistry ? this.shadowRoot : document;
-        // @ts-ignore polyfill to support createElement on shadowRoot is loaded
-        return root.createElement(tagName);
-      }
-
-      /**
-       * Defines a scoped element.
-       *
-       * @param {string} tagName
-       * @param {typeof HTMLElement} klass
-       */
-      defineScopedElement(tagName, klass) {
-        const registeredClass = this.registry.get(tagName);
-        if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
-          // eslint-disable-next-line no-console
-          console.error(
-            [
-              `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
-              'This is only possible with a CustomElementRegistry.',
-              'Your browser does not support this feature so you will need to load a polyfill for it.',
-              'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
-              'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
-              'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
-            ].join('\n'),
-          );
-        }
-        if (!registeredClass) {
-          return this.registry.define(tagName, klass);
-        }
-        return this.registry.get(tagName);
-      }
-
-      /**
-       * @deprecated use the native el.tagName instead
-       *
-       * @param {string} tagName
-       * @returns {string} the tag name
-       */
-      // eslint-disable-next-line class-methods-use-this
-      getScopedTagName(tagName) {
-        // @ts-ignore
-        return this.constructor.getScopedTagName(tagName);
-      }
-
-      /**
-       * @deprecated use the native el.tagName instead
-       *
-       * @param {string} tagName
-       * @returns {string} the tag name
-       */
-      // eslint-disable-next-line class-methods-use-this
-      static getScopedTagName(tagName) {
-        // @ts-ignore
-        return this.__registry.get(tagName) ? tagName : undefined;
-      }
-    };
-
-  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
-
   /**
    * @license
    * Copyright 2019 Google LLC
@@ -301,12 +37,12 @@
    */
   const NODE_MODE$1 = false;
   // Allows minifiers to rename references to globalThis
-  const global$4 = globalThis;
+  const global$5 = globalThis;
   /**
    * Whether the current browser supports `adoptedStyleSheets`.
    */
-  const supportsAdoptingStyleSheets$1 = global$4.ShadowRoot &&
-      (global$4.ShadyCSS === undefined || global$4.ShadyCSS.nativeShadow) &&
+  const supportsAdoptingStyleSheets$2 = global$5.ShadowRoot &&
+      (global$5.ShadyCSS === undefined || global$5.ShadyCSS.nativeShadow) &&
       'adoptedStyleSheets' in Document.prototype &&
       'replace' in CSSStyleSheet.prototype;
   const constructionToken$1 = Symbol();
@@ -335,7 +71,7 @@
           // constructable.
           let styleSheet = this._styleSheet;
           const strings = this._strings;
-          if (supportsAdoptingStyleSheets$1 && styleSheet === undefined) {
+          if (supportsAdoptingStyleSheets$2 && styleSheet === undefined) {
               const cacheable = strings !== undefined && strings.length === 1;
               if (cacheable) {
                   styleSheet = cssTagCache$1.get(strings);
@@ -370,15 +106,15 @@
    * will match spec behavior that gives adopted sheets precedence over styles in
    * shadowRoot.
    */
-  const adoptStyles$1 = (renderRoot, styles) => {
-      if (supportsAdoptingStyleSheets$1) {
+  const adoptStyles$2 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$2) {
           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$4['litNonce'];
+              const nonce = global$5['litNonce'];
               if (nonce !== undefined) {
                   style.setAttribute('nonce', nonce);
               }
@@ -394,7 +130,7 @@
       }
       return unsafeCSS$1(cssText);
   };
-  const getCompatibleStyle$1 = supportsAdoptingStyleSheets$1 ||
+  const getCompatibleStyle$1 = supportsAdoptingStyleSheets$2 ||
       (NODE_MODE$1 )
       ? (s) => s
       : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet$1(s) : s;
@@ -407,9 +143,9 @@
   // TODO (justinfagnani): Add `hasOwn` here when we ship ES2022
   const { is: is$1, defineProperty: defineProperty$1, getOwnPropertyDescriptor: getOwnPropertyDescriptor$1, getOwnPropertyNames: getOwnPropertyNames$1, getOwnPropertySymbols: getOwnPropertySymbols$1, getPrototypeOf: getPrototypeOf$1, } = Object;
   // Lets a minifier replace globalThis references with a minified name
-  const global$3 = globalThis;
+  const global$4 = globalThis;
   let issueWarning$4;
-  const trustedTypes$2 = global$3
+  const trustedTypes$2 = global$4
       .trustedTypes;
   // Temporary workaround for https://crbug.com/993268
   // Currently, any attribute starting with "on" is considered to be a
@@ -418,12 +154,12 @@
   const emptyStringForBooleanAttribute$1 = trustedTypes$2
       ? trustedTypes$2.emptyScript
       : '';
-  const polyfillSupport$3 = global$3.reactiveElementPolyfillSupportDevMode
+  const polyfillSupport$3 = global$4.reactiveElementPolyfillSupportDevMode
       ;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
-      const issuedWarnings = (global$3.litIssuedWarnings ??=
+      const issuedWarnings = (global$4.litIssuedWarnings ??=
           new Set());
       // Issue a warning, if we haven't already.
       issueWarning$4 = (code, warning) => {
@@ -435,7 +171,7 @@
       };
       issueWarning$4('dev-mode', `Lit is in dev mode. Not recommended for production!`);
       // Issue polyfill support warning.
-      if (global$3.ShadyDOM?.inUse && polyfillSupport$3 === undefined) {
+      if (global$4.ShadyDOM?.inUse && polyfillSupport$3 === undefined) {
           issueWarning$4('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
               `the \`polyfill-support\` module has not been loaded.`);
       }
@@ -446,12 +182,12 @@
    * Compiled out of prod mode builds.
    */
   const debugLogEvent$2 = (event) => {
-          const shouldEmit = global$3
+          const shouldEmit = global$4
               .emitLitDebugLogEvents;
           if (!shouldEmit) {
               return;
           }
-          global$3.dispatchEvent(new CustomEvent('lit-debug', {
+          global$4.dispatchEvent(new CustomEvent('lit-debug', {
               detail: event,
           }));
       }
@@ -523,7 +259,7 @@
   // Map from a class's metadata object to property options
   // Note that we must use nullish-coalescing assignment so that we only use one
   // map even if we load multiple version of this module.
-  global$3.litPropertyMetadata ??= new WeakMap();
+  global$4.litPropertyMetadata ??= new WeakMap();
   /**
    * Base element class which manages element properties and attributes. When
    * properties change, the `update` method is asynchronously called. This method
@@ -943,7 +679,7 @@
       createRenderRoot() {
           const renderRoot = this.shadowRoot ??
               this.attachShadow(this.constructor.shadowRootOptions);
-          adoptStyles$1(renderRoot, this.constructor.elementStyles);
+          adoptStyles$2(renderRoot, this.constructor.elementStyles);
           return renderRoot;
       }
       /**
@@ -1450,8 +1186,8 @@
   }
   // IMPORTANT: do not change the property name or the assignment expression.
   // This line will be used in regexes to search for ReactiveElement usage.
-  (global$3.reactiveElementVersions ??= []).push('2.0.4');
-  if (global$3.reactiveElementVersions.length > 1) {
+  (global$4.reactiveElementVersions ??= []).push('2.0.4');
+  if (global$4.reactiveElementVersions.length > 1) {
       issueWarning$4('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
@@ -1462,19 +1198,19 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */
   // Allows minifiers to rename references to globalThis
-  const global$2 = globalThis;
+  const global$3 = 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
+          const shouldEmit = global$3
               .emitLitDebugLogEvents;
           if (!shouldEmit) {
               return;
           }
-          global$2.dispatchEvent(new CustomEvent('lit-debug', {
+          global$3.dispatchEvent(new CustomEvent('lit-debug', {
               detail: event,
           }));
       }
@@ -1485,24 +1221,24 @@
   let debugLogRenderId = 0;
   let issueWarning$3;
   {
-      global$2.litIssuedWarnings ??= new Set();
+      global$3.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 (!global$2.litIssuedWarnings.has(warning)) {
+          if (!global$3.litIssuedWarnings.has(warning)) {
               console.warn(warning);
-              global$2.litIssuedWarnings.add(warning);
+              global$3.litIssuedWarnings.add(warning);
           }
       };
       issueWarning$3('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
+  const wrap = global$3.ShadyDOM?.inUse &&
+      global$3.ShadyDOM?.noPatch === true
+      ? global$3.ShadyDOM.wrap
       : (node) => node;
-  const trustedTypes$1 = global$2.trustedTypes;
+  const trustedTypes$1 = global$3.trustedTypes;
   /**
    * Our TrustedTypePolicy for HTML which is declared using the html template
    * tag function.
@@ -1617,9 +1353,9 @@
    * text content for marker strings.
    */
   const rawTextElement = /^(?:script|style|textarea|title)$/i;
-  /** TemplateResult types */
-  const HTML_RESULT = 1;
-  const SVG_RESULT = 2;
+  /** TemplateResult types */
+  const HTML_RESULT$1 = 1;
+  const SVG_RESULT$1 = 2;
   const MATHML_RESULT = 3;
   // TemplatePart types
   // IMPORTANT: these must match the values in PartType
@@ -1671,7 +1407,7 @@
    * if a template comes from the same expression as a previously rendered result,
    * it's efficiently updated instead of replaced.
    */
-  const html$1 = tag(HTML_RESULT);
+  const html$1 = tag(HTML_RESULT$1);
   /**
    * A sentinel value that signals that a value was handled by a directive and
    * should not be written to the DOM.
@@ -1760,7 +1496,7 @@
       // parts. ElementParts are also reflected in this array as undefined
       // rather than a string, to disambiguate from attribute bindings.
       const attrNames = [];
-      let html = type === SVG_RESULT ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
+      let html = type === SVG_RESULT$1 ? '<svg>' : type === MATHML_RESULT ? '<math>' : '';
       // When we're inside a raw text tag (not it's text content), the regex
       // will still be tagRegex so we can find attributes, but will switch to
       // this regex when the tag ends.
@@ -1886,7 +1622,7 @@
       }
       const htmlResult = html +
           (strings[l] || '<?>') +
-          (type === SVG_RESULT ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
+          (type === SVG_RESULT$1 ? '</svg>' : type === MATHML_RESULT ? '</math>' : '');
       // Returned as an array for terseness
       return [trustFromTemplateString(strings, htmlResult), attrNames];
   };
@@ -1905,7 +1641,7 @@
           this.el = Template.createElement(html, options);
           walker.currentNode = this.el.content;
           // Re-parent SVG or MathML nodes into template root
-          if (type === SVG_RESULT || type === MATHML_RESULT) {
+          if (type === SVG_RESULT$1 || type === MATHML_RESULT) {
               const wrapper = this.el.content.firstChild;
               wrapper.replaceWith(...wrapper.childNodes);
           }
@@ -2766,13 +2502,13 @@
       }
   }
   // Apply polyfills if available
-  const polyfillSupport$2 = global$2.litHtmlPolyfillSupportDevMode
+  const polyfillSupport$2 = global$3.litHtmlPolyfillSupportDevMode
       ;
   polyfillSupport$2?.(Template, ChildPart);
   // IMPORTANT: do not change the property name or the assignment expression.
   // 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) {
+  (global$3.litHtmlVersions ??= []).push('3.2.0');
+  if (global$3.litHtmlVersions.length > 1) {
       issueWarning$3('multiple-versions', `Multiple versions of Lit loaded. ` +
           `Loading multiple versions is not recommended.`);
   }
@@ -2857,12 +2593,12 @@
    */
   const NODE_MODE = false;
   // Allows minifiers to rename references to globalThis
-  const global$1 = globalThis;
+  const global$2 = globalThis;
   /**
    * Whether the current browser supports `adoptedStyleSheets`.
    */
-  const supportsAdoptingStyleSheets = global$1.ShadowRoot &&
-      (global$1.ShadyCSS === undefined || global$1.ShadyCSS.nativeShadow) &&
+  const supportsAdoptingStyleSheets$1 = global$2.ShadowRoot &&
+      (global$2.ShadyCSS === undefined || global$2.ShadyCSS.nativeShadow) &&
       'adoptedStyleSheets' in Document.prototype &&
       'replace' in CSSStyleSheet.prototype;
   const constructionToken = Symbol();
@@ -2891,7 +2627,7 @@
           // constructable.
           let styleSheet = this._styleSheet;
           const strings = this._strings;
-          if (supportsAdoptingStyleSheets && styleSheet === undefined) {
+          if (supportsAdoptingStyleSheets$1 && styleSheet === undefined) {
               const cacheable = strings !== undefined && strings.length === 1;
               if (cacheable) {
                   styleSheet = cssTagCache.get(strings);
@@ -2954,15 +2690,15 @@
    * will match spec behavior that gives adopted sheets precedence over styles in
    * shadowRoot.
    */
-  const adoptStyles = (renderRoot, styles) => {
-      if (supportsAdoptingStyleSheets) {
+  const adoptStyles$1 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$1) {
           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'];
+              const nonce = global$2['litNonce'];
               if (nonce !== undefined) {
                   style.setAttribute('nonce', nonce);
               }
@@ -2978,7 +2714,7 @@
       }
       return unsafeCSS(cssText);
   };
-  const getCompatibleStyle = supportsAdoptingStyleSheets ||
+  const getCompatibleStyle = supportsAdoptingStyleSheets$1 ||
       (NODE_MODE )
       ? (s) => s
       : (s) => s instanceof CSSStyleSheet ? cssResultFromStyleSheet(s) : s;
@@ -2991,9 +2727,9 @@
   // 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;
+  const global$1 = globalThis;
   let issueWarning$2;
-  const trustedTypes = global
+  const trustedTypes = global$1
       .trustedTypes;
   // Temporary workaround for https://crbug.com/993268
   // Currently, any attribute starting with "on" is considered to be a
@@ -3002,12 +2738,12 @@
   const emptyStringForBooleanAttribute = trustedTypes
       ? trustedTypes.emptyScript
       : '';
-  const polyfillSupport$1 = global.reactiveElementPolyfillSupportDevMode
+  const polyfillSupport$1 = global$1.reactiveElementPolyfillSupportDevMode
       ;
   {
       // Ensure warnings are issued only 1x, even if multiple versions of Lit
       // are loaded.
-      const issuedWarnings = (global.litIssuedWarnings ??=
+      const issuedWarnings = (global$1.litIssuedWarnings ??=
           new Set());
       // Issue a warning, if we haven't already.
       issueWarning$2 = (code, warning) => {
@@ -3019,7 +2755,7 @@
       };
       issueWarning$2('dev-mode', `Lit is in dev mode. Not recommended for production!`);
       // Issue polyfill support warning.
-      if (global.ShadyDOM?.inUse && polyfillSupport$1 === undefined) {
+      if (global$1.ShadyDOM?.inUse && polyfillSupport$1 === undefined) {
           issueWarning$2('polyfill-support-missing', `Shadow DOM is being polyfilled via \`ShadyDOM\` but ` +
               `the \`polyfill-support\` module has not been loaded.`);
       }
@@ -3030,12 +2766,12 @@
    * Compiled out of prod mode builds.
    */
   const debugLogEvent = (event) => {
-          const shouldEmit = global
+          const shouldEmit = global$1
               .emitLitDebugLogEvents;
           if (!shouldEmit) {
               return;
           }
-          global.dispatchEvent(new CustomEvent('lit-debug', {
+          global$1.dispatchEvent(new CustomEvent('lit-debug', {
               detail: event,
           }));
       }
@@ -3107,7 +2843,7 @@
   // Map from a class's metadata object to property options
   // Note that we must use nullish-coalescing assignment so that we only use one
   // map even if we load multiple version of this module.
-  global.litPropertyMetadata ??= new WeakMap();
+  global$1.litPropertyMetadata ??= new WeakMap();
   /**
    * Base element class which manages element properties and attributes. When
    * properties change, the `update` method is asynchronously called. This method
@@ -3527,7 +3263,7 @@
       createRenderRoot() {
           const renderRoot = this.shadowRoot ??
               this.attachShadow(this.constructor.shadowRootOptions);
-          adoptStyles(renderRoot, this.constructor.elementStyles);
+          adoptStyles$1(renderRoot, this.constructor.elementStyles);
           return renderRoot;
       }
       /**
@@ -4034,8 +3770,8 @@
   }
   // 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) {
+  (global$1.reactiveElementVersions ??= []).push('2.0.4');
+  if (global$1.reactiveElementVersions.length > 1) {
       issueWarning$2('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
           `is not recommended.`);
   }
@@ -4105,98 +3841,362 @@
        * @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;
+      update(changedProperties) {
+          // Setting properties in `render` should not trigger an update. Since
+          // updates are allowed after super.update, it's important to call `render`
+          // before that.
+          const value = this.render();
+          if (!this.hasUpdated) {
+              this.renderOptions.isConnected = this.isConnected;
+          }
+          super.update(changedProperties);
+          this.__childPart = render(value, this.renderRoot, this.renderOptions);
+      }
+      /**
+       * Invoked when the component is added to the document's DOM.
+       *
+       * In `connectedCallback()` you should setup tasks that should only occur when
+       * the element is connected to the document. The most common of these is
+       * adding event listeners to nodes external to the element, like a keydown
+       * event handler added to the window.
+       *
+       * ```ts
+       * connectedCallback() {
+       *   super.connectedCallback();
+       *   addEventListener('keydown', this._handleKeydown);
+       * }
+       * ```
+       *
+       * Typically, anything done in `connectedCallback()` should be undone when the
+       * element is disconnected, in `disconnectedCallback()`.
+       *
+       * @category lifecycle
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.__childPart?.setConnected(true);
+      }
+      /**
+       * Invoked when the component is removed from the document's DOM.
+       *
+       * This callback is the main signal to the element that it may no longer be
+       * used. `disconnectedCallback()` should ensure that nothing is holding a
+       * reference to the element (such as event listeners added to nodes external
+       * to the element), so that it is free to be garbage collected.
+       *
+       * ```ts
+       * disconnectedCallback() {
+       *   super.disconnectedCallback();
+       *   window.removeEventListener('keydown', this._handleKeydown);
+       * }
+       * ```
+       *
+       * An element may be re-connected after being disconnected.
+       *
+       * @category lifecycle
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.__childPart?.setConnected(false);
+      }
+      /**
+       * Invoked on each update to perform rendering tasks. This method may return
+       * any value renderable by lit-html's `ChildPart` - typically a
+       * `TemplateResult`. Setting properties inside this method will *not* trigger
+       * the element to update.
+       * @category rendering
+       */
+      render() {
+          return noChange;
+      }
+  }
+  // This property needs to remain unminified.
+  LitElement['_$litElement$'] = true;
+  /**
+   * Ensure this class is marked as `finalized` as an optimization ensuring
+   * it will not needlessly try to `finalize`.
+   *
+   * Note this property name is a string to prevent breaking Closure JS Compiler
+   * optimizations. See @lit/reactive-element for more information.
+   */
+  LitElement[JSCompiler_renameProperty('finalized')] = true;
+  // Install hydration if available
+  globalThis.litElementHydrateSupport?.({ LitElement });
+  // Apply polyfills if available
+  const polyfillSupport = globalThis.litElementPolyfillSupportDevMode
+      ;
+  polyfillSupport?.({ LitElement });
+  // IMPORTANT: do not change the property name or the assignment expression.
+  // This line will be used in regexes to search for LitElement usage.
+  (globalThis.litElementVersions ??= []).push('4.1.0');
+  if (globalThis.litElementVersions.length > 1) {
+      issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
+          `is not recommended.`);
+  }
+
+  const appliedClassMixins = new WeakMap();
+
+  /** Vefify if the Mixin was previously applyed
+   * @private
+   * @param {function} mixin      Mixin being applyed
+   * @param {object} superClass   Class receiving the new mixin
+   * @returns {boolean}
+   */
+  function wasMixinPreviouslyApplied(mixin, superClass) {
+    let klass = superClass;
+    while (klass) {
+      if (appliedClassMixins.get(klass) === mixin) {
+        return true;
+      }
+      klass = Object.getPrototypeOf(klass);
+    }
+    return false;
+  }
+
+  /** Apply each mixin in the chain to make sure they are not applied more than once to the final class.
+   * @export
+   * @param {function} mixin      Mixin to be applyed
+   * @returns {object}            Mixed class with mixin applied
+   */
+  function dedupeMixin(mixin) {
+    return superClass => {
+      if (wasMixinPreviouslyApplied(mixin, superClass)) {
+        return superClass;
+      }
+      const mixedClass = mixin(superClass);
+      appliedClassMixins.set(mixedClass, mixin);
+      return mixedClass;
+    };
+  }
+
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const global = window;
+  /**
+   * Whether the current browser supports `adoptedStyleSheets`.
+   */
+  const supportsAdoptingStyleSheets = global.ShadowRoot &&
+      (global.ShadyCSS === undefined || global.ShadyCSS.nativeShadow) &&
+      'adoptedStyleSheets' in Document.prototype &&
+      'replace' in CSSStyleSheet.prototype;
+  /**
+   * Applies the given styles to a `shadowRoot`. When Shadow DOM is
+   * available but `adoptedStyleSheets` is not, styles are appended to the
+   * `shadowRoot` to [mimic spec behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
+   * Note, when shimming is used, any styles that are subsequently placed into
+   * the shadowRoot should be placed *before* any shimmed adopted styles. This
+   * will match spec behavior that gives adopted sheets precedence over styles in
+   * shadowRoot.
+   */
+  const adoptStyles = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets) {
+          renderRoot.adoptedStyleSheets = styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet);
+      }
+      else {
+          styles.forEach((s) => {
+              const style = document.createElement('style');
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const nonce = global['litNonce'];
+              if (nonce !== undefined) {
+                  style.setAttribute('nonce', nonce);
+              }
+              style.textContent = s.cssText;
+              renderRoot.appendChild(style);
+          });
+      }
+  };
+
+  /**
+   * @typedef {import('./types').RenderOptions} RenderOptions
+   * @typedef {import('./types').ScopedElementsMixin} ScopedElementsMixin
+   * @typedef {import('./types').ScopedElementsHost} ScopedElementsHost
+   * @typedef {import('./types').ScopedElementsMap} ScopedElementsMap
+   * @typedef {import('@lit/reactive-element').CSSResultOrNative} CSSResultOrNative
+   */
+
+  // @ts-ignore
+  const supportsScopedRegistry = !!ShadowRoot.prototype.createElement;
+
+  /**
+   * @template {import('./types').Constructor<HTMLElement>} T
+   * @param {T} superclass
+   * @return {T & import('./types').Constructor<ScopedElementsHost>}
+   */
+  const ScopedElementsMixinImplementation = superclass =>
+    /** @type {ScopedElementsHost} */
+    class ScopedElementsHost extends superclass {
+      /**
+       * Obtains the scoped elements definitions map if specified.
+       *
+       * @returns {ScopedElementsMap}
+       */
+      static get scopedElements() {
+        return {};
+      }
+
+      /**
+       * Obtains the ShadowRoot options.
+       *
+       * @type {ShadowRootInit}
+       */
+      static get shadowRootOptions() {
+        return this.__shadowRootOptions;
+      }
+
+      /**
+       * Set the shadowRoot options.
+       *
+       * @param {ShadowRootInit} value
+       */
+      static set shadowRootOptions(value) {
+        this.__shadowRootOptions = value;
+      }
+
+      /**
+       * Obtains the element styles.
+       *
+       * @returns {CSSResultOrNative[]}
+       */
+      static get elementStyles() {
+        return this.__elementStyles;
+      }
+
+      static set elementStyles(styles) {
+        this.__elementStyles = styles;
+      }
+
+      // either TS or ESLint will complain here
+      // eslint-disable-next-line no-unused-vars
+      constructor(..._args) {
+        super();
+        /** @type {RenderOptions} */
+        this.renderOptions = this.renderOptions || undefined;
+      }
+
+      /**
+       * Obtains the CustomElementRegistry associated to the ShadowRoot.
+       *
+       * @returns {CustomElementRegistry}
+       */
+      get registry() {
+        // @ts-ignore
+        return this.constructor.__registry;
+      }
+
+      /**
+       * Set the CustomElementRegistry associated to the ShadowRoot
+       *
+       * @param {CustomElementRegistry} registry
+       */
+      set registry(registry) {
+        // @ts-ignore
+        this.constructor.__registry = registry;
+      }
+
+      createRenderRoot() {
+        const { scopedElements, shadowRootOptions, elementStyles } =
+          /** @type {typeof ScopedElementsHost} */ (this.constructor);
+
+        const shouldCreateRegistry =
+          !this.registry ||
+          // @ts-ignore
+          (this.registry === this.constructor.__registry &&
+            !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
+
+        /**
+         * Create a new registry if:
+         * - the registry is not defined
+         * - this class doesn't have its own registry *AND* has no shared registry
+         */
+        if (shouldCreateRegistry) {
+          this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+          for (const [tagName, klass] of Object.entries(scopedElements)) {
+            this.defineScopedElement(tagName, klass);
           }
-          super.update(changedProperties);
-          this.__childPart = render(value, this.renderRoot, this.renderOptions);
+        }
+
+        /** @type {ShadowRootInit} */
+        const options = {
+          mode: 'open',
+          ...shadowRootOptions,
+          customElements: this.registry,
+        };
+
+        const createdRoot = this.attachShadow(options);
+        if (supportsScopedRegistry) {
+          this.renderOptions.creationScope = createdRoot;
+        }
+
+        if (createdRoot instanceof ShadowRoot) {
+          adoptStyles(createdRoot, elementStyles);
+          this.renderOptions.renderBefore = this.renderOptions.renderBefore || createdRoot.firstChild;
+        }
+
+        return createdRoot;
+      }
+
+      createScopedElement(tagName) {
+        const root = supportsScopedRegistry ? this.shadowRoot : document;
+        // @ts-ignore polyfill to support createElement on shadowRoot is loaded
+        return root.createElement(tagName);
       }
+
       /**
-       * 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()`.
+       * Defines a scoped element.
        *
-       * @category lifecycle
+       * @param {string} tagName
+       * @param {typeof HTMLElement} klass
        */
-      connectedCallback() {
-          super.connectedCallback();
-          this.__childPart?.setConnected(true);
+      defineScopedElement(tagName, klass) {
+        const registeredClass = this.registry.get(tagName);
+        if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+          // eslint-disable-next-line no-console
+          console.error(
+            [
+              `You are trying to re-register the "${tagName}" custom element with a different class via ScopedElementsMixin.`,
+              'This is only possible with a CustomElementRegistry.',
+              'Your browser does not support this feature so you will need to load a polyfill for it.',
+              'Load "@webcomponents/scoped-custom-element-registry" before you register ANY web component to the global customElements registry.',
+              'e.g. add "<script src="/node_modules/@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js"></script>" as your first script tag.',
+              'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
+            ].join('\n'),
+          );
+        }
+        if (!registeredClass) {
+          return this.registry.define(tagName, klass);
+        }
+        return this.registry.get(tagName);
       }
+
       /**
-       * 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.
+       * @deprecated use the native el.tagName instead
        *
-       * @category lifecycle
+       * @param {string} tagName
+       * @returns {string} the tag name
        */
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          this.__childPart?.setConnected(false);
+      // eslint-disable-next-line class-methods-use-this
+      getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.constructor.getScopedTagName(tagName);
       }
+
       /**
-       * 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
+       * @deprecated use the native el.tagName instead
+       *
+       * @param {string} tagName
+       * @returns {string} the tag name
        */
-      render() {
-          return noChange;
+      // eslint-disable-next-line class-methods-use-this
+      static getScopedTagName(tagName) {
+        // @ts-ignore
+        return this.__registry.get(tagName) ? tagName : undefined;
       }
-  }
-  // This property needs to remain unminified.
-  LitElement['_$litElement$'] = true;
-  /**
-   * Ensure this class is marked as `finalized` as an optimization ensuring
-   * it will not needlessly try to `finalize`.
-   *
-   * Note this property name is a string to prevent breaking Closure JS Compiler
-   * optimizations. See @lit/reactive-element for more information.
-   */
-  LitElement[JSCompiler_renameProperty('finalized')] = true;
-  // Install hydration if available
-  globalThis.litElementHydrateSupport?.({ LitElement });
-  // Apply polyfills if available
-  const polyfillSupport = globalThis.litElementPolyfillSupportDevMode
-      ;
-  polyfillSupport?.({ LitElement });
-  // IMPORTANT: do not change the property name or the assignment expression.
-  // This line will be used in regexes to search for LitElement usage.
-  (globalThis.litElementVersions ??= []).push('4.1.0');
-  if (globalThis.litElementVersions.length > 1) {
-      issueWarning$1('multiple-versions', `Multiple versions of Lit loaded. Loading multiple versions ` +
-          `is not recommended.`);
-  }
+    };
+
+  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
 
   /**
    * @license
@@ -4334,31 +4334,25 @@
    * 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).
+   * 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.
    *
-   * @internal
+   * 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
    */
-  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;
-  };
+  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
@@ -4371,51 +4365,6 @@
       (globalThis.litIssuedWarnings ??= new Set());
   }
 
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  /**
-   * A property decorator that converts a class property into a getter that
-   * returns the `assignedNodes` of the given `slot`.
-   *
-   * Can be passed an optional {@linkcode QueryAssignedNodesOptions} object.
-   *
-   * Example usage:
-   * ```ts
-   * class MyElement {
-   *   @queryAssignedNodes({slot: 'list', flatten: true})
-   *   listItems!: Array<Node>;
-   *
-   *   render() {
-   *     return html`
-   *       <slot name="list"></slot>
-   *     `;
-   *   }
-   * }
-   * ```
-   *
-   * Note the type of this property should be annotated as `Array<Node>`. Use the
-   * queryAssignedElements decorator to list only elements, and optionally filter
-   * the element list using a CSS selector.
-   *
-   * @category Decorator
-   */
-  function queryAssignedNodes(options) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return ((obj, name) => {
-          const { slot } = options ?? {};
-          const slotSelector = `slot${slot ? `[name=${slot}]` : ':not([name])'}`;
-          return desc(obj, name, {
-              get() {
-                  const slotEl = this.renderRoot?.querySelector(slotSelector);
-                  return (slotEl?.assignedNodes(options) ?? []);
-              },
-          });
-      });
-  }
-
   /**
    * @license
    * Copyright 2017 Google LLC
@@ -4635,7 +4584,7 @@
    */
   const html = withStatic(html$1);
 
-  var css_248z$4 = 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$5 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-heading);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after{background-color:currentColor;content:"/";display:inline-block;margin:0 .125rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:73%;-webkit-mask-size:73%;padding:0 .45em}::slotted(a){color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}::slotted(a:hover){color:var(--sgds-link-hover-color)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4653,7 +4602,7 @@
           return event;
       }
   }
-  SgdsElement.styles = [css_248z$4];
+  SgdsElement.styles = [css_248z$5];
 
   // @watch decorator
   //
@@ -4705,7 +4654,7 @@
    */
   const ifDefined = (value) => value ?? nothing;
 
-  var css_248z$3 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-lg);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-lg)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z$4 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.
@@ -4743,7 +4692,7 @@
     `;
       }
   }
-  SgdsCloseButton.styles = [css_248z$3];
+  SgdsCloseButton.styles = [...SgdsElement.styles, css_248z$4];
   __decorate([
       property({ type: String })
   ], SgdsCloseButton.prototype, "ariaLabel", void 0);
@@ -4754,7 +4703,134 @@
       property({ type: String, reflect: true })
   ], SgdsCloseButton.prototype, "variant", void 0);
 
-  var css_248z$2 = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]{display:flex}slot[name=icon].d-none{display:none}slot[name=icon]::slotted(*){height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const HTML_RESULT = 1;
+  class UnsafeHTMLDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          this._value = nothing;
+          if (partInfo.type !== PartType.CHILD) {
+              throw new Error(`${this.constructor.directiveName}() can only be used in child bindings`);
+          }
+      }
+      render(value) {
+          if (value === nothing || value == null) {
+              this._templateResult = undefined;
+              return (this._value = value);
+          }
+          if (value === noChange) {
+              return value;
+          }
+          if (typeof value != 'string') {
+              throw new Error(`${this.constructor.directiveName}() called with a non-string value`);
+          }
+          if (value === this._value) {
+              return this._templateResult;
+          }
+          this._value = value;
+          const strings = [value];
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          strings.raw = strings;
+          // WARNING: impersonating a TemplateResult like this is extremely
+          // dangerous. Third-party directives should not do this.
+          return (this._templateResult = {
+              // Cast to a known set of integers that satisfy ResultType so that we
+              // don't have to export ResultType and possibly encourage this pattern.
+              // This property needs to remain unminified.
+              ['_$litType$']: this.constructor
+                  .resultType,
+              strings,
+              values: [],
+          });
+      }
+  }
+  UnsafeHTMLDirective.directiveName = 'unsafeHTML';
+  UnsafeHTMLDirective.resultType = HTML_RESULT;
+
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const SVG_RESULT = 2;
+  class UnsafeSVGDirective extends UnsafeHTMLDirective {
+  }
+  UnsafeSVGDirective.directiveName = 'unsafeSVG';
+  UnsafeSVGDirective.resultType = SVG_RESULT;
+  /**
+   * Renders the result as SVG, rather than text.
+   *
+   * The values `undefined`, `null`, and `nothing`, will all result in no content
+   * (empty string) being rendered.
+   *
+   * Note, this is unsafe to use with any user-provided input that hasn't been
+   * sanitized or escaped, as it may lead to cross-site-scripting
+   * vulnerabilities.
+   */
+  const unsafeSVG = directive(UnsafeSVGDirective);
+
+  var css_248z$3 = css`:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;
+
+  /**
+   * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
+   *
+   * @event sgds-blur - Emitted when the button is blurred.
+   * @event sgds-focus - Emitted when the button is focused.
+   */
+  class SgdsIcon extends SgdsElement {
+      constructor() {
+          super(...arguments);
+          /** Specifies a small, medium or large icon, the size is medium by default. */
+          this.size = "lg";
+          /** @internal */
+          this._svgContent = null;
+      }
+      async firstUpdated() {
+          if (this.name) {
+              this.loadSvg(this.name);
+          }
+      }
+      updated() {
+          this.style.display = this._svgContent ? "flex" : "none";
+      }
+      async loadSvg(name) {
+          if (name) {
+              // Dynamically import the SVG if not cached
+              try {
+                  //TODO: This path is too specific to our repo, it won't work for users
+                  const response = await fetch(`/src/icons/${name}.svg`);
+                  if (response.ok) {
+                      const svgContent = await response.text();
+                      // Render the SVG
+                      // this.renderSvg(svgContent);
+                      this._svgContent = svgContent;
+                  }
+              }
+              catch (error) {
+                  console.error(`Error loading SVG: ${name}`, error);
+              }
+          }
+      }
+      render() {
+          return html `${unsafeSVG(this._svgContent)}`;
+      }
+  }
+  SgdsIcon.styles = [...SgdsElement.styles, css_248z$3];
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsIcon.prototype, "name", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsIcon.prototype, "size", void 0);
+  __decorate([
+      state()
+  ], SgdsIcon.prototype, "_svgContent", void 0);
+
+  var css_248z$2 = css`:host{--sgds-alert-bg:var(--sgds-primary-bg);--sgds-alert-color:var(--sgds-default-color-on-dark);--sgds-alert-border-radius:var(--sgds-border-radius-md)}:host([variant=success]){--sgds-alert-bg:var(--sgds-success-bg)}:host([variant=warning]){--sgds-alert-bg:var(--sgds-warning-bg)}:host([variant=danger]){--sgds-alert-bg:var(--sgds-danger-bg)}:host([variant=neutral]){--sgds-alert-bg:var(--sgds-neutral-bg)}:host([outlined]){--sgds-alert-color:var(--sgds-default-color-on-light)}:host([variant=info][outlined]){--sgds-alert-bg:var(--sgds-primary-bg-subtle);--sgds-alert-border-color:var(--sgds-primary-border-color-subtle)}:host([variant=success][outlined]){--sgds-alert-bg:var(--sgds-success-bg-subtle);--sgds-alert-border-color:var(--sgds-success-border-color-subtle)}:host([variant=warning][outlined]){--sgds-alert-bg:var(--sgds-warning-bg-subtle);--sgds-alert-border-color:var(--sgds-warning-border-color-subtle)}:host([variant=danger][outlined]){--sgds-alert-bg:var(--sgds-danger-bg-subtle);--sgds-alert-border-color:var(--sgds-danger-border-color-subtle)}:host([variant=neutral][outlined]){--sgds-alert-bg:var(--sgds-neutral-bg-subtle);--sgds-alert-border-color:var(--sgds-neutral-border-color-subtle)}slot[name=icon]::slotted(*){color:var(--sgds-alert-color)}.alert{background-color:var(--sgds-alert-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-alert-border-radius);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg)}.alert.outlined{border:var(--sgds-border-width-1) solid var(--sgds-alert-border-color)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:center;padding-right:var(--sgds-padding-2-xl)}.alert-title{font-weight:var(--sgds-font-weight-semibold)}`;
 
   /**
    * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
@@ -4781,7 +4857,8 @@
       /**@internal */
       static get scopedElements() {
           return {
-              "sgds-close-button": SgdsCloseButton
+              "sgds-close-button": SgdsCloseButton,
+              "sgds-icon": SgdsIcon
           };
       }
       /** Closes the alert  */
@@ -4792,14 +4869,8 @@
       _handleShowChange() {
           this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
       }
-      firstUpdated() {
-          var _a;
-          if (this._iconNodes.length === 0) {
-              return (_a = this.shadowRoot.querySelector("slot[name='icon']")) === null || _a === void 0 ? void 0 : _a.classList.add("d-none");
-          }
-      }
       render() {
-          return this.show
+          return (this.dismissible && this.show) || !this.dismissible
               ? html `
           <div
             class="${classMap({
@@ -4847,9 +4918,6 @@
   __decorate([
       watch("show")
   ], SgdsAlert.prototype, "_handleShowChange", null);
-  __decorate([
-      queryAssignedNodes({ slot: "icon", flatten: true })
-  ], SgdsAlert.prototype, "_iconNodes", void 0);
 
   var css_248z$1 = css`:host{cursor:pointer;display:inline-block}.alert-link,.alert-link:hover{color:var(--sgds-alert-color);text-decoration-line:underline}.alert-link:focus,.alert-link:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}`;