@popovandrii/ui-elements 0.0.24 → 0.0.26

package/README.md

@@ -171,6 +171,25 @@ select?.addEventListener('ui-select-change', (e) => {
 <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
 </p>
 
+#### Button-Group UI
+```html
+  <div class="UIbg warning sm vertical border" role="group" aria-label="">
+    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck21">
+    <label class="UIbg-btn" for="btncheck21">radio 1</label>
+
+    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck22" disabled>
+    <label class="UIbg-btn" for="btncheck22">radio 2</label>
+
+    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck23">
+    <label class="UIbg-btn" for="btncheck23">radio 3</label>
+
+    <input type="radio" class="UIbg-input" name="btnradio5" id="btncheck24">
+    <label class="UIbg-btn" for="btncheck24">radio 4</label>
+  </div>
+```
+<p align="center">
+<img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/button-group-UI.png" alt="Button-Group Preview" width="700">
+</p>
 
 # Information for Developers
 ```sh

package/dist/ButtonGroup.d.ts

@@ -6,7 +6,11 @@ interface SelectorMap {
 export declare class ButtonGroup {
     #private;
     private selectors;
-    private groups;
-    constructor(selectors?: Partial<SelectorMap>);
+    private main;
+    private abortController;
+    private dbug;
+    constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
+    destroy(): void;
+    private costomEvent;
 }
 export {};

package/dist/index.cjs.js

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

package/dist/index.es.js

@@ -1,24 +1,9 @@
-var B = Object.defineProperty;
-var q = (f) => {
-  throw TypeError(f);
-};
-var F = (f, e, t) => e in f ? B(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
-var b = (f, e, t) => F(f, typeof e != "symbol" ? e + "" : e, t), K = (f, e, t) => e.has(f) || q("Cannot " + t);
-var x = (f, e, t) => e.has(f) ? q("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(f) : e.set(f, t);
-var C = (f, e, t) => (K(f, e, "access private method"), t);
-class _ {
+class S {
+  selectors;
+  spinBoxes;
+  abortController = new AbortController();
+  dbug;
   constructor(e = {}, t = !1) {
-    b(this, "selectors");
-    b(this, "spinBoxes");
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
-    b(this, "state", (e, t, s, c = 0, o = 0) => {
-      e == c || e < c ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), o !== 0 && (e == o || e > o ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
-    });
-    b(this, "getValidDataNumber", (e, t) => {
-      const s = e.getAttribute(`data-${t}`);
-      return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
-    });
     this.dbug = t;
     const s = {
       main: "UIsp",
@@ -30,81 +15,89 @@ class _ {
       `.${this.selectors.main}`
     ), this.event();
   }
+  state = (e, t, s, o = 0, i = 0) => {
+    e == o || e < o ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), i !== 0 && (e == i || e > i ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1));
+  };
   destroy() {
     this.abortController && this.abortController.abort(), this.spinBoxes = null;
   }
+  getValidDataNumber = (e, t) => {
+    const s = e.getAttribute(`data-${t}`);
+    return s === null || s.trim() === "" || isNaN(Number(s)) ? 0 : Number(s);
+  };
   event() {
-    var t;
     this.abortController = new AbortController();
     const e = this.abortController.signal;
-    (t = this.spinBoxes) == null || t.forEach((s) => {
-      let c;
-      const o = s.querySelectorAll(
+    this.spinBoxes?.forEach((t) => {
+      let s;
+      const o = t.querySelectorAll(
         `.${this.selectors.btn}`
-      ), i = o[0], n = o[1], r = s.querySelector(
+      ), i = t.querySelector(
         `.${this.selectors.input}`
-      ), l = this.getValidDataNumber(s, "step"), h = this.getValidDataNumber(s, "min"), a = this.getValidDataNumber(s, "max"), m = (u) => {
-        s.setAttribute("aria-valuenow", String(u)), s.setAttribute("aria-valuetext", `${u} items`);
+      );
+      this.dbug && (o || console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
+      const r = o[0], d = o[1], n = this.getValidDataNumber(t, "step"), l = this.getValidDataNumber(t, "min"), c = this.getValidDataNumber(t, "max"), h = (a) => {
+        t.setAttribute("aria-valuenow", String(a)), t.setAttribute("aria-valuetext", `${a} items`);
       };
-      Number(r.value) <= h && (r.value = h.toFixed(l)), a !== 0 ? (Number(r.value) >= a && (r.value = a.toFixed(l)), a && s.setAttribute("aria-valuemax", a.toFixed(l))) : r.value = Number(r.value).toFixed(l), h && s.setAttribute("aria-valuemin", h.toFixed(l)), this.state(Number(r.value), i, n, h, a), m(r.value);
-      let v = null;
-      const A = (u = 1) => {
-        r.value = String(Math.abs(Number(r.value)));
-        let d = parseFloat(r.value) || 0;
-        return d = d + 1 * u / Math.pow(10, l), d > a && a !== 0 && (d = a), r.value = d.toFixed(l), this.state(Number(r.value), i, n, h, a), m(r.value), r.value;
-      }, y = (u = 1) => {
-        r.value = String(Math.abs(Number(r.value)));
-        let d = parseFloat(r.value) || 0;
-        return d = d - 1 * u / Math.pow(10, l), d < h && (d = h), r.value = d.toFixed(l), this.state(Number(r.value), i, n, h, a), m(r.value), r.value;
-      }, E = (u, d = 150) => {
-        v === null && (v = window.setInterval(u, d));
-      }, g = () => {
-        v !== null && (clearInterval(v), v = null);
+      Number(i.value) <= l && (i.value = l.toFixed(n)), c !== 0 ? (Number(i.value) >= c && (i.value = c.toFixed(n)), c && t.setAttribute("aria-valuemax", c.toFixed(n))) : i.value = Number(i.value).toFixed(n), l && t.setAttribute("aria-valuemin", l.toFixed(n)), this.state(Number(i.value), r, d, l, c), h(i.value);
+      let b = null;
+      const v = (a = 1) => {
+        i.value = String(Math.abs(Number(i.value)));
+        let u = parseFloat(i.value) || 0;
+        return u = u + 1 * a / Math.pow(10, n), u > c && c !== 0 && (u = c), i.value = u.toFixed(n), this.state(Number(i.value), r, d, l, c), h(i.value), i.value;
+      }, f = (a = 1) => {
+        i.value = String(Math.abs(Number(i.value)));
+        let u = parseFloat(i.value) || 0;
+        return u = u - 1 * a / Math.pow(10, n), u < l && (u = l), i.value = u.toFixed(n), this.state(Number(i.value), r, d, l, c), h(i.value), i.value;
+      }, m = (a, u = 150) => {
+        b === null && (b = window.setInterval(a, u));
+      }, E = () => {
+        b !== null && (clearInterval(b), b = null);
       };
-      n.addEventListener(
+      d.addEventListener(
         "mousedown",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          E(() => A(d));
+        (a) => {
+          const u = a.shiftKey ? 3 : 1;
+          m(() => v(u));
         },
         { signal: e }
-      ), n.addEventListener("touchstart", () => E(A), {
+      ), d.addEventListener("touchstart", () => m(v), {
         signal: e
       }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-        (u) => {
-          n.addEventListener(u, g, { signal: e });
+        (a) => {
+          d.addEventListener(a, E, { signal: e });
         }
-      ), n.addEventListener(
+      ), d.addEventListener(
         "click",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          v === null && (c = A(d), this.costomEvent(n, c));
+        (a) => {
+          const u = a.shiftKey ? 3 : 1;
+          b === null && (s = v(u), this.costomEvent(i, s));
         },
         { signal: e }
-      ), i.addEventListener(
+      ), r.addEventListener(
         "click",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          v === null && (c = y(d), this.costomEvent(i, c));
+        (a) => {
+          const u = a.shiftKey ? 3 : 1;
+          b === null && (s = f(u), this.costomEvent(i, s));
         },
         { signal: e }
-      ), i.addEventListener(
+      ), r.addEventListener(
         "mousedown",
-        (u) => {
-          const d = u.shiftKey ? 3 : 1;
-          E(() => y(d), 100);
+        (a) => {
+          const u = a.shiftKey ? 3 : 1;
+          m(() => f(u), 100);
         },
         { signal: e }
-      ), i.addEventListener("touchstart", () => E(y, 100), {
+      ), r.addEventListener("touchstart", () => m(f, 100), {
         signal: e
       }), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-        (u) => {
-          i.addEventListener(u, g, { signal: e });
+        (a) => {
+          r.addEventListener(a, E, { signal: e });
         }
-      ), r.addEventListener(
+      ), i.addEventListener(
         "keydown",
-        (u) => {
-          const d = u.key, S = u.shiftKey ? 5 : 1;
+        (a) => {
+          const u = a.key, y = a.shiftKey ? 5 : 1;
           if ([
             "Backspace",
             "Delete",
@@ -114,50 +107,49 @@ class _ {
             "Enter",
             "Home",
             "End"
-          ].includes(d) || (u.ctrlKey || u.metaKey) && ["a", "c", "v", "x"].includes(d.toLowerCase()))
+          ].includes(u) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(u.toLowerCase()))
             return;
-          if (["e", "+", "-"].includes(d)) {
-            u.preventDefault();
+          if (["e", "+", "-"].includes(u)) {
+            a.preventDefault();
             return;
           }
-          if (d === "ArrowUp" || d === "ArrowDown") {
-            u.preventDefault(), d === "ArrowUp" ? A(S) : y(S);
+          if (u === "ArrowUp" || u === "ArrowDown") {
+            a.preventDefault(), u === "ArrowUp" ? v(y) : f(y);
             return;
           }
-          const L = d === "," ? "." : d, $ = /^[0-9]$/.test(L), I = L === ".", N = r.value.includes(".");
-          (l === 0 && !$ || l > 0 && !($ || I) || I && N) && u.preventDefault();
+          const w = u === "," ? "." : u, p = /^[0-9]$/.test(w), C = w === ".", k = i.value.includes(".");
+          (n === 0 && !p || n > 0 && !(p || C) || C && k) && a.preventDefault();
         },
         { signal: e }
-      ), r.addEventListener(
+      ), i.addEventListener(
         "keyup",
-        (u) => {
-          (u.key === "ArrowUp" || u.key === "ArrowDown") && this.costomEvent(r, r.value);
+        (a) => {
+          (a.key === "ArrowUp" || a.key === "ArrowDown") && this.costomEvent(i, i.value);
         },
         { signal: e }
-      ), r.addEventListener(
+      ), i.addEventListener(
         "change",
         () => {
-          Number(r.value) < h && (r.value = h.toFixed(l)), Number(r.value) > a && a !== 0 ? r.value = a.toFixed(l) : r.value = Number(r.value).toFixed(l), this.state(Number(r.value), i, n, h, a), this.costomEvent(r, r.value);
+          Number(i.value) < l && (i.value = l.toFixed(n)), Number(i.value) > c && c !== 0 ? i.value = c.toFixed(n) : i.value = Number(i.value).toFixed(n), this.state(Number(i.value), r, d, l, c), this.costomEvent(i, i.value);
         },
         { signal: e }
       );
     });
   }
   costomEvent(e, t) {
-    this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
-      new CustomEvent("ui-spinbox-change", {
-        detail: { val: t },
-        bubbles: !0
-      })
-    );
+    const s = {
+      detail: { id: e.id, value: t },
+      bubbles: !0
+    };
+    this.dbug && console.log("CostomEvent: data.detail ", s.detail), e.dispatchEvent(new CustomEvent("ui-spinbox-change", s));
   }
 }
-class z {
+class $ {
+  selectors;
+  main = null;
+  abortController = new AbortController();
+  dbug;
   constructor(e = {}, t = !1) {
-    b(this, "selectors");
-    b(this, "main", null);
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
     this.dbug = t;
     const s = {
       main: "UIsw",
@@ -171,23 +163,22 @@ class z {
     this.abortController && this.abortController.abort(), this.main = null;
   }
   event() {
-    var t;
     this.abortController = new AbortController();
     const e = this.abortController.signal;
-    (t = this.main) == null || t.forEach((s) => {
-      const c = s.querySelector(`.${this.selectors.label}`), o = s.querySelector("input");
-      c && c.id && s.setAttribute("aria-labelledby", c.id), o && (o.checked ? s.setAttribute("aria-checked", "true") : s.setAttribute("aria-checked", "false"), s.addEventListener(
+    this.main?.forEach((t) => {
+      const s = t.querySelector(`.${this.selectors.label}`), o = t.querySelector("input");
+      s && s.id && t.setAttribute("aria-labelledby", s.id), o && (o.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener(
         "click",
         () => {
           o.checked = !o.checked;
-          const i = s.querySelector("input");
-          this.costomEvent(s, String(i == null ? void 0 : i.checked)), s.setAttribute("aria-checked", String(o.checked));
+          const i = t.querySelector("input");
+          this.costomEvent(t, String(i?.checked)), t.setAttribute("aria-checked", String(o.checked));
         },
         { signal: e }
-      ), s.addEventListener(
+      ), t.addEventListener(
         "keydown",
         (i) => {
-          i.key === "ArrowRight" ? (o.checked = !0, s.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(s, String(!0))) : i.key === "ArrowLeft" && (o.checked = !1, s.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(s, String(!1)));
+          i.key === "ArrowRight" ? (o.checked = !0, t.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(t, String(!0))) : i.key === "ArrowLeft" && (o.checked = !1, t.setAttribute("aria-checked", String(o.checked)), i.preventDefault(), this.costomEvent(t, String(!1)));
         },
         { signal: e }
       ));
@@ -202,13 +193,13 @@ class z {
     );
   }
 }
-class w {
+class A {
+  selectors;
+  main = null;
+  itemArrowInitialized = /* @__PURE__ */ new WeakSet();
+  abortController = new AbortController();
+  dbug;
   constructor(e = {}, t = !1) {
-    b(this, "selectors");
-    b(this, "main", null);
-    b(this, "itemArrowInitialized", /* @__PURE__ */ new WeakSet());
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
     this.dbug = t;
     const s = {
       idPrefix: "UI-option-",
@@ -226,126 +217,122 @@ class w {
     ), this.event(), this.initGlobalListener(this.selectors);
   }
   filterExcluded(e, t) {
-    return Array.from(e).filter((s) => !t.some((c) => typeof c == "string" ? s.classList.contains(c) || s.id === c : s === c));
+    return Array.from(e).filter((s) => !t.some((o) => typeof o == "string" ? s.classList.contains(o) || s.id === o : s === o));
   }
   filterSearch(e, t) {
     const s = t.trim().toLowerCase();
-    return e.filter((c) => {
-      var n, r;
-      const o = ((n = c.dataset.value) == null ? void 0 : n.toLowerCase()) || "", i = ((r = c.textContent) == null ? void 0 : r.toLowerCase()) || "";
-      return o.includes(s) || i.includes(s);
+    return e.filter((o) => {
+      const i = o.dataset.value?.toLowerCase() || "", r = o.textContent?.toLowerCase() || "";
+      return i.includes(s) || r.includes(s);
     });
   }
   destroy() {
-    w.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
+    A.closeAll(this.selectors), this.abortController && this.abortController.abort(), this.main = null;
   }
   event() {
-    var t;
     this.abortController = new AbortController();
     const e = this.abortController.signal;
-    (t = this.main) == null || t.forEach(
-      (s) => {
-        const c = s.querySelector(
+    this.main?.forEach(
+      (t) => {
+        const s = t.querySelector(
           `.${this.selectors.main} input[type='hidden']`
         );
         try {
-          if (!c)
+          if (!s)
             throw new Error('<input type="hidden" name="YouUniqueId">');
-        } catch (v) {
-          return console.warn("Not found:", v.message);
+        } catch (b) {
+          return console.warn("Not found:", b.message);
         }
-        const o = s.querySelector(
+        const o = t.querySelector(
           `.${this.selectors.selected}`
-        ), i = s.querySelector(
+        ), i = t.querySelector(
           `.${this.selectors.arrow}`
-        ), n = s.querySelector(
+        ), r = t.querySelector(
           `.${this.selectors.optionsList}`
-        ), r = s.querySelector(
+        ), d = t.querySelector(
           `.${this.selectors.search} input`
         );
         i && i.addEventListener(
           "click",
           () => {
-            this.toggle(s, n);
+            this.toggle(t, r);
           },
           { signal: e }
         ), o.addEventListener(
           "click",
           () => {
-            this.toggle(s, n);
+            this.toggle(t, r);
           },
           { signal: e }
-        ), s.addEventListener(
+        ), t.addEventListener(
           "click",
           () => {
-            this.itemsPosition(n);
+            this.itemsPosition(r);
           },
           { signal: e }
         );
-        const l = n.querySelectorAll(
+        const n = r.querySelectorAll(
           `.${this.selectors.items} ul li`
-        ), h = this.filterExcluded(
-          l,
+        ), l = this.filterExcluded(
+          n,
           this.selectors.excludedItems
-        ), a = s.querySelector(
+        ), c = t.querySelector(
           "[aria-selected='true']"
         );
-        a && this.defaultSelect(s, a, o, c);
-        var m = [];
-        r && r.addEventListener(
+        c && this.defaultSelect(t, c, o, s);
+        var h = [];
+        d && d.addEventListener(
           "input",
-          (v) => {
-            const y = v.target.value.trim();
-            o && (m = this.filterSearch(h, y), y ? (l.forEach((E) => E.remove()), m.forEach((E) => {
-              var g;
-              (g = n.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
-            })) : l.forEach((E) => {
-              var g;
-              (g = n.querySelector(`.${this.selectors.optionsList} ul`)) == null || g.appendChild(E);
-            }), this.itemArrow(s, n, o, c, e));
+          (b) => {
+            const f = b.target.value.trim();
+            o && (h = this.filterSearch(l, f), f ? (n.forEach((m) => m.remove()), h.forEach((m) => {
+              r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
+            })) : n.forEach((m) => {
+              r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(m);
+            }), this.itemArrow(t, r, o, s, e));
           },
           { signal: e }
-        ), this.itemArrow(s, n, o, c, e), this.items(s, n, h, o, c, e);
+        ), this.itemArrow(t, r, o, s, e), this.items(t, r, l, o, s, e);
       },
       { signal: e }
     );
   }
-  itemArrow(e, t, s, c, o) {
+  itemArrow(e, t, s, o, i) {
     if (this.itemArrowInitialized.has(e)) return;
     this.itemArrowInitialized.add(e);
-    let i = -1;
-    const n = s.textContent ? s.textContent : "", r = e.querySelector(
+    let r = -1;
+    const d = s.textContent ? s.textContent : "", n = e.querySelector(
       `.${this.selectors.search} input`
     );
     e.addEventListener(
       "keydown",
       (l) => {
-        r && r.focus();
-        const h = Array.from(
+        n && n.focus();
+        const c = Array.from(
           t.querySelectorAll(`.${this.selectors.optionsList} ul li`)
-        ), a = this.filterExcluded(
-          h,
+        ), h = this.filterExcluded(
+          c,
           this.selectors.excludedItems
-        ), m = a.length;
-        if (m !== 0)
+        ), b = h.length;
+        if (b !== 0)
           if (l.key === "ArrowDown") {
-            l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), i = (i + 1) % m, s.textContent = a[i].textContent, a.forEach((A) => A.removeAttribute("aria-selected")), a[i].setAttribute("aria-selected", "true");
-            const v = a[i].id || `${this.selectors.idPrefix}${i}`;
-            e.setAttribute("aria-activedescendant", v), a[i].scrollIntoView({ block: "nearest" });
+            l.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, t), r = (r + 1) % b, s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
+            const v = h[r].id || `${this.selectors.idPrefix}${r}`;
+            e.setAttribute("aria-activedescendant", v), h[r].scrollIntoView({ block: "nearest" });
           } else if (l.key === "ArrowUp") {
-            l.preventDefault(), i = (i - 1 + m) % m, s.textContent = a[i].textContent, a.forEach((A) => A.removeAttribute("aria-selected")), a[i].setAttribute("aria-selected", "true");
-            const v = a[i].id || `${this.selectors.idPrefix}${i}`;
-            e.setAttribute("aria-activedescendant", v), a[i].scrollIntoView({ block: "nearest" });
+            l.preventDefault(), r = (r - 1 + b) % b, s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
+            const v = h[r].id || `${this.selectors.idPrefix}${r}`;
+            e.setAttribute("aria-activedescendant", v), h[r].scrollIntoView({ block: "nearest" });
           } else if (l.key === "Enter")
-            if (l.preventDefault(), i >= 0) {
-              s.textContent = a[i].textContent, a.forEach((A) => A.removeAttribute("aria-selected")), a[i].setAttribute("aria-selected", "true");
-              const v = a[i].id || `${this.selectors.idPrefix}${i}`;
-              e.setAttribute("aria-activedescendant", v), c.value = String(a[i].dataset.value), this.costomEvent(e, c.value), this.close(e, t);
+            if (l.preventDefault(), r >= 0) {
+              s.textContent = h[r].textContent, h.forEach((f) => f.removeAttribute("aria-selected")), h[r].setAttribute("aria-selected", "true");
+              const v = h[r].id || `${this.selectors.idPrefix}${r}`;
+              e.setAttribute("aria-activedescendant", v), o.value = String(h[r].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
             } else
               this.toggle(e, t);
-          else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (s.textContent = n), this.close(e, t));
+          else l.key === "Escape" && (e.getAttribute("aria-activedescendant") || (s.textContent = d), this.close(e, t));
       },
-      { signal: o }
+      { signal: i }
     );
   }
   itemsPosition(e) {
@@ -354,24 +341,24 @@ class w {
     );
     t && t.scrollIntoView({ block: "nearest" });
   }
-  items(e, t, s, c, o, i) {
-    s.forEach((n, r) => {
-      n.addEventListener(
+  items(e, t, s, o, i, r) {
+    s.forEach((d, n) => {
+      d.addEventListener(
         "click",
         () => {
-          const l = s[r];
+          const l = s[n];
           if (l) {
-            c.textContent = l.textContent, s.forEach((a) => a.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
-            const h = l.id || `${this.selectors.idPrefix}${r}`;
-            e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), o.value = String(s[r].dataset.value), this.costomEvent(e, o.value), this.close(e, t);
+            o.textContent = l.textContent, s.forEach((h) => h.removeAttribute("aria-selected")), l.setAttribute("aria-selected", "true");
+            const c = l.id || `${this.selectors.idPrefix}${n}`;
+            e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", c), i.value = String(s[n].dataset.value), this.costomEvent(e, i.value), this.close(e, t);
           }
         },
-        { signal: i }
+        { signal: r }
       );
     });
   }
-  defaultSelect(e, t, s, c) {
-    t && (c.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
+  defaultSelect(e, t, s, o) {
+    t && (o.setAttribute("value", t.dataset.value ?? ""), s.textContent = t.textContent ?? "", e.setAttribute("aria-activedescendant", t.id || ""));
   }
   costomEvent(e, t) {
     this.dbug && console.log(`CostomEvent: { detail: ${t}, bubbles: true }`), e.dispatchEvent(
@@ -382,7 +369,7 @@ class w {
     );
   }
   toggle(e, t) {
-    w.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
+    A.closeAll(this.selectors), t.hidden ? (t.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, t);
   }
   close(e, t) {
     t.hidden = !0, e.setAttribute("aria-expanded", "false");
@@ -399,105 +386,130 @@ class w {
       (t) => {
         const s = t.target;
         [...document.querySelectorAll(`.${e.main}`)].some(
-          (o) => o.contains(s)
-        ) || w.closeAll(e);
+          (i) => i.contains(s)
+        ) || A.closeAll(e);
       },
       { signal: this.abortController.signal }
     );
   }
 }
-var p, U;
-class M {
-  constructor(e = {}) {
-    x(this, p);
-    b(this, "selectors");
-    b(this, "groups");
-    const t = {
+class L {
+  selectors;
+  main = null;
+  abortController = new AbortController();
+  dbug;
+  constructor(e = {}, t = !1) {
+    this.dbug = t;
+    const s = {
       main: "UIbg",
       btn: "UIbg-btn",
       input: "UIbg-input"
     };
-    this.selectors = { ...t, ...e }, this.groups = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), C(this, p, U).call(this);
+    ), this.#t();
   }
-}
-p = new WeakSet(), U = function() {
-  this.groups.forEach((e) => {
-    const t = e.querySelectorAll(
-      `.${this.selectors.btn}`
-    );
-    t.forEach((o) => {
-      o.addEventListener("click", () => {
-        t.forEach((i) => {
-          i.setAttribute("aria-checked", "false"), i.setAttribute("tabindex", "-1");
-        }), o.setAttribute("aria-checked", "true"), o.setAttribute("tabindex", "0"), o.focus();
-      }), o.addEventListener("keydown", (i) => {
-        let n = Array.from(t).indexOf(o);
-        if (i.key === "ArrowRight" && n++, i.key === "ArrowLeft" && n--, n < 0 && (n = t.length - 1), n >= t.length && (n = 0), i.key === "Enter") {
-          const l = s[n];
-          l && !l.disabled && (s.forEach((h) => {
-            h.checked = !1, h.removeAttribute("checked");
-          }), l.checked = !0, l.setAttribute("checked", ""), l.dispatchEvent(
-            new CustomEvent("ui-button-group-change", {
-              detail: { id: l.id, value: l.value },
-              bubbles: !0
-            })
-          )), i.preventDefault();
-          return;
-        }
-        const r = t[n];
-        r && (t.forEach((l) => l.setAttribute("tabindex", "-1")), r.setAttribute("tabindex", "0"), r.focus());
+  destroy() {
+    this.abortController && this.abortController.abort(), this.main = null;
+  }
+  #t() {
+    this.abortController = new AbortController();
+    const e = this.abortController.signal;
+    this.main?.forEach((t) => {
+      const s = t.querySelectorAll(
+        `.${this.selectors.btn}`
+      );
+      s.forEach((r) => {
+        r.addEventListener(
+          "click",
+          () => {
+            s.forEach((d) => {
+              d.setAttribute("aria-checked", "false"), d.setAttribute("tabindex", "-1");
+            }), r.setAttribute("aria-checked", "true"), r.setAttribute("tabindex", "0"), r.focus();
+          },
+          { signal: e }
+        ), r.addEventListener(
+          "keydown",
+          (d) => {
+            let n = Array.from(s).indexOf(r);
+            if (d.key === "ArrowRight" && n++, d.key === "ArrowLeft" && n--, n < 0 && (n = s.length - 1), n >= s.length && (n = 0), d.key === "Enter") {
+              const c = o[n];
+              c && !c.disabled && (o.forEach((h) => {
+                h.checked = !1, h.removeAttribute("checked");
+              }), c.checked = !0, c.setAttribute("checked", ""), this.costomEvent(c)), d.preventDefault();
+              return;
+            }
+            const l = s[n];
+            l && (s.forEach((c) => c.setAttribute("tabindex", "-1")), l.setAttribute("tabindex", "0"), l.focus());
+          },
+          { signal: e }
+        );
       });
-    });
-    const s = e.querySelectorAll(
-      `.${this.selectors.input}`
-    );
-    s.forEach((o, i) => {
-      const n = t[i];
-      n && (o.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(o.checked)), n.setAttribute("tabindex", o.checked ? "0" : "-1"), o.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), o.addEventListener("click", () => {
-        s.forEach((r) => {
-          r.checked = !1, r.removeAttribute("checked");
-        }), s[i].checked = !0, s[i].setAttribute("checked", ""), o.dispatchEvent(
-          new CustomEvent("ui-button-group-change", {
-            detail: { id: o.id, value: o.value },
-            bubbles: !0
-          })
+      const o = t.querySelectorAll(
+        `.${this.selectors.input}`
+      );
+      o.forEach((r, d) => {
+        this.dbug && (r.id || console.error(`Input #${d} in group has no ID!`), (!r.value || r.value === "on") && console.warn(
+          `Input #${r.id} does not have a value specified (currently "${r.value}")`
+        ));
+        const n = s[d];
+        n && (r.tabIndex = -1, n.setAttribute("role", "radio"), n.setAttribute("aria-checked", String(r.checked)), n.setAttribute("tabindex", r.checked ? "0" : "-1"), r.disabled ? n.setAttribute("aria-disabled", "true") : n.removeAttribute("aria-disabled"), r.addEventListener(
+          "click",
+          () => {
+            o.forEach((l) => {
+              l.checked = !1, l.removeAttribute("checked");
+            }), o[d].checked = !0, o[d].setAttribute("checked", ""), this.costomEvent(r);
+          },
+          { signal: e }
+        ));
+      });
+      const i = Array.from(o).find((r) => r.checked && !r.disabled) || Array.from(o).find((r) => !r.disabled);
+      if (i) {
+        const r = t.querySelector(
+          `label[for="${i.id}"]`
         );
-      }), o.addEventListener("ui-button-group-change", (r) => {
-        console.log("detail:", r.detail);
-      }));
+        r && r.setAttribute("tabindex", "0");
+      }
     });
