@govtechsg/sgds-web-component 2.0.0-rc.1 → 2.0.0-rc.3

package/components/Dropdown/sgds-dropdown.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var litElement_js = require('@open-wc/scoped-elements/lit-element.js');
+var scopedElements = require('@open-wc/scoped-elements');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var ref_js = require('lit/directives/ref.js');
@@ -19,7 +19,7 @@ var dropdown = require('./dropdown.cjs.js');
  * @csspart menu - The dropdown's menu (ul element)
  *
  */
-class SgdsDropdown extends litElement_js.ScopedElementsMixin(dropdownListElement.DropdownListElement) {
+class SgdsDropdown extends scopedElements.ScopedElementsMixin(dropdownListElement.DropdownListElement) {
     /**@internal */
     static get scopedElements() {
         return {

package/components/Dropdown/sgds-dropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements/lit-element.js\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["ScopedElementsMixin","DropdownListElement","SgdsButton","genId","html","ref","dropdownStyle","__decorate","property","queryAsync"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.cjs.js","sources":["../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["ScopedElementsMixin","DropdownListElement","SgdsButton","genId","html","ref","dropdownStyle","__decorate","property","queryAsync"],"mappings":"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"}

package/components/Dropdown/sgds-dropdown.d.ts

@@ -2,7 +2,7 @@ import { DropdownListElement } from "../../base/dropdown-list-element";
 import { SgdsButton } from "../Button/sgds-button";
 export type DropDirection = "left" | "right" | "up" | "down";
 export type DropdownButtonVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
-declare const SgdsDropdown_base: typeof DropdownListElement & import("@open-wc/scoped-elements/lit-element.js").ScopedElementsHostConstructor;
+declare const SgdsDropdown_base: typeof DropdownListElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.
  * @slot default - slot for sgds-dropdown-item passed into dropdown's menu

package/components/Dropdown/sgds-dropdown.js

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { html } from 'lit';
 import { property, queryAsync } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';

package/components/Dropdown/sgds-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown.js","sources":["../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements/lit-element.js\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-dropdown.js","sources":["../../../src/components/Dropdown/sgds-dropdown.ts"],"sourcesContent":["import { ScopedElementsMixin } from \"@open-wc/scoped-elements\";\nimport { html } from \"lit\";\nimport { property, queryAsync } from \"lit/decorators.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { DropdownListElement } from \"../../base/dropdown-list-element\";\nimport genId from \"../../utils/generateId\";\nimport { SgdsButton } from \"../Button/sgds-button\";\nimport dropdownStyle from \"./dropdown.css\";\nexport type DropDirection = \"left\" | \"right\" | \"up\" | \"down\";\nexport type DropdownButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"info\"\n  | \"light\"\n  | \"dark\";\n\n/**\n * @summary `SgdsDropdown` toggles contextual overlays for displaying lists of links.\n * @slot default - slot for sgds-dropdown-item passed into dropdown's menu\n *\n * @csspart menu - The dropdown's menu (ul element)\n *\n */\nexport class SgdsDropdown extends ScopedElementsMixin(DropdownListElement) {\n  static styles = [...DropdownListElement.styles, dropdownStyle];\n  /**@internal */\n  static get scopedElements() {\n    return {\n      \"sgds-button\": SgdsButton\n    };\n  }\n  constructor() {\n    super();\n    /**@internal */\n    this.modifierOpt = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [0, 10]\n        }\n      }\n    ];\n  }\n  @property({ type: String })\n  /** Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** Sets the text content of Dropdown button */\n  @property({ type: String })\n  togglerText = \"\";\n\n  /** Controls auto-flipping of menu */\n  @property({ type: Boolean, reflect: true, state: false })\n  noFlip = false;\n\n  /** When true, aligns right edge of menu with right edge of button */\n  @property({ type: Boolean, reflect: true, state: false })\n  menuAlignRight = false;\n\n  /** The drop position of menu relative to the toggle button */\n  @property({ type: String, reflect: true, state: false })\n  drop: DropDirection = \"down\";\n\n  /** Sets color of Dropdown button */\n  @property({ type: String, reflect: true })\n  variant: DropdownButtonVariant = \"secondary\";\n\n  /**@internal */\n  @queryAsync(\"sgds-button\")\n  private dropdownRef: Promise<SgdsButton>;\n\n  async firstUpdated() {\n    super.firstUpdated();\n    if (this.menuIsOpen) {\n      await this.dropdownRef;\n      this.showMenu();\n    }\n  }\n  render() {\n    return html`\n      <div>\n        <sgds-button\n          outlined\n          role=\"button\"\n          variant=${this.variant}\n          ?disabled=${this.disabled}\n          aria-expanded=\"${this.menuIsOpen}\"\n          aria-haspopup=\"menu\"\n          ${ref(this.myDropdown)}\n          @click=${() => this.toggleMenu()}\n          id=${this.togglerId}\n        >\n          ${this.togglerText}\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </sgds-button>\n        <div class=\"dropdown-menu\" role=\"menu\" part=\"menu\">\n          <slot id=\"default\" @click=${this.handleSelectSlot}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdown;\n"],"names":["dropdownStyle"],"mappings":"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"}

package/components/FileUpload/index.umd.js

@@ -65,6 +65,235 @@
     };
   }
 
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  const global$3 = window;
+  /**
+   * Whether the current browser supports `adoptedStyleSheets`.
+   */
+  const supportsAdoptingStyleSheets$1 = global$3.ShadowRoot &&
+      (global$3.ShadyCSS === undefined || global$3.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$1 = (renderRoot, styles) => {
+      if (supportsAdoptingStyleSheets$1) {
+          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$3['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$1(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
@@ -2804,133 +3033,6 @@
           `is not recommended.`);
   }
 
-  /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
-   */
-
-  const version = '3.0.0';
-  const versions = window.scopedElementsVersions || (window.scopedElementsVersions = []);
-  if (!versions.includes(version)) {
-    versions.push(version);
-  }
-
-  /**
-   * @template {import('./types.js').Constructor<HTMLElement>} T
-   * @param {T} superclass
-   * @return {T & import('./types.js').Constructor<ScopedElementsHost>}
-   */
-  const ScopedElementsMixinImplementation$1 = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends superclass {
-      /**
-       * Obtains the scoped elements definitions map if specified.
-       *
-       * @type {ScopedElementsMap=}
-       */
-      static scopedElements;
-
-      static get scopedElementsVersion() {
-        return version;
-      }
-
-      /** @type {CustomElementRegistry=} */
-      static __registry;
-
-      /**
-       * Obtains the CustomElementRegistry associated to the ShadowRoot.
-       *
-       * @returns {CustomElementRegistry=}
-       */
-      get registry() {
-        return /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry;
-      }
-
-      /**
-       * Set the CustomElementRegistry associated to the ShadowRoot
-       *
-       * @param {CustomElementRegistry} registry
-       */
-      set registry(registry) {
-        /** @type {typeof ScopedElementsHost} */ (this.constructor).__registry = registry;
-      }
-
-      /**
-       * @param {ShadowRootInit} options
-       * @returns {ShadowRoot}
-       */
-      attachShadow(options) {
-        const { scopedElements } = /** @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
-         * This is important specifically for superclasses/inheritance
-         */
-        if (shouldCreateRegistry) {
-          this.registry = new CustomElementRegistry();
-          for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
-            this.registry.define(tagName, klass);
-          }
-        }
-
-        return super.attachShadow({
-          ...options,
-          // The polyfill currently expects the registry to be passed as `customElements`
-          customElements: this.registry,
-          // But the proposal has moved forward, and renamed it to `registry`
-          // For backwards compatibility, we pass it as both
-          registry: this.registry,
-        });
-      }
-    };
-
-  const ScopedElementsMixin$1 = dedupeMixin(ScopedElementsMixinImplementation$1);
-
-  /**
-   * @typedef {import('./types.js').ScopedElementsHost} ScopedElementsHost
-   * @typedef {import('./types.js').ScopedElementsMap} ScopedElementsMap
-   * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
-   * @typedef {import('lit').LitElement} LitElement
-   * @typedef {typeof import('lit').LitElement} TypeofLitElement
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
-   * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
-   */
-
-  /**
-   * @template {LitElementConstructor} T
-   * @param {T} superclass
-   * @return {T & ScopedElementsHostConstructor}
-   */
-  const ScopedElementsMixinImplementation = superclass =>
-    /** @type {ScopedElementsHost} */
-    class ScopedElementsHost extends ScopedElementsMixin$1(superclass) {
-      createRenderRoot() {
-        const { shadowRootOptions, elementStyles } = /** @type {TypeofLitElement} */ (
-          this.constructor
-        );
-
-        const shadowRoot = this.attachShadow(shadowRootOptions);
-        // @ts-ignore
-        this.renderOptions.creationScope = shadowRoot;
-
-        adoptStyles(shadowRoot, elementStyles);
-
-        this.renderOptions.renderBefore ??= shadowRoot.firstChild;
-
-        return shadowRoot;
-      }
-    };
-
-  const ScopedElementsMixin = dedupeMixin(ScopedElementsMixinImplementation);
-
   /**
    * @license
    * Copyright 2017 Google LLC
@@ -4064,7 +4166,7 @@
       }
   }
 
-  var css_248z$4 = css`:host{--btn-border-radius:var(--sgds-border-radius);display:inline-block}button:focus:not(:focus-visible){outline:0}:host([variant=primary]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-primary-filled);--btn-border-color:var(--sgds-primary-filled);--btn-hover-bg:var(--sgds-primary-700);--btn-focus-box-shadow-color:var(--sgds-primary-300);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-hover-color:var(--sgds-white)}:host([variant=secondary]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-secondary-filled);--btn-border-color:var(--sgds-secondary-filled);--btn-hover-bg:var(--sgds-secondary-700);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-secondary-300);--btn-hover-color:var(--sgds-white)}:host([variant=warning]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-warning-filled);--btn-hover-bg:var(--sgds-warning-700);--btn-border-color:var(--sgds-warning-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-warning-300)}:host([variant=danger]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-danger-filled);--btn-hover-bg:var(--sgds-danger-700);--btn-border-color:var(--sgds-danger-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-danger-300)}:host([variant=success]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-success-filled);--btn-hover-bg:var(--sgds-success-700);--btn-border-color:var(--sgds-success-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-success-300)}:host([variant=info]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-info-filled);--btn-hover-bg:var(--sgds-info-700);--btn-border-color:var(--sgds-info-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-info-300)}:host([variant=light]) .btn{--btn-color:var(--sgds-dark);--btn-bg:var(--sgds-light-filled);--btn-border-color:var(--sgds-light-filled);--btn-hover-bg:var(--sgds-gray-200);--btn-hover-color:var(--sgds-dark);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-active-border-color:var(--sgds-gray-200);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=dark]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-dark-filled);--btn-border-color:var(--sgds-dark-filled);--btn-hover-bg:var(--sgds-gray-700);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-active-border-color:var(--sgds-gray-700);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=link]) .btn{--btn-color:var(--sgds-link);--btn-bg:transparent;--btn-border-color:transparent;--btn-hover-bg:transparent;--btn-hover-color:var(--sgds-info-700);--btn-active-color:var(--sgds-info-700);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-info-300);--btn-disabled-color:var(--sgds-disabled-color)}:host([variant=outlined]){--btn-color:var(--sgds-primary-text-emphasis);--btn-bg:var(--sgds-white);--btn-border-color:var(--sgds-primary-border-subtle);--btn-hover-bg:var(--sgds-primary-filled);--btn-hover-color:var(--sgds-white);--btn-focus-box-shadow-color:var(--sgds-primary-300);--btn-active-bg:var(--sgds-primary-filled);--btn-active-border-color:var(--sgds-primary-filled);--btn-active-color:var(--sgds-white)}:host([variant=outline-primary]) .btn{--btn-color:var(--sgds-primary-text-emphasis);--btn-bg:var(--sgds-primary-bg-subtle);--btn-border-color:var(--sgds-primary-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-primary-filled);--btn-hover-border-color:var(--sgds-primary-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-primary-filled);--btn-active-border-color:var(--sgds-primary-filled);--btn-focus-box-shadow-color:var(--sgds-primary-300)}:host([variant=outline-secondary]) .btn{--btn-color:var(--sgds-secondary-text-emphasis);--btn-bg:var(--sgds-secondary-bg-subtle);--btn-border-color:var(--sgds-secondary-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-secondary-filled);--btn-hover-border-color:var(--sgds-secondary-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-secondary-filled);--btn-active-border-color:var(--sgds-secondary-filled);--btn-focus-box-shadow-color:var(--sgds-secondary-300)}:host([variant=outline-warning]) .btn{--btn-color:var(--sgds-warning-text-emphasis);--btn-bg:var(--sgds-warning-bg-subtle);--btn-border-color:var(--sgds-warning-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-warning-filled);--btn-hover-border-color:var(--sgds-warning-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-warning-filled);--btn-active-border-color:var(--sgds-warning-filled);--btn-focus-box-shadow-color:var(--sgds-warning-300)}:host([variant=outline-danger]) .btn{--btn-color:var(--sgds-danger-text-emphasis);--btn-bg:var(--sgds-danger-bg-subtle);--btn-border-color:var(--sgds-danger-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-danger-filled);--btn-hover-border-color:var(--sgds-danger-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-danger-filled);--btn-active-border-color:var(--sgds-danger-filled);--btn-focus-box-shadow-color:var(--sgds-danger-300)}:host([variant=outline-success]) .btn{--btn-color:var(--sgds-success-text-emphasis);--btn-bg:var(--sgds-success-bg-subtle);--btn-border-color:var(--sgds-success-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-success-filled);--btn-hover-border-color:var(--sgds-success-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-success-filled);--btn-active-border-color:var(--sgds-success-filled);--btn-focus-box-shadow-color:var(--sgds-success-300)}:host([variant=outline-info]) .btn{--btn-color:var(--sgds-info-text-emphasis);--btn-bg:var(--sgds-info-bg-subtle);--btn-border-color:var(--sgds-info-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-info-filled);--btn-hover-border-color:var(--sgds-info-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-info-filled);--btn-active-border-color:var(--sgds-info-filled);--btn-focus-box-shadow-color:var(--sgds-info-300)}:host([variant=outline-light]) .btn{--btn-color:var(--sgds-light-text-emphasis);--btn-bg:var(--sgds-light-bg-subtle);--btn-border-color:var(--sgds-light-border-subtle);--btn-hover-color:var(--sgds-light-text-emphasis);--btn-hover-bg:var(--sgds-gray-200);--btn-hover-border-color:var(--sgds-gray-300);--btn-active-color:var(--sgds-light-text-emphasis);--btn-active-bg:var(--sgds-gray-200);--btn-active-border-color:var(--sgds-light-border-subtle);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=outline-dark]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-dark-filled);--btn-border-color:var(--sgds-dark-filled);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-gray-700);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-gray-700);--btn-active-border-color:var(--sgds-gray-700);--btn-focus-box-shadow-color:var(--sgds-gray-500);--btn-disabled-color:var(--sgds-white)}.btn{--btn-padding-x:var(--sgds-input-btn-padding-x);--btn-padding-y:var(--sgds-input-btn-padding-y);--btn-font-family:var(--sgds-font-sans-serif);--btn-font-size:1rem;--btn-font-weight:400;--btn-line-height:var(--sgds-line-height-lg);--btn-border-width:var(--sgds-border-width);background-color:var(--btn-bg);border:var(--btn-border-width) solid var(--btn-border-color);border-radius:var(--btn-border-radius);color:var(--btn-color);cursor:pointer;display:inline-block;font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);line-height:var(--btn-line-height);padding:var(--btn-padding-y) var(--btn-padding-x);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{--btn-hover-color:var(--sgds-white);background-color:var(--btn-hover-bg);color:var(--btn-hover-color)}.btn:focus-visible{--btn-focus-box-shadow-color:var(--sgds-gray-500);--btn-focus-box-shadow:0px 0px 0px var(--sgds-focus-width,0.13rem) var(--btn-focus-box-shadow-color);--btn-hover-color:var(--sgds-white);background-color:var(--btn-hover-bg);border-color:var(--btn-hover-border-color);box-shadow:var(--btn-focus-box-shadow);color:var(--btn-hover-color);outline:0}.btn.active{--btn-active-color:light-dark(var(--sgds-white),var(--sgds-black));--btn-active-bg:light-dark(var(--sgds-black),var(--sgds-white));--btn-active-border-color:transparent;background-color:var(--btn-active-bg);border-color:var(--btn-active-border-color);color:var(--btn-active-color)}.btn.disabled,.btn:disabled{--btn-disabled-color:var(--btn-color);--btn-disabled-opacity:var(--sgds-disabled-opacity);color:var(--btn-disabled-color);cursor:not-allowed;opacity:var(--btn-disabled-opacity)}.btn-link{text-decoration:underline;text-underline-offset:.25rem}.btn-link:hover{color:var(--btn-hover-color)}.btn-lg{--btn-padding-y:0.5rem;--btn-padding-x:1rem;--btn-font-size:1.25rem;--btn-border-radius:var(--sgds-border-radius-lg)}.btn-sm{--btn-padding-y:0.25rem;--btn-padding-x:0.5rem;--btn-font-size:0.875rem;--btn-border-radius:var(--sgds-border-radius-sm)}slot[name=leftIcon]::slotted(*){padding-right:var(--sgds-spacer-2)}slot[name=rightIcon]::slotted(*){padding-left:var(--sgds-spacer-2)}`;
+  var css_248z$4 = css`:host{--btn-border-radius:var(--sgds-border-radius);display:inline-block}button:focus:not(:focus-visible){outline:0}:host([variant=primary]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-primary-filled);--btn-border-color:var(--sgds-primary-filled);--btn-hover-bg:var(--sgds-primary-700);--btn-focus-box-shadow-color:var(--sgds-primary-300);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-hover-color:var(--sgds-white)}:host([variant=secondary]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-secondary-filled);--btn-border-color:var(--sgds-secondary-filled);--btn-hover-bg:var(--sgds-secondary-700);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-secondary-300);--btn-hover-color:var(--sgds-white)}:host([variant=warning]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-warning-filled);--btn-hover-bg:var(--sgds-warning-700);--btn-border-color:var(--sgds-warning-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-warning-300)}:host([variant=danger]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-danger-filled);--btn-hover-bg:var(--sgds-danger-700);--btn-border-color:var(--sgds-danger-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-danger-300)}:host([variant=success]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-success-filled);--btn-hover-bg:var(--sgds-success-700);--btn-border-color:var(--sgds-success-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-success-300)}:host([variant=info]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-info-filled);--btn-hover-bg:var(--sgds-info-700);--btn-border-color:var(--sgds-info-filled);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-info-300)}:host([variant=light]) .btn{--btn-color:var(--sgds-dark);--btn-bg:var(--sgds-light-filled);--btn-border-color:var(--sgds-light-filled);--btn-hover-bg:var(--sgds-gray-200);--btn-hover-color:var(--sgds-dark);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-active-border-color:var(--sgds-gray-200);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=dark]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-dark-filled);--btn-border-color:var(--sgds-dark-filled);--btn-hover-bg:var(--sgds-gray-700);--btn-hover-color:var(--sgds-white);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--btn-hover-bg);--btn-active-border-color:var(--sgds-gray-700);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=link]) .btn{--btn-color:var(--sgds-link);--btn-bg:transparent;--btn-border-color:transparent;--btn-hover-bg:transparent;--btn-hover-color:var(--sgds-info-700);--btn-active-color:var(--sgds-info-700);--btn-active-bg:var(--btn-hover-bg);--btn-focus-box-shadow-color:var(--sgds-info-300);--btn-disabled-color:var(--sgds-disabled-color)}:host([variant=outlined]){--btn-color:var(--sgds-primary-text-emphasis);--btn-bg:var(--sgds-white);--btn-border-color:var(--sgds-primary);--btn-hover-bg:var(--sgds-primary-filled);--btn-hover-color:var(--sgds-white);--btn-focus-box-shadow-color:var(--sgds-primary-300);--btn-active-bg:var(--sgds-primary-filled);--btn-active-border-color:var(--sgds-primary-filled);--btn-active-color:var(--sgds-white)}:host([variant=outline-primary]) .btn{--btn-color:var(--sgds-primary-text-emphasis);--btn-bg:var(--sgds-primary-bg-subtle);--btn-border-color:var(--sgds-primary-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-primary-filled);--btn-hover-border-color:var(--sgds-primary-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-primary-filled);--btn-active-border-color:var(--sgds-primary-filled);--btn-focus-box-shadow-color:var(--sgds-primary-300)}:host([variant=outline-secondary]) .btn{--btn-color:var(--sgds-secondary-text-emphasis);--btn-bg:var(--sgds-secondary-bg-subtle);--btn-border-color:var(--sgds-secondary-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-secondary-filled);--btn-hover-border-color:var(--sgds-secondary-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-secondary-filled);--btn-active-border-color:var(--sgds-secondary-filled);--btn-focus-box-shadow-color:var(--sgds-secondary-300)}:host([variant=outline-warning]) .btn{--btn-color:var(--sgds-warning-text-emphasis);--btn-bg:var(--sgds-warning-bg-subtle);--btn-border-color:var(--sgds-warning-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-warning-filled);--btn-hover-border-color:var(--sgds-warning-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-warning-filled);--btn-active-border-color:var(--sgds-warning-filled);--btn-focus-box-shadow-color:var(--sgds-warning-300)}:host([variant=outline-danger]) .btn{--btn-color:var(--sgds-danger-text-emphasis);--btn-bg:var(--sgds-danger-bg-subtle);--btn-border-color:var(--sgds-danger-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-danger-filled);--btn-hover-border-color:var(--sgds-danger-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-danger-filled);--btn-active-border-color:var(--sgds-danger-filled);--btn-focus-box-shadow-color:var(--sgds-danger-300)}:host([variant=outline-success]) .btn{--btn-color:var(--sgds-success-text-emphasis);--btn-bg:var(--sgds-success-bg-subtle);--btn-border-color:var(--sgds-success-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-success-filled);--btn-hover-border-color:var(--sgds-success-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-success-filled);--btn-active-border-color:var(--sgds-success-filled);--btn-focus-box-shadow-color:var(--sgds-success-300)}:host([variant=outline-info]) .btn{--btn-color:var(--sgds-info-text-emphasis);--btn-bg:var(--sgds-info-bg-subtle);--btn-border-color:var(--sgds-info-border-subtle);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-info-filled);--btn-hover-border-color:var(--sgds-info-filled);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-info-filled);--btn-active-border-color:var(--sgds-info-filled);--btn-focus-box-shadow-color:var(--sgds-info-300)}:host([variant=outline-light]) .btn{--btn-color:var(--sgds-light-text-emphasis);--btn-bg:var(--sgds-light-bg-subtle);--btn-border-color:var(--sgds-light-border-subtle);--btn-hover-color:var(--sgds-light-text-emphasis);--btn-hover-bg:var(--sgds-gray-200);--btn-hover-border-color:var(--sgds-gray-300);--btn-active-color:var(--sgds-light-text-emphasis);--btn-active-bg:var(--sgds-gray-200);--btn-active-border-color:var(--sgds-light-border-subtle);--btn-focus-box-shadow-color:var(--sgds-gray-500)}:host([variant=outline-dark]) .btn{--btn-color:var(--sgds-white);--btn-bg:var(--sgds-dark-filled);--btn-border-color:var(--sgds-dark-filled);--btn-hover-color:var(--sgds-white);--btn-hover-bg:var(--sgds-gray-700);--btn-active-color:var(--sgds-white);--btn-active-bg:var(--sgds-gray-700);--btn-active-border-color:var(--sgds-gray-700);--btn-focus-box-shadow-color:var(--sgds-gray-500);--btn-disabled-color:var(--sgds-white)}.btn{--btn-padding-x:var(--sgds-input-btn-padding-x);--btn-padding-y:var(--sgds-input-btn-padding-y);--btn-font-family:var(--sgds-font-sans-serif);--btn-font-size:1rem;--btn-font-weight:400;--btn-line-height:var(--sgds-line-height-lg);--btn-border-width:var(--sgds-border-width);background-color:var(--btn-bg);border:var(--btn-border-width) solid var(--btn-border-color);border-radius:var(--btn-border-radius);color:var(--btn-color);cursor:pointer;display:inline-block;font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);line-height:var(--btn-line-height);padding:var(--btn-padding-y) var(--btn-padding-x);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{--btn-hover-color:var(--sgds-white);background-color:var(--btn-hover-bg);color:var(--btn-hover-color)}.btn:focus-visible{--btn-focus-box-shadow-color:var(--sgds-gray-500);--btn-focus-box-shadow:0px 0px 0px var(--sgds-focus-width,0.13rem) var(--btn-focus-box-shadow-color);--btn-hover-color:var(--sgds-white);background-color:var(--btn-hover-bg);border-color:var(--btn-hover-border-color);box-shadow:var(--btn-focus-box-shadow);color:var(--btn-hover-color);outline:0}.btn.active{--btn-active-color:light-dark(var(--sgds-white),var(--sgds-black));--btn-active-bg:light-dark(var(--sgds-black),var(--sgds-white));--btn-active-border-color:transparent;background-color:var(--btn-active-bg);border-color:var(--btn-active-border-color);color:var(--btn-active-color)}.btn.disabled,.btn:disabled{--btn-disabled-color:var(--btn-color);--btn-disabled-opacity:var(--sgds-disabled-opacity);color:var(--btn-disabled-color);cursor:not-allowed;opacity:var(--btn-disabled-opacity)}.btn-link{text-decoration:underline;text-underline-offset:.25rem}.btn-link:hover{color:var(--btn-hover-color)}.btn-lg{--btn-padding-y:0.5rem;--btn-padding-x:1rem;--btn-font-size:1.25rem;--btn-border-radius:var(--sgds-border-radius-lg)}.btn-sm{--btn-padding-y:0.25rem;--btn-padding-x:0.5rem;--btn-font-size:0.875rem;--btn-border-radius:var(--sgds-border-radius-sm)}slot[name=leftIcon]::slotted(*){padding-right:var(--sgds-spacer-2)}slot[name=rightIcon]::slotted(*){padding-left:var(--sgds-spacer-2)}`;
 
   var css_248z$3 = css`a{text-decoration:underline;text-underline-offset:.25rem}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}a{color:var(--sgds-link);text-decoration:var(--sgds-link-decoration)}a:hover{color:var(--sgds-link-hover-color)}`;