@esportsplus/ui 0.57.0 → 0.58.0

package/build/components/color-picker/index.js

@@ -8,11 +8,14 @@ import { keystep } from '../../shared/keystep.js';
 import copy from '../copy/index.js';
 import input from '../input/index.js';
 import range from '../range/index.js';
+import contrast from '@esportsplus/ui/svg/contrast.svg';
 import './scss/index.scss';
-const template_0zt12vj6 = template_u1.template(`<div class='color-picker'><div aria-label='Saturation and brightness' aria-roledescription='2D slider' aria-valuemax='100' aria-valuemin='0' class='color-picker-pad' role='slider' tabindex='0'><span class='color-picker-thumb'></span></div><div class='color-picker-channels'><div class='color-picker-sliders'><!--$--></div><span aria-hidden='true' class='color-picker-preview'></span></div><div class='color-picker-fields'><div class='color-picker-field'><!--$--></div><span aria-hidden='true' class='color-picker-alpha'></span><span aria-live='polite' class='color-picker-status'>`);
-const template_0zt12vjh = template_u1.template(`<div class='color-picker-recent'><p class='color-picker-recent-label'>Recent</p><div class='color-picker-swatches' role='group'><!--$-->`);
-const template_0zt12vjn = template_u1.template(`<button class='color-picker-swatch' style=';' type='button'>`);
-const template_0zt12vjq = template_u1.template(`<span aria-hidden='true' class='color-picker-swatch color-picker-swatch--leaving' style=';;;'>`);
+const template_0zt12vj6 = template_u1.template(`<div aria-label='Saturation and brightness' aria-roledescription='2D slider' aria-valuemax='100' aria-valuemin='0' class='color-picker-pad' role='slider' tabindex='0'><span class='color-picker-thumb'>`);
+const template_0zt12vja = template_u1.template(`<div class='color-picker color-picker--compact'><div class='color-picker-header'><svg aria-hidden='true' class='color-picker-icon'><use /></svg><span class='color-picker-value'></span></div><div class='color-picker-body'><!--$--><!--$-->`);
+const template_0zt12vji = template_u1.template(`<div class='color-picker'><!--$--><div class='color-picker-channels'><div class='color-picker-sliders'><!--$--></div><span aria-hidden='true' class='color-picker-preview'></span></div><div class='color-picker-fields'><div class='color-picker-field'><!--$--></div><span aria-hidden='true' class='color-picker-alpha'></span><span aria-live='polite' class='color-picker-status'>`);
+const template_0zt12vjs = template_u1.template(`<div class='color-picker-recent'><p class='color-picker-recent-label'>Recent</p><div class='color-picker-swatches' role='group'><!--$-->`);
+const template_0zt12vjy = template_u1.template(`<button class='color-picker-swatch' style=';' type='button'>`);
+const template_0zt12vj11 = template_u1.template(`<span aria-hidden='true' class='color-picker-swatch color-picker-swatch--leaving' style=';;;'>`);
 class ReactiveObject_0zt12vj0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
     #value = this[reactivity_u0.SIGNAL]('');
@@ -154,6 +157,10 @@ function fromHex(hex, previous) {
     }
     return { ...toHsv(rgba.r, rgba.g, rgba.b, previous), a: rgba.a };
 }
