@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0

package/components/Footer/sgds-footer-item.d.ts

@@ -8,6 +8,7 @@ import SgdsElement from "../../base/sgds-element";
  */
 export declare class SgdsFooterItem extends SgdsElement {
     static styles: import("lit").CSSResult[];
+    private _handleSlotChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsFooterItem;

package/components/Footer/sgds-footer-item.js

@@ -10,12 +10,22 @@ import css_248z from './footer-item.js';
  *
  */
 class SgdsFooterItem extends SgdsElement {
+    _handleSlotChange(e) {
+        const assignedElements = e.target.assignedElements();
+        assignedElements.forEach(el => {
+            if (el.tagName === "SGDS-LINK") {
+                const sgdsLink = el;
+                sgdsLink.tone = "fixed-light";
+                sgdsLink.size = "sm";
+            }
+        });
+    }
     render() {
         return html `
       <div class="footer-item">
         <slot name="title"></slot>
         <div class="links">
-          <slot></slot>
+          <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
       </div>
     `;

package/components/Footer/sgds-footer-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer-item.js","sources":["../../../src/components/Footer/sgds-footer-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerLinkStyle from \"./footer-item.css\";\n\n/**\n * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.\n *\n * @slot default - The slot for the list of link items\n * @slot title - The slot for the title of the list of items\n *\n */\nexport class SgdsFooterItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerLinkStyle];\n\n  render() {\n    return html`\n      <div class=\"footer-item\">\n        <slot name=\"title\"></slot>\n        <div class=\"links\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFooterItem;\n"],"names":["footerLinkStyle"],"mappings":";;;;AAIA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;IAG7C,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;KAOV,CAAC;KACH;;AAXM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAAC;;;;"}
+{"version":3,"file":"sgds-footer-item.js","sources":["../../../src/components/Footer/sgds-footer-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport footerLinkStyle from \"./footer-item.css\";\nimport type SgdsLink from \"../Link/sgds-link\";\n\n/**\n * @summary The footer item component organizes links under a clear, descriptive title within the footer. It helps users easily navigate to related resources or information, ensuring clarity and accessibility.\n *\n * @slot default - The slot for the list of link items\n * @slot title - The slot for the title of the list of items\n *\n */\nexport class SgdsFooterItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerLinkStyle];\n\n  private _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements();\n    assignedElements.forEach(el => {\n      if (el.tagName === \"SGDS-LINK\") {\n        const sgdsLink = el as SgdsLink;\n        sgdsLink.tone = \"fixed-light\";\n        sgdsLink.size = \"sm\";\n      }\n    });\n  }\n  render() {\n    return html`\n      <div class=\"footer-item\">\n        <slot name=\"title\"></slot>\n        <div class=\"links\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsFooterItem;\n"],"names":["footerLinkStyle"],"mappings":";;;;AAKA;;;;;;AAMG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;AAGrC,IAAA,iBAAiB,CAAC,CAAQ,EAAA;QAChC,MAAM,gBAAgB,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,EAAE,CAAC;AAC1E,QAAA,gBAAgB,CAAC,OAAO,CAAC,EAAE,IAAG;AAC5B,YAAA,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,EAAE;gBAC9B,MAAM,QAAQ,GAAG,EAAc,CAAC;AAChC,gBAAA,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC;AAC9B,gBAAA,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;aACtB;AACH,SAAC,CAAC,CAAC;KACJ;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;AAIe,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG/C,CAAC;KACH;;AArBM,cAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAe,CAAC;;;;"}

package/components/Footer/sgds-footer.js

@@ -79,29 +79,29 @@ class SgdsFooter extends SgdsElement {
           <div class="footer-mandatory-links">
             <ul>
               <li>
-                <sgds-link size="sm"><a href=${this.contactHref}>Contact</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.contactHref}>Contact</a></sgds-link>
               </li>
               <li>
-                <sgds-link size="sm"><a href=${this.feedbackHref}>Feedback</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.feedbackHref}>Feedback</a></sgds-link>
               </li>
               <li>
-                <sgds-link size="sm"><a href=${this.faqHref}>FAQ</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.faqHref}>FAQ</a></sgds-link>
               </li>
               <li>
-                <sgds-link size="sm"><a href=${this.sitemapHref}>Sitemap</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.sitemapHref}>Sitemap</a></sgds-link>
               </li>
               <li>
-                <sgds-link size="sm">
+                <sgds-link size="sm" tone="fixed-light">
                   <a href="https://tech.gov.sg/report_vulnerability" target="_blank" rel="noopener noreferrer">
                     Report Vulnerability
                   </a>
                 </sgds-link>
               </li>
               <li>