-    const c = Array.from(s).find(
-      (o) => !o.checked && !o.disabled
-    );
-    if (c) {
-      const o = e.querySelector(
-        `label[for="${c.id}"]`
-      );
-      o && o.setAttribute("tabindex", "0");
-    }
-  });
-};
-var k, D;
-class T {
+  }
+  costomEvent(e) {
+    const t = {
+      detail: { id: e.id, value: e.value },
+      bubbles: !0
+    };
+    this.dbug && console.log("CostomEvent:", t), e.dispatchEvent(new CustomEvent("ui-button-group-change", t));
+  }
+}
+class I {
+  selectors;
+  buttons = null;
+  abortController = new AbortController();
+  dbug;
   constructor(e = {}, t = !1) {
-    x(this, k);
-    b(this, "selectors");
-    b(this, "buttons", null);
-    b(this, "abortController", new AbortController());
-    b(this, "dbug");
     this.dbug = t;
     const s = {
       main: "UIb"
     };
     this.selectors = { ...s, ...e }, this.buttons = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), C(this, k, D).call(this);
+    ), this.#t();
   }
   destroy() {
     this.abortController && this.abortController.abort(), this.buttons = null;
   }
+  #t() {
+    this.abortController = new AbortController();
+    const e = this.abortController.signal;
+    this.buttons?.forEach((t) => {
+      t.addEventListener(
+        "click",
+        () => {
+          this.costomEvent(t, String(t.dataset.value));
+        },
+        { signal: e }
+      );
+    });
+  }
   costomEvent(e, t) {
     if (!t || t === "undefined" || t.trim() === "") {
       console.log('Button data-value="" Not set!');
@@ -511,24 +523,10 @@ class T {
     );
   }
 }
