@popovandrii/ui-elements 0.0.11 → 0.0.12

package/README.md

@@ -28,9 +28,43 @@ new Switch({
 });
 ```
 
-Abbreviation of the base (main) class of each element:<br>
-`UIsp`, UIdd, UIsch ...  (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
-`<div class="UIsp">...</div>`
+## Example for NodeJS + Express (index.umd.js + style.css)
+```sh
+npm install @popovandrii/ui-elements@latest
+```
+```js
+// app.js 
+app.use(
+  '/ui-elements/css',
+  express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css'))
+);
+app.use(
+  '/ui-elements/js',
+  express.static(path.join(__dirname, 'node_modules/@popovandrii/ui-elements/dist'))
+);
+```
+```html
+<!-- you template ...ejs   -->
+</head>
+  <script src="/ui-elements/js/index.umd.js"></script>
+  <link rel='stylesheet' href="/ui-elements/js/style.css" />
+</head>
+
+<!-- usually connected with a separate template -->
+<div class="UIsp" data-step="<%= step %>" data-min="<%= min %>" data-max="<%= max %>" role="spinbutton" tabindex="0"
+  aria-label="Numeric input">
+  <div class="UIsp-label"><%= label %></div>
+  <button class="UIsp__btn" type="button" aria-label="Decrease value">svg icon</button>
+  <input class="UIsp__input" id="<%= id %>" type="text" value="<%= min %>" aria-hidden="true" inputmode="decimal">
+  <button class="UIsp__btn" type="button" aria-label="Increase value">svg icon</button>
+</div>
+
+<script>
+  // the constructor can contain an object with your custom style
+  new UiElements.SpinBox();
+  new UiElements.Switch();
+</script>
+```
 
 ## add Style
 ```js
@@ -39,7 +73,7 @@ import '@popovandrii/ui-elements/style.css';
 *** You can not include styles from the package. Use your own styles.
 
 Abbreviation of the base (main) class of each element:<br>
