@esportsplus/ui 0.57.0 → 0.58.0

package/build/components/button/sidebar.js

@@ -1,19 +1,49 @@
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
-const template_09lnm231 = template_u1.template(`<button class='button button-sidebar' type='button'><span aria-hidden='true' class='icon button-sidebar-icon'><svg class='button-sidebar-graphic' fill='none' focusable='false' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><defs><clipPath><rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' /></clipPath></defs><g class='button-sidebar-shadow'><path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' /><path d='M6.25 2.75v11' /></g><g><g class='button-sidebar-divider'><path fill='currentColor' stroke='none' d='M3.75 2.75h2.5v11h-2.5a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5Z' /><path d='M6.25 2.75v11' /></g></g><rect x='2.25' y='2.75' width='11.5' height='11' rx='1.5' />`);
-let uid = 0;
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+const template_09lnm232 = template_u1.template(`<button class='button button-sidebar' type='button'><span aria-hidden='true' class='icon button-sidebar-icon'><svg class='button-sidebar-graphic' fill='none' focusable='false' stroke='currentColor' stroke-width='1.5' viewBox='0 0 16 16'><path class='button-sidebar-panel' d='M5.5 5.5v5' stroke-linecap='round' /><rect x='2.25' y='2.25' width='11.5' height='11.5' rx='2.75' />`);
+class ReactiveObject_09lnm230 extends reactivity_u0.ReactiveObject {
+    #held = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get held() {
+        return reactivity_u0.read(this.#held);
+    }
+    set held(_v0) {
+        reactivity_u0.write(this.#held, _v0);
+    }
+}
 function read(value) {
     return typeof value === 'function' ? value() : value;
 }
 export default component(({ open, side = 'left', ...attributes }) => {
-    let clip = `button-sidebar-${++uid}`;
+    let state = new ReactiveObject_09lnm230();
     return (() => {
-        let root_09lnm230 = template_09lnm231(), element_09lnm232 = root_09lnm230.firstChild, element_09lnm233 = element_09lnm232.firstElementChild.firstElementChild.firstElementChild.firstElementChild, element_09lnm234 = element_09lnm232.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling;
-        template_u1.setProperty(element_09lnm234, 'clip-path', `url(#${clip})`);
-        template_u1.setProperty(element_09lnm233, 'id', clip);
-        template_u1.setProperties(element_09lnm232, attributes);
-        template_u1.setProperty(element_09lnm232, 'aria-expanded', () => String(read(open)));
-        template_u1.setList(element_09lnm232, 'class', () => read(side) === 'right' && 'button-sidebar--right');
-        return root_09lnm230;
+        let root_09lnm231 = template_09lnm232(), element_09lnm233 = root_09lnm231.firstChild;
+        template_u1.setProperties(element_09lnm233, attributes);
+        template_u1.setProperty(element_09lnm233, 'aria-expanded', () => String(read(open)));
+        template_u1.setList(element_09lnm233, 'class', () => `${read(side) === 'right' ? 'button-sidebar--right' : ''} ${state.held ? 'button-sidebar--held' : ''}`);
+        template_u1.onconnect(element_09lnm233, (element) => {
+            let current = read(open);
+            effect(() => {
+                let next = read(open);
+                if (next === current) {
+                    return;
+                }
+                current = next;
+                if (element.matches(':hover, :focus-visible')) {
+                    state.held = true;
+                }
+            });
+        });
+        template_u1.on(element_09lnm233, 'focusout', () => {
+            state.held = false;
+        });
+        template_u1.on(element_09lnm233, 'pointerleave', () => {
+            state.held = false;
+        });
+        return root_09lnm231;
     })();
 });

package/build/components/capslock/index.js

@@ -4,7 +4,7 @@ import { component } from '@esportsplus/template';
 import capsLock from '@esportsplus/ui/svg/caps-lock.svg';
 import '../button/scss/index.scss';
 import './scss/index.scss';
-const template_18k2iql2 = template_u1.template(`<div class='capslock text'><kbd aria-hidden='true' class='button button--kbd capslock-key'><span class='capslock-key-light'></span><svg class='capslock-key-icon'><use /></svg></kbd><span aria-hidden='true' class='capslock-text --flex-vertical'>Caps Lock On</span><span aria-live='polite' class='capslock-live --flex-vertical'>`);
+const template_18k2iql2 = template_u1.template(`<div class='capslock text'><kbd aria-hidden='true' class='button button--kbd capslock-key'><span class='capslock-key-light'></span><svg class='capslock-key-icon'><use /></svg></kbd><span aria-hidden='true' class='capslock-text'>Caps Lock On</span><span aria-live='polite' class='capslock-live'>`);
 class ReactiveObject_18k2iql0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
     constructor() {

package/build/components/capslock/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.capslock-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.capslock{--font-size:var(--font-size-300);--gap-horizontal:var(--size-200);--icon-height:10px;--icon-width:12px;--light-color:var(--color-border-400);--light-color-active:var(--color-green-400);--light-inset:3px;--light-shadow:none;--light-size:4px;--transition-duration:.15s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.capslock.--active{--light-color:var(--light-color-active);--light-shadow:0 0 4px 1px color-mix(in oklch, var(--light-color) 55%, transparent)}.capslock-key.button{--padding-horizontal:9px}.capslock{filter:blur(2px);opacity:0;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none}.capslock.--active{filter:none;opacity:1;transition-duration:.2s}.capslock:not(.--active){height:0}.capslock-key{pointer-events:none}.capslock-key-icon{height:var(--icon-height);width:var(--icon-width)}.capslock-key-light{background:var(--light-color);box-shadow:var(--light-shadow);height:var(--light-size);left:var(--light-inset);top:var(--light-inset);width:var(--light-size);border-radius:50%;transition:background-color .3s ease-out,box-shadow .3s ease-out;position:absolute}@media (prefers-reduced-motion:reduce){.capslock{transition-property:opacity}}}
+@layer components{.capslock-live,.capslock-text{--gap-horizontal:0px;--gap-vertical:0px;gap:var(--gap-vertical) var(--gap-horizontal);flex-flow:wrap;align-items:center;display:flex}.capslock-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.capslock{--font-size:var(--font-size-300);--gap-horizontal:var(--size-200);--icon-height:var(--size-200);--icon-width:12px;--light-color:var(--surface-border-hover);--light-color-active:var(--color-green-400);--light-inset:calc(var(--size-300) / 4);--light-shadow:none;--light-size:4px}.capslock.--active{--light-color:var(--light-color-active);--light-shadow:0 0 4px 1px color-mix(in oklch, var(--light-color) 55%, transparent)}.capslock-key.button{--padding-horizontal:9px}.capslock{filter:blur(var(--blur-300));opacity:0;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none}.capslock.--active{filter:none;opacity:1;transition-duration:var(--duration-moderate)}.capslock:not(.--active){height:0}.capslock-key{pointer-events:none}.capslock-key-icon{height:var(--icon-height);width:var(--icon-width)}.capslock-key-light{background:var(--light-color);box-shadow:var(--light-shadow);height:var(--light-size);left:var(--light-inset);top:var(--light-inset);transition:background-color var(--duration-moderate) var(--easing-out), box-shadow var(--duration-moderate) var(--easing-out);width:var(--light-size);border-radius:50%;position:absolute}@media (prefers-reduced-motion:reduce){.capslock{transition-property:opacity}}}
 /*$vite$:1*/

package/build/components/card/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.card:after{position:absolute;inset:0}.card{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.card{--background:var(--background-active)}.card:not(.--active):hover{--background:var(--background-hover)}.card:not(.--active):active{--background:var(--background-pressed)}.card{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.card{--border-color:var(--border-color-active)}.card:not(.--active):hover{--border-color:var(--border-color-hover)}.card:not(.--active):active{--border-color:var(--border-color-pressed)}.card:after{border-radius:inherit;pointer-events:none;box-shadow:var(--box-shadow);content:"";transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1}.card-expand{margin:0;padding:0;list-style:none}.card-expand-summary,.card-expand-title{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.card{--border-color-default:var(--background);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card--expand,.card-expand-dialog{--background-default:var(--surface-background);--border-radius:18px;--border-width:0px;--box-shadow-default:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h/.06), 0 1px 2px oklch(from var(--color-black-500) l c h/.06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h/.12)}.card--expand{--padding-horizontal:18px;--padding-vertical:16px;--pressed-scale:.96;--width:100%}.card--morph{--morph-blur:4px;--morph-duration:.3s;--morph-enter-duration:.25s;--morph-exit-duration:.18s;--morph-fade-duration:var(--transition-duration);--morph-fade-timing-function:var(--transition-timing-function);--morph-shift:48px;--morph-swap-timing-function:cubic-bezier(.23, 1, .32, 1);--morph-timing-function:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1)}@media (prefers-reduced-motion:reduce){.card--morph{--morph-blur:0px;--morph-duration:0s;--morph-shift:0px}}.card-expand{--dialog-backdrop:oklch(from var(--color-text-500) l c h / .15);--dialog-width:440px;--ease-out:cubic-bezier(.23, 1, .32, 1);--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--list-gap:12px;--max-width:400px;--muted-color:var(--color-text-300);--slot-background:oklch(from var(--color-text-500) l c h / .03);--slot-border-color:var(--color-border-300);--surface-background:var(--color-grey-400);--text-color:var(--color-text-500)}.card-expand-close{--background-hover:var(--color-white-300);--border-radius:999px;--border-width:0px;--color-default:var(--muted-color);--color-hover:var(--text-color);--padding-horizontal:0px;--padding-vertical:0px;--size:32px}.card-expand-dialog.overlay{--backdrop:var(--dialog-backdrop);--margin-horizontal:1rem;--max-width:var(--dialog-width);--padding:24px;--transition-duration:.2s;--transition-timing-function:var(--ease-out);--width:min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)))}.card-morph-layer.frame{--swap-blur:var(--morph-blur);--swap-duration:var(--morph-enter-duration);--swap-exit-duration:var(--morph-exit-duration);--swap-exit-fade-duration:var(--morph-exit-duration);--swap-fade-duration:var(--morph-enter-duration);--swap-fade-timing-function:var(--morph-swap-timing-function);--swap-shift:var(--morph-shift);--swap-timing-function:var(--morph-swap-timing-function)}.card.card--expand{color:inherit;cursor:pointer;font:inherit;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;flex-direction:column;align-items:flex-start;gap:6px;transition:scale .15s ease-out;display:flex}.card.card--expand:not(.--active):active{scale:var(--pressed-scale)}.card.card--expand:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.card-expand{color:var(--text-color);gap:var(--list-gap);max-width:100%;width:var(--max-width);flex-direction:column;display:flex}.card-expand-close{height:var(--size);width:var(--size);flex-shrink:0;margin:-8px -8px 0 0}.card-expand-close:not(.--active):active{scale:.96}.card-expand-close:before{border-radius:inherit;content:"";position:absolute;inset:-6px}.card-expand-close:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.card-expand-delayed{animation:var(--delayed-animation,none)}.card-expand-detail{color:var(--muted-color);text-wrap:pretty;margin:10px 0 0;font-size:15px;line-height:24px}.card-expand-dialog{overflow:visible}.card-expand-dialog.--active{--delayed-animation:card-expand-reveal .25s var(--ease-out) .25s backwards}.card-expand-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.card-expand-heading{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.card-expand-icon{width:18px;height:18px}.card-expand-item.--active>.card.card--expand{--background:var(--slot-background);--box-shadow:inset 0 0 0 var(--border-width-400) var(--slot-border-color);cursor:default;scale:1}.card-expand-item.--active>.card.card--expand>*{visibility:hidden}.card-expand-item--morphing>.card.card-expand-dialog,.card-expand-item--morphing>.card.card-expand-dialog::backdrop{transition:none}.card-expand-meta{color:var(--muted-color);font-variant-numeric:tabular-nums;view-transition-name:var(--meta-transition-name,none);flex-shrink:0;margin:0;font-size:13px}.card-expand-panel{border-radius:inherit;max-height:calc(100dvh - var(--margin-horizontal) * 2);padding:var(--padding);overflow:auto}.card-expand-row{justify-content:space-between;align-items:baseline;gap:16px;width:100%;display:flex}.card-expand-summary{color:var(--muted-color);view-transition-name:var(--summary-transition-name,none);margin:0;font-size:14px}.card-expand-summary--full{white-space:normal;margin-top:16px;font-size:15px;line-height:24px}.card-expand-title{color:var(--text-color);view-transition-name:var(--title-transition-name,none);margin:0;font-size:15px;font-weight:500}@media (prefers-reduced-motion:no-preference){.card-expand-item:not(.--active)>.card.card--expand.card--morphing,.card-expand-item--morphing>.card.card-expand-dialog.--active{--meta-transition-name:card-expand-meta;--summary-transition-name:card-expand-summary;--title-transition-name:card-expand-title;view-transition-name:card-expand}}@media (prefers-reduced-motion:reduce){.card-expand-close{transition:none}.card-expand-delayed{animation:none}.card.card--expand{transition:none}}::view-transition-group(card-expand){animation-duration:.35s;animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-meta){animation-duration:.35s;animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-summary){animation-duration:.35s;animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-title){animation-duration:.35s;animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand){box-shadow:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h/.06), 0 1px 2px oklch(from var(--color-black-500) l c h/.06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h/.12);border-radius:18px;overflow:clip}::view-transition-new(card-expand){inline-size:auto}::view-transition-new(card-expand-meta){inline-size:auto}::view-transition-new(card-expand-summary){inline-size:auto}::view-transition-new(card-expand-title){inline-size:auto}::view-transition-old(card-expand){inline-size:auto}::view-transition-old(card-expand-meta){inline-size:auto}::view-transition-old(card-expand-summary){inline-size:auto}::view-transition-old(card-expand-title){inline-size:auto}@keyframes card-expand-reveal{0%{filter:blur(4px);opacity:0;translate:0 4px}}.frame{--gap-horizontal:0px;--gap-vertical:0px;--n:0;--opacity:.4;--swap-blur:2px;--swap-duration:.32s;--swap-exit-duration:var(--swap-duration);--swap-exit-fade-duration:var(--swap-fade-duration);--swap-fade-duration:.16s;--swap-fade-timing-function:linear;--swap-shift:60%;--swap-timing-function:cubic-bezier(.22, 1, .36, 1);--transition-duration:.32s;--transition-timing-function:cubic-bezier(.22, 1, .36, 1)}@media (prefers-reduced-motion:reduce){.frame{--swap-blur:0px;--swap-shift:0%}}.frame--scroll,.frame--slide,.frame--swap{grid-area:1/1;min-width:0}.frame--scroll:not(.--active),.frame--slide:not(.--active),.frame--swap:not(.--active){pointer-events:none}.frame--scroll,.frame--slide{transition:translate var(--transition-duration) var(--transition-timing-function)}.frame--scroll:not(.--active),.frame--slide:not(.--active){opacity:var(--opacity)}.frame--scroll{translate:0 calc((var(--n) - var(--i,0)) * (100% + var(--gap-vertical)))}.frame--slide{translate:calc((var(--n) - var(--i,0)) * (100% + var(--gap-horizontal))) 0}.frame--swap{--shift:var(--swap-shift);--travel-x:clamp(-1, var(--n) - var(--i,0), 1);--travel-y:0;transition:filter var(--swap-exit-duration) var(--swap-timing-function), opacity var(--swap-exit-fade-duration) var(--swap-fade-timing-function), translate var(--swap-exit-duration) var(--swap-timing-function), visibility var(--swap-exit-fade-duration) linear;translate:calc(var(--shift) * var(--travel-x)) calc(var(--shift) * var(--travel-y))}.frame--swap.--active{--shift:0px;transition:filter var(--swap-duration) var(--swap-timing-function), opacity var(--swap-fade-duration) var(--swap-fade-timing-function), translate var(--swap-duration) var(--swap-timing-function), visibility var(--swap-fade-duration) linear}.frame--swap:not(.--active){filter:blur(var(--swap-blur));opacity:0;visibility:hidden}.frame--swap.frame--leaving{--shift:calc(var(--swap-shift) * -1)}@media (prefers-reduced-motion:reduce){.frame--scroll,.frame--slide{transition:none}}.frame:not(.frame--scroll,.frame--slide,.frame--swap):not(.--active){display:none}@supports selector(::-webkit-scrollbar){:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving).--scrollbar::-webkit-scrollbar-thumb{background:0 0}:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving) .--scrollbar::-webkit-scrollbar-thumb{background:0 0}}@supports not selector(::-webkit-scrollbar){:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving).--scrollbar,:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving) .--scrollbar{scrollbar-color:transparent transparent}}:where(:has(>.frame--scroll,>.frame--slide,>.frame--swap)){display:grid}.card{background:var(--background);border-radius:var(--border-radius);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline: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), max-height 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);position:relative}.card--morph{height:var(--morph-height,auto);transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-radius var(--morph-duration) var(--morph-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), height var(--morph-duration) var(--morph-timing-function), opacity var(--morph-fade-duration) var(--morph-fade-timing-function), transform var(--morph-fade-duration) var(--morph-fade-timing-function), translate var(--morph-duration) var(--morph-timing-function), width var(--morph-duration) var(--morph-timing-function);width:var(--morph-width,var(--width));padding:0}.card--morph.card--instant,.card--morph.card--instant>.card-morph-viewport>.card-morph-layer{transition:none}.card-morph-layer{padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);width:max-content;position:absolute;top:0;left:0}.card-morph-viewport{border-radius:inherit;width:100%;height:100%;position:relative;overflow:clip}}
+@layer components{.card{--surface-shadow-weight:6}.card,.card-expand-item.--active>.card.card--expand{--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))}.card-expand-item.--active>.card.card--expand{--surface-shadow-weight:0}@container style(--surface-level:-3){.card{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.card{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.card{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.card{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.card{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.card{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.card{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.card{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.card{--surface-level:6;--surface-shadow-weight:6}}@container style(--surface-level:-2){.card-expand-item.--active>.card.card--expand{--surface-level:-3}}@container style(--surface-level:-1){.card-expand-item.--active>.card.card--expand{--surface-level:-2}}@container style(--surface-level:0){.card-expand-item.--active>.card.card--expand{--surface-level:-1}}@container style(--surface-level:1){.card-expand-item.--active>.card.card--expand{--surface-level:0}}@container style(--surface-level:2){.card-expand-item.--active>.card.card--expand{--surface-level:1}}@container style(--surface-level:3){.card-expand-item.--active>.card.card--expand{--surface-level:2}}@container style(--surface-level:4){.card-expand-item.--active>.card.card--expand{--surface-level:3}}@container style(--surface-level:5){.card-expand-item.--active>.card.card--expand{--surface-level:4}}@container style(--surface-level:6){.card-expand-item.--active>.card.card--expand{--surface-level:5}}.card{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.card{--background:var(--background-active)}.card:not(.--active):hover{--background:var(--background-hover)}.card:not(.--active):active{--background:var(--background-pressed)}.card{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.card{--border-color:var(--border-color-active)}.card:not(.--active):hover{--border-color:var(--border-color-hover)}.card:not(.--active):active{--border-color:var(--border-color-pressed)}.card--ring,.card{--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.card--ring,.--active.card{--box-shadow:var(--box-shadow-active)}.card--ring:not(.--active):hover,.card:not(.--active):hover{--box-shadow:var(--box-shadow-hover)}.card--ring:not(.--active):active,.card:not(.--active):active{--box-shadow:var(--box-shadow-pressed)}.card--ring{box-shadow:0 0 0 var(--box-shadow-width) var(--box-shadow);--box-shadow-width:var(--border-width-700)}.card:after{border-radius:inherit;pointer-events:none;box-shadow:var(--box-shadow);content:"";transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}.card-expand{margin:0;padding:0;list-style:none}.card-expand-summary,.card-expand-title{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}}.card{--background-default:var(--surface-background-default);--border-color-default:var(--background);--border-width:0px;--box-shadow-default:var(--surface-shadow-default);--width:auto}.card--expand{--padding-horizontal:18px;--padding-vertical:var(--size-400);--width:100%}.card--expand,.card-expand-dialog{--background-default:var(--expand-background);--border-radius:18px;--border-width:0px;--box-shadow-default:var(--surface-shadow-default)}.card--morph{--morph-blur:var(--blur-400);--morph-duration:var(--duration-moderate);--morph-enter-duration:var(--duration-moderate);--morph-exit-duration:.18s;--morph-fade-duration:var(--transition-duration);--morph-fade-timing-function:var(--transition-timing-function);--morph-shift:48px;--morph-swap-timing-function:var(--easing-out);--morph-timing-function:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1)}@media (prefers-reduced-motion:reduce){.card--morph{--morph-blur:0px;--morph-duration:0s;--morph-shift:0px}}.card--ring{--box-shadow-active:var(--surface-border-active);--box-shadow-default:transparent;--box-shadow-hover:var(--surface-border-hover);--box-shadow-pressed:var(--surface-shadow-pressed)}.card-expand{--dialog-backdrop:oklch(from var(--surface-shadow-color) 0 0 0 / calc(alpha + .06));--dialog-width:440px;--ease-out:var(--easing-out);--expand-background:var(--surface-background-default);--focus-ring-color:var(--surface-border-pressed);--list-gap:12px;--max-width:400px;--muted-color:var(--color-text-300);--slot-border-color:var(--surface-border-default);--text-color:var(--color-text-500)}.card-expand-close{--background-hover:var(--surface-background-hover);--border-radius:999px;--border-width:0px;--color-default:var(--muted-color);--color-hover:var(--text-color);--padding-horizontal:0px;--padding-vertical:0px;--size:32px}.card-expand-dialog.overlay{--backdrop:var(--dialog-backdrop);--margin-horizontal:1rem;--max-width:var(--dialog-width);--padding:24px;--width:min(var(--max-width), calc(100% - (var(--margin-horizontal) * 2)))}.card-morph-layer.frame{--swap-blur:var(--morph-blur);--swap-duration:var(--morph-enter-duration);--swap-exit-duration:var(--morph-exit-duration);--swap-exit-fade-duration:var(--morph-exit-duration);--swap-fade-duration:var(--morph-enter-duration);--swap-fade-timing-function:var(--morph-swap-timing-function);--swap-shift:var(--morph-shift);--swap-timing-function:var(--morph-swap-timing-function)}.card-expand{color:var(--text-color);gap:var(--list-gap);max-width:100%;width:var(--max-width);flex-direction:column;display:flex}.card-expand-close{height:var(--size);margin:calc(var(--size-100) * -1) calc(var(--size-100) * -1) 0 0;width:var(--size);flex-shrink:0}.card-expand-close:before{border-radius:inherit;content:"";inset:calc(var(--size-300) / -2);position:absolute}.card-expand-close:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:calc(var(--size-100) / 4)}.card-expand-delayed{animation:var(--delayed-animation,none)}.card-expand-detail{color:var(--muted-color);font-size:var(--font-size-400);margin:var(--size-200) 0 0;text-wrap:pretty;line-height:24px}.card-expand-dialog{overflow:visible}.card-expand-dialog.--active{--delayed-animation:card-expand-reveal .25s var(--ease-out) .25s backwards}.card-expand-header{align-items:flex-start;gap:var(--size-400);justify-content:space-between;display:flex}.card-expand-heading{align-items:flex-start;gap:calc(var(--size-100) / 2);flex-direction:column;display:flex}.card-expand-icon{width:18px;height:18px}.card-expand-item--morphing>.card.card-expand-dialog,.card-expand-item--morphing>.card.card-expand-dialog::backdrop{transition:none}.card-expand-item.--active>.card.card--expand{--background-default:var(--surface-background-default);--box-shadow-default:inset 0 0 0 var(--border-width-400) var(--slot-border-color);cursor:default;scale:1}.card-expand-item.--active>.card.card--expand>*{visibility:hidden}.card-expand-meta{color:var(--muted-color);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;view-transition-name:var(--meta-transition-name,none);flex-shrink:0;margin:0}.card-expand-panel{border-radius:inherit;max-height:calc(100dvh - var(--margin-horizontal) * 2);padding:var(--padding);overflow:auto}.card-expand-row{align-items:baseline;gap:var(--size-400);justify-content:space-between;width:100%;display:flex}.card-expand-summary{color:var(--muted-color);font-size:var(--font-size-300);view-transition-name:var(--summary-transition-name,none);margin:0}.card-expand-summary--full{font-size:var(--font-size-400);margin-top:var(--size-400);white-space:normal;line-height:24px}.card-expand-title{color:var(--text-color);font-size:var(--font-size-400);font-weight:var(--font-weight-500);view-transition-name:var(--title-transition-name,none);margin:0}@media (prefers-reduced-motion:no-preference){.card-expand-item:not(.--active)>.card.card--expand.card--morphing,.card-expand-item--morphing>.card.card-expand-dialog.--active{--meta-transition-name:card-expand-meta;--summary-transition-name:card-expand-summary;--title-transition-name:card-expand-title;view-transition-name:card-expand}}@media (prefers-reduced-motion:reduce){.card-expand-close{transition:none}.card-expand-delayed{animation:none}}.card.card--expand{color:inherit;cursor:pointer;font:inherit;align-items:flex-start;gap:calc(var(--size-300) / 2);text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;flex-direction:column;display:flex}.card.card--expand:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:calc(var(--size-100) / 4)}@media (prefers-reduced-motion:reduce){.card.card--expand{transition:none}}::view-transition-group(card-expand){box-shadow:0 0 0 var(--border-width-400) oklch(from var(--color-black-300) l c h/.06), 0 2px 3px -2px oklch(from var(--color-black-300) l c h/.07), 0 4px 12px -4px oklch(from var(--color-black-300) l c h/.06);border-radius:18px;overflow:clip}::view-transition-group(card-expand){animation-duration:var(--duration-slow);animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-meta){animation-duration:var(--duration-slow);animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-summary){animation-duration:var(--duration-slow);animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-group(card-expand-title){animation-duration:var(--duration-slow);animation-timing-function:linear(0, .0575, .1803, .3208, .4551, .5729, .6711, .7501, .8122, .8601, .8966, .924, .9445, .9596, .9708, .9789, .9848, .9891, .9922, .9944, .996, .9972, .998, .9986, 1)}::view-transition-new(card-expand){inline-size:auto}::view-transition-new(card-expand-meta){inline-size:auto}::view-transition-new(card-expand-summary){inline-size:auto}::view-transition-new(card-expand-title){inline-size:auto}::view-transition-old(card-expand){inline-size:auto}::view-transition-old(card-expand-meta){inline-size:auto}::view-transition-old(card-expand-summary){inline-size:auto}::view-transition-old(card-expand-title){inline-size:auto}@keyframes card-expand-reveal{0%{filter:blur(var(--blur-400));opacity:0;translate:0 4px}}.frame{--gap-horizontal:0px;--gap-vertical:0px;--n:0;--opacity:.4;--swap-blur:var(--blur-300);--swap-duration:var(--duration-moderate);--swap-exit-duration:var(--duration-moderate-exit);--swap-exit-fade-duration:var(--duration-fast-exit);--swap-fade-duration:var(--duration-fast);--swap-fade-timing-function:linear;--swap-shift:60%;--swap-timing-function:var(--easing-spring);--transition-duration:var(--duration-moderate);--transition-timing-function:var(--easing-spring)}@media (prefers-reduced-motion:reduce){.frame{--swap-blur:0px;--swap-shift:0%}}.frame--scroll{translate:0 calc((var(--n) - var(--i,0)) * (100% + var(--gap-vertical)))}.frame--scroll,.frame--slide{transition:translate var(--transition-duration) var(--transition-timing-function)}.frame--scroll:not(.--active),.frame--slide:not(.--active){opacity:var(--opacity)}.frame--scroll,.frame--slide,.frame--swap{grid-area:1/1;min-width:0}.frame--scroll:not(.--active),.frame--slide:not(.--active),.frame--swap:not(.--active){pointer-events:none}.frame--slide{translate:calc((var(--n) - var(--i,0)) * (100% + var(--gap-horizontal))) 0}.frame--swap{--shift:var(--swap-shift);--travel-x:clamp(-1, var(--n) - var(--i,0), 1);--travel-y:0;transition:filter var(--swap-exit-duration) var(--swap-timing-function), opacity var(--swap-exit-fade-duration) var(--swap-fade-timing-function), translate var(--swap-exit-duration) var(--swap-timing-function), visibility var(--swap-exit-fade-duration) linear;translate:calc(var(--shift) * var(--travel-x)) calc(var(--shift) * var(--travel-y))}.frame--swap.--active{--shift:0px;transition:filter var(--swap-duration) var(--swap-timing-function), opacity var(--swap-fade-duration) var(--swap-fade-timing-function), translate var(--swap-duration) var(--swap-timing-function), visibility var(--swap-fade-duration) linear}.frame--swap:not(.--active){filter:blur(var(--swap-blur));opacity:0;visibility:hidden}.frame--swap.frame--leaving{--shift:calc(var(--swap-shift) * -1)}@media (prefers-reduced-motion:reduce){.frame--scroll,.frame--slide{transition:none}}.frame:not(.frame--scroll,.frame--slide,.frame--swap):not(.--active){display:none}@supports selector(::-webkit-scrollbar){:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving).--scrollbar::-webkit-scrollbar-thumb{background:0 0}:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving) .--scrollbar::-webkit-scrollbar-thumb{background:0 0}}@supports not selector(::-webkit-scrollbar){:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving).--scrollbar,:is(.frame--scroll,.frame--slide,.frame--swap):is(:not(.--active),.frame--moving) .--scrollbar{scrollbar-color:transparent transparent}}:where(:has(>.frame--scroll,>.frame--slide,>.frame--swap)){display:grid}.card{background:var(--background);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline: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), max-height 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);position:relative}.card--morph{height:var(--morph-height,auto);transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-radius var(--morph-duration) var(--morph-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), height var(--morph-duration) var(--morph-timing-function), opacity var(--morph-fade-duration) var(--morph-fade-timing-function), transform var(--morph-fade-duration) var(--morph-fade-timing-function), translate var(--morph-duration) var(--morph-timing-function), width var(--morph-duration) var(--morph-timing-function);width:var(--morph-width,var(--width));padding:0}.card--morph.card--instant,.card--morph.card--instant>.card-morph-viewport>.card-morph-layer{transition:none}.card--ring{box-shadow:0 0 0 var(--box-shadow-width) var(--box-shadow)}.card--ring:focus-visible{--box-shadow:var(--box-shadow-hover)}.card-morph-layer{padding-block:var(--padding-vertical);padding-inline:var(--padding-horizontal);width:max-content;position:absolute;top:0;left:0}.card-morph-viewport{border-radius:inherit;width:100%;height:100%;position:relative;overflow:clip}}
 /*$vite$:1*/

package/build/components/cc/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.cc-face{position:absolute;inset:0}.cc-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.cc-brand-mark{filter:blur(4px);opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.cc-brand-mark{transition:none}}.cc-brand-mark.--active{filter:blur();opacity:1;scale:1}.cc-error,.cc-holder-value{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.cc{--card-background:var(--color-text-500);--card-border-radius:var(--border-radius-700);--card-color:var(--color-white-300);--card-number-font-size:clamp(16px, 5.2vw, 21px);--card-shadow:var(--box-shadow-300);--color:var(--color-text-500);--digit-duration:.15s;--error-color:var(--color-red-400);--field-background:var(--color-white-300);--field-border-color:var(--color-border-300);--field-border-radius:var(--border-radius-600);--field-font-size:15px;--field-height:44px;--flip-duration:.764s;--flip-timing-function:linear(0, .031, .108, .205, .315, .421, .524, .614, .695, .762, .82, .865, .903, .931, .954, .97, .982, .991, .997, 1.001, 1.004, 1.005, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.002, 1);--icon-swap-duration:var(--swap-duration);--icon-swap-timing-function:var(--spring);--label-font-size:var(--font-size-300);--label-font-weight:var(--font-weight-500);--muted-color:var(--color-text-300);--outline-color:var(--color-text-500);--ring-duration:.3s;--spring:linear(0, .035, .118, .216, .319, .424, .515, .6, .669, .728, .781, .822, .856, .885, .908, .927, .942, .954, .964, .971, .977, .982, .986, .989, .991, .993, .995, .996, .997, .997, 1);--submit-background:var(--color-text-500);--submit-color:var(--color-white-300);--swap-duration:.3s;--width:min(400px, 100%)}@media (prefers-reduced-motion:reduce){.cc{--ring-duration:0s}}.cc-field.input{--background-default:var(--field-background);--border-color-active:var(--field-border-color);--border-color-default:var(--field-border-color);--border-color-hover:var(--field-border-color);--border-color-pressed:var(--field-border-color);--border-radius:var(--field-border-radius);--border-width:var(--border-width-400);--color-default:currentColor;--padding-horizontal:14px}.cc-field.input[aria-invalid=true]{--field-border-color:var(--error-color);--outline-color:var(--error-color)}.cc-submit.button{--background-default:var(--submit-background);--border-radius:var(--field-border-radius);--color-default:var(--submit-color);--face-duration:var(--swap-duration);--face-gap:8px;--face-timing-function:var(--spring);--font-size:var(--field-font-size);--font-weight:var(--font-weight-500);--icon-size:16px;--padding-horizontal:20px;--padding-vertical:0px}.cc{color:var(--color);width:var(--width);flex-direction:column;gap:20px;display:flex}.cc-actions{flex-direction:column;gap:10px;display:flex}.cc-brand{grid-template:100%/100%;display:grid}.cc-brand--large{width:48px;height:32px}.cc-brand--small{width:36px;height:24px}.cc-brand-icon{width:100%;height:100%;display:block}.cc-brand-mark{grid-area:1/1;width:100%;height:100%}.cc-caption{letter-spacing:.025em;opacity:.6;text-transform:uppercase;font-size:12px}.cc-card{height:100%;transform-style:preserve-3d;transition:transform var(--flip-duration) var(--flip-timing-function);width:100%;position:relative}.cc-card--flipped{transform:rotateY(180deg)}.cc-chip{width:44px;height:32px}.cc-control{position:relative}.cc-control-brand{color:var(--muted-color);pointer-events:none;transition:color var(--transition-duration) var(--transition-timing-function);display:flex;position:absolute;top:50%;right:12px;translate:0 -50%}.cc-control-brand--known{color:var(--color)}.cc-digit{display:inline-block}.cc-digit--gap{margin-inline-start:.6em}.cc-digit--placeholder{opacity:.45}.cc-digit--roll-1{animation:cc-digit-1 var(--digit-duration) ease-out}.cc-digit--roll-2{animation:cc-digit-2 var(--digit-duration) ease-out}.cc-disclaimer{opacity:.6;margin:auto 0 0;padding:0 24px 20px;font-size:12px}.cc-error{color:var(--error-color);font-size:13px;transition:filter .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1),translate .2s cubic-bezier(.23,1,.32,1)}@starting-style{.cc-error{filter:blur(4px);opacity:0;translate:0 2px}}.cc-expires{flex-direction:column;flex-shrink:0;gap:4px;display:flex}.cc-expires-value{font-family:var(--font-family-mono);font-size:15px;font-weight:var(--font-weight-500)}.cc-face{backface-visibility:hidden;background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);color:var(--card-color);flex-direction:column;transition:opacity .2s ease-out;display:flex;overflow:hidden}.cc-face--back{transform:rotateY(180deg)}.cc-face--front{justify-content:space-between;padding:24px}.cc-face-bottom{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.cc-face-top{justify-content:space-between;align-items:flex-start;display:flex}.cc-field--cvc,.cc-field--expiry,.cc-field--number{font-family:var(--font-family-mono)}.cc-field--number.input{padding-inline-end:64px}.cc-field.input{font-size:var(--field-font-size);font-variant-numeric:tabular-nums;height:var(--field-height);outline:none;min-height:0;padding-block:0;transition:border-color .15s ease-out}.cc-field.input:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:-1px}.cc-field.input::placeholder{color:oklch(from var(--muted-color) l c h/.7)}.cc-fields{flex-direction:column;gap:16px;display:flex}.cc-holder{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.cc-holder-value{font-size:15px;font-weight:var(--font-weight-500);text-transform:uppercase}.cc-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);-webkit-user-select:none;user-select:none}.cc-note{color:var(--muted-color);justify-content:center;align-items:center;gap:6px;margin:0;font-size:13px;display:flex}.cc-note-icon{flex-shrink:0;width:14px;height:14px}.cc-number{font-family:var(--font-family-mono);font-size:var(--card-number-font-size);letter-spacing:.025em;white-space:nowrap;align-self:flex-start}.cc-preview{aspect-ratio:1.586;perspective:1200px;-webkit-user-select:none;user-select:none;width:100%;position:relative}.cc-ring{border:1px solid oklch(from var(--card-color) l c h/.35);border-radius:var(--border-radius-400);opacity:0;pointer-events:none;transition:height var(--ring-duration) var(--spring), left var(--ring-duration) var(--spring), opacity .12s ease-out, top var(--ring-duration) var(--spring), width var(--ring-duration) var(--spring);position:absolute;top:0;left:0}.cc-ring.--active{opacity:1;transition:height var(--ring-duration) var(--spring), left var(--ring-duration) var(--spring), opacity .2s ease-out, top var(--ring-duration) var(--spring), width var(--ring-duration) var(--spring)}.cc-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.cc-shell{flex-direction:column;gap:8px;min-width:0;display:flex}.cc-shell-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.cc-signature{align-items:center;gap:12px;padding:20px 24px 0;display:flex}.cc-signature-value{background:var(--card-color);border-radius:var(--border-radius-300);color:var(--card-background);font-family:var(--font-family-mono);flex:1;justify-content:flex-end;align-items:center;height:40px;padding-inline:12px;font-size:15px;font-style:italic;display:flex}.cc-stripe{background:oklch(from var(--card-color) l c h/.15);height:44px;margin-top:24px}.cc-submit.button{height:var(--field-height);border:0;outline:none;transition:scale .15s ease-out}.cc-submit.button:active{scale:.96}.cc-submit.button:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:2px}@keyframes cc-digit-1{0%{filter:blur(2px);opacity:0;translate:0 -4px}}@keyframes cc-digit-2{0%{filter:blur(2px);opacity:0;translate:0 -4px}}@media (prefers-reduced-motion:reduce){.cc-card--flipped{--face-back-opacity:1;--face-front-opacity:0;transform:none}.cc-digit--roll-1,.cc-digit--roll-2{animation-name:cc-fade}@starting-style{.cc-error{filter:none;translate:0}}.cc-face--back{opacity:var(--face-back-opacity,0);transform:none}.cc-face--front{opacity:var(--face-front-opacity,1)}.cc-submit.button:active{scale:1}}@keyframes cc-fade{0%{opacity:0}}}
+@layer components{.cc-face{position:absolute;inset:0}@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")}.cc-expires-value,.cc-field--cvc,.cc-field--expiry,.cc-field--number,.cc-number,.cc-signature-value{--font-weight-300:300;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-family:"Geist Mono", monospace}.cc-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.cc-brand-mark{filter:blur(var(--blur-400));opacity:0;transition:filter var(--icon-swap-duration) var(--icon-swap-timing-function), opacity var(--icon-swap-duration) var(--icon-swap-timing-function), scale var(--icon-swap-duration) var(--icon-swap-timing-function);scale:.25}@media (prefers-reduced-motion:reduce){.cc-brand-mark{transition:none}}.cc-brand-mark.--active{filter:blur();opacity:1;scale:1}.cc-face{--surface-shadow-weight:6;--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))}@container style(--surface-level:-3){.cc-face{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.cc-face{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.cc-face{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.cc-face{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.cc-face{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.cc-face{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.cc-face{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.cc-face{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.cc-face{--surface-level:6;--surface-shadow-weight:6}}.cc-error,.cc-holder-value{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}}.cc{--card-background:var(--color-black-300);--card-border-radius:var(--border-radius-700);--card-color:var(--color-white-300);--card-number-font-size:clamp(16px, 5.2vw, 21px);--color:var(--color-text-500);--digit-duration:var(--duration-fast);--error-color:var(--color-red-400);--field-border-color:var(--surface-border-default);--field-border-radius:var(--border-radius-600);--field-font-size:var(--font-size-400);--field-height:44px;--flip-duration:.764s;--flip-timing-function:linear(0, .031, .108, .205, .315, .421, .524, .614, .695, .762, .82, .865, .903, .931, .954, .97, .982, .991, .997, 1.001, 1.004, 1.005, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.002, 1);--icon-swap-duration:var(--swap-duration);--icon-swap-timing-function:var(--spring);--label-font-size:var(--font-size-300);--label-font-weight:var(--font-weight-500);--muted-color:var(--color-text-300);--outline-color:var(--color-primary-500);--ring-duration:var(--duration-moderate);--spring:linear(0, .035, .118, .216, .319, .424, .515, .6, .669, .728, .781, .822, .856, .885, .908, .927, .942, .954, .964, .971, .977, .982, .986, .989, .991, .993, .995, .996, .997, .997, 1);--submit-background:var(--color-primary-500);--submit-color:var(--color-surface);--swap-duration:var(--duration-moderate);--width:min(400px, 100%)}@media (prefers-reduced-motion:reduce){.cc{--ring-duration:0s}}.cc-field.input{--background-default:var(--field-background);--border-color-active:var(--field-border-color);--border-color-default:var(--field-border-color);--border-color-hover:var(--field-border-color);--border-color-pressed:var(--field-border-color);--border-radius:var(--field-border-radius);--border-width:var(--border-width-400);--color-default:currentColor;--padding-horizontal:14px}.cc-field.input[aria-invalid=true]{--field-border-color:var(--error-color);--outline-color:var(--error-color)}.cc-submit.button{--background-default:var(--submit-background);--border-radius:var(--field-border-radius);--color-default:var(--submit-color);--face-duration:var(--swap-duration);--face-gap:var(--size-100);--face-timing-function:var(--spring);--font-size:var(--field-font-size);--font-weight:var(--font-weight-500);--icon-size:var(--size-400);--padding-horizontal:var(--size-500);--padding-vertical:0px}.cc{color:var(--color);gap:var(--size-500);width:var(--width);flex-direction:column;display:flex}.cc-actions{gap:var(--size-200);flex-direction:column;display:flex}.cc-brand{grid-template:100%/100%;display:grid}.cc-brand--large{width:48px;height:32px}.cc-brand--small{width:36px;height:24px}.cc-brand-icon{width:100%;height:100%;display:block}.cc-brand-mark{grid-area:1/1;width:100%;height:100%}.cc-caption{font-size:var(--font-size-300);opacity:.6;text-transform:uppercase}.cc-card{height:100%;transform-style:preserve-3d;transition:transform var(--flip-duration) var(--flip-timing-function);width:100%;position:relative}.cc-card--flipped{transform:rotateY(180deg)}.cc-chip{width:44px;height:32px}.cc-control{position:relative}.cc-control-brand{color:var(--muted-color);pointer-events:none;transition:color var(--transition-duration) var(--transition-timing-function);display:flex;position:absolute;top:50%;right:12px;translate:0 -50%}.cc-control-brand--known{color:var(--color)}.cc-digit{display:inline-block}.cc-digit--gap{margin-inline-start:.6em}.cc-digit--placeholder{opacity:.45}.cc-digit--roll-1{animation:cc-digit-1 var(--digit-duration) var(--easing-out)}.cc-digit--roll-2{animation:cc-digit-2 var(--digit-duration) var(--easing-out)}.cc-disclaimer{font-size:var(--font-size-300);opacity:.6;padding:0 24px var(--size-500);margin:auto 0 0}.cc-error{color:var(--error-color);font-size:var(--font-size-300);transition:filter var(--duration-fast) var(--easing-spring), opacity var(--duration-fast) var(--easing-spring), translate var(--duration-fast) var(--easing-spring)}@starting-style{.cc-error{filter:blur(var(--blur-400));opacity:0;translate:0 2px}}.cc-expires{gap:calc(var(--size-100) / 2);flex-direction:column;flex-shrink:0;display:flex}.cc-expires-value{font-family:var(--font-family);font-size:var(--font-size-400);font-weight:var(--font-weight-500)}.cc-face{backface-visibility:hidden;background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--surface-shadow-default);color:var(--card-color);transition:opacity var(--duration-moderate) var(--easing-out);flex-direction:column;display:flex;overflow:hidden}.cc-face--back{transform:rotateY(180deg)}.cc-face--front{justify-content:space-between;padding:24px}.cc-face-bottom{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.cc-face-top{justify-content:space-between;align-items:flex-start;display:flex}.cc-field--cvc,.cc-field--expiry,.cc-field--number{font-family:var(--font-family)}.cc-field--number.input{padding-inline-end:64px}.cc-field.input{font-size:var(--field-font-size);font-variant-numeric:tabular-nums;height:var(--field-height);min-height:0;transition:border-color var(--duration-fast) var(--easing-spring);outline:none;padding-block:0}.cc-field.input::placeholder{color:oklch(from var(--muted-color) l c h/.7)}.cc-field.input:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:-1px}.cc-fields{gap:var(--size-400);flex-direction:column;display:flex}.cc-holder{gap:calc(var(--size-100) / 2);flex-direction:column;flex:1;min-width:0;display:flex}.cc-holder-value{font-size:var(--font-size-400);font-weight:var(--font-weight-500);text-transform:uppercase}.cc-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);-webkit-user-select:none;user-select:none}.cc-note{color:var(--muted-color);font-size:var(--font-size-300);align-items:center;gap:calc(var(--size-300) / 2);justify-content:center;margin:0;display:flex}.cc-note-icon{flex-shrink:0;width:14px;height:14px}.cc-number{font-family:var(--font-family);font-size:var(--card-number-font-size);white-space:nowrap;align-self:flex-start}.cc-preview{aspect-ratio:1.586;perspective:1200px;-webkit-user-select:none;user-select:none;width:100%;position:relative}.cc-ring{border:1px solid oklch(from var(--card-color) l c h/.35);border-radius:var(--border-radius-400);opacity:0;pointer-events:none;transition:height var(--ring-duration) var(--spring), left var(--ring-duration) var(--spring), opacity var(--duration-fast) var(--easing-out), top var(--ring-duration) var(--spring), width var(--ring-duration) var(--spring);position:absolute;top:0;left:0}.cc-ring.--active{opacity:1;transition:height var(--ring-duration) var(--spring), left var(--ring-duration) var(--spring), opacity var(--duration-moderate) var(--easing-out), top var(--ring-duration) var(--spring), width var(--ring-duration) var(--spring)}.cc-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.cc-shell{gap:var(--size-100);flex-direction:column;min-width:0;display:flex}.cc-shell-header{align-items:baseline;gap:var(--size-100);justify-content:space-between;display:flex}.cc-signature{padding:var(--size-500) 24px 0;align-items:center;gap:12px;display:flex}.cc-signature-value{background:var(--card-color);border-radius:var(--border-radius-300);color:var(--card-background);font-family:var(--font-family);font-size:var(--font-size-400);flex:1;justify-content:flex-end;align-items:center;height:40px;padding-inline:12px;font-style:italic;display:flex}.cc-stripe{background:oklch(from var(--card-color) l c h/.15);height:44px;margin-top:24px}.cc-submit.button{height:var(--field-height);border:0;outline:none}.cc-submit.button:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:calc(var(--size-100) / 4)}@keyframes cc-digit-1{0%{filter:blur(var(--blur-300));opacity:0;translate:0 -4px}}@keyframes cc-digit-2{0%{filter:blur(var(--blur-300));opacity:0;translate:0 -4px}}@media (prefers-reduced-motion:reduce){@starting-style{.cc-error{filter:none;translate:0}}.cc-face--back{opacity:var(--face-back-opacity,0);transform:none}.cc-face--front{opacity:var(--face-front-opacity,1)}.cc-card--flipped{--face-back-opacity:1;--face-front-opacity:0;transform:none}.cc-digit--roll-1,.cc-digit--roll-2{animation-name:cc-fade}}@keyframes cc-fade{0%{opacity:0}}}
 /*$vite$:1*/

package/build/components/chat-minimap/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.chat-minimap-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.chat-minimap{--card-background:var(--color-white-300);--card-border:var(--color-border-300);--card-description-color:var(--color-text-300);--card-title-color:var(--color-text-500);--card-width:256px;--color-active:var(--color-text-500);--color-far:color-mix(in oklab, var(--color-text-500) 55%, transparent);--color-near:color-mix(in oklab, var(--color-text-500) 75%, transparent);--color-rest:color-mix(in oklab, var(--color-text-300) 40%, transparent);--focus-color:var(--color-text-500);--inset:4px;--item-height:8px;--item-width:32px;--length-far:16px;--length-near:20px;--length-peak:24px;--length-rest:12px;--nav-duration:.15s;--nav-height:20px;--stroke:2px;--transition-duration:.2s;--transition-timing-function:ease-out}.chat-minimap-item{--length:var(--length-rest);--line-color:var(--color-rest)}.chat-minimap-item.--active{--line-color:var(--color-active)}@media (hover:hover) and (prefers-reduced-motion:no-preference){.chat-minimap-item:is(:hover,:focus-visible){--length:var(--length-peak)}.chat-minimap-item:is(:hover,:focus-visible)+.chat-minimap-item{--length:var(--length-near)}.chat-minimap-item:has(+.chat-minimap-item:is(:hover,:focus-visible)){--length:var(--length-near)}.chat-minimap-item:is(:hover,:focus-visible)+.chat-minimap-item+.chat-minimap-item{--length:var(--length-far)}.chat-minimap-item:has(+.chat-minimap-item+.chat-minimap-item:is(:hover,:focus-visible)){--length:var(--length-far)}}.chat-minimap-item:not(.--active):is(:hover,:focus-visible)+.chat-minimap-item{--line-color:var(--color-near)}.chat-minimap-item:not(.--active):has(+.chat-minimap-item:is(:hover,:focus-visible)){--line-color:var(--color-near)}.chat-minimap-item:not(.--active):is(:hover,:focus-visible)+.chat-minimap-item+.chat-minimap-item{--line-color:var(--color-far)}.chat-minimap-item:not(.--active):has(+.chat-minimap-item+.chat-minimap-item:is(:hover,:focus-visible)){--line-color:var(--color-far)}.chat-minimap-item:is(:hover,:focus-visible){--line-color:var(--color-active)}.chat-minimap-preview.tooltip-shared{--background:var(--card-background);--box-shadow:0 0 0 var(--border-width-400) var(--card-border), var(--box-shadow-500);--color:var(--card-title-color);--font-size:var(--font-size-400);--padding:0;--radius:var(--border-radius-600);--spacer:8px;--white-space:normal}.chat-minimap-label.tooltip-shared{--padding:4px 10px;--radius:var(--border-radius-500);--spacer:4px}@media (prefers-reduced-motion:reduce){.chat-minimap{--nav-duration:0s;--transition-duration:0s}}.chat-minimap{flex-direction:column;align-items:flex-start;width:fit-content;display:flex}.chat-minimap--left{align-items:flex-end}.chat-minimap--left .chat-minimap-item,.chat-minimap--left .chat-minimap-nav{justify-content:flex-end}.chat-minimap-card{width:var(--card-width);flex-direction:column;gap:2px;padding:12px;display:flex}.chat-minimap-description{color:var(--card-description-color);font-size:var(--font-size-300);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-minimap-item{cursor:pointer;height:var(--item-height);padding:0 var(--inset);width:var(--item-width);background:0 0;border:0;outline:none;flex-shrink:0;align-items:center;display:flex;position:relative}.chat-minimap-item:focus-visible{border-radius:var(--border-radius-200);outline:2px solid var(--focus-color);outline-offset:-1px}.chat-minimap-items{flex-direction:column;display:flex}.chat-minimap-line{background:var(--line-color);border-radius:var(--stroke);height:var(--stroke);pointer-events:none;transition:background-color var(--transition-duration) var(--transition-timing-function), width var(--transition-duration) var(--transition-timing-function);width:var(--length);flex-shrink:0}.chat-minimap-nav{color:var(--color-text-300);cursor:pointer;height:var(--nav-height);opacity:0;padding:0 var(--inset);transition:color var(--nav-duration) ease-out, opacity var(--nav-duration) ease-out;width:var(--item-width);background:0 0;border:0;outline:none;align-items:center;display:flex}.chat-minimap-nav:disabled{cursor:default;pointer-events:none}.chat-minimap-nav:focus-visible,.chat-minimap-nav:hover{color:var(--color-active);opacity:1}.chat-minimap-nav:focus-visible{border-radius:var(--border-radius-200);outline:2px solid var(--focus-color);outline-offset:-1px}@media (pointer:coarse){.chat-minimap-nav{opacity:1}.chat-minimap-nav:disabled{opacity:.4}}.chat-minimap-nav-icon{flex-shrink:0;width:12px;height:12px}.chat-minimap-title{color:var(--card-title-color);font-size:.875rem;font-weight:var(--font-weight-500);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}
+@layer components{.chat-minimap-nav{--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.chat-minimap-nav{--color:var(--color-active)}.chat-minimap-nav:not(.--active):hover{--color:var(--color-hover)}.chat-minimap-nav:not(.--active):active{--color:var(--color-pressed)}.chat-minimap-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.chat-minimap{--card-border:var(--surface-border-default);--card-description-color:var(--color-text-300);--card-title-color:var(--color-text-500);--card-width:256px;--color-active:var(--color-text-500);--color-far:color-mix(in oklab, var(--color-primary-500) 55%, transparent);--color-near:color-mix(in oklab, var(--color-primary-500) 75%, transparent);--color-rest:color-mix(in oklab, var(--color-primary-300) 40%, transparent);--focus-color:var(--color-primary-500);--inset:calc(var(--size-100) / 2);--item-height:var(--size-100);--item-width:32px;--length-far:var(--size-400);--length-near:var(--size-500);--length-peak:24px;--length-rest:12px;--nav-color-hover:var(--color-active);--nav-duration:var(--duration-fast);--nav-height:var(--size-500);--stroke:2px}.chat-minimap-item{--length:var(--length-rest);--line-color:var(--color-rest)}.chat-minimap-item.--active{--line-color:var(--color-active)}@media (hover:hover) and (prefers-reduced-motion:no-preference){.chat-minimap-item:is(:hover,:focus-visible)+.chat-minimap-item+.chat-minimap-item{--length:var(--length-far)}.chat-minimap-item:has(+.chat-minimap-item+.chat-minimap-item:is(:hover,:focus-visible)){--length:var(--length-far)}.chat-minimap-item:is(:hover,:focus-visible)+.chat-minimap-item{--length:var(--length-near)}.chat-minimap-item:has(+.chat-minimap-item:is(:hover,:focus-visible)){--length:var(--length-near)}.chat-minimap-item:is(:hover,:focus-visible){--length:var(--length-peak)}}.chat-minimap-item:is(:hover,:focus-visible){--line-color:var(--color-active)}.chat-minimap-item:not(.--active):is(:hover,:focus-visible)+.chat-minimap-item+.chat-minimap-item{--line-color:var(--color-far)}.chat-minimap-item:not(.--active):has(+.chat-minimap-item+.chat-minimap-item:is(:hover,:focus-visible)){--line-color:var(--color-far)}.chat-minimap-item:not(.--active):is(:hover,:focus-visible)+.chat-minimap-item{--line-color:var(--color-near)}.chat-minimap-item:not(.--active):has(+.chat-minimap-item:is(:hover,:focus-visible)){--line-color:var(--color-near)}.chat-minimap-label.tooltip-shared{--padding:calc(var(--size-100) / 2) var(--size-200);--radius:var(--border-radius-500);--spacer:4px}.chat-minimap-preview.tooltip-shared{--background-default:var(--surface-background-default);--box-shadow-default:0 0 0 var(--border-width-400) var(--card-border), var(--surface-shadow-default);--color:var(--card-title-color);--font-size:var(--font-size-400);--padding:0;--radius:var(--border-radius-600);--spacer:var(--size-100);--white-space:normal}@media (prefers-reduced-motion:reduce){.chat-minimap{--transition-duration:0s}}.chat-minimap{flex-direction:column;align-items:flex-start;width:fit-content;display:flex}.chat-minimap--left{align-items:flex-end}.chat-minimap--left .chat-minimap-item,.chat-minimap--left .chat-minimap-nav{justify-content:flex-end}.chat-minimap-card{gap:calc(var(--size-100) / 4);width:var(--card-width);flex-direction:column;padding:12px;display:flex}.chat-minimap-description{-webkit-line-clamp:2;color:var(--card-description-color);font-size:var(--font-size-300);line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-minimap-item{cursor:pointer;height:var(--item-height);padding:0 var(--inset);width:var(--item-width);background:0 0;border:0;outline:none;flex-shrink:0;align-items:center;display:flex;position:relative}.chat-minimap-item:focus-visible{border-radius:var(--border-radius-200);outline:2px solid var(--focus-color);outline-offset:-1px}.chat-minimap-items{flex-direction:column;display:flex}.chat-minimap-line{background:var(--line-color);border-radius:var(--stroke);height:var(--stroke);pointer-events:none;transition:background-color var(--transition-duration) var(--transition-timing-function), width var(--transition-duration) var(--transition-timing-function);width:var(--length);flex-shrink:0}.chat-minimap-nav{--color-default:var(--color-text-300);--color-hover:var(--nav-color-hover);--color-pressed:var(--color-hover);color:var(--color);cursor:pointer;height:var(--nav-height);opacity:0;padding:0 var(--inset);transition:color var(--nav-duration) var(--easing-spring), opacity var(--nav-duration) var(--easing-spring);width:var(--item-width);background:0 0;border:0;outline:none;align-items:center;display:flex}.chat-minimap-nav:disabled{cursor:default;pointer-events:none}.chat-minimap-nav:focus-visible{--color:var(--color-hover);border-radius:var(--border-radius-200);outline:2px solid var(--focus-color);outline-offset:-1px}.chat-minimap-nav:focus-visible,.chat-minimap-nav:hover{opacity:1}@media (pointer:coarse){.chat-minimap-nav{opacity:1}.chat-minimap-nav:disabled{opacity:.4}}.chat-minimap-nav-icon{flex-shrink:0;width:12px;height:12px}.chat-minimap-title{color:var(--card-title-color);font-size:var(--font-size-300);font-weight:var(--font-weight-500);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}
 /*$vite$:1*/

package/build/components/checkbox/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.checkbox--radio:before,.checkbox .checkbox-check,.checkbox .checkbox-group-dash,.checkbox-tag{position:absolute;inset:0}.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{stroke-dasharray:1;stroke-dashoffset:1px}.checkbox{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--border-width-offset:0px;--border-width-offset-hover:1px;--box-shadow:var(--box-shadow-default);--box-shadow-active:0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default);--check-linecap:round;--check-linejoin:round;--check-offset:1;--check-size:80%;--check-stroke-width:4;--check-timing-function:ease;--dash-offset:1;--focus-color:var(--border-color-active);--focus-offset:2px;--focus-width:2px;--height:var(--size);--indicator-color:var(--indicator-color-default);--indicator-color-active:var(--indicator-color-default);--indicator-color-default:var(--color-white-400);--indicator-color-hover:var(--indicator-color-default);--indicator-color-pressed:var(--indicator-color-default);--scale:var(--scale-default);--scale-active:1;--scale-default:.92;--scale-hover:.96;--scale-pressed:var(--scale-default);--size:var(--size-500);--transition-duration:.28s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--width:var(--height)}.checkbox--radio:before,.checkbox--switch:before{--box-shadow:0 2px 4px #0003}.checkbox--radio{--border-radius:100%;--scale-default:0;--scale-hover:0}.checkbox--radio:before{--height:var(--size-100);--width:var(--height)}.checkbox--switch{--border-width-offset-hover:0px;--box-shadow-active:var(--box-shadow-default);--focus-color:var(--background-active);--padding-horizontal:2px;--padding-vertical:2px;--progress:0;--translateX-active:calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));--width:var(--width-rail);--width-rail:calc(var(--height) * 1.8)}.checkbox--switch:before{--translateX:calc(var(--translateX-active) * var(--progress));--width:var(--height)}.checkbox--switch:has(input:checked){--progress:1}.checkbox-group{--border-color:var(--color-border-300);--color:var(--color-text-500);--color-muted:var(--color-text-300);--gap-horizontal:var(--size-300);--gap-vertical:0px}.checkbox:not(:has(input:checked,input:indeterminate)):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}label:hover .checkbox:not(:has(input:checked,input:indeterminate)){--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}.checkbox:not(:has(input:checked,input:indeterminate)):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}label:active .checkbox:not(:has(input:checked,input:indeterminate)){--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}.checkbox:has(input:checked,input:indeterminate){--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--indicator-color:var(--indicator-color-active);--scale:var(--scale-active)}.checkbox:has(input:checked){--check-offset:0}.checkbox:has(input:indeterminate){--dash-offset:0}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:calc(var(--border-width) + var(--border-width-offset));box-shadow:var(--box-shadow);cursor:pointer;flex:0 0 var(--width);height:var(--height);pointer-events:none;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-width var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.checkbox--radio:before,.checkbox--switch:before{background:var(--indicator-color);box-shadow:var(--box-shadow);content:"";pointer-events:none;transform-origin:50%;transition:scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width)}.checkbox--radio:before{border-radius:calc(var(--border-radius) - var(--height) / 2);height:var(--height);scale:var(--scale);margin:auto}.checkbox--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);border-radius:calc(var(--border-radius) - var(--padding-vertical) / 1.5);height:calc(var(--height) - var(--border-width) * 2 - var(--padding-vertical) * 2);scale:var(--scale);translate:var(--translateX);position:absolute}.checkbox:has(>.checkbox-tag:focus-visible){outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.checkbox .checkbox-check,.checkbox .checkbox-group-dash{height:var(--check-size);pointer-events:none;width:var(--check-size);margin:auto}.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{fill:none;stroke:var(--indicator-color);stroke-linecap:var(--check-linecap);stroke-linejoin:var(--check-linejoin);stroke-width:var(--check-stroke-width);transition:stroke-dashoffset var(--transition-duration) var(--check-timing-function)}.checkbox .checkbox-check{left:1px}.checkbox .checkbox-check svg{stroke-dashoffset:var(--check-offset)}.checkbox .checkbox-group-dash svg{stroke-dashoffset:var(--dash-offset)}.checkbox-group{color:var(--color);gap:var(--gap-vertical) 0px;flex-direction:column;display:flex}.checkbox-group-counter{color:var(--color-muted);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;flex:none}.checkbox-group-header{cursor:pointer;align-items:center;gap:var(--gap-horizontal);-webkit-user-select:none;user-select:none;display:flex}.checkbox-group-hint{color:var(--color-muted);font-size:var(--font-size-300);-webkit-user-select:none;user-select:none;margin:0}.checkbox-group-hint-key{border:1px solid var(--border-color);font-family:inherit;font-size:inherit;border-radius:4px;padding:1px 4px}.checkbox-group-label{font-weight:var(--font-weight-500);flex:1;min-width:0}.checkbox-tag{cursor:inherit;opacity:0;pointer-events:all;z-index:1;width:100%;height:100%;margin:0}@media (prefers-reduced-motion:reduce){.checkbox,.checkbox:before,.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{transition:none}}}
+@layer components{.checkbox--radio:before,.checkbox-tag,.checkbox .checkbox-check,.checkbox .checkbox-group-dash{position:absolute;inset:0}.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{stroke-dasharray:1;stroke-dashoffset:1px}.checkbox{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--border-width-offset:0px;--border-width-offset-hover:var(--border-width-400);--box-shadow:var(--box-shadow-default);--box-shadow-active:0 3px 8px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2));--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default);--check-linecap:round;--check-linejoin:round;--check-offset:1;--check-size:80%;--check-stroke-width:4;--check-timing-function:ease;--dash-offset:1;--focus-color:var(--border-color-active);--focus-offset:calc(var(--size-100) / 4);--focus-width:var(--border-width-500);--height:var(--size);--indicator-color:var(--indicator-color-default);--indicator-color-active:var(--indicator-color-default);--indicator-color-default:var(--color-white-400);--indicator-color-hover:var(--indicator-color-default);--indicator-color-pressed:var(--indicator-color-default);--scale:var(--scale-default);--scale-active:1;--scale-default:.92;--scale-hover:.96;--scale-pressed:var(--scale-default);--size:var(--size-500);--width:var(--height)}.checkbox--radio{--border-radius:100%;--scale-default:0;--scale-hover:0}.checkbox--radio:before{--height:var(--size-100);--width:var(--height)}.checkbox--radio:before,.checkbox--switch:before{--box-shadow:0 2px 4px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2))}.checkbox--switch{--border-width-offset-hover:0px;--box-shadow-active:var(--box-shadow-default);--focus-color:var(--background-active);--padding-horizontal:calc(var(--size-100) / 4);--padding-vertical:calc(var(--size-100) / 4);--progress:0;--translateX-active:calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));--width:var(--width-rail);--width-rail:calc(var(--height) * 1.8)}.checkbox--switch:before{--translateX:calc(var(--translateX-active) * var(--progress));--width:var(--height)}.checkbox--switch:has(input:checked){--progress:1}.checkbox-group{--border-color:var(--surface-border-default);--color:var(--color-text-500);--color-muted:var(--color-text-300);--gap-horizontal:var(--size-300);--gap-vertical:0px}.checkbox:has(input:checked){--check-offset:0}.checkbox:has(input:checked,input:indeterminate){--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--indicator-color:var(--indicator-color-active);--scale:var(--scale-active)}.checkbox:has(input:indeterminate){--dash-offset:0}.checkbox:not(:has(input:checked,input:indeterminate)):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}label:active .checkbox:not(:has(input:checked,input:indeterminate)){--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}.checkbox:not(:has(input:checked,input:indeterminate)):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}label:hover .checkbox:not(:has(input:checked,input:indeterminate)){--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:calc(var(--border-width) + var(--border-width-offset));box-shadow:var(--box-shadow);cursor:pointer;flex:0 0 var(--width);height:var(--height);pointer-events:none;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-width var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.checkbox--radio:before{border-radius:calc(var(--border-radius) - var(--height) / 2);height:var(--height);scale:var(--scale);margin:auto}.checkbox--radio:before,.checkbox--switch:before{background:var(--indicator-color);box-shadow:var(--box-shadow);content:"";pointer-events:none;transform-origin:50%;transition:scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width)}.checkbox--switch:before{border-radius:calc(var(--border-radius) - var(--padding-vertical) / 1.5);height:calc(var(--height) - var(--border-width) * 2 - var(--padding-vertical) * 2);inset:var(--padding-vertical) auto auto var(--padding-horizontal);scale:var(--scale);translate:var(--translateX);position:absolute}.checkbox-group{color:var(--color);gap:var(--gap-vertical) 0px;flex-direction:column;display:flex}.checkbox-group-counter{color:var(--color-muted);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;flex:none}.checkbox-group-header{cursor:pointer;align-items:center;gap:var(--gap-horizontal);-webkit-user-select:none;user-select:none;display:flex}.checkbox-group-hint{color:var(--color-muted);font-size:var(--font-size-300);-webkit-user-select:none;user-select:none;margin:0}.checkbox-group-hint-key{border:1px solid var(--border-color);border-radius:var(--border-radius-200);font-family:inherit;font-size:inherit;padding:1px calc(var(--size-100) / 2)}.checkbox-group-label{font-weight:var(--font-weight-500);flex:1;min-width:0}.checkbox-tag{cursor:inherit;opacity:0;pointer-events:all;z-index:1;width:100%;height:100%;margin:0}.checkbox:has(>.checkbox-tag:focus-visible){outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.checkbox .checkbox-check{left:1px}.checkbox .checkbox-check svg{stroke-dashoffset:var(--check-offset)}.checkbox .checkbox-check,.checkbox .checkbox-group-dash{height:var(--check-size);pointer-events:none;width:var(--check-size);margin:auto}.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{fill:none;stroke:var(--indicator-color);stroke-linecap:var(--check-linecap);stroke-linejoin:var(--check-linejoin);stroke-width:var(--check-stroke-width);transition:stroke-dashoffset var(--transition-duration) var(--check-timing-function)}.checkbox .checkbox-group-dash svg{stroke-dashoffset:var(--dash-offset)}@media (prefers-reduced-motion:reduce){.checkbox,.checkbox:before,.checkbox .checkbox-check svg,.checkbox .checkbox-group-dash svg{transition:none}}}
 /*$vite$:1*/

package/build/components/color-picker/index.d.ts

@@ -3,6 +3,7 @@ import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 type A = Attributes & {
     [COLOR_PICKER_SWATCH]?: Attributes;
+    compact?: boolean;
     recent?: false | string[];
     state?: {
         error: string;