const smRadio=document.createElement("template");smRadio.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        --gap: 0.5rem;\n        --height: 1.4rem;\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .hide{\n        display: none !important;\n    }\n    .radio{\n        display: flex;\n        cursor: pointer;\n    }\n    .radio__button{\n        position: relative;\n        height: var(--height);\n        width: var(--height);\n        overflow: visible;\n        padding: 0.1rem;\n    }\n    .outer-disc{\n        fill: none;\n        stroke-width: 3;\n        stroke: rgba(var(--text-color, (17,17,17)), 0.7);\n    }\n    .inner-disc{\n        fill: var(--accent-color, teal);\n        transition: transform 0.3s;\n        transform: scale(0);\n        transform-origin: center;\n    }\n    :host([checked]) .outer-disc{\n        stroke: var(--accent-color, teal);\n    }\n    :host([checked]) .inner-disc{\n        transform: scale(1);\n    }\n\n    @media (any-hover: hover){\n    }\n</style>\n<div class="radio">\n    <slot name="left"></slot>\n    <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n    <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n<t;n++)e+=i.charAt(Math.floor(Math.random()*i.length));return e}connectedCallback(){this.uniqueId=this.randString(8),this.options={bubbles:!0,composed:!0,detail:{uid:this.uniqueId,value:this.value}},this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});