@esportsplus/ui 0.51.7 → 0.54.0

package/build/components/radio/index.js

@@ -1,3 +1,2 @@
 import { factory } from '../checkbox/index.js';
-import './scss/index.scss';
 export default factory('radio');

package/build/components/range/index.d.ts

@@ -2,7 +2,7 @@ import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
-} | any, attributes: Attributes & {
+} | void, attributes: Attributes & {
     max: number;
     min: number;
     state?: {

package/build/components/range/index.js

@@ -1,9 +1,9 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { root } from '@esportsplus/reactivity';
 import form from '../form/index.js';
 import './scss/index.scss';
-const template_0aka2e62 = template_u1.template(`<input class='range --border-state --border-black' type='range' />`);
+const template_u1k = template_u0.template(`<input class='range --border-state --border-black' type='range' />`);
 class ReactiveObject_0aka2e60 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -36,23 +36,23 @@ export default function (attributes) {
         state.value = Number(attributes.value);
     }
     return (() => {
-        let root_0aka2e61 = template_0aka2e62(), element_0aka2e63 = root_0aka2e61.firstChild;
-        template_u1.setList(element_0aka2e63, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
-        template_u1.setProperties(element_0aka2e63, this?.attributes);
-        template_u1.setProperties(element_0aka2e63, attributes);
-        template_u1.setList(element_0aka2e63, 'class', () => state.active && '--active');
-        template_u1.on(element_0aka2e63, 'focusin', () => {
+        let root_u1j = template_u1k(), element_u1l = root_u1j.firstChild;
+        template_u0.setList(element_u1l, 'style', () => `--thumb-position: ${((state.value - min) / (max - min)) * 100}%`);
+        template_u0.setProperties(element_u1l, this?.attributes);
+        template_u0.setProperties(element_u1l, attributes);
+        template_u0.setList(element_u1l, 'class', () => state.active && '--active');
+        template_u0.on(element_u1l, 'focusin', () => {
             state.active = true;
         });
-        template_u1.on(element_0aka2e63, 'focusout', () => {
+        template_u0.on(element_u1l, 'focusout', () => {
             state.active = false;
         });
-        template_u1.delegate(element_0aka2e63, 'input', (e) => {
+        template_u0.delegate(element_u1l, 'input', (e) => {
             state.value = Number(e.target.value);
         });
-        template_u1.onrender(element_0aka2e63, form.input.onrender(state));
-        template_u1.setProperty(element_0aka2e63, 'value', root(() => attributes?.value || state.value || 0));
-        return root_0aka2e61;
+        template_u0.onrender(element_u1l, form.input.onrender(state));
+        template_u0.setProperty(element_u1l, 'value', root(() => attributes?.value || state.value || 0));
+        return root_u1j;
     })();
 }
 ;

package/build/components/range/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height)) / 2) var(--margin-horizontal);transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
+@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height)) / 2) var(--margin-horizontal);transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width) solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
 /*$vite$:1*/

package/build/components/root/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {:root{--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:10px;--border-radius-600:12px;--border-radius-700:16px;--border-radius-800:20px;--border-radius-0px:0px;--border-radius-circle:100%;--border-radius-curved:240px;--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--box-shadow-100:0 1px 2px 0 oklch(from var(--color-black-300) l c h/.2);--box-shadow-200:0 1px 3px 0 oklch(from var(--color-black-300) l c h/.2), 0 1px 2px -1px oklch(from var(--color-black-300) l c h/.2);--box-shadow-300:0 4px 6px -1px oklch(from var(--color-black-300) l c h/.2), 0 2px 4px -2px oklch(from var(--color-black-300) l c h/.2);--box-shadow-400:0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 4px 6px -4px oklch(from var(--color-black-300) l c h/.2);--box-shadow-500:0 20px 25px -5px oklch(from var(--color-black-300) l c h/.2), 0 8px 10px -6px oklch(from var(--color-black-300) l c h/.2);--box-shadow-600:0 25px 50px -12px oklch(from var(--color-black-500) l c h/.2);--box-shadow-glow:0px 0px 128px 32px var(--box-shadow-color,#fff), 0px 0px 32px 8px var(--box-shadow-color,#fff), 0px 0px 8px 0px var(--box-shadow-color,#fff);--color-black-300:#101221;--color-black-400:#020412;--color-black-500:#01030c;--color-blue-300:#3755ff;--color-blue-400:#2545ff;--color-blue-500:#1e3def;--color-border-300:#bec3dd;--color-border-400:#b4b9d2;--color-border-500:#a5a9c2;--color-green-300:#17ff4b;--color-green-400:#02f336;--color-green-500:#00e131;--color-grey-300:#f4f9ff;--color-grey-400:#e7f1fa;--color-grey-500:#d4dde6;--color-purple-300:#7d15ff;--color-purple-400:#7300ff;--color-purple-500:#6a00eb;--color-red-300:#ff2a3d;--color-red-400:#ff0017;--color-red-500:#eb0015;--color-text-300:#1e243f;--color-text-400:#171d39;--color-text-500:#121832;--color-white-300:#fff;--color-white-400:#fff;--color-white-500:#fff;--color-yellow-300:#fbff5f;--color-yellow-400:#f9ff00;--color-yellow-500:#e3eb00;--font-size-100:clamp(.67rem, -.67vi + .75rem, .42rem);--font-size-200:clamp(.69rem, -.42vi + .75rem, .53rem);--font-size-300:clamp(.72rem, -.1vi + .73rem, .68rem);--font-size-400:clamp(.75rem, .33vi + .71rem, .88rem);--font-size-500:clamp(.78rem, .91vi + .67rem, 1.12rem);--font-size-600:clamp(.81rem, 1.66vi + .6rem, 1.43rem);--font-size-700:clamp(.84rem, 2.64vi + .51rem, 1.84rem);--font-size-800:clamp(.88rem, 3.92vi + .39rem, 2.35rem);--font-size-900:clamp(.91rem, 5.58vi + .21rem, 3.01rem);--font-weight-300:400;--font-weight-400:500;--font-weight-500:600;--font-weight-600:700;--line-height-100:1;--line-height-200:1.2;--line-height-300:1.4;--line-height-400:1.6;--size-100:4px;--size-200:8px;--size-300:12px;--size-400:16px;--size-500:20px;--size-600:24px;--size-700:32px;--size-800:40px;--size-900:48px;--size-0px:0px;--spacer-100:40px;--spacer-200:60px;--spacer-300:80px;--spacer-400:120px;--spacer-500:160px;--spacer-600:180px;--spacer-700:220px;--background:var(--color-grey-400);--color:var(--color-text-400);--font-family:"Montserrat", sans-serif;--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--min-width:320px;--scrollbar-width:17px;--transition-duration:.16s;--timing-back:linear(0, -.0059 4.51%, -.0418 15.63%, -.0499 20.72%, -.0476 23.51%, -.0395 26.12%, -.0255 28.59%, -.0055 30.95%, .0281 33.76%, .0717 36.47%, .1901 41.63%, .344 46.32%, .6156 52.65%, .7495 56.35%, .8757 60.97%, .9663 65.85%, 1.0006 68.58%, 1.0256 71.43%, 1.0417 74.43%, 1.0493 77.65%, 1.0452 83.02%, 1.0077 94.8%, 1);--timing-back-in:linear(0, -.0029 4.31%, -.0119 9.02%, -.0837 31.27%, -.0954 36.64%, -.0998 41.45%, -.0951 47.03%, -.079 52.25%, -.051 57.19%, -.0108 61.92%, .0515 67.19%, .1312 72.27%, .2286 77.18%, .3445 81.96%, .4792 86.62%, .633 91.17%, .8066 95.63%, 1);--timing-back-out:linear(0, .1934 4.37%, .367 8.83%, .5208 13.38%, .6555 18.04%, .7714 22.82%, .8688 27.73%, .9485 32.81%, 1.0108 38.08%, 1.051 42.81%, 1.079 47.75%, 1.0951 52.97%, 1.0998 58.55%, 1.0954 63.36%, 1.0837 68.73%, 1.0119 90.98%, 1.0029 95.69%, 1);--timing-bounce:linear(0, .0078, 0, .0235, .0313, .0235, .0001 13.63%, .0549 15.92%, .0938, .1172, .125, .1172, .0939 27.26%, .0554 29.51%, .0003 31.82%, .2192, .3751 40.91%, .4332, .4734 45.8%, .4947 48.12%, .5027 51.35%, .5153 53.19%, .5437, .5868 57.58%, .6579, .7504 62.87%, .9999 68.19%, .9453, .9061, .8828, .875, .8828, .9063, .9451 84.08%, .9999 86.37%, .9765, .9688, .9765, 1, .9922, 1);--timing-bounce-in:linear(0, .0117, .0156, .0117, 0, .0273, .0468, .0586, .0625, .0586, .0468, .0273, 0 27.27%, .1093, .1875 36.36%, .2148, .2343, .2461, .25, .2461, .2344, .2148 52.28%, .1875 54.55%, .1095, 0, .2341, .4375, .6092, .75, .8593, .9375 90.91%, .9648, .9843, .9961, 1);--timing-bounce-out:linear(0, .0039, .0157, .0352, .0625 9.09%, .1407, .25, .3908, .5625, .7654, 1, .8907, .8125 45.45%, .7852, .7657, .7539, .75, .7539, .7657, .7852, .8125 63.64%, .8905, 1 72.73%, .9727, .9532, .9414, .9375, .9414, .9531, .9726, 1, .9883, .9844, .9883, 1);--timing-circ:linear(0, .0033 5.75%, .0132 11.43%, .0296 16.95%, .0522 22.25%, .0808 27.25%, .1149 31.89%, .1542 36.11%, .1981 39.85%, .2779 44.79%, .3654 48.15%, .4422 49.66%, .5807 50.66%, .6769 53.24%, .7253 55.37%, .7714 58.01%, .8142 61.11%, .8536 64.65%, .9158 72.23%, .9619 80.87%, .9904 90.25%, 1);--timing-circ-in:linear(0, .0048 9.8%, .0192 19.5%, .043 29.02%, .0761 38.26%, .1181 47.13%, .1685 55.56%, .227 63.44%, .2929 70.71%, .3656 77.3%, .4445 83.15%, .5285 88.19%, .6173 92.39%, .7099 95.7%, .805 98.08%, .9021 99.52%, 1);--timing-circ-out:linear(0, .0979 0.48%, .195 1.92%, .2901 4.3%, .3827 7.61%, .4715 11.81%, .5555 16.85%, .6344 22.7%, .7071 29.29%, .773 36.56%, .8315 44.44%, .8819 52.87%, .9239 61.74%, .957 70.98%, .9808 80.5%, .9952 90.2%, 1);--timing-elastic:linear(0, -.0028 13.88%, .0081 21.23%, .002 23.37%, -.0208 27.14%, -.023 28.64%, -.0178, -.0061 30.83%, .0588 34.64%, .0651 35.39%, .0653 36.07%, .0514, .0184 38.3%, -.1687 42.21%, -.1857 43.04%, -.181 43.8%, -.1297 44.93%, -.0201 46.08%, 1.0518 54.2%, 1.1471, 1.1853 56.48%, 1.1821 57.25%, 1.1573 58.11%, .9709 62%, .9458, .9347 63.92%, .9349 64.61%, .9412 65.36%, 1.0061 69.17%, 1.0178, 1.023 71.36%, 1.0208 72.86%, .998 76.63%, .9919 78.77%, 1.0028 86.12%, 1);--timing-elastic-in:linear(0, .0019 13.34%, -.0056 27.76%, -.0012 31.86%, .0147 39.29%, .0161 42.46%, .0039 46.74%, -.0416 54.3%, -.046 57.29%, -.0357, -.0122 61.67%, .1176 69.29%, .1302 70.79%, .1306 72.16%, .1088 74.09%, .059 75.99%, -.0317 78.19%, -.3151 83.8%, -.3643 85.52%, -.3726, -.3705 87.06%, -.3463, -.2959 89.3%, -.1144 91.51%, .7822 97.9%, 1);--timing-elastic-out:linear(0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1);--timing-expo:linear(0, .0053 17.18%, .0195 26.59%, .0326 30.31%, .0506 33.48%, .0744 36.25%, .1046 38.71%, .1798 42.62%, .2846 45.93%, .3991 48.37%, .6358 52.29%, .765 55.45%, .8622 59.3%, .8986 61.51%, .9279 63.97%, .9481 66.34%, .9641 69.01%, .9856 75.57%, .9957 84.37%, 1);--timing-expo-in:linear(0, .0085 31.26%, .0167 40.94%, .0289 48.86%, .0471 55.92%, .0717 61.99%, .1038 67.32%, .1443 72.07%, .1989 76.7%, .2659 80.89%, .3465 84.71%, .4419 88.22%, .554 91.48%, .6835 94.51%, .8316 97.34%, 1);--timing-expo-out:linear(0, .1684 2.66%, .3165 5.49%, .446 8.52%, .5581 11.78%, .6535 15.29%, .7341 19.11%, .8011 23.3%, .8557 27.93%, .8962 32.68%, .9283 38.01%, .9529 44.08%, .9711 51.14%, .9833 59.06%, .9915 68.74%, 1);--timing-none:linear(0, 1);--timing-power1:linear(0, .0027, .0106 7.29%, .0425, .0957, .1701 29.16%, .2477, .3401 41.23%, .5982 55.18%, .7044 61.56%, .7987, .875 75%, .9297, .9687, .9922, 1);--timing-power1-in:linear(0, .0039, .0156, .0352, .0625, .0977, .1407, .1914, .2499, .3164, .3906 62.5%, .5625, .7656, 1);--timing-power1-out:linear(0, .2342, .4374, .6093 37.49%, .6835, .7499, .8086, .8593, .9023, .9375, .9648, .9844, .9961, 1);--timing-power2:linear(0, .0036 9.62%, .0185 16.66%, .0489 23.03%, .0962 28.86%, .1705 34.93%, .269 40.66%, .3867 45.89%, .5833 52.95%, .683 57.05%, .7829 62.14%, .8621 67.46%, .8991 70.68%, .9299 74.03%, .9545 77.52%, .9735 81.21%, .9865 85%, .9949 89.15%, 1);--timing-power2-in:linear(0, .0014 11.11%, .0071 19.24%, .0188 26.6%, .037 33.33%, .0634 39.87%, .0978 46.07%, .1407 52.02%, .1925 57.74%, .2559 63.49%, .3295 69.07%, .4135 74.5%, .5083 79.81%, .6141 85%, .7312 90.09%, 1);--timing-power2-out:linear(0, .2688 9.91%, .3859 15%, .4917 20.19%, .5865 25.5%, .6705 30.93%, .7441 36.51%, .8075 42.26%, .8593 47.98%, .9022 53.93%, .9366 60.13%, .963 66.67%, .9812 73.4%, .9929 80.76%, .9986 88.89%, 1);--timing-power3:linear(0, .0029 13.8%, .0184 21.9%, .0339 25.51%, .0551 28.81%, .0827 31.88%, .1168 34.76%, .1962 39.57%, .3005 44.02%, .4084 47.53%, .6242 53.45%, .7493 57.93%, .8495 62.97%, .8888 65.67%, .9213 68.51%, .9629 73.9%, .9876 80.16%, .998 87.5%, 1);--timing-power3-in:linear(0, .0039 25%, .0117 32.89%, .0248 39.68%, .0457 46.22%, .0743 52.21%, .1113 57.77%, .1575 63%, .218 68.33%, .2901 73.39%, .3745 78.23%, .4718 82.88%, .5827 87.37%, .7074 91.71%, .8462 95.91%, 1);--timing-power3-out:linear(0, .1538 4.09%, .2926 8.29%, .4173 12.63%, .5282 17.12%, .6255 21.77%, .7099 26.61%, .782 31.67%, .8425 37%, .8887 42.23%, .9257 47.79%, .9543 53.78%, .9752 60.32%, .9883 67.11%, .9961 75%, 1);--timing-power4:linear(0, .0012 14.95%, .0089 22.36%, .0297 28.43%, .0668 33.43%, .0979 36.08%, .1363 38.55%, .2373 43.07%, .3675 47.01%, .5984 52.15%, .7121 55.23%, .8192 59.21%, .898 63.62%, .9297 66.23%, .9546 69.06%, .9733 72.17%, .9864 75.67%, .9982 83.73%, 1);--timing-power4-in:linear(0, .0024 29.91%, .008 38.03%, .0179 44.72%, .035 51.16%, .0595 56.88%, .0922 62.08%, .1338 66.88%, .1914 71.85%, .262 76.5%, .3461 80.88%, .4447 85.04%, .5587 89.01%, .689 92.82%, .8359 96.48%, 1);--timing-power4-out:linear(0, .1641 3.52%, .311 7.18%, .4413 10.99%, .5553 14.96%, .6539 19.12%, .738 23.5%, .8086 28.15%, .8662 33.12%, .9078 37.92%, .9405 43.12%, .965 48.84%, .9821 55.28%, .992 61.97%, .9976 70.09%, 1);--timing-quad:linear(0, .0027, .0106 7.29%, .0425, .0957, .1701 29.16%, .2477, .3401 41.23%, .5982 55.18%, .7044 61.56%, .7987, .875 75%, .9297, .9687, .9922, 1);--timing-quad-in:linear(0, .0039, .0156, .0352, .0625, .0977, .1407, .1914, .2499, .3164, .3906 62.5%, .5625, .7656, 1);--timing-quad-out:linear(0, .2342, .4374, .6093 37.49%, .6835, .7499, .8086, .8593, .9023, .9375, .9648, .9844, .9961, 1);--timing-sine:linear(0, .007 5.35%, .0282 10.75%, .0638 16.26%, .1144 21.96%, .1833 28.16%, .2717 34.9%, .6868 62.19%, .775 68.54%, .8457 74.3%, .9141 81.07%, .9621 87.52%, .9905 93.8%, 1);--timing-sine-in:linear(0, .0035, .0141 10.7%, .0318 16.09%, .0566 21.51%, .0885 26.98%, .1278 32.53%, .2288 43.93%, .3563 55.48%, .5171 67.92%, .7139 81.53%, 1);--timing-sine-out:linear(0, .2861 18.47%, .4829 32.08%, .6437 44.52%, .7712 56.07%, .8722 67.47%, .9115 73.02%, .9434 78.49%, .9682 83.91%, .9859 89.3%, .9965, 1)}@supports (color:lab(0% 0 0)){:root{--color-black-300:lab(5.79452% 2.34464 -10.5728);--color-black-400:lab(1.23984% 1.1038 -6.24556);--color-black-500:lab(.851954% .403821 -3.66368);--color-blue-300:lab(43.3924% 37.3154 -89.0082);--color-blue-400:lab(39.1381% 44.8945 -96.0787);--color-blue-500:lab(35.7302% 44.2511 -92.7383);--color-border-300:lab(79.0164% 2.08852 -13.6377);--color-border-400:lab(75.3486% 1.97586 -13.2731);--color-border-500:lab(69.5309% 2.38332 -13.3511);--color-green-300:lab(88.1214% -76.2153 66.7825);--color-green-400:lab(84.2146% -75.0808 69.6115);--color-green-500:lab(78.5535% -70.8999 65.7512);--color-grey-300:lab(97.6772% -.898153 -3.4834);--color-grey-400:lab(94.5868% -2.17697 -5.57207);--color-grey-500:lab(87.6155% -1.85686 -5.51536);--color-purple-300:lab(39.8492% 71.7244 -94.6225);--color-purple-400:lab(37.6208% 73.4049 -98.3196);--color-purple-500:lab(34.4875% 69.0787 -92.3249);--color-red-300:lab(56.2819% 76.761 46.2536);--color-red-400:lab(54.3503% 80.9205 63.3488);--color-red-500:lab(50.1295% 76.0914 59.2159);--color-text-300:lab(14.7058% 4.00844 -18.3443);--color-text-400:lab(11.4157% 4.74232 -19.3691);--color-text-500:lab(8.85025% 4.50418 -18.4572);--color-white-300:lab(100% 0 0);--color-white-400:lab(100% 0 0);--color-white-500:lab(100% 0 0);--color-yellow-300:lab(97.5688% -15.4802 73.0873);--color-yellow-400:lab(97.1317% -18.1586 92.8396);--color-yellow-500:lab(90.1572% -18.128 86.9722)}}section{--width:100%}h1,h2,h3,h4,h5{--color:var(--color-text-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-300)}h1{--font-size:var(--font-size-900)}h2{--font-size:var(--font-size-800)}h3{--font-size:var(--font-size-700)}h4{--font-size:var(--font-size-600)}h5{--font-size:var(--font-size-500)}b,strong{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}body,html{width:100%;height:100%;overflow-x:hidden}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);min-width:var(--min-width);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box;transition:inherit}section{width:var(--width);flex-wrap:wrap;place-content:flex-start;display:flex;position:relative}h1,h2,h3,h4,h5{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-wrap:balance;word-wrap:break-word;width:100%;margin:0;padding:0;position:relative}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup{font-size:.64em}a{color:var(--color,inherit);cursor:pointer;outline:none;text-decoration:none}b,strong{color:var(--color,inherit);font-weight:var(--font-weight)}p{word-wrap:break-word;width:100%;margin:0;padding:0}pre{overflow-wrap:break-word;white-space:break-spaces;width:100%;margin:0;padding:0}sub,sup{font-size:.8em}sub{bottom:-.48em}sup{top:-.48em}}
+@layer components {:root{--border-radius-100:2px;--border-radius-200:4px;--border-radius-300:6px;--border-radius-400:8px;--border-radius-500:10px;--border-radius-600:12px;--border-radius-700:16px;--border-width-400:1px;--border-width-500:2px;--border-width-600:3px;--border-width-700:4px;--box-shadow-100:0 1px 2px 0 oklch(from var(--color-black-300) l c h/.2);--box-shadow-200:0 1px 3px 0 oklch(from var(--color-black-300) l c h/.2), 0 1px 2px -1px oklch(from var(--color-black-300) l c h/.2);--box-shadow-300:0 4px 6px -1px oklch(from var(--color-black-300) l c h/.2), 0 2px 4px -2px oklch(from var(--color-black-300) l c h/.2);--box-shadow-400:0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 10px 15px -3px oklch(from var(--color-black-300) l c h/.2), 0 4px 6px -4px oklch(from var(--color-black-300) l c h/.2);--box-shadow-500:0 20px 25px -5px oklch(from var(--color-black-300) l c h/.2), 0 8px 10px -6px oklch(from var(--color-black-300) l c h/.2);--box-shadow-600:0 25px 50px -12px oklch(from var(--color-black-500) l c h/.2);--box-shadow-glow:0px 0px 128px 32px var(--box-shadow-color,#fff), 0px 0px 32px 8px var(--box-shadow-color,#fff), 0px 0px 8px 0px var(--box-shadow-color,#fff);--color-black-300:oklch(18.84% .0306 277.2);--color-black-400:oklch(11.47% .0361 268.9);--color-black-500:oklch(10.04% .0287 263.4);--color-blue-300:oklch(54.49% .2514 268.2);--color-blue-400:oklch(51.45% .2712 266.6);--color-blue-500:oklch(48.45% .2617 266.3);--color-border-300:oklch(92.9% .013 255.508);--color-border-400:oklch(86.9% .022 252.894);--color-border-500:oklch(70.4% .04 256.788);--color-green-300:oklch(87.03% .2708 144.9);--color-green-400:oklch(83.7% .2711 144);--color-green-500:oklch(78.97% .256 144);--color-grey-300:oklch(98.42% .0034 247.86);--color-grey-400:oklch(96.83% .0069 247.9);--color-grey-500:oklch(92.88% .0126 255.51);--color-purple-300:oklch(53.29% .2877 292.5);--color-purple-400:oklch(51.66% .2929 289.7);--color-purple-500:oklch(48.63% .2754 289.9);--color-red-300:oklch(64.46% .2412 23.8);--color-red-400:oklch(62.87% .2567 27.7);--color-red-500:oklch(59.1% .2413 27.6);--color-text-300:oklch(55.1% .027 264.364);--color-text-400:oklch(37.3% .034 259.733);--color-text-500:oklch(21% .034 264.665);--color-white-300:oklch(100% 0 0);--color-white-400:oklch(99.2% 0 0);--color-white-500:oklch(98.5% 0 0);--color-yellow-300:oklch(90.5% .182 98.1);--color-yellow-400:oklch(85.2% .199 91.9);--color-yellow-500:oklch(79.5% .184 86);--font-size-100:.486rem;--font-size-200:.618rem;--font-size-300:.786rem;--font-size-400:1rem;--font-size-500:1.272rem;--font-size-600:1.618rem;--font-size-700:2.058rem;--font-size-800:2.618rem;--font-size-900:3.33rem;--size-100:8px;--size-200:10px;--size-300:13px;--size-400:16px;--size-500:20px;--size-600:26px;--size-700:33px;--size-800:42px;--size-900:53px;--size-0px:0px;--spacer-100:58.31px;--spacer-200:74.17px;--spacer-300:94.34px;--spacer-400:120px;--spacer-500:152.64px;--spacer-600:194.16px;--spacer-700:246.97px;--background:var(--color-white-400);--color:var(--color-text-400);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--min-width:320px;--transition-duration:.16s;--transition-timing-function:cubic-bezier(.4, 0, .2, 1)}*{--border-radius:calc(1em / 1.618);--gap:calc(1em / 1.618);--gap-horizontal:var(--gap);--gap-vertical:var(--gap);--letter-spacing:clamp(-.022em, calc(.060542rem - .051418em), 0em);--line-height:clamp(1.128em, calc(.95em + .668rem), 1.618em);--padding-horizontal:1em;--padding-vertical:calc(1em * 1.272 / (1.618 * 1.618))}b,strong,h1,h2,h3,h4{--color:var(--color-text-400);--font-weight:var(--font-weight-500)}h1{--font-size:var(--font-size-800)}h2{--font-size:var(--font-size-700)}h3{--font-size:var(--font-size-600)}h4{--font-size:var(--font-size-500)}h5{--font-size:var(--font-size-400)}section{--width:100%}body,html{width:100%;height:100%;overflow-x:hidden}h1,h2,h3,h4,h5,h6{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight-500);text-wrap:balance;word-wrap:break-word;width:100%;margin:0;padding:0;position:relative}h1 sub,h1 sup,h2 sub,h2 sup,h3 sub,h3 sup,h4 sub,h4 sup,h5 sub,h5 sup,h6 sub,h6 sup{font-size:.64em}b,strong{color:var(--color,inherit);font-weight:var(--font-weight)}sub,sup{font-size:.8em}body{background-color:var(--background);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);min-width:var(--min-width);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{letter-spacing:var(--letter-spacing);line-height:var(--line-height)}*,:after,:before{box-sizing:border-box;transition:inherit}a{color:var(--color,inherit);cursor:pointer;outline:none;text-decoration:none}p{word-wrap:break-word;width:100%;margin:0;padding:0}pre{overflow-wrap:break-word;white-space:break-spaces;width:100%;margin:0;padding:0}section{width:var(--width);flex-wrap:wrap;place-content:flex-start;display:flex;position:relative}sub{bottom:-.48em}sup{top:-.48em}}
 /*$vite$:1*/

package/build/components/select/index.d.ts

@@ -1,5 +1,5 @@
+import * as template_u0 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
-import { Attributes as Attr } from '../scrollbar/index.js';
 import './scss/index.scss';
 type A = {
     arrow?: Attributes;
@@ -8,8 +8,6 @@ type A = {
         selected: Renderable<unknown>;
     }>;
     option?: Attributes;
-    scrollbar?: Attributes;
-    'scrollbar-container-content'?: Attributes;
     'tooltip-content'?: Attributes & {
         direction?: string;
     };
@@ -23,53 +21,9 @@ type A = {
         render: boolean;
         selected?: number | string;
     };
-}) & Attributes & Attr;
-declare const select: {
-    (): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            active: boolean;
-            selected?: string | number;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    <T extends A>(attributes: T): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            active: boolean;
-            selected?: string | number;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    <T extends (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>>(content: T): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            active: boolean;
-            selected?: string | number;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>) => Renderable<any>>;
-    (attributes: A, content: (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>): ReturnType<(this: {
-        attributes?: A | undefined;
-        content?: ((state: {
-            active: boolean;
-            selected?: string | number;
-        }) => Renderable<unknown>) | undefined;
-    }, attributes: Readonly<A>, content: (state: {
-        active: boolean;
-        selected?: string | number;
-    }) => Renderable<unknown>) => Renderable<any>>;
-};
-export default select;
+}) & Attributes;
+declare const _default: template_u0.Factory<A, (state: {
+    active: boolean;
+    selected?: string | number;
+}) => Renderable<unknown>, Renderable<any>>;
+export default _default;

package/build/components/select/index.js

@@ -1,13 +1,12 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { EMPTY_ARRAY, omit, toArray } from '@esportsplus/utilities';
 import form from '../form/index.js';
-import root from '../root/index.js';
-import scrollbar from '../scrollbar/index.js';
-import template from '../template/index.js';
 import './scss/index.scss';
-const template_167mg1f2 = template_u1.template(`<div class='link select-option ' data-key='' >`);
-const template_167mg1f5 = template_u1.template(`<div class='select tooltip '><!--$--><div class='select-arrow' ></div><input class='select-tag' />`);
+const template_u1n = template_u0.template(`<div class='link select-option ' >`);
+const template_u1q = template_u0.template(`<div class='tooltip-content --flex-column --scrollbar' >`);
+const template_u1t = template_u0.template(`<div class='select tooltip ' ><!--$--><div class='select-arrow' ></div><input class='select-tag' />`);
 class ReactiveObject_167mg1f0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
@@ -46,51 +45,31 @@ const OMIT = [
     'arrow',
     'options',
     'option',
-    'scrollbar',
-    'scrollbar-container-content',
     'tooltip-content',
 ];
-let previous = null, sb = scrollbar.bind({
-    attributes: {
-        class: 'tooltip-content',
-        'scrollbar-container-content': {
-            class: '--flex-column'
-        }
-    }
-});
-function set(current, value) {
-    current.active = value;
-    if (value) {
-        if (previous) {
-            previous.active = false;
-        }
-        previous = current;
-        root.onclick.push(() => {
-            if (previous !== current) {
+export default component(function (attributes, content) {
+    let element, { options, option } = attributes, state = attributes.state || new ReactiveObject_167mg1f0(attributes.selected || Object.keys(options)[0]);
+    return (() => {
+        let root_u1s = template_u1t(), element_u1u = root_u1s.firstChild, element_u1v = element_u1u.firstChild, element_u1w = element_u1u.firstElementChild, element_u1x = element_u1w.nextElementSibling;
+        template_u0.setList(element_u1u, 'class', () => state.active && '--active');
+        template_u0.setProperties(element_u1u, this?.attributes && omit(this.attributes, OMIT));
+        template_u0.setProperties(element_u1u, omit(attributes, OMIT));
+        template_u0.onrender(element_u1u, (node) => element = node);
+        template_u0.ondocument(element_u1u, 'click', (event) => {
+            if (!state.active || !element?.isConnected) {
                 return;
             }
-            previous = null;
-            current.active = false;
+            if (!element.contains(event.target)) {
+                state.active = false;
+            }
         });
-    }
-    else if (previous === current) {
-        previous = null;
-    }
-}
-const select = template.factory(function (attributes, content) {
-    let { options, option } = attributes, state = attributes.state || new ReactiveObject_167mg1f0(attributes.selected || Object.keys(options)[0]);
-    return (() => {
-        let root_167mg1f4 = template_167mg1f5(), element_167mg1f6 = root_167mg1f4.firstChild, element_167mg1f7 = element_167mg1f6.firstChild, element_167mg1f8 = element_167mg1f6.firstElementChild, element_167mg1f9 = element_167mg1f8.nextElementSibling;
-        template_u1.setList(element_167mg1f6, 'class', () => state.active && '--active');
-        template_u1.setProperties(element_167mg1f6, this?.attributes && omit(this.attributes, OMIT));
-        template_u1.setProperties(element_167mg1f6, omit(attributes, OMIT));
-        template_u1.delegate(element_167mg1f6, 'click', () => {
+        template_u0.delegate(element_u1u, 'click', () => {
             if (state.render) {
-                set(state, !state.active);
+                state.active = !state.active;
             }
             state.render = true;
         });
-        new template_u1.EffectSlot(element_167mg1f7, content ? (() => content(state)) : (() => {
+        new template_u0.EffectSlot(element_u1v, content ? (() => content(state)) : (() => {
             let selected = options[state.selected];
             if (!selected) {
                 return '-';
@@ -100,71 +79,74 @@ const select = template.factory(function (attributes, content) {
             }
             return selected;
         }));
-        template_u1.setProperties(element_167mg1f8, this?.attributes?.arrow);
-        template_u1.setProperties(element_167mg1f8, attributes.arrow);
-        template_u1.setProperty(element_167mg1f9, 'name', attributes.name);
-        template_u1.delegate(element_167mg1f9, 'click', () => { });
-        template_u1.onrender(element_167mg1f9, form.input.onrender(state));
-        template_u1.setProperty(element_167mg1f9, 'value', () => state.selected);
-        new template_u1.EffectSlot(element_167mg1f6, () => {
+        template_u0.setProperties(element_u1w, this?.attributes?.arrow);
+        template_u0.setProperties(element_u1w, attributes.arrow);
+        template_u0.setProperty(element_u1x, 'name', attributes.name);
+        template_u0.delegate(element_u1x, 'click', () => { });
+        template_u0.onrender(element_u1x, form.input.onrender(state));
+        template_u0.setProperty(element_u1x, 'value', () => state.selected);
+        new template_u0.EffectSlot(element_u1u, () => {
             if (!state.render) {
                 return;
             }
             let keys = Object.keys(options), selected = reactivity_u0.reactive(Object.fromEntries(keys.map(key => [key, false])));
-            return sb({
-                ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
-                ...attributes['tooltip-content'],
-                class: [
-                    ...toArray(this?.attributes?.['tooltip-content']?.class),
-                    ...toArray(attributes['tooltip-content']?.class),
-                    `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
-                ],
-                onclick: (e) => {
-                    let element = e.target, key = element.dataset?.key;
-                    if (key === undefined) {
-                        let parent;
-                        while (parent = element.parentElement) {
-                            key = parent.dataset?.key;
-                            if (key !== undefined) {
-                                break;
+            return (() => {
+                let root_u1p = template_u1q(), element_u1r = root_u1p.firstChild;
+                template_u0.setProperties(element_u1r, {
+                    ...this?.attributes?.['tooltip-content'] || EMPTY_ARRAY,
+                    ...attributes['tooltip-content'],
+                    class: [
+                        ...toArray(this?.attributes?.['tooltip-content']?.class),
+                        ...toArray(attributes['tooltip-content']?.class),
+                        `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
+                    ],
+                    inert: () => !state.active,
+                    onclick: (e) => {
+                        let element = e.target, key = element.dataset?.key;
+                        if (key === undefined) {
+                            let parent;
+                            while (parent = element.parentElement) {
+                                key = parent.dataset?.key;
+                                if (key !== undefined) {
+                                    break;
+                                }
                             }
                         }
+                        if (key === undefined) {
+                            return;
+                        }
+                        let previous = state.selected;
+                        state.active = false;
+                        state.selected = key;
+                        selected[key] = true;
+                        selected[previous] = false;
+                    },
+                    onconnect: () => {
+                        state.active = true;
+                    },
+                    style: [
+                        ...toArray(this?.attributes?.['tooltip-content']?.style),
+                        ...toArray(attributes['tooltip-content']?.style)
+                    ],
+                });
+                template_u0.slot(element_u1r, keys.map((key) => {
+                    let content = options[key];
+                    if (content !== null && typeof content === 'object' && 'content' in content) {
+                        content = content.content;
                     }
-                    if (key === undefined) {
-                        return;
-                    }
-                    let previous = state.selected;
-                    set(state, false);
-                    state.selected = key;
-                    selected[key] = true;
-                    selected[previous] = false;
-                },
-                onconnect: () => {
-                    set(state, true);
-                },
-                scrollbar: attributes.scrollbar,
-                'scrollbar-container-content': attributes['scrollbar-container-content'],
-                style: [
-                    ...toArray(this?.attributes?.['tooltip-content']?.style),
-                    ...toArray(attributes['tooltip-content']?.style)
-                ],
-            }, keys.map((key) => {
-                let content = options[key];
-                if (content !== null && typeof content === 'object' && 'content' in content) {
-                    content = content.content;
-                }
-                return (() => {
-                    let root_167mg1f1 = template_167mg1f2(), element_167mg1f3 = root_167mg1f1.firstChild;
-                    template_u1.setList(element_167mg1f3, 'class', () => selected[key] && '--active');
-                    template_u1.setProperties(element_167mg1f3, this?.attributes?.option);
-                    template_u1.setProperties(element_167mg1f3, option);
-                    template_u1.setProperty(element_167mg1f3, 'data-key', key);
-                    template_u1.slot(element_167mg1f3, content, 1);
-                    return root_167mg1f1;
-                })();
-            }));
+                    return (() => {
+                        let root_u1m = template_u1n(), element_u1o = root_u1m.firstChild;
+                        template_u0.setList(element_u1o, 'class', () => selected[key] && '--active');
+                        template_u0.setProperties(element_u1o, this?.attributes?.option);
+                        template_u0.setProperties(element_u1o, option);
+                        template_u0.setProperty(element_u1o, 'data-key', key);
+                        template_u0.slot(element_u1o, content, 1);
+                        return root_u1m;
+                    })();
+                }), 1);
+                return root_u1p;
+            })();
         }, 2);
-        return root_167mg1f4;
+        return root_u1s;
     })();
 });
-export default select;

package/build/components/select/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical) calc(var(--padding-horizontal) * 2 + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;flex-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{transform:translateY(calc(50% + var(--arrow-size) / 3)) scaleY(-1) rotate(45deg)}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) * 2 + var(--arrow-size) - var(--border-width)) max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;width:100%;display:flex;position:relative}.select.--active .select-arrow{transform:translateY(calc(50% + var(--arrow-size) / 3)) scaleY(-1) rotate(45deg)}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width) var(--border-width) 0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
 /*$vite$:1*/

package/build/components/sidebar/index.d.ts

@@ -1,20 +1,4 @@
+import * as template_u0 from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: {
-    (): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("../scrollbar/index.js").Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    <T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-    (attributes: import("../scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
-        attributes?: import("../scrollbar/index.js").Attributes | undefined;
-        content?: import("@esportsplus/template").Renderable<any>;
-    }, attributes: Readonly<import("../scrollbar/index.js").Attributes>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
-};
+declare const _default: template_u0.Factory<template_u0.Attributes, template_u0.Renderable<any>, template_u0.Renderable<any>>;
 export default _default;

package/build/components/sidebar/index.js

@@ -1,7 +1,13 @@
-import scrollbar from '../scrollbar/index.js';
+import * as template_u0 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import './scss/index.scss';
-export default scrollbar.bind({
-    attributes: {
-        class: 'sidebar'
-    }
+const template_u1z = template_u0.template(`<div class='sidebar --flex-column --scrollbar' >`);
+export default component(function (attributes, content) {
+    return (() => {
+        let root_u1y = template_u1z(), element_u20 = root_u1y.firstChild;
+        template_u0.setProperties(element_u20, this?.attributes);
+        template_u0.setProperties(element_u20, attributes);
+        template_u0.slot(element_u20, content, 1);
+        return root_u1y;
+    })();
 });

package/build/components/sidebar/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.sidebar{--margin-horizontal:0px;--margin-vertical:0px;--width:var(--width-default);--width-closed:var(--width-default);--width-default:320px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.sidebar{top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical) * 2);transition:max-width var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;width:min(var(--width), 100% - var(--margin-horizontal) * 2);z-index:9;position:absolute;overflow:hidden}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}}
+@layer components {.sidebar{--margin-horizontal:0px;--margin-vertical:0px;--width:var(--width-default);--width-closed:var(--width-default);--width-default:320px}.sidebar:not(.--active):not(:hover){--width:var(--width-closed)}.sidebar--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.sidebar{top:var(--margin-vertical);bottom:var(--margin-vertical);cursor:default;height:calc(100% - var(--margin-vertical) * 2);transition:max-width var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:min(var(--width), 100% - var(--margin-horizontal) * 2);z-index:9;position:absolute}.sidebar:not(.--active) input[type=password]{display:none}.sidebar--e{right:var(--margin-horizontal)}.sidebar--e.sidebar--offscreen:not(.--active){transform:translateX(var(--width))}.sidebar--w{left:var(--margin-horizontal)}.sidebar--w.sidebar--offscreen:not(.--active){transform:translateX(calc(var(--width) * -1))}.sidebar-content{flex:0 0 var(--width-default);width:var(--width-default)}}
 /*$vite$:1*/