const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    .tabs{\n        position: relative;\n        display: -ms-grid;\n        display: grid;\n        width: 100%;\n    }\n    .tab-header{\n        display: -ms-grid;\n        display: grid;\n        grid-auto-flow: column;\n        -webkit-box-pack: start;\n            -ms-flex-pack: start;\n                justify-content: flex-start;\n        gap: 1rem;\n        position: relative;\n        overflow: auto hidden;\n        max-width: 100%;\n        scrollbar-width: 0;\n    }\n    .indicator{\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 0.15rem;\n        border-radius: 1rem 1rem 0 0;  \n        background: var(--accent-color);\n        -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n        transition: width 0.3s, -webkit-transform 0.3s;\n        -o-transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n        pointer-events: none;\n    }\n    :host([variant="tab"]) .indicator{\n        height: 100%;\n        border-radius: 0.3rem;\n    }\n    :host(.round) .indicator{\n        border-radius: 3rem;\n    }\n    :host([variant="tab"]) .tab-header{\n        border-bottom: none; \n    }\n    .hide-completely{\n        display: none;\n    }\n    :host([variant="tab"]) .tab-header{\n        gap: 0.2rem;\n        display: -ms-inline-grid;\n        display: inline-grid;\n        justify-self: flex-start;\n        border-radius: 0.3rem;\n    }\n    :host([variant="tab"]) slot::slotted(.active){\n        color: rgba(var(--background-color), 1);\n    }\n    slot::slotted(.active){\n        color: var(--accent-color);\n        opacity: 1;\n    }\n    @media (hover: none){\n        .tab-header::-webkit-scrollbar-track {\n            -webkit-box-shadow: none !important;\n            background-color: transparent !important;\n        }\n        .tab-header::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n    }         \n</style>\n<div part="tab-container" class="tabs">\n    <div part="tab-header" class="tab-header">\n        <slot></slot>\n        <div part="indicator" class="indicator"></div>\n    </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});const smTab=document.createElement("template");smTab.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        z-index: 1;\n    }\n    .tab{\n        position: relative;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n            -ms-user-select: none;\n                user-select: none;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        white-space: nowrap;\n        padding: 0.4rem 0.8rem;\n        font-weight: 500;\n        word-spacing: 0.1rem;\n        text-align: center;\n        -webkit-transition: color 0.3s;\n        -o-transition: color 0.3s;\n        transition: color 0.3s;\n        text-transform: capitalize;\n        height: 100%;\n    }\n    @media (hover: hover){\n        :host(.active) .tab{\n            opacity: 1;\n        }\n        .tab{\n            opacity: 0.7\n        }\n        .tab:hover{\n            opacity: 1\n        }\n    }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    width: 100%;\n}\n.panel-container{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden auto;\n}\nslot::slotted(.hide-completely){\n    display: none;\n}\n@media (hover: none){\n    .tab-header::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    .tab-header::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n}         \n</style>\n<div part="panel-container" class="panel-container">\n    <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank<t.detail.rank?s&&!e?s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}});