diff --git a/components/dist/button.js b/components/dist/button.js
index a886161..5f87683 100644
--- a/components/dist/button.js
+++ b/components/dist/button.js
@@ -8,30 +8,25 @@ smButton.innerHTML = `
             box-sizing: border-box;
 }       
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
     width: auto;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
     --background-color: 255, 255, 255;
     --padding: 0.6rem 1.2rem;
     --border-radius: 0.3rem;
-    --background: rgba(var(--text-color), 0.1);
+    --background: rgba(var(--text-color, (17,17,17)), 0.1);
 }
 :host([variant='primary']) .button{
-    background: var(--accent-color);
-    color: rgba(var(--background-color), 1);
+    background: var(--accent-color,teal);
+    color: rgba(var(--background-color, (255,255,255)), 1);
 }
 :host([variant='outlined']) .button{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;
     background: transparent; 
-    color: var(--accent-color);
+    color: var(--accent-color,teal);
 }
 :host([variant='no-outline']) .button{
     background: inherit; 
-    color: var(--accent-color);
+    color: var(--accent-color,teal);
 }
 :host([disabled]){
     pointer-events: none;
@@ -39,19 +34,12 @@ smButton.innerHTML = `
 }
 .button {
     position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
     padding: var(--padding);
     cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
             user-select: none;
     border-radius: var(--border-radius); 
-    -webkit-box-pack: center; 
-        -ms-flex-pack: center; 
             justify-content: center;
     transition: box-shadow 0.3s, background-color 0.3s;
     font-family: inherit;
@@ -69,8 +57,8 @@ smButton.innerHTML = `
     pointer-events: none;
     cursor: not-allowed;
     opacity: 0.6;
-    color: rgba(var(--text-color), 1);
-    background-color: rgba(var(--text-color), 0.3);
+    color: rgba(var(--text-color, (17,17,17)), 1);
+    background-color: rgba(var(--text-color, (17,17,17)), 0.3);
 }
 @media (hover: hover){
     :host(:not([disabled])) .button:hover,
@@ -80,8 +68,8 @@ smButton.innerHTML = `
     }
     :host([variant='outlined']:not([disabled])) .button:hover,
     :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
     }
 }
 @media (hover: none){
@@ -90,8 +78,8 @@ smButton.innerHTML = `
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
     }
     :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
     }
 }
 </style>
diff --git a/components/dist/button.min.js b/components/dist/button.min.js
index aa5472f..f7ffce3 100644
--- a/components/dist/button.min.js
+++ b/components/dist/button.min.js
@@ -1 +1 @@
-const smButton=document.createElement("template");smButton.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    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: inherit; \n    color: var(--accent-color);\n}\n:host([disabled]){\n    pointer-events: none;\n    cursor: not-allowed;\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover,\n    :host(:focus-within:not([disabled])) .button{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']:not([disabled])) .button:hover,\n    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});
\ No newline at end of file
+const smButton=document.createElement("template");smButton.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: inline-flex;\n    width: auto;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color, (17,17,17)), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color,teal);\n    color: rgba(var(--background-color, (255,255,255)), 1);\n}\n:host([variant='outlined']) .button{\n            box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color,teal);\n}\n:host([variant='no-outline']) .button{\n    background: inherit; \n    color: var(--accent-color,teal);\n}\n:host([disabled]){\n    pointer-events: none;\n    cursor: not-allowed;\n}\n.button {\n    position: relative;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n            user-select: none;\n    border-radius: var(--border-radius); \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color, (17,17,17)), 1);\n    background-color: rgba(var(--text-color, (17,17,17)), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover,\n    :host(:focus-within:not([disabled])) .button{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']:not([disabled])) .button:hover,\n    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n                box-shadow: 0 0 0 1px rgba(var(--text-color, (17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});
\ No newline at end of file
diff --git a/components/dist/input.js b/components/dist/input.js
index 6ba63ab..eaa8583 100644
--- a/components/dist/input.js
+++ b/components/dist/input.js
@@ -34,18 +34,13 @@ input:invalid{
 border: none;
 }
 :host{
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    --accent-color: #4d2588;
-    --text-color: 17, 17, 17;
-    --background-color: 255, 255, 255;
     --success-color: #00C853;
     --danger-color: red;
     --width: 100%;
     --icon-gap: 0.5rem;
     --border-radius: 0.3rem;
-    --background: rgba(var(--text-color), 0.06);
+    --background: rgba(var(--text-color, (17,17,17)), 0.06);
 }
 .hide{
    opacity: 0 !important;
@@ -55,7 +50,7 @@ border: none;
     display: none;
 }
 .icon {
-    fill: rgba(var(--text-color), 0.6);
+    fill: rgba(var(--text-color, (17,17,17)), 0.6);
     height: 1.4rem;
     width: 1.4rem;
     border-radius: 1rem;
@@ -67,22 +62,16 @@ border: none;
     border-radius: 10rem;
 }
 .input {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     cursor: text;
     min-width: 0;
     text-align: left;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
             align-items: center;
     position: relative;
     gap: var(--icon-gap);
     padding: var(--padding, 0.6rem 0.8rem);
     border-radius: var(--border-radius);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s, box-shadow 0.2s;
     background: var(--background);
     width: 100%;
     outline: none;
@@ -96,7 +85,7 @@ border: none;
     pointer-events: none;
 }
 .input:focus-within:not(.readonly){
-    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+    box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
 }
 .disabled{
     pointer-events: none;
@@ -112,7 +101,7 @@ border: none;
     transition: -webkit-transform 0.3s;
     -o-transition: transform 0.3s;
     transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s, color .03;
     -webkit-transform-origin: left;
     -ms-transform-origin: left;
         transform-origin: left;
@@ -131,15 +120,9 @@ border: none;
 }
 .container{
     width: 100%;
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     position: relative;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
             align-items: center;
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
             flex: 1;
 }    
 input{
@@ -147,40 +130,30 @@ input{
     border: none;
     background: transparent;
     outline: none;
-    color: rgba(var(--text-color), 1);
+    color: rgba(var(--text-color, (17,17,17)), 1);
     width: 100%;
 }
-:host(:not([variant="outlined"])) .animate-label .container input {
+:host([animate]) .input:focus-within .container input,
+.animate-label .container input {
     -webkit-transform: translateY(0.6rem);
             -ms-transform: translateY(0.6rem);
         transform: translateY(0.6rem);
     }
   
-:host(:not([variant="outlined"])) .animate-label .label {
+    :host([animate]) .input:focus-within .label,
+    .animate-label .label {
     -webkit-transform: translateY(-0.7em) scale(0.8);
             -ms-transform: translateY(-0.7em) scale(0.8);
         transform: translateY(-0.7em) scale(0.8);
     opacity: 1;
-    color: var(--accent-color)
+    color: var(--accent-color,teal)
 }
 :host([variant="outlined"]) .input {
-    box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;
-    background: rgba(var(--background-color), 1);
-}
-:host([variant="outlined"]) .label {
-    width: max-content;
-    margin-left: -0.5rem;
-    padding: 0 0.5rem;
-}
-:host([variant="outlined"]) .animate-label .label {
-    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
-            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
-        transform: translate(0.1rem, -1.5rem) scale(0.8);
-    opacity: 1;
-    background: rgba(var(--background-color), 1);
+    box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
+    background: rgba(var(--background-color, (255,255,255)), 1);
 }
 .animate-label:focus-within:not(.readonly) .label{
-    color: var(--accent-color)
+    color: var(--accent-color,teal)
 }
 .feedback-text:not(:empty){
     display: flex;
@@ -189,7 +162,7 @@ input{
     font-size: 0.9rem;
     align-items: center;
     padding: 0.8rem 0;
-    color: rgba(var(--text-color), 0.8);
+    color: rgba(var(--text-color, (17,17,17)), 0.8);
 }
 .success{
     color: var(--success-color);
@@ -208,7 +181,7 @@ input{
 }
 @media (any-hover: hover){
     .icon:hover{
-        background: rgba(var(--text-color), 0.1);
+        background: rgba(var(--text-color, (17,17,17)), 0.1);
     }
 }
 </style>
diff --git a/components/dist/input.min.js b/components/dist/input.min.js
index bc5e033..b24a2ff 100644
--- a/components/dist/input.min.js
+++ b/components/dist/input.min.js
@@ -1 +1 @@
-const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\n}\n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding, 0.6rem 0.8rem);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    font-size: inherit;\n    opacity: .7;\n    font-weight: 400;\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: inherit;\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 0;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                        ${this._errorText}\n                        `),t&&e}}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
\ No newline at end of file
+const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\n}\n:host{\n    display: flex;\n    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color, (17,17,17)), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding, 0.6rem 0.8rem);\n    border-radius: var(--border-radius);\n    transition: opacity 0.3s, box-shadow 0.2s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    font-size: inherit;\n    opacity: .7;\n    font-weight: 400;\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: flex;\n    position: relative;\n            align-items: center;\n            flex: 1;\n}    \ninput{\n    font-size: inherit;\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color, (17,17,17)), 1);\n    width: 100%;\n}\n:host([animate]) .input:focus-within .container input,\n.animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n    :host([animate]) .input:focus-within .label,\n    .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color,teal)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n    background: rgba(var(--background-color, (255,255,255)), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color,teal)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 0;\n    color: rgba(var(--text-color, (17,17,17)), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color, (17,17,17)), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <svg class="icon clear hide" 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                        ${this._errorText}\n                        `),t&&e}}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
\ No newline at end of file