const smTextarea=document.createElement("template");smTextarea.innerHTML='\n    <style>\n    *,\n    *::before,\n    *::after { \n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    ::-moz-focus-inner{\n        border: none;\n    }\n    .hide{\n        opacity: 0 !important;\n    }\n    :host{\n        display: grid;\n        --danger-color: red;\n        --border-radius: 0.3rem;\n        --background: rgba(var(--text-color,(17,17,17)), 0.06);\n        --padding: initial;\n        --max-height: 8rem;\n    }\n    :host([variant="outlined"]) .textarea {\n        box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n    }\n    .textarea{\n        display: grid;\n        position: relative;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n        grid-template-columns: 1fr;\n        align-items: stretch;\n        max-height: var(--max-height);\n        background: var(--background);\n        border-radius: var(--border-radius);\n        padding: var(--padding);\n        transition: opacity 0.3s, box-shadow 0.2s;\n    }\n    .textarea::after,\n    textarea{\n        padding: var(--padding,0.6rem 0.8rem);\n        width: 100%;\n        min-width: 1em;\n        font: inherit;\n        color: inherit;\n        resize: none;\n        grid-area: 2/1;\n        justify-self: stretch;\n        background: none;\n        appearance: none;\n        border: none;\n        outline: none;\n        line-height: 1.5;\n        overflow: hidden auto;\n    }\n    .textarea::after{\n        content: attr(data-value) \' \';\n        visibility: hidden;\n        white-space: pre-wrap;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        hyphens: auto;\n    }\n    .readonly{\n        pointer-events: none;\n    }\n    .textarea:focus-within:not(.readonly){\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    .placeholder{\n        margin: var(--padding,0.6rem 0.8rem);\n        opacity: .7;\n        font-weight: inherit;\n        font-size: inherit;\n        line-height: 1.5;\n        pointer-events: none;\n        user-select: none;\n        grid-area: 2/1;\n    }\n    :host([disabled]) .textarea{\n        cursor: not-allowed;\n        opacity: 0.6;\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n            height: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color,(17,17,17)), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color,(17,17,17)), 0.5);\n            }\n        }\n    }\n    </style>\n    <label class="textarea" part="textarea">\n        <span class="placeholder"></span>\n        <textarea rows="1"></textarea>\n    </label>\n    ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});