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        --gap: 1rem;\n        --justify-content: flex-start;\n        --tab-indicator-border-radius: 0.3rem;\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        justify-content: var(--justify-content);\n        gap: var(--gap);\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, tea);\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: var(--tab-indicator-border-radius);\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, (255,255,255)), 1);\n    }\n    slot::slotted(.active){\n        color: var(--accent-color, tea);\n        opacity: 1;\n    }\n    @media (any-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    @media (any-hover: hover){\n        .tab-header{\n            overflow: hidden;\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.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this),this.moveIndiactor=this.moveIndiactor.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),this.tabHeader.scrollTo({behavior:"smooth",left:t.getBoundingClientRect().left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,e)=>{t.dataset.index=e})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);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.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});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        --padding: 0.8rem 1rem;\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: var(--padding);\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;\n    scroll-snap-type: x mandatory;\n    content-visibility: auto;\n}\n::slotted(*){\n    min-width: 100%;\n    scroll-snap-align: center;\n}\n@media (any-hover: none) {\n    .panel-container{\n        overflow-x: auto;\n        scrollbar-width: none;\n    }\n    .container {\n        overflow-y: scroll;\n    }\n    ::-webkit-scrollbar {\n        width: 0;\n        height: 0;\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.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.allPanels=t.target.assignedElements(),this.allPanels.forEach((t,n)=>{t.dataset.index=n,e.observe(t)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const e=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});