@popovandrii/ui-elements 0.0.31 → 0.1.1

package/dist/Button.d.ts

@@ -8,7 +8,11 @@ export declare class Button {
     private abortController;
     private dbug;
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
+    setValue(el: HTMLElement, value: string, label?: string): void;
     destroy(): void;
+    private disableEl;
+    private enableEl;
+    private isDisabled;
     private customEvent;
 }
 export {};

package/dist/ButtonGroup.d.ts

@@ -11,6 +11,8 @@ export declare class ButtonGroup {
     private dbug;
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     destroy(): void;
+    private disableEl;
+    setValue(el: HTMLElement, value: string): void;
     private costomEvent;
 }
 export {};

package/dist/Select.d.ts

@@ -20,6 +20,7 @@ export declare class Select {
     private filterExcluded;
     private filterSearch;
     destroy(): void;
+    private disableEl;
     /**
      *
      * @param el ID elements

package/dist/SpinBox.d.ts

@@ -12,6 +12,8 @@ export declare class SpinBox {
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     private state;
     destroy(): void;
+    private disableEl;
+    setValue(el: HTMLElement, value: string | number): void;
     getValidDataNumber: (el: HTMLElement, attr: string) => number;
     private event;
     private costomEvent;

package/dist/Switch.d.ts

@@ -9,6 +9,7 @@ export declare class Switch {
     private dbug;
     constructor(selectors?: Partial<SelectorMap>, dbug?: boolean);
     destroy(): void;
+    private disableEl;
     private event;
     /**
      * Sets the state of a specific switch by its ID.

package/dist/index.cjs.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...n,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};event(){this.abortController=new AbortController;let e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1],s=this.getValidDataNumber(t,`step`),c=this.getValidDataNumber(t,`min`),l=this.getValidDataNumber(t,`max`),u=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):(Number(i.value)>=l&&(i.value=l.toFixed(s)),l&&t.setAttribute(`aria-valuemax`,l.toFixed(s))),c&&t.setAttribute(`aria-valuemin`,c.toFixed(s)),this.state(Number(i.value),a,o,c,l),u(i.value);let d=null,f=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t+=1*e/10**s,t>l&&l!==0&&(t=l),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},p=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t-=1*e/10**s,t<c&&(t=c),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},m=(e,t=150)=>{d===null&&(d=window.setInterval(e,t))},h=()=>{d!==null&&(clearInterval(d),d=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>f(t))},{signal:e}),o.addEventListener(`touchstart`,()=>m(f),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,h,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=p(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>p(t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>m(p,100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,h,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),t===`ArrowUp`?f(n):p(n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,c=i.value.includes(`.`);(s===0&&!a||s>0&&!(a||o)||o&&c)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<c&&(i.value=c.toFixed(s)),Number(i.value)>l&&l!==0?i.value=l.toFixed(s):i.value=Number(i.value).toFixed(s),this.state(Number(i.value),a,o,c,l),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CostomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},t=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsw`,label:`UIsw-label`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),r?.disabled&&(t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let t=e.target.closest(`label`);t||(r.checked=!r.checked),t||r.dispatchEvent(new Event(`change`))},{signal:e}),t.addEventListener(`keydown`,e=>{let n=t.querySelector(`input`);e.key===`ArrowRight`?(r.checked=!0,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`true`)):e.key===`ArrowLeft`&&(r.checked=!1,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`false`))},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);r&&(r.checked=t,this.dbug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t)))})}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},n=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;selectMap=new Map;constructor(e={},t=!1){this.dbug=t;let n={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIFlash`,excludedItems:[`divider`,`test`]};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){e.closeAll(this.selectors),this.abortController&&(this.abortController.abort(),this.selectMap.clear()),this.main=null}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.dbug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.dbug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0})}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YouUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n);var u=[];o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim();r&&(u=this.filterSearch(c,o),o?(s.forEach(e=>e.remove()),u.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)})):s.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)}),this.itemArrow(t,a,r,n,e))},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)},{signal:e})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.abortController.signal})}},r=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.costomEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus()},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.costomEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.dbug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.costomEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}costomEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log(`CostomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},i=class{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;let n={main:`UIb`};this.selectors={...n,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener(`click`,()=>{this.customEvent(t,String(t.dataset.value))},{signal:e})})}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};exports.Button=i,exports.ButtonGroup=r,exports.Select=n,exports.SpinBox=e,exports.Switch=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...n,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.spinBoxes?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.spinBoxes=null}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.dbug&&console.warn(`UISpinBox: input not found`);return}n.value=String(t),n.dispatchEvent(new Event(`change`))}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};event(){this.abortController=new AbortController;let e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1];i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=this.getValidDataNumber(t,`step`),c=this.getValidDataNumber(t,`min`),l=this.getValidDataNumber(t,`max`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):Number(i.value)>=l&&(i.value=l.toFixed(s)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let u=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):(Number(i.value)>=l&&(i.value=l.toFixed(s)),l&&t.setAttribute(`aria-valuemax`,l.toFixed(s))),c&&t.setAttribute(`aria-valuemin`,c.toFixed(s)),this.state(Number(i.value),a,o,c,l),u(i.value);let d=null,f=(e,t=1)=>{i.value=String(Math.abs(Number(i.value)));let n=parseFloat(i.value)||0;return n+=e*t/10**s,e===1&&l!==0&&n>l&&(n=l),e===-1&&n<c&&(n=c),i.value=n.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},p=(e,t=150)=>{d===null&&(d=window.setInterval(e,t))},m=()=>{d!==null&&(clearInterval(d),d=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;p(()=>f(1,t))},{signal:e}),o.addEventListener(`touchstart`,()=>p(()=>f(1)),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,m,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(1,t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(-1,t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;p(()=>f(-1,t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>p(()=>f(-1),100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,m,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),f(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,c=i.value.includes(`.`);(s===0&&!a||s>0&&!(a||o)||o&&c)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<c&&(i.value=c.toFixed(s)),Number(i.value)>l&&l!==0?i.value=l.toFixed(s):i.value=Number(i.value).toFixed(s),this.state(Number(i.value),a,o,c,l),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CostomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},t=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsw`,label:`UIsw-label`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.main?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.main=null}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let t=e.target.closest(`label`);t||(r.checked=!r.checked),t||r.dispatchEvent(new Event(`change`))},{signal:e}),t.addEventListener(`keydown`,e=>{let n=t.querySelector(`input`);e.key===`ArrowRight`?(r.checked=!0,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`true`)):e.key===`ArrowLeft`&&(r.checked=!1,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`false`))},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);r&&(r.checked=t,this.dbug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t)))})}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},n=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;selectMap=new Map;constructor(e={},t=!1){this.dbug=t;let n={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIFlash`,excludedItems:[`divider`,`test`]};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.main?.forEach(e=>this.disableEl(e)),e.closeAll(this.selectors),this.abortController&&(this.abortController.abort(),this.selectMap.clear()),this.main=null}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.dbug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.dbug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0})}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YouUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n);var u=[];o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim();r&&(u=this.filterSearch(c,o),o?(s.forEach(e=>e.remove()),u.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)})):s.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)}),this.itemArrow(t,a,r,n,e))},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)},{signal:e})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.abortController.signal})}},r=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.main?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.main=null}disableEl(e){e.querySelectorAll(`.${this.selectors.btn}`).forEach(e=>{e.setAttribute(`aria-disabled`,`true`)}),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=e.querySelectorAll(`.${this.selectors.input}`),r=e.querySelectorAll(`.${this.selectors.btn}`),i=Array.from(n).findIndex(e=>e.value===t&&!e.disabled);if(i===-1){this.dbug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}n.forEach((e,t)=>{e.checked=t===i,t===i?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),r.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===i)),e.setAttribute(`tabindex`,t===i?`0`:`-1`)}),this.costomEvent(n[i])}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{t.querySelectorAll(`.${this.selectors.input}`).forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.costomEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus()},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.costomEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.dbug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.costomEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}costomEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log(`CostomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}},i=class{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIb`};this.selectors={...n,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}setValue(e,t,n){e.dataset.value=t,e.tagName===`A`&&(e.href=t),n!==void 0&&(e.textContent=n)}destroy(){this.buttons?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.buttons=null}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.buttons?.forEach(t=>{if(t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`){this.disableEl(t),t.tagName===`A`&&t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.enableEl(t),t.addEventListener(`click`,e=>{t.tagName===`A`&&e.preventDefault(),this.customEvent(t,String(t.dataset.value))},{signal:e})})}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}};exports.Button=i,exports.ButtonGroup=r,exports.Select=n,exports.SpinBox=e,exports.Switch=t;

package/dist/index.es.js

@@ -21,7 +21,21 @@ var e = class {
 		e == r || e < r ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1), i !== 0 && (e == i || e > i ? (n.classList.add(this.selectors.disabledBtn), n.disabled = !0) : (n.classList.remove(this.selectors.disabledBtn), n.disabled = !1));
 	};
 	destroy() {
-		this.abortController && this.abortController.abort(), this.spinBoxes = null;
+		this.spinBoxes?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.spinBoxes = null;
+	}
+	disableEl(e) {
+		let t = e.querySelector(`.${this.selectors.input}`), n = e.querySelectorAll(`.${this.selectors.btn}`);
+		t && (t.disabled = !0), n.forEach((e) => {
+			e.classList.add(this.selectors.disabledBtn), e.disabled = !0;
+		}), e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
+	}
+	setValue(e, t) {
+		let n = e.querySelector(`.${this.selectors.input}`);
+		if (!n) {
+			this.dbug && console.warn("UISpinBox: input not found");
+			return;
+		}
+		n.value = String(t), n.dispatchEvent(new Event("change"));
 	}
 	getValidDataNumber = (e, t) => {
 		let n = e.getAttribute(`data-${t}`);
@@ -33,51 +47,61 @@ var e = class {
 		this.spinBoxes?.forEach((t) => {
 			let n, r = t.querySelectorAll(`.${this.selectors.btn}`), i = t.querySelector(`.${this.selectors.input}`);
 			this.dbug && (r || console.log(`Buttons (${this.selectors.btn}) not found in container`), i || console.log(`Input (${this.selectors.input}) not found in container`));
-			let a = r[0], o = r[1], s = this.getValidDataNumber(t, "step"), c = this.getValidDataNumber(t, "min"), l = this.getValidDataNumber(t, "max"), u = (e) => {
+			let a = r[0], o = r[1];
+			i.disabled = !1, [a, o].forEach((e) => {
+				e.classList.remove(this.selectors.disabledBtn), e.disabled = !1;
+			}), t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled");
+			let s = this.getValidDataNumber(t, "step"), c = this.getValidDataNumber(t, "min"), l = this.getValidDataNumber(t, "max");
+			if (t.hasAttribute("data-disabled")) {
+				Number(i.value) <= c && (i.value = c.toFixed(s)), l === 0 ? i.value = Number(i.value).toFixed(s) : Number(i.value) >= l && (i.value = l.toFixed(s)), this.disableEl(t), t.addEventListener("click", (e) => {
+					e.preventDefault(), e.stopImmediatePropagation();
+				}, {
+					capture: !0,
+					signal: e
+				});
+				return;
+			}
+			let u = (e) => {
 				t.setAttribute("aria-valuenow", String(e)), t.setAttribute("aria-valuetext", `${e} items`);
 			};
 			Number(i.value) <= c && (i.value = c.toFixed(s)), l === 0 ? i.value = Number(i.value).toFixed(s) : (Number(i.value) >= l && (i.value = l.toFixed(s)), l && t.setAttribute("aria-valuemax", l.toFixed(s))), c && t.setAttribute("aria-valuemin", c.toFixed(s)), this.state(Number(i.value), a, o, c, l), u(i.value);
-			let d = null, f = (e = 1) => {
-				i.value = String(Math.abs(Number(i.value)));
-				let t = parseFloat(i.value) || 0;
-				return t += 1 * e / 10 ** s, t > l && l !== 0 && (t = l), i.value = t.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
-			}, p = (e = 1) => {
+			let d = null, f = (e, t = 1) => {
 				i.value = String(Math.abs(Number(i.value)));
-				let t = parseFloat(i.value) || 0;
-				return t -= 1 * e / 10 ** s, t < c && (t = c), i.value = t.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
-			}, m = (e, t = 150) => {
+				let n = parseFloat(i.value) || 0;
+				return n += e * t / 10 ** s, e === 1 && l !== 0 && n > l && (n = l), e === -1 && n < c && (n = c), i.value = n.toFixed(s), this.state(Number(i.value), a, o, c, l), u(i.value), i.value;
+			}, p = (e, t = 150) => {
 				d === null && (d = window.setInterval(e, t));
-			}, h = () => {
+			}, m = () => {
 				d !== null && (clearInterval(d), d = null);
 			};
 			o.addEventListener("mousedown", (e) => {
 				let t = e.shiftKey ? 3 : 1;
-				m(() => f(t));
-			}, { signal: e }), o.addEventListener("touchstart", () => m(f), { signal: e }), [
+				p(() => f(1, t));
+			}, { signal: e }), o.addEventListener("touchstart", () => p(() => f(1)), { signal: e }), [
 				"mouseup",
 				"mouseleave",
 				"mouseout",
 				"touchend",
 				"touchcancel"
 			].forEach((t) => {
-				o.addEventListener(t, h, { signal: e });
+				o.addEventListener(t, m, { signal: e });
 			}), o.addEventListener("click", (e) => {
 				let t = e.shiftKey ? 3 : 1;
-				d === null && (n = f(t), this.costomEvent(i, n));
+				d === null && (n = f(1, t), this.costomEvent(i, n));
 			}, { signal: e }), a.addEventListener("click", (e) => {
 				let t = e.shiftKey ? 3 : 1;
-				d === null && (n = p(t), this.costomEvent(i, n));
+				d === null && (n = f(-1, t), this.costomEvent(i, n));
 			}, { signal: e }), a.addEventListener("mousedown", (e) => {
 				let t = e.shiftKey ? 3 : 1;
-				m(() => p(t), 100);
-			}, { signal: e }), a.addEventListener("touchstart", () => m(p, 100), { signal: e }), [
+				p(() => f(-1, t), 100);
+			}, { signal: e }), a.addEventListener("touchstart", () => p(() => f(-1), 100), { signal: e }), [
 				"mouseup",
 				"mouseleave",
 				"mouseout",
 				"touchend",
 				"touchcancel"
 			].forEach((t) => {
-				a.addEventListener(t, h, { signal: e });
+				a.addEventListener(t, m, { signal: e });
 			}), i.addEventListener("keydown", (e) => {
 				let t = e.key, n = e.shiftKey ? 5 : 1;
 				if ([
@@ -104,7 +128,7 @@ var e = class {
 					return;
 				}
 				if (t === "ArrowUp" || t === "ArrowDown") {
-					e.preventDefault(), t === "ArrowUp" ? f(n) : p(n);
+					e.preventDefault(), f(t === "ArrowUp" ? 1 : -1, n);
 					return;
 				}
 				let r = t === "," ? "." : t, a = /^[0-9]$/.test(r), o = r === ".", c = i.value.includes(".");
@@ -143,14 +167,19 @@ var e = class {
 		}, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.event();
 	}
 	destroy() {
-		this.abortController && this.abortController.abort(), this.main = null;
+		this.main?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.main = null;
+	}
+	disableEl(e) {
+		e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
 	}
 	event() {
 		this.abortController = new AbortController();
 		let e = this.abortController.signal;
 		this.main?.forEach((t) => {
 			let n = t.querySelector(`.${this.selectors.label}`), r = t.querySelector("input");
-			n && n.id && t.setAttribute("aria-labelledby", n.id), r?.disabled && (t.setAttribute("tabindex", "-1"), t.setAttribute("aria-disabled", "true"), t.addEventListener("click", (e) => {
+			n && n.id && t.setAttribute("aria-labelledby", n.id), t.hasAttribute("data-originally-disabled") || t.setAttribute("data-originally-disabled", String(r?.disabled ?? !1));
+			let i = t.getAttribute("data-originally-disabled") === "true";
+			r && (r.disabled = !1), t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled"), i && (r && (r.disabled = !0), t.setAttribute("tabindex", "-1"), t.setAttribute("aria-disabled", "true"), t.addEventListener("click", (e) => {
 				e.preventDefault(), e.stopImmediatePropagation();
 			}, {
 				capture: !0,
@@ -219,7 +248,10 @@ var e = class {
 		});
 	}
 	destroy() {
-		e.closeAll(this.selectors), this.abortController && (this.abortController.abort(), this.selectMap.clear()), this.main = null;
+		this.main?.forEach((e) => this.disableEl(e)), e.closeAll(this.selectors), this.abortController && (this.abortController.abort(), this.selectMap.clear()), this.main = null;
+	}
+	disableEl(e) {
+		e.setAttribute("tabindex", "-1"), e.setAttribute("aria-disabled", "true");
 	}
 	setValue(e, t) {
 		let n = this.selectMap.get(e);
@@ -247,6 +279,15 @@ var e = class {
 				return console.warn("Not found:", e.message);
 			}
 			let r = t.querySelector(`.${this.selectors.selected}`), i = t.querySelector(`.${this.selectors.arrow}`), a = t.querySelector(`.${this.selectors.optionsList}`), o = t.querySelector(`.${this.selectors.search} input`);
+			if (t.setAttribute("tabindex", "0"), t.removeAttribute("aria-disabled"), t.hasAttribute("data-disabled")) {
+				this.disableEl(t), t.addEventListener("click", (e) => {
+					e.preventDefault(), e.stopImmediatePropagation();
+				}, {
+					capture: !0,
+					signal: e
+				});
+				return;
+			}
 			this.selectMap.set(t, {
 				input: n,
 				selected: r
@@ -358,12 +399,32 @@ var e = class {
 		}, this.main = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
 	}
 	destroy() {
-		this.abortController && this.abortController.abort(), this.main = null;
+		this.main?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.main = null;
+	}
+	disableEl(e) {
+		e.querySelectorAll(`.${this.selectors.btn}`).forEach((e) => {
+			e.setAttribute("aria-disabled", "true");
+		}), e.setAttribute("aria-disabled", "true");
+	}
+	setValue(e, t) {
+		let n = e.querySelectorAll(`.${this.selectors.input}`), r = e.querySelectorAll(`.${this.selectors.btn}`), i = Array.from(n).findIndex((e) => e.value === t && !e.disabled);
+		if (i === -1) {
+			this.dbug && console.warn(`UIButtonGroup: value "${t}" not found or disabled`);
+			return;
+		}
+		n.forEach((e, t) => {
+			e.checked = t === i, t === i ? e.setAttribute("checked", "") : e.removeAttribute("checked");
+		}), r.forEach((e, t) => {
+			e.setAttribute("aria-checked", String(t === i)), e.setAttribute("tabindex", t === i ? "0" : "-1");
+		}), this.costomEvent(n[i]);
 	}
 	#e() {
 		this.abortController = new AbortController();
 		let e = this.abortController.signal;
 		this.main?.forEach((t) => {
+			t.querySelectorAll(`.${this.selectors.input}`).forEach((e) => {
+				e.hasAttribute("data-originally-disabled") || e.setAttribute("data-originally-disabled", String(e.disabled)), e.disabled = e.getAttribute("data-originally-disabled") === "true";
+			}), t.removeAttribute("aria-disabled");
 			let n = t.querySelector(`.${this.selectors.input}:checked`);
 			n && this.costomEvent(n);
 			let r = t.querySelectorAll(`.${this.selectors.btn}`);
@@ -417,7 +478,7 @@ var e = class {
 	buttons = null;
 	abortController = new AbortController();
 	dbug;
-	constructor(e = {}, t = !0) {
+	constructor(e = {}, t = !1) {
 		this.dbug = t;
 		let n = { main: "UIb" };
 		this.selectors = {
@@ -425,15 +486,36 @@ var e = class {
 			...e
 		}, this.buttons = document.querySelectorAll(`.${this.selectors.main}`), this.#e();
 	}
+	setValue(e, t, n) {
+		e.dataset.value = t, e.tagName === "A" && (e.href = t), n !== void 0 && (e.textContent = n);
+	}
 	destroy() {
-		this.abortController && this.abortController.abort(), this.buttons = null;
+		this.buttons?.forEach((e) => this.disableEl(e)), this.abortController && this.abortController.abort(), this.buttons = null;
+	}
+	disableEl(e) {
+		e.tagName === "BUTTON" ? e.disabled = !0 : (e.setAttribute("aria-disabled", "true"), e.setAttribute("tabindex", "-1"));
+	}
+	enableEl(e) {
+		e.tagName === "BUTTON" ? e.disabled = !1 : (e.removeAttribute("aria-disabled"), e.setAttribute("tabindex", "0"));
+	}
+	isDisabled(e) {
+		return e.tagName === "BUTTON" ? e.disabled : e.getAttribute("aria-disabled") === "true";
 	}
 	#e() {
 		this.abortController = new AbortController();
 		let e = this.abortController.signal;
 		this.buttons?.forEach((t) => {
-			t.addEventListener("click", () => {
-				this.customEvent(t, String(t.dataset.value));
+			if (t.hasAttribute("data-originally-disabled") || t.setAttribute("data-originally-disabled", String(this.isDisabled(t))), t.getAttribute("data-originally-disabled") === "true") {
+				this.disableEl(t), t.tagName === "A" && t.addEventListener("click", (e) => {
+					e.preventDefault(), e.stopImmediatePropagation();
+				}, {
+					capture: !0,
+					signal: e
+				});
+				return;
+			}
+			this.enableEl(t), t.addEventListener("click", (e) => {
+				t.tagName === "A" && e.preventDefault(), this.customEvent(t, String(t.dataset.value));
 			}, { signal: e });
 		});
 	}

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...n,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.abortController&&this.abortController.abort(),this.spinBoxes=null}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};event(){this.abortController=new AbortController;let e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1],s=this.getValidDataNumber(t,`step`),c=this.getValidDataNumber(t,`min`),l=this.getValidDataNumber(t,`max`),u=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):(Number(i.value)>=l&&(i.value=l.toFixed(s)),l&&t.setAttribute(`aria-valuemax`,l.toFixed(s))),c&&t.setAttribute(`aria-valuemin`,c.toFixed(s)),this.state(Number(i.value),a,o,c,l),u(i.value);let d=null,f=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t+=1*e/10**s,t>l&&l!==0&&(t=l),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},p=(e=1)=>{i.value=String(Math.abs(Number(i.value)));let t=parseFloat(i.value)||0;return t-=1*e/10**s,t<c&&(t=c),i.value=t.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},m=(e,t=150)=>{d===null&&(d=window.setInterval(e,t))},h=()=>{d!==null&&(clearInterval(d),d=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>f(t))},{signal:e}),o.addEventListener(`touchstart`,()=>m(f),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,h,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=p(t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;m(()=>p(t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>m(p,100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,h,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),t===`ArrowUp`?f(n):p(n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,c=i.value.includes(`.`);(s===0&&!a||s>0&&!(a||o)||o&&c)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<c&&(i.value=c.toFixed(s)),Number(i.value)>l&&l!==0?i.value=l.toFixed(s):i.value=Number(i.value).toFixed(s),this.state(Number(i.value),a,o,c,l),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CostomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsw`,label:`UIsw-label`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),r?.disabled&&(t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let t=e.target.closest(`label`);t||(r.checked=!r.checked),t||r.dispatchEvent(new Event(`change`))},{signal:e}),t.addEventListener(`keydown`,e=>{let n=t.querySelector(`input`);e.key===`ArrowRight`?(r.checked=!0,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`true`)):e.key===`ArrowLeft`&&(r.checked=!1,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`false`))},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);r&&(r.checked=t,this.dbug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t)))})}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;selectMap=new Map;constructor(e={},t=!1){this.dbug=t;let n={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIFlash`,excludedItems:[`divider`,`test`]};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){e.closeAll(this.selectors),this.abortController&&(this.abortController.abort(),this.selectMap.clear()),this.main=null}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.dbug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.dbug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0})}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YouUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n);var u=[];o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim();r&&(u=this.filterSearch(c,o),o?(s.forEach(e=>e.remove()),u.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)})):s.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)}),this.itemArrow(t,a,r,n,e))},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)},{signal:e})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.abortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.main=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.costomEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus()},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.costomEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.dbug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.costomEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}costomEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log(`CostomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}};e.Button=class{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!0){this.dbug=t;let n={main:`UIb`};this.selectors={...n,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.abortController&&this.abortController.abort(),this.buttons=null}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.buttons?.forEach(t=>{t.addEventListener(`click`,()=>{this.customEvent(t,String(t.dataset.value))},{signal:e})})}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}},e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UiElements={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=class{selectors;spinBoxes;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsp`,btn:`UIsp__btn`,input:`UIsp__input`,disabledBtn:`disabled`};this.selectors={...n,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),this.event()}state=(e,t,n,r=0,i=0)=>{e==r||e<r?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1),i!==0&&(e==i||e>i?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1))};destroy(){this.spinBoxes?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.spinBoxes=null}disableEl(e){let t=e.querySelector(`.${this.selectors.input}`),n=e.querySelectorAll(`.${this.selectors.btn}`);t&&(t.disabled=!0),n.forEach(e=>{e.classList.add(this.selectors.disabledBtn),e.disabled=!0}),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=e.querySelector(`.${this.selectors.input}`);if(!n){this.dbug&&console.warn(`UISpinBox: input not found`);return}n.value=String(t),n.dispatchEvent(new Event(`change`))}getValidDataNumber=(e,t)=>{let n=e.getAttribute(`data-${t}`);return n===null||n.trim()===``||isNaN(Number(n))?0:Number(n)};event(){this.abortController=new AbortController;let e=this.abortController.signal;this.spinBoxes?.forEach(t=>{let n,r=t.querySelectorAll(`.${this.selectors.btn}`),i=t.querySelector(`.${this.selectors.input}`);this.dbug&&(r||console.log(`Buttons (${this.selectors.btn}) not found in container`),i||console.log(`Input (${this.selectors.input}) not found in container`));let a=r[0],o=r[1];i.disabled=!1,[a,o].forEach(e=>{e.classList.remove(this.selectors.disabledBtn),e.disabled=!1}),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`);let s=this.getValidDataNumber(t,`step`),c=this.getValidDataNumber(t,`min`),l=this.getValidDataNumber(t,`max`);if(t.hasAttribute(`data-disabled`)){Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):Number(i.value)>=l&&(i.value=l.toFixed(s)),this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}let u=e=>{t.setAttribute(`aria-valuenow`,String(e)),t.setAttribute(`aria-valuetext`,`${e} items`)};Number(i.value)<=c&&(i.value=c.toFixed(s)),l===0?i.value=Number(i.value).toFixed(s):(Number(i.value)>=l&&(i.value=l.toFixed(s)),l&&t.setAttribute(`aria-valuemax`,l.toFixed(s))),c&&t.setAttribute(`aria-valuemin`,c.toFixed(s)),this.state(Number(i.value),a,o,c,l),u(i.value);let d=null,f=(e,t=1)=>{i.value=String(Math.abs(Number(i.value)));let n=parseFloat(i.value)||0;return n+=e*t/10**s,e===1&&l!==0&&n>l&&(n=l),e===-1&&n<c&&(n=c),i.value=n.toFixed(s),this.state(Number(i.value),a,o,c,l),u(i.value),i.value},p=(e,t=150)=>{d===null&&(d=window.setInterval(e,t))},m=()=>{d!==null&&(clearInterval(d),d=null)};o.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;p(()=>f(1,t))},{signal:e}),o.addEventListener(`touchstart`,()=>p(()=>f(1)),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{o.addEventListener(t,m,{signal:e})}),o.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(1,t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`click`,e=>{let t=e.shiftKey?3:1;d===null&&(n=f(-1,t),this.costomEvent(i,n))},{signal:e}),a.addEventListener(`mousedown`,e=>{let t=e.shiftKey?3:1;p(()=>f(-1,t),100)},{signal:e}),a.addEventListener(`touchstart`,()=>p(()=>f(-1),100),{signal:e}),[`mouseup`,`mouseleave`,`mouseout`,`touchend`,`touchcancel`].forEach(t=>{a.addEventListener(t,m,{signal:e})}),i.addEventListener(`keydown`,e=>{let t=e.key,n=e.shiftKey?5:1;if([`Backspace`,`Delete`,`ArrowLeft`,`ArrowRight`,`Tab`,`Enter`,`Home`,`End`].includes(t)||(e.ctrlKey||e.metaKey)&&[`a`,`c`,`v`,`x`].includes(t.toLowerCase()))return;if([`e`,`+`,`-`].includes(t)){e.preventDefault();return}if(t===`ArrowUp`||t===`ArrowDown`){e.preventDefault(),f(t===`ArrowUp`?1:-1,n);return}let r=t===`,`?`.`:t,a=/^[0-9]$/.test(r),o=r===`.`,c=i.value.includes(`.`);(s===0&&!a||s>0&&!(a||o)||o&&c)&&e.preventDefault()},{signal:e}),i.addEventListener(`keyup`,e=>{(e.key===`ArrowUp`||e.key===`ArrowDown`)&&this.costomEvent(i,i.value)},{signal:e}),i.addEventListener(`change`,()=>{Number(i.value)<c&&(i.value=c.toFixed(s)),Number(i.value)>l&&l!==0?i.value=l.toFixed(s):i.value=Number(i.value).toFixed(s),this.state(Number(i.value),a,o,c,l),this.costomEvent(i,i.value)},{signal:e})})}costomEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CostomEvent: data.detail `,n.detail),e.dispatchEvent(new CustomEvent(`ui-spinbox-change`,n))}},n=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIsw`,label:`UIsw-label`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event()}destroy(){this.main?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.main=null}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.label}`),r=t.querySelector(`input`);n&&n.id&&t.setAttribute(`aria-labelledby`,n.id),t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(r?.disabled??!1));let i=t.getAttribute(`data-originally-disabled`)===`true`;r&&(r.disabled=!1),t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),i&&(r&&(r.disabled=!0),t.setAttribute(`tabindex`,`-1`),t.setAttribute(`aria-disabled`,`true`),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e})),r&&(r.checked?t.setAttribute(`aria-checked`,`true`):t.setAttribute(`aria-checked`,`false`),r.addEventListener(`change`,()=>{t.setAttribute(`aria-checked`,String(r.checked)),this.customEvent(r,String(r.checked))},{signal:e}),t.addEventListener(`click`,e=>{if(e.target.tagName===`INPUT`)return;let t=e.target.closest(`label`);t||(r.checked=!r.checked),t||r.dispatchEvent(new Event(`change`))},{signal:e}),t.addEventListener(`keydown`,e=>{let n=t.querySelector(`input`);e.key===`ArrowRight`?(r.checked=!0,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`true`)):e.key===`ArrowLeft`&&(r.checked=!1,t.setAttribute(`aria-checked`,String(r.checked)),e.preventDefault(),this.customEvent(n,`false`))},{signal:e}))})}setValue(e,t){this.main?.forEach(n=>{let r=n.querySelector(`input#${e}`);r&&(r.checked=t,this.dbug&&console.log(`SetValue:`,r.checked),n.setAttribute(`aria-checked`,String(t)),this.customEvent(r,String(t)))})}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-switch-change`,n))}},r=class e{selectors;main=null;itemArrowInitialized=new WeakSet;abortController=new AbortController;dbug;selectMap=new Map;constructor(e={},t=!1){this.dbug=t;let n={idPrefix:`UI-option-`,main:`UIselect`,selected:`UIselect-selected`,arrow:`UIselect-arrow`,optionsList:`UIselect-options`,search:`UIselect-options__search`,items:`UIselect-options__items`,flash:`UIFlash`,excludedItems:[`divider`,`test`]};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),this.initGlobalListener(this.selectors)}filterExcluded(e,t){return Array.from(e).filter(e=>!t.some(t=>typeof t==`string`?e.classList.contains(t)||e.id===t:e===t))}filterSearch(e,t){let n=t.trim().toLowerCase();return e.filter(e=>{let t=e.dataset.value?.toLowerCase()||``,r=e.textContent?.toLowerCase()||``;return t.includes(n)||r.includes(n)})}destroy(){this.main?.forEach(e=>this.disableEl(e)),e.closeAll(this.selectors),this.abortController&&(this.abortController.abort(),this.selectMap.clear()),this.main=null}disableEl(e){e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=this.selectMap.get(e);if(!n){this.dbug&&console.warn(`UISelect: element not registered`);return}let{input:r,selected:i}=n,a=e.querySelector(`.${this.selectors.optionsList}`);if(!a)return;let o=Array.from(a.querySelectorAll(`.${this.selectors.items} ul li`)),s=this.filterExcluded(o,this.selectors.excludedItems),c=s.find(e=>String(e.dataset.value)===String(t));if(!c){this.dbug&&console.warn(`UISelect: value "${t}" not found`);return}s.forEach(e=>e.removeAttribute(`aria-selected`)),c.setAttribute(`aria-selected`,`true`),i.textContent=c.textContent??``,r.value=String(t),r.setAttribute(`value`,String(t)),e.setAttribute(`aria-activedescendant`,c.id||`${this.selectors.idPrefix}${s.indexOf(c)}`),this.customEvent(e,String(t)),e.classList.remove(this.selectors.flash),e.offsetWidth,e.classList.add(this.selectors.flash),e.addEventListener(`animationend`,()=>e.classList.remove(this.selectors.flash),{once:!0})}event(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{let n=t.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!n)throw Error(`<input type="hidden" name="YouUniqueId">`)}catch(e){return console.warn(`Not found:`,e.message)}let r=t.querySelector(`.${this.selectors.selected}`),i=t.querySelector(`.${this.selectors.arrow}`),a=t.querySelector(`.${this.selectors.optionsList}`),o=t.querySelector(`.${this.selectors.search} input`);if(t.setAttribute(`tabindex`,`0`),t.removeAttribute(`aria-disabled`),t.hasAttribute(`data-disabled`)){this.disableEl(t),t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.selectMap.set(t,{input:n,selected:r}),i&&i.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),r.addEventListener(`click`,()=>{this.toggle(t,a)},{signal:e}),t.addEventListener(`click`,()=>{this.itemsPosition(a)},{signal:e});let s=a.querySelectorAll(`.${this.selectors.items} ul li`),c=this.filterExcluded(s,this.selectors.excludedItems),l=t.querySelector(`[aria-selected='true']`);l&&this.defaultSelect(t,l,r,n);var u=[];o&&o.addEventListener(`input`,i=>{let o=i.target.value.trim();r&&(u=this.filterSearch(c,o),o?(s.forEach(e=>e.remove()),u.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)})):s.forEach(e=>{a.querySelector(`.${this.selectors.optionsList} ul`)?.appendChild(e)}),this.itemArrow(t,a,r,n,e))},{signal:e}),this.itemArrow(t,a,r,n,e),this.items(t,a,c,r,n,e)},{signal:e})}itemArrow(e,t,n,r,i){if(this.itemArrowInitialized.has(e))return;this.itemArrowInitialized.add(e);let a=-1,o=n.textContent?n.textContent:``,s=e.querySelector(`.${this.selectors.search} input`);e.addEventListener(`keydown`,i=>{s&&s.focus();let c=Array.from(t.querySelectorAll(`.${this.selectors.optionsList} ul li`)),l=this.filterExcluded(c,this.selectors.excludedItems),u=l.length;if(u!==0)if(i.key===`ArrowDown`){i.preventDefault(),e.getAttribute(`aria-expanded`)===`false`&&this.toggle(e,t),a=(a+1)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let r=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,r),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`ArrowUp`){i.preventDefault(),a=(a-1+u)%u,n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let t=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,t),l[a].scrollIntoView({block:`nearest`})}else if(i.key===`Enter`)if(i.preventDefault(),a>=0){n.textContent=l[a].textContent,l.forEach(e=>e.removeAttribute(`aria-selected`)),l[a].setAttribute(`aria-selected`,`true`);let i=l[a].id||`${this.selectors.idPrefix}${a}`;e.setAttribute(`aria-activedescendant`,i),r.value=String(l[a].dataset.value),this.customEvent(e,r.value),this.close(e,t)}else this.toggle(e,t);else i.key===`Escape`&&(e.getAttribute(`aria-activedescendant`)||(n.textContent=o),this.close(e,t))},{signal:i})}itemsPosition(e){let t=e.querySelector(`[aria-selected="true"]`);t&&t.scrollIntoView({block:`nearest`})}items(e,t,n,r,i,a){n.forEach((o,s)=>{o.addEventListener(`click`,()=>{let a=n[s];if(a){r.textContent=a.textContent,n.forEach(e=>e.removeAttribute(`aria-selected`)),a.setAttribute(`aria-selected`,`true`);let o=a.id||`${this.selectors.idPrefix}${s}`;e.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-activedescendant`,o),i.value=String(n[s].dataset.value),this.customEvent(e,i.value),this.close(e,t)}},{signal:a})})}defaultSelect(e,t,n,r){t&&(r.setAttribute(`value`,t.dataset.value??``),n.textContent=t.textContent??``,e.setAttribute(`aria-activedescendant`,t.id||``))}customEvent(e,t){let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.log(`CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-select-change`,n))}toggle(t,n){e.closeAll(this.selectors),n.hidden?(n.hidden=!1,t.setAttribute(`aria-expanded`,`true`)):this.close(t,n)}close(e,t){t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(t=>{let n=t.querySelector(`.${e.optionsList}`);n.hidden=!0,t.setAttribute(`aria-expanded`,`false`)})}initGlobalListener(t){document.addEventListener(`click`,n=>{let r=n.target;[...document.querySelectorAll(`.${t.main}`)].some(e=>e.contains(r))||e.closeAll(t)},{signal:this.abortController.signal})}},i=class{selectors;main=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIbg`,btn:`UIbg-btn`,input:`UIbg-input`};this.selectors={...n,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}destroy(){this.main?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.main=null}disableEl(e){e.querySelectorAll(`.${this.selectors.btn}`).forEach(e=>{e.setAttribute(`aria-disabled`,`true`)}),e.setAttribute(`aria-disabled`,`true`)}setValue(e,t){let n=e.querySelectorAll(`.${this.selectors.input}`),r=e.querySelectorAll(`.${this.selectors.btn}`),i=Array.from(n).findIndex(e=>e.value===t&&!e.disabled);if(i===-1){this.dbug&&console.warn(`UIButtonGroup: value "${t}" not found or disabled`);return}n.forEach((e,t)=>{e.checked=t===i,t===i?e.setAttribute(`checked`,``):e.removeAttribute(`checked`)}),r.forEach((e,t)=>{e.setAttribute(`aria-checked`,String(t===i)),e.setAttribute(`tabindex`,t===i?`0`:`-1`)}),this.costomEvent(n[i])}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.main?.forEach(t=>{t.querySelectorAll(`.${this.selectors.input}`).forEach(e=>{e.hasAttribute(`data-originally-disabled`)||e.setAttribute(`data-originally-disabled`,String(e.disabled)),e.disabled=e.getAttribute(`data-originally-disabled`)===`true`}),t.removeAttribute(`aria-disabled`);let n=t.querySelector(`.${this.selectors.input}:checked`);n&&this.costomEvent(n);let r=t.querySelectorAll(`.${this.selectors.btn}`);r.forEach(t=>{t.addEventListener(`click`,()=>{r.forEach(e=>{e.setAttribute(`aria-checked`,`false`),e.setAttribute(`tabindex`,`-1`)}),t.setAttribute(`aria-checked`,`true`),t.setAttribute(`tabindex`,`0`),t.focus()},{signal:e}),t.addEventListener(`keydown`,e=>{let n=Array.from(r).indexOf(t);if(e.key===`ArrowRight`&&n++,e.key===`ArrowLeft`&&n--,n<0&&(n=r.length-1),n>=r.length&&(n=0),e.key===`Enter`){let t=i[n];t&&!t.disabled&&(i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),t.checked=!0,t.setAttribute(`checked`,``),this.costomEvent(t)),e.preventDefault();return}let a=r[n];a&&(r.forEach(e=>e.setAttribute(`tabindex`,`-1`)),a.setAttribute(`tabindex`,`0`),a.focus())},{signal:e})});let i=t.querySelectorAll(`.${this.selectors.input}`);i.forEach((t,n)=>{this.dbug&&(t.id||console.error(`Input #${n} in group has no ID!`),(!t.value||t.value===`on`)&&console.warn(`Input #${t.id} does not have a value specified (currently "${t.value}")`));let a=r[n];a&&(t.tabIndex=-1,a.setAttribute(`role`,`radio`),a.setAttribute(`aria-checked`,String(t.checked)),a.setAttribute(`tabindex`,t.checked?`0`:`-1`),t.disabled?a.setAttribute(`aria-disabled`,`true`):a.removeAttribute(`aria-disabled`),t.addEventListener(`click`,()=>{i.forEach(e=>{e.checked=!1,e.removeAttribute(`checked`)}),i[n].checked=!0,i[n].setAttribute(`checked`,``),this.costomEvent(t)},{signal:e}))});let a=Array.from(i).find(e=>e.checked&&!e.disabled)||Array.from(i).find(e=>!e.disabled);if(a){let e=t.querySelector(`label[for="${a.id}"]`);e&&e.setAttribute(`tabindex`,`0`)}})}costomEvent(e){let t={detail:{id:e.id,value:e.value},bubbles:!0};this.dbug&&console.log(`CostomEvent:`,t.detail),e.dispatchEvent(new CustomEvent(`ui-button-group-change`,t))}};e.Button=class{selectors;buttons=null;abortController=new AbortController;dbug;constructor(e={},t=!1){this.dbug=t;let n={main:`UIb`};this.selectors={...n,...e},this.buttons=document.querySelectorAll(`.${this.selectors.main}`),this.#e()}setValue(e,t,n){e.dataset.value=t,e.tagName===`A`&&(e.href=t),n!==void 0&&(e.textContent=n)}destroy(){this.buttons?.forEach(e=>this.disableEl(e)),this.abortController&&this.abortController.abort(),this.buttons=null}disableEl(e){e.tagName===`BUTTON`?e.disabled=!0:(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`))}enableEl(e){e.tagName===`BUTTON`?e.disabled=!1:(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,`0`))}isDisabled(e){return e.tagName===`BUTTON`?e.disabled:e.getAttribute(`aria-disabled`)===`true`}#e(){this.abortController=new AbortController;let e=this.abortController.signal;this.buttons?.forEach(t=>{if(t.hasAttribute(`data-originally-disabled`)||t.setAttribute(`data-originally-disabled`,String(this.isDisabled(t))),t.getAttribute(`data-originally-disabled`)===`true`){this.disableEl(t),t.tagName===`A`&&t.addEventListener(`click`,e=>{e.preventDefault(),e.stopImmediatePropagation()},{capture:!0,signal:e});return}this.enableEl(t),t.addEventListener(`click`,e=>{t.tagName===`A`&&e.preventDefault(),this.customEvent(t,String(t.dataset.value))},{signal:e})})}customEvent(e,t){if(!t||t===`undefined`||t.trim()===``){console.warn(`Button data-value="" Not set!`);return}let n={detail:{id:e.id,value:t},bubbles:!0};this.dbug&&console.info(`Button CustomEvent:`,n.detail),e.dispatchEvent(new CustomEvent(`ui-button-change`,n))}},e.ButtonGroup=i,e.Select=r,e.SpinBox=t,e.Switch=n});

package/dist/style.css

@@ -1 +1 @@
-.UIbg{grid-auto-columns:minmax(min-content,1fr);grid-auto-flow:column;align-content:center;gap:.5rem;display:grid}.UIbg.vertical{grid-auto-rows:min-content;grid-auto-flow:row}.UIbg-input{opacity:0;pointer-events:none;position:absolute}.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;background-color:var(--c-g-100);border:1px solid var(--c-g-500);height:2.5rem;color:var(--c-g-950);border-radius:.5rem;justify-content:center;align-items:center;padding:.125rem;font-size:1rem;transition:all .4s,color .4s;display:flex}.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:0;border-radius: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{grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;background-color:var(--c-g-100);border:1px solid var(--c-g-500);height:2.5rem;color:var(--c-g-950);border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.125rem .75rem;font-size:1rem;transition:background-color .4s,color .1s;display:flex}.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{grid-template-columns:min-content 1fr min-content;align-self:end;align-items:end;width:13rem;display:grid}.UIsp>.UIsp-label{grid-column:1/-1;padding:0 0 .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{text-align:center;background-color:var(--c-g-50);height:2.5rem;color:var(--c-g-700);border:none;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box;outline:none;width:100%;min-width:3rem;padding:0;font-size:1.5rem;font-weight:700}.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;background-color:var(--c-g-100);border:none;border:1px solid var(--c-g-500);width:3rem;height:2.5rem;color:var(--c-g-950);border-radius:.5rem 0 0 .5rem;justify-content:center;align-items:center;padding:0;font-size:2rem;transition:background-color .4s,color .1s;display:flex}.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-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:0 0 0 .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{height:2rem;font-size:1rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{height:3rem;font-size:2rem}.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{background-color:var(--c-g-500);cursor:pointer;box-sizing:border-box;white-space:nowrap;border-radius:.5rem;align-self:end;width:12rem;min-width:10rem;height:2.5rem;display:flex;position:relative}.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{background-color:var(--c-g-100);border-radius:.5rem;align-items:center;width:100%;height:calc(100% - 2px);margin:1px;padding:0 .5rem;display:flex;overflow:hidden}.UIselect-selected>span{white-space:nowrap;text-align:center;max-width:100%;display:inline-block;overflow:hidden}.UIselect-selected.center>span{text-align:left;max-width:100%;margin:0 auto}.UIselect-arrow{background-color:var(--c-g-100);border-radius:.5rem;place-content:center;align-items:center;width:2rem;height:calc(100% - 4px);margin:2px 5px;font-size:.8rem;position:absolute;top:0;right:0}.UIselect-arrow>svg{margin:0 auto;display:flex}.UIselect-options{width:inherit;background-color:var(--c-g-100);color:var(--c-g-950);z-index:2;box-sizing:border-box;border:1px solid var(--c-g-500);border-radius:.5rem;margin:0;padding:0;list-style:none;position:absolute;left:0;overflow:hidden}.UIselect-options__search{padding:1px 2px;position:sticky;top:1px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--c-g-300);box-shadow:none;background-color:var(--c-g-50);color:var(--c-g-950);border-radius:.5rem;padding:0 7px;font-size:1.5rem}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{margin:0;padding:0;list-style:none}.UIselect-options__items>ul>li{border-radius:.5rem;align-items:center;height:2.5rem;margin:1px;padding:0 .5rem;display:flex}.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{background-color:var(--c-g-300);height:1px;margin:0 .25rem}.UIselect.r-0,.UIselect.r-0>.UIselect-selected,.UIselect.r-0>.UIselect-options,.UIselect.r-0>.UIselect-options>li.UIselect-options__search,.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input,.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1,.UIselect.r-1>.UIselect-selected,.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{background-color:var(--c-d-300);height:1px}.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{background-color:var(--c-i-300);height:1px}.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{background-color:var(--c-p-300);height:1px}.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{background-color:var(--c-s-300);height:1px}.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{background-color:var(--c-w-300);height:1px}.UIsw{align-items:center;gap:1.5rem;display:inline-flex;position:relative}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{background-color:var(--c-g-100);cursor:pointer;border:1px solid var(--c-g-300);border-radius:1.5rem;width:5rem;height:2.5rem;transition:background-color .4s,border-color .4s;position:relative}.UIsw-slider:before{z-index:1;content:"";background-color:var(--c-g-300);border-radius:1.5rem;width:2.5rem;height:2.5rem;transition:transform .1s;position:absolute;left:0}.UIsw-slider:hover{border-color:var(--c-g-50);color:var(--c-g-300)}.UIsw-slider:hover~.UIsw-slider__on,.UIsw-slider:hover~.UIsw-slider__off{color:var(--c-g-300);transition:color .4s}.UIsw-slider__on,.UIsw-slider__off{color:var(--c-g-950);cursor:pointer;transition:color .4s;position:absolute;right:3rem}.UIsw-slider__on:hover,.UIsw-slider__off:hover{color:var(--c-g-300)}.UIsw-slider__off{color:var(--c-g-700);right:.7rem}.UIsw:has(>input:disabled){pointer-events:none}.UIsw:has(>input:disabled) .UIsw-slider{background-color:var(--c-g-50);border-color:var(--c-g-100)}.UIsw:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-g-100)}:is(.UIsw:has(>input:disabled) .UIsw-label,.UIsw:has(>input:disabled) .UIsw-slider__on,.UIsw:has(>input:disabled) .UIsw-slider__off){color:var(--c-g-300)}.UIsw>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-g-50);border-color:var(--c-g-100)}.UIsw>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-g-100)}.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{background-color:var(--c-g-700);transform:translate(2.5rem)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-g-50)}.UIsw:has(.UIsw-slider__on:hover,.UIsw-slider__off:hover) .UIsw-slider{border-color:var(--c-g-50)}.UIsw>input[type=checkbox]:checked:has(~.UIsw-slider__on:hover,~.UIsw-slider__off:hover)~.UIsw-slider{border-color:var(--c-g-50)}.UIsw.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{border-radius:1.5rem;width:3rem;height:3rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;right:3.8rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3rem)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{border-radius:1.5rem;width:2rem;height:2rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{border-radius:1.5rem;width:1rem;height:1rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1rem)}.UIsw.r-0>.UIsw-slider,.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider,.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-700)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>.UIsw-slider:hover{border-color:var(--c-d-50);color:var(--c-d-50)}.UIsw.danger>.UIsw-slider:hover~.UIsw-slider__on,.UIsw.danger>.UIsw-slider:hover~.UIsw-slider__off{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.danger>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-d-50)}.UIsw.danger:has(>input:disabled) .UIsw-slider{background-color:var(--c-d-50);border-color:var(--c-d-100)}.UIsw.danger:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-d-100)}:is(.UIsw.danger:has(>input:disabled) .UIsw-slider__on,.UIsw.danger:has(>input:disabled) .UIsw-slider__off){color:var(--c-d-100)}.UIsw.danger>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-d-50);border-color:var(--c-d-100)}.UIsw.danger>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-d-100)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-700)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>.UIsw-slider:hover{border-color:var(--c-i-50);color:var(--c-i-50)}.UIsw.info>.UIsw-slider:hover~.UIsw-slider__on,.UIsw.info>.UIsw-slider:hover~.UIsw-slider__off{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.info>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-i-50)}.UIsw.info:has(>input:disabled) .UIsw-slider{background-color:var(--c-i-50);border-color:var(--c-i-100)}.UIsw.info:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-i-100)}:is(.UIsw.info:has(>input:disabled) .UIsw-slider__on,.UIsw.info:has(>input:disabled) .UIsw-slider__off){color:var(--c-i-100)}.UIsw.info>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-i-50);border-color:var(--c-i-100)}.UIsw.info>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-i-100)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-700)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>.UIsw-slider:hover{border-color:var(--c-s-50);color:var(--c-s-50)}.UIsw.success>.UIsw-slider:hover~.UIsw-slider__on,.UIsw.success>.UIsw-slider:hover~.UIsw-slider__off{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.success>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-s-50)}.UIsw.success:has(>input:disabled) .UIsw-slider{background-color:var(--c-s-50);border-color:var(--c-s-100)}.UIsw.success:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-s-100)}:is(.UIsw.success:has(>input:disabled) .UIsw-slider__on,.UIsw.success:has(>input:disabled) .UIsw-slider__off){color:var(--c-s-100)}.UIsw.success>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-s-50);border-color:var(--c-s-100)}.UIsw.success>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-s-100)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-700)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>.UIsw-slider:hover{border-color:var(--c-p-50);color:var(--c-p-50)}.UIsw.primary>.UIsw-slider:hover~.UIsw-slider__on,.UIsw.primary>.UIsw-slider:hover~.UIsw-slider__off{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.primary>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-p-50)}.UIsw.primary:has(>input:disabled) .UIsw-slider{background-color:var(--c-p-50);border-color:var(--c-p-100)}.UIsw.primary:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-p-100)}:is(.UIsw.primary:has(>input:disabled) .UIsw-slider__on,.UIsw.primary:has(>input:disabled) .UIsw-slider__off){color:var(--c-p-100)}.UIsw.primary>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-p-50);border-color:var(--c-p-100)}.UIsw.primary>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-p-100)}.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>.UIsw-slider:hover{border-color:var(--c-w-50);color:var(--c-w-50)}.UIsw.warning>.UIsw-slider:hover~.UIsw-slider__on,.UIsw.warning>.UIsw-slider:hover~.UIsw-slider__off{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)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--c-w-50)}.UIsw.warning:has(>input:disabled) .UIsw-slider{background-color:var(--c-w-50);border-color:var(--c-w-100)}.UIsw.warning:has(>input:disabled) .UIsw-slider:before{background-color:var(--c-w-100)}:is(.UIsw.warning:has(>input:disabled) .UIsw-slider__on,.UIsw.warning:has(>input:disabled) .UIsw-slider__off){color:var(--c-w-100)}.UIsw.warning>input[type=checkbox]:checked:disabled~.UIsw-slider{background-color:var(--c-w-50);border-color:var(--c-w-100)}.UIsw.warning>input[type=checkbox]:checked:disabled~.UIsw-slider:before{background-color:var(--c-w-100)}body{background-color:var(--c-g-50);color:var(--c-g-950);padding:0;transition:background .4s}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{color:inherit;background-color:#0000;text-decoration:none}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{border:1px solid silver;margin:0;padding:.35em .75em .625em}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}@keyframes ui-flash{0%{box-shadow:0 0 0 0px var(--c-g-50)}50%{box-shadow:0 0 5px 1px var(--c-g-700)}to{box-shadow:0 0 0 0px var(--c-g-950)}}.UIFlash{animation:.4s ease-out ui-flash}
+.UIbg{--bg-50:var(--c-g-50);--bg-100:var(--c-g-100);--bg-300:var(--c-g-300);--bg-500:var(--c-g-500);--bg-700:var(--c-g-700);--bg-950:var(--c-g-950);grid-auto-columns:minmax(min-content,1fr);grid-auto-flow:column;align-content:center;gap:.5rem;display:grid}.UIbg.vertical{grid-auto-rows:min-content;grid-auto-flow:row}.UIbg-input{opacity:0;pointer-events:none;position:absolute}.UIbg-input:checked+.UIbg-btn{background-color:var(--bg-700);border-color:var(--bg-950);color:var(--bg-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--bg-100);border-color:var(--bg-100);color:var(--bg-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-50)}.UIbg>.UIbg-btn{cursor:pointer;background-color:var(--bg-100);border:1px solid var(--bg-500);height:2.5rem;color:var(--bg-950);border-radius:.5rem;justify-content:center;align-items:center;padding:.125rem;font-size:1rem;transition:all .4s,color .4s;display:flex}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--bg-700);border-color:var(--bg-700);color:var(--bg-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:0;border-radius: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[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}.UIbg.border{border:1px solid var(--bg-100);border-radius:.5rem;padding:5px}.UIbg.border:hover:not([aria-disabled=true]){border-color:var(--bg-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.danger{--bg-50:var(--c-d-50);--bg-100:var(--c-d-100);--bg-300:var(--c-d-300);--bg-500:var(--c-d-500);--bg-700:var(--c-d-700);--bg-950:var(--c-d-950)}.UIbg.info{--bg-50:var(--c-i-50);--bg-100:var(--c-i-100);--bg-300:var(--c-i-300);--bg-500:var(--c-i-500);--bg-700:var(--c-i-700);--bg-950:var(--c-i-950)}.UIbg.primary{--bg-50:var(--c-p-50);--bg-100:var(--c-p-100);--bg-300:var(--c-p-300);--bg-500:var(--c-p-500);--bg-700:var(--c-p-700);--bg-950:var(--c-p-950)}.UIbg.success{--bg-50:var(--c-s-50);--bg-100:var(--c-s-100);--bg-300:var(--c-s-300);--bg-500:var(--c-s-500);--bg-700:var(--c-s-700);--bg-950:var(--c-s-950)}.UIbg.warning{--bg-50:var(--c-w-50);--bg-100:var(--c-w-100);--bg-300:var(--c-w-300);--bg-500:var(--c-w-500);--bg-700:var(--c-w-700);--bg-950:var(--c-w-950)}.UIb{--b-50:var(--c-g-50);--b-100:var(--c-g-100);--b-300:var(--c-g-300);--b-500:var(--c-g-500);--b-700:var(--c-g-700);--b-950:var(--c-g-950);grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;background-color:var(--b-100);border:1px solid var(--b-500);height:2.5rem;color:var(--b-950);border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:.125rem .75rem;font-size:1rem;transition:background-color .4s,color .1s;display:flex}.UIb:hover:not(:disabled){background-color:var(--b-700);border-color:var(--b-700);color:var(--b-50)}.UIb:disabled,.UIb[aria-disabled=true]{background-color:var(--b-100);border-color:var(--b-100);color:var(--b-300);cursor:not-allowed;pointer-events:none}.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{--b-50:var(--c-d-50);--b-100:var(--c-d-100);--b-300:var(--c-d-300);--b-500:var(--c-d-500);--b-700:var(--c-d-700);--b-950:var(--c-d-950)}.UIb.info{--b-50:var(--c-i-50);--b-100:var(--c-i-100);--b-300:var(--c-i-300);--b-500:var(--c-i-500);--b-700:var(--c-i-700);--b-950:var(--c-i-950)}.UIb.primary{--b-50:var(--c-p-50);--b-100:var(--c-p-100);--b-300:var(--c-p-300);--b-500:var(--c-p-500);--b-700:var(--c-p-700);--b-950:var(--c-p-950)}.UIb.success{--b-50:var(--c-s-50);--b-100:var(--c-s-100);--b-300:var(--c-s-300);--b-500:var(--c-s-500);--b-700:var(--c-s-700);--b-950:var(--c-s-950)}.UIb.warning{--b-50:var(--c-w-50);--b-100:var(--c-w-100);--b-300:var(--c-w-300);--b-500:var(--c-w-500);--b-700:var(--c-w-700);--b-950:var(--c-w-950)}.UIsp{--sp-50:var(--c-g-50);--sp-100:var(--c-g-100);--sp-300:var(--c-g-300);--sp-500:var(--c-g-500);--sp-700:var(--c-g-700);--sp-950:var(--c-g-950);grid-template-columns:min-content 1fr min-content;align-self:end;align-items:end;width:13rem;display:grid}.UIsp>.UIsp-label{grid-column:1/-1;padding:0 0 .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{text-align:center;background-color:var(--sp-50);height:2.5rem;color:var(--sp-700);border:none;border-top:1px solid var(--sp-500);border-bottom:1px solid var(--sp-500);box-sizing:border-box;outline:none;width:100%;min-width:3rem;padding:0;font-size:1.5rem;font-weight:700}.UIsp>.UIsp__input:focus{background-color:var(--sp-50);color:var(--sp-950)}.UIsp>.UIsp__input:disabled{opacity:.5;cursor:not-allowed}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{cursor:pointer;background-color:var(--sp-100);border:none;border:1px solid var(--sp-500);width:3rem;height:2.5rem;color:var(--sp-950);border-radius:.5rem 0 0 .5rem;justify-content:center;align-items:center;padding:0;font-size:2rem;transition:background-color .4s,color .1s;display:flex}.UIsp>.UIsp__btn:hover{background-color:var(--sp-700);color:var(--sp-50)}.UIsp>.disabled{background-color:var(--sp-100);border-color:var(--sp-500);color:var(--sp-300);pointer-events:none}.UIsp[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}.UIsp>.UIsp__btn:first-of-type{border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{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:0 0 0 .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{height:2rem;font-size:1rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{height:3rem;font-size:2rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{--sp-50:var(--c-d-50);--sp-100:var(--c-d-100);--sp-300:var(--c-d-300);--sp-500:var(--c-d-500);--sp-700:var(--c-d-700);--sp-950:var(--c-d-950)}.UIsp.info{--sp-50:var(--c-i-50);--sp-100:var(--c-i-100);--sp-300:var(--c-i-300);--sp-500:var(--c-i-500);--sp-700:var(--c-i-700);--sp-950:var(--c-i-950)}.UIsp.primary{--sp-50:var(--c-p-50);--sp-100:var(--c-p-100);--sp-300:var(--c-p-300);--sp-500:var(--c-p-500);--sp-700:var(--c-p-700);--sp-950:var(--c-p-950)}.UIsp.success{--sp-50:var(--c-s-50);--sp-100:var(--c-s-100);--sp-300:var(--c-s-300);--sp-500:var(--c-s-500);--sp-700:var(--c-s-700);--sp-950:var(--c-s-950)}.UIsp.warning{--sp-50:var(--c-w-50);--sp-100:var(--c-w-100);--sp-300:var(--c-w-300);--sp-500:var(--c-w-500);--sp-700:var(--c-w-700);--sp-950:var(--c-w-950)}.UIselect{--sl-50:var(--c-g-50);--sl-100:var(--c-g-100);--sl-300:var(--c-g-300);--sl-500:var(--c-g-500);--sl-700:var(--c-g-700);--sl-900:var(--c-g-900);--sl-950:var(--c-g-950);--sl-item-hover-bg:var(--sl-500);--sl-item-hover-color:var(--sl-50);--sl-item-sel-bg:var(--sl-300);--sl-item-sel-color:var(--sl-950);background-color:var(--sl-500);cursor:pointer;box-sizing:border-box;white-space:nowrap;border-radius:.5rem;align-self:end;width:12rem;min-width:10rem;height:2.5rem;display:flex;position:relative}.UIselect:hover{background-color:var(--sl-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--sl-700);color:var(--sl-50)}.UIselect-selected{background-color:var(--sl-100);color:var(--sl-900);border-radius:.5rem;align-items:center;width:100%;height:calc(100% - 2px);margin:1px;padding:0 .5rem;display:flex;overflow:hidden}.UIselect-selected>span{white-space:nowrap;text-align:center;max-width:100%;display:inline-block;overflow:hidden}.UIselect-selected.center>span{text-align:left;max-width:100%;margin:0 auto}.UIselect-arrow{background-color:var(--sl-100);width:2rem;height:calc(100% - 4px);color:var(--sl-700);border-radius:.5rem;place-content:center;align-items:center;margin:2px 5px;font-size:.8rem;position:absolute;top:0;right:0}.UIselect-arrow>svg{margin:0 auto;display:flex}.UIselect-options{width:inherit;background-color:var(--sl-100);color:var(--sl-950);z-index:2;box-sizing:border-box;border:1px solid var(--sl-500);border-radius:.5rem;margin:0;padding:0;list-style:none;position:absolute;left:0;overflow:hidden}.UIselect-options__search{padding:1px 2px;position:sticky;top:1px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--sl-300);box-shadow:none;background-color:var(--sl-50);color:var(--sl-950);border-radius:.5rem;padding:0 7px;font-size:1.5rem}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{margin:0;padding:0;list-style:none}.UIselect-options__items>ul>li{border-radius:.5rem;align-items:center;height:2.5rem;margin:1px;padding:0 .5rem;display:flex}.UIselect-options__items>ul>li:hover{background-color:var(--sl-item-hover-bg);color:var(--sl-item-hover-color)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--sl-item-sel-bg);color:var(--sl-item-sel-color)}.UIselect-options__items>ul>li.divider{background-color:var(--sl-300);height:1px;margin:0 .25rem}.UIselect.r-0,.UIselect.r-0>.UIselect-selected,.UIselect.r-0>.UIselect-options,.UIselect.r-0>.UIselect-options>li.UIselect-options__search,.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input,.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1,.UIselect.r-1>.UIselect-selected,.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[aria-disabled=true]{pointer-events:none;opacity:.5;cursor:not-allowed}.UIselect.danger{--sl-50:var(--c-d-50);--sl-100:var(--c-d-100);--sl-300:var(--c-d-300);--sl-500:var(--c-d-500);--sl-700:var(--c-d-700);--sl-900:var(--c-d-900);--sl-950:var(--c-d-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.info{--sl-50:var(--c-i-50);--sl-100:var(--c-i-100);--sl-300:var(--c-i-300);--sl-500:var(--c-i-500);--sl-700:var(--c-i-700);--sl-900:var(--c-i-900);--sl-950:var(--c-i-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.primary{--sl-50:var(--c-p-50);--sl-100:var(--c-p-100);--sl-300:var(--c-p-300);--sl-500:var(--c-p-500);--sl-700:var(--c-p-700);--sl-900:var(--c-p-900);--sl-950:var(--c-p-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.success{--sl-50:var(--c-s-50);--sl-100:var(--c-s-100);--sl-300:var(--c-s-300);--sl-500:var(--c-s-500);--sl-700:var(--c-s-700);--sl-900:var(--c-s-900);--sl-950:var(--c-s-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIselect.warning{--sl-50:var(--c-w-50);--sl-100:var(--c-w-100);--sl-300:var(--c-w-300);--sl-500:var(--c-w-500);--sl-700:var(--c-w-700);--sl-900:var(--c-w-900);--sl-950:var(--c-w-950);--sl-item-hover-bg:var(--sl-300);--sl-item-hover-color:var(--sl-950);--sl-item-sel-bg:var(--sl-700);--sl-item-sel-color:var(--sl-50)}.UIsw{--sw-50:var(--c-g-50);--sw-100:var(--c-g-100);--sw-300:var(--c-g-300);--sw-700:var(--c-g-700);--sw-950:var(--c-g-950);align-items:center;gap:1.5rem;display:inline-flex;position:relative}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--sw-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{background-color:var(--sw-100);cursor:pointer;border:1px solid var(--sw-300);border-radius:1.5rem;width:5rem;height:2.5rem;transition:background-color .4s,border-color .4s;position:relative}.UIsw-slider:before{z-index:1;content:"";background-color:var(--sw-300);border-radius:1.5rem;width:2.5rem;height:2.5rem;transition:transform .1s;position:absolute;left:0}.UIsw-slider:hover{border-color:var(--sw-50);color:var(--sw-300)}.UIsw-slider:hover~.UIsw-slider__on,.UIsw-slider:hover~.UIsw-slider__off{color:var(--sw-300);transition:color .4s}.UIsw-slider__on,.UIsw-slider__off{color:var(--sw-950);cursor:pointer;transition:color .4s;position:absolute;right:3rem}.UIsw-slider__on:hover,.UIsw-slider__off:hover{color:var(--sw-300)}.UIsw-slider__off{color:var(--sw-700);right:.7rem}.UIsw[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}.UIsw:has(>input:disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--sw-100);border-color:var(--sw-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--sw-700);transform:translate(2.5rem)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:hover{border-color:var(--sw-50)}.UIsw:has(.UIsw-slider__on:hover,.UIsw-slider__off:hover) .UIsw-slider{border-color:var(--sw-50)}.UIsw>input[type=checkbox]:checked:has(~.UIsw-slider__on:hover,~.UIsw-slider__off:hover)~.UIsw-slider{border-color:var(--sw-50)}.UIsw.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{border-radius:1.5rem;width:3rem;height:3rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;right:3.8rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3rem)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{border-radius:1.5rem;width:2rem;height:2rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{border-radius:1.5rem;width:1rem;height:1rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1rem)}.UIsw.r-0>.UIsw-slider,.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider,.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger{--sw-50:var(--c-d-50);--sw-100:var(--c-d-100);--sw-300:var(--c-d-300);--sw-700:var(--c-d-700);--sw-950:var(--c-d-950)}.UIsw.info{--sw-50:var(--c-i-50);--sw-100:var(--c-i-100);--sw-300:var(--c-i-300);--sw-700:var(--c-i-700);--sw-950:var(--c-i-950)}.UIsw.success{--sw-50:var(--c-s-50);--sw-100:var(--c-s-100);--sw-300:var(--c-s-300);--sw-700:var(--c-s-700);--sw-950:var(--c-s-950)}.UIsw.primary{--sw-50:var(--c-p-50);--sw-100:var(--c-p-100);--sw-300:var(--c-p-300);--sw-700:var(--c-p-700);--sw-950:var(--c-p-950)}.UIsw.warning{--sw-50:var(--c-w-50);--sw-100:var(--c-w-100);--sw-300:var(--c-w-300);--sw-700:var(--c-w-700);--sw-950:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--sw-300)}body{background-color:var(--c-g-50);color:var(--c-g-950);padding:0;transition:background .4s}html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{color:inherit;background-color:#0000;text-decoration:none}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{border:1px solid silver;margin:0;padding:.35em .75em .625em}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}@keyframes ui-flash{0%{box-shadow:0 0 0 0px var(--c-g-50)}50%{box-shadow:0 0 5px 1px var(--c-g-700)}to{box-shadow:0 0 0 0px var(--c-g-950)}}.UIFlash{animation:.4s ease-out ui-flash}

package/package.json

@@ -1,14 +1,25 @@
 {
   "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), Button",
-  "version": "0.0.31",
+  "description": "Lightweight TypeScript UI component library — SpinBox, Select with search, Switch, ButtonGroup (radio), Button. Zero dependencies, accessible (ARIA), themeable via CSS custom properties, supports destroy/reinitialize lifecycle.",
+  "version": "0.1.1",
   "license": "MIT",
   "keywords": [
-    "spinbox",
-    "input",
     "ui",
-    "theme"
+    "components",
+    "typescript",
+    "spinbox",
+    "select",
+    "switch",
+    "button-group",
+    "button",
+    "radio",
+    "accessible",
+    "aria",
+    "css-custom-properties",
+    "themeable",
+    "zero-dependencies",
+    "vanilla"
   ],
   "repository": {
     "type": "git",