-k = new WeakSet(), D = function() {
-  var t;
-  this.abortController = new AbortController();
-  const e = this.abortController.signal;
-  (t = this.buttons) == null || t.forEach((s) => {
-    s.addEventListener(
-      "click",
-      () => {
-        this.costomEvent(s, String(s.dataset.value));
-      },
-      { signal: e }
-    );
-  });
-};
 export {
-  T as Button,
-  M as ButtonGroup,
-  w as Select,
-  _ as SpinBox,
-  z as Switch
+  I as Button,
+  L as ButtonGroup,
+  A as Select,
+  S as SpinBox,
+  $ as Switch
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(h,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(h=typeof globalThis<"u"?globalThis:h||self,b(h.UiElements={}))})(this,function(h){"use strict";var T=Object.defineProperty;var N=h=>{throw TypeError(h)};var M=(h,b,A)=>b in h?T(h,b,{enumerable:!0,configurable:!0,writable:!0,value:A}):h[b]=A;var v=(h,b,A)=>M(h,typeof b!="symbol"?b+"":b,A),_=(h,b,A)=>b.has(h)||N("Cannot "+A);var L=(h,b,A)=>b.has(h)?N("Cannot add the same private member more than once"):b instanceof WeakSet?b.add(h):b.set(h,A);var $=(h,b,A)=>(_(h,b,"access private method"),A);var x,B,C,F;class b{constructor(e={},s=!1){v(this,"selectors");v(this,"spinBoxes");v(this,"abortController",new AbortController);v(this,"dbug");v(this,"state",(e,s,t,c=0,o=0)=>{e==c||e<c?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),o!==0&&(e==o||e>o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1))});v(this,"getValidDataNumber",(e,s)=>{const t=e.getAttribute(`data-${s}`);return t===null||t.trim()===""||isNaN(Number(t))?0:Number(t)});this.dbug=s;const t={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...t,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}event(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.spinBoxes)==null||s.forEach(t=>{let c;const o=t.querySelectorAll(`.${this.selectors.btn}`),i=o[0],n=o[1],r=t.querySelector(`.${this.selectors.input}`),l=this.getValidDataNumber(t,"step"),f=this.getValidDataNumber(t,"min"),a=this.getValidDataNumber(t,"max"),g=u=>{t.setAttribute("aria-valuenow",String(u)),t.setAttribute("aria-valuetext",`${u} items`)};Number(r.value)<=f&&(r.value=f.toFixed(l)),a!==0?(Number(r.value)>=a&&(r.value=a.toFixed(l)),a&&t.setAttribute("aria-valuemax",a.toFixed(l))):r.value=Number(r.value).toFixed(l),f&&t.setAttribute("aria-valuemin",f.toFixed(l)),this.state(Number(r.value),i,n,f,a),g(r.value);let m=null;const E=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d+1*u/Math.pow(10,l),d>a&&a!==0&&(d=a),r.value=d.toFixed(l),this.state(Number(r.value),i,n,f,a),g(r.value),r.value},w=(u=1)=>{r.value=String(Math.abs(Number(r.value)));let d=parseFloat(r.value)||0;return d=d-1*u/Math.pow(10,l),d<f&&(d=f),r.value=d.toFixed(l),this.state(Number(r.value),i,n,f,a),g(r.value),r.value},y=(u,d=150)=>{m===null&&(m=window.setInterval(u,d))},p=()=>{m!==null&&(clearInterval(m),m=null)};n.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>E(d))},{signal:e}),n.addEventListener("touchstart",()=>y(E),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{n.addEventListener(u,p,{signal:e})}),n.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(c=E(d),this.costomEvent(n,c))},{signal:e}),i.addEventListener("click",u=>{const d=u.shiftKey?3:1;m===null&&(c=w(d),this.costomEvent(i,c))},{signal:e}),i.addEventListener("mousedown",u=>{const d=u.shiftKey?3:1;y(()=>w(d),100)},{signal:e}),i.addEventListener("touchstart",()=>y(w,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(u=>{i.addEventListener(u,p,{signal:e})}),r.addEventListener("keydown",u=>{const d=u.key,I=u.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(d)||(u.ctrlKey||u.metaKey)&&["a","c","v","x"].includes(d.toLowerCase()))return;if(["e","+","-"].includes(d)){u.preventDefault();return}if(d==="ArrowUp"||d==="ArrowDown"){u.preventDefault(),d==="ArrowUp"?E(I):w(I);return}const q=d===","?".":d,U=/^[0-9]$/.test(q),D=q===".",V=r.value.includes(".");(l===0&&!U||l>0&&!(U||D)||D&&V)&&u.preventDefault()},{signal:e}),r.addEventListener("keyup",u=>{(u.key==="ArrowUp"||u.key==="ArrowDown")&&this.costomEvent(r,r.value)},{signal:e}),r.addEventListener("change",()=>{Number(r.value)<f&&(r.value=f.toFixed(l)),Number(r.value)>a&&a!==0?r.value=a.toFixed(l):r.value=Number(r.value).toFixed(l),this.state(Number(r.value),i,n,f,a),this.costomEvent(r,r.value)},{signal:e})})}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-spinbox-change",{detail:{val:s},bubbles:!0}))}}class A{constructor(e={},s=!1){v(this,"selectors");v(this,"main",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={main:"UIsw",label:"UIsw-label"};this.selectors={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){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(t=>{const c=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");c&&c.id&&t.setAttribute("aria-labelledby",c.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{o.checked=!o.checked;const i=t.querySelector("input");this.costomEvent(t,String(i==null?void 0:i.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",i=>{i.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!0))):i.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:s},bubbles:!0}))}}class k{constructor(e={},s=!1){v(this,"selectors");v(this,"main",null);v(this,"itemArrowInitialized",new WeakSet);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={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={...t,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,s){return Array.from(e).filter(t=>!s.some(c=>typeof c=="string"?t.classList.contains(c)||t.id===c:t===c))}filterSearch(e,s){const t=s.trim().toLowerCase();return e.filter(c=>{var n,r;const o=((n=c.dataset.value)==null?void 0:n.toLowerCase())||"",i=((r=c.textContent)==null?void 0:r.toLowerCase())||"";return o.includes(t)||i.includes(t)})}destroy(){k.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(t=>{const c=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!c)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(m){return console.warn("Not found:",m.message)}const o=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),n=t.querySelector(`.${this.selectors.optionsList}`),r=t.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(t,n)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,n)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(n)},{signal:e});const l=n.querySelectorAll(`.${this.selectors.items} ul li`),f=this.filterExcluded(l,this.selectors.excludedItems),a=t.querySelector("[aria-selected='true']");a&&this.defaultSelect(t,a,o,c);var g=[];r&&r.addEventListener("input",m=>{const w=m.target.value.trim();o&&(g=this.filterSearch(f,w),w?(l.forEach(y=>y.remove()),g.forEach(y=>{var p;(p=n.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(y)})):l.forEach(y=>{var p;(p=n.querySelector(`.${this.selectors.optionsList} ul`))==null||p.appendChild(y)}),this.itemArrow(t,n,o,c,e))},{signal:e}),this.itemArrow(t,n,o,c,e),this.items(t,n,f,o,c,e)},{signal:e})}itemArrow(e,s,t,c,o){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let i=-1;const n=t.textContent?t.textContent:"",r=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{r&&r.focus();const f=Array.from(s.querySelectorAll(`.${this.selectors.optionsList} ul li`)),a=this.filterExcluded(f,this.selectors.excludedItems),g=a.length;if(g!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,s),i=(i+1)%g,t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),a[i].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),i=(i-1+g)%g,t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),a[i].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),i>=0){t.textContent=a[i].textContent,a.forEach(E=>E.removeAttribute("aria-selected")),a[i].setAttribute("aria-selected","true");const m=a[i].id||`${this.selectors.idPrefix}${i}`;e.setAttribute("aria-activedescendant",m),c.value=String(a[i].dataset.value),this.costomEvent(e,c.value),this.close(e,s)}else this.toggle(e,s);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(t.textContent=n),this.close(e,s))},{signal:o})}itemsPosition(e){const s=e.querySelector('[aria-selected="true"]');s&&s.scrollIntoView({block:"nearest"})}items(e,s,t,c,o,i){t.forEach((n,r)=>{n.addEventListener("click",()=>{const l=t[r];if(l){c.textContent=l.textContent,t.forEach(a=>a.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const f=l.id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",f),o.value=String(t[r].dataset.value),this.costomEvent(e,o.value),this.close(e,s)}},{signal:i})})}defaultSelect(e,s,t,c){s&&(c.setAttribute("value",s.dataset.value??""),t.textContent=s.textContent??"",e.setAttribute("aria-activedescendant",s.id||""))}costomEvent(e,s){this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:s},bubbles:!0}))}toggle(e,s){k.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 t=s.querySelector(`.${e.optionsList}`);t.hidden=!0,s.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",s=>{const t=s.target;[...document.querySelectorAll(`.${e.main}`)].some(o=>o.contains(t))||k.closeAll(e)},{signal:this.abortController.signal})}}class K{constructor(e={}){L(this,x);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}`),$(this,x,B).call(this)}}x=new WeakSet,B=function(){this.groups.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`);s.forEach(o=>{o.addEventListener("click",()=>{s.forEach(i=>{i.setAttribute("aria-checked","false"),i.setAttribute("tabindex","-1")}),o.setAttribute("aria-checked","true"),o.setAttribute("tabindex","0"),o.focus()}),o.addEventListener("keydown",i=>{let n=Array.from(s).indexOf(o);if(i.key==="ArrowRight"&&n++,i.key==="ArrowLeft"&&n--,n<0&&(n=s.length-1),n>=s.length&&(n=0),i.key==="Enter"){const l=t[n];l&&!l.disabled&&(t.forEach(f=>{f.checked=!1,f.removeAttribute("checked")}),l.checked=!0,l.setAttribute("checked",""),l.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:l.id,value:l.value},bubbles:!0}))),i.preventDefault();return}const r=s[n];r&&(s.forEach(l=>l.setAttribute("tabindex","-1")),r.setAttribute("tabindex","0"),r.focus())})});const t=e.querySelectorAll(`.${this.selectors.input}`);t.forEach((o,i)=>{const n=s[i];n&&(o.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(o.checked)),n.setAttribute("tabindex",o.checked?"0":"-1"),o.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),o.addEventListener("click",()=>{t.forEach(r=>{r.checked=!1,r.removeAttribute("checked")}),t[i].checked=!0,t[i].setAttribute("checked",""),o.dispatchEvent(new CustomEvent("ui-button-group-change",{detail:{id:o.id,value:o.value},bubbles:!0}))}),o.addEventListener("ui-button-group-change",r=>{console.log("detail:",r.detail)}))});const c=Array.from(t).find(o=>!o.checked&&!o.disabled);if(c){const o=e.querySelector(`label[for="${c.id}"]`);o&&o.setAttribute("tabindex","0")}})};class P{constructor(e={},s=!1){L(this,C);v(this,"selectors");v(this,"buttons",null);v(this,"abortController",new AbortController);v(this,"dbug");this.dbug=s;const t={main:"UIb"};this.selectors={...t,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),$(this,C,F).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}this.dbug&&console.log(`CostomEvent: { detail: ${s}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:s},bubbles:!0}))}}C=new WeakSet,F=function(){var s;this.abortController=new AbortController;const e=this.abortController.signal;(s=this.buttons)==null||s.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})},h.Button=P,h.ButtonGroup=K,h.Select=k,h.SpinBox=b,h.Switch=A,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.UiElements={}))})(this,(function(m){"use strict";class g{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,s,o=0,i=0)=>{e==o||e<o?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{const s=e.getAttribute(`data-${t}`);return s===null||s.trim()===""||isNaN(Number(s))?0:Number(s)};event(){this.abortController=new AbortController;const e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let s;const o=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(o||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));const r=o[0],d=o[1],n=this.getValidDataNumber(t,"step"),l=this.getValidDataNumber(t,"min"),c=this.getValidDataNumber(t,"max"),h=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(i.value)<=l&&(i.value=l.toFixed(n)),c!==0?(Number(i.value)>=c&&(i.value=c.toFixed(n)),c&&t.setAttribute("aria-valuemax",c.toFixed(n))):i.value=Number(i.value).toFixed(n),l&&t.setAttribute("aria-valuemin",l.toFixed(n)),this.state(Number(i.value),r,d,l,c),h(i.value);let b=null;const v=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u+1*a/Math.pow(10,n),u>c&&c!==0&&(u=c),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},f=(a=1)=>{i.value=String(Math.abs(Number(i.value)));let u=parseFloat(i.value)||0;return u=u-1*a/Math.pow(10,n),u<l&&(u=l),i.value=u.toFixed(n),this.state(Number(i.value),r,d,l,c),h(i.value),i.value},A=(a,u=150)=>{b===null&&(b=window.setInterval(a,u))},p=()=>{b!==null&&(clearInterval(b),b=null)};d.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;A(()=>v(u))},{signal:e}),d.addEventListener("touchstart",()=>A(v),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{d.addEventListener(a,p,{signal:e})}),d.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=v(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("click",a=>{const u=a.shiftKey?3:1;b===null&&(s=f(u),this.costomEvent(i,s))},{signal:e}),r.addEventListener("mousedown",a=>{const u=a.shiftKey?3:1;A(()=>f(u),100)},{signal:e}),r.addEventListener("touchstart",()=>A(f,100),{signal:e}),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{r.addEventListener(a,p,{signal:e})}),i.addEventListener("keydown",a=>{const u=a.key,w=a.shiftKey?5:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(u)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(u.toLowerCase()))return;if(["e","+","-"].includes(u)){a.preventDefault();return}if(u==="ArrowUp"||u==="ArrowDown"){a.preventDefault(),u==="ArrowUp"?v(w):f(w);return}const C=u===","?".":u,k=/^[0-9]$/.test(C),x=C===".",I=i.value.includes(".");(n===0&&!k||n>0&&!(k||x)||x&&I)&&a.preventDefault()},{signal:e}),i.addEventListener("keyup",a=>{(a.key==="ArrowUp"||a.key==="ArrowDown")&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener("change",()=>{Number(i.value)<l&&(i.value=l.toFixed(n)),Number(i.value)>c&&c!==0?i.value=c.toFixed(n):i.value=Number(i.value).toFixed(n),this.state(Number(i.value),r,d,l,c),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){const s={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log("CostomEvent: data.detail ",s.detail),e.dispatchEvent(new CustomEvent("ui-spinbox-change",s))}}class S{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const s=t.querySelector(`.${this.selectors.label}`),o=t.querySelector("input");s&&s.id&&t.setAttribute("aria-labelledby",s.id),o&&(o.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{o.checked=!o.checked;const i=t.querySelector("input");this.costomEvent(t,String(i?.checked)),t.setAttribute("aria-checked",String(o.checked))},{signal:e}),t.addEventListener("keydown",i=>{i.key==="ArrowRight"?(o.checked=!0,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!0))):i.key==="ArrowLeft"&&(o.checked=!1,t.setAttribute("aria-checked",String(o.checked)),i.preventDefault(),this.costomEvent(t,String(!1)))},{signal:e}))})}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-switch-change",{detail:{val:t},bubbles:!0}))}}class E{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;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,t){return Array.from(e).filter(s=>!t.some(o=>typeof o=="string"?s.classList.contains(o)||s.id===o:s===o))}filterSearch(e,t){const s=t.trim().toLowerCase();return e.filter(o=>{const i=o.dataset.value?.toLowerCase()||"",r=o.textContent?.toLowerCase()||"";return i.includes(s)||r.includes(s)})}destroy(){E.closeAll(this.selectors),this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;const e=this.abortController.signal;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(b){return console.warn("Not found:",b.message)}const o=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),r=t.querySelector(`.${this.selectors.optionsList}`),d=t.querySelector(`.${this.selectors.search} input`);i&&i.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),o.addEventListener("click",()=>{this.toggle(t,r)},{signal:e}),t.addEventListener("click",()=>{this.itemsPosition(r)},{signal:e});const n=r.querySelectorAll(`.${this.selectors.items} ul li`),l=this.filterExcluded(n,this.selectors.excludedItems),c=t.querySelector("[aria-selected='true']");c&&this.defaultSelect(t,c,o,s);var h=[];d&&d.addEventListener("input",b=>{const f=b.target.value.trim();o&&(h=this.filterSearch(l,f),f?(n.forEach(A=>A.remove()),h.forEach(A=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)})):n.forEach(A=>{r.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(A)}),this.itemArrow(t,r,o,s,e))},{signal:e}),this.itemArrow(t,r,o,s,e),this.items(t,r,l,o,s,e)},{signal:e})}itemArrow(e,t,s,o,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let r=-1;const d=s.textContent?s.textContent:"",n=e.querySelector(`.${this.selectors.search} input`);e.addEventListener("keydown",l=>{n&&n.focus();const c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),h=this.filterExcluded(c,this.selectors.excludedItems),b=h.length;if(b!==0)if(l.key==="ArrowDown"){l.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,t),r=(r+1)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="ArrowUp"){l.preventDefault(),r=(r-1+b)%b,s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),h[r].scrollIntoView({block:"nearest"})}else if(l.key==="Enter")if(l.preventDefault(),r>=0){s.textContent=h[r].textContent,h.forEach(f=>f.removeAttribute("aria-selected")),h[r].setAttribute("aria-selected","true");const v=h[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",v),o.value=String(h[r].dataset.value),this.costomEvent(e,o.value),this.close(e,t)}else this.toggle(e,t);else l.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(s.textContent=d),this.close(e,t))},{signal:i})}itemsPosition(e){const t=e.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,t,s,o,i,r){s.forEach((d,n)=>{d.addEventListener("click",()=>{const l=s[n];if(l){o.textContent=l.textContent,s.forEach(h=>h.removeAttribute("aria-selected")),l.setAttribute("aria-selected","true");const c=l.id||`${this.selectors.idPrefix}${n}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",c),i.value=String(s[n].dataset.value),this.costomEvent(e,i.value),this.close(e,t)}},{signal:r})})}defaultSelect(e,t,s,o){t&&(o.setAttribute("value",t.dataset.value??""),s.textContent=t.textContent??"",e.setAttribute("aria-activedescendant",t.id||""))}costomEvent(e,t){this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-select-change",{detail:{val:t},bubbles:!0}))}toggle(e,t){E.closeAll(this.selectors),t.hidden?(t.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,t)}close(e,t){t.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{const s=t.querySelector(`.${e.optionsList}`);s.hidden=!0,t.setAttribute("aria-expanded","false")})}initGlobalListener(e){document.addEventListener("click",t=>{const s=t.target;[...document.querySelectorAll(`.${e.main}`)].some(i=>i.contains(s))||E.closeAll(e)},{signal:this.abortController.signal})}}class ${selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIbg",btn:"UIbg-btn",input:"UIbg-input"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.main?.forEach(t=>{const s=t.querySelectorAll(`.${this.selectors.btn}`);s.forEach(r=>{r.addEventListener("click",()=>{s.forEach(d=>{d.setAttribute("aria-checked","false"),d.setAttribute("tabindex","-1")}),r.setAttribute("aria-checked","true"),r.setAttribute("tabindex","0"),r.focus()},{signal:e}),r.addEventListener("keydown",d=>{let n=Array.from(s).indexOf(r);if(d.key==="ArrowRight"&&n++,d.key==="ArrowLeft"&&n--,n<0&&(n=s.length-1),n>=s.length&&(n=0),d.key==="Enter"){const c=o[n];c&&!c.disabled&&(o.forEach(h=>{h.checked=!1,h.removeAttribute("checked")}),c.checked=!0,c.setAttribute("checked",""),this.costomEvent(c)),d.preventDefault();return}const l=s[n];l&&(s.forEach(c=>c.setAttribute("tabindex","-1")),l.setAttribute("tabindex","0"),l.focus())},{signal:e})});const o=t.querySelectorAll(`.${this.selectors.input}`);o.forEach((r,d)=>{this.dbug&&(r.id||console.error(`Input #${d} in group has no ID!`),(!r.value||r.value==="on")&&console.warn(`Input #${r.id} does not have a value specified (currently "${r.value}")`));const n=s[d];n&&(r.tabIndex=-1,n.setAttribute("role","radio"),n.setAttribute("aria-checked",String(r.checked)),n.setAttribute("tabindex",r.checked?"0":"-1"),r.disabled?n.setAttribute("aria-disabled","true"):n.removeAttribute("aria-disabled"),r.addEventListener("click",()=>{o.forEach(l=>{l.checked=!1,l.removeAttribute("checked")}),o[d].checked=!0,o[d].setAttribute("checked",""),this.costomEvent(r)},{signal:e}))});const i=Array.from(o).find(r=>r.checked&&!r.disabled)||Array.from(o).find(r=>!r.disabled);if(i){const r=t.querySelector(`label[for="${i.id}"]`);r&&r.setAttribute("tabindex","0")}})}costomEvent(e){const t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log("CostomEvent:",t),e.dispatchEvent(new CustomEvent("ui-button-group-change",t))}}class L{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;const s={main:"UIb"};this.selectors={...s,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#t()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#t(){this.abortController=new AbortController;const e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener("click",()=>{this.costomEvent(t,String(t.dataset.value))},{signal:e})})}costomEvent(e,t){if(!t||t==="undefined"||t.trim()===""){console.log('Button data-value="" Not set!');return}this.dbug&&console.log(`CostomEvent: { detail: ${t}, bubbles: true }`),e.dispatchEvent(new CustomEvent("ui-button-change",{detail:{val:t},bubbles:!0}))}}m.Button=L,m.ButtonGroup=$,m.Select=E,m.SpinBox=g,m.Switch=S,Object.defineProperty(m,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)}.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{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;padding:0;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;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}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-700);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{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-100);background-color:var(--c-d-700)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-50)}.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{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-100);background-color:var(--c-i-700)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-50)}.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{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-100);background-color:var(--c-p-700)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-50)}.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{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-100);background-color:var(--c-s-700)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-50)}.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{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-700)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-50)}.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-500);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 .1s ease;cursor:pointer;border:1px solid var(--c-g-500)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-500);border-radius:1.5rem;transition:transform .1s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.6rem;right:3.2rem;color:var(--c-g-950);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-100);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:.9rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.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-950)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-300)}.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-100);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-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-300)}.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-100);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-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-300)}.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-100);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-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-300)}.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-100);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-950)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-300)}.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-100);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);border-color:var(--c-g-950);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;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:all .4s ease,color .4s ease}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-950)}.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-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIbg.danger>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-950)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);border-color:var(--c-d-950);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIbg.info>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-950)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);border-color:var(--c-i-950);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIbg.primary>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-950)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);border-color:var(--c-p-950);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIbg.success>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-950)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);border-color:var(--c-s-950);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIbg.warning>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-950)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);border-color:var(--c-w-950);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-100);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{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;padding:0;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;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}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-700);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{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-100);background-color:var(--c-d-700)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-50)}.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{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-100);background-color:var(--c-i-700)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-50)}.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{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-100);background-color:var(--c-p-700)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-50)}.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{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-100);background-color:var(--c-s-700)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-50)}.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{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-700)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-50)}.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:hover{background-color:var(--c-g-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--c-g-700);color:var(--c-g-50)}.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%;overflow:hidden}.UIselect-selected>span{max-width:100%;overflow:hidden;white-space:nowrap;text-align:center;display:inline-block}.UIselect-selected.center>span{margin:0 auto;text-align:left;max-width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;border-radius:.5rem;margin:2px 5px;height:calc(100% - 4px);width:2rem;background-color:var(--c-g-100)}.UIselect-arrow>svg{display:flex;margin:0 auto}.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;padding:0 7px;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.r-1>.UIselect-arrow{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:hover{background-color:var(--c-d-700)}.UIselect.danger:hover .UIselect-selected,.UIselect.danger:hover .UIselect-arrow{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700);background-color:var(--c-d-100)}.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:hover{background-color:var(--c-i-700)}.UIselect.info:hover .UIselect-selected,.UIselect.info:hover .UIselect-arrow{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700);background-color:var(--c-i-100)}.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:hover{background-color:var(--c-p-700)}.UIselect.primary:hover .UIselect-selected,.UIselect.primary:hover .UIselect-arrow{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700);background-color:var(--c-p-100)}.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:hover{background-color:var(--c-s-700)}.UIselect.success:hover .UIselect-selected,.UIselect.success:hover .UIselect-arrow{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700);background-color:var(--c-s-100)}.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:hover{background-color:var(--c-w-700)}.UIselect.warning:hover .UIselect-selected,.UIselect.warning:hover .UIselect-arrow{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700);background-color:var(--c-w-100)}.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-500);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 .1s ease;cursor:pointer;border:1px solid var(--c-g-500)}.UIsw-slider:before{z-index:1;content:"";position:absolute;top:0;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-500);border-radius:1.5rem;transition:transform .1s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;top:.6rem;right:3.2rem;color:var(--c-g-950);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-100);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:.9rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.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-950)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-300)}.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-100);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-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-300)}.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-100);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-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-300)}.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-100);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-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-300)}.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-100);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-950)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-300)}.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-100);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

@@ -1,8 +1,8 @@
 {
   "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.24",
+  "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio), Button",
+  "version": "0.0.26",
   "license": "MIT",
   "keywords": [
     "spinbox",
@@ -43,17 +43,17 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.5.3",
-    "sass": "^1.89.2",
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^10.0.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "jsdom": "^28.1.0",
+    "prettier": "^3.8.1",
+    "sass": "^1.97.3",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.18"
   }
 }