@govtechsg/sgds-web-component 3.21.1 → 3.21.2-rc.1

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

@@ -73,11 +73,13 @@ function Le(e){return(t,l)=>ke(t,l,{async get(){return await this.updateComplete
    * @license
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */var ht,vt=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);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:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='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' viewBox='0 0 24 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:top;width:1em}::slotted(svg){vertical-align:middle}}`;class gt extends _e{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}))}))}}gt.styles=[vt],gt.dependencies={},e([Se({type:Boolean,reflect:!0})],gt.prototype,"ssr",void 0);var pt,ut,ft=o`: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-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);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-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);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-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);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:var(--sgds-border-width-1) 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-label-md);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-xs);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 wt extends gt{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"}}wt.styles=[...gt.styles,ft],e([(pt=".btn",(e,t,l)=>{const i=e=>{const l=e.renderRoot?.querySelector(pt)??null;if(null===l&&ut&&!e.hasUpdated){const e="object"==typeof t?t.name:t;Ae("",`@query'd field ${JSON.stringify(String(e))} with the 'cache' flag set for selector '${pt}' 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(ut){const{get:a,set:s}="object"==typeof t?e:l??(()=>{const e=Symbol(`${String(t)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return ke(e,t,{get(){let e=a.call(this);return void 0===e&&(e=i(this),(null!==e||this.hasUpdated)&&s.call(this,e)),e}})}return ke(e,t,{get(){return i(this)}})})],wt.prototype,"button",void 0),e([Se({reflect:!0})],wt.prototype,"variant",void 0),e([Se({reflect:!0})],wt.prototype,"tone",void 0),e([Se({reflect:!0})],wt.prototype,"size",void 0),e([Se({type:Boolean,reflect:!0})],wt.prototype,"active",void 0),e([Se({type:Boolean,reflect:!0})],wt.prototype,"disabled",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"href",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"target",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"download",void 0),e([Se({type:String})],wt.prototype,"ariaLabel",void 0),e([Se({type:Boolean})],wt.prototype,"loading",void 0);class mt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}class xt{constructor(e,t){(this.host=e).addController(this),this.options=Object.assign({form:e=>e.closest("form")},t)}hostConnected(){this.form=this.options.form(this.host)}hostDisconnected(){this.form&&(this.form=void 0)}doAction(e,t){if(this.form){const l=document.createElement("button");l.type=e,l.style.position="absolute",l.style.width="0",l.style.height="0",l.style.clipPath="inset(50%)",l.style.overflow="hidden",l.style.whiteSpace="nowrap",t&&["formaction","formmethod","formnovalidate","formtarget"].forEach(e=>{t.hasAttribute(e)&&l.setAttribute(e,t.getAttribute(e))}),this.form.append(l),l.click(),l.remove()}}reset(e){this.doAction("reset",e)}submit(e){this.doAction("submit",e)}}var Zt=o`::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='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' viewBox='0 0 24 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:top;width:1em}`,bt=o`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}.btn.no-icon{gap:var(--sgds-gap-none)}.loading{cursor:default}`;class Ct extends wt{constructor(){super(...arguments),this.formSubmitController=new xt(this,{form:e=>{if(e.hasAttribute("form")){const t=e.getRootNode(),l=e.getAttribute("form");return t.getElementById(l)}return e.closest("form")}}),this.type="button",this.fullWidth=!1,this.hasLeftIconSlot=!1,this.hasRightIconSlot=!1,this.hasSlotController=new mt(this,"leftIcon","rightIcon"),this._clickHandler=()=>{"submit"===this.type&&this.formSubmitController.submit(this),"reset"===this.type&&this.formSubmitController.reset(this)}}updated(){this.hasLeftIconSlot||(this.hasLeftIconSlot=this.hasSlotController.test("leftIcon")),this.hasRightIconSlot||(this.hasRightIconSlot=this.hasSlotController.test("rightIcon"))}_handleClick(e){if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation();this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}render(){const e=this.href,t=e?nt`a`:nt`button`,l=!this.hasLeftIconSlot&&!this.hasRightIconSlot;return dt`
+   */var ht,vt=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);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:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='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' viewBox='0 0 24 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:top;width:1em}::slotted(svg){vertical-align:middle}}`;class gt extends _e{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}))}))}}gt.styles=[vt],gt.dependencies={},e([Se({type:Boolean,reflect:!0})],gt.prototype,"ssr",void 0);var pt,ut,ft=o`: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-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);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-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);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-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);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:var(--sgds-border-width-1) 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-label-md);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-xs);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 wt extends gt{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"}}wt.styles=[...gt.styles,ft],e([(pt=".btn",(e,t,l)=>{const i=e=>{const l=e.renderRoot?.querySelector(pt)??null;if(null===l&&ut&&!e.hasUpdated){const e="object"==typeof t?t.name:t;Ae("",`@query'd field ${JSON.stringify(String(e))} with the 'cache' flag set for selector '${pt}' 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(ut){const{get:a,set:s}="object"==typeof t?e:l??(()=>{const e=Symbol(`${String(t)} (@query() cache)`);return{get(){return this[e]},set(t){this[e]=t}}})();return ke(e,t,{get(){let e=a.call(this);return void 0===e&&(e=i(this),(null!==e||this.hasUpdated)&&s.call(this,e)),e}})}return ke(e,t,{get(){return i(this)}})})],wt.prototype,"button",void 0),e([Se({reflect:!0})],wt.prototype,"variant",void 0),e([Se({reflect:!0})],wt.prototype,"tone",void 0),e([Se({reflect:!0})],wt.prototype,"size",void 0),e([Se({type:Boolean,reflect:!0})],wt.prototype,"active",void 0),e([Se({type:Boolean,reflect:!0})],wt.prototype,"disabled",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"href",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"target",void 0),e([Se({type:String,reflect:!0})],wt.prototype,"download",void 0),e([Se({type:String})],wt.prototype,"ariaLabel",void 0),e([Se({type:Boolean})],wt.prototype,"loading",void 0);class mt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}class xt{constructor(e,t){(this.host=e).addController(this),this.options=Object.assign({form:e=>e.closest("form")},t)}hostConnected(){this.form=this.options.form(this.host)}hostDisconnected(){this.form&&(this.form=void 0)}doAction(e,t){if(this.form){const l=document.createElement("button");l.type=e,l.style.position="absolute",l.style.width="0",l.style.height="0",l.style.clipPath="inset(50%)",l.style.overflow="hidden",l.style.whiteSpace="nowrap",t&&(["formaction","formmethod","formnovalidate","formtarget"].forEach(e=>{t.hasAttribute(e)&&l.setAttribute(e,t.getAttribute(e))}),"submit"===e&&t.hasAttribute("name")&&(l.name=t.getAttribute("name"),l.value=t.getAttribute("value")||"")),this.form.append(l),l.click(),l.remove()}}reset(e){this.doAction("reset",e)}submit(e){this.doAction("submit",e)}}var Zt=o`::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='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' viewBox='0 0 24 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:top;width:1em}`,bt=o`:host{display:inline-block}:host([fullWidth]),:host([fullWidth]) .btn{width:100%}:host([fullWidth]) .btn.has-left-icon{justify-content:flex-start}:host([fullWidth]) .btn.has-right-icon{justify-content:space-between}:host([fullWidth]) .btn.has-left-icon.has-right-icon{justify-content:center}.btn span{padding:0 var(--sgds-padding-2-xs)}.btn.no-icon{gap:var(--sgds-gap-none)}.loading{cursor:default}`;class Ct extends wt{constructor(){super(...arguments),this.formSubmitController=new xt(this,{form:e=>{if(e.hasAttribute("form")){const t=e.getRootNode(),l=e.getAttribute("form");return t.getElementById(l)}return e.closest("form")}}),this.type="button",this.fullWidth=!1,this.hasLeftIconSlot=!1,this.hasRightIconSlot=!1,this.hasSlotController=new mt(this,"leftIcon","rightIcon"),this._clickHandler=()=>{"submit"===this.type&&this.formSubmitController.submit(this),"reset"===this.type&&this.formSubmitController.reset(this)}}updated(){this.hasLeftIconSlot||(this.hasLeftIconSlot=this.hasSlotController.test("leftIcon")),this.hasRightIconSlot||(this.hasRightIconSlot=this.hasSlotController.test("rightIcon"))}_handleClick(e){if(this.disabled||this.loading)return e.preventDefault(),void e.stopPropagation();this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}render(){const e=this.href,t=e?nt`a`:nt`button`,l=!this.hasLeftIconSlot&&!this.hasRightIconSlot;return dt`
       <${t}
         class="btn ${at({disabled:this.disabled,active:this.active,"has-left-icon":this.hasLeftIconSlot,"has-right-icon":this.hasRightIconSlot,"no-icon":l,loading:this.loading})}"
         ?disabled=${st(e?void 0:this.disabled)}
         type=${st(e?void 0:this.type)}
+        name=${st(e?void 0:this.name)}
+        value=${st(e?void 0:this.value)}
         href=${st(e?this.href:void 0)}
         target=${st(e?this.target:void 0)}
         download=${st(e?this.download:void 0)}
@@ -99,7 +101,7 @@ function Le(e){return(t,l)=>ke(t,l,{async get(){return await this.updateComplete
                <slot name="rightIcon"></slot>`}
       
       </${t}>
-    `}}Ct.styles=[...wt.styles,Zt,bt],e([Se({type:String,reflect:!0})],Ct.prototype,"type",void 0),e([Se({type:String,reflect:!0})],Ct.prototype,"form",void 0),e([Se({type:String,reflect:!0,attribute:"formaction"})],Ct.prototype,"formAction",void 0),e([Se({type:String,reflect:!0,attribute:"formmethod"})],Ct.prototype,"formMethod",void 0),e([Se({attribute:"formnovalidate",type:Boolean,reflect:!0})],Ct.prototype,"formNoValidate",void 0),e([Se({type:String,reflect:!0,attribute:"formtarget"})],Ct.prototype,"formTarget",void 0),e([Se({type:Boolean,reflect:!0})],Ct.prototype,"fullWidth",void 0),e([Se({type:Boolean})],Ct.prototype,"hasLeftIconSlot",void 0),e([Se({type:Boolean})],Ct.prototype,"hasRightIconSlot",void 0);var _t=o`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;function yt(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class Mt extends gt{constructor(){super(...arguments),this.size="md",this.tone="default",this.disabled=!1,this._clickHandler=()=>{}}_handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),yt("sgds-icon")}render(){return ee`
+    `}}Ct.styles=[...wt.styles,Zt,bt],e([Se({type:String,reflect:!0})],Ct.prototype,"name",void 0),e([Se({type:String,reflect:!0})],Ct.prototype,"value",void 0),e([Se({type:String,reflect:!0})],Ct.prototype,"type",void 0),e([Se({type:String,reflect:!0})],Ct.prototype,"form",void 0),e([Se({type:String,reflect:!0,attribute:"formaction"})],Ct.prototype,"formAction",void 0),e([Se({type:String,reflect:!0,attribute:"formmethod"})],Ct.prototype,"formMethod",void 0),e([Se({attribute:"formnovalidate",type:Boolean,reflect:!0})],Ct.prototype,"formNoValidate",void 0),e([Se({type:String,reflect:!0,attribute:"formtarget"})],Ct.prototype,"formTarget",void 0),e([Se({type:Boolean,reflect:!0})],Ct.prototype,"fullWidth",void 0),e([Se({type:Boolean})],Ct.prototype,"hasLeftIconSlot",void 0),e([Se({type:Boolean})],Ct.prototype,"hasRightIconSlot",void 0);var _t=o`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;function yt(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class Mt extends gt{constructor(){super(...arguments),this.size="md",this.tone="default",this.disabled=!1,this._clickHandler=()=>{}}_handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),yt("sgds-icon")}render(){return ee`
       <button class="btn-close" aria-label="Close button" ?disabled=${this.disabled} @click=${this._handleClick}>
         <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>