+function hsl({ a, h, s, v }) {
+    let l = v * (1 - s / 2), value = `${Math.round(h)}, ${Math.round((l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l)) * 100)}%, ${Math.round(l * 100)}%`;
+    return a < 1 ? `hsla(${value}, ${Number(a.toFixed(2))})` : `hsl(${value})`;
+}
 function parse(value) {
     let hex = value.trim().replace(HEX_PREFIX, '');
     if (!HEX_COLOR.test(hex)) {
@@ -196,12 +203,12 @@ function toHsv(r, g, b, previous) {
     }
     return { h, s: max === 0 ? previous.s : d / max, v: max };
 }
-function template({ recent: initial = [], state = new ReactiveObject_0zt12vj0(), value, ...attributes }) {
+function template({ compact = false, recent: initial = [], state = new ReactiveObject_0zt12vj0(), value, ...attributes }) {
     let start = fromHex(state.value || value, { a: 1, h: 0, s: 0, v: 0 });
     if (!start) {
         throw new Error(`Color picker: '${state.value || value}' is not a valid hex color`);
     }
-    let alpha = new ReactiveObject_0zt12vj1(Math.round(start.a * 100)), color = new ReactiveObject_0zt12vj2(start.a, start.h, start.s, start.v), dirty = { alpha: false, hue: false, pad: false }, history = initial !== false, hue = new ReactiveObject_0zt12vj3(Math.round(start.h)), id = `color-picker-${++uid}`, leaving = new reactivity_u0.ReactiveArray(), parts = {}, picker = new ReactiveObject_0zt12vj4(), pointer = { alpha: false, hue: false, pad: -1 }, recent = reactivity_u0.reactive((initial || []).map((hex) => hex.toUpperCase()));
+    let alpha = new ReactiveObject_0zt12vj1(Math.round(start.a * 100)), color = new ReactiveObject_0zt12vj2(start.a, start.h, start.s, start.v), dirty = { alpha: false, hue: false, pad: false }, history = initial !== false && !compact, hue = new ReactiveObject_0zt12vj3(Math.round(start.h)), id = `color-picker-${++uid}`, leaving = new reactivity_u0.ReactiveArray(), parts = {}, picker = new ReactiveObject_0zt12vj4(), pointer = { alpha: false, hue: false, pad: -1 }, recent = reactivity_u0.reactive((initial || []).map((hex) => hex.toUpperCase()));
     state.value = toHex(color);
     function apply(leaving) {
         let field = parts.hex;
@@ -336,57 +343,128 @@ function template({ recent: initial = [], state = new ReactiveObject_0zt12vj0(),
             update(parsed);
         }
     });
+    let alphaChannel = range({
+        'aria-label': 'Opacity',
+        'aria-valuetext': () => `${alpha.value}%`,
+        class: 'color-picker-channel color-picker-channel--alpha',
+        max: 100,
+        min: 0,
+        onblur: () => {
+            if (dirty.alpha && !pointer.alpha) {
+                commit();
+            }
+            dirty.alpha = false;
+        },
+        onchange: () => {
+            if (pointer.alpha) {
+                commit();
+            }
+        },
+        onkeydown: (e) => slide('alpha', e),
+        onpointerdown: () => {
+            pointer.alpha = true;
+        },
+        orientation: compact ? 'vertical' : 'horizontal',
+        state: alpha,
+        step: 1
+    });
+    let hueChannel = range({
+        'aria-label': 'Hue',
+        'aria-valuetext': () => `${hue.value} degrees`,
+        class: 'color-picker-channel color-picker-channel--hue',
+        max: 360,
+        min: 0,
+        onblur: () => {
+            if (dirty.hue && !pointer.hue) {
+                commit();
+            }
+            dirty.hue = false;
+        },
+        onchange: () => {
+            if (pointer.hue) {
+                commit();
+            }
+        },
+        onkeydown: (e) => slide('hue', e),
+        onpointerdown: () => {
+            pointer.hue = true;
+        },
+        orientation: compact ? 'vertical' : 'horizontal',
+        state: hue,
+        step: 1
+    });
+    let pad = (() => {
+        let root_0zt12vj5 = template_0zt12vj6(), element_0zt12vj7 = root_0zt12vj5.firstChild, element_0zt12vj8 = element_0zt12vj7.firstElementChild;
+        template_u1.setList(element_0zt12vj8, 'style', () => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`);
+        template_u1.setProperty(element_0zt12vj7, 'aria-valuenow', () => Math.round(color.s * 100));
+        template_u1.setProperty(element_0zt12vj7, 'aria-valuetext', () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`);
+        template_u1.on(element_0zt12vj7, 'blur', () => {
+            if (dirty.pad) {
+                commit();
+            }
+            dirty.pad = false;
+        });
+        template_u1.delegate(element_0zt12vj7, 'keydown', (e) => {
+            let delta = keystep(e, 0.01);
+            if (delta === null) {
+                return;
+            }
+            e.preventDefault();
+            dirty.pad = true;
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                update({ s: clamp(color.s + delta, 0, 1) });
+            }
+            else {
+                update({ v: clamp(color.v + delta, 0, 1) });
+            }
+        });
+        template_u1.delegate(element_0zt12vj7, 'pointercancel', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        template_u1.delegate(element_0zt12vj7, 'pointerdown', function (e) {
+            if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
+                return;
+            }
+            pointer.pad = e.pointerId;
+            this.setPointerCapture(e.pointerId);
+            pick(this, e);
+        });
+        template_u1.delegate(element_0zt12vj7, 'pointermove', function (e) {
+            if (e.pointerId === pointer.pad) {
+                pick(this, e);
+            }
+        });
+        template_u1.delegate(element_0zt12vj7, 'pointerup', (e) => {
+            if (e.pointerId === pointer.pad) {
+                pointer.pad = -1;
+                commit();
+            }
+        });
+        return root_0zt12vj5;
+    })();
+    if (compact) {
+        return (() => {
+            let root_0zt12vj9 = template_0zt12vja(), element_0zt12vjb = root_0zt12vj9.firstChild, element_0zt12vjc = element_0zt12vjb.firstElementChild.firstElementChild.firstElementChild, element_0zt12vjd = element_0zt12vjb.firstElementChild.firstElementChild.nextElementSibling, element_0zt12vje = element_0zt12vjb.firstElementChild.nextElementSibling.firstChild, element_0zt12vjf = element_0zt12vje.nextSibling, element_0zt12vjg = element_0zt12vjb.firstElementChild.nextElementSibling;
+            new template_u1.EffectSlot(element_0zt12vjd, () => hsl(read()), 1);
+            template_u1.slot(element_0zt12vje, pad);
+            template_u1.slot(element_0zt12vjf, alphaChannel);
+            template_u1.slot(element_0zt12vjg, hueChannel, 2);
+            template_u1.setProperty(element_0zt12vjc, 'href', template_u1.interpolate(["#", (contrast)]));
+            template_u1.setProperties(element_0zt12vjb, this?.attributes);
+            template_u1.setProperties(element_0zt12vjb, attributes);
+            template_u1.setList(element_0zt12vjb, 'style', css);
+            return root_0zt12vj9;
+        })();
+    }
     return (() => {
-        let root_0zt12vj5 = template_0zt12vj6(), element_0zt12vj7 = root_0zt12vj5.firstChild, element_0zt12vj8 = element_0zt12vj7.firstElementChild, element_0zt12vj9 = element_0zt12vj8.firstElementChild, element_0zt12vja = element_0zt12vj8.nextElementSibling.firstElementChild.firstChild, element_0zt12vjb = element_0zt12vj8.nextElementSibling.firstElementChild, element_0zt12vjc = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild.firstChild, element_0zt12vjd = element_0zt12vj8.nextElementSibling.nextElementSibling.firstElementChild, element_0zt12vje = element_0zt12vjd.nextElementSibling, element_0zt12vjf = element_0zt12vje.nextElementSibling;
-        template_u1.slot(element_0zt12vja, range({
-            'aria-label': 'Hue',
-            'aria-valuetext': () => `${hue.value} degrees`,
-            class: 'color-picker-channel color-picker-channel--hue',
-            max: 360,
-            min: 0,
-            onblur: () => {
-                if (dirty.hue && !pointer.hue) {
-                    commit();
-                }
-                dirty.hue = false;
-            },
-            onchange: () => {
-                if (pointer.hue) {
-                    commit();
-                }
-            },
-            onkeydown: (e) => slide('hue', e),
-            onpointerdown: () => {
-                pointer.hue = true;
-            },
-            state: hue,
-            step: 1
-        }));
-        template_u1.slot(element_0zt12vjb, range({
-            'aria-label': 'Opacity',
-            'aria-valuetext': () => `${alpha.value}%`,
-            class: 'color-picker-channel color-picker-channel--alpha',
-            max: 100,
-            min: 0,
-            onblur: () => {
-                if (dirty.alpha && !pointer.alpha) {
-                    commit();
-                }
-                dirty.alpha = false;
-            },
-            onchange: () => {
-                if (pointer.alpha) {
-                    commit();
-                }
-            },
-            onkeydown: (e) => slide('alpha', e),
-            onpointerdown: () => {
-                pointer.alpha = true;
-            },
-            state: alpha,
-            step: 1
-        }), 2);
-        template_u1.slot(element_0zt12vjc, input({
+        let root_0zt12vjh = template_0zt12vji(), element_0zt12vjj = root_0zt12vjh.firstChild, element_0zt12vjk = element_0zt12vjj.firstChild, element_0zt12vjl = element_0zt12vjj.firstElementChild.firstElementChild.firstChild, element_0zt12vjm = element_0zt12vjj.firstElementChild.firstElementChild, element_0zt12vjn = element_0zt12vjj.firstElementChild.nextElementSibling.firstElementChild.firstChild, element_0zt12vjo = element_0zt12vjj.firstElementChild.nextElementSibling.firstElementChild, element_0zt12vjp = element_0zt12vjo.nextElementSibling, element_0zt12vjq = element_0zt12vjp.nextElementSibling;
+        template_u1.slot(element_0zt12vjk, pad);
+        template_u1.slot(element_0zt12vjl, hueChannel);
+        template_u1.slot(element_0zt12vjm, alphaChannel, 2);
+        template_u1.slot(element_0zt12vjn, input({
             'aria-invalid': () => picker.invalid ? 'true' : 'false',
             'aria-label': 'Hex color',
             autocapitalize: 'characters',
@@ -415,25 +493,25 @@ function template({ recent: initial = [], state = new ReactiveObject_0zt12vj0(),
             },
             spellcheck: false
         }));
-        template_u1.slot(element_0zt12vjd, copy({
+        template_u1.slot(element_0zt12vjo, copy({
             class: 'color-picker-copy',
             label: 'Copy hex color',
             success: 'Hex color copied',
             value: () => toHex(read())
         }), 2);
-        new template_u1.EffectSlot(element_0zt12vje, () => `${Math.round(color.a * 100)}%`, 1);
-        new template_u1.EffectSlot(element_0zt12vjf, () => picker.invalid && 'Not a valid hex color', 1);
-        template_u1.slot(element_0zt12vj7, history && (() => {
-            let root_0zt12vjg = template_0zt12vjh(), element_0zt12vji = root_0zt12vjg.firstChild, element_0zt12vjj = element_0zt12vji.firstElementChild, element_0zt12vjk = element_0zt12vjj.nextElementSibling, element_0zt12vjl = element_0zt12vjk.firstChild;
-            element_0zt12vjl.parentNode.insertBefore(new template_u1.ArraySlot(recent, (hex) => {
-                let root_0zt12vjm = template_0zt12vjn(), element_0zt12vjo = root_0zt12vjm.firstChild;
-                template_u1.setProperty(element_0zt12vjo, 'aria-label', template_u1.interpolate(["Use ", (hex)]));
-                template_u1.setList(element_0zt12vjo, 'style', template_u1.interpolate(["--swatch: ", (hex)]));
-                template_u1.setProperties(element_0zt12vjo, this?.attributes?.[COLOR_PICKER_SWATCH]);
-                template_u1.setProperties(element_0zt12vjo, attributes[COLOR_PICKER_SWATCH]);
-                template_u1.setProperty(element_0zt12vjo, 'aria-pressed', () => picker.active === hex ? 'true' : 'false');
-                template_u1.setList(element_0zt12vjo, 'class', () => picker.active === hex && '--active');
-                template_u1.delegate(element_0zt12vjo, 'click', () => {
+        new template_u1.EffectSlot(element_0zt12vjp, () => `${Math.round(color.a * 100)}%`, 1);
+        new template_u1.EffectSlot(element_0zt12vjq, () => picker.invalid && 'Not a valid hex color', 1);
+        template_u1.slot(element_0zt12vjj, history && (() => {
+            let root_0zt12vjr = template_0zt12vjs(), element_0zt12vjt = root_0zt12vjr.firstChild, element_0zt12vju = element_0zt12vjt.firstElementChild, element_0zt12vjv = element_0zt12vju.nextElementSibling, element_0zt12vjw = element_0zt12vjv.firstChild;
+            element_0zt12vjw.parentNode.insertBefore(new template_u1.ArraySlot(recent, (hex) => {
+                let root_0zt12vjx = template_0zt12vjy(), element_0zt12vjz = root_0zt12vjx.firstChild;
+                template_u1.setProperty(element_0zt12vjz, 'aria-label', template_u1.interpolate(["Use ", (hex)]));
+                template_u1.setList(element_0zt12vjz, 'style', template_u1.interpolate(["--swatch: ", (hex)]));
+                template_u1.setProperties(element_0zt12vjz, this?.attributes?.[COLOR_PICKER_SWATCH]);
+                template_u1.setProperties(element_0zt12vjz, attributes[COLOR_PICKER_SWATCH]);
+                template_u1.setProperty(element_0zt12vjz, 'aria-pressed', () => picker.active === hex ? 'true' : 'false');
+                template_u1.setList(element_0zt12vjz, 'class', () => picker.active === hex && '--active');
+                template_u1.delegate(element_0zt12vjz, 'click', () => {
                     let next = fromHex(hex, read());
                     if (!next) {
                         return;
@@ -442,81 +520,33 @@ function template({ recent: initial = [], state = new ReactiveObject_0zt12vj0(),
                     picker.active = hex;
                     picker.invalid = false;
                 });
-                return root_0zt12vjm;
-            }).fragment, element_0zt12vjl);
-            element_0zt12vjk.appendChild(new template_u1.ArraySlot(leaving, (ghost) => {
-                let root_0zt12vjp = template_0zt12vjq(), element_0zt12vjr = root_0zt12vjp.firstChild;
-                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate(["--swatch: ", (ghost.hex)]));
-                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate([" left: ", (ghost.left), "px"]));
-                template_u1.setList(element_0zt12vjr, 'style', template_u1.interpolate([" top: ", (ghost.top), "px"]));
-                template_u1.delegate(element_0zt12vjr, 'animationend', () => {
+                return root_0zt12vjx;
+            }).fragment, element_0zt12vjw);
+            element_0zt12vjv.appendChild(new template_u1.ArraySlot(leaving, (ghost) => {
+                let root_0zt12vj10 = template_0zt12vj11(), element_0zt12vj12 = root_0zt12vj10.firstChild;
+                template_u1.setList(element_0zt12vj12, 'style', template_u1.interpolate(["--swatch: ", (ghost.hex)]));
+                template_u1.setList(element_0zt12vj12, 'style', template_u1.interpolate([" left: ", (ghost.left), "px"]));
+                template_u1.setList(element_0zt12vj12, 'style', template_u1.interpolate([" top: ", (ghost.top), "px"]));
+                template_u1.delegate(element_0zt12vj12, 'animationend', () => {
                     let at = leaving.indexOf(ghost);
                     if (at !== -1) {
                         leaving.splice(at, 1);
                     }
                 });
-                return root_0zt12vjp;
+                return root_0zt12vj10;
             }).fragment);
-            template_u1.setProperty(element_0zt12vjk, 'aria-labelledby', template_u1.interpolate([(id), "-recent"]));
-            template_u1.onconnect(element_0zt12vjk, (element) => {
+            template_u1.setProperty(element_0zt12vjv, 'aria-labelledby', template_u1.interpolate([(id), "-recent"]));
+            template_u1.onconnect(element_0zt12vjv, (element) => {
                 parts.swatches = element;
             });
-            template_u1.setProperty(element_0zt12vjj, 'id', template_u1.interpolate([(id), "-recent"]));
-            template_u1.setProperty(element_0zt12vji, 'hidden', () => recent.$length === 0);
-            return root_0zt12vjg;
+            template_u1.setProperty(element_0zt12vju, 'id', template_u1.interpolate([(id), "-recent"]));
+            template_u1.setProperty(element_0zt12vjt, 'hidden', () => recent.$length === 0);
+            return root_0zt12vjr;
         })(), 2);
-        template_u1.setList(element_0zt12vj9, 'style', () => `left: ${color.s * 100}%; top: ${(1 - color.v) * 100}%;`);
-        template_u1.setProperty(element_0zt12vj8, 'aria-valuenow', () => Math.round(color.s * 100));
-        template_u1.setProperty(element_0zt12vj8, 'aria-valuetext', () => `Saturation ${Math.round(color.s * 100)}%, brightness ${Math.round(color.v * 100)}%`);
-        template_u1.on(element_0zt12vj8, 'blur', () => {
-            if (dirty.pad) {
-                commit();
-            }
-            dirty.pad = false;
-        });
-        template_u1.delegate(element_0zt12vj8, 'keydown', (e) => {
-            let delta = keystep(e, 0.01);
-            if (delta === null) {
-                return;
-            }
-            e.preventDefault();
-            dirty.pad = true;
-            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-                update({ s: clamp(color.s + delta, 0, 1) });
-            }
-            else {
-                update({ v: clamp(color.v + delta, 0, 1) });
-            }
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointercancel', (e) => {
-            if (e.pointerId === pointer.pad) {
-                pointer.pad = -1;
-                commit();
-            }
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointerdown', function (e) {
-            if (pointer.pad !== -1 || (e.pointerType === 'mouse' && e.button !== 0)) {
-                return;
-            }
-            pointer.pad = e.pointerId;
-            this.setPointerCapture(e.pointerId);
-            pick(this, e);
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointermove', function (e) {
-            if (e.pointerId === pointer.pad) {
-                pick(this, e);
-            }
-        });
-        template_u1.delegate(element_0zt12vj8, 'pointerup', (e) => {
-            if (e.pointerId === pointer.pad) {
-                pointer.pad = -1;
-                commit();
-            }
-        });
-        template_u1.setProperties(element_0zt12vj7, this?.attributes);
-        template_u1.setProperties(element_0zt12vj7, attributes);
-        template_u1.setList(element_0zt12vj7, 'style', css);
-        return root_0zt12vj5;
+        template_u1.setProperties(element_0zt12vjj, this?.attributes);
+        template_u1.setProperties(element_0zt12vjj, attributes);
+        template_u1.setList(element_0zt12vjj, 'style', css);
+        return root_0zt12vjh;
     })();
 }
 export default component(template, { swatch: COLOR_PICKER_SWATCH });

package/build/components/color-picker/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.color-picker-pad:after{position:absolute;inset:0}.color-picker-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.color-picker-pad:after{border-radius:inherit;pointer-events:none}.color-picker{--checker:repeating-conic-gradient(var(--color-border-300) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;--color:var(--color-text-500);--color-invalid:var(--color-red-400);--color-muted:var(--color-text-300);--control-border-color:var(--color-border-300);--control-border-radius:var(--border-radius-400);--control-height:36px;--copy-inset:4px;--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--hairline:inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);--pad-height:176px;--preview-size:44px;--ring-offset-color:var(--color-white-300);--spacing:12px;--swatch-blur:4px;--swatch-duration:.3s;--swatch-easing:linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--swatch-exit-duration:.15s;--swatch-exit-easing:cubic-bezier(.23, 1, .32, 1);--swatch-scale:.6;--swatch-shift-duration:var(--swatch-duration);--swatch-shift-easing:var(--swatch-easing);--swatch-size:28px;--thumb-border:2px solid var(--color-white-300);--thumb-scale:none;--thumb-scale-pressed:1.1;--thumb-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .12), 0 1px 3px oklch(from var(--color-black-500) l c h / .3);--thumb-size:20px;--track-height:12px;--transition-duration:.15s;--transition-timing-function:ease-out}@media (prefers-reduced-motion:reduce){.color-picker{--swatch-blur:0px;--swatch-scale:1;--swatch-shift-duration:0s;--thumb-scale-pressed:1}}.color-picker-channel--alpha{--thumb:linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);--track:linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker)}.color-picker-channel--hue{--thumb:hsl(var(--hue) 100% 50%);--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker .color-picker-copy{--border-radius:calc(var(--control-border-radius) - var(--copy-inset));--color-default:var(--color-muted);--color-hover:var(--color);--size:calc(var(--control-height) - var(--copy-inset) * 2)}.color-picker-fields .color-picker-hex{--border-color-active:var(--control-border-color);--border-color-default:var(--control-border-color);--border-color-hover:var(--control-border-color);--border-color-pressed:var(--control-border-color);--border-radius:var(--control-border-radius);--border-width:1px;--color-default:currentColor;--font-size:inherit;--padding-horizontal:10px;--padding-vertical:0px;--size:var(--control-height)}.color-picker-fields .color-picker-hex[aria-invalid=true]{--control-border-color:var(--color-invalid)}.color-picker-pad:active{--thumb-scale:var(--thumb-scale-pressed)}.color-picker{font-size:var(--font-size);gap:var(--spacing);flex-direction:column;display:flex}.color-picker-alpha{border:1px solid var(--control-border-color);border-radius:var(--control-border-radius);color:var(--color-muted);font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;height:var(--control-height);-webkit-user-select:none;user-select:none;flex:0 0 56px;justify-content:center;align-items:center;display:flex}.color-picker .color-picker-channel{appearance:none;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:999px;outline:none;width:100%;height:28px;margin:0;display:block}.color-picker .color-picker-channel:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:1px}.color-picker .color-picker-channel::-webkit-slider-runnable-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-moz-range-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);appearance:none;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:50%}.color-picker .color-picker-channel::-moz-range-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);border-radius:50%}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:var(--thumb-scale-pressed)}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:var(--thumb-scale-pressed)}.color-picker-channels{align-items:center;gap:var(--spacing);display:flex}.color-picker .color-picker-copy{right:var(--copy-inset);position:absolute;top:50%;translate:0 -50%}.color-picker-field{flex:auto;min-width:0;display:flex;position:relative}.color-picker-field>.color-picker-hex{padding-inline-end:calc(var(--control-height) - var(--copy-inset))}.color-picker-fields{gap:var(--size-100);display:flex}.color-picker-hex{font-family:var(--font-family-mono);text-transform:uppercase;outline:none}.color-picker-hex:focus{outline:var(--focus-width) solid var(--color);outline-offset:-1px}.color-picker-hex[aria-invalid=true]:focus{outline-color:var(--color-invalid)}.color-picker-pad{background-color:hsl(var(--hue), 100%, 50%);border-radius:var(--control-border-radius);cursor:crosshair;height:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);outline:none;position:relative}.color-picker-pad:after{box-shadow:var(--hairline);content:""}.color-picker-pad:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:2px}.color-picker-preview{background:linear-gradient(rgb(var(--rgb)/var(--alpha)), rgb(var(--rgb)/var(--alpha))), var(--checker);border-radius:var(--control-border-radius);box-shadow:var(--hairline);height:var(--preview-size);width:var(--preview-size);flex:none}.color-picker-recent{border-top:1px solid var(--control-border-color);padding-top:var(--spacing)}.color-picker-recent-label{color:var(--color-muted);font-size:var(--font-size-300);margin:0 0 var(--size-100);-webkit-user-select:none;user-select:none}.color-picker-sliders{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.color-picker-swatch{background:linear-gradient(var(--swatch), var(--swatch)), var(--checker);box-shadow:var(--hairline), 0 0 0 0 var(--ring-offset-color), 0 0 0 0 var(--color);cursor:pointer;height:var(--swatch-size);touch-action:manipulation;transition:box-shadow var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--swatch-size);border:0;border-radius:50%;outline:none;flex:none;margin:0;padding:0;position:relative}.color-picker-swatch:after{content:"";border-radius:50%;position:absolute;inset:-4px}.color-picker-swatch:active{scale:.96}.color-picker-swatch:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:4px}.color-picker-swatch.--active{box-shadow:var(--hairline), 0 0 0 2px var(--ring-offset-color), 0 0 0 4px var(--color)}.color-picker-swatch--leaving{animation:color-picker-swatch-leave var(--swatch-exit-duration) var(--swatch-exit-easing) forwards;pointer-events:none;position:absolute}.color-picker-swatches{gap:var(--size-100);height:var(--swatch-size);display:flex;position:relative}.color-picker-thumb{background:rgb(var(--rgb));border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;height:var(--thumb-size);pointer-events:none;scale:var(--thumb-scale);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);z-index:1;border-radius:50%;position:absolute;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.color-picker .color-picker-channel::-webkit-slider-thumb{transition:none}.color-picker .color-picker-channel::-moz-range-thumb{transition:none}.color-picker-swatch:active{scale:1}.color-picker-swatch{transition:box-shadow var(--transition-duration) var(--transition-timing-function)}.color-picker-thumb{transition:none}}@keyframes color-picker-swatch-leave{to{filter:blur(var(--swatch-blur));opacity:0;scale:var(--swatch-scale)}}}
+@layer components{.color-picker-swatch{--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-default);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default)}.--active.color-picker-swatch{--box-shadow:var(--box-shadow-active)}.color-picker-swatch:not(.--active):hover{--box-shadow:var(--box-shadow-hover)}.color-picker-swatch:not(.--active):active{--box-shadow:var(--box-shadow-pressed)}@font-face{font-display:swap;font-family:Geist;font-style:normal;font-weight:100 900;src:url(../../../css-utilities/font/geist/Geist-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist;font-style:italic;font-weight:100 900;src:url(../../../css-utilities/font/geist/Geist-Italic-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url(../../../css-utilities/font/geist/GeistMono-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:italic;font-weight:100 900;src:url(../../../css-utilities/font/geist/GeistMono-Italic-Variable.woff2)format("woff2")}.color-picker-alpha,.color-picker-hex{--font-weight-300:300;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-family:"Geist Mono", monospace}.color-picker-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.color-picker-pad:after{border-radius:inherit;pointer-events:none;position:absolute;inset:0}.color-picker{--checker:repeating-conic-gradient(var(--surface-border-default) 0 25%, var(--color-white-300) 0 50%) 0 0 / 8px 8px;--color:var(--color-text-500);--color-invalid:var(--color-red-400);--color-muted:var(--color-text-300);--control-border-color:var(--surface-border-default);--control-border-radius:var(--border-radius-400);--control-height:36px;--copy-inset:calc(var(--size-100) / 2);--focus-width:var(--border-width-500);--font-size:calc(var(--font-size-400) * .875);--hairline:inset 0 0 0 1px color-mix(in oklch, var(--color) 10%, transparent);--pad-height:176px;--preview-size:44px;--ring-offset-color:var(--surface-background-default);--spacing:12px;--swatch-blur:var(--blur-400);--swatch-duration:var(--duration-moderate);--swatch-easing:linear(0, .058, .18, .321, .455, .573, .671, .75, .812, .86, .897, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--swatch-exit-duration:var(--duration-fast);--swatch-exit-easing:var(--easing-out);--swatch-scale:.6;--swatch-shift-duration:var(--swatch-duration);--swatch-shift-easing:var(--swatch-easing);--swatch-size:28px;--thumb-border:2px solid var(--color-white-300);--thumb-scale:none;--thumb-scale-pressed:1.1;--thumb-shadow:0 0 0 1px var(--surface-border-default), 0 1px 3px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 3));--thumb-size:var(--size-500);--track-height:12px}@media (prefers-reduced-motion:reduce){.color-picker{--swatch-blur:0px;--swatch-scale:1;--swatch-shift-duration:0s;--thumb-scale-pressed:1}}.color-picker--compact{--pad-height:184px;--rail-radius:var(--border-radius-100);--rail-thumb-height:6px;--rail-width:28px;--spacing:var(--size-100);--thumb-size:12px}.color-picker-channel--alpha{--thumb:linear-gradient(rgb(var(--rgb) / var(--alpha)), rgb(var(--rgb) / var(--alpha))), var(--checker);--track:linear-gradient(to right, rgb(var(--rgb) / 0), rgb(var(--rgb))), var(--checker)}.color-picker-channel--hue{--thumb:hsl(var(--hue) 100% 50%);--track:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker--compact .color-picker-channel--alpha{--track:linear-gradient(rgb(var(--rgb)), rgb(var(--rgb) / 0)), var(--checker)}.color-picker--compact .color-picker-channel--hue{--track:linear-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red)}.color-picker .color-picker-copy{--border-radius:calc(var(--control-border-radius) - var(--copy-inset));--color-default:var(--color-muted);--color-hover:var(--color);--size:calc(var(--control-height) - var(--copy-inset) * 2)}.color-picker-fields .color-picker-hex{--border-color-active:var(--control-border-color);--border-color-default:var(--control-border-color);--border-color-hover:var(--control-border-color);--border-color-pressed:var(--control-border-color);--border-radius:var(--control-border-radius);--border-width:var(--border-width-400);--color-default:currentColor;--font-size:inherit;--padding-horizontal:var(--size-200);--padding-vertical:0px;--size:var(--control-height)}.color-picker-fields .color-picker-hex[aria-invalid=true]{--control-border-color:var(--color-invalid)}.color-picker-pad:active{--thumb-scale:var(--thumb-scale-pressed)}.color-picker{font-size:var(--font-size);gap:var(--spacing);flex-direction:column;display:flex}.color-picker-alpha{border:1px solid var(--control-border-color);border-radius:var(--control-border-radius);color:var(--color-muted);font-family:var(--font-family);font-variant-numeric:tabular-nums;height:var(--control-height);-webkit-user-select:none;user-select:none;flex:0 0 56px;justify-content:center;align-items:center;display:flex}.color-picker-body{gap:var(--spacing);display:flex}.color-picker-body>.color-picker-pad{flex:auto;min-width:0}.color-picker-channels{align-items:center;gap:var(--spacing);display:flex}.color-picker-field{flex:auto;min-width:0;display:flex;position:relative}.color-picker .color-picker-channel{appearance:none;cursor:pointer;touch-action:none;background:0 0;border:0;border-radius:999px;outline:none;width:100%;height:28px;margin:0;display:block}.color-picker .color-picker-channel::-moz-range-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);border-radius:50%}.color-picker .color-picker-channel::-moz-range-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-runnable-track{background:var(--track);box-shadow:var(--hairline);height:var(--track-height);border-radius:999px}.color-picker .color-picker-channel::-webkit-slider-thumb{background:var(--thumb);border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;cursor:pointer;height:var(--thumb-size);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);appearance:none;margin-top:calc((var(--track-height) - var(--thumb-size)) / 2);border-radius:50%}.color-picker .color-picker-channel:active::-moz-range-thumb{scale:var(--thumb-scale-pressed)}.color-picker .color-picker-channel:active::-webkit-slider-thumb{scale:var(--thumb-scale-pressed)}.color-picker .color-picker-channel:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:1px}.color-picker .color-picker-copy{right:var(--copy-inset);position:absolute;top:50%;translate:0 -50%}.color-picker-field>.color-picker-hex{padding-inline-end:calc(var(--control-height) - var(--copy-inset))}.color-picker-fields{gap:var(--size-100);display:flex}.color-picker-header{color:var(--color);align-items:center;gap:var(--size-100);display:flex}.color-picker-hex{font-family:var(--font-family);text-transform:uppercase;outline:none}.color-picker-hex:focus{outline:var(--focus-width) solid var(--color);outline-offset:-1px}.color-picker-hex[aria-invalid=true]:focus{outline-color:var(--color-invalid)}.color-picker-icon{height:var(--size-400);width:var(--size-400);flex:none}.color-picker-pad{background-color:hsl(var(--hue), 100%, 50%);border-radius:var(--control-border-radius);cursor:crosshair;height:var(--pad-height);touch-action:none;-webkit-user-select:none;user-select:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);outline:none;position:relative}.color-picker-pad:after{box-shadow:var(--hairline);content:""}.color-picker-pad:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:calc(var(--size-100) / 4)}.color-picker-preview{background:linear-gradient(rgb(var(--rgb)/var(--alpha)), rgb(var(--rgb)/var(--alpha))), var(--checker);border-radius:var(--control-border-radius);box-shadow:var(--hairline);height:var(--preview-size);width:var(--preview-size);flex:none}.color-picker-recent{border-top:1px solid var(--control-border-color);padding-top:var(--spacing)}.color-picker-recent-label{color:var(--color-muted);font-size:var(--font-size-300);margin:0 0 var(--size-100);-webkit-user-select:none;user-select:none}.color-picker-sliders{gap:calc(var(--size-100) / 2);flex-direction:column;flex:1;min-width:0;display:flex}.color-picker-swatch{--box-shadow-active:var(--hairline), 0 0 0 2px var(--ring-offset-color), 0 0 0 4px var(--color);--box-shadow-default:var(--hairline), 0 0 0 0 var(--ring-offset-color), 0 0 0 0 var(--color);background:linear-gradient(var(--swatch), var(--swatch)), var(--checker);box-shadow:var(--box-shadow);cursor:pointer;height:var(--swatch-size);touch-action:manipulation;transition:box-shadow var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;width:var(--swatch-size);border:0;border-radius:50%;outline:none;flex:none;margin:0;padding:0;position:relative}.color-picker-swatch--leaving{animation:color-picker-swatch-leave var(--swatch-exit-duration) var(--swatch-exit-easing) forwards;pointer-events:none;position:absolute}.color-picker-swatch:after{content:"";inset:calc(var(--size-100) / -2);border-radius:50%;position:absolute}.color-picker-swatch:focus-visible{outline:var(--focus-width) solid var(--color);outline-offset:calc(var(--size-100) / 2)}.color-picker-swatches{gap:var(--size-100);height:var(--swatch-size);display:flex;position:relative}.color-picker-thumb{background:rgb(var(--rgb));border:var(--thumb-border);box-shadow:var(--thumb-shadow);box-sizing:border-box;height:var(--thumb-size);pointer-events:none;scale:var(--thumb-scale);transition:scale var(--transition-duration) var(--transition-timing-function);width:var(--thumb-size);z-index:1;border-radius:50%;position:absolute;translate:-50% -50%}.color-picker-value{font-variant-numeric:tabular-nums}.color-picker.color-picker--compact .color-picker-channel{border-radius:var(--rail-radius);flex:0 0 var(--rail-width);height:auto;width:var(--rail-width);writing-mode:vertical-lr}.color-picker.color-picker--compact .color-picker-channel--alpha{direction:rtl}.color-picker.color-picker--compact .color-picker-channel--hue{direction:ltr}.color-picker.color-picker--compact .color-picker-channel::-moz-range-thumb{border-radius:var(--rail-radius);height:var(--rail-thumb-height);background:0 0;width:100%}.color-picker.color-picker--compact .color-picker-channel::-moz-range-track{border-radius:var(--rail-radius);width:100%;height:100%}.color-picker.color-picker--compact .color-picker-channel::-webkit-slider-runnable-track{border-radius:var(--rail-radius);width:100%;height:100%}.color-picker.color-picker--compact .color-picker-channel::-webkit-slider-thumb{border-radius:var(--rail-radius);height:var(--rail-thumb-height);background:0 0;width:100%;margin:0}@media (prefers-reduced-motion:reduce){.color-picker-thumb{transition:none}.color-picker .color-picker-channel::-moz-range-thumb{transition:none}.color-picker .color-picker-channel::-webkit-slider-thumb{transition:none}}@keyframes color-picker-swatch-leave{to{filter:blur(var(--swatch-blur));opacity:0;scale:var(--swatch-scale)}}}
 /*$vite$:1*/

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

