npm - @popovandrii/ui-elements - Versions diffs - 0.0.28 → 0.0.30 - Mend

@popovandrii/ui-elements 0.0.28 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.umd.js CHANGED Viewed

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

package/dist/style.css CHANGED Viewed

	@@ -1 +1 @@
1	- @charset "UTF-8";.UIbg{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);align-content:center}.UIbg.vertical{grid-auto-flow:row;grid-auto-rows:min-content}.UIbg-input{position:absolute;opacity:0;pointer-events:none}.UIbg-input:checked+.UIbg-btn{background-color:var(--c-g-700);border-color:var(--c-g-950);color:var(--c-g-50)}.UIbg-input:disabled+.UIbg-btn{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIbg-input:not(:disabled)+.UIbg-btn:hover{background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-50)}.UIbg>.UIbg-btn{cursor:pointer;height:2.5rem;padding:.125rem;display:flex;justify-content:center;align-items:center;border-radius:.5rem;font-size:1rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:all .4s ease,color .4s ease}.UIbg>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-g-700);border-color:var(--c-g-700);color:var(--c-g-950)}.UIbg.r-0>.UIbg-btn{border-radius:0}.UIbg.r-round>.UIbg-btn{border-radius:2.5rem}.UIbg.r-round.g-0>.UIbg-btn:first-of-type{border-radius:2.5rem 0 0 2.5rem}.UIbg.r-round.g-0>.UIbg-btn:last-of-type{border-radius:0 2.5rem 2.5rem 0}.UIbg.g-0{gap:0}.UIbg.g-0>.UIbg-btn{border-radius:0;border:0}.UIbg.g-1{gap:1rem}.UIbg.sm>.UIbg-btn{height:2rem;font-size:.9rem}.UIbg.lg>.UIbg-btn{height:3rem;font-size:1.1rem}.UIbg.border{border:1px solid var(--c-g-100);border-radius:.5rem;padding:5px}.UIbg.border:hover{border-color:var(--c-g-700)}.UIbg.border.r-0{border-radius:0}.UIbg.border.r-round{border-radius:2.5rem}.UIbg.border.danger{border-color:var(--c-d-100)}.UIbg.border.danger:hover{border-color:var(--c-d-700)}.UIbg.border.info{border-color:var(--c-i-100)}.UIbg.border.info:hover{border-color:var(--c-i-700)}.UIbg.border.primary{border-color:var(--c-p-100)}.UIbg.border.primary:hover{border-color:var(--c-p-700)}.UIbg.border.success{border-color:var(--c-s-100)}.UIbg.border.success:hover{border-color:var(--c-s-700)}.UIbg.border.warning{border-color:var(--c-w-100)}.UIbg.border.warning:hover{border-color:var(--c-w-700)}.UIbg.danger>.UIbg-btn{background-color:var(--c-d-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIbg.danger>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-950)}.UIbg.danger>:checked+.UIbg-btn{background-color:var(--c-d-700);border-color:var(--c-d-950);color:var(--c-d-50)}.UIbg.danger>:disabled+.UIbg-btn{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIbg.info>.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIbg.info>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-950)}.UIbg.info>:checked+.UIbg-btn{background-color:var(--c-i-700);border-color:var(--c-i-950);color:var(--c-i-50)}.UIbg.info>:disabled+.UIbg-btn{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIbg.primary>.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIbg.primary>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-950)}.UIbg.primary>:checked+.UIbg-btn{background-color:var(--c-p-700);border-color:var(--c-p-950);color:var(--c-p-50)}.UIbg.primary>:disabled+.UIbg-btn{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIbg.success>.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIbg.success>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-950)}.UIbg.success>:checked+.UIbg-btn{background-color:var(--c-s-700);border-color:var(--c-s-950);color:var(--c-s-50)}.UIbg.success>:disabled+.UIbg-btn{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIbg.warning>.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIbg.warning>.UIbg-btn:hover:not([aria-disabled=true]){background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-950)}.UIbg.warning>:checked+.UIbg-btn{background-color:var(--c-w-700);border-color:var(--c-w-950);color:var(--c-w-50)}.UIbg.warning>:disabled+.UIbg-btn{background-color:var(--c-w-100);border-color:var(--c-w-100);color:var(--c-w-300)}.UIb{display:grid;gap:.5rem;grid-auto-flow:column;grid-auto-columns:minmax(min-content);cursor:pointer;height:2.5rem;padding:.125rem .75rem;display:flex;justify-content:center;align-items:center;border-radius:.5rem;font-size:1rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIb:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIb:disabled{background-color:var(--c-g-100);border-color:var(--c-g-100);color:var(--c-g-300);cursor:not-allowed}.UIb.expand{width:100%}.UIb.between{justify-content:space-between}.UIb.around{justify-content:space-around}.UIb.r-0{border-radius:0}.UIb.r-round{border-radius:2.5rem}.UIb.g-0{gap:0}.UIb.g-1{gap:1rem}.UIb.sm{height:2rem;font-size:.9rem}.UIb.lg{height:3rem;font-size:1.1rem}.UIb.danger{background-color:var(--c-d-100);border-color:var(--c-d-500);color:var(--c-d-950)}.UIb.danger:hover{background-color:var(--c-d-700);border-color:var(--c-d-700);color:var(--c-d-50)}.UIb.danger:disabled{background-color:var(--c-d-100);border-color:var(--c-d-100);color:var(--c-d-300)}.UIb.info{background-color:var(--c-i-100);border-color:var(--c-i-500);color:var(--c-i-950)}.UIb.info:hover{background-color:var(--c-i-700);border-color:var(--c-i-700);color:var(--c-i-50)}.UIb.info:disabled{background-color:var(--c-i-100);border-color:var(--c-i-100);color:var(--c-i-300)}.UIb.primary{background-color:var(--c-p-100);border-color:var(--c-p-500);color:var(--c-p-950)}.UIb.primary:hover{background-color:var(--c-p-700);border-color:var(--c-p-700);color:var(--c-p-50)}.UIb.primary:disabled{background-color:var(--c-p-100);border-color:var(--c-p-100);color:var(--c-p-300)}.UIb.success{background-color:var(--c-s-100);border-color:var(--c-s-500);color:var(--c-s-950)}.UIb.success:hover{background-color:var(--c-s-700);border-color:var(--c-s-700);color:var(--c-s-50)}.UIb.success:disabled{background-color:var(--c-s-100);border-color:var(--c-s-100);color:var(--c-s-300)}.UIb.warning{background-color:var(--c-w-100);border-color:var(--c-w-500);color:var(--c-w-950)}.UIb.warning:hover{background-color:var(--c-w-700);border-color:var(--c-w-700);color:var(--c-w-50)}.UIb.warning:disabled{background-color:var(--c-w-100);border-color:var(--c-w-100);color:var(--c-w-300)}.UIsp{display:grid;grid-template-columns:min-content 1fr min-content;align-items:end;align-self:end;width:13rem}.UIsp>.UIsp-label{grid-column:1/-1;padding:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;padding:0;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;background-color:var(--c-g-100);border:1px solid var(--c-g-500);color:var(--c-g-950);transition:background-color .4s ease,color .1s ease}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-700);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{background-color:var(--c-d-300);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-100);background-color:var(--c-d-700)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-50)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{background-color:var(--c-i-300);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-100);background-color:var(--c-i-700)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-50)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{background-color:var(--c-p-300);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-100);background-color:var(--c-p-700)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-50)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{background-color:var(--c-s-300);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-100);background-color:var(--c-s-700)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-50)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{background-color:var(--c-w-300);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-700)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-50)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-500);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box;white-space:nowrap;min-width:10rem}.UIselect:hover{background-color:var(--c-g-700)}.UIselect:hover .UIselect-selected,.UIselect:hover .UIselect-arrow{background-color:var(--c-g-700);color:var(--c-g-50)}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-100);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%;overflow:hidden}.UIselect-selected>span{max-width:100%;overflow:hidden;white-space:nowrap;text-align:center;display:inline-block}.UIselect-selected.center>span{margin:0 auto;text-align:left;max-width:100%}.UIselect-arrow{position:absolute;font-size:.8rem;justify-content:center;align-items:center;align-content:center;top:0;right:0;border-radius:.5rem;margin:2px 5px;height:calc(100% - 4px);width:2rem;background-color:var(--c-g-100)}.UIselect-arrow>svg{display:flex;margin:0 auto}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background-color:var(--c-g-100);color:var(--c-g-950);z-index:2;overflow:hidden;left:0;box-sizing:border-box;border:1px solid var(--c-g-500)}.UIselect-options__search{position:sticky;top:1px;padding:1px 2px}.UIselect-options__search>input{width:100%;height:inherit;border:1px solid var(--c-g-300);border-radius:.5rem;padding:0 7px;box-shadow:none;font-size:1.5rem;background-color:var(--c-g-50);color:var(--c-g-950)}.UIselect-options__search>input:focus-visible{outline:none}.UIselect-options__items{max-height:20rem;overflow-y:auto}.UIselect-options__items>ul{padding:0;margin:0;list-style:none}.UIselect-options__items>ul>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options__items>ul>li:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-g-300);color:var(--c-g-950)}.UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-g-300);margin:0 .25rem}.UIselect.r-0{border-radius:0}.UIselect.r-0>.UIselect-selected{border-radius:0}.UIselect.r-0>.UIselect-options{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search{border-radius:0}.UIselect.r-0>.UIselect-options>li.UIselect-options__search>input{border-radius:0}.UIselect.r-0>.UIselect-options>li>ul>li{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.r-1>.UIselect-arrow{border-radius:1.5rem}.UIselect.lg{width:16rem;min-width:12rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-selected{overflow:hidden}.UIselect.lg .UIselect-options__search>input{height:3rem;font-size:1.7rem}.UIselect.lg .UIselect-options__items{max-height:25rem}.UIselect.lg .UIselect-options__items>ul>li{height:3rem}.UIselect.lg .UIselect-options__items>ul>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;min-width:8rem;height:2rem;font-size:.9rem}.UIselect.sm .UIselect-options__search>input{height:2rem;font-size:1rem}.UIselect.sm .UIselect-options__items{max-height:15rem}.UIselect.sm .UIselect-options__items>ul>li{height:2rem}.UIselect.sm .UIselect-options__items>ul>li.divider{height:1px;margin:0 .25rem}.UIselect.expand{width:100%}.UIselect.danger{background-color:var(--c-d-500)}.UIselect.danger.UIselect:hover{background-color:var(--c-d-700)}.UIselect.danger:hover .UIselect-selected,.UIselect.danger:hover .UIselect-arrow{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700);background-color:var(--c-d-100)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-100);color:var(--c-d-900)}.UIselect.danger .UIselect-options{background-color:var(--c-d-100);border-color:var(--c-d-500)}.UIselect.danger .UIselect-options__search>input{border-color:var(--c-d-300);background-color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li{color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-d-300);color:var(--c-d-950)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-d-300)}.UIselect.info{background-color:var(--c-i-500)}.UIselect.info.UIselect:hover{background-color:var(--c-i-700)}.UIselect.info:hover .UIselect-selected,.UIselect.info:hover .UIselect-arrow{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700);background-color:var(--c-i-100)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-100);color:var(--c-i-900)}.UIselect.info .UIselect-options{background-color:var(--c-i-100);border-color:var(--c-i-500)}.UIselect.info .UIselect-options__search>input{border-color:var(--c-i-300);background-color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li{color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-i-300);color:var(--c-i-950)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-i-700);color:var(--c-i-50)}.UIselect.info .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-i-300)}.UIselect.primary{background-color:var(--c-p-500)}.UIselect.primary.UIselect:hover{background-color:var(--c-p-700)}.UIselect.primary:hover .UIselect-selected,.UIselect.primary:hover .UIselect-arrow{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700);background-color:var(--c-p-100)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-100);color:var(--c-p-900)}.UIselect.primary .UIselect-options{background-color:var(--c-p-100);border-color:var(--c-p-500)}.UIselect.primary .UIselect-options__search>input{border-color:var(--c-p-300);background-color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li{color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-p-300);color:var(--c-p-950)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-p-300)}.UIselect.success{background-color:var(--c-s-500)}.UIselect.success.UIselect:hover{background-color:var(--c-s-700)}.UIselect.success:hover .UIselect-selected,.UIselect.success:hover .UIselect-arrow{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700);background-color:var(--c-s-100)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-100);color:var(--c-s-900)}.UIselect.success .UIselect-options{background-color:var(--c-s-100);border-color:var(--c-s-500)}.UIselect.success .UIselect-options__search>input{border-color:var(--c-s-300);background-color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li{color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-s-300);color:var(--c-s-950)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-s-700);color:var(--c-s-50)}.UIselect.success .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-s-300)}.UIselect.warning{background-color:var(--c-w-500)}.UIselect.warning.UIselect:hover{background-color:var(--c-w-700)}.UIselect.warning:hover .UIselect-selected,.UIselect.warning:hover .UIselect-arrow{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700);background-color:var(--c-w-100)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-100);color:var(--c-w-900)}.UIselect.warning .UIselect-options{background-color:var(--c-w-100);border-color:var(--c-w-500)}.UIselect.warning .UIselect-options__search>input{border-color:var(--c-w-300);background-color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li{color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li:hover{background-color:var(--c-w-300);color:var(--c-w-950)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li[aria-selected=true]{background-color:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning .UIselect-options .UIselect-options__items>ul>li.divider{height:1px;background-color:var(--c-w-300)}.UIsw{position:relative;display:inline-flex;align-items:center;gap:1.5rem}.UIsw-label{cursor:pointer;-webkit-user-select:none;user-select:none}.UIsw-label:hover{color:var(--c-g-500);color:var(--c-g-700)}.UIsw>input[type=checkbox]{display:none}.UIsw-slider{position:relative;width:5rem;height:2.5rem;background-color:var(--c-g-100);border-radius:1.5rem;transition:background-color .1s ease;cursor:pointer;border:1px solid var(--c-g-500)}.UIsw-slider:before{z-index:1;content:"";position:absolute;left:-1px;width:2.5rem;height:2.5rem;background-color:var(--c-g-500);border-radius:1.5rem;transition:transform .1s ease}.UIsw-slider__on,.UIsw-slider__off{position:absolute;right:3rem;color:var(--c-g-950);cursor:pointer}.UIsw-slider__off{right:.7rem;color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-g-100);border-color:var(--c-g-700)}.UIsw>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.6rem);background-color:var(--c-g-700)}.UIsw.lg>.UIsw-slider{width:6rem;height:3rem}.UIsw.lg>.UIsw-slider:before{width:3rem;height:3rem;border-radius:1.5rem}.UIsw.lg>.UIsw-slider__on{font-size:1.2rem;left:5rem}.UIsw.lg>.UIsw-slider__off{font-size:1.2rem;right:1rem}.UIsw.lg>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(3.1rem)}.UIsw.sm{gap:1rem}.UIsw.sm>.UIsw-slider{width:4rem;height:2rem}.UIsw.sm>.UIsw-slider:before{width:2rem;height:2rem;border-radius:1.5rem}.UIsw.sm>.UIsw-slider__on,.UIsw.sm>.UIsw-slider__off{font-size:.9rem;right:2.5rem}.UIsw.sm>.UIsw-slider__off{right:.6rem}.UIsw.sm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(2.1rem)}.UIsw.xsm{gap:.5rem}.UIsw.xsm>.UIsw-slider{width:2rem;height:1rem}.UIsw.xsm>.UIsw-slider:before{width:1rem;height:1rem;border-radius:1.5rem}.UIsw.xsm>.UIsw-slider__on,.UIsw.xsm>.UIsw-slider__off{font-size:.6rem;right:1.2rem}.UIsw.xsm>.UIsw-slider__off{right:.3rem}.UIsw.xsm>input[type=checkbox]:checked~.UIsw-slider:before{transform:translate(1.1rem)}.UIsw.r-0>.UIsw-slider{border-radius:0}.UIsw.r-0>.UIsw-slider:before{border-radius:0}.UIsw.r-1>.UIsw-slider{border-radius:.5rem}.UIsw.r-1>.UIsw-slider:before{border-radius:.5rem}.UIsw.danger>.UIsw-slider__on{color:var(--c-d-950)}.UIsw.danger>.UIsw-slider__off{color:var(--c-d-300)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-100);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-300)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-100);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-300)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-100);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-300)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-100);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-300)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-100);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(350, 100%, 95%);--d-100: hsl(350, 100%, 90%);--d-300: hsl(350, 100%, 70%);--d-500: hsl(350, 100%, 50%);--d-700: hsl(350, 100%, 30%);--d-900: hsl(350, 100%, 10%);--d-950: hsl(350, 100%, 5%);--i-50: hsl(195, 90%, 95%);--i-100: hsl(195, 90%, 90%);--i-300: hsl(195, 90%, 70%);--i-500: hsl(195, 90%, 50%);--i-700: hsl(195, 90%, 30%);--i-900: hsl(195, 90%, 10%);--i-950: hsl(195, 90%, 5%);--p-50: hsl(240, 50%, 95%);--p-100: hsl(240, 50%, 90%);--p-300: hsl(240, 50%, 70%);--p-500: hsl(240, 50%, 50%);--p-700: hsl(240, 50%, 30%);--p-900: hsl(240, 50%, 10%);--p-950: hsl(240, 50%, 5%);--s-50: hsl(150, 70%, 95%);--s-100: hsl(150, 70%, 90%);--s-300: hsl(150, 70%, 70%);--s-500: hsl(150, 70%, 50%);--s-700: hsl(150, 70%, 30%);--s-900: hsl(150, 70%, 10%);--s-950: hsl(150, 70%, 5%);--w-50: hsl(45, 75%, 95%);--w-100: hsl(45, 75%, 90%);--w-300: hsl(45, 75%, 70%);--w-500: hsl(45, 75%, 50%);--w-700: hsl(45, 75%, 30%);--w-900: hsl(45, 75%, 10%);--w-950: hsl(45, 75%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em;margin:0;border:1px solid #c0c0c0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}
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-500);border-radius:1.5rem;width:5rem;height:2.5rem;transition:background-color .1s;position:relative}.UIsw-slider:before{z-index:1;content:"";background-color:var(--c-g-500);border-radius:1.5rem;width:2.5rem;height:2.5rem;transition:transform .1s;position:absolute;left:-1px}.UIsw-slider__on,.UIsw-slider__off{color:var(--c-g-950);cursor:pointer;position:absolute;right:3rem}.UIsw-slider__off{color:var(--c-g-700);right:.7rem}.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.6rem)}.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(3.1rem)}.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(2.1rem)}.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(1.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-300)}.UIsw.danger>.UIsw-slider{background-color:var(--c-d-100);border:1px solid var(--c-d-300)}.UIsw.danger>.UIsw-slider:before{background-color:var(--c-d-300)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-d-100);border-color:var(--c-d-700)}.UIsw.danger>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-d-700)}.UIsw.info>.UIsw-slider__on{color:var(--c-i-950)}.UIsw.info>.UIsw-slider__off{color:var(--c-i-300)}.UIsw.info>.UIsw-slider{background-color:var(--c-i-100);border:1px solid var(--c-i-300)}.UIsw.info>.UIsw-slider:before{background-color:var(--c-i-300)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-i-100);border-color:var(--c-i-700)}.UIsw.info>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-i-700)}.UIsw.success>.UIsw-slider__on{color:var(--c-s-950)}.UIsw.success>.UIsw-slider__off{color:var(--c-s-300)}.UIsw.success>.UIsw-slider{background-color:var(--c-s-100);border:1px solid var(--c-s-300)}.UIsw.success>.UIsw-slider:before{background-color:var(--c-s-300)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-s-100);border-color:var(--c-s-700)}.UIsw.success>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-s-700)}.UIsw.primary>.UIsw-slider__on{color:var(--c-p-950)}.UIsw.primary>.UIsw-slider__off{color:var(--c-p-300)}.UIsw.primary>.UIsw-slider{background-color:var(--c-p-100);border:1px solid var(--c-p-300)}.UIsw.primary>.UIsw-slider:before{background-color:var(--c-p-300)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-p-100);border-color:var(--c-p-700)}.UIsw.primary>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-p-700)}.UIsw.warning>.UIsw-slider__on{color:var(--c-w-950)}.UIsw.warning>.UIsw-slider__off{color:var(--c-w-300)}.UIsw.warning>.UIsw-slider{background-color:var(--c-w-100);border:1px solid var(--c-w-300)}.UIsw.warning>.UIsw-slider:before{background-color:var(--c-w-300)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider{background-color:var(--c-w-100);border-color:var(--c-w-700)}.UIsw.warning>input[type=checkbox]:checked~.UIsw-slider:before{background-color:var(--c-w-700)}:root{--g-50:#f2f2f2;--g-100:#e6e6e6;--g-300:#b3b3b3;--g-500:gray;--g-700:#4d4d4d;--g-900:#1a1a1a;--g-950:#0d0d0d;--d-50:#ffe6ea;--d-100:#ffccd5;--d-300:#ff6680;--d-500:#ff002b;--d-700:#99001a;--d-900:#330009;--d-950:#1a0004;--i-50:#e7f8fe;--i-100:#cff1fc;--i-300:#6ed5f7;--i-500:#0db9f2;--i-700:#086f91;--i-900:#032530;--i-950:#011218;--p-50:#ececf9;--p-100:#d9d9f2;--p-300:#8c8cd9;--p-500:#4040bf;--p-700:#262673;--p-900:#0d0d26;--p-950:#060613;--s-50:#e9fbf2;--s-100:#d4f7e6;--s-300:#7de8b3;--s-500:#26d980;--s-700:#17824d;--s-900:#082b1a;--s-950:#04160d;--w-50:#fcf7e9;--w-100:#f9efd2;--w-300:#eccf79;--w-500:#dfaf20;--w-700:#866913;--w-900:#2d2306;--w-950:#161203;--c-d-50:var(--d-50);--c-d-100:var(--d-100);--c-d-300:var(--d-300);--c-d-500:var(--d-500);--c-d-700:var(--d-700);--c-d-900:var(--d-900);--c-d-950:var(--d-950);--c-i-50:var(--i-50);--c-i-100:var(--i-100);--c-i-300:var(--i-300);--c-i-500:var(--i-500);--c-i-700:var(--i-700);--c-i-900:var(--i-900);--c-i-950:var(--i-950);--c-p-50:var(--p-50);--c-p-100:var(--p-100);--c-p-300:var(--p-300);--c-p-500:var(--p-500);--c-p-700:var(--p-700);--c-p-900:var(--p-900);--c-p-950:var(--p-950);--c-s-50:var(--s-50);--c-s-100:var(--s-100);--c-s-300:var(--s-300);--c-s-500:var(--s-500);--c-s-700:var(--s-700);--c-s-900:var(--s-900);--c-s-950:var(--s-950);--c-g-50:var(--g-50);--c-g-100:var(--g-100);--c-g-300:var(--g-300);--c-g-500:var(--g-500);--c-g-700:var(--g-700);--c-g-900:var(--g-900);--c-g-950:var(--g-950);--c-w-50:var(--w-50);--c-w-100:var(--w-100);--c-w-300:var(--w-300);--c-w-500:var(--w-500);--c-w-700:var(--w-700);--c-w-900:var(--w-900);--c-w-950:var(--w-950)}[data-theme=dark]{--c-d-50:var(--d-950);--c-d-100:var(--d-900);--c-d-300:var(--d-700);--c-d-500:var(--d-500);--c-d-700:var(--d-300);--c-d-900:var(--d-100);--c-d-950:var(--d-50);--c-i-50:var(--i-950);--c-i-100:var(--i-900);--c-i-300:var(--i-700);--c-i-500:var(--i-500);--c-i-700:var(--i-300);--c-i-900:var(--i-100);--c-i-950:var(--i-50);--c-p-50:var(--p-950);--c-p-100:var(--p-900);--c-p-300:var(--p-700);--c-p-500:var(--p-500);--c-p-700:var(--p-300);--c-p-900:var(--p-100);--c-p-950:var(--p-50);--c-s-50:var(--s-950);--c-s-100:var(--s-900);--c-s-300:var(--s-700);--c-s-500:var(--s-500);--c-s-700:var(--s-300);--c-s-900:var(--s-100);--c-s-950:var(--s-50);--c-g-50:var(--g-950);--c-g-100:var(--g-900);--c-g-300:var(--g-700);--c-g-500:var(--g-500);--c-g-700:var(--g-300);--c-g-900:var(--g-100);--c-g-950:var(--g-50);--c-w-50:var(--w-950);--c-w-100:var(--w-900);--c-w-300:var(--w-700);--c-w-500:var(--w-500);--c-w-700:var(--w-300);--c-w-900:var(--w-100);--c-w-950:var(--w-50)}body{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 CHANGED Viewed

@@ -2,7 +2,7 @@
   "author": "Andrii Popov",
   "name": "@popovandrii/ui-elements",
   "description": "UI elements. Color scheme. Elements with complex logic Java Script. SpinBox, Select+search, Switch, Button Group (radio), Button",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "license": "MIT",
   "keywords": [
     "spinbox",
@@ -43,17 +43,17 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.56.1",
-    "@typescript-eslint/parser": "^8.56.1",
-    "eslint": "^10.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "eslint": "^10.3.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "jsdom": "^28.1.0",
-    "prettier": "^3.8.1",
-    "sass": "^1.97.3",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.3",
+    "sass": "^1.99.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.5"
   }
 }