@popovandrii/ui-elements 0.0.20 → 0.0.22

package/README.md

@@ -100,6 +100,8 @@ Abbreviation of the base (main) class of each element:<br>
 
 #### [Button group (radio)](/docs/button-group-radio/README.md)
 
+#### [Button (button)](/docs/button/README.md)
+
 
 #### Spin-Box
  This is a field with two buttons.<br> 

package/dist/Button.d.ts

@@ -0,0 +1,13 @@
+interface SelectorMap {
+    main: string;
+}
+export declare class Button {
+    #private;
+    private selectors;
+    private buttons;
+    private abortController;
+    constructor(selectors?: Partial<SelectorMap>);
+    destroy(): void;
+    private costomEvent;
+}
+export {};

package/dist/Select.d.ts

@@ -1,8 +1,3 @@
-declare global {
-    interface Window {
-        __UIselectGlobalClickInitialized?: boolean;
-    }
-}
 interface SelectorMap {
     idPrefix: string;
     main: string;
@@ -17,9 +12,11 @@ export declare class Select {
     private selectors;
     private main;
     private itemArrowInitialized;
+    private abortController;
     constructor(selectors?: Partial<SelectorMap>);
     private filterExcluded;
     private filterSearch;
+    destroy(): void;
     private event;
     private itemArrow;
     private itemsPosition;
@@ -29,6 +26,6 @@ export declare class Select {
     private toggle;
     private close;
     static closeAll(map: SelectorMap): void;
-    static initGlobalListener(map: SelectorMap): void;
+    private initGlobalListener;
 }
 export {};

package/dist/index.cjs.js

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

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { SpinBox } from './SpinBox';
 export { Switch } from './Switch';
 export { Select } from './Select';
 export { ButtonGroup } from './ButtonGroup';
+export { Button } from './Button';

package/dist/index.es.js

@@ -1,23 +1,23 @@
-var z = Object.defineProperty;
-var U = (u) => {
-  throw TypeError(u);
+var _ = Object.defineProperty;
+var F = (d) => {
+  throw TypeError(d);
 };
-var P = (u, e, s) => e in u ? z(u, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[e] = s;
-var v = (u, e, s) => P(u, typeof e != "symbol" ? e + "" : e, s), D = (u, e, s) => e.has(u) || U("Cannot " + s);
-var p = (u, e, s) => (D(u, e, "read from private field"), s ? s.call(u) : e.get(u)), x = (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 E = (u, e, s) => (D(u, e, "access private method"), s);
-var y, w, F;
-class T {
+var T = (d, e, s) => e in d ? _(d, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : d[e] = s;
+var f = (d, e, s) => T(d, typeof e != "symbol" ? e + "" : e, s), B = (d, e, s) => e.has(d) || F("Cannot " + s);
+var y = (d, e, s) => (B(d, e, "read from private field"), s ? s.call(d) : e.get(d)), p = (d, e, s) => e.has(d) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(d) : e.set(d, s);
+var g = (d, e, s) => (B(d, e, "access private method"), s);
+var A, w, K;
+class H {
   constructor(e = {}) {
-    x(this, w);
-    v(this, "selectors");
-    v(this, "spinBoxes");
-    x(this, y, (e, s, i, n = 0, t = 0) => {
-      e == n || e < n ? (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));
+    p(this, w);
+    f(this, "selectors");
+    f(this, "spinBoxes");
+    p(this, A, (e, s, r, 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 ? (r.classList.add(this.selectors.disabledBtn), r.disabled = !0) : (r.classList.remove(this.selectors.disabledBtn), r.disabled = !1));
     });
-    v(this, "getValidDataNumber", (e, s) => {
-      const i = e.getAttribute(`data-${s}`);
-      return i === null || i.trim() === "" || isNaN(Number(i)) ? 0 : Number(i);
+    f(this, "getValidDataNumber", (e, s) => {
+      const r = e.getAttribute(`data-${s}`);
+      return r === null || r.trim() === "" || isNaN(Number(r)) ? 0 : Number(r);
     });
     const s = {
       main: "UIsp",
@@ -27,55 +27,55 @@ class T {
     };
     this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), E(this, w, F).call(this);
+    ), g(this, w, K).call(this);
   }
 }
-y = new WeakMap(), w = new WeakSet(), F = function() {
+A = new WeakMap(), w = new WeakSet(), K = function() {
   this.spinBoxes.forEach((e) => {
     const s = e.querySelectorAll(
       `.${this.selectors.btn}`
-    ), i = s[0], n = s[1], t = e.querySelector(
+    ), r = s[0], a = s[1], t = e.querySelector(
       `.${this.selectors.input}`
-    ), l = this.getValidDataNumber(e, "step"), r = this.getValidDataNumber(e, "min"), a = this.getValidDataNumber(e, "max"), h = (o) => {
-      e.setAttribute("aria-valuenow", String(o)), e.setAttribute("aria-valuetext", `${o} items`);
+    ), l = this.getValidDataNumber(e, "step"), i = this.getValidDataNumber(e, "min"), o = this.getValidDataNumber(e, "max"), h = (u) => {
+      e.setAttribute("aria-valuenow", String(u)), e.setAttribute("aria-valuetext", `${u} items`);
     };
-    Number(t.value) <= r && (t.value = r.toFixed(l)), a !== 0 ? (Number(t.value) >= a && (t.value = a.toFixed(l)), a && e.setAttribute("aria-valuemax", a.toFixed(l))) : t.value = Number(t.value).toFixed(l), r && e.setAttribute("aria-valuemin", r.toFixed(l)), p(this, y).call(this, Number(t.value), i, n, r, a), h(t.value);
+    Number(t.value) <= i && (t.value = i.toFixed(l)), o !== 0 ? (Number(t.value) >= o && (t.value = o.toFixed(l)), o && e.setAttribute("aria-valuemax", o.toFixed(l))) : t.value = Number(t.value).toFixed(l), i && e.setAttribute("aria-valuemin", i.toFixed(l)), y(this, A).call(this, Number(t.value), r, a, i, o), h(t.value);
     let c = null;
-    const b = (o = 1) => {
+    const m = (u = 1) => {
       t.value = String(Math.abs(Number(t.value)));
-      let d = parseFloat(t.value) || 0;
-      d = d + 1 * o / Math.pow(10, l), d > a && a !== 0 && (d = a), t.value = d.toFixed(l), p(this, y).call(this, Number(t.value), i, n, r, a), h(t.value);
-    }, m = (o = 1) => {
+      let n = parseFloat(t.value) || 0;
+      n = n + 1 * u / Math.pow(10, l), n > o && o !== 0 && (n = o), t.value = n.toFixed(l), y(this, A).call(this, Number(t.value), r, a, i, o), h(t.value);
+    }, v = (u = 1) => {
       t.value = String(Math.abs(Number(t.value)));
-      let d = parseFloat(t.value) || 0;
-      d = d - 1 * o / Math.pow(10, l), d < r && (d = r), t.value = d.toFixed(l), p(this, y).call(this, Number(t.value), i, n, r, a), h(t.value);
-    }, f = (o, d = 150) => {
-      c === null && (c = window.setInterval(o, d));
-    }, A = () => {
+      let n = parseFloat(t.value) || 0;
+      n = n - 1 * u / Math.pow(10, l), n < i && (n = i), t.value = n.toFixed(l), y(this, A).call(this, Number(t.value), r, a, i, o), h(t.value);
+    }, b = (u, n = 150) => {
+      c === null && (c = window.setInterval(u, n));
+    }, L = () => {
       c !== null && (clearInterval(c), c = null);
     };
-    n.addEventListener("mousedown", (o) => {
-      const d = o.shiftKey ? 3 : 1;
-      f(() => b(d));
-    }), n.addEventListener("touchstart", () => f(b)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (o) => {
-        n.addEventListener(o, A);
+    a.addEventListener("mousedown", (u) => {
+      const n = u.shiftKey ? 3 : 1;
+      b(() => m(n));
+    }), a.addEventListener("touchstart", () => b(m)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (u) => {
+        a.addEventListener(u, L);
       }
-    ), n.addEventListener("click", (o) => {
-      const d = o.shiftKey ? 3 : 1;
-      c === null && b(d);
-    }), i.addEventListener("click", (o) => {
-      const d = o.shiftKey ? 3 : 1;
-      c === null && m(d);
-    }), i.addEventListener("mousedown", (o) => {
-      const d = o.shiftKey ? 3 : 1;
-      f(() => m(d), 100);
-    }), i.addEventListener("touchstart", () => f(m, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (o) => {
-        i.addEventListener(o, A);
+    ), a.addEventListener("click", (u) => {
+      const n = u.shiftKey ? 3 : 1;
+      c === null && m(n);
+    }), r.addEventListener("click", (u) => {
+      const n = u.shiftKey ? 3 : 1;
+      c === null && v(n);
+    }), r.addEventListener("mousedown", (u) => {
+      const n = u.shiftKey ? 3 : 1;
+      b(() => v(n), 100);
+    }), r.addEventListener("touchstart", () => b(v, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (u) => {
+        r.addEventListener(u, L);
       }
-    ), t.addEventListener("keydown", (o) => {
-      const d = o.key, V = o.shiftKey ? 3 : 1;
+    ), t.addEventListener("keydown", (u) => {
+      const n = u.key, E = u.shiftKey ? 3 : 1;
       if ([
         "Backspace",
         "Delete",
@@ -85,59 +85,60 @@ y = new WeakMap(), w = new WeakSet(), F = function() {
         "Enter",
         "Home",
         "End"
-      ].includes(d) || (o.ctrlKey || o.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
+      ].includes(n) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(n.toLowerCase()))
         return;
-      if (["e", "+", "-"].includes(d)) {
-        o.preventDefault();
+      if (["e", "+", "-"].includes(n)) {
+        u.preventDefault();
         return;
       }
-      if (d === "ArrowUp" || d === "ArrowDown") {
-        o.preventDefault();
-        const C = parseFloat(t.value) || 0, N = 1 * V / Math.pow(10, l);
-        let L = d === "ArrowUp" ? C + N : C - N;
-        L < r && (L = r), t.value = L.toFixed(l), Number(t.value) < r && (t.value = r.toFixed(l)), Number(t.value) > a && a !== 0 && (t.value = a.toFixed(l)), p(this, y).call(this, Number(t.value), i, n, r, a), h(t.value);
+      if (n === "ArrowUp" || n === "ArrowDown") {
+        u.preventDefault();
+        const U = parseFloat(t.value) || 0, D = 1 * E / Math.pow(10, l);
+        let $ = n === "ArrowUp" ? U + D : U - D;
+        $ < i && ($ = i), t.value = $.toFixed(l), Number(t.value) < i && (t.value = i.toFixed(l)), Number(t.value) > o && o !== 0 && (t.value = o.toFixed(l)), y(this, A).call(this, Number(t.value), r, a, i, o), h(t.value);
         return;
       }
-      const I = d === "," ? "." : d, $ = /^[0-9]$/.test(I), q = I === ".", _ = t.value.includes(".");
-      (l === 0 && !$ || l > 0 && !($ || q) || q && _) && o.preventDefault();
+      const I = n === "," ? "." : n, q = /^[0-9]$/.test(I), N = I === ".", M = t.value.includes(".");
+      (l === 0 && !q || l > 0 && !(q || N) || N && M) && u.preventDefault();
     }), t.addEventListener("change", () => {
-      Number(t.value) < r && (t.value = r.toFixed(l)), Number(t.value) > a && a !== 0 ? t.value = a.toFixed(l) : t.value = Number(t.value).toFixed(l), p(this, y).call(this, Number(t.value), i, n, r, a);
+      Number(t.value) < i && (t.value = i.toFixed(l)), Number(t.value) > o && o !== 0 ? t.value = o.toFixed(l) : t.value = Number(t.value).toFixed(l), y(this, A).call(this, Number(t.value), r, a, i, o);
     });
   });
 };
-var g, B;
-class R {
+var k, V;
+class O {
   constructor(e = {}) {
-    x(this, g);
-    v(this, "selectors");
-    v(this, "main");
+    p(this, k);
+    f(this, "selectors");
+    f(this, "main");
     const s = {
       main: "UIsw",
       label: "UIsw-label"
     };
     this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), E(this, g, B).call(this);
+    ), g(this, k, V).call(this);
   }
 }
-g = new WeakSet(), B = function() {
+k = new WeakSet(), V = 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));
+    const s = e.querySelector(`.${this.selectors.label}`), r = e.querySelector("input");
+    s && s.id && e.setAttribute("aria-labelledby", s.id), r && (r.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
+      r.checked = !r.checked, e.setAttribute("aria-checked", String(r.checked));
     }), e.addEventListener("keydown", (t) => {
-      t.key === "ArrowRight" ? (i.checked = !0, n(String(i.checked)), t.preventDefault()) : t.key === "ArrowLeft" && (i.checked = !1, n(String(i.checked)), t.preventDefault());
+      t.key === "ArrowRight" ? (r.checked = !0, a(String(r.checked)), t.preventDefault()) : t.key === "ArrowLeft" && (r.checked = !1, a(String(r.checked)), t.preventDefault());
     }));
-    const n = (t) => {
+    const a = (t) => {
       e.setAttribute("aria-checked", String(t));
     };
   });
 };
-class k {
+class x {
   constructor(e = {}) {
-    v(this, "selectors");
-    v(this, "main");
-    v(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
+    f(this, "selectors");
+    f(this, "main", null);
+    f(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
+    f(this, "abortController", new AbortController());
     const s = {
       idPrefix: "UI-option-",
       main: "UIselect",
@@ -151,100 +152,121 @@ class k {
     };
     this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), this.event(), k.initGlobalListener(this.selectors);
+    ), this.event(), this.initGlobalListener(this.selectors);
   }
   filterExcluded(e, s) {
-    return Array.from(e).filter((i) => !s.some((n) => typeof n == "string" ? i.classList.contains(n) || i.id === n : i === n));
+    return Array.from(e).filter((r) => !s.some((a) => typeof a == "string" ? r.classList.contains(a) || r.id === a : r === a));
   }
   filterSearch(e, s) {
-    const i = s.trim().toLowerCase();
-    return e.filter((n) => {
-      var r, a;
-      const t = ((r = n.dataset.value) == null ? void 0 : r.toLowerCase()) || "", l = ((a = n.textContent) == null ? void 0 : a.toLowerCase()) || "";
-      return t.includes(i) || l.includes(i);
+    const r = s.trim().toLowerCase();
+    return e.filter((a) => {
+      var i, o;
+      const t = ((i = a.dataset.value) == null ? void 0 : i.toLowerCase()) || "", l = ((o = a.textContent) == null ? void 0 : o.toLowerCase()) || "";
+      return t.includes(r) || l.includes(r);
     });
   }
+  destroy() {
+    x.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
+  }
   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 (b) {
-        return console.warn("Not found:", b.message);
-      }
-      const i = e.querySelector(
-        `.${this.selectors.selected}`
-      ), n = e.querySelector(
-        `.${this.selectors.arrow}`
-      ), t = e.querySelector(
-        `.${this.selectors.optionsList}`
-      ), l = e.querySelector(
-        `.${this.selectors.search} input`
-      );
-      n && n.addEventListener("click", () => {
-        this.toggle(e, t);
-      }), i.addEventListener("click", () => {
-        this.toggle(e, t);
-      }), e.addEventListener("click", () => {
-        this.itemsPosition(t);
-      });
-      const r = t.querySelectorAll(
-        `.${this.selectors.items} ul li`
-      ), a = this.filterExcluded(
-        r,
-        this.selectors.excludedItems
-      ), h = e.querySelector(
-        "[aria-selected='true']"
-      );
-      h && this.defaultSelect(e, h, i, s);
-      var c = [];
-      l && l.addEventListener("input", (b) => {
-        const f = b.target.value.trim();
-        i && (c = this.filterSearch(a, f), f ? (r.forEach((A) => A.remove()), c.forEach((A) => {
-          var o;
-          (o = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || o.appendChild(A);
-        })) : r.forEach((A) => {
-          var o;
-          (o = t.querySelector(`.${this.selectors.optionsList} ul`)) == null || o.appendChild(A);
-        }), this.itemArrow(e, t, i, s));
-      }), this.itemArrow(e, t, i, s), this.items(e, t, a, i, s);
-    });
+    var s;
+    this.abortController = new AbortController();
+    const e = this.abortController.signal;
+    (s = this.main) == null || s.forEach(
+      (r) => {
+        const a = r.querySelector(
+          `.${this.selectors.main} input[type='hidden']`
+        );
+        try {
+          if (!a)
+            throw new Error('<input type="hidden" name="YouUniqueId">');
+        } catch (b) {
+          return console.warn("Not found:", b.message);
+        }
+        const t = r.querySelector(
+          `.${this.selectors.selected}`
+        ), l = r.querySelector(
+          `.${this.selectors.arrow}`
+        ), i = r.querySelector(
+          `.${this.selectors.optionsList}`
+        ), o = r.querySelector(
+          `.${this.selectors.search} input`
+        );
+        l && l.addEventListener(
+          "click",
+          () => {
+            this.toggle(r, i);
+          },
+          { signal: e }
+        ), t.addEventListener(
+          "click",
+          () => {
+            this.toggle(r, i);
+          },
+          { signal: e }
+        ), r.addEventListener(
+          "click",
+          () => {
+            this.itemsPosition(i);
+          },
+          { signal: e }
+        );
+        const h = i.querySelectorAll(
+          `.${this.selectors.items} ul li`
+        ), c = this.filterExcluded(
+          h,
+          this.selectors.excludedItems
+        ), m = r.querySelector(
+          "[aria-selected='true']"
+        );
+        m && this.defaultSelect(r, m, t, a);
+        var v = [];
+        o && o.addEventListener("input", (b) => {
+          const u = b.target.value.trim();
+          t && (v = this.filterSearch(c, u), u ? (h.forEach((n) => n.remove()), v.forEach((n) => {
+            var E;
+            (E = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || E.appendChild(n);
+          })) : h.forEach((n) => {
+            var E;
+            (E = i.querySelector(`.${this.selectors.optionsList} ul`)) == null || E.appendChild(n);
+          }), this.itemArrow(r, i, t, a));
+        }), this.itemArrow(r, i, t, a), this.items(r, i, c, t, a);
+      },
+      { signal: e }
+    );
   }
-  itemArrow(e, s, i, n) {
+  itemArrow(e, s, r, a) {
     if (this.itemArrowInitialized.has(e)) return;
     this.itemArrowInitialized.add(e);
     let t = -1;
-    const l = i.textContent ? i.textContent : "", r = e.querySelector(
+    const l = r.textContent ? r.textContent : "", i = e.querySelector(
       `.${this.selectors.search} input`
     );
-    e.addEventListener("keydown", (a) => {
-      r && r.focus();
+    e.addEventListener("keydown", (o) => {
+      i && i.focus();
       const h = Array.from(
         s.querySelectorAll(`.${this.selectors.optionsList} ul li`)
       ), c = this.filterExcluded(
         h,
         this.selectors.excludedItems
-      ), b = c.length;
-      if (b !== 0)
-        if (a.key === "ArrowDown") {
-          a.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, s), t = (t + 1) % b, i.textContent = c[t].textContent, c.forEach((f) => f.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 (a.key === "ArrowUp") {
-          a.preventDefault(), t = (t - 1 + b) % b, i.textContent = c[t].textContent, c.forEach((f) => f.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 (a.key === "Enter")
-          if (a.preventDefault(), t >= 0) {
-            i.textContent = c[t].textContent, c.forEach((f) => f.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
-            const m = c[t].id || `${this.selectors.idPrefix}${t}`;
-            e.setAttribute("aria-activedescendant", m), n.value = String(c[t].dataset.value), this.costomEvent(e, n.value), this.close(e, s);
+      ), m = c.length;
+      if (m !== 0)
+        if (o.key === "ArrowDown") {
+          o.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, s), t = (t + 1) % m, r.textContent = c[t].textContent, c.forEach((b) => b.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+          const v = c[t].id || `${this.selectors.idPrefix}${t}`;
+          e.setAttribute("aria-activedescendant", v), c[t].scrollIntoView({ block: "nearest" });
+        } else if (o.key === "ArrowUp") {
+          o.preventDefault(), t = (t - 1 + m) % m, r.textContent = c[t].textContent, c.forEach((b) => b.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+          const v = c[t].id || `${this.selectors.idPrefix}${t}`;
+          e.setAttribute("aria-activedescendant", v), c[t].scrollIntoView({ block: "nearest" });
+        } else if (o.key === "Enter")
+          if (o.preventDefault(), t >= 0) {
+            r.textContent = c[t].textContent, c.forEach((b) => b.removeAttribute("aria-selected")), c[t].setAttribute("aria-selected", "true");
+            const v = c[t].id || `${this.selectors.idPrefix}${t}`;
+            e.setAttribute("aria-activedescendant", v), a.value = String(c[t].dataset.value), this.costomEvent(e, a.value), this.close(e, s);
           } else
             this.toggle(e, s);
-        else a.key === "Escape" && (e.getAttribute("aria-activedescendant") || (i.textContent = l), this.close(e, s));
+        else o.key === "Escape" && (e.getAttribute("aria-activedescendant") || (r.textContent = l), this.close(e, s));
     });
   }
   itemsPosition(e) {
@@ -253,20 +275,20 @@ class k {
     );
     s && s.scrollIntoView({ block: "nearest" });
   }
-  items(e, s, i, n, t) {
-    i.forEach((l, r) => {
+  items(e, s, r, a, t) {
+    r.forEach((l, i) => {
       l.addEventListener("click", () => {
-        const a = i[r];
-        if (a) {
-          n.textContent = a.textContent, i.forEach((c) => c.removeAttribute("aria-selected")), a.setAttribute("aria-selected", "true");
-          const h = a.id || `${this.selectors.idPrefix}${r}`;
-          e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), t.value = String(i[r].dataset.value), this.costomEvent(e, t.value), this.close(e, s);
+        const o = r[i];
+        if (o) {
+          a.textContent = o.textContent, r.forEach((c) => c.removeAttribute("aria-selected")), o.setAttribute("aria-selected", "true");
+          const h = o.id || `${this.selectors.idPrefix}${i}`;
+          e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), t.value = String(r[i].dataset.value), this.costomEvent(e, t.value), this.close(e, s);
         }
       });
     });
   }
-  defaultSelect(e, s, i, n) {
-    s && (n.setAttribute("value", s.dataset.value ?? ""), i.textContent = s.textContent ?? "", e.setAttribute("aria-activedescendant", s.id || ""));
+  defaultSelect(e, s, r, a) {
+    s && (a.setAttribute("value", s.dataset.value ?? ""), r.textContent = s.textContent ?? "", e.setAttribute("aria-activedescendant", s.id || ""));
   }
   costomEvent(e, s) {
     e.dispatchEvent(
@@ -277,32 +299,36 @@ class k {
     );
   }
   toggle(e, s) {
-    k.closeAll(this.selectors), s.hidden ? (s.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(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");
+      const r = s.querySelector(`.${e.optionsList}`);
+      r.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)
-      ) || k.closeAll(e);
-    }), window.__UIselectGlobalClickInitialized = !0);
+  initGlobalListener(e) {
+    document.addEventListener(
+      "click",
+      (s) => {
+        const r = s.target;
+        [...document.querySelectorAll(`.${e.main}`)].some(
+          (t) => t.contains(r)
+        ) || x.closeAll(e);
+      },
+      { signal: this.abortController.signal }
+    );
   }
 }
-var S, K;
-class H {
+var S, P;
+class Q {
   constructor(e = {}) {
-    x(this, S);
-    v(this, "selectors");
-    v(this, "groups");
+    p(this, S);
+    f(this, "selectors");
+    f(this, "groups");
     const s = {
       main: "UIbg",
       btn: "UIbg-btn",
@@ -310,10 +336,10 @@ class H {
     };
     this.selectors = { ...s, ...e }, this.groups = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), E(this, S, K).call(this);
+    ), g(this, S, P).call(this);
   }
 }
-S = new WeakSet(), K = function() {
+S = new WeakSet(), P = function() {
   this.groups.forEach((e) => {
     const s = e.querySelectorAll(
       `.${this.selectors.btn}`
@@ -324,10 +350,10 @@ S = new WeakSet(), K = function() {
           l.setAttribute("aria-checked", "false"), l.setAttribute("tabindex", "-1");
         }), t.setAttribute("aria-checked", "true"), t.setAttribute("tabindex", "0"), t.focus();
       }), t.addEventListener("keydown", (l) => {
-        let r = Array.from(s).indexOf(t);
-        if (l.key === "ArrowRight" && r++, l.key === "ArrowLeft" && r--, r < 0 && (r = s.length - 1), r >= s.length && (r = 0), l.key === "Enter") {
-          const h = i[r];
-          h && !h.disabled && (i.forEach((c) => {
+        let i = Array.from(s).indexOf(t);
+        if (l.key === "ArrowRight" && i++, l.key === "ArrowLeft" && i--, i < 0 && (i = s.length - 1), i >= s.length && (i = 0), l.key === "Enter") {
+          const h = r[i];
+          h && !h.disabled && (r.forEach((c) => {
             c.checked = !1, c.removeAttribute("checked");
           }), h.checked = !0, h.setAttribute("checked", ""), h.dispatchEvent(
             new CustomEvent("ui-button-group-change", {
@@ -337,42 +363,87 @@ S = new WeakSet(), K = function() {
           )), l.preventDefault();
           return;
         }
-        const a = s[r];
-        a && (s.forEach((h) => h.setAttribute("tabindex", "-1")), a.setAttribute("tabindex", "0"), a.focus());
+        const o = s[i];
+        o && (s.forEach((h) => h.setAttribute("tabindex", "-1")), o.setAttribute("tabindex", "0"), o.focus());
       });
     });
-    const i = e.querySelectorAll(
+    const r = e.querySelectorAll(
       `.${this.selectors.input}`
     );
-    i.forEach((t, l) => {
-      const r = s[l];
-      r && (t.tabIndex = -1, r.setAttribute("role", "radio"), r.setAttribute("aria-checked", String(t.checked)), r.setAttribute("tabindex", t.checked ? "0" : "-1"), t.disabled ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), t.addEventListener("click", () => {
-        i.forEach((a) => {
-          a.checked = !1, a.removeAttribute("checked");
-        }), i[l].checked = !0, i[l].setAttribute("checked", ""), t.dispatchEvent(
+    r.forEach((t, l) => {
+      const i = s[l];
+      i && (t.tabIndex = -1, i.setAttribute("role", "radio"), i.setAttribute("aria-checked", String(t.checked)), i.setAttribute("tabindex", t.checked ? "0" : "-1"), t.disabled ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), t.addEventListener("click", () => {
+        r.forEach((o) => {
+          o.checked = !1, o.removeAttribute("checked");
+        }), r[l].checked = !0, r[l].setAttribute("checked", ""), t.dispatchEvent(
           new CustomEvent("ui-button-group-change", {
             detail: { id: t.id, value: t.value },
             bubbles: !0
           })
         );
-      }), t.addEventListener("ui-button-group-change", (a) => {
-        console.log("detail:", a.detail);
+      }), t.addEventListener("ui-button-group-change", (o) => {
+        console.log("detail:", o.detail);
       }));
     });
-    const n = Array.from(i).find(
+    const a = Array.from(r).find(
       (t) => !t.checked && !t.disabled
     );
-    if (n) {
+    if (a) {
       const t = e.querySelector(
-        `label[for="${n.id}"]`
+        `label[for="${a.id}"]`
       );
       t && t.setAttribute("tabindex", "0");
     }
   });
 };
+var C, z;
+class W {
+  constructor(e = {}) {
+    p(this, C);
+    f(this, "selectors");
+    f(this, "buttons", null);
+    f(this, "abortController", new AbortController());
+    const s = {
+      main: "UIb"
+    };
+    this.selectors = { ...s, ...e }, this.buttons = document.querySelectorAll(
+      `.${this.selectors.main}`
+    ), g(this, C, z).call(this);
+  }
+  destroy() {
+    this.abortController && this.abortController.abort(), this.buttons = null;
+  }
+  costomEvent(e, s) {
+    if (!s || s === "undefined" || s.trim() === "") {
+      console.log('Button data-value="" Not set!');
+      return;
+    }
+    console.log("dis"), e.dispatchEvent(
+      new CustomEvent("ui-button-change", {
+        detail: { val: s },
+        bubbles: !0
+      })
+    );
+  }
+}
+C = new WeakSet(), z = function() {
+  var s;
+  this.abortController = new AbortController();
+  const e = this.abortController.signal;
+  (s = this.buttons) == null || s.forEach((r) => {
+    r.addEventListener(
+      "click",
+      () => {
+        this.costomEvent(r, String(r.dataset.value));
+      },
+      { signal: e }
+    );
+  });
+};
 export {
-  H as ButtonGroup,
-  k as Select,
-  T as SpinBox,
-  R as Switch
+  W as Button,
+  Q as ButtonGroup,
+  x as Select,
+  H as SpinBox,
+  O as Switch
 };

package/dist/index.umd.js

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

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";.UIbg{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);align-content:center}.UIbg.vertical{grid-auto-flow:row;grid-auto-rows:min-content}.UIbg-input{position:absolute;opacity:0;pointer-events:none}.UIbg-input:checked+.UIbg-btn{background-color:var(--c-g-700);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);color:var(--c-g-500);border-color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;display:flex;justify-content:center;align-items:center;background-color:var(--c-g-100);border:1px solid var(--c-g-500);border-radius:.5rem;font-size:1rem;color:var(--c-g-700);transition:background-color .4s ease,color .2s ease}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border-radius:0;border:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg.border{border:1px solid var(--c-g-100);border-radius:.5rem;padding:5px}.UIbg.border:hover{border-color:var(--c-g-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.border.danger{border-color:var(--c-d-100)}.UIbg.border.danger:hover{border-color:var(--c-d-700)}.UIbg.border.info{border-color:var(--c-i-100)}.UIbg.border.info:hover{border-color:var(--c-i-700)}.UIbg.border.primary{border-color:var(--c-p-100)}.UIbg.border.primary:hover{border-color:var(--c-p-700)}.UIbg.border.success{border-color:var(--c-s-100)}.UIbg.border.success:hover{border-color:var(--c-s-700)}.UIbg.border.warning{border-color:var(--c-w-100)}.UIbg.border.warning:hover{border-color:var(--c-w-700)}.UIbg.danger>.UIbg-btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-900)}.UIbg.danger>.UIbg-btn:hover{background-color:var(--c-d-300);color:var(--c-d-50)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);color:var(--c-d-500);border-color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-900)}.UIbg.info>.UIbg-btn:hover{background-color:var(--c-i-300);color:var(--c-i-50)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);color:var(--c-i-500);border-color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-900)}.UIbg.primary>.UIbg-btn:hover{background-color:var(--c-p-300);color:var(--c-p-50)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);color:var(--c-p-500);border-color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-900)}.UIbg.success>.UIbg-btn:hover{background-color:var(--c-s-300);color:var(--c-s-50)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);color:var(--c-s-500);border-color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-900)}.UIbg.warning>.UIbg-btn:hover{background-color:var(--c-w-300);color:var(--c-w-50)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);color:var(--c-w-500);border-color:var(--c-w-300)}.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{width:100%;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}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em;margin:0;border:1px solid #c0c0c0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}
+@charset "UTF-8";.UIbg{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);align-content:center}.UIbg.vertical{grid-auto-flow:row;grid-auto-rows:min-content}.UIbg-input{position:absolute;opacity:0;pointer-events:none}.UIbg-input:checked+.UIbg-btn{background-color:var(--c-g-700);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);color:var(--c-g-500);border-color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;display:flex;justify-content:center;align-items:center;background-color:var(--c-g-100);border:1px solid var(--c-g-500);border-radius:.5rem;font-size:1rem;color:var(--c-g-700);transition:background-color .4s ease,color .2s ease}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border-radius:0;border:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg.border{border:1px solid var(--c-g-100);border-radius:.5rem;padding:5px}.UIbg.border:hover{border-color:var(--c-g-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.border.danger{border-color:var(--c-d-100)}.UIbg.border.danger:hover{border-color:var(--c-d-700)}.UIbg.border.info{border-color:var(--c-i-100)}.UIbg.border.info:hover{border-color:var(--c-i-700)}.UIbg.border.primary{border-color:var(--c-p-100)}.UIbg.border.primary:hover{border-color:var(--c-p-700)}.UIbg.border.success{border-color:var(--c-s-100)}.UIbg.border.success:hover{border-color:var(--c-s-700)}.UIbg.border.warning{border-color:var(--c-w-100)}.UIbg.border.warning:hover{border-color:var(--c-w-700)}.UIbg.danger>.UIbg-btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-900)}.UIbg.danger>.UIbg-btn:hover{background-color:var(--c-d-300);color:var(--c-d-50)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);color:var(--c-d-500);border-color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-900)}.UIbg.info>.UIbg-btn:hover{background-color:var(--c-i-300);color:var(--c-i-50)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);color:var(--c-i-500);border-color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-900)}.UIbg.primary>.UIbg-btn:hover{background-color:var(--c-p-300);color:var(--c-p-50)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);color:var(--c-p-500);border-color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-900)}.UIbg.success>.UIbg-btn:hover{background-color:var(--c-s-300);color:var(--c-s-50)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);color:var(--c-s-500);border-color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-900)}.UIbg.warning>.UIbg-btn:hover{background-color:var(--c-w-300);color:var(--c-w-50)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);color:var(--c-w-500);border-color:var(--c-w-300)}.UIb{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;height:2.5rem;padding:.125rem .75rem;display:flex;justify-content:center;align-items:center;border-radius:.5rem;font-size:1rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIb:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIb:disabled{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:2.5rem}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{background-color:var(--c-d-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIb.danger:hover{background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-50)}.UIb.danger:disabled{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIb.info{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIb.info:hover{background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-50)}.UIb.info:disabled{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIb.primary{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIb.primary:hover{background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-50)}.UIb.primary:disabled{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIb.success{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIb.success:hover{background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-50)}.UIb.success:disabled{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIb.warning{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIb.warning:hover{background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-50)}.UIb.warning:disabled{background-color:var(--c-w-100);border-color:var(--c-w-100);color:var(--c-w-300)}.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{width:100%;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}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em;margin:0;border:1px solid #c0c0c0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}

package/package.json

@@ -2,7 +2,7 @@
   "author": "Andrii Popov",
   "name": "@popovandrii/ui-elements",
   "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio)",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "license": "MIT",
   "keywords": [
     "spinbox",