@popovandrii/ui-elements 0.0.14 → 0.0.16

package/README.md

@@ -34,7 +34,9 @@ new Select({
   selected: "UIselect-selected",
   arrow: "UIselect-arrow",
   optionsList: "UIselect-options",
-  excludedItems: ["divider", "test"], // class="you_name"
+  search: "UIselect-options__search",
+  items: "UIselect-options__items",
+  excludedItems: ["divider", "test"], // class="costom"
 });
 ```
 
@@ -155,19 +157,34 @@ radius: `r-0` `r-1`<br>
 
 #### Select UI
 ```html
-  <div class="UIselect lg r-1 info" id="mySelect" tabindex="0" role="listbox" aria-activedescendant="">
-    <input type="hidden" name="myName">
+  <div class="UIselect" id="mySelect2" tabindex="0" role="listbox" aria-haspopup="listbox">
     <span class="UIselect-selected">Select an option</span>
-    <span class="UIselect-arrow">&#9662;</span>
+    <input type="hidden" name="myId2">
     <ul class="UIselect-options" hidden>
-      <li role="option" data-value="one">Option 1</li>
-      <li role="option" data-value="two">Option 2</li>
-      <li role="presentation" class="divider" aria-hidden="true"></li>
-      <li role="option" data-value="thre">Option 3</li>
-      <li role="option" data-value="4" ia-selected="true">Default val</li>
+      <li class="UIselect-options__search" role="search">
+        <input type="text" value="" aria-label="Search options">
+      </li>
+      <li class="UIselect-options__items" aria-hidden="true">
+        <ul role="group">
+          <li role="option" data-value="1">Option 1</li>
+          <li role="option" data-value="2">Option 2</li>
+          <li role="option" data-value="3">Option 3</li>
+          <li role="presentation" class="divider" aria-hidden="true"></li>
+          <li role="option" data-value="4">Option 4</li>
+          <li role="option" data-value="5">Option 5</li>
+          <li role="option" data-value="6">Option 6</li>
+          <li role="option" data-value="7">Option 7</li>
+          <li role="option" data-value="8">Option 8</li>
+          <li role="option" data-value="9">Option 9</li>
+          <li role="option" data-value="10">Option 10</li>
+        </ul>
+      </li>
     </ul>
   </div>
 ```
+
+##### Search
+```UIselect-options__search``` may be excluded
 ##### Send to server
 ```js
 const select = document.getElementById('mySelect');

package/dist/Select.d.ts