-`UIsp`, UIdd, UIsch ...  (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
+`UIsp`, UIdd, UIsw ...  (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
 `<div class="UIsp">...</div>`
 
 ### UI Elements
@@ -133,4 +167,4 @@ $ npm info @popovandrii/ui-elements@0.0.x
 $ npm install @popovandrii/ui-elements@latest
 ```
 
-The './playground' folder for viewing in a browser
+The `./playground` folder for viewing in a browser

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var R=Object.defineProperty;var I=n=>{throw TypeError(n)};var T=(n,t,i)=>t in n?R(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i;var p=(n,t,i)=>T(n,typeof t!="symbol"?t+"":t,i),U=(n,t,i)=>t.has(n)||I("Cannot "+i);var h=(n,t,i)=>(U(n,t,"read from private field"),i?i.call(n):t.get(n)),y=(n,t,i)=>t.has(n)?I("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(n):t.set(n,i);var N=(n,t,i)=>(U(n,t,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var d,k,M;class _{constructor(t={}){y(this,k);p(this,"selectors");p(this,"spinBoxes");y(this,d,(t,i,l,u=0,e=0)=>{t==u||t<u?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),t==e||t>e?(l.classList.add(this.selectors.disabledBtn),l.disabled=!0):(l.classList.remove(this.selectors.disabledBtn),l.disabled=!1)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),N(this,k,M).call(this)}}d=new WeakMap,k=new WeakSet,M=function(){this.spinBoxes.forEach(t=>{const i=t.querySelectorAll(`.${this.selectors.btn}`),l=i[0],u=i[1],e=t.querySelector(`.${this.selectors.input}`),o=Number(t.dataset.step),r=Number(t.dataset.min),c=Number(t.dataset.max),b=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(e.value)<=r&&(e.value=r.toFixed(o)),Number(e.value)>=c&&(e.value=c.toFixed(o)),r&&t.setAttribute("aria-valuemin",r.toFixed(o)),c&&t.setAttribute("aria-valuemax",c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);let v=null;const A=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s+1*a/Math.pow(10,o),s>c&&(s=c),e.value=s.toFixed(o),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value)},S=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s-1*a/Math.pow(10,o),s<r&&(s=r),e.value=s.toFixed(o),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value)},w=(a,s=150)=>{v===null&&(v=window.setInterval(a,s))},g=()=>{v!==null&&(clearInterval(v),v=null)};u.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;w(()=>A(s))}),u.addEventListener("touchstart",()=>w(A)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{u.addEventListener(a,g)}),u.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&A(s)}),l.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&S(s)}),l.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;w(()=>S(s),100)}),l.addEventListener("touchstart",()=>w(S,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{l.addEventListener(a,g)}),t.addEventListener("keydown",a=>{const s=a.key,L=a.shiftKey?3:1;if(s==="ArrowRight"||s==="ArrowLeft"){a.preventDefault();const E=parseFloat(e.value)||0,m=1*L/Math.pow(10,o);let f=s==="ArrowRight"?E+m:E-m;f<r&&(f=r),e.value=f.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);return}}),e.addEventListener("keydown",a=>{const s=a.key,L=a.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(s)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(s.toLowerCase()))return;if(["e","+","-"].includes(s)){a.preventDefault();return}if(s==="ArrowUp"||s==="ArrowDown"){a.preventDefault();const D=parseFloat(e.value)||0,K=1*L/Math.pow(10,o);let F=s==="ArrowUp"?D+K:D-K;F<r&&(F=r),e.value=F.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c),b(e.value);return}const m=s===","?".":s,f=/^[0-9]$/.test(m),B=m===".",q=e.value.includes(".");(o===0&&!f||o>0&&!(f||B)||B&&q)&&a.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>c&&(e.value=c.toFixed(o)),h(this,d).call(this,Number(e.value),l,u,r,c)})})};var x,$;class z{constructor(t={}){y(this,x);p(this,"selectors");p(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),N(this,x,$).call(this)}}x=new WeakSet,$=function(){this.main.forEach(t=>{const i=t.querySelector(`.${this.selectors.label}`),l=t.querySelector("input");i&&i.id&&t.setAttribute("aria-labelledby",i.id),l&&(l.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{l.checked=!l.checked,t.setAttribute("aria-checked",String(l.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(l.checked=!0,u(String(l.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(l.checked=!1,u(String(l.checked)),e.preventDefault())}));const u=e=>{t.setAttribute("aria-checked",String(e))}})};exports.SpinBox=_;exports.Switch=z;
+"use strict";var T=Object.defineProperty;var K=r=>{throw TypeError(r)};var _=(r,e,s)=>e in r?T(r,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[e]=s;var b=(r,e,s)=>_(r,typeof e!="symbol"?e+"":e,s),I=(r,e,s)=>e.has(r)||K("Cannot "+s);var h=(r,e,s)=>(I(r,e,"read from private field"),s?s.call(r):e.get(r)),f=(r,e,s)=>e.has(r)?K("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,s);var N=(r,e,s)=>(I(r,e,"access private method"),s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var d,y,w,U;class z{constructor(e={}){f(this,w);b(this,"selectors");b(this,"spinBoxes");f(this,d,(e,s,i,u=0,t=0)=>{e==u||e<u?(s.classList.add(this.selectors.disabledBtn),s.disabled=!0):(s.classList.remove(this.selectors.disabledBtn),s.disabled=!1),t!==0&&(e==t||e>t?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1))});f(this,y,(e,s)=>{const i=e.getAttribute(`data-${s}`);return i===null||i.trim()===""||isNaN(Number(i))?0:Number(i)});const s={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...s,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),N(this,w,U).call(this)}}d=new WeakMap,y=new WeakMap,w=new WeakSet,U=function(){this.spinBoxes.forEach(e=>{const s=e.querySelectorAll(`.${this.selectors.btn}`),i=s[0],u=s[1],t=e.querySelector(`.${this.selectors.input}`),o=Number(e.dataset.step),c=Number(e.dataset.min),n=h(this,y).call(this,e,"max"),m=l=>{e.setAttribute("aria-valuenow",String(l)),e.setAttribute("aria-valuetext",`${l} items`)};Number(t.value)<=c&&(t.value=c.toFixed(o)),n!==0?(Number(t.value)>=n&&(t.value=n.toFixed(o)),n&&e.setAttribute("aria-valuemax",n.toFixed(o))):t.value=Number(t.value).toFixed(o),c&&e.setAttribute("aria-valuemin",c.toFixed(o)),h(this,d).call(this,Number(t.value),i,u,c,n),m(t.value);let v=null;const x=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a+1*l/Math.pow(10,o),a>n&&n!==0&&(a=n),t.value=a.toFixed(o),h(this,d).call(this,Number(t.value),i,u,c,n),m(t.value)},A=(l=1)=>{t.value=String(Math.abs(Number(t.value)));let a=parseFloat(t.value)||0;a=a-1*l/Math.pow(10,o),a<c&&(a=c),t.value=a.toFixed(o),h(this,d).call(this,Number(t.value),i,u,c,n),m(t.value)},p=(l,a=150)=>{v===null&&(v=window.setInterval(l,a))},L=()=>{v!==null&&(clearInterval(v),v=null)};u.addEventListener("mousedown",l=>{const a=l.shiftKey?3:1;p(()=>x(a))}),u.addEventListener("touchstart",()=>p(x)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{u.addEventListener(l,L)}),u.addEventListener("click",l=>{const a=l.shiftKey?3:1;v===null&&x(a)}),i.addEventListener("click",l=>{const a=l.shiftKey?3:1;v===null&&A(a)}),i.addEventListener("mousedown",l=>{const a=l.shiftKey?3:1;p(()=>A(a),100)}),i.addEventListener("touchstart",()=>p(A,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(l=>{i.addEventListener(l,L)}),t.addEventListener("keydown",l=>{const a=l.key,q=l.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(a)||(l.ctrlKey||l.metaKey)&&["a","c","v","x"].includes(a.toLowerCase()))return;if(["e","+","-"].includes(a)){l.preventDefault();return}if(a==="ArrowUp"||a==="ArrowDown"){l.preventDefault();const B=parseFloat(t.value)||0,D=1*q/Math.pow(10,o);let S=a==="ArrowUp"?B+D:B-D;S<c&&(S=c),t.value=S.toFixed(o),Number(t.value)<c&&(t.value=c.toFixed(o)),Number(t.value)>n&&n!==0&&(t.value=n.toFixed(o)),h(this,d).call(this,Number(t.value),i,u,c,n),m(t.value);return}const E=a===","?".":a,F=/^[0-9]$/.test(E),g=E===".",M=t.value.includes(".");(o===0&&!F||o>0&&!(F||g)||g&&M)&&l.preventDefault()}),t.addEventListener("change",()=>{Number(t.value)<c&&(t.value=c.toFixed(o)),Number(t.value)>n&&n!==0?t.value=n.toFixed(o):t.value=Number(t.value).toFixed(o),h(this,d).call(this,Number(t.value),i,u,c,n)})})};var k,$;class H{constructor(e={}){f(this,k);b(this,"selectors");b(this,"main");const s={main:"UIsw",label:"UIsw-label"};this.selectors={...s,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),N(this,k,$).call(this)}}k=new WeakSet,$=function(){this.main.forEach(e=>{const s=e.querySelector(`.${this.selectors.label}`),i=e.querySelector("input");s&&s.id&&e.setAttribute("aria-labelledby",s.id),i&&(i.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{i.checked=!i.checked,e.setAttribute("aria-checked",String(i.checked))}),e.addEventListener("keydown",t=>{t.key==="ArrowRight"?(i.checked=!0,u(String(i.checked)),t.preventDefault()):t.key==="ArrowLeft"&&(i.checked=!1,u(String(i.checked)),t.preventDefault())}));const u=t=>{e.setAttribute("aria-checked",String(t))}})};exports.SpinBox=z;exports.Switch=H;

package/dist/index.es.js

@@ -1,86 +1,81 @@
-var R = Object.defineProperty;
-var I = (n) => {
-  throw TypeError(n);
+var _ = Object.defineProperty;
+var K = (r) => {
+  throw TypeError(r);
 };
-var _ = (n, t, i) => t in n ? R(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
-var p = (n, t, i) => _(n, typeof t != "symbol" ? t + "" : t, i), U = (n, t, i) => t.has(n) || I("Cannot " + i);
-var h = (n, t, i) => (U(n, t, "read from private field"), i ? i.call(n) : t.get(n)), y = (n, t, i) => t.has(n) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i);
-var N = (n, t, i) => (U(n, t, "access private method"), i);
-var d, k, $;
-class T {
-  constructor(t = {}) {
-    y(this, k);
-    p(this, "selectors");
-    p(this, "spinBoxes");
-    y(this, d, (t, i, l, u = 0, e = 0) => {
-      t == u || t < u ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1), t == e || t > e ? (l.classList.add(this.selectors.disabledBtn), l.disabled = !0) : (l.classList.remove(this.selectors.disabledBtn), l.disabled = !1);
+var T = (r, e, s) => e in r ? _(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s;
+var b = (r, e, s) => T(r, typeof e != "symbol" ? e + "" : e, s), I = (r, e, s) => e.has(r) || K("Cannot " + s);
+var h = (r, e, s) => (I(r, e, "read from private field"), s ? s.call(r) : e.get(r)), f = (r, e, s) => e.has(r) ? K("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, s);
+var L = (r, e, s) => (I(r, e, "access private method"), s);
+var d, w, y, U;
+class R {
+  constructor(e = {}) {
+    f(this, y);
+    b(this, "selectors");
+    b(this, "spinBoxes");
+    f(this, d, (e, s, i, u = 0, t = 0) => {
+      e == u || e < u ? (s.classList.add(this.selectors.disabledBtn), s.disabled = !0) : (s.classList.remove(this.selectors.disabledBtn), s.disabled = !1), t !== 0 && (e == t || e > t ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1));
     });
-    const i = {
+    f(this, w, (e, s) => {
+      const i = e.getAttribute(`data-${s}`);
+      return i === null || i.trim() === "" || isNaN(Number(i)) ? 0 : Number(i);
+    });
+    const s = {
       main: "UIsp",
       btn: "UIsp__btn",
       input: "UIsp__input",
       disabledBtn: "disabled"
     };
-    this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.spinBoxes = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), N(this, k, $).call(this);
+    ), L(this, y, U).call(this);
   }
 }
-d = new WeakMap(), k = new WeakSet(), $ = function() {
-  this.spinBoxes.forEach((t) => {
-    const i = t.querySelectorAll(
+d = new WeakMap(), w = new WeakMap(), y = new WeakSet(), U = function() {
+  this.spinBoxes.forEach((e) => {
+    const s = e.querySelectorAll(
       `.${this.selectors.btn}`
-    ), l = i[0], u = i[1], e = t.querySelector(
+    ), i = s[0], u = s[1], t = e.querySelector(
       `.${this.selectors.input}`
-    ), o = Number(t.dataset.step), r = Number(t.dataset.min), c = Number(t.dataset.max), b = (a) => {
-      t.setAttribute("aria-valuenow", String(a)), t.setAttribute("aria-valuetext", `${a} items`);
+    ), o = Number(e.dataset.step), c = Number(e.dataset.min), n = h(this, w).call(this, e, "max"), m = (l) => {
+      e.setAttribute("aria-valuenow", String(l)), e.setAttribute("aria-valuetext", `${l} items`);
     };
-    Number(e.value) <= r && (e.value = r.toFixed(o)), Number(e.value) >= c && (e.value = c.toFixed(o)), r && t.setAttribute("aria-valuemin", r.toFixed(o)), c && t.setAttribute("aria-valuemax", c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
+    Number(t.value) <= c && (t.value = c.toFixed(o)), n !== 0 ? (Number(t.value) >= n && (t.value = n.toFixed(o)), n && e.setAttribute("aria-valuemax", n.toFixed(o))) : t.value = Number(t.value).toFixed(o), c && e.setAttribute("aria-valuemin", c.toFixed(o)), h(this, d).call(this, Number(t.value), i, u, c, n), m(t.value);
     let v = null;
-    const A = (a = 1) => {
-      e.value = String(Math.abs(Number(e.value)));
-      let s = parseFloat(e.value) || 0;
-      s = s + 1 * a / Math.pow(10, o), s > c && (s = c), e.value = s.toFixed(o), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
-    }, L = (a = 1) => {
-      e.value = String(Math.abs(Number(e.value)));
-      let s = parseFloat(e.value) || 0;
-      s = s - 1 * a / Math.pow(10, o), s < r && (s = r), e.value = s.toFixed(o), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
-    }, w = (a, s = 150) => {
-      v === null && (v = window.setInterval(a, s));
-    }, g = () => {
+    const x = (l = 1) => {
+      t.value = String(Math.abs(Number(t.value)));
+      let a = parseFloat(t.value) || 0;
+      a = a + 1 * l / Math.pow(10, o), a > n && n !== 0 && (a = n), t.value = a.toFixed(o), h(this, d).call(this, Number(t.value), i, u, c, n), m(t.value);
+    }, A = (l = 1) => {
+      t.value = String(Math.abs(Number(t.value)));
+      let a = parseFloat(t.value) || 0;
+      a = a - 1 * l / Math.pow(10, o), a < c && (a = c), t.value = a.toFixed(o), h(this, d).call(this, Number(t.value), i, u, c, n), m(t.value);
+    }, p = (l, a = 150) => {
+      v === null && (v = window.setInterval(l, a));
+    }, E = () => {
       v !== null && (clearInterval(v), v = null);
     };
-    u.addEventListener("mousedown", (a) => {
-      const s = a.shiftKey ? 3 : 1;
-      w(() => A(s));
-    }), u.addEventListener("touchstart", () => w(A)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (a) => {
-        u.addEventListener(a, g);
-      }
-    ), u.addEventListener("click", (a) => {
-      const s = a.shiftKey ? 3 : 1;
-      v === null && A(s);
-    }), l.addEventListener("click", (a) => {
-      const s = a.shiftKey ? 3 : 1;
-      v === null && L(s);
-    }), l.addEventListener("mousedown", (a) => {
-      const s = a.shiftKey ? 3 : 1;
-      w(() => L(s), 100);
-    }), l.addEventListener("touchstart", () => w(L, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
-      (a) => {
-        l.addEventListener(a, g);
+    u.addEventListener("mousedown", (l) => {
+      const a = l.shiftKey ? 3 : 1;
+      p(() => x(a));
+    }), u.addEventListener("touchstart", () => p(x)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (l) => {
+        u.addEventListener(l, E);
       }
-    ), t.addEventListener("keydown", (a) => {
-      const s = a.key, E = a.shiftKey ? 3 : 1;
-      if (s === "ArrowRight" || s === "ArrowLeft") {
-        a.preventDefault();
-        const S = parseFloat(e.value) || 0, m = 1 * E / Math.pow(10, o);
-        let f = s === "ArrowRight" ? S + m : S - m;
-        f < r && (f = r), e.value = f.toFixed(o), Number(e.value) < r && (e.value = r.toFixed(o)), Number(e.value) > c && (e.value = c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
-        return;
+    ), u.addEventListener("click", (l) => {
+      const a = l.shiftKey ? 3 : 1;
+      v === null && x(a);
+    }), i.addEventListener("click", (l) => {
+      const a = l.shiftKey ? 3 : 1;
+      v === null && A(a);
+    }), i.addEventListener("mousedown", (l) => {
+      const a = l.shiftKey ? 3 : 1;
+      p(() => A(a), 100);
+    }), i.addEventListener("touchstart", () => p(A, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
+      (l) => {
+        i.addEventListener(l, E);
       }
-    }), e.addEventListener("keydown", (a) => {
-      const s = a.key, E = a.shiftKey ? 3 : 1;
+    ), t.addEventListener("keydown", (l) => {
+      const a = l.key, q = l.shiftKey ? 3 : 1;
       if ([
         "Backspace",
         "Delete",
@@ -90,55 +85,55 @@ d = new WeakMap(), k = new WeakSet(), $ = function() {
         "Enter",
         "Home",
         "End"
-      ].includes(s) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
+      ].includes(a) || (l.ctrlKey || l.metaKey) && ["a", "c", "v", "x"].includes(a.toLowerCase()))
         return;
-      if (["e", "+", "-"].includes(s)) {
-        a.preventDefault();
+      if (["e", "+", "-"].includes(a)) {
+        l.preventDefault();
         return;
       }
-      if (s === "ArrowUp" || s === "ArrowDown") {
-        a.preventDefault();
-        const K = parseFloat(e.value) || 0, B = 1 * E / Math.pow(10, o);
-        let F = s === "ArrowUp" ? K + B : K - B;
-        F < r && (F = r), e.value = F.toFixed(o), Number(e.value) < r && (e.value = r.toFixed(o)), Number(e.value) > c && (e.value = c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c), b(e.value);
+      if (a === "ArrowUp" || a === "ArrowDown") {
+        l.preventDefault();
+        const D = parseFloat(t.value) || 0, B = 1 * q / Math.pow(10, o);
+        let N = a === "ArrowUp" ? D + B : D - B;
+        N < c && (N = c), t.value = N.toFixed(o), Number(t.value) < c && (t.value = c.toFixed(o)), Number(t.value) > n && n !== 0 && (t.value = n.toFixed(o)), h(this, d).call(this, Number(t.value), i, u, c, n), m(t.value);
         return;
       }
-      const m = s === "," ? "." : s, f = /^[0-9]$/.test(m), D = m === ".", M = e.value.includes(".");
-      (o === 0 && !f || o > 0 && !(f || D) || D && M) && a.preventDefault();
-    }), e.addEventListener("change", () => {
-      Number(e.value) < r && (e.value = r.toFixed(o)), Number(e.value) > c && (e.value = c.toFixed(o)), h(this, d).call(this, Number(e.value), l, u, r, c);
+      const S = a === "," ? "." : a, F = /^[0-9]$/.test(S), g = S === ".", M = t.value.includes(".");
+      (o === 0 && !F || o > 0 && !(F || g) || g && M) && l.preventDefault();
+    }), t.addEventListener("change", () => {
+      Number(t.value) < c && (t.value = c.toFixed(o)), Number(t.value) > n && n !== 0 ? t.value = n.toFixed(o) : t.value = Number(t.value).toFixed(o), h(this, d).call(this, Number(t.value), i, u, c, n);
     });
   });
 };
-var x, q;
-class H {
-  constructor(t = {}) {
-    y(this, x);
-    p(this, "selectors");
-    p(this, "main");
-    const i = {
+var k, $;
+class V {
+  constructor(e = {}) {
+    f(this, k);
+    b(this, "selectors");
+    b(this, "main");
+    const s = {
       main: "UIsw",
       label: "UIsw-label"
     };
-    this.selectors = { ...i, ...t }, this.main = document.querySelectorAll(
+    this.selectors = { ...s, ...e }, this.main = document.querySelectorAll(
       `.${this.selectors.main}`
-    ), N(this, x, q).call(this);
+    ), L(this, k, $).call(this);
   }
 }
-x = new WeakSet(), q = function() {
-  this.main.forEach((t) => {
-    const i = t.querySelector(`.${this.selectors.label}`), l = t.querySelector("input");
-    i && i.id && t.setAttribute("aria-labelledby", i.id), l && (l.checked ? t.setAttribute("aria-checked", "true") : t.setAttribute("aria-checked", "false"), t.addEventListener("click", () => {
-      l.checked = !l.checked, t.setAttribute("aria-checked", String(l.checked));
-    }), t.addEventListener("keydown", (e) => {
-      e.key === "ArrowRight" ? (l.checked = !0, u(String(l.checked)), e.preventDefault()) : e.key === "ArrowLeft" && (l.checked = !1, u(String(l.checked)), e.preventDefault());
+k = new WeakSet(), $ = function() {
+  this.main.forEach((e) => {
+    const s = e.querySelector(`.${this.selectors.label}`), i = e.querySelector("input");
+    s && s.id && e.setAttribute("aria-labelledby", s.id), i && (i.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
+      i.checked = !i.checked, e.setAttribute("aria-checked", String(i.checked));
+    }), e.addEventListener("keydown", (t) => {
+      t.key === "ArrowRight" ? (i.checked = !0, u(String(i.checked)), t.preventDefault()) : t.key === "ArrowLeft" && (i.checked = !1, u(String(i.checked)), t.preventDefault());
     }));
-    const u = (e) => {
-      t.setAttribute("aria-checked", String(e));
+    const u = (t) => {
+      e.setAttribute("aria-checked", String(t));
     };
   });
 };
 export {
-  T as SpinBox,
-  H as Switch
+  R as SpinBox,
+  V as Switch
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(a,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(a=typeof globalThis<"u"?globalThis:a||self,l(a.UiElements={}))})(this,function(a){"use strict";var z=Object.defineProperty;var M=a=>{throw TypeError(a)};var j=(a,l,d)=>l in a?z(a,l,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[l]=d;var w=(a,l,d)=>j(a,typeof l!="symbol"?l+"":l,d),$=(a,l,d)=>l.has(a)||M("Cannot "+d);var b=(a,l,d)=>($(a,l,"read from private field"),d?d.call(a):l.get(a)),S=(a,l,d)=>l.has(a)?M("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(a):l.set(a,d);var B=(a,l,d)=>($(a,l,"access private method"),d);var h,k,q,x,T;class l{constructor(i={}){S(this,k);w(this,"selectors");w(this,"spinBoxes");S(this,h,(i,v,n,c=0,e=0)=>{i==c||i<c?(v.classList.add(this.selectors.disabledBtn),v.disabled=!0):(v.classList.remove(this.selectors.disabledBtn),v.disabled=!1),i==e||i>e?(n.classList.add(this.selectors.disabledBtn),n.disabled=!0):(n.classList.remove(this.selectors.disabledBtn),n.disabled=!1)});const v={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...v,...i},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),B(this,k,q).call(this)}}h=new WeakMap,k=new WeakSet,q=function(){this.spinBoxes.forEach(i=>{const v=i.querySelectorAll(`.${this.selectors.btn}`),n=v[0],c=v[1],e=i.querySelector(`.${this.selectors.input}`),o=Number(i.dataset.step),r=Number(i.dataset.min),u=Number(i.dataset.max),p=s=>{i.setAttribute("aria-valuenow",String(s)),i.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=r&&(e.value=r.toFixed(o)),Number(e.value)>=u&&(e.value=u.toFixed(o)),r&&i.setAttribute("aria-valuemin",r.toFixed(o)),u&&i.setAttribute("aria-valuemax",u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);let f=null;const L=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t+1*s/Math.pow(10,o),t>u&&(t=u),e.value=t.toFixed(o),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value)},E=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t-1*s/Math.pow(10,o),t<r&&(t=r),e.value=t.toFixed(o),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value)},A=(s,t=150)=>{f===null&&(f=window.setInterval(s,t))},D=()=>{f!==null&&(clearInterval(f),f=null)};c.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;A(()=>L(t))}),c.addEventListener("touchstart",()=>A(L)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{c.addEventListener(s,D)}),c.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&L(t)}),n.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&E(t)}),n.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;A(()=>E(t),100)}),n.addEventListener("touchstart",()=>A(E,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{n.addEventListener(s,D)}),i.addEventListener("keydown",s=>{const t=s.key,F=s.shiftKey?3:1;if(t==="ArrowRight"||t==="ArrowLeft"){s.preventDefault();const N=parseFloat(e.value)||0,y=1*F/Math.pow(10,o);let m=t==="ArrowRight"?N+y:N-y;m<r&&(m=r),e.value=m.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);return}}),e.addEventListener("keydown",s=>{const t=s.key,F=s.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t)||(s.ctrlKey||s.metaKey)&&["a","c","v","x"].includes(t.toLowerCase()))return;if(["e","+","-"].includes(t)){s.preventDefault();return}if(t==="ArrowUp"||t==="ArrowDown"){s.preventDefault();const U=parseFloat(e.value)||0,I=1*F/Math.pow(10,o);let g=t==="ArrowUp"?U+I:U-I;g<r&&(g=r),e.value=g.toFixed(o),Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u),p(e.value);return}const y=t===","?".":t,m=/^[0-9]$/.test(y),K=y===".",_=e.value.includes(".");(o===0&&!m||o>0&&!(m||K)||K&&_)&&s.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<r&&(e.value=r.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),b(this,h).call(this,Number(e.value),n,c,r,u)})})};class d{constructor(i={}){S(this,x);w(this,"selectors");w(this,"main");const v={main:"UIsw",label:"UIsw-label"};this.selectors={...v,...i},this.main=document.querySelectorAll(`.${this.selectors.main}`),B(this,x,T).call(this)}}x=new WeakSet,T=function(){this.main.forEach(i=>{const v=i.querySelector(`.${this.selectors.label}`),n=i.querySelector("input");v&&v.id&&i.setAttribute("aria-labelledby",v.id),n&&(n.checked?i.setAttribute("aria-checked","true"):i.setAttribute("aria-checked","false"),i.addEventListener("click",()=>{n.checked=!n.checked,i.setAttribute("aria-checked",String(n.checked))}),i.addEventListener("keydown",e=>{e.key==="ArrowRight"?(n.checked=!0,c(String(n.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(n.checked=!1,c(String(n.checked)),e.preventDefault())}));const c=e=>{i.setAttribute("aria-checked",String(e))}})},a.SpinBox=l,a.Switch=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
+(function(l,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(l=typeof globalThis<"u"?globalThis:l||self,r(l.UiElements={}))})(this,function(l){"use strict";var z=Object.defineProperty;var I=l=>{throw TypeError(l)};var H=(l,r,d)=>r in l?z(l,r,{enumerable:!0,configurable:!0,writable:!0,value:d}):l[r]=d;var m=(l,r,d)=>H(l,typeof r!="symbol"?r+"":r,d),$=(l,r,d)=>r.has(l)||I("Cannot "+d);var b=(l,r,d)=>($(l,r,"read from private field"),d?d.call(l):r.get(l)),p=(l,r,d)=>r.has(l)?I("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(l):r.set(l,d);var L=(l,r,d)=>($(l,r,"access private method"),d);var h,y,w,q,k,M;class r{constructor(t={}){p(this,w);m(this,"selectors");m(this,"spinBoxes");p(this,h,(t,u,i,v=0,e=0)=>{t==v||t<v?(u.classList.add(this.selectors.disabledBtn),u.disabled=!0):(u.classList.remove(this.selectors.disabledBtn),u.disabled=!1),e!==0&&(t==e||t>e?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1))});p(this,y,(t,u)=>{const i=t.getAttribute(`data-${u}`);return i===null||i.trim()===""||isNaN(Number(i))?0:Number(i)});const u={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...u,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),L(this,w,q).call(this)}}h=new WeakMap,y=new WeakMap,w=new WeakSet,q=function(){this.spinBoxes.forEach(t=>{const u=t.querySelectorAll(`.${this.selectors.btn}`),i=u[0],v=u[1],e=t.querySelector(`.${this.selectors.input}`),o=Number(t.dataset.step),c=Number(t.dataset.min),n=b(this,y).call(this,t,"max"),x=a=>{t.setAttribute("aria-valuenow",String(a)),t.setAttribute("aria-valuetext",`${a} items`)};Number(e.value)<=c&&(e.value=c.toFixed(o)),n!==0?(Number(e.value)>=n&&(e.value=n.toFixed(o)),n&&t.setAttribute("aria-valuemax",n.toFixed(o))):e.value=Number(e.value).toFixed(o),c&&t.setAttribute("aria-valuemin",c.toFixed(o)),b(this,h).call(this,Number(e.value),i,v,c,n),x(e.value);let f=null;const S=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s+1*a/Math.pow(10,o),s>n&&n!==0&&(s=n),e.value=s.toFixed(o),b(this,h).call(this,Number(e.value),i,v,c,n),x(e.value)},N=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s-1*a/Math.pow(10,o),s<c&&(s=c),e.value=s.toFixed(o),b(this,h).call(this,Number(e.value),i,v,c,n),x(e.value)},A=(a,s=150)=>{f===null&&(f=window.setInterval(a,s))},F=()=>{f!==null&&(clearInterval(f),f=null)};v.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;A(()=>S(s))}),v.addEventListener("touchstart",()=>A(S)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{v.addEventListener(a,F)}),v.addEventListener("click",a=>{const s=a.shiftKey?3:1;f===null&&S(s)}),i.addEventListener("click",a=>{const s=a.shiftKey?3:1;f===null&&N(s)}),i.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;A(()=>N(s),100)}),i.addEventListener("touchstart",()=>A(N,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{i.addEventListener(a,F)}),e.addEventListener("keydown",a=>{const s=a.key,_=a.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(s)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(s.toLowerCase()))return;if(["e","+","-"].includes(s)){a.preventDefault();return}if(s==="ArrowUp"||s==="ArrowDown"){a.preventDefault();const K=parseFloat(e.value)||0,U=1*_/Math.pow(10,o);let E=s==="ArrowUp"?K+U:K-U;E<c&&(E=c),e.value=E.toFixed(o),Number(e.value)<c&&(e.value=c.toFixed(o)),Number(e.value)>n&&n!==0&&(e.value=n.toFixed(o)),b(this,h).call(this,Number(e.value),i,v,c,n),x(e.value);return}const g=s===","?".":s,B=/^[0-9]$/.test(g),D=g===".",j=e.value.includes(".");(o===0&&!B||o>0&&!(B||D)||D&&j)&&a.preventDefault()}),e.addEventListener("change",()=>{Number(e.value)<c&&(e.value=c.toFixed(o)),Number(e.value)>n&&n!==0?e.value=n.toFixed(o):e.value=Number(e.value).toFixed(o),b(this,h).call(this,Number(e.value),i,v,c,n)})})};class d{constructor(t={}){p(this,k);m(this,"selectors");m(this,"main");const u={main:"UIsw",label:"UIsw-label"};this.selectors={...u,...t},this.main=document.querySelectorAll(`.${this.selectors.main}`),L(this,k,M).call(this)}}k=new WeakSet,M=function(){this.main.forEach(t=>{const u=t.querySelector(`.${this.selectors.label}`),i=t.querySelector("input");u&&u.id&&t.setAttribute("aria-labelledby",u.id),i&&(i.checked?t.setAttribute("aria-checked","true"):t.setAttribute("aria-checked","false"),t.addEventListener("click",()=>{i.checked=!i.checked,t.setAttribute("aria-checked",String(i.checked))}),t.addEventListener("keydown",e=>{e.key==="ArrowRight"?(i.checked=!0,v(String(i.checked)),e.preventDefault()):e.key==="ArrowLeft"&&(i.checked=!1,v(String(i.checked)),e.preventDefault())}));const v=e=>{t.setAttribute("aria-checked",String(e))}})},l.SpinBox=r,l.Switch=d,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "author": "Andrii Popov",
   "name": "@popovandrii/ui-elements",
-  "description": "Custom UI elements like SpinBox with theme support",
-  "version": "0.0.11",
+  "description": "User interface elements. Color scheme. Elements with complex logic Java Script. Contrasting UI elements.",
+  "version": "0.0.12",
   "license": "MIT",
   "keywords": [
     "spinbox",