const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: inline-flex;\n    }\n    :host(:active) .thumb{\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.2rem white inset;\n    }\n    label{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: flex;\n        align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        transition: background 0.3s;\n        background: rgba(var(--text-color,inherit), 0.4);\n        box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:active .thumb::after,\n    label:focus-within .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color,inherit), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        justify-content: center;\n        align-items: center;\n        border-radius: 1rem;\n        box-shadow: 0 0.1rem 0.4rem #00000060, 0 0 0 0.3rem white inset;\n        transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n        background-color: inherit;\n    }\n    \n    input:checked ~ .thumb {\n        transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color, teal);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",e=>{" "!==e.key||this.isDisabled||(e.preventDefault(),this.input.click())}),this.input.addEventListener("click",e=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(e,t,n){t!==n&&("disabled"===e?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===e&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});