@@ -1,16 +1,25 @@
+declare global {
+    interface Window {
+        __UIselectGlobalClickInitialized?: boolean;
+    }
+}
 interface SelectorMap {
     idPrefix: string;
     main: string;
     selected: string;
     arrow: string;
     optionsList: string;
+    search: string;
+    items: string;
     excludedItems: Array<string>;
 }
 export declare class Select {
     private selectors;
     private main;
+    private itemArrowInitialized;
     constructor(selectors?: Partial<SelectorMap>);
     private filterExcluded;
+    private filterSearch;
     private event;
     private itemArrow;
     private itemsPosition;

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var M=Object.defineProperty;var U=d=>{throw TypeError(d)};var T=(d,e,t)=>e in d?M(d,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):d[e]=t;var b=(d,e,t)=>T(d,typeof e!="symbol"?e+"":e,t),D=(d,e,t)=>e.has(d)||U("Cannot "+t);var m=(d,e,t)=>(D(d,e,"read from private field"),t?t.call(d):e.get(d)),A=(d,e,t)=>e.has(d)?U("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(d):e.set(d,t);var g=(d,e,t)=>(D(d,e,"access private method"),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var f,y,w,F;class V{constructor(e={}){A(this,w);b(this,"selectors");b(this,"spinBoxes");A(this,f,(e,t,s,n=0,i=0)=>{e==n||e<n?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});A(this,y,(e,t)=>{const s=e.getAttribute(`data-${t}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const t={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...t,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,w,F).call(this)}}f=new WeakMap,y=new WeakMap,w=new WeakSet,F=function(){this.spinBoxes.forEach(e=>{const t=e.querySelectorAll(`.${this.selectors.btn}`),s=t[0],n=t[1],i=e.querySelector(`.${this.selectors.input}`),r=Number(e.dataset.step),c=Number(e.dataset.min),a=m(this,y).call(this,e,"max"),h=o=>{e.setAttribute("aria-valuenow",String(o)),e.setAttribute("aria-valuetext",`${o} items`)};Number(i.value)<=c&&(i.value=c.toFixed(r)),a!==0?(Number(i.value)>=a&&(i.value=a.toFixed(r)),a&&e.setAttribute("aria-valuemax",a.toFixed(r))):i.value=Number(i.value).toFixed(r),c&&e.setAttribute("aria-valuemin",c.toFixed(r)),m(this,f).call(this,Number(i.value),s,n,c,a),h(i.value);let u=null;const v=(o=1)=>{i.value=String(Math.abs(Number(i.value)));let l=parseFloat(i.value)||0;l=l+1*o/Math.pow(10,r),l>a&&a!==0&&(l=a),i.value=l.toFixed(r),m(this,f).call(this,Number(i.value),s,n,c,a),h(i.value)},k=(o=1)=>{i.value=String(Math.abs(Number(i.value)));let l=parseFloat(i.value)||0;l=l-1*o/Math.pow(10,r),l<c&&(l=c),i.value=l.toFixed(r),m(this,f).call(this,Number(i.value),s,n,c,a),h(i.value)},p=(o,l=150)=>{u===null&&(u=window.setInterval(o,l))},L=()=>{u!==null&&(clearInterval(u),u=null)};n.addEventListener("mousedown",o=>{const l=o.shiftKey?3:1;p(()=>v(l))}),n.addEventListener("touchstart",()=>p(v)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(o=>{n.addEventListener(o,L)}),n.addEventListener("click",o=>{const l=o.shiftKey?3:1;u===null&&v(l)}),s.addEventListener("click",o=>{const l=o.shiftKey?3:1;u===null&&k(l)}),s.addEventListener("mousedown",o=>{const l=o.shiftKey?3:1;p(()=>k(l),100)}),s.addEventListener("touchstart",()=>p(k,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(o=>{s.addEventListener(o,L)}),i.addEventListener("keydown",o=>{const l=o.key,K=o.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(l)||(o.ctrlKey||o.metaKey)&&["a","c","v","x"].includes(l.toLowerCase()))return;if(["e","+","-"].includes(l)){o.preventDefault();return}if(l==="ArrowUp"||l==="ArrowDown"){o.preventDefault();const q=parseFloat(i.value)||0,C=1*K/Math.pow(10,r);let S=l==="ArrowUp"?q+C:q-C;S<c&&(S=c),i.value=S.toFixed(r),Number(i.value)<c&&(i.value=c.toFixed(r)),Number(i.value)>a&&a!==0&&(i.value=a.toFixed(r)),m(this,f).call(this,Number(i.value),s,n,c,a),h(i.value);return}const I=l===","?".":l,$=/^[0-9]$/.test(I),N=I===".",P=i.value.includes(".");(r===0&&!$||r>0&&!($||N)||N&&P)&&o.preventDefault()}),i.addEventListener("change",()=>{Number(i.value)<c&&(i.value=c.toFixed(r)),Number(i.value)>a&&a!==0?i.value=a.toFixed(r):i.value=Number(i.value).toFixed(r),m(this,f).call(this,Number(i.value),s,n,c,a)})})};var E,B;class _{constructor(e={}){A(this,E);b(this,"selectors");b(this,"main");const t={main:"UIsw",label:"UIsw-label"};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),g(this,E,B).call(this)}}E=new WeakSet,B=function(){this.main.forEach(e=>{const t=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");t&&t.id&&e.setAttribute("aria-labelledby",t.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",i=>{i.key==="ArrowRight"?(s.checked=!0,n(String(s.checked)),i.preventDefault()):i.key==="ArrowLeft"&&(s.checked=!1,n(String(s.checked)),i.preventDefault())}));const n=i=>{e.setAttribute("aria-checked",String(i))}})};class x{constructor(e={}){b(this,"selectors");b(this,"main");const t={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",excludedItems:["divider","test"]};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),x.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(s=>!t.some(n=>typeof n=="string"?s.classList.contains(n)||s.id===n:s===n))}event(){this.main.forEach(e=>{const t=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!t)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(h){return console.warn("Not found:",h.message)}const s=e.querySelector(`.${this.selectors.selected}`),n=e.querySelector(`.${this.selectors.arrow}`),i=e.querySelector(`.${this.selectors.optionsList}`);n&&n.addEventListener("click",()=>{this.toggle(e,i)}),s.addEventListener("click",()=>{this.toggle(e,i)}),e.addEventListener("click",()=>{this.itemsPosition(i)});const r=i.querySelectorAll("li"),c=this.filterExcluded(r,this.selectors.excludedItems),a=e.querySelector("[aria-selected='true']");a&&this.defaultSelect(e,a,s,t),this.itemArrow(e,i,c,s,t),this.items(e,i,c,s,t)})}itemArrow(e,t,s,n,i){let r=-1;const c=n.textContent?n.textContent:"";e.addEventListener("keydown",a=>{const h=s.length;if(a.key==="ArrowDown"){a.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),r=(r+1)%h,n.textContent=s[r].textContent,s.forEach(v=>v.removeAttribute("aria-selected")),s[r].setAttribute("aria-selected","true");const u=s[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),s[r].scrollIntoView({block:"nearest"})}else if(a.key==="ArrowUp"){a.preventDefault(),r=(r-1+h)%h,n.textContent=s[r].textContent,s.forEach(v=>v.removeAttribute("aria-selected")),s[r].setAttribute("aria-selected","true");const u=s[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),s[r].scrollIntoView({block:"nearest"})}else if(a.key==="Enter"||a.key===" ")if(a.preventDefault(),r>=0){n.textContent=s[r].textContent,s.forEach(v=>v.removeAttribute("aria-selected")),s[r].setAttribute("aria-selected","true");const u=s[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),i.value=String(s[r].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}else this.toggle(e,t);else a.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(n.textContent=c),this.close(e,t))})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,s,n,i){s.forEach((r,c)=>{r.addEventListener("click",()=>{const a=s[c];if(a){n.textContent=a.textContent,s.forEach(u=>u.removeAttribute("aria-selected")),a.setAttribute("aria-selected","true");const h=a.id||`${this.selectors.idPrefix}${c}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),i.value=String(s[c].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}})})}defaultSelect(e,t,s,n){t&&(n.setAttribute("value",t.dataset.value??""),s.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){e.dispatchEvent(new CustomEvent("change",{detail:{val:t},bubbles:!0}))}toggle(e,t){x.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const s=t.querySelector(`.${e.optionsList}`);s.hidden=!0,t.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",t=>{const s=t.target;[...document.querySelectorAll(`.${e.main}`)].some(i=>i.contains(s))||x.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}exports.Select=x;exports.SpinBox=V;exports.Switch=_;
+"use strict";var P=Object.defineProperty;var U=u=>{throw TypeError(u)};var z=(u,e,s)=>e in u?P(u,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):u[e]=s;var A=(u,e,s)=>z(u,typeof e!="symbol"?e+"":e,s),D=(u,e,s)=>e.has(u)||U("Cannot "+s);var y=(u,e,s)=>(D(u,e,"read from private field"),s?s.call(u):e.get(u)),w=(u,e,s)=>e.has(u)?U("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(u):e.set(u,s);var L=(u,e,s)=>(D(u,e,"access private method"),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var p,E,S,F;class M{constructor(e={}){w(this,S);A(this,"selectors");A(this,"spinBoxes");w(this,p,(e,s,i,a=0,t=0)=>{e==a||e<a?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),t!==0&&(e==t||e>t?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1))});w(this,E,(e,s)=>{const i=e.getAttribute(`data-${s}`);return i===null||i.trim()===""||isNaN(Number(i))?0:Number(i)});const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),L(this,S,F).call(this)}}p=new WeakMap,E=new WeakMap,S=new WeakSet,F=function(){this.spinBoxes.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`),i=s[0],a=s[1],t=e.querySelector(`.${this.selectors.input}`),d=Number(e.dataset.step),n=Number(e.dataset.min),r=y(this,E).call(this,e,"max"),v=l=>{e.setAttribute("aria-valuenow",String(l)),e.setAttribute("aria-valuetext",`${l} items`)};Number(t.value)<=n&&(t.value=n.toFixed(d)),r!==0?(Number(t.value)>=r&&(t.value=r.toFixed(d)),r&&e.setAttribute("aria-valuemax",r.toFixed(d))):t.value=Number(t.value).toFixed(d),n&&e.setAttribute("aria-valuemin",n.toFixed(d)),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value);let c=null;const f=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o+1*l/Math.pow(10,d),o>r&&r!==0&&(o=r),t.value=o.toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value)},m=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o-1*l/Math.pow(10,d),o<n&&(o=n),t.value=o.toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value)},h=(l,o=150)=>{c===null&&(c=window.setInterval(l,o))},b=()=>{c!==null&&(clearInterval(c),c=null)};a.addEventListener("mousedown",l=>{const o=l.shiftKey?3:1;h(()=>f(o))}),a.addEventListener("touchstart",()=>h(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{a.addEventListener(l,b)}),a.addEventListener("click",l=>{const o=l.shiftKey?3:1;c===null&&f(o)}),i.addEventListener("click",l=>{const o=l.shiftKey?3:1;c===null&&m(o)}),i.addEventListener("mousedown",l=>{const o=l.shiftKey?3:1;h(()=>m(o),100)}),i.addEventListener("touchstart",()=>h(m,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{i.addEventListener(l,b)}),t.addEventListener("keydown",l=>{const o=l.key,K=l.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(o)||(l.ctrlKey||l.metaKey)&&["a","c","v","x"].includes(o.toLowerCase()))return;if(["e","+","-"].includes(o)){l.preventDefault();return}if(o==="ArrowUp"||o==="ArrowDown"){l.preventDefault();const q=parseFloat(t.value)||0,N=1*K/Math.pow(10,d);let g=o==="ArrowUp"?q+N:q-N;g<n&&(g=n),t.value=g.toFixed(d),Number(t.value)<n&&(t.value=n.toFixed(d)),Number(t.value)>r&&r!==0&&(t.value=r.toFixed(d)),y(this,p).call(this,Number(t.value),i,a,n,r),v(t.value);return}const I=o===","?".":o,$=/^[0-9]$/.test(I),C=I===".",_=t.value.includes(".");(d===0&&!$||d>0&&!($||C)||C&&_)&&l.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<n&&(t.value=n.toFixed(d)),Number(t.value)>r&&r!==0?t.value=r.toFixed(d):t.value=Number(t.value).toFixed(d),y(this,p).call(this,Number(t.value),i,a,n,r)})})};var k,B;class V{constructor(e={}){w(this,k);A(this,"selectors");A(this,"main");const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),L(this,k,B).call(this)}}k=new WeakSet,B=function(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.label}`),i=e.querySelector("input");s&&s.id&&e.setAttribute("aria-labelledby",s.id),i&&(i.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{i.checked=!i.checked,e.setAttribute("aria-checked",String(i.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(i.checked=!0,a(String(i.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(i.checked=!1,a(String(i.checked)),t.preventDefault())}));const a=t=>{e.setAttribute("aria-checked",String(t))}})};class x{constructor(e={}){A(this,"selectors");A(this,"main");A(this,"itemArrowInitialized",new WeakSet);const s={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),x.initGlobalListener(this.selectors)}filterExcluded(e,s){return Array.from(e).filter(i=>!s.some(a=>typeof a=="string"?i.classList.contains(a)||i.id===a:i===a))}filterSearch(e,s){const i=s.trim().toLowerCase();return e.filter(a=>{var n,r;const t=((n=a.dataset.value)==null?void 0:n.toLowerCase())||"",d=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return t.includes(i)||d.includes(i)})}event(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!s)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(f){return console.warn("Not found:",f.message)}const i=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),t=e.querySelector(`.${this.selectors.optionsList}`),d=e.querySelector(`.${this.selectors.search} input`);a&&a.addEventListener("click",()=>{this.toggle(e,t)}),i.addEventListener("click",()=>{this.toggle(e,t)}),e.addEventListener("click",()=>{this.itemsPosition(t)});const n=t.querySelectorAll(`.${this.selectors.items} ul li`),r=this.filterExcluded(n,this.selectors.excludedItems),v=e.querySelector("[aria-selected='true']");v&&this.defaultSelect(e,v,i,s);var c=[];d&&d.addEventListener("input",f=>{const h=f.target.value.trim();i&&(c=this.filterSearch(r,h),h?(n.forEach(b=>b.remove()),c.forEach(b=>{var l;(l=t.querySelector(`.${this.selectors.optionsList} ul`))==null||l.appendChild(b)})):n.forEach(b=>{var l;(l=t.querySelector(`.${this.selectors.optionsList} ul`))==null||l.appendChild(b)}),this.itemArrow(e,t,i,s))}),this.itemArrow(e,t,i,s),this.items(e,t,r,i,s)})}itemArrow(e,s,i,a){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let t=-1;const d=i.textContent?i.textContent:"",n=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",r=>{n&&n.focus();const v=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(v,this.selectors.excludedItems),f=c.length;if(f!==0)if(r.key==="ArrowDown"){r.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,s),t=(t+1)%f,i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="ArrowUp"){r.preventDefault(),t=(t-1+f)%f,i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="Enter")if(r.preventDefault(),t>=0){i.textContent=c[t].textContent,c.forEach(h=>h.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const m=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",m),a.value=String(c[t].dataset.value),this.costomEvent(e,a.value),this.close(e,s)}else this.toggle(e,s);else r.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(i.textContent=d),this.close(e,s))})}itemsPosition(e){const s=e.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(e,s,i,a,t){i.forEach((d,n)=>{d.addEventListener("click",()=>{const r=i[n];if(r){a.textContent=r.textContent,i.forEach(c=>c.removeAttribute("aria-selected")),r.setAttribute("aria-selected","true");const v=r.id||`${this.selectors.idPrefix}${n}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",v),t.value=String(i[n].dataset.value),this.costomEvent(e,t.value),this.close(e,s)}})})}defaultSelect(e,s,i,a){s&&(a.setAttribute("value",s.dataset.value??""),i.textContent=s.textContent??"",e.setAttribute("aria-activedescendant",s.id||""))}costomEvent(e,s){e.dispatchEvent(new CustomEvent("change",{detail:{val:s},bubbles:!0}))}toggle(e,s){x.closeAll(this.selectors),s.hidden?(s.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,s)}close(e,s){s.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(s=>{const i=s.querySelector(`.${e.optionsList}`);i.hidden=!0,s.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",s=>{const i=s.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(i))||x.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}exports.Select=x;exports.SpinBox=M;exports.Switch=V;

