@popovandrii/ui-elements 0.0.11 → 0.0.13

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
  1. package/README.md +74 -5
  2. package/dist/Select.d.ts +23 -0
  3. package/dist/index.cjs.js +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.es.js +207 -97
  6. package/dist/index.umd.js +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -12,6 +12,7 @@ Connection with `standard styles` from the package by element name.
12
12
  ```js
13
13
  new SpinBox();
14
14
  new Switch();
15
+ new Select();
15
16
  ```
16
17
  Connection with `custom styles` from a package by element name.
17
18
  ```js
@@ -26,11 +27,55 @@ new Switch({
26
27
  main: "You-costom-class",
27
28
  label: "You-costom-class-label"
28
29
  });
30
+
31
+ new Select({
32
+ idPrefix: "UI-option-",
33
+ main: "UIselect",
34
+ selected: "UIselect-selected",
35
+ arrow: "UIselect-arrow",
36
+ optionsList: "UIselect-options",
37
+ excludedItems: ["divider", "test"], // class="you_name"
38
+ });
29
39
  ```
30
40
 
31
- Abbreviation of the base (main) class of each element:<br>
32
- `UIsp`, UIdd, UIsch ... (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
33
- `<div class="UIsp">...</div>`
41
+ ## Example for NodeJS + Express (index.umd.js + style.css)
42
+ ```sh
43
+ npm install @popovandrii/ui-elements@latest
44
+ ```
45
+ ```js
46
+ // app.js
47
+ app.use(
48
+ '/ui-elements/css',
49
+ express.static(path.join(__dirname, 'node_modules/bootstrap/dist/css'))
50
+ );
51
+ app.use(
52
+ '/ui-elements/js',
53
+ express.static(path.join(__dirname, 'node_modules/@popovandrii/ui-elements/dist'))
54
+ );
55
+ ```
56
+ ```html
57
+ <!-- you template ...ejs -->
58
+ </head>
59
+ <script src="/ui-elements/js/index.umd.js"></script>
60
+ <link rel='stylesheet' href="/ui-elements/js/style.css" />
61
+ </head>
62
+
63
+ <!-- usually connected with a separate template -->
64
+ <div class="UIsp" data-step="<%= step %>" data-min="<%= min %>" data-max="<%= max %>" role="spinbutton" tabindex="0"
65
+ aria-label="Numeric input">
66
+ <div class="UIsp-label"><%= label %></div>
67
+ <button class="UIsp__btn" type="button" aria-label="Decrease value">svg icon</button>
68
+ <input class="UIsp__input" id="<%= id %>" type="text" value="<%= min %>" aria-hidden="true" inputmode="decimal">
69
+ <button class="UIsp__btn" type="button" aria-label="Increase value">svg icon</button>
70
+ </div>
71
+
72
+ <script>
73
+ // the constructor can contain an object with your custom style
74
+ new UiElements.SpinBox();
75
+ new UiElements.Switch();
76
+ new UiElements.Select();;
77
+ </script>
78
+ ```
34
79
 
35
80
  ## add Style
36
81
  ```js
@@ -39,7 +84,7 @@ import '@popovandrii/ui-elements/style.css';
39
84
  *** You can not include styles from the package. Use your own styles.
40
85
 
41
86
  Abbreviation of the base (main) class of each element:<br>
42
- `UIsp`, UIdd, UIsch ... (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
87
+ `UIsp`, UIdd, UIsw ... (`UI + Spin-Box`, UI + Drop-Down, UI + Switch ...)<br>
43
88
  `<div class="UIsp">...</div>`
44
89
 
45
90
  ### UI Elements
@@ -108,6 +153,30 @@ radius: `r-0` `r-1`<br>
108
153
  <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/switch-UI.png" alt="Switch Preview" width="700">
109
154
  </p>
110
155
 
156
+ #### Select UI
157
+ ```html
158
+ <div class="UIselect lg r-1 info" id="mySelect" tabindex="0" role="listbox" aria-activedescendant="">
159
+ <input type="hidden" name="myId">
160
+ <span class="UIselect-selected">Select an option</span>
161
+ <span class="UIselect-arrow">&#9662;</span>
162
+ <ul class="UIselect-options" hidden>
163
+ <li role="option" data-value="one">Option 1</li>
164
+ <li role="option" data-value="two">Option 2</li>
165
+ <li role="presentation" class="divider" aria-hidden="true"></li>
166
+ <li role="option" data-value="thre">Option 3</li>
167
+ </ul>
168
+ </div>
169
+ ```
170
+ ##### Send to server
171
+ ```js
172
+ const input = document.querySelector("#myId input[type='hidden']");
173
+ SomeSendToServer(input.value);
174
+ ```
175
+
176
+ <p align="center">
177
+ <img src="https://gitlab.com/AndreyPopov/ui-elements/-/raw/main/docs/images/select-UI.png" alt="Switch Preview" width="700">
178
+ </p>
179
+
111
180
 
112
181
  # Information for Developers
113
182
  ```sh
@@ -133,4 +202,4 @@ $ npm info @popovandrii/ui-elements@0.0.x
133
202
  $ npm install @popovandrii/ui-elements@latest
134
203
  ```
135
204
 
136
- The './playground' folder for viewing in a browser
205
+ The `./playground` folder for viewing in a browser
package/dist/Select.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ interface SelectorMap {
2
+ idPrefix: string;
3
+ main: string;
4
+ selected: string;
5
+ arrow: string;
6
+ optionsList: string;
7
+ excludedItems: Array<string>;
8
+ }
9
+ export declare class Select {
10
+ private selectors;
11
+ private main;
12
+ constructor(selectors?: Partial<SelectorMap>);
13
+ private filterExcluded;
14
+ private event;
15
+ private itemArrow;
16
+ private itemsPosition;
17
+ private items;
18
+ private toggle;
19
+ private close;
20
+ static closeAll(map: SelectorMap): void;
21
+ static initGlobalListener(map: SelectorMap): void;
22
+ }
23
+ export {};
package/dist/index.cjs.js CHANGED
@@ -1 +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;
1
+ "use strict";var M=Object.defineProperty;var F=d=>{throw TypeError(d)};var T=(d,e,i)=>e in d?M(d,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):d[e]=i;var b=(d,e,i)=>T(d,typeof e!="symbol"?e+"":e,i),C=(d,e,i)=>e.has(d)||F("Cannot "+i);var m=(d,e,i)=>(C(d,e,"read from private field"),i?i.call(d):e.get(d)),A=(d,e,i)=>e.has(d)?F("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(d):e.set(d,i);var g=(d,e,i)=>(C(d,e,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var v,y,w,D;class V{constructor(e={}){A(this,w);b(this,"selectors");b(this,"spinBoxes");A(this,v,(e,i,t,n=0,s=0)=>{e==n||e<n?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),s!==0&&(e==s||e>s?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1))});A(this,y,(e,i)=>{const t=e.getAttribute(`data-${i}`);return t===null||t.trim()===""||isNaN(Number(t))?0:Number(t)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,w,D).call(this)}}v=new WeakMap,y=new WeakMap,w=new WeakSet,D=function(){this.spinBoxes.forEach(e=>{const i=e.querySelectorAll(`.${this.selectors.btn}`),t=i[0],n=i[1],s=e.querySelector(`.${this.selectors.input}`),r=Number(e.dataset.step),c=Number(e.dataset.min),a=m(this,y).call(this,e,"max"),h=o=>{e.setAttribute("aria-valuenow",String(o)),e.setAttribute("aria-valuetext",`${o} items`)};Number(s.value)<=c&&(s.value=c.toFixed(r)),a!==0?(Number(s.value)>=a&&(s.value=a.toFixed(r)),a&&e.setAttribute("aria-valuemax",a.toFixed(r))):s.value=Number(s.value).toFixed(r),c&&e.setAttribute("aria-valuemin",c.toFixed(r)),m(this,v).call(this,Number(s.value),t,n,c,a),h(s.value);let u=null;const f=(o=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l+1*o/Math.pow(10,r),l>a&&a!==0&&(l=a),s.value=l.toFixed(r),m(this,v).call(this,Number(s.value),t,n,c,a),h(s.value)},E=(o=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l-1*o/Math.pow(10,r),l<c&&(l=c),s.value=l.toFixed(r),m(this,v).call(this,Number(s.value),t,n,c,a),h(s.value)},x=(o,l=150)=>{u===null&&(u=window.setInterval(o,l))},L=()=>{u!==null&&(clearInterval(u),u=null)};n.addEventListener("mousedown",o=>{const l=o.shiftKey?3:1;x(()=>f(l))}),n.addEventListener("touchstart",()=>x(f)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(o=>{n.addEventListener(o,L)}),n.addEventListener("click",o=>{const l=o.shiftKey?3:1;u===null&&f(l)}),t.addEventListener("click",o=>{const l=o.shiftKey?3:1;u===null&&E(l)}),t.addEventListener("mousedown",o=>{const l=o.shiftKey?3:1;x(()=>E(l),100)}),t.addEventListener("touchstart",()=>x(E,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(o=>{t.addEventListener(o,L)}),s.addEventListener("keydown",o=>{const l=o.key,K=o.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(l)||(o.ctrlKey||o.metaKey)&&["a","c","v","x"].includes(l.toLowerCase()))return;if(["e","+","-"].includes(l)){o.preventDefault();return}if(l==="ArrowUp"||l==="ArrowDown"){o.preventDefault();const q=parseFloat(s.value)||0,U=1*K/Math.pow(10,r);let S=l==="ArrowUp"?q+U:q-U;S<c&&(S=c),s.value=S.toFixed(r),Number(s.value)<c&&(s.value=c.toFixed(r)),Number(s.value)>a&&a!==0&&(s.value=a.toFixed(r)),m(this,v).call(this,Number(s.value),t,n,c,a),h(s.value);return}const I=l===","?".":l,$=/^[0-9]$/.test(I),N=I===".",P=s.value.includes(".");(r===0&&!$||r>0&&!($||N)||N&&P)&&o.preventDefault()}),s.addEventListener("change",()=>{Number(s.value)<c&&(s.value=c.toFixed(r)),Number(s.value)>a&&a!==0?s.value=a.toFixed(r):s.value=Number(s.value).toFixed(r),m(this,v).call(this,Number(s.value),t,n,c,a)})})};var k,B;class _{constructor(e={}){A(this,k);b(this,"selectors");b(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),g(this,k,B).call(this)}}k=new WeakSet,B=function(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.label}`),t=e.querySelector("input");i&&i.id&&e.setAttribute("aria-labelledby",i.id),t&&(t.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{t.checked=!t.checked,e.setAttribute("aria-checked",String(t.checked))}),e.addEventListener("keydown",s=>{s.key==="ArrowRight"?(t.checked=!0,n(String(t.checked)),s.preventDefault()):s.key==="ArrowLeft"&&(t.checked=!1,n(String(t.checked)),s.preventDefault())}));const n=s=>{e.setAttribute("aria-checked",String(s))}})};class p{constructor(e={}){b(this,"selectors");b(this,"main");const i={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",excludedItems:["divider","test"]};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),p.initGlobalListener(this.selectors)}filterExcluded(e,i){return Array.from(e).filter(t=>!i.some(n=>typeof n=="string"?t.classList.contains(n)||t.id===n:t===n))}event(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!i)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(a){return console.warn("Not found:",a.message)}const t=e.querySelector(`.${this.selectors.selected}`),n=e.querySelector(`.${this.selectors.arrow}`),s=e.querySelector(`.${this.selectors.optionsList}`);n&&n.addEventListener("click",()=>{this.toggle(e,s)}),t.addEventListener("click",()=>{this.toggle(e,s)}),e.addEventListener("click",()=>{this.itemsPosition(e,s)});const r=s.querySelectorAll("li"),c=this.filterExcluded(r,this.selectors.excludedItems);this.itemArrow(e,s,c,t,i),this.items(e,s,c,t,i)})}itemArrow(e,i,t,n,s){let r=-1;const c=n.textContent?n.textContent:"";e.addEventListener("keydown",a=>{const h=t.length;if(a.key==="ArrowDown"){a.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,i),r=(r+1)%h,n.textContent=t[r].textContent,t.forEach(f=>f.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const u=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),t[r].scrollIntoView({block:"nearest"})}else if(a.key==="ArrowUp"){a.preventDefault(),r=(r-1+h)%h,n.textContent=t[r].textContent,t.forEach(f=>f.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const u=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),t[r].scrollIntoView({block:"nearest"})}else if(a.key==="Enter"||a.key===" ")if(a.preventDefault(),r>=0){n.textContent=t[r].textContent,t.forEach(f=>f.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const u=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",u),s.value=String(t[r].dataset.value),this.close(e,i)}else this.toggle(e,i);else a.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(n.textContent=c),this.close(e,i))})}itemsPosition(e,i){const t=i.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,i,t,n,s){t.forEach((r,c)=>{r.addEventListener("click",()=>{const a=t[c];if(a){n.textContent=a.textContent,t.forEach(u=>u.removeAttribute("aria-selected")),a.setAttribute("aria-selected","true");const h=a.id||`${this.selectors.idPrefix}${c}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",h),s.value=String(t[c].dataset.value),this.close(e,i)}})})}toggle(e,i){p.closeAll(this.selectors),i.hidden?(i.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,i)}close(e,i){i.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(i=>{const t=i.querySelector(`.${e.optionsList}`);t.hidden=!0,i.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",i=>{const t=i.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(t))||p.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}exports.Select=p;exports.SpinBox=V;exports.Switch=_;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { SpinBox } from './SpinBox';
2
2
  export { Switch } from './Switch';
3
+ export { Select } from './Select';
package/dist/index.es.js CHANGED
@@ -1,19 +1,23 @@
1
- var R = Object.defineProperty;
2
- var I = (n) => {
3
- throw TypeError(n);
1
+ var M = Object.defineProperty;
2
+ var F = (d) => {
3
+ throw TypeError(d);
4
4
  };
5
- var _ = (n, t, i) => t in n ? R(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
6
- var p = (n, t, i) => _(n, typeof t != "symbol" ? t + "" : t, i), U = (n, t, i) => t.has(n) || I("Cannot " + i);
7
- 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);
8
- var N = (n, t, i) => (U(n, t, "access private method"), i);
9
- var d, k, $;
10
- class T {
11
- constructor(t = {}) {
12
- y(this, k);
13
- p(this, "selectors");
14
- p(this, "spinBoxes");
15
- y(this, d, (t, i, l, u = 0, e = 0) => {
16
- 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);
5
+ var V = (d, e, i) => e in d ? M(d, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : d[e] = i;
6
+ var b = (d, e, i) => V(d, typeof e != "symbol" ? e + "" : e, i), C = (d, e, i) => e.has(d) || F("Cannot " + i);
7
+ var m = (d, e, i) => (C(d, e, "read from private field"), i ? i.call(d) : e.get(d)), A = (d, e, i) => e.has(d) ? F("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(d) : e.set(d, i);
8
+ var S = (d, e, i) => (C(d, e, "access private method"), i);
9
+ var v, y, w, D;
10
+ class G {
11
+ constructor(e = {}) {
12
+ A(this, w);
13
+ b(this, "selectors");
14
+ b(this, "spinBoxes");
15
+ A(this, v, (e, i, t, n = 0, s = 0) => {
16
+ e == n || e < n ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1), s !== 0 && (e == s || e > s ? (t.classList.add(this.selectors.disabledBtn), t.disabled = !0) : (t.classList.remove(this.selectors.disabledBtn), t.disabled = !1));
17
+ });
18
+ A(this, y, (e, i) => {
19
+ const t = e.getAttribute(`data-${i}`);
20
+ return t === null || t.trim() === "" || isNaN(Number(t)) ? 0 : Number(t);
17
21
  });
18
22
  const i = {
19
23
  main: "UIsp",
@@ -21,66 +25,57 @@ class T {
21
25
  input: "UIsp__input",
22
26
  disabledBtn: "disabled"
23
27
  };
24
- this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
28
+ this.selectors = { ...i, ...e }, this.spinBoxes = document.querySelectorAll(
25
29
  `.${this.selectors.main}`
26
- ), N(this, k, $).call(this);
30
+ ), S(this, w, D).call(this);
27
31
  }
28
32
  }
29
- d = new WeakMap(), k = new WeakSet(), $ = function() {
30
- this.spinBoxes.forEach((t) => {
31
- const i = t.querySelectorAll(
33
+ v = new WeakMap(), y = new WeakMap(), w = new WeakSet(), D = function() {
34
+ this.spinBoxes.forEach((e) => {
35
+ const i = e.querySelectorAll(
32
36
  `.${this.selectors.btn}`
33
- ), l = i[0], u = i[1], e = t.querySelector(
37
+ ), t = i[0], n = i[1], s = e.querySelector(
34
38
  `.${this.selectors.input}`
35
- ), o = Number(t.dataset.step), r = Number(t.dataset.min), c = Number(t.dataset.max), b = (a) => {
36
- t.setAttribute("aria-valuenow", String(a)), t.setAttribute("aria-valuetext", `${a} items`);
39
+ ), r = Number(e.dataset.step), c = Number(e.dataset.min), a = m(this, y).call(this, e, "max"), h = (o) => {
40
+ e.setAttribute("aria-valuenow", String(o)), e.setAttribute("aria-valuetext", `${o} items`);
37
41
  };
38
- 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);
39
- let v = null;
40
- const A = (a = 1) => {
41
- e.value = String(Math.abs(Number(e.value)));
42
- let s = parseFloat(e.value) || 0;
43
- 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);
44
- }, L = (a = 1) => {
45
- e.value = String(Math.abs(Number(e.value)));
46
- let s = parseFloat(e.value) || 0;
47
- 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);
48
- }, w = (a, s = 150) => {
49
- v === null && (v = window.setInterval(a, s));
50
- }, g = () => {
51
- v !== null && (clearInterval(v), v = null);
42
+ Number(s.value) <= c && (s.value = c.toFixed(r)), a !== 0 ? (Number(s.value) >= a && (s.value = a.toFixed(r)), a && e.setAttribute("aria-valuemax", a.toFixed(r))) : s.value = Number(s.value).toFixed(r), c && e.setAttribute("aria-valuemin", c.toFixed(r)), m(this, v).call(this, Number(s.value), t, n, c, a), h(s.value);
43
+ let u = null;
44
+ const f = (o = 1) => {
45
+ s.value = String(Math.abs(Number(s.value)));
46
+ let l = parseFloat(s.value) || 0;
47
+ l = l + 1 * o / Math.pow(10, r), l > a && a !== 0 && (l = a), s.value = l.toFixed(r), m(this, v).call(this, Number(s.value), t, n, c, a), h(s.value);
48
+ }, E = (o = 1) => {
49
+ s.value = String(Math.abs(Number(s.value)));
50
+ let l = parseFloat(s.value) || 0;
51
+ l = l - 1 * o / Math.pow(10, r), l < c && (l = c), s.value = l.toFixed(r), m(this, v).call(this, Number(s.value), t, n, c, a), h(s.value);
52
+ }, p = (o, l = 150) => {
53
+ u === null && (u = window.setInterval(o, l));
54
+ }, L = () => {
55
+ u !== null && (clearInterval(u), u = null);
52
56
  };
53
- u.addEventListener("mousedown", (a) => {
54
- const s = a.shiftKey ? 3 : 1;
55
- w(() => A(s));
56
- }), u.addEventListener("touchstart", () => w(A)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
57
- (a) => {
58
- u.addEventListener(a, g);
59
- }
60
- ), u.addEventListener("click", (a) => {
61
- const s = a.shiftKey ? 3 : 1;
62
- v === null && A(s);
63
- }), l.addEventListener("click", (a) => {
64
- const s = a.shiftKey ? 3 : 1;
65
- v === null && L(s);
66
- }), l.addEventListener("mousedown", (a) => {
67
- const s = a.shiftKey ? 3 : 1;
68
- w(() => L(s), 100);
69
- }), l.addEventListener("touchstart", () => w(L, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
70
- (a) => {
71
- l.addEventListener(a, g);
57
+ n.addEventListener("mousedown", (o) => {
58
+ const l = o.shiftKey ? 3 : 1;
59
+ p(() => f(l));
60
+ }), n.addEventListener("touchstart", () => p(f)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
61
+ (o) => {
62
+ n.addEventListener(o, L);
72
63
  }
73
- ), t.addEventListener("keydown", (a) => {
74
- const s = a.key, E = a.shiftKey ? 3 : 1;
75
- if (s === "ArrowRight" || s === "ArrowLeft") {
76
- a.preventDefault();
77
- const S = parseFloat(e.value) || 0, m = 1 * E / Math.pow(10, o);
78
- let f = s === "ArrowRight" ? S + m : S - m;
79
- 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);
80
- return;
64
+ ), n.addEventListener("click", (o) => {
65
+ const l = o.shiftKey ? 3 : 1;
66
+ u === null && f(l);
67
+ }), t.addEventListener("click", (o) => {
68
+ const l = o.shiftKey ? 3 : 1;
69
+ u === null && E(l);
70
+ }), t.addEventListener("mousedown", (o) => {
71
+ const l = o.shiftKey ? 3 : 1;
72
+ p(() => E(l), 100);
73
+ }), t.addEventListener("touchstart", () => p(E, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
74
+ (o) => {
75
+ t.addEventListener(o, L);
81
76
  }
82
- }), e.addEventListener("keydown", (a) => {
83
- const s = a.key, E = a.shiftKey ? 3 : 1;
77
+ ), s.addEventListener("keydown", (o) => {
78
+ const l = o.key, K = o.shiftKey ? 3 : 1;
84
79
  if ([
85
80
  "Backspace",
86
81
  "Delete",
@@ -90,55 +85,170 @@ d = new WeakMap(), k = new WeakSet(), $ = function() {
90
85
  "Enter",
91
86
  "Home",
92
87
  "End"
93
- ].includes(s) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
88
+ ].includes(l) || (o.ctrlKey || o.metaKey) && ["a", "c", "v", "x"].includes(l.toLowerCase()))
94
89
  return;
95
- if (["e", "+", "-"].includes(s)) {
96
- a.preventDefault();
90
+ if (["e", "+", "-"].includes(l)) {
91
+ o.preventDefault();
97
92
  return;
98
93
  }
99
- if (s === "ArrowUp" || s === "ArrowDown") {
100
- a.preventDefault();
101
- const K = parseFloat(e.value) || 0, B = 1 * E / Math.pow(10, o);
102
- let F = s === "ArrowUp" ? K + B : K - B;
103
- 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);
94
+ if (l === "ArrowUp" || l === "ArrowDown") {
95
+ o.preventDefault();
96
+ const q = parseFloat(s.value) || 0, U = 1 * K / Math.pow(10, r);
97
+ let g = l === "ArrowUp" ? q + U : q - U;
98
+ g < c && (g = c), s.value = g.toFixed(r), Number(s.value) < c && (s.value = c.toFixed(r)), Number(s.value) > a && a !== 0 && (s.value = a.toFixed(r)), m(this, v).call(this, Number(s.value), t, n, c, a), h(s.value);
104
99
  return;
105
100
  }
106
- const m = s === "," ? "." : s, f = /^[0-9]$/.test(m), D = m === ".", M = e.value.includes(".");
107
- (o === 0 && !f || o > 0 && !(f || D) || D && M) && a.preventDefault();
108
- }), e.addEventListener("change", () => {
109
- 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);
101
+ const I = l === "," ? "." : l, $ = /^[0-9]$/.test(I), N = I === ".", P = s.value.includes(".");
102
+ (r === 0 && !$ || r > 0 && !($ || N) || N && P) && o.preventDefault();
103
+ }), s.addEventListener("change", () => {
104
+ Number(s.value) < c && (s.value = c.toFixed(r)), Number(s.value) > a && a !== 0 ? s.value = a.toFixed(r) : s.value = Number(s.value).toFixed(r), m(this, v).call(this, Number(s.value), t, n, c, a);
110
105
  });
111
106
  });
112
107
  };
113
- var x, q;
114
- class H {
115
- constructor(t = {}) {
116
- y(this, x);
117
- p(this, "selectors");
118
- p(this, "main");
108
+ var k, B;
109
+ class T {
110
+ constructor(e = {}) {
111
+ A(this, k);
112
+ b(this, "selectors");
113
+ b(this, "main");
119
114
  const i = {
120
115
  main: "UIsw",
121
116
  label: "UIsw-label"
122
117
  };
123
- this.selectors = { ...i, ...t }, this.main = document.querySelectorAll(
118
+ this.selectors = { ...i, ...e }, this.main = document.querySelectorAll(
124
119
  `.${this.selectors.main}`
125
- ), N(this, x, q).call(this);
120
+ ), S(this, k, B).call(this);
126
121
  }
127
122
  }
128
- x = new WeakSet(), q = function() {
129
- this.main.forEach((t) => {
130
- const i = t.querySelector(`.${this.selectors.label}`), l = t.querySelector("input");
131
- 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", () => {
132
- l.checked = !l.checked, t.setAttribute("aria-checked", String(l.checked));
133
- }), t.addEventListener("keydown", (e) => {
134
- e.key === "ArrowRight" ? (l.checked = !0, u(String(l.checked)), e.preventDefault()) : e.key === "ArrowLeft" && (l.checked = !1, u(String(l.checked)), e.preventDefault());
123
+ k = new WeakSet(), B = function() {
124
+ this.main.forEach((e) => {
125
+ const i = e.querySelector(`.${this.selectors.label}`), t = e.querySelector("input");
126
+ i && i.id && e.setAttribute("aria-labelledby", i.id), t && (t.checked ? e.setAttribute("aria-checked", "true") : e.setAttribute("aria-checked", "false"), e.addEventListener("click", () => {
127
+ t.checked = !t.checked, e.setAttribute("aria-checked", String(t.checked));
128
+ }), e.addEventListener("keydown", (s) => {
129
+ s.key === "ArrowRight" ? (t.checked = !0, n(String(t.checked)), s.preventDefault()) : s.key === "ArrowLeft" && (t.checked = !1, n(String(t.checked)), s.preventDefault());
135
130
  }));
136
- const u = (e) => {
137
- t.setAttribute("aria-checked", String(e));
131
+ const n = (s) => {
132
+ e.setAttribute("aria-checked", String(s));
138
133
  };
139
134
  });
140
135
  };
136
+ class x {
137
+ constructor(e = {}) {
138
+ b(this, "selectors");
139
+ b(this, "main");
140
+ const i = {
141
+ idPrefix: "UI-option-",
142
+ main: "UIselect",
143
+ selected: "UIselect-selected",
144
+ arrow: "UIselect-arrow",
145
+ optionsList: "UIselect-options",
146
+ excludedItems: ["divider", "test"]
147
+ // class=""
148
+ };
149
+ this.selectors = { ...i, ...e }, this.main = document.querySelectorAll(
150
+ `.${this.selectors.main}`
151
+ ), this.event(), x.initGlobalListener(this.selectors);
152
+ }
153
+ filterExcluded(e, i) {
154
+ return Array.from(e).filter((t) => !i.some((n) => typeof n == "string" ? t.classList.contains(n) || t.id === n : t === n));
155
+ }
156
+ event() {
157
+ this.main.forEach((e) => {
158
+ const i = e.querySelector(
159
+ `.${this.selectors.main} input[type='hidden']`
160
+ );
161
+ try {
162
+ if (!i)
163
+ throw new Error('<input type="hidden" name="YouUniqueId">');
164
+ } catch (a) {
165
+ return console.warn("Not found:", a.message);
166
+ }
167
+ const t = e.querySelector(
168
+ `.${this.selectors.selected}`
169
+ ), n = e.querySelector(
170
+ `.${this.selectors.arrow}`
171
+ ), s = e.querySelector(
172
+ `.${this.selectors.optionsList}`
173
+ );
174
+ n && n.addEventListener("click", () => {
175
+ this.toggle(e, s);
176
+ }), t.addEventListener("click", () => {
177
+ this.toggle(e, s);
178
+ }), e.addEventListener("click", () => {
179
+ this.itemsPosition(e, s);
180
+ });
181
+ const r = s.querySelectorAll("li"), c = this.filterExcluded(
182
+ r,
183
+ this.selectors.excludedItems
184
+ );
185
+ this.itemArrow(e, s, c, t, i), this.items(e, s, c, t, i);
186
+ });
187
+ }
188
+ itemArrow(e, i, t, n, s) {
189
+ let r = -1;
190
+ const c = n.textContent ? n.textContent : "";
191
+ e.addEventListener("keydown", (a) => {
192
+ const h = t.length;
193
+ if (a.key === "ArrowDown") {
194
+ a.preventDefault(), e.getAttribute("aria-expanded") === "false" && this.toggle(e, i), r = (r + 1) % h, n.textContent = t[r].textContent, t.forEach((f) => f.removeAttribute("aria-selected")), t[r].setAttribute("aria-selected", "true");
195
+ const u = t[r].id || `${this.selectors.idPrefix}${r}`;
196
+ e.setAttribute("aria-activedescendant", u), t[r].scrollIntoView({ block: "nearest" });
197
+ } else if (a.key === "ArrowUp") {
198
+ a.preventDefault(), r = (r - 1 + h) % h, n.textContent = t[r].textContent, t.forEach((f) => f.removeAttribute("aria-selected")), t[r].setAttribute("aria-selected", "true");
199
+ const u = t[r].id || `${this.selectors.idPrefix}${r}`;
200
+ e.setAttribute("aria-activedescendant", u), t[r].scrollIntoView({ block: "nearest" });
201
+ } else if (a.key === "Enter" || a.key === " ")
202
+ if (a.preventDefault(), r >= 0) {
203
+ n.textContent = t[r].textContent, t.forEach((f) => f.removeAttribute("aria-selected")), t[r].setAttribute("aria-selected", "true");
204
+ const u = t[r].id || `${this.selectors.idPrefix}${r}`;
205
+ e.setAttribute("aria-activedescendant", u), s.value = String(t[r].dataset.value), this.close(e, i);
206
+ } else
207
+ this.toggle(e, i);
208
+ else a.key === "Escape" && (e.getAttribute("aria-activedescendant") || (n.textContent = c), this.close(e, i));
209
+ });
210
+ }
211
+ itemsPosition(e, i) {
212
+ const t = i.querySelector(
213
+ '[aria-selected="true"]'
214
+ );
215
+ t && t.scrollIntoView({ block: "nearest" });
216
+ }
217
+ items(e, i, t, n, s) {
218
+ t.forEach((r, c) => {
219
+ r.addEventListener("click", () => {
220
+ const a = t[c];
221
+ if (a) {
222
+ n.textContent = a.textContent, t.forEach((u) => u.removeAttribute("aria-selected")), a.setAttribute("aria-selected", "true");
223
+ const h = a.id || `${this.selectors.idPrefix}${c}`;
224
+ e.setAttribute("aria-expanded", "false"), e.setAttribute("aria-activedescendant", h), s.value = String(t[c].dataset.value), this.close(e, i);
225
+ }
226
+ });
227
+ });
228
+ }
229
+ toggle(e, i) {
230
+ x.closeAll(this.selectors), i.hidden ? (i.hidden = !1, e.setAttribute("aria-expanded", "true")) : this.close(e, i);
231
+ }
232
+ close(e, i) {
233
+ i.hidden = !0, e.setAttribute("aria-expanded", "false");
234
+ }
235
+ static closeAll(e) {
236
+ document.querySelectorAll(`.${e.main}`).forEach((i) => {
237
+ const t = i.querySelector(`.${e.optionsList}`);
238
+ t.hidden = !0, i.setAttribute("aria-expanded", "false");
239
+ });
240
+ }
241
+ static initGlobalListener(e) {
242
+ window.__UIselectGlobalClickInitialized || (document.addEventListener("click", (i) => {
243
+ const t = i.target;
244
+ [...document.querySelectorAll(`.${e.main}`)].some(
245
+ (s) => s.contains(t)
246
+ ) || x.closeAll(e);
247
+ }), window.__UIselectGlobalClickInitialized = !0);
248
+ }
249
+ }
141
250
  export {
142
- T as SpinBox,
143
- H as Switch
251
+ x as Select,
252
+ G as SpinBox,
253
+ T as Switch
144
254
  };
package/dist/index.umd.js CHANGED
@@ -1 +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"})});
1
+ (function(o,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(o=typeof globalThis<"u"?globalThis:o||self,u(o.UiElements={}))})(this,function(o){"use strict";var _=Object.defineProperty;var D=o=>{throw TypeError(o)};var z=(o,u,h)=>u in o?_(o,u,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[u]=h;var p=(o,u,h)=>z(o,typeof u!="symbol"?u+"":u,h),B=(o,u,h)=>u.has(o)||D("Cannot "+h);var A=(o,u,h)=>(B(o,u,"read from private field"),h?h.call(o):u.get(o)),x=(o,u,h)=>u.has(o)?D("Cannot add the same private member more than once"):u instanceof WeakSet?u.add(o):u.set(o,h);var I=(o,u,h)=>(B(o,u,"access private method"),h);var m,w,k,K,E,P;class u{constructor(e={}){x(this,k);p(this,"selectors");p(this,"spinBoxes");x(this,m,(e,i,t,a=0,s=0)=>{e==a||e<a?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),s!==0&&(e==s||e>s?(t.classList.add(this.selectors.disabledBtn),t.disabled=!0):(t.classList.remove(this.selectors.disabledBtn),t.disabled=!1))});x(this,w,(e,i)=>{const t=e.getAttribute(`data-${i}`);return t===null||t.trim()===""||isNaN(Number(t))?0:Number(t)});const i={main:"UIsp",btn:"UIsp__btn",input:"UIsp__input",disabledBtn:"disabled"};this.selectors={...i,...e},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),I(this,k,K).call(this)}}m=new WeakMap,w=new WeakMap,k=new WeakSet,K=function(){this.spinBoxes.forEach(e=>{const i=e.querySelectorAll(`.${this.selectors.btn}`),t=i[0],a=i[1],s=e.querySelector(`.${this.selectors.input}`),r=Number(e.dataset.step),d=Number(e.dataset.min),n=A(this,w).call(this,e,"max"),v=c=>{e.setAttribute("aria-valuenow",String(c)),e.setAttribute("aria-valuetext",`${c} items`)};Number(s.value)<=d&&(s.value=d.toFixed(r)),n!==0?(Number(s.value)>=n&&(s.value=n.toFixed(r)),n&&e.setAttribute("aria-valuemax",n.toFixed(r))):s.value=Number(s.value).toFixed(r),d&&e.setAttribute("aria-valuemin",d.toFixed(r)),A(this,m).call(this,Number(s.value),t,a,d,n),v(s.value);let f=null;const b=(c=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l+1*c/Math.pow(10,r),l>n&&n!==0&&(l=n),s.value=l.toFixed(r),A(this,m).call(this,Number(s.value),t,a,d,n),v(s.value)},g=(c=1)=>{s.value=String(Math.abs(Number(s.value)));let l=parseFloat(s.value)||0;l=l-1*c/Math.pow(10,r),l<d&&(l=d),s.value=l.toFixed(r),A(this,m).call(this,Number(s.value),t,a,d,n),v(s.value)},S=(c,l=150)=>{f===null&&(f=window.setInterval(c,l))},$=()=>{f!==null&&(clearInterval(f),f=null)};a.addEventListener("mousedown",c=>{const l=c.shiftKey?3:1;S(()=>b(l))}),a.addEventListener("touchstart",()=>S(b)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(c=>{a.addEventListener(c,$)}),a.addEventListener("click",c=>{const l=c.shiftKey?3:1;f===null&&b(l)}),t.addEventListener("click",c=>{const l=c.shiftKey?3:1;f===null&&g(l)}),t.addEventListener("mousedown",c=>{const l=c.shiftKey?3:1;S(()=>g(l),100)}),t.addEventListener("touchstart",()=>S(g,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(c=>{t.addEventListener(c,$)}),s.addEventListener("keydown",c=>{const l=c.key,M=c.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(l)||(c.ctrlKey||c.metaKey)&&["a","c","v","x"].includes(l.toLowerCase()))return;if(["e","+","-"].includes(l)){c.preventDefault();return}if(l==="ArrowUp"||l==="ArrowDown"){c.preventDefault();const F=parseFloat(s.value)||0,C=1*M/Math.pow(10,r);let L=l==="ArrowUp"?F+C:F-C;L<d&&(L=d),s.value=L.toFixed(r),Number(s.value)<d&&(s.value=d.toFixed(r)),Number(s.value)>n&&n!==0&&(s.value=n.toFixed(r)),A(this,m).call(this,Number(s.value),t,a,d,n),v(s.value);return}const N=l===","?".":l,U=/^[0-9]$/.test(N),q=N===".",V=s.value.includes(".");(r===0&&!U||r>0&&!(U||q)||q&&V)&&c.preventDefault()}),s.addEventListener("change",()=>{Number(s.value)<d&&(s.value=d.toFixed(r)),Number(s.value)>n&&n!==0?s.value=n.toFixed(r):s.value=Number(s.value).toFixed(r),A(this,m).call(this,Number(s.value),t,a,d,n)})})};class h{constructor(e={}){x(this,E);p(this,"selectors");p(this,"main");const i={main:"UIsw",label:"UIsw-label"};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),I(this,E,P).call(this)}}E=new WeakSet,P=function(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.label}`),t=e.querySelector("input");i&&i.id&&e.setAttribute("aria-labelledby",i.id),t&&(t.checked?e.setAttribute("aria-checked","true"):e.setAttribute("aria-checked","false"),e.addEventListener("click",()=>{t.checked=!t.checked,e.setAttribute("aria-checked",String(t.checked))}),e.addEventListener("keydown",s=>{s.key==="ArrowRight"?(t.checked=!0,a(String(t.checked)),s.preventDefault()):s.key==="ArrowLeft"&&(t.checked=!1,a(String(t.checked)),s.preventDefault())}));const a=s=>{e.setAttribute("aria-checked",String(s))}})};class y{constructor(e={}){p(this,"selectors");p(this,"main");const i={idPrefix:"UI-option-",main:"UIselect",selected:"UIselect-selected",arrow:"UIselect-arrow",optionsList:"UIselect-options",excludedItems:["divider","test"]};this.selectors={...i,...e},this.main=document.querySelectorAll(`.${this.selectors.main}`),this.event(),y.initGlobalListener(this.selectors)}filterExcluded(e,i){return Array.from(e).filter(t=>!i.some(a=>typeof a=="string"?t.classList.contains(a)||t.id===a:t===a))}event(){this.main.forEach(e=>{const i=e.querySelector(`.${this.selectors.main} input[type='hidden']`);try{if(!i)throw new Error('<input type="hidden" name="YouUniqueId">')}catch(n){return console.warn("Not found:",n.message)}const t=e.querySelector(`.${this.selectors.selected}`),a=e.querySelector(`.${this.selectors.arrow}`),s=e.querySelector(`.${this.selectors.optionsList}`);a&&a.addEventListener("click",()=>{this.toggle(e,s)}),t.addEventListener("click",()=>{this.toggle(e,s)}),e.addEventListener("click",()=>{this.itemsPosition(e,s)});const r=s.querySelectorAll("li"),d=this.filterExcluded(r,this.selectors.excludedItems);this.itemArrow(e,s,d,t,i),this.items(e,s,d,t,i)})}itemArrow(e,i,t,a,s){let r=-1;const d=a.textContent?a.textContent:"";e.addEventListener("keydown",n=>{const v=t.length;if(n.key==="ArrowDown"){n.preventDefault(),e.getAttribute("aria-expanded")==="false"&&this.toggle(e,i),r=(r+1)%v,a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),t[r].scrollIntoView({block:"nearest"})}else if(n.key==="ArrowUp"){n.preventDefault(),r=(r-1+v)%v,a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),t[r].scrollIntoView({block:"nearest"})}else if(n.key==="Enter"||n.key===" ")if(n.preventDefault(),r>=0){a.textContent=t[r].textContent,t.forEach(b=>b.removeAttribute("aria-selected")),t[r].setAttribute("aria-selected","true");const f=t[r].id||`${this.selectors.idPrefix}${r}`;e.setAttribute("aria-activedescendant",f),s.value=String(t[r].dataset.value),this.close(e,i)}else this.toggle(e,i);else n.key==="Escape"&&(e.getAttribute("aria-activedescendant")||(a.textContent=d),this.close(e,i))})}itemsPosition(e,i){const t=i.querySelector('[aria-selected="true"]');t&&t.scrollIntoView({block:"nearest"})}items(e,i,t,a,s){t.forEach((r,d)=>{r.addEventListener("click",()=>{const n=t[d];if(n){a.textContent=n.textContent,t.forEach(f=>f.removeAttribute("aria-selected")),n.setAttribute("aria-selected","true");const v=n.id||`${this.selectors.idPrefix}${d}`;e.setAttribute("aria-expanded","false"),e.setAttribute("aria-activedescendant",v),s.value=String(t[d].dataset.value),this.close(e,i)}})})}toggle(e,i){y.closeAll(this.selectors),i.hidden?(i.hidden=!1,e.setAttribute("aria-expanded","true")):this.close(e,i)}close(e,i){i.hidden=!0,e.setAttribute("aria-expanded","false")}static closeAll(e){document.querySelectorAll(`.${e.main}`).forEach(i=>{const t=i.querySelector(`.${e.optionsList}`);t.hidden=!0,i.setAttribute("aria-expanded","false")})}static initGlobalListener(e){window.__UIselectGlobalClickInitialized||(document.addEventListener("click",i=>{const t=i.target;[...document.querySelectorAll(`.${e.main}`)].some(s=>s.contains(t))||y.closeAll(e)}),window.__UIselectGlobalClickInitialized=!0)}}o.Select=y,o.SpinBox=u,o.Switch=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
package/dist/style.css CHANGED
@@ -1 +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}
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:0rem 0rem .075rem .25rem;font-size:1rem}.UIsp>.UIsp__input{border:none;height:2.5rem;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0;border-top:1px solid var(--c-g-500);border-bottom:1px solid var(--c-g-500);box-sizing:border-box}.UIsp>.UIsp__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.UIsp__txt{font-weight:400}.UIsp>.UIsp__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:2.5rem;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem;border-radius:.5rem 0 0 .5rem;border:1px solid var(--c-g-500)}.UIsp>.UIsp__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.UIsp>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.UIsp>.UIsp__btn:last-of-type{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.UIsp>.UIsp__btn:last-of-type{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.UIsp.r-0>.UIsp__btn{border-radius:0}.UIsp.r-round>.UIsp__btn:first-of-type{border-radius:1.5rem 0 0 1.5rem}.UIsp.r-round>.UIsp__btn:last-of-type{border-radius:0 1.5rem 1.5rem 0}.UIsp.sm{width:10rem}.UIsp.sm>.UIsp-label{padding:0rem 0rem 0rem .125rem;font-size:.8rem}.UIsp.sm>.UIsp__input,.UIsp.sm>.UIsp__btn{font-size:1rem;height:2rem}.UIsp.sm>.UIsp__btn{width:2rem}.UIsp.lg{width:16rem}.UIsp.lg>.UIsp__input,.UIsp.lg>.UIsp__btn{font-size:2rem;height:3rem}.UIsp.lg>.UIsp__btn{width:3rem}.UIsp.danger{border-color:var(--c-d-500)}.UIsp.danger>.UIsp__input{background-color:var(--c-d-50);border-color:var(--c-d-500);color:var(--c-d-700)}.UIsp.danger>.UIsp__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.UIsp.danger>.UIsp__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.UIsp.danger>.UIsp__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.UIsp.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.UIsp.info{border-color:var(--c-i-500)}.UIsp.info>.UIsp__input{background-color:var(--c-i-50);border-color:var(--c-i-500);color:var(--c-i-700)}.UIsp.info>.UIsp__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.UIsp.info>.UIsp__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.UIsp.info>.UIsp__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.UIsp.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.UIsp.primary{border-color:var(--c-p-500)}.UIsp.primary>.UIsp__input{background-color:var(--c-p-50);border-color:var(--c-p-500);color:var(--c-p-700)}.UIsp.primary>.UIsp__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.UIsp.primary>.UIsp__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.UIsp.primary>.UIsp__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.UIsp.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.UIsp.success{border-color:var(--c-s-500)}.UIsp.success>.UIsp__input{background-color:var(--c-s-50);border-color:var(--c-s-500);color:var(--c-s-700)}.UIsp.success>.UIsp__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.UIsp.success>.UIsp__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.UIsp.success>.UIsp__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.UIsp.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.UIsp.warning{border-color:var(--c-w-500)}.UIsp.warning>.UIsp__input{background-color:var(--c-w-50);border-color:var(--c-w-500);color:var(--c-w-700)}.UIsp.warning>.UIsp__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.UIsp.warning>.UIsp__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.UIsp.warning>.UIsp__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.UIsp.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}.UIselect{display:flex;align-self:end;background-color:var(--c-g-700);border-radius:.5rem;width:12rem;height:2.5rem;position:relative;cursor:pointer;box-sizing:border-box}.UIselect-selected{display:flex;align-items:center;background-color:var(--c-g-300);border-radius:.5rem;padding:0 .5rem;margin:1px;height:calc(100% - 2px);width:100%}.UIselect-arrow{position:absolute;top:.5rem;right:.5rem}.UIselect-options{list-style:none;margin:0;padding:0;border-radius:.5rem;position:absolute;width:inherit;background:var(--c-g-900);color:var(--c-g-100);z-index:2;max-height:10rem;overflow-y:auto;left:0;box-sizing:border-box}.UIselect-options>li{display:flex;align-items:center;padding:0 .5rem;margin:1px;border-radius:.5rem;height:2.5rem}.UIselect-options>li:hover{background:var(--c-g-700);color:var(--c-g-50)}.UIselect-options>li[aria-selected=true]{background:var(--c-g-500);color:var(--c-g-950)}.UIselect-options>li.divider{height:1px;background-color:var(--c-g-500);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{border-radius:0}.UIselect.r-1{border-radius:1.5rem}.UIselect.r-1>.UIselect-selected{border-radius:1.5rem}.UIselect.lg{width:15rem;height:3rem;font-size:1.1rem}.UIselect.lg>.UIselect-arrow{top:.7rem;right:.8rem}.UIselect.lg>.UIselect-options{max-height:25rem}.UIselect.lg>.UIselect-options>li{height:3rem}.UIselect.lg>.UIselect-options>li.divider{height:1px;margin:0 .5rem}.UIselect.sm{width:10rem;height:2rem;font-size:.9rem}.UIselect.sm>.UIselect-arrow{top:.3rem;right:.5rem}.UIselect.sm>.UIselect-options{max-height:15rem}.UIselect.sm>.UIselect-options>li{height:2rem}.UIselect.sm>.UIselect-options>li.divider{height:1px;margin:0 .25rem}.UIselect.danger{background-color:var(--c-d-700)}.UIselect.danger>.UIselect-arrow{color:var(--c-d-700)}.UIselect.danger>.UIselect-selected{background-color:var(--c-d-300);color:var(--c-d-700)}.UIselect.danger>.UIselect-options{background-color:var(--c-d-900)}.UIselect.danger>.UIselect-options>li{color:var(--c-d-50)}.UIselect.danger>.UIselect-options>li:hover{background:var(--c-d-700);color:var(--c-d-50)}.UIselect.danger>.UIselect-options>li[aria-selected=true]{background:var(--c-d-500);color:var(--c-d-950)}.UIselect.danger>.UIselect-options>li.divider{height:1px;background-color:var(--c-d-500)}.UIselect.info{background-color:var(--c-i-700)}.UIselect.info>.UIselect-arrow{color:var(--c-i-700)}.UIselect.info>.UIselect-selected{background-color:var(--c-i-300);color:var(--c-i-700)}.UIselect.info>.UIselect-options{background-color:var(--c-i-900)}.UIselect.info>.UIselect-options>li{color:var(--c-i-50)}.UIselect.info>.UIselect-options>li:hover{background:var(--c-i-700);color:var(--c-i-50)}.UIselect.info>.UIselect-options>li[aria-selected=true]{background:var(--c-i-500);color:var(--c-i-950)}.UIselect.info>.UIselect-options>li.divider{height:1px;background-color:var(--c-i-500)}.UIselect.primary{background-color:var(--c-p-700)}.UIselect.primary>.UIselect-arrow{color:var(--c-p-700)}.UIselect.primary>.UIselect-selected{background-color:var(--c-p-300);color:var(--c-p-700)}.UIselect.primary>.UIselect-options{background-color:var(--c-p-900)}.UIselect.primary>.UIselect-options>li{color:var(--c-p-50)}.UIselect.primary>.UIselect-options>li:hover{background:var(--c-p-700);color:var(--c-p-50)}.UIselect.primary>.UIselect-options>li[aria-selected=true]{background:var(--c-p-500);color:var(--c-p-950)}.UIselect.primary>.UIselect-options>li.divider{height:1px;background-color:var(--c-p-500)}.UIselect.success{background-color:var(--c-s-700)}.UIselect.success>.UIselect-arrow{color:var(--c-s-700)}.UIselect.success>.UIselect-selected{background-color:var(--c-s-300);color:var(--c-s-700)}.UIselect.success>.UIselect-options{background-color:var(--c-s-900)}.UIselect.success>.UIselect-options>li{color:var(--c-s-50)}.UIselect.success>.UIselect-options>li:hover{background:var(--c-s-700);color:var(--c-s-50)}.UIselect.success>.UIselect-options>li[aria-selected=true]{background:var(--c-s-500);color:var(--c-s-950)}.UIselect.success>.UIselect-options>li.divider{height:1px;background-color:var(--c-s-500)}.UIselect.warning{background-color:var(--c-w-700)}.UIselect.warning>.UIselect-arrow{color:var(--c-w-700)}.UIselect.warning>.UIselect-selected{background-color:var(--c-w-300);color:var(--c-w-700)}.UIselect.warning>.UIselect-options{background-color:var(--c-w-900)}.UIselect.warning>.UIselect-options>li{color:var(--c-w-50)}.UIselect.warning>.UIselect-options>li:hover{background:var(--c-w-700);color:var(--c-w-50)}.UIselect.warning>.UIselect-options>li[aria-selected=true]{background:var(--c-w-500);color:var(--c-w-950)}.UIselect.warning>.UIselect-options>li.divider{height:1px;background-color:var(--c-w-500)}.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 CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "author": "Andrii Popov",
3
3
  "name": "@popovandrii/ui-elements",
4
- "description": "Custom UI elements like SpinBox with theme support",
5
- "version": "0.0.11",
4
+ "description": "User interface elements. Color scheme. Elements with complex logic Java Script. Contrasting UI elements.",
5
+ "version": "0.0.13",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "spinbox",