-                <sgds-link size="sm"><a href=${this.privacyHref}>Privacy Statement</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.privacyHref}>Privacy Statement</a></sgds-link>
               </li>
               <li>
-                <sgds-link size="sm"><a href=${this.termsOfUseHref}>Terms of use</a></sgds-link>
+                <sgds-link size="sm" tone="fixed-light"><a href=${this.termsOfUseHref}>Terms of use</a></sgds-link>
               </li>
             </ul>
             <div class="footer-copyrights">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>

package/components/Footer/sgds-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-footer.js","sources":["../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot default - The slot for footer content. Use this slot if you want full control over the layout or styling. When provided, it replaces the `items` slot layout.\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - the slot for the list of footer items, styled automatically with `.footer-items`. For custom layouts or styles, use the `default` slot instead.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-link\": SgdsLink\n  };\n\n  /** Sets copyrightLiner of SgdsFooter */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\thref link for contacts */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\thref link for feedback */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\thref link for faq */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\thref link for sitemap */\n  @property({ type: String })\n  sitemapHref = \"#\";\n\n  /**\thref link for privacy statement */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\thref link for terms of use */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  /** Used only for SSR to indicate the presence of the `default` slot. */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `title` slot. */\n  @property({ type: Boolean }) hasTitleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `description` slot. */\n  @property({ type: Boolean }) hasDescriptionSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `items` slot. */\n  @property({ type: Boolean }) hasItemsSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"title\", \"description\", \"items\");\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    if (!this.hasTitleSlot) this.hasTitleSlot = this.hasSlotController.test(\"title\");\n    if (!this.hasDescriptionSlot) this.hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    if (!this.hasItemsSlot) this.hasItemsSlot = this.hasSlotController.test(\"items\");\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section\n          class=\"${classMap({\n            \"footer-top\": this.hasDefaultSlot || this.hasTitleSlot || this.hasDescriptionSlot || this.hasItemsSlot,\n            \"has-content\": this.hasDefaultSlot || this.hasItemsSlot\n          })}\"\n        >\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div>\n            ${this.hasDefaultSlot\n              ? html`<slot></slot>`\n              : html`\n                  <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>\n                `}\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.contactHref}>Contact</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.feedbackHref}>Feedback</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.faqHref}>FAQ</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.sitemapHref}>Sitemap</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\">\n                  <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Report Vulnerability\n                  </a>\n                </sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.privacyHref}>Privacy Statement</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\"><a href=${this.termsOfUseHref}>Terms of use</a></sgds-link>\n              </li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-footer.js","sources":["../../../src/components/Footer/sgds-footer.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport footerStyle from \"./footer.css\";\n\n/**\n * @summary The footer contains supporting information for your service at the bottom of your website. All .gov.sg digital services shall contain a Global Footer Bar across all pages. The Global Footer Bar should include the name of the digital service, contact information, a privacy statement and the terms of use.\n *\n * @slot default - The slot for footer content. Use this slot if you want full control over the layout or styling. When provided, it replaces the `items` slot layout.\n * @slot title - The slot for title\n * @slot description - The slot for description\n * @slot items - the slot for the list of footer items, styled automatically with `.footer-items`. For custom layouts or styles, use the `default` slot instead.\n */\nexport class SgdsFooter extends SgdsElement {\n  static styles = [...SgdsElement.styles, footerStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-link\": SgdsLink\n  };\n\n  /** Sets copyrightLiner of SgdsFooter */\n  @property({ type: String })\n  copyrightLiner = \"Government of Singapore\";\n\n  /**\thref link for contacts */\n  @property({ type: String })\n  contactHref = \"#\";\n\n  /**\thref link for feedback */\n  @property({ type: String })\n  feedbackHref = \"#\";\n\n  /**\thref link for faq */\n  @property({ type: String })\n  faqHref = \"#\";\n\n  /**\thref link for sitemap */\n  @property({ type: String })\n  sitemapHref = \"#\";\n\n  /**\thref link for privacy statement */\n  @property({ type: String })\n  privacyHref = \"#\";\n\n  /**\thref link for terms of use */\n  @property({ type: String })\n  termsOfUseHref = \"#\";\n\n  /** Used only for SSR to indicate the presence of the `default` slot. */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `title` slot. */\n  @property({ type: Boolean }) hasTitleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `description` slot. */\n  @property({ type: Boolean }) hasDescriptionSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `items` slot. */\n  @property({ type: Boolean }) hasItemsSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\", \"title\", \"description\", \"items\");\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    if (!this.hasTitleSlot) this.hasTitleSlot = this.hasSlotController.test(\"title\");\n    if (!this.hasDescriptionSlot) this.hasDescriptionSlot = this.hasSlotController.test(\"description\");\n    if (!this.hasItemsSlot) this.hasItemsSlot = this.hasSlotController.test(\"items\");\n  }\n\n  render() {\n    return html`\n      <footer class=\"footer\">\n        <section\n          class=\"${classMap({\n            \"footer-top\": this.hasDefaultSlot || this.hasTitleSlot || this.hasDescriptionSlot || this.hasItemsSlot,\n            \"has-content\": this.hasDefaultSlot || this.hasItemsSlot\n          })}\"\n        >\n          <div class=\"footer-header\">\n            <slot name=\"title\"></slot>\n            <slot name=\"description\"></slot>\n          </div>\n          <div>\n            ${this.hasDefaultSlot\n              ? html`<slot></slot>`\n              : html`\n                  <div class=\"footer-items\">\n                    <slot name=\"items\"></slot>\n                  </div>\n                `}\n          </div>\n        </section>\n        <section class=\"footer-bottom\">\n          <div class=\"footer-mandatory-links\">\n            <ul>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.contactHref}>Contact</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.feedbackHref}>Feedback</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.faqHref}>FAQ</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.sitemapHref}>Sitemap</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\">\n                  <a href=\"https://tech.gov.sg/report_vulnerability\" target=\"_blank\" rel=\"noopener noreferrer\">\n                    Report Vulnerability\n                  </a>\n                </sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.privacyHref}>Privacy Statement</a></sgds-link>\n              </li>\n              <li>\n                <sgds-link size=\"sm\" tone=\"fixed-light\"><a href=${this.termsOfUseHref}>Terms of use</a></sgds-link>\n              </li>\n            </ul>\n            <div class=\"footer-copyrights\">© ${new Date().getFullYear()}, ${this.copyrightLiner}</div>\n          </div>\n        </section>\n      </footer>\n    `;\n  }\n}\n\nexport default SgdsFooter;\n"],"names":["footerStyle"],"mappings":"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"}