package/dist/index.es.js

@@ -1,81 +1,81 @@
-var M = Object.defineProperty;
-var U = (d) => {
-  throw TypeError(d);
+var z = Object.defineProperty;
+var U = (u) => {
+  throw TypeError(u);
 };
-var V = (d, e, t) => e in d ? M(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
-var b = (d, e, t) => V(d, typeof e != "symbol" ? e + "" : e, t), D = (d, e, t) => e.has(d) || U("Cannot " + t);
-var m = (d, e, t) => (D(d, e, "read from private field"), t ? t.call(d) : e.get(d)), A = (d, e, t) => e.has(d) ? U("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(d) : e.set(d, t);
-var S = (d, e, t) => (D(d, e, "access private method"), t);
-var f, y, w, F;
+var P = (u, e, s) => e in u ? z(u, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[e] = s;
+var A = (u, e, s) => P(u, typeof e != "symbol" ? e + "" : e, s), D = (u, e, s) => e.has(u) || U("Cannot " + s);
+var x = (u, e, s) => (D(u, e, "read from private field"), s ? s.call(u) : e.get(u)), y = (u, e, s) => e.has(u) ? U("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, s);
+var L = (u, e, s) => (D(u, e, "access private method"), s);
+var p, E, S, F;
 class G {
   constructor(e = {}) {
-    A(this, w);
-    b(this, "selectors");
-    b(this, "spinBoxes");
-    A(this, f, (e, t, s, n = 0, i = 0) => {
-      e == n || e < n ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), i !== 0 && (e == i || e > i ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
+    y(this, S);
+    A(this, "selectors");
+    A(this, "spinBoxes");
+    y(this, p, (e, s, i, a = 0, t = 0) => {
+      e == a || e < a ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1), t !== 0 && (e == t || e > t ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1));
     });
-    A(this, y, (e, t) => {
-      const s = e.getAttribute(`data-${t}`);
-      return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
+    y(this, E, (e, s) => {
+      const i = e.getAttribute(`data-${s}`);
+      return i === null || i.trim() === "" || isNaN(Number(i)) ? 0 : Number(i);
     });
-    const t = {
+    const s = {
       main: "UIsp",
       btn: "UIsp__btn",
       input: "UIsp__input",
       disabledBtn: "disabled"
     };
-    this.selectors = { ...t, ...e }, this.spinBoxes = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), S(this, w, F).call(this);
+    ), L(this, S, F).call(this);
   }
 }
-f = new WeakMap(), y = new WeakMap(), w = new WeakSet(), F = function() {
+p = new WeakMap(), E = new WeakMap(), S = new WeakSet(), F = function() {
   this.spinBoxes.forEach((e) => {
-    const t = e.querySelectorAll(
+    const s = e.querySelectorAll(
       `.${this.selectors.btn}`
-    ), s = t[0], n = t[1], i = e.querySelector(
+    ), i = s[0], a = s[1], t = e.querySelector(
       `.${this.selectors.input}`
-    ), r = Number(e.dataset.step), c = Number(e.dataset.min), a = m(this, y).call(this, e, "max"), h = (o) => {
-      e.setAttribute("aria-valuenow", String(o)), e.setAttribute("aria-valuetext", `${o} items`);
+    ), d = Number(e.dataset.step), n = Number(e.dataset.min), r = x(this, E).call(this, e, "max"), v = (l) => {
+      e.setAttribute("aria-valuenow", String(l)), e.setAttribute("aria-valuetext", `${l} items`);
     };
-    Number(i.value) <= c && (i.value = c.toFixed(r)), a !== 0 ? (Number(i.value) >= a && (i.value = a.toFixed(r)), a && e.setAttribute("aria-valuemax", a.toFixed(r))) : i.value = Number(i.value).toFixed(r), c && e.setAttribute("aria-valuemin", c.toFixed(r)), m(this, f).call(this, Number(i.value), s, n, c, a), h(i.value);
-    let u = null;
-    const v = (o = 1) => {
-      i.value = String(Math.abs(Number(i.value)));
-      let l = parseFloat(i.value) || 0;
-      l = l + 1 * o / Math.pow(10, r), l > a && a !== 0 && (l = a), i.value = l.toFixed(r), m(this, f).call(this, Number(i.value), s, n, c, a), h(i.value);
-    }, k = (o = 1) => {
-      i.value = String(Math.abs(Number(i.value)));
-      let l = parseFloat(i.value) || 0;
-      l = l - 1 * o / Math.pow(10, r), l < c && (l = c), i.value = l.toFixed(r), m(this, f).call(this, Number(i.value), s, n, c, a), h(i.value);
-    }, x = (o, l = 150) => {
-      u === null && (u = window.setInterval(o, l));
-    }, L = () => {
-      u !== null && (clearInterval(u), u = null);
+    Number(t.value) <= n && (t.value = n.toFixed(d)), r !== 0 ? (Number(t.value) >= r && (t.value = r.toFixed(d)), r && e.setAttribute("aria-valuemax", r.toFixed(d))) : t.value = Number(t.value).toFixed(d), n && e.setAttribute("aria-valuemin", n.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
+    let c = null;
+    const f = (l = 1) => {
+      t.value = String(Math.abs(Number(t.value)));
+      let o = parseFloat(t.value) || 0;
+      o = o + 1 * l / Math.pow(10, d), o > r && r !== 0 && (o = r), t.value = o.toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
+    }, m = (l = 1) => {
+      t.value = String(Math.abs(Number(t.value)));
+      let o = parseFloat(t.value) || 0;
+      o = o - 1 * l / Math.pow(10, d), o < n && (o = n), t.value = o.toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
+    }, h = (l, o = 150) => {
+      c === null && (c = window.setInterval(l, o));
+    }, b = () => {
+      c !== null && (clearInterval(c), c = null);
     };
-    n.addEventListener("mousedown", (o) => {
-      const l = o.shiftKey ? 3 : 1;
-      x(() => v(l));
-    }), n.addEventListener("touchstart", () => x(v)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (o) => {
-        n.addEventListener(o, L);
+    a.addEventListener("mousedown", (l) => {
+      const o = l.shiftKey ? 3 : 1;
+      h(() => f(o));
+    }), a.addEventListener("touchstart", () => h(f)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (l) => {
+        a.addEventListener(l, b);
       }
-    ), n.addEventListener("click", (o) => {
-      const l = o.shiftKey ? 3 : 1;
-      u === null && v(l);
-    }), s.addEventListener("click", (o) => {
-      const l = o.shiftKey ? 3 : 1;
-      u === null && k(l);
-    }), s.addEventListener("mousedown", (o) => {
-      const l = o.shiftKey ? 3 : 1;
-      x(() => k(l), 100);
-    }), s.addEventListener("touchstart", () => x(k, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (o) => {
-        s.addEventListener(o, L);
+    ), a.addEventListener("click", (l) => {
+      const o = l.shiftKey ? 3 : 1;
+      c === null && f(o);
+    }), i.addEventListener("click", (l) => {
+      const o = l.shiftKey ? 3 : 1;
+      c === null && m(o);
+    }), i.addEventListener("mousedown", (l) => {
+      const o = l.shiftKey ? 3 : 1;
+      h(() => m(o), 100);
+    }), i.addEventListener("touchstart", () => h(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (l) => {
+        i.addEventListener(l, b);
       }
-    ), i.addEventListener("keydown", (o) => {
-      const l = o.key, K = o.shiftKey ? 3 : 1;
+    ), t.addEventListener("keydown", (l) => {
+      const o = l.key, K = l.shiftKey ? 3 : 1;
       if ([
         "Backspace",
         "Delete",
@@ -85,183 +85,220 @@ f = new WeakMap(), y = new WeakMap(), w = new WeakSet(), F = function() {
         "Enter",
         "Home",
         "End"
-      ].includes(l) || (o.ctrlKey || o.metaKey) && ["a", "c", "v", "x"].includes(l.toLowerCase()))
+      ].includes(o) || (l.ctrlKey || l.metaKey) && ["a", "c", "v", "x"].includes(o.toLowerCase()))
         return;
-      if (["e", "+", "-"].includes(l)) {
-        o.preventDefault();
+      if (["e", "+", "-"].includes(o)) {
+        l.preventDefault();
         return;
       }
-      if (l === "ArrowUp" || l === "ArrowDown") {
-        o.preventDefault();
-        const q = parseFloat(i.value) || 0, C = 1 * K / Math.pow(10, r);
-        let g = l === "ArrowUp" ? q + C : q - C;
-        g < c && (g = c), i.value = g.toFixed(r), Number(i.value) < c && (i.value = c.toFixed(r)), Number(i.value) > a && a !== 0 && (i.value = a.toFixed(r)), m(this, f).call(this, Number(i.value), s, n, c, a), h(i.value);
+      if (o === "ArrowUp" || o === "ArrowDown") {
+        l.preventDefault();
+        const q = parseFloat(t.value) || 0, N = 1 * K / Math.pow(10, d);
+        let g = o === "ArrowUp" ? q + N : q - N;
+        g < n && (g = n), t.value = g.toFixed(d), Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 && (t.value = r.toFixed(d)), x(this, p).call(this, Number(t.value), i, a, n, r), v(t.value);
         return;
       }
-      const I = l === "," ? "." : l, $ = /^[0-9]$/.test(I), N = I === ".", P = i.value.includes(".");
-      (r === 0 && !$ || r > 0 && !($ || N) || N && P) && o.preventDefault();
-    }), i.addEventListener("change", () => {
-      Number(i.value) < c && (i.value = c.toFixed(r)), Number(i.value) > a && a !== 0 ? i.value = a.toFixed(r) : i.value = Number(i.value).toFixed(r), m(this, f).call(this, Number(i.value), s, n, c, a);
+      const I = o === "," ? "." : o, $ = /^[0-9]$/.test(I), C = I === ".", _ = t.value.includes(".");
+      (d === 0 && !$ || d > 0 && !($ || C) || C && _) && l.preventDefault();
+    }), t.addEventListener("change", () => {
+      Number(t.value) < n && (t.value = n.toFixed(d)), Number(t.value) > r && r !== 0 ? t.value = r.toFixed(d) : t.value = Number(t.value).toFixed(d), x(this, p).call(this, Number(t.value), i, a, n, r);
     });
   });
 };
-var E, B;
+var k, B;
 class T {
   constructor(e = {}) {
-    A(this, E);
-    b(this, "selectors");
-    b(this, "main");
-    const t = {
+    y(this, k);
+    A(this, "selectors");
+    A(this, "main");
+    const s = {
       main: "UIsw",
       label: "UIsw-label"
     };
-    this.selectors = { ...t, ...e }, this.main = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), S(this, E, B).call(this);
+    ), L(this, k, B).call(this);
   }
 }
-E = new WeakSet(), B = function() {
+k = new WeakSet(), B = function() {
   this.main.forEach((e) => {
-    const t = e.querySelector(`.${this.selectors.label}`), s = e.querySelector("input");
-    t && t.id && e.setAttribute("aria-labelledby", t.id), s && (s.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
-      s.checked = !s.checked, e.setAttribute("aria-checked", String(s.checked));
-    }), e.addEventListener("keydown", (i) => {
-      i.key === "ArrowRight" ? (s.checked = !0, n(String(s.checked)), i.preventDefault()) : i.key === "ArrowLeft" && (s.checked = !1, n(String(s.checked)), i.preventDefault());
+    const s = e.querySelector(`.${this.selectors.label}`), i = e.querySelector("input");
+    s && s.id && e.setAttribute("aria-labelledby", s.id), i && (i.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
+      i.checked = !i.checked, e.setAttribute("aria-checked", String(i.checked));
+    }), e.addEventListener("keydown", (t) => {
+      t.key === "ArrowRight" ? (i.checked = !0, a(String(i.checked)), t.preventDefault()) : t.key === "ArrowLeft" && (i.checked = !1, a(String(i.checked)), t.preventDefault());
     }));
-    const n = (i) => {
-      e.setAttribute("aria-checked", String(i));
+    const a = (t) => {
+      e.setAttribute("aria-checked", String(t));
     };
   });
 };
-class p {
+class w {
   constructor(e = {}) {
-    b(this, "selectors");
-    b(this, "main");
-    const t = {
+    A(this, "selectors");
+    A(this, "main");
+    A(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
+    const s = {
       idPrefix: "UI-option-",
       main: "UIselect",
       selected: "UIselect-selected",
       arrow: "UIselect-arrow",
       optionsList: "UIselect-options",
+      search: "UIselect-options__search",
+      items: "UIselect-options__items",
       excludedItems: ["divider", "test"]
       // class=""
     };
-    this.selectors = { ...t, ...e }, this.main = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), this.event(), p.initGlobalListener(this.selectors);
+    ), this.event(), w.initGlobalListener(this.selectors);
   }
-  filterExcluded(e, t) {
-    return Array.from(e).filter((s) => !t.some((n) => typeof n == "string" ? s.classList.contains(n) || s.id === n : s === n));
+  filterExcluded(e, s) {
+    return Array.from(e).filter((i) => !s.some((a) => typeof a == "string" ? i.classList.contains(a) || i.id === a : i === a));
+  }
+  filterSearch(e, s) {
+    const i = s.trim().toLowerCase();
+    return e.filter((a) => {
+      var n, r;
+      const t = ((n = a.dataset.value) == null ? void 0 : n.toLowerCase()) || "", d = ((r = a.textContent) == null ? void 0 : r.toLowerCase()) || "";
+      return t.includes(i) || d.includes(i);
+    });
   }
   event() {
     this.main.forEach((e) => {
-      const t = e.querySelector(
+      const s = e.querySelector(
         `.${this.selectors.main} input[type='hidden']`
       );
       try {
-        if (!t)
+        if (!s)
           throw new Error('<input type="hidden" name="YouUniqueId">');
-      } catch (h) {
-        return console.warn("Not found:", h.message);
+      } catch (f) {
+        return console.warn("Not found:", f.message);
       }
-      const s = e.querySelector(
+      const i = e.querySelector(
         `.${this.selectors.selected}`
-      ), n = e.querySelector(
+      ), a = e.querySelector(
         `.${this.selectors.arrow}`
-      ), i = e.querySelector(
+      ), t = e.querySelector(
         `.${this.selectors.optionsList}`
+      ), d = e.querySelector(
+        `.${this.selectors.search} input`
       );
-      n && n.addEventListener("click", () => {
-        this.toggle(e, i);
-      }), s.addEventListener("click", () => {
-        this.toggle(e, i);
+      a && a.addEventListener("click", () => {
+        this.toggle(e, t);
+      }), i.addEventListener("click", () => {
+        this.toggle(e, t);
       }), e.addEventListener("click", () => {
-        this.itemsPosition(i);
+        this.itemsPosition(t);
       });
-      const r = i.querySelectorAll("li"), c = this.filterExcluded(
-        r,
+      const n = t.querySelectorAll(
+        `.${this.selectors.items} ul li`
+      ), r = this.filterExcluded(
+        n,
         this.selectors.excludedItems
-      ), a = e.querySelector(
+      ), v = e.querySelector(
         "[aria-selected='true']"
       );
-      a && this.defaultSelect(e, a, s, t), this.itemArrow(e, i, c, s, t), this.items(e, i, c, s, t);
+      v && this.defaultSelect(e, v, i, s);
+      var c = [];
+      d && d.addEventListener("input", (f) => {
+        const h = f.target.value.trim();
+        i && (c = this.filterSearch(r, h), h ? (n.forEach((b) => b.remove()), c.forEach((b) => {
+          var l;
+          (l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(b);
+        })) : n.forEach((b) => {
+          var l;
+          (l = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || l.appendChild(b);
+        }), this.itemArrow(e, t, i, s));
+      }), this.itemArrow(e, t, i, s), this.items(e, t, r, i, s);
     });
   }
-  itemArrow(e, t, s, n, i) {
-    let r = -1;
-    const c = n.textContent ? n.textContent : "";
-    e.addEventListener("keydown", (a) => {
-      const h = s.length;
-      if (a.key === "ArrowDown") {
-        a.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), r = (r + 1) % h, n.textContent = s[r].textContent, s.forEach((v) => v.removeAttribute("aria-selected")), s[r].setAttribute("aria-selected", "true");
-        const u = s[r].id || `${this.selectors.idPrefix}${r}`;
-        e.setAttribute("aria-activedescendant", u), s[r].scrollIntoView({ block: "nearest" });
-      } else if (a.key === "ArrowUp") {
-        a.preventDefault(), r = (r - 1 + h) % h, n.textContent = s[r].textContent, s.forEach((v) => v.removeAttribute("aria-selected")), s[r].setAttribute("aria-selected", "true");
-        const u = s[r].id || `${this.selectors.idPrefix}${r}`;
-        e.setAttribute("aria-activedescendant", u), s[r].scrollIntoView({ block: "nearest" });
-      } else if (a.key === "Enter" || a.key === " ")
-        if (a.preventDefault(), r >= 0) {
-          n.textContent = s[r].textContent, s.forEach((v) => v.removeAttribute("aria-selected")), s[r].setAttribute("aria-selected", "true");
-          const u = s[r].id || `${this.selectors.idPrefix}${r}`;
-          e.setAttribute("aria-activedescendant", u), i.value = String(s[r].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
-        } else
-          this.toggle(e, t);
-      else a.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent = c), this.close(e, t));
+  itemArrow(e, s, i, a) {
+    if (this.itemArrowInitialized.has(e)) return;
+    this.itemArrowInitialized.add(e);
+    let t = -1;
+    const d = i.textContent ? i.textContent : "", n = e.querySelector(
+      `.${this.selectors.search} input`
+    );
+    e.addEventListener("keydown", (r) => {
+      n && n.focus();
+      const v = Array.from(
+        s.querySelectorAll(`.${this.selectors.optionsList} ul li`)
+      ), c = this.filterExcluded(
+        v,
+        this.selectors.excludedItems
+      ), f = c.length;
+      if (f !== 0)
+        if (r.key === "ArrowDown") {
+          r.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, s), t = (t + 1) % f, i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+          const m = c[t].id || `${this.selectors.idPrefix}${t}`;
+          e.setAttribute("aria-activedescendant", m), c[t].scrollIntoView({ block: "nearest" });
+        } else if (r.key === "ArrowUp") {
+          r.preventDefault(), t = (t - 1 + f) % f, i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+          const m = c[t].id || `${this.selectors.idPrefix}${t}`;
+          e.setAttribute("aria-activedescendant", m), c[t].scrollIntoView({ block: "nearest" });
+        } else if (r.key === "Enter")
+          if (r.preventDefault(), t >= 0) {
+            i.textContent = c[t].textContent, c.forEach((h) => h.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+            const m = c[t].id || `${this.selectors.idPrefix}${t}`;
+            e.setAttribute("aria-activedescendant", m), a.value = String(c[t].dataset.value), this.costomEvent(e, a.value), this.close(e, s);
+          } else
+            this.toggle(e, s);
+        else r.key === "Escape" && (e.getAttribute("aria-activedescendant") || (i.textContent = d), this.close(e, s));
     });
   }
   itemsPosition(e) {
-    const t = e.querySelector(
+    const s = e.querySelector(
       '[aria-selected="true"]'
     );
-    t && t.scrollIntoView({ block: "nearest" });
+    s && s.scrollIntoView({ block: "nearest" });
   }
-  items(e, t, s, n, i) {
-    s.forEach((r, c) => {
-      r.addEventListener("click", () => {
-        const a = s[c];
-        if (a) {
-          n.textContent = a.textContent, s.forEach((u) => u.removeAttribute("aria-selected")), a.setAttribute("aria-selected", "true");
-          const h = a.id || `${this.selectors.idPrefix}${c}`;
-          e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), i.value = String(s[c].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
+  items(e, s, i, a, t) {
+    i.forEach((d, n) => {
+      d.addEventListener("click", () => {
+        const r = i[n];
+        if (r) {
+          a.textContent = r.textContent, i.forEach((c) => c.removeAttribute("aria-selected")), r.setAttribute("aria-selected", "true");
+          const v = r.id || `${this.selectors.idPrefix}${n}`;
+          e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", v), t.value = String(i[n].dataset.value), this.costomEvent(e, t.value), this.close(e, s);
         }
       });
     });
   }
-  defaultSelect(e, t, s, n) {
-    t && (n.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
+  defaultSelect(e, s, i, a) {
+    s && (a.setAttribute("value", s.dataset.value ?? ""), i.textContent = s.textContent ?? "", e.setAttribute("aria-activedescendant", s.id || ""));
   }
-  costomEvent(e, t) {
+  costomEvent(e, s) {
     e.dispatchEvent(
       new CustomEvent("change", {
-        detail: { val: t },
+        detail: { val: s },
         bubbles: !0
       })
     );
   }
-  toggle(e, t) {
-    p.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
+  toggle(e, s) {
+    w.closeAll(this.selectors), s.hidden ? (s.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, s);
   }
-  close(e, t) {
-    t.hidden = !0, e.setAttribute("aria-expanded", "false");
+  close(e, s) {
+    s.hidden = !0, e.setAttribute("aria-expanded", "false");
   }
   static closeAll(e) {
-    document.querySelectorAll(`.${e.main}`).forEach((t) => {
-      const s = t.querySelector(`.${e.optionsList}`);
-      s.hidden = !0, t.setAttribute("aria-expanded", "false");
+    document.querySelectorAll(`.${e.main}`).forEach((s) => {
+      const i = s.querySelector(`.${e.optionsList}`);
+      i.hidden = !0, s.setAttribute("aria-expanded", "false");
     });
   }
   static initGlobalListener(e) {
-    window.__UIselectGlobalClickInitialized || (document.addEventListener("click", (t) => {
-      const s = t.target;
+    window.__UIselectGlobalClickInitialized || (document.addEventListener("click", (s) => {
+      const i = s.target;
       [...document.querySelectorAll(`.${e.main}`)].some(
-        (i) => i.contains(s)
-      ) || p.closeAll(e);
+        (t) => t.contains(i)
+      ) || w.closeAll(e);
     }), window.__UIselectGlobalClickInitialized = !0);
   }
 }
 export {
-  p as Select,
+  w as Select,
   G as SpinBox,
   T as Switch
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(o,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(o=typeof globalThis<"u"?globalThis:o||self,u(o.UiElements={}))})(this,function(o){"use strict";var _=Object.defineProperty;var F=o=>{throw TypeError(o)};var z=(o,u,h)=>u in o?_(o,u,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[u]=h;var A=(o,u,h)=>z(o,typeof u!="symbol"?u+"":u,h),B=(o,u,h)=>u.has(o)||F("Cannot "+h);var p=(o,u,h)=>(B(o,u,"read from private field"),h?h.call(o):u.get(o)),x=(o,u,h)=>u.has(o)?F("Cannot add the same private member more than once"):u instanceof WeakSet?u.add(o):u.set(o,h);var I=(o,u,h)=>(B(o,u,"access private method"),h);var m,w,E,K,k,P;class u{constructor(e={}){x(this,E);A(this,"selectors");A(this,"spinBoxes");x(this,m,(e,i,t,a=0,s=0)=>{e==a||e<a?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),s!==0&&(e==s||e>s?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1))});x(this,w,(e,i)=>{const t=e.getAttribute(`data-${i}`);return t===null||t.trim()===""||isNaN(Number(t))?0:Number(t)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),I(this,E,K).call(this)}}m=new WeakMap,w=new WeakMap,E=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const i=e.querySelectorAll(`.${this.selectors.btn}`),t=i[0],a=i[1],s=e.querySelector(`.${this.selectors.input}`),r=Number(e.dataset.step),d=Number(e.dataset.min),n=p(this,w).call(this,e,"max"),v=c=>{e.setAttribute("aria-valuenow",String(c)),e.setAttribute("aria-valuetext",`${c} items`)};Number(s.value)<=d&&(s.value=d.toFixed(r)),n!==0?(Number(s.value)>=n&&(s.value=n.toFixed(r)),n&&e.setAttribute("aria-valuemax",n.toFixed(r))):s.value=Number(s.value).toFixed(r),d&&e.setAttribute("aria-valuemin",d.toFixed(r)),p(this,m).call(this,Number(s.value),t,a,d,n),v(s.value);let f=null;const b=(c=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l+1*c/Math.pow(10,r),l>n&&n!==0&&(l=n),s.value=l.toFixed(r),p(this,m).call(this,Number(s.value),t,a,d,n),v(s.value)},g=(c=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l-1*c/Math.pow(10,r),l<d&&(l=d),s.value=l.toFixed(r),p(this,m).call(this,Number(s.value),t,a,d,n),v(s.value)},S=(c,l=150)=>{f===null&&(f=window.setInterval(c,l))},$=()=>{f!==null&&(clearInterval(f),f=null)};a.addEventListener("mousedown",c=>{const l=c.shiftKey?3:1;S(()=>b(l))}),a.addEventListener("touchstart",()=>S(b)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(c=>{a.addEventListener(c,$)}),a.addEventListener("click",c=>{const l=c.shiftKey?3:1;f===null&&b(l)}),t.addEventListener("click",c=>{const l=c.shiftKey?3:1;f===null&&g(l)}),t.addEventListener("mousedown",c=>{const l=c.shiftKey?3:1;S(()=>g(l),100)}),t.addEventListener("touchstart",()=>S(g,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(c=>{t.addEventListener(c,$)}),s.addEventListener("keydown",c=>{const l=c.key,M=c.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(l)||(c.ctrlKey||c.metaKey)&&["a","c","v","x"].includes(l.toLowerCase()))return;if(["e","+","-"].includes(l)){c.preventDefault();return}if(l==="ArrowUp"||l==="ArrowDown"){c.preventDefault();const U=parseFloat(s.value)||0,D=1*M/Math.pow(10,r);let L=l==="ArrowUp"?U+D:U-D;L<d&&(L=d),s.value=L.toFixed(r),Number(s.value)<d&&(s.value=d.toFixed(r)),Number(s.value)>n&&n!==0&&(s.value=n.toFixed(r)),p(this,m).call(this,Number(s.value),t,a,d,n),v(s.value);return}const N=l===","?".":l,q=/^[0-9]$/.test(N),C=N===".",V=s.value.includes(".");(r===0&&!q||r>0&&!(q||C)||C&&V)&&c.preventDefault()}),s.addEventListener("change",()=>{Number(s.value)<d&&(s.value=d.toFixed(r)),Number(s.value)>n&&n!==0?s.value=n.toFixed(r):s.value=Number(s.value).toFixed(r),p(this,m).call(this,Number(s.value),t,a,d,n)})})};class h{constructor(e={}){x(this,k);A(this,"selectors");A(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),I(this,k,P).call(this)}}k=new WeakSet,P=function(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.label}`),t=e.querySelector("input");i&&i.id&&e.setAttribute("aria-labelledby",i.id),t&&(t.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{t.checked=!t.checked,e.setAttribute("aria-checked",String(t.checked))}),e.addEventListener("keydown",s=>{s.key==="ArrowRight"?(t.checked=!0,a(String(t.checked)),s.preventDefault()):s.key==="ArrowLeft"&&(t.checked=!1,a(String(t.checked)),s.preventDefault())}));const a=s=>{e.setAttribute("aria-checked",String(s))}})};class y{constructor(e={}){A(this,"selectors");A(this,"main");const i={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",excludedItems:["divider","test"]};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),y.initGlobalListener(this.selectors)}filterExcluded(e,i){return Array.from(e).filter(t=>!i.some(a=>typeof a=="string"?t.classList.contains(a)||t.id===a:t===a))}event(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!i)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(v){return console.warn("Not found:",v.message)}const t=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),s=e.querySelector(`.${this.selectors.optionsList}`);a&&a.addEventListener("click",()=>{this.toggle(e,s)}),t.addEventListener("click",()=>{this.toggle(e,s)}),e.addEventListener("click",()=>{this.itemsPosition(s)});const r=s.querySelectorAll("li"),d=this.filterExcluded(r,this.selectors.excludedItems),n=e.querySelector("[aria-selected='true']");n&&this.defaultSelect(e,n,t,i),this.itemArrow(e,s,d,t,i),this.items(e,s,d,t,i)})}itemArrow(e,i,t,a,s){let r=-1;const d=a.textContent?a.textContent:"";e.addEventListener("keydown",n=>{const v=t.length;if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,i),r=(r+1)%v,a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),t[r].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),r=(r-1+v)%v,a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),t[r].scrollIntoView({block:"nearest"})}else if(n.key==="Enter"||n.key===" ")if(n.preventDefault(),r>=0){a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),s.value=String(t[r].dataset.value),this.costomEvent(e,s.value),this.close(e,i)}else this.toggle(e,i);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(a.textContent=d),this.close(e,i))})}itemsPosition(e){const i=e.querySelector('[aria-selected="true"]');i&&i.scrollIntoView({block:"nearest"})}items(e,i,t,a,s){t.forEach((r,d)=>{r.addEventListener("click",()=>{const n=t[d];if(n){a.textContent=n.textContent,t.forEach(f=>f.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const v=n.id||`${this.selectors.idPrefix}${d}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",v),s.value=String(t[d].dataset.value),this.costomEvent(e,s.value),this.close(e,i)}})})}defaultSelect(e,i,t,a){i&&(a.setAttribute("value",i.dataset.value??""),t.textContent=i.textContent??"",e.setAttribute("aria-activedescendant",i.id||""))}costomEvent(e,i){e.dispatchEvent(new CustomEvent("change",{detail:{val:i},bubbles:!0}))}toggle(e,i){y.closeAll(this.selectors),i.hidden?(i.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,i)}close(e,i){i.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(i=>{const t=i.querySelector(`.${e.optionsList}`);t.hidden=!0,i.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",i=>{const t=i.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(t))||y.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}o.Select=y,o.SpinBox=u,o.Switch=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.UiElements={}))})(this,function(d){"use strict";var M=Object.defineProperty;var F=d=>{throw TypeError(d)};var V=(d,h,f)=>h in d?M(d,h,{enumerable:!0,configurable:!0,writable:!0,value:f}):d[h]=f;var w=(d,h,f)=>V(d,typeof h!="symbol"?h+"":h,f),B=(d,h,f)=>h.has(d)||F("Cannot "+f);var x=(d,h,f)=>(B(d,h,"read from private field"),f?f.call(d):h.get(d)),S=(d,h,f)=>h.has(d)?F("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(d):h.set(d,f);var $=(d,h,f)=>(B(d,h,"access private method"),f);var A,k,g,K,L,_;class h{constructor(e={}){S(this,g);w(this,"selectors");w(this,"spinBoxes");S(this,A,(e,i,s,a=0,t=0)=>{e==a||e<a?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),t!==0&&(e==t||e>t?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))});S(this,k,(e,i)=>{const s=e.getAttribute(`data-${i}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),$(this,g,K).call(this)}}A=new WeakMap,k=new WeakMap,g=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const i=e.querySelectorAll(`.${this.selectors.btn}`),s=i[0],a=i[1],t=e.querySelector(`.${this.selectors.input}`),u=Number(e.dataset.step),l=Number(e.dataset.min),r=x(this,k).call(this,e,"max"),b=n=>{e.setAttribute("aria-valuenow",String(n)),e.setAttribute("aria-valuetext",`${n} items`)};Number(t.value)<=l&&(t.value=l.toFixed(u)),r!==0?(Number(t.value)>=r&&(t.value=r.toFixed(u)),r&&e.setAttribute("aria-valuemax",r.toFixed(u))):t.value=Number(t.value).toFixed(u),l&&e.setAttribute("aria-valuemin",l.toFixed(u)),x(this,A).call(this,Number(t.value),s,a,l,r),b(t.value);let c=null;const m=(n=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o+1*n/Math.pow(10,u),o>r&&r!==0&&(o=r),t.value=o.toFixed(u),x(this,A).call(this,Number(t.value),s,a,l,r),b(t.value)},p=(n=1)=>{t.value=String(Math.abs(Number(t.value)));let o=parseFloat(t.value)||0;o=o-1*n/Math.pow(10,u),o<l&&(o=l),t.value=o.toFixed(u),x(this,A).call(this,Number(t.value),s,a,l,r),b(t.value)},v=(n,o=150)=>{c===null&&(c=window.setInterval(n,o))},y=()=>{c!==null&&(clearInterval(c),c=null)};a.addEventListener("mousedown",n=>{const o=n.shiftKey?3:1;v(()=>m(o))}),a.addEventListener("touchstart",()=>v(m)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(n=>{a.addEventListener(n,y)}),a.addEventListener("click",n=>{const o=n.shiftKey?3:1;c===null&&m(o)}),s.addEventListener("click",n=>{const o=n.shiftKey?3:1;c===null&&p(o)}),s.addEventListener("mousedown",n=>{const o=n.shiftKey?3:1;v(()=>p(o),100)}),s.addEventListener("touchstart",()=>v(p,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(n=>{s.addEventListener(n,y)}),t.addEventListener("keydown",n=>{const o=n.key,z=n.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(o)||(n.ctrlKey||n.metaKey)&&["a","c","v","x"].includes(o.toLowerCase()))return;if(["e","+","-"].includes(o)){n.preventDefault();return}if(o==="ArrowUp"||o==="ArrowDown"){n.preventDefault();const U=parseFloat(t.value)||0,D=1*z/Math.pow(10,u);let I=o==="ArrowUp"?U+D:U-D;I<l&&(I=l),t.value=I.toFixed(u),Number(t.value)<l&&(t.value=l.toFixed(u)),Number(t.value)>r&&r!==0&&(t.value=r.toFixed(u)),x(this,A).call(this,Number(t.value),s,a,l,r),b(t.value);return}const C=o===","?".":o,q=/^[0-9]$/.test(C),N=C===".",T=t.value.includes(".");(u===0&&!q||u>0&&!(q||N)||N&&T)&&n.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<l&&(t.value=l.toFixed(u)),Number(t.value)>r&&r!==0?t.value=r.toFixed(u):t.value=Number(t.value).toFixed(u),x(this,A).call(this,Number(t.value),s,a,l,r)})})};class f{constructor(e={}){S(this,L);w(this,"selectors");w(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),$(this,L,_).call(this)}}L=new WeakSet,_=function(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.label}`),s=e.querySelector("input");i&&i.id&&e.setAttribute("aria-labelledby",i.id),s&&(s.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{s.checked=!s.checked,e.setAttribute("aria-checked",String(s.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(s.checked=!0,a(String(s.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(s.checked=!1,a(String(s.checked)),t.preventDefault())}));const a=t=>{e.setAttribute("aria-checked",String(t))}})};class E{constructor(e={}){w(this,"selectors");w(this,"main");w(this,"itemArrowInitialized",new WeakSet);const i={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",search:"UIselect-options__search",items:"UIselect-options__items",excludedItems:["divider","test"]};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),E.initGlobalListener(this.selectors)}filterExcluded(e,i){return Array.from(e).filter(s=>!i.some(a=>typeof a=="string"?s.classList.contains(a)||s.id===a:s===a))}filterSearch(e,i){const s=i.trim().toLowerCase();return e.filter(a=>{var l,r;const t=((l=a.dataset.value)==null?void 0:l.toLowerCase())||"",u=((r=a.textContent)==null?void 0:r.toLowerCase())||"";return t.includes(s)||u.includes(s)})}event(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!i)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const s=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),t=e.querySelector(`.${this.selectors.optionsList}`),u=e.querySelector(`.${this.selectors.search} input`);a&&a.addEventListener("click",()=>{this.toggle(e,t)}),s.addEventListener("click",()=>{this.toggle(e,t)}),e.addEventListener("click",()=>{this.itemsPosition(t)});const l=t.querySelectorAll(`.${this.selectors.items} ul li`),r=this.filterExcluded(l,this.selectors.excludedItems),b=e.querySelector("[aria-selected='true']");b&&this.defaultSelect(e,b,s,i);var c=[];u&&u.addEventListener("input",m=>{const v=m.target.value.trim();s&&(c=this.filterSearch(r,v),v?(l.forEach(y=>y.remove()),c.forEach(y=>{var n;(n=t.querySelector(`.${this.selectors.optionsList} ul`))==null||n.appendChild(y)})):l.forEach(y=>{var n;(n=t.querySelector(`.${this.selectors.optionsList} ul`))==null||n.appendChild(y)}),this.itemArrow(e,t,s,i))}),this.itemArrow(e,t,s,i),this.items(e,t,r,s,i)})}itemArrow(e,i,s,a){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let t=-1;const u=s.textContent?s.textContent:"",l=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",r=>{l&&l.focus();const b=Array.from(i.querySelectorAll(`.${this.selectors.optionsList} ul li`)),c=this.filterExcluded(b,this.selectors.excludedItems),m=c.length;if(m!==0)if(r.key==="ArrowDown"){r.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,i),t=(t+1)%m,s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="ArrowUp"){r.preventDefault(),t=(t-1+m)%m,s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),c[t].scrollIntoView({block:"nearest"})}else if(r.key==="Enter")if(r.preventDefault(),t>=0){s.textContent=c[t].textContent,c.forEach(v=>v.removeAttribute("aria-selected")),c[t].setAttribute("aria-selected","true");const p=c[t].id||`${this.selectors.idPrefix}${t}`;e.setAttribute("aria-activedescendant",p),a.value=String(c[t].dataset.value),this.costomEvent(e,a.value),this.close(e,i)}else this.toggle(e,i);else r.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=u),this.close(e,i))})}itemsPosition(e){const i=e.querySelector('[aria-selected="true"]');i&&i.scrollIntoView({block:"nearest"})}items(e,i,s,a,t){s.forEach((u,l)=>{u.addEventListener("click",()=>{const r=s[l];if(r){a.textContent=r.textContent,s.forEach(c=>c.removeAttribute("aria-selected")),r.setAttribute("aria-selected","true");const b=r.id||`${this.selectors.idPrefix}${l}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",b),t.value=String(s[l].dataset.value),this.costomEvent(e,t.value),this.close(e,i)}})})}defaultSelect(e,i,s,a){i&&(a.setAttribute("value",i.dataset.value??""),s.textContent=i.textContent??"",e.setAttribute("aria-activedescendant",i.id||""))}costomEvent(e,i){e.dispatchEvent(new CustomEvent("change",{detail:{val:i},bubbles:!0}))}toggle(e,i){E.closeAll(this.selectors),i.hidden?(i.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,i)}close(e,i){i.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(i=>{const s=i.querySelector(`.${e.optionsList}`);s.hidden=!0,i.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",i=>{const s=i.target;[...document.querySelectorAll(`.${e.main}`)].some(t=>t.contains(s))||E.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}d.Select=E,d.SpinBox=h,d.Switch=f,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-.UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--c-g-500)}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-700);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-300);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%}.UIselect-arrow{position:absolute;top:.5rem;right:.5rem}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background:var(--c-g-900);color:var(--c-g-100);z-index:2;max-height:10rem;overflow-y:auto;left:0;box-sizing:border-box}.UIselect-options>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options>li:hover{background:var(--c-g-700);color:var(--c-g-50)}.UIselect-options>li[aria-selected=true]{background:var(--c-g-500);color:var(--c-g-950)}.UIselect-options>li.divider{height:1px;background-color:var(--c-g-500);margin:0 .25rem}.UIselect.r-0{border-radius:0}.UIselect.r-0>.UIselect-selected{border-radius:0}.UIselect.r-0>.UIselect-options{border-radius:0}.UIselect.r-0>.UIselect-options>li{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.lg{width:15rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-arrow{top:.7rem;right:.8rem}.UIselect.lg>.UIselect-options{max-height:25rem}.UIselect.lg>.UIselect-options>li{height:3rem}.UIselect.lg>.UIselect-options>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;height:2rem;font-size:.9rem}.UIselect.sm>.UIselect-arrow{top:.3rem;right:.5rem}.UIselect.sm>.UIselect-options{max-height:15rem}.UIselect.sm>.UIselect-options>li{height:2rem}.UIselect.sm>.UIselect-options>li.divider{height:1px;margin:0 .25rem}.UIselect.danger{background-color:var(--c-d-700)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-300);color:var(--c-d-700)}.UIselect.danger>.UIselect-options{background-color:var(--c-d-900)}.UIselect.danger>.UIselect-options>li{color:var(--c-d-50)}.UIselect.danger>.UIselect-options>li:hover{background:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-options>li[aria-selected=true]{background:var(--c-d-500);color:var(--c-d-950)}.UIselect.danger>.UIselect-options>li.divider{height:1px;background-color:var(--c-d-500)}.UIselect.info{background-color:var(--c-i-700)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-300);color:var(--c-i-700)}.UIselect.info>.UIselect-options{background-color:var(--c-i-900)}.UIselect.info>.UIselect-options>li{color:var(--c-i-50)}.UIselect.info>.UIselect-options>li:hover{background:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-options>li[aria-selected=true]{background:var(--c-i-500);color:var(--c-i-950)}.UIselect.info>.UIselect-options>li.divider{height:1px;background-color:var(--c-i-500)}.UIselect.primary{background-color:var(--c-p-700)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-300);color:var(--c-p-700)}.UIselect.primary>.UIselect-options{background-color:var(--c-p-900)}.UIselect.primary>.UIselect-options>li{color:var(--c-p-50)}.UIselect.primary>.UIselect-options>li:hover{background:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-options>li[aria-selected=true]{background:var(--c-p-500);color:var(--c-p-950)}.UIselect.primary>.UIselect-options>li.divider{height:1px;background-color:var(--c-p-500)}.UIselect.success{background-color:var(--c-s-700)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-300);color:var(--c-s-700)}.UIselect.success>.UIselect-options{background-color:var(--c-s-900)}.UIselect.success>.UIselect-options>li{color:var(--c-s-50)}.UIselect.success>.UIselect-options>li:hover{background:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-options>li[aria-selected=true]{background:var(--c-s-500);color:var(--c-s-950)}.UIselect.success>.UIselect-options>li.divider{height:1px;background-color:var(--c-s-500)}.UIselect.warning{background-color:var(--c-w-700)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-300);color:var(--c-w-700)}.UIselect.warning>.UIselect-options{background-color:var(--c-w-900)}.UIselect.warning>.UIselect-options>li{color:var(--c-w-50)}.UIselect.warning>.UIselect-options>li:hover{background:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-options>li[aria-selected=true]{background:var(--c-w-500);color:var(--c-w-950)}.UIselect.warning>.UIselect-options>li.divider{height:1px;background-color:var(--c-w-500)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .3s ease;cursor:pointer;border:1px solid var(--c-g-300)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-300);border-radius:1.5rem;transition:transform .3s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.5rem;right:3.3rem;color:var(--c-g-900);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-300);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;top:.6rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;top:.8rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.2rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-900)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-700)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-300);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-900)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-700)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-300);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-900)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-700)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-300);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-900)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-700)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-300);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-900)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-700)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-300);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}
+.UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--c-g-500)}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-500);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box;white-space:nowrap;min-width:10rem}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-100);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;height:100%;width:1.5rem;background-color:transparent}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background-color:var(--c-g-100);color:var(--c-g-950);z-index:2;overflow:hidden;left:0;box-sizing:border-box;border:1px solid var(--c-g-500)}.UIselect-options__search{position:sticky;top:1px;padding:1px 2px}.UIselect-options__search>input{padding:0 2px;width:calc(100% - 6px);height:inherit;border:1px solid var(--c-g-300);border-radius:.5rem;box-shadow:none;font-size:1.5rem;background-color:var(--c-g-50);color:var(--c-g-950)}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{padding:0;margin:0;list-style:none}.UIselect-options__items>ul>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options__items>ul>li:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-g-300);color:var(--c-g-950)}.UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-g-300);margin:0 .25rem}.UIselect.r-0{border-radius:0}.UIselect.r-0>.UIselect-selected{border-radius:0}.UIselect.r-0>.UIselect-options{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input{border-radius:0}.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.danger{background-color:var(--c-d-500)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-100);color:var(--c-d-900)}.UIselect.danger .UIselect-options{background-color:var(--c-d-100);border-color:var(--c-d-500)}.UIselect.danger .UIselect-options__search>input{border-color:var(--c-d-300);background-color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li{color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-d-300);color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-d-300)}.UIselect.info{background-color:var(--c-i-500)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-100);color:var(--c-i-900)}.UIselect.info .UIselect-options{background-color:var(--c-i-100);border-color:var(--c-i-500)}.UIselect.info .UIselect-options__search>input{border-color:var(--c-i-300);background-color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li{color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-i-300);color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-i-300)}.UIselect.primary{background-color:var(--c-p-500)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-100);color:var(--c-p-900)}.UIselect.primary .UIselect-options{background-color:var(--c-p-100);border-color:var(--c-p-500)}.UIselect.primary .UIselect-options__search>input{border-color:var(--c-p-300);background-color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li{color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-p-300);color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-p-300)}.UIselect.success{background-color:var(--c-s-500)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-100);color:var(--c-s-900)}.UIselect.success .UIselect-options{background-color:var(--c-s-100);border-color:var(--c-s-500)}.UIselect.success .UIselect-options__search>input{border-color:var(--c-s-300);background-color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li{color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-s-300);color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-s-300)}.UIselect.warning{background-color:var(--c-w-500)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-100);color:var(--c-w-900)}.UIselect.warning .UIselect-options{background-color:var(--c-w-100);border-color:var(--c-w-500)}.UIselect.warning .UIselect-options__search>input{border-color:var(--c-w-300);background-color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li{color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-w-300);color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-w-300)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .3s ease;cursor:pointer;border:1px solid var(--c-g-300)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-300);border-radius:1.5rem;transition:transform .3s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.5rem;right:3.3rem;color:var(--c-g-900);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-300);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;top:.6rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;top:.8rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.2rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-900)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-700)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-300);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-900)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-700)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-300);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-900)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-700)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-300);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-900)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-700)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-300);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-900)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-700)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-300);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}

package/package.json

@@ -2,7 +2,7 @@
   "author": "Andrii Popov",
   "name": "@popovandrii/ui-elements",
   "description": "User interface elements. Color scheme. Elements with complex logic Java Script. Contrasting UI elements.",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "MIT",
   "keywords": [
     "spinbox",