@@ -1,7 +1,6 @@
 import * as template_u1 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 import '../frame/scss/index.scss';
-import '../../css-utilities/scrollbar/scss/index.scss';
 import './scss/index.scss';
 type A = Attributes & {
     [COMMAND_DIALOG]?: Dialog;

package/build/components/command/index.js

@@ -6,13 +6,13 @@ import highlight from '../highlight/index.js';
 import icon from '../icon/index.js';
 import input from '../input/index.js';
 import overlay from '../overlay/index.js';
+import scrollbar from '../../modifiers/scrollbar/index.js';
 import { mac } from '../../shared/platform.js';
 import down from '@esportsplus/ui/svg/arrow-down.svg';
 import up from '@esportsplus/ui/svg/arrow-up.svg';
 import enter from '@esportsplus/ui/svg/enter.svg';
 import magnifier from '@esportsplus/ui/svg/search.svg';
 import '../frame/scss/index.scss';
-import '../../css-utilities/scrollbar/scss/index.scss';
 import './scss/index.scss';
 const template_1nmcshy3 = template_u1.template(`<!--$--><!--$--><!--$-->`);
 const template_1nmcshy8 = template_u1.template(`<!--$--><!--$-->`);
@@ -30,7 +30,7 @@ const template_1nmcshy1b = template_u1.template(`<div class='command-panel'><div
 const template_1nmcshy1n = template_u1.template(`<span aria-hidden='true' class='command-count'>`);
 const template_1nmcshy1q = template_u1.template(`<div aria-label='Views' class='command-tabs' role='tablist'><!--$-->`);
 const template_1nmcshy1u = template_u1.template(`<button class='button command-tab' role='tab' tabindex='-1' type='button'>`);
-const template_1nmcshy1x = template_u1.template(`<div class='command-view frame '><div class='command-list --scrollbar' role='listbox'>`);
+const template_1nmcshy1x = template_u1.template(`<div class='command-view frame '><div class='command-list' role='listbox'>`);
 const template_1nmcshy21 = template_u1.template(`<p class='command-empty' role='status'>`);
 class ReactiveObject_1nmcshy0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
@@ -565,6 +565,7 @@ export default component(function ({ commands, hotkey, label = 'Search commands'
                 })(), 2);
                 template_u1.setProperty(element_1nmcshy1z, 'aria-label', view.label);
                 template_u1.setProperty(element_1nmcshy1z, 'id', template_u1.interpolate([(view.key), "-listbox"]));
+                template_u1.setProperties(element_1nmcshy1z, scrollbar());
                 template_u1.setList(element_1nmcshy1z, 'class', () => !read(view.results).flat.length && 'command-list--empty');
                 template_u1.on(element_1nmcshy1z, 'mouseleave', () => {
                     pointer = null;

package/build/components/command/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.command-label,.command-trigger-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.command,.command-trigger{--raised:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12)}.command{--close-duration:.1s;--color:var(--color-text-500);--color-muted:var(--color-text-300);--count-fade:48px;--dialog-backdrop:color-mix(in srgb, var(--color-text-500) 10%, transparent);--dialog-background:var(--color-white-300);--dialog-border-radius:var(--border-radius-600);--dialog-offset:20vh;--dialog-scale:.98;--dialog-width:600px;--divider-color:var(--color-border-300);--font-size:calc(var(--font-size-400) * .875);--footer-height:44px;--input-mask:none;--kbd-icon-size:12px;--label-font-size:var(--font-size-200);--list-max-height:min(320px, 50vh);--open-duration:.15s;--option-background:var(--color-grey-400);--option-border-radius:var(--border-radius-400);--option-height:36px;--search-height:48px;--tab-height:32px;--timing-function:cubic-bezier(.23, 1, .32, 1)}.command--centered{--dialog-offset:auto}.command-dialog.overlay{--backdrop:var(--dialog-backdrop);--margin-horizontal:var(--size-400);--max-width:var(--dialog-width);--scale:var(--dialog-scale);--transition-duration:var(--open-duration);--transition-timing-function:var(--timing-function)}.command-dialog.overlay:not(.--active){--transition-duration:var(--close-duration)}.command-highlight.highlight{--background-active:var(--option-background);--glide-duration:.3s}.command-input.input{--color-default:var(--color);--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;--size:0px}.command-kbd-icon.icon{--size:var(--kbd-icon-size)}.command-option-icon.icon{--color:var(--color-muted)}.command-option-icon.icon.--active{--color:inherit}.command-search:has(.command-count){--input-mask:linear-gradient(to right, #000 calc(100% - var(--count-fade)), transparent)}.command-tab.button{--border-radius:var(--border-radius-400);--color-active:var(--color);--color-default:var(--color-muted);--color-hover:var(--color);--font-size:calc(var(--font-size-400) * .875);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px}.command-tabs-highlight.highlight{--background-active:var(--option-background);--glide-duration:.4s}.command-trigger.button{--background-default:var(--color-white-400);--border-radius:var(--border-radius-400);--box-shadow-default:var(--raised);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:calc(var(--font-size-400) * .875);--gap-horizontal:var(--size-100);--line-height:24px;--padding-horizontal:6px;--padding-vertical:6px;--transition-duration:.15s;--transition-timing-function:ease-out;--width:240px}@media (prefers-reduced-motion:reduce){.command-dialog.overlay{--scale:1}}.command{display:contents}.command-count{color:var(--color-muted);font-size:var(--label-font-size);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.command-dialog.overlay{background:var(--dialog-background);border-radius:var(--dialog-border-radius);box-shadow:var(--raised);color:var(--color);margin-block:var(--dialog-offset) auto;transform-origin:top;overflow:hidden}.command-empty{color:var(--color-muted);font-size:var(--font-size);padding:var(--size-700) var(--size-400);text-align:center;margin-block:auto}.command-footer{border-top:var(--border-width-400) solid var(--divider-color);color:var(--color-muted);font-size:var(--label-font-size);align-items:center;gap:var(--size-400);height:var(--footer-height);padding-inline:var(--size-400);-webkit-user-select:none;user-select:none;flex-shrink:0;display:flex}.command-footer-hint{align-items:center;gap:var(--size-200);display:flex}.command-footer-hint:first-child{margin-inline-end:auto}.command-group-label{color:var(--color-muted);font-size:var(--label-font-size);font-weight:var(--font-weight-500);padding:var(--size-100) var(--size-300) calc(var(--size-100) / 2);text-transform:uppercase;-webkit-user-select:none;user-select:none}.command-input.input{height:100%;-webkit-mask-image:var(--input-mask);-webkit-mask-image:var(--input-mask);mask-image:var(--input-mask);outline:none}.command-input.input::placeholder{color:var(--color-muted)}.command-keys{gap:calc(var(--size-100) / 2);pointer-events:none;flex-shrink:0;display:flex}.command-label{color:var(--color);flex:auto;min-width:0}.command-label--filtered{color:var(--color-muted)}.command-list{max-height:var(--list-max-height);overscroll-behavior:contain;padding:calc(var(--size-100) / 2) calc(var(--size-100) / 2 + 2px);scroll-behavior:smooth;scroll-padding-block:calc(var(--size-100) / 2);width:100%;overflow-y:auto}@media (prefers-reduced-motion:reduce){.command-list{scroll-behavior:auto}}.command-list--empty{display:none}.command-match{color:var(--color)}.command-option{border-radius:var(--option-border-radius);cursor:pointer;font-size:var(--font-size);align-items:center;gap:var(--size-200);height:var(--option-height);padding-inline:var(--size-300);-webkit-user-select:none;user-select:none;display:flex}.command-option--inert{cursor:default}.command-panel{flex-direction:column;display:flex}.command-search{color:var(--color-muted);align-items:center;gap:var(--size-200);height:var(--search-height);padding-inline:var(--size-400);flex-shrink:0;display:flex}.command-tab.button{height:var(--tab-height);-webkit-user-select:none;user-select:none;flex-shrink:0}.command-tabs{--scrollbar-width:none;gap:var(--size-100);padding:0 var(--size-400) var(--size-300);scrollbar-width:none;flex-shrink:0;display:flex;overflow-x:auto}.command-trigger.button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.command-trigger.button:focus-visible{outline:var(--border-width-500) solid var(--color-text-500);outline-offset:var(--border-width-500)}.command-trigger.button[hidden]{display:none}.command-trigger-label{text-align:left;flex:auto}.command-view{flex-direction:column;display:flex}.command-views{border-top:var(--border-width-400) solid var(--divider-color);overflow:hidden}.command-views:has(>.frame--swap){height:var(--list-max-height)}@media (prefers-reduced-motion:reduce){.command-dialog.overlay,.command-dialog.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.command-trigger.button:active{scale:1}}}
+@layer components{.command-label,.command-trigger-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}@keyframes text-gradient{to{background-position:var(--background-size) 0}}@keyframes text-line-shadow{0%{background-position:0 0}to{background-position:100% -100%}}@keyframes text-shiny{0%,90%,to{background-position:calc(-100% - var(--shine-width)) 0}30%,60%{background-position:calc(100% + var(--shine-width)) 0}}.command-option-icon.icon{--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)}.--active.command-option-icon.icon{--color:var(--color-active)}.command-option-icon.icon:not(.--active):hover{--color:var(--color-hover)}.command-option-icon.icon:not(.--active):active{--color:var(--color-pressed)}.command{--color:var(--color-text-500);--color-muted:var(--color-text-300);--count-fade:48px;--dialog-backdrop:oklch(from var(--surface-shadow-color) 0 0 0 / calc(alpha + .01));--dialog-border-radius:var(--border-radius-600);--dialog-offset:20vh;--dialog-scale:.98;--dialog-width:600px;--divider-color:var(--surface-border-default);--font-size:calc(var(--font-size-400) * .875);--footer-height:44px;--input-mask:none;--kbd-icon-size:12px;--label-font-size:var(--font-size-200);--list-max-height:min(320px, 50vh);--option-background:var(--surface-background-hover);--option-border-radius:var(--border-radius-400);--option-height:36px;--search-height:48px;--tab-height:32px}.command--centered{--dialog-offset:auto}.command-dialog.overlay{--backdrop:var(--dialog-backdrop);--margin-horizontal:var(--size-400);--max-width:var(--dialog-width);--scale:var(--dialog-scale)}.command-highlight.highlight{--background-active:var(--option-background)}.command-input.input{--color-default:var(--color);--font-size:inherit;--padding-horizontal:0px;--padding-vertical:0px;--size:0px}.command-kbd-icon.icon{--size:var(--kbd-icon-size)}.command-option-icon.icon{--color-active:currentColor;--color-default:var(--color-muted)}.command-search:has(.command-count){--input-mask:linear-gradient(to right, #000 calc(100% - var(--count-fade)), transparent)}.command-tab.button{--border-radius:var(--border-radius-400);--color-active:var(--color);--color-default:var(--color-muted);--color-hover:var(--color);--font-size:calc(var(--font-size-400) * .875);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px}.command-tabs-highlight.highlight{--background-active:var(--option-background)}.command-trigger.button{--background-default:var(--surface-background-default);--border-radius:var(--border-radius-400);--box-shadow-default:var(--surface-shadow-default);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:calc(var(--font-size-400) * .875);--gap-horizontal:var(--size-100);--line-height:24px;--padding-horizontal:calc(var(--size-300) / 2);--padding-vertical:calc(var(--size-300) / 2);--width:240px}@media (prefers-reduced-motion:reduce){.command-dialog.overlay{--scale:1}}.command{display:contents}.command-count{color:var(--color-muted);font-size:var(--label-font-size);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.command-dialog.overlay{background:var(--surface-background-default);border-radius:var(--dialog-border-radius);box-shadow:var(--surface-shadow-default);color:var(--color);margin-block:var(--dialog-offset) auto;transform-origin:top;overflow:hidden}.command-empty{color:var(--color-muted);font-size:var(--font-size);padding:var(--size-700) var(--size-400);text-align:center;margin-block:auto}.command-footer{border-top:var(--border-width-400) solid var(--divider-color);color:var(--color-muted);font-size:var(--label-font-size);align-items:center;gap:var(--size-400);height:var(--footer-height);padding-inline:var(--size-400);-webkit-user-select:none;user-select:none;flex-shrink:0;display:flex}.command-footer-hint{align-items:center;gap:var(--size-200);display:flex}.command-footer-hint:first-child{margin-inline-end:auto}.command-group-label{color:var(--color-muted);font-size:var(--label-font-size);font-weight:var(--font-weight-500);padding:var(--size-100) var(--size-300) calc(var(--size-100) / 2);text-transform:uppercase;-webkit-user-select:none;user-select:none}.command-input.input{height:100%;mask-image:var(--input-mask);outline:none}.command-input.input::placeholder{color:var(--color-muted)}.command-keys{gap:calc(var(--size-100) / 2);pointer-events:none;flex-shrink:0;display:flex}.command-label{color:var(--color);flex:auto;min-width:0}.command-label--filtered{color:var(--color-muted)}.command-list{max-height:var(--list-max-height);overscroll-behavior:contain;padding:calc(var(--size-100) / 2) calc(var(--size-100) / 2 + 2px);scroll-behavior:smooth;scroll-padding-block:calc(var(--size-100) / 2);width:100%;overflow-y:auto}@media (prefers-reduced-motion:reduce){.command-list{scroll-behavior:auto}}.command-list--empty{display:none}.command-match{color:var(--color)}.command-option{border-radius:var(--option-border-radius);cursor:pointer;font-size:var(--font-size);align-items:center;gap:var(--size-200);height:var(--option-height);padding-inline:var(--size-300);-webkit-user-select:none;user-select:none;display:flex}.command-option--inert{cursor:default}.command-panel{flex-direction:column;display:flex}.command-search{color:var(--color-muted);align-items:center;gap:var(--size-200);height:var(--search-height);padding-inline:var(--size-400);flex-shrink:0;display:flex}.command-tab.button{height:var(--tab-height);-webkit-user-select:none;user-select:none;flex-shrink:0}.command-tabs{--scrollbar-width:none;gap:var(--size-100);padding:0 var(--size-400) var(--size-300);scrollbar-width:none;flex-shrink:0;display:flex;overflow-x:auto}.command-trigger-label{text-align:left;flex:auto}.command-trigger.button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.command-trigger.button:focus-visible{outline:var(--border-width-500) solid var(--color-primary-500);outline-offset:var(--border-width-500)}.command-trigger.button[hidden]{display:none}.command-view{flex-direction:column;display:flex}.command-views{border-top:var(--border-width-400) solid var(--divider-color);overflow:hidden}.command-views:has(>.frame--swap){height:var(--list-max-height)}@media (prefers-reduced-motion:reduce){.command-dialog.overlay,.command-dialog.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}}}
 /*$vite$:1*/

package/build/components/copy/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.copy-icon--check{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;stroke-dasharray:1;stroke-dashoffset:1px}.copy{--background:var(--background-default);--background-default:transparent;--background-hover:var(--color-grey-400);--border-radius:6px;--color:var(--color-default);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--draw-duration:.28s;--draw-timing-function:ease;--icon-size:16px;--outline-color:var(--color-blue-400);--outline-width:2px;--size:28px;--transition-duration:.15s;--transition-timing-function:ease-out}.copy:hover{--background:var(--background-hover);--color:var(--color-hover)}.copy{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;height:var(--size);transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);width:var(--size);border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.copy:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:calc(var(--outline-width) * -1)}.copy-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.copy-icon--check{animation:copy-check-draw var(--draw-duration) var(--draw-timing-function) forwards;stroke-width:4px}@media (prefers-reduced-motion:reduce){.copy-icon--check{stroke-dashoffset:0;animation:none}}@keyframes copy-check-draw{to{stroke-dashoffset:0}}}
+@layer components{.copy-icon--check{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;stroke-dasharray:1;stroke-dashoffset:1px}.copy{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.copy{--background:var(--background-active)}.copy:not(.--active):hover{--background:var(--background-hover)}.copy:not(.--active):active{--background:var(--background-pressed)}.copy{--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)}.--active.copy{--color:var(--color-active)}.copy:not(.--active):hover{--color:var(--color-hover)}.copy:not(.--active):active{--color:var(--color-pressed)}.copy{--background-hover:var(--surface-background-hover);--background-pressed:var(--surface-background-pressed);--border-radius:var(--border-radius-300);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--color-pressed:var(--color-hover);--draw-duration:var(--duration-moderate);--draw-timing-function:ease;--icon-size:var(--size-400);--outline-color:var(--color-blue-400);--outline-width:var(--border-width-500);--size:28px;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;height:var(--size);transition:background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);width:var(--size);border:0;outline:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.copy-icon{height:var(--icon-size);width:var(--icon-size);flex-shrink:0}.copy-icon--check{animation:copy-check-draw var(--draw-duration) var(--draw-timing-function) forwards;stroke-width:4px}@media (prefers-reduced-motion:reduce){.copy-icon--check{stroke-dashoffset:0;animation:none}}.copy:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:calc(var(--outline-width) * -1)}@keyframes copy-check-draw{to{stroke-dashoffset:0}}}
 /*$vite$:1*/

package/build/components/counter/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.counter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.counter{--blur:.05em;--color:var(--color-black-400);--fill:initial;--font-size:1em;--font-weight:var(--font-weight-400);--roll-1-animation:none;--roll-2-animation:none;--stagger:0s;--timing-function:linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);--transition-duration:2s}.counter--blur{--roll-1-animation:counter-blur-1;--roll-2-animation:counter-blur-2}.counter--inherit{--color:currentColor}.counter--shade{--fill:linear-gradient(currentColor 50%, color-mix(in srgb, currentColor 45%, transparent))}.counter--snap{--timing-function:cubic-bezier(.16, 1, .3, 1);--transition-duration:.64s}.counter--spring{--timing-function:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--transition-duration:1.2s}.counter--ticker{--stagger:60ms;--timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.9s}.counter-character--symbol{--opacity:1;--scale:1}.counter{color:var(--color);transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);place-items:center;gap:2px;display:flex}.counter-character--symbol,.counter-digit{background:var(--fill,linear-gradient(currentColor, currentColor));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;display:grid;overflow:hidden}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-inline-end:.1ch}.counter-character-track{translate:0 calc((var(--value) + 1) * -1lh);transition:translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));display:grid}@media (prefers-reduced-motion:no-preference){.counter-character-track--roll-1{animation:var(--roll-1-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}.counter-character-track--roll-2{animation:var(--roll-2-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}}.counter-digit{height:1lh}.counter--ticker{gap:0}@media (prefers-reduced-motion:reduce){.counter,.counter-character-track{transition:none}}@keyframes counter-blur-1{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}@keyframes counter-blur-2{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}}
+@layer components{.counter-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.counter{--blur:.05em;--color:var(--color-text-400);--fill:initial;--font-size:1em;--font-weight:var(--font-weight-400);--roll-1-animation:none;--roll-2-animation:none;--stagger:0s;--timing-function:linear(0, .004, .016, .035, .063, .098, .141 13.6%, .25, .391, .563, .765, 1, .891 40.9%, .848, .813, .785, .766, .754, .75, .754, .766, .785, .813, .848, .891 68.2%, 1 72.7%, .973, .953, .941, .938, .941, .953, .973, 1, .988, .984, .988, 1);--transition-duration:2s}.counter--blur{--roll-1-animation:counter-blur-1;--roll-2-animation:counter-blur-2}.counter--inherit{--color:currentColor}.counter--shade{--fill:linear-gradient(currentColor 50%, color-mix(in srgb, currentColor 45%, transparent))}.counter--snap{--timing-function:cubic-bezier(.16, 1, .3, 1);--transition-duration:.64s}.counter--spring{--timing-function:linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--transition-duration:1.2s}.counter--ticker{--stagger:60ms;--timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.9s}.counter-character--symbol{--opacity:1;--scale:1}.counter{color:var(--color);gap:calc(var(--size-100) / 4);transition:transform calc(var(--transition-duration) / 4) var(--transition-duration);place-items:center;display:flex}.counter--ticker{gap:0}.counter-character{font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;display:grid;overflow:hidden}.counter-character--symbol{font-size:calc(var(--font-size) * var(--scale));opacity:var(--opacity);margin-inline-end:.1ch}.counter-character-track{transition:translate var(--transition-duration) var(--timing-function) calc(var(--index) * var(--stagger));translate:0 calc((var(--value) + 1) * -1lh);display:grid}@media (prefers-reduced-motion:no-preference){.counter-character-track--roll-1{animation:var(--roll-1-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}.counter-character-track--roll-2{animation:var(--roll-2-animation) var(--transition-duration) ease-out calc(var(--index) * var(--stagger))}}.counter-character--symbol,.counter-digit{-webkit-text-fill-color:transparent;background:var(--fill,linear-gradient(currentColor, currentColor));background-clip:text}.counter-digit{height:1lh}@media (prefers-reduced-motion:reduce){.counter,.counter-character-track{transition:none}}@keyframes counter-blur-1{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}@keyframes counter-blur-2{0%,to{filter:blur()}20%{filter:blur(var(--blur))}}}
 /*$vite$:1*/

package/build/components/datalist/index.js

@@ -3,10 +3,10 @@ import { component, on } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
 import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
 import form from '../form/index.js';
-import scrollbar from '../../css-utilities/scrollbar/index.js';
+import scrollbar from '../../modifiers/scrollbar/index.js';
 import { observeSize } from '../../shared/resize.js';
 import './scss/index.scss';
-const template_0tf9kxv3 = template_u1.template(`<div class='datalist'><div class='datalist-lens' aria-hidden='true'></div><div class='datalist-scroller --scrollbar-hidden' role='listbox' tabindex='0'><div class='datalist-track'></div></div><input class='datalist-tag' />`);
+const template_0tf9kxv3 = template_u1.template(`<div class='datalist'><div class='datalist-lens' aria-hidden='true'></div><div class='datalist-scroller' role='listbox' tabindex='0'><div class='datalist-track'></div></div><input class='datalist-tag' />`);
 const template_0tf9kxva = template_u1.template(`<div class='datalist-option ' role='option'>`);
 class ReactiveObject_0tf9kxv0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
@@ -148,7 +148,7 @@ export default component(function ({ options, selected, state = new ReactiveObje
         template_u1.setProperty(element_0tf9kxv8, 'value', () => state.selected);
         template_u1.setProperties(element_0tf9kxv6, this?.attributes?.[DATALIST_SCROLLER]);
         template_u1.setProperties(element_0tf9kxv6, attributes[DATALIST_SCROLLER]);
-        template_u1.setProperties(element_0tf9kxv6, scrollbar.drag('vertical'));
+        template_u1.setProperties(element_0tf9kxv6, scrollbar({ drag: 'vertical', hidden: true }));
         template_u1.setProperties(element_0tf9kxv6, observeSize(measure));
         template_u1.setProperty(element_0tf9kxv6, 'aria-activedescendant', () => {
             let index = keys.indexOf(String(state.selected));

package/build/components/datalist/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.datalist-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.datalist{--background:transparent;--border-radius:var(--border-radius-700);--color:var(--color-text-500);--focus-color:var(--color-border-500);--focus-width:2px;--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--height:calc(var(--item-height) * 5);--item-height:40px;--opacity-falloff:.55;--padding:var(--size-200);--perspective:704px;--rotate:38deg;--scale:1.14;--scale-falloff:.34;--width:224px}.datalist-lens{--background:var(--color-border-300);--border-radius:var(--border-radius-600)}.datalist-option{--t:clamp(-1, calc((var(--index) - var(--offset,0)) / var(--half,2.5)), 1);--t-abs:max(var(--t), var(--t) * -1)}.datalist{background:var(--background);border-radius:var(--border-radius);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding);width:min(100%, var(--width));position:relative}.datalist-lens{top:50%;right:var(--padding);left:var(--padding);background:var(--background);border-radius:var(--border-radius);height:var(--item-height);pointer-events:none;position:absolute;translate:0 -50%}.datalist-option{cursor:pointer;font-variant-numeric:tabular-nums;height:var(--item-height);opacity:calc(1 - var(--opacity-falloff) * var(--t-abs));rotate:x calc(var(--rotate) * var(--t) * -1);scale:calc(var(--scale) - var(--scale-falloff) * var(--t-abs));scroll-snap-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}@supports (animation-timeline:view()){.datalist-option{animation:linear both datalist-drum;animation-timeline:view();animation-range:entry 50% exit 50%}}@media (prefers-reduced-motion:reduce){.datalist-option{opacity:1;animation:none;rotate:none;scale:none}}.datalist-scroller{border-radius:var(--border-radius);height:var(--height);overscroll-behavior:contain;perspective:var(--perspective);scroll-behavior:smooth;scroll-snap-type:y mandatory;position:relative;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%)}@media (prefers-reduced-motion:reduce){.datalist-scroller{scroll-behavior:auto}}.datalist-scroller:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.datalist-track{padding-block:calc((var(--height) - var(--item-height)) / 2)}@keyframes datalist-drum{0%,to{opacity:calc(1 - var(--opacity-falloff));scale:calc(var(--scale) - var(--scale-falloff))}0%{rotate:x calc(var(--rotate) * -1)}50%{opacity:1;rotate:x 0deg;scale:var(--scale)}to{rotate:x var(--rotate)}}}
+@layer components{.datalist-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.datalist-lens{--surface-background-active:light-dark(oklch(from var(--surface-background-default) calc(l + .01) c h),oklch(from var(--surface-background-default) calc(l + .02) c h));--surface-background-default:light-dark(oklch(from var(--color-surface) clamp(0, l + max(var(--surface-level), 0) * .01 + min(var(--surface-level), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(var(--surface-level), 0) * .01 + min(var(--surface-level), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(var(--surface-level), 0) * .02 + min(var(--surface-level), 0) * .02, l + .12) calc(c * clamp(0, l + max(var(--surface-level), 0) * .02 + min(var(--surface-level), 0) * .02, l + .12) / max(l, .01)) h));--surface-background-hover:light-dark(oklch(from var(--surface-background-default) calc(l + .005) c h),oklch(from var(--surface-background-default) calc(l + .01) c h));--surface-background-pressed:light-dark(oklch(from var(--surface-background-default) calc(l - .02) c h),oklch(from var(--surface-background-default) calc(l - .04) c h));--surface-border-active:light-dark(oklch(from var(--surface-background-active) max(0, l - .04) c h),oklch(from var(--surface-background-active) min(1, l + .06) c h));--surface-border-default:light-dark(oklch(from var(--surface-background-default) max(0, l - .04) c h),oklch(from var(--surface-background-default) min(1, l + .06) c h));--surface-border-hover:light-dark(oklch(from var(--surface-background-hover) max(0, l - .04) c h),oklch(from var(--surface-background-hover) min(1, l + .06) c h));--surface-border-pressed:light-dark(oklch(from var(--surface-background-pressed) max(0, l - .04) c h),oklch(from var(--surface-background-pressed) min(1, l + .06) c h));--surface-shadow-active:var(--surface-shadow-hover);--surface-shadow-color:light-dark(oklch(from var(--surface-background-default) calc(l * .24) calc(c * .24) h / .08),oklch(from var(--surface-background-default) calc(l * .24) calc(c * .24) h / .16));--surface-shadow-cast:light-dark(oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .08),oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .16));--surface-shadow-default:0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 0, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 5 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 1, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 9 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 25 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -7 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, var(--surface-shadow-weight) - 0, 1) + .05 * clamp(0, var(--surface-shadow-weight) - 2, 1) + .15 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -8 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -10 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -.1 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10));--surface-shadow-hover:0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 5 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 1, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 9 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 25 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -7 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + .15 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -8 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -.1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10));--surface-shadow-pressed:0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 5 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 1, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 9 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 25 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -7 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + .15 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -8 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -.1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10));--surface-shadow-weight:0}@container style(--surface-level:-2){.datalist-lens{--surface-level:-3}}@container style(--surface-level:-1){.datalist-lens{--surface-level:-2}}@container style(--surface-level:0){.datalist-lens{--surface-level:-1}}@container style(--surface-level:1){.datalist-lens{--surface-level:0}}@container style(--surface-level:2){.datalist-lens{--surface-level:1}}@container style(--surface-level:3){.datalist-lens{--surface-level:2}}@container style(--surface-level:4){.datalist-lens{--surface-level:3}}@container style(--surface-level:5){.datalist-lens{--surface-level:4}}@container style(--surface-level:6){.datalist-lens{--surface-level:5}}.datalist{--background:transparent;--border-radius:var(--border-radius-700);--color:var(--color-text-500);--focus-color:var(--surface-border-pressed);--focus-width:var(--border-width-500);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--height:calc(var(--item-height) * 5);--item-height:40px;--opacity-falloff:.55;--padding:var(--size-200);--perspective:704px;--rotate:38deg;--scale:1.14;--scale-falloff:.34;--width:224px}.datalist-lens{--background:var(--surface-background-default);--border-radius:var(--border-radius-600)}.datalist-option{--t:clamp(-1, calc((var(--index) - var(--offset,0)) / var(--half,2.5)), 1);--t-abs:max(var(--t), var(--t) * -1)}.datalist{background:var(--background);border-radius:var(--border-radius);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding);width:min(100%, var(--width));position:relative}.datalist-lens{background:var(--background);border-radius:var(--border-radius);height:var(--item-height);inset:50% var(--padding) auto;pointer-events:none;position:absolute;translate:0 -50%}.datalist-option{cursor:pointer;font-variant-numeric:tabular-nums;height:var(--item-height);opacity:calc(1 - var(--opacity-falloff) * var(--t-abs));rotate:x calc(var(--rotate) * var(--t) * -1);scale:calc(var(--scale) - var(--scale-falloff) * var(--t-abs));scroll-snap-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex}@supports (animation-timeline:view()){.datalist-option{animation:linear both datalist-drum;animation-timeline:view();animation-range:entry 50% exit 50%}}@media (prefers-reduced-motion:reduce){.datalist-option{opacity:1;animation:none;rotate:none;scale:none}}.datalist-scroller{border-radius:var(--border-radius);height:var(--height);overscroll-behavior:contain;perspective:var(--perspective);scroll-behavior:smooth;scroll-snap-type:y mandatory;position:relative;overflow-y:auto;mask-image:linear-gradient(#0000 0,#000 30% 70%,#0000 100%)}@media (prefers-reduced-motion:reduce){.datalist-scroller{scroll-behavior:auto}}.datalist-scroller:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.datalist-track{padding-block:calc((var(--height) - var(--item-height)) / 2)}@keyframes datalist-drum{0%,to{opacity:calc(1 - var(--opacity-falloff));scale:calc(var(--scale) - var(--scale-falloff))}0%{rotate:x calc(var(--rotate) * -1)}50%{opacity:1;rotate:x 0deg;scale:var(--scale)}to{rotate:x var(--rotate)}}}
 /*$vite$:1*/