package/components/IconButton/index.umd.min.js

@@ -68,7 +68,7 @@ const ke=globalThis,ze=ke.ShadowRoot&&(void 0===ke.ShadyCSS||ke.ShadyCSS.nativeS
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */;let at;{const e=globalThis.litIssuedWarnings??=new Set;at=(t,l)=>{l+=` See https://lit.dev/msg/${t} for more information.`,e.has(l)||(console.warn(l),e.add(l))}}class rt extends it{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=xe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return oe}}var ot;rt._$litElement$=!0,rt[(ot="finalized",ot)]=!0,globalThis.litElementHydrateSupport?.({LitElement:rt});const st=globalThis.litElementPolyfillSupportDevMode;st?.({LitElement:rt}),(globalThis.litElementVersions??=[]).push("4.1.0"),globalThis.litElementVersions.length>1&&at("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.");var nt=Oe`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);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-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;class ct extends rt{emit(e,t){const l=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(l),l}static define(e,t=this,l={}){if(customElements.get(e));else try{customElements.define(e,t,l)}catch(i){customElements.define(e,class extends t{},l)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}ct.styles=[nt],ct.dependencies={},e([V({type:Boolean,reflect:!0})],ct.prototype,"ssr",void 0);var dt,ht,vt=Oe`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);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;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;class gt extends ct{constructor(){super(...arguments),this.variant="primary",this.tone="brand",this.size="md",this.active=!1,this.disabled=!1,this.target="_self"}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit("sgds-blur")}_handleFocus(){this.emit("sgds-focus")}_handleClick(e){if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation()}_handleKeydown(e){if("Enter"===e.key&&this.loading)return e.preventDefault(),void e.stopPropagation()}_assignSpinnerSize(e){return"xs"===e||"sm"===e?"xs":"md"===e||"lg"===e?"sm":void 0}_assignSpinnerTone(e,t){return"fixed-light"===e&&"primary"===t?"fixed-dark":"neutral"===e&&"primary"===t?"inverse":"fixed-light"===e||"primary"===t?"fixed-light":"neutral"!==e||"outline"!==t&&"ghost"!==t?"brand":"neutral"}}gt.styles=[...ct.styles,vt],e([(dt=".btn",(e,t,l)=>{const i=e=>{const l=e.renderRoot?.querySelector(dt)??null;if(null===l&&ht&&!e.hasUpdated){const e="object"==typeof t?t.name:t;S("",`@query'd field ${JSON.stringify(String(e))} with the 'cache' flag set for selector '${dt}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return l};if(ht){const{get:a,set:r}="object"==typeof t?e:l??(()=>{const e=Symbol(`${String(t)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return $(e,t,{get(){let e=a.call(this);return void 0===e&&(e=i(this),(null!==e||this.hasUpdated)&&r.call(this,e)),e}})}return $(e,t,{get(){return i(this)}})})],gt.prototype,"button",void 0),e([V({reflect:!0})],gt.prototype,"variant",void 0),e([V({reflect:!0})],gt.prototype,"tone",void 0),e([V({reflect:!0})],gt.prototype,"size",void 0),e([V({type:Boolean,reflect:!0})],gt.prototype,"active",void 0),e([V({type:Boolean,reflect:!0})],gt.prototype,"disabled",void 0),e([V({type:String,reflect:!0})],gt.prototype,"href",void 0),e([V({type:String,reflect:!0})],gt.prototype,"target",void 0),e([V({type:String,reflect:!0})],gt.prototype,"download",void 0),e([V({type:String})],gt.prototype,"ariaLabel",void 0),e([V({type:Boolean})],gt.prototype,"loading",void 0);const pt={archive:ae`
+   */;let at;{const e=globalThis.litIssuedWarnings??=new Set;at=(t,l)=>{l+=` See https://lit.dev/msg/${t} for more information.`,e.has(l)||(console.warn(l),e.add(l))}}class rt extends it{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=xe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return oe}}var ot;rt._$litElement$=!0,rt[(ot="finalized",ot)]=!0,globalThis.litElementHydrateSupport?.({LitElement:rt});const st=globalThis.litElementPolyfillSupportDevMode;st?.({LitElement:rt}),(globalThis.litElementVersions??=[]).push("4.1.0"),globalThis.litElementVersions.length>1&&at("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.");var nt=Oe`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);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-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;class ct extends rt{emit(e,t){const l=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(l),l}static define(e,t=this,l={}){if(customElements.get(e));else try{customElements.define(e,t,l)}catch(i){customElements.define(e,class extends t{},l)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach((([e,t])=>{this.constructor.define(e,t)}))}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach((e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))})))}}ct.styles=[nt],ct.dependencies={},e([V({type:Boolean,reflect:!0})],ct.prototype,"ssr",void 0);var dt,ht,vt=Oe`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-32);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-20);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-0);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-16);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-24);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);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;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;class gt extends ct{constructor(){super(...arguments),this.variant="primary",this.tone="brand",this.size="md",this.active=!1,this.disabled=!1,this.target="_self"}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit("sgds-blur")}_handleFocus(){this.emit("sgds-focus")}_handleClick(e){if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation()}_handleKeydown(e){if("Enter"===e.key&&this.loading)return e.preventDefault(),void e.stopPropagation()}_assignSpinnerSize(e){return"xs"===e||"sm"===e?"xs":"md"===e||"lg"===e?"sm":void 0}_assignSpinnerTone(e,t){return"fixed-light"===e&&"primary"===t?"fixed-dark":"neutral"===e&&"primary"===t?"inverse":"fixed-light"===e||"primary"===t?"fixed-light":"neutral"!==e||"outline"!==t&&"ghost"!==t?"brand":"neutral"}}gt.styles=[...ct.styles,vt],e([(dt=".btn",(e,t,l)=>{const i=e=>{const l=e.renderRoot?.querySelector(dt)??null;if(null===l&&ht&&!e.hasUpdated){const e="object"==typeof t?t.name:t;S("",`@query'd field ${JSON.stringify(String(e))} with the 'cache' flag set for selector '${dt}' has been accessed before the first update and returned null. This is expected if the renderRoot tree has not been provided beforehand (e.g. via Declarative Shadow DOM). Therefore the value hasn't been cached.`)}return l};if(ht){const{get:a,set:r}="object"==typeof t?e:l??(()=>{const e=Symbol(`${String(t)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return $(e,t,{get(){let e=a.call(this);return void 0===e&&(e=i(this),(null!==e||this.hasUpdated)&&r.call(this,e)),e}})}return $(e,t,{get(){return i(this)}})})],gt.prototype,"button",void 0),e([V({reflect:!0})],gt.prototype,"variant",void 0),e([V({reflect:!0})],gt.prototype,"tone",void 0),e([V({reflect:!0})],gt.prototype,"size",void 0),e([V({type:Boolean,reflect:!0})],gt.prototype,"active",void 0),e([V({type:Boolean,reflect:!0})],gt.prototype,"disabled",void 0),e([V({type:String,reflect:!0})],gt.prototype,"href",void 0),e([V({type:String,reflect:!0})],gt.prototype,"target",void 0),e([V({type:String,reflect:!0})],gt.prototype,"download",void 0),e([V({type:String})],gt.prototype,"ariaLabel",void 0),e([V({type:Boolean})],gt.prototype,"loading",void 0);const pt={archive:ae`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
     <path
       fill="currentColor"