const smMenu=document.createElement("template");smMenu.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-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.menu{\n    display: -ms-grid;\n    display: grid;\n    place-items: center;\n    height: 2rem;\n    width: 2rem;\n    outline: none;\n}\n.icon {\n    position: absolute;\n    fill: rgba(var(--text-color), 0.7);\n    height: 2.4rem;\n    width: 2.4rem;\n    padding: 0.5rem;\n    border-radius: 2rem;\n    -webkit-transition: background 0.3s;\n    -o-transition: background 0.3s;\n    transition: background 0.3s;\n}      \n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n    background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n    left: 0;\n}\n:host([align-options="right"]) .options{\n    right: 0;\n}\n.options{\n    padding: 0.5rem 0;\n    overflow: hidden auto;\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: -webkit-max-content;\n    min-width: -moz-max-content;\n    min-width: max-content;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    background: rgba(var(--background-color), 1);\n    border-radius: 0.3rem;\n    z-index: 1;\n    -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n            box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n    bottom: auto;\n}\n.hide{\n    display: none;\n}\n@media screen and (max-width: 640px){\n    .options{\n        position: fixed;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        top: auto;\n        border-radius: 0.5rem 0.5rem 0 0;\n    }\n}\n@media (hover: hover){\n    .menu:hover .icon{\n        background: rgba(var(--text-color), 0.1); \n    }\n}\n</style>\n<div class="select">\n    <div class="menu" tabindex="0">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n    </div>\n    <div class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickoutSide)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickoutSide)}});const menuOption=document.createElement("template");menuOption.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    --padding: 0.6rem 1.6rem;\n}\n.option{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    overflow-wrap: break-word;\n    white-space: nowrap;\n    outline: none;\n    font-size: 1rem;\n    user-select: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n    :host{\n        --padding: 0.8rem 1.6rem;\n    }\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="option">\n    <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});