@esportsplus/ui 0.57.0 → 0.58.0

package/build/components/surface-field/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.surface-field-canvas,.surface-field-surface-lift{position:absolute;inset:0}.surface-field-surface-lift{border-radius:inherit;pointer-events:none}.surface-field-surface-title{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.surface-field{--accent:#6683e8;--color:var(--color-text-500);--still:0;--surface-background:var(--color-white-300);--surface-body-color:var(--color-text-300);--surface-body-font-size:calc(var(--font-size-400) * .8125);--surface-border-color:oklch(from var(--color-black-300) l c h / .06);--surface-border-radius:14px;--surface-box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 8px 24px -8px oklch(from var(--color-black-300) l c h / .14);--surface-box-shadow-active:0 2px 4px oklch(from var(--color-black-300) l c h / .08), 0 20px 40px -12px oklch(from var(--color-black-300) l c h / .24);--surface-grip-color:var(--color-text-300);--surface-grip-width:32px;--surface-handle-height:28px;--surface-header-cursor:grab;--surface-lift-duration:.2s;--surface-lift-opacity:0;--surface-title-color:var(--color-text-500)}@media (prefers-reduced-motion:reduce){.surface-field{--still:1}}.surface-field-surface.--active{--surface-header-cursor:grabbing;--surface-lift-opacity:1}@property --still{syntax:"<number>";inherits:true;initial-value:0}.surface-field{isolation:isolate;position:relative}.surface-field-canvas{accent-color:var(--accent);color:var(--color);pointer-events:none;z-index:0;width:100%;height:100%;transition:--still 1ms}.surface-field-content{z-index:1;height:100%;position:relative}.surface-field-surface{background:var(--surface-background);border-radius:var(--surface-border-radius);box-shadow:0 0 0 1px var(--surface-border-color), var(--surface-box-shadow);transition:scale var(--surface-lift-duration) ease;flex-direction:column;display:flex;position:absolute;top:0;left:0}.surface-field-surface.--active{scale:1.01}.surface-field-surface-body{color:var(--surface-body-color);font-size:var(--surface-body-font-size);overflow-wrap:break-word;margin:0;line-height:1.5}.surface-field-surface-content{flex-direction:column;flex:1;gap:8px;min-height:0;padding:0 16px 16px;display:flex;overflow:hidden}.surface-field-surface-handle,.surface-field-surface-resize{color:var(--surface-grip-color);touch-action:none;background:0 0;border:0;padding:0}.surface-field-surface-handle:focus-visible,.surface-field-surface-resize:focus-visible{outline:2px solid oklch(from var(--color) l c h/.4);outline-offset:-2px}.surface-field-surface-header{cursor:var(--surface-header-cursor);min-height:var(--surface-handle-height);touch-action:none;flex-shrink:0;align-items:center;gap:4px;padding-inline-start:16px;display:flex}.surface-field-surface-lift{box-shadow:var(--surface-box-shadow-active);opacity:var(--surface-lift-opacity);transition:opacity var(--surface-lift-duration) ease}.surface-field-surface-handle{border-radius:0 var(--surface-border-radius) 0 0;cursor:inherit;width:var(--surface-grip-width);flex-shrink:0;align-self:stretch;position:relative}.surface-field-surface-handle:before{content:"";opacity:.7;background:currentColor;border-radius:999px;width:18px;height:2px;position:absolute;top:50%;left:50%;translate:-50% -50%}.surface-field-surface-handle:only-child{border-radius:var(--surface-border-radius) var(--surface-border-radius) 0 0;flex:1;margin-inline-start:-16px}.surface-field-surface-resize{border-radius:0 0 var(--surface-border-radius) 0;cursor:nwse-resize;opacity:.7;background:linear-gradient(135deg,#0000 45%,currentColor 45% 52%,#0000 52%) 4px 4px/12px 12px no-repeat,linear-gradient(135deg,#0000 70%,currentColor 70% 77%,#0000 77%) 4px 4px/12px 12px no-repeat;width:22px;height:22px;position:absolute;bottom:0;right:0}.surface-field-surface-title{color:var(--surface-title-color);flex:0 auto;min-width:0;font-weight:600}.surface-field-surface-title+.surface-field-surface-handle{margin-inline-start:auto}@media (prefers-reduced-motion:reduce){.surface-field-surface{transition:none}.surface-field-surface.--active{scale:1}}}
+@layer components{.surface-field-canvas,.surface-field-surface-lift{position:absolute;inset:0}.surface-field-surface-lift{border-radius:inherit;pointer-events:none}.surface-field-surface{--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){.surface-field-surface{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.surface-field-surface{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.surface-field-surface{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.surface-field-surface{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.surface-field-surface{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.surface-field-surface{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.surface-field-surface{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.surface-field-surface{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.surface-field-surface{--surface-level:6;--surface-shadow-weight:6}}.surface-field-surface-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}}.surface-field{--accent:#6683e8;--color:var(--color-text-500);--still:0;--surface-body-color:var(--color-text-300);--surface-body-font-size:calc(var(--font-size-400) * .8125);--surface-border-color:var(--surface-border-default);--surface-border-radius:14px;--surface-box-shadow:0 1px 2px oklch(from var(--surface-shadow-color) l c h / calc(alpha * .6)), 0 8px 24px -8px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 1.55));--surface-box-shadow-active:0 2px 4px oklch(from var(--surface-shadow-color) l c h / calc(alpha * .8)), 0 20px 40px -12px oklch(from var(--surface-shadow-color) l c h / calc(alpha * 2.7));--surface-grip-color:var(--color-primary-300);--surface-grip-width:32px;--surface-handle-height:28px;--surface-header-cursor:grab;--surface-lift-duration:var(--duration-moderate);--surface-lift-opacity:0;--surface-title-color:var(--color-text-500)}@media (prefers-reduced-motion:reduce){.surface-field{--still:1}}.surface-field-surface.--active{--surface-header-cursor:grabbing;--surface-lift-opacity:1}@property --still{syntax:"<number>";inherits:true;initial-value:0}.surface-field{isolation:isolate;position:relative}.surface-field-canvas{accent-color:var(--accent);color:var(--color);pointer-events:none;z-index:0;width:100%;height:100%;transition:--still 1ms}.surface-field-content{z-index:1;height:100%;position:relative}.surface-field-surface{background:var(--surface-background-default);border-radius:var(--surface-border-radius);box-shadow:0 0 0 1px var(--surface-border-color), var(--surface-box-shadow);transition:scale var(--surface-lift-duration) ease;flex-direction:column;display:flex;position:absolute;top:0;left:0}.surface-field-surface.--active{scale:1.01}.surface-field-surface-body{color:var(--surface-body-color);font-size:var(--surface-body-font-size);overflow-wrap:break-word;margin:0;line-height:1.5}.surface-field-surface-content{gap:var(--size-100);min-height:0;padding:0 var(--size-400) var(--size-400);flex-direction:column;flex:1;display:flex;overflow:hidden}.surface-field-surface-handle{border-radius:0 var(--surface-border-radius) 0 0;cursor:inherit;width:var(--surface-grip-width);flex-shrink:0;align-self:stretch;position:relative}.surface-field-surface-handle:before{content:"";opacity:.7;background:currentColor;border-radius:999px;width:18px;height:2px;position:absolute;top:50%;left:50%;translate:-50% -50%}.surface-field-surface-handle:only-child{border-radius:var(--surface-border-radius) var(--surface-border-radius) 0 0;flex:1;margin-inline-start:calc(var(--size-400) * -1)}.surface-field-surface-handle,.surface-field-surface-resize{color:var(--surface-grip-color);touch-action:none;background:0 0;border:0;padding:0}.surface-field-surface-handle:focus-visible,.surface-field-surface-resize:focus-visible{outline:2px solid oklch(from var(--color) l c h/.4);outline-offset:calc(var(--size-100) / -4)}.surface-field-surface-header{cursor:var(--surface-header-cursor);align-items:center;gap:calc(var(--size-100) / 2);min-height:var(--surface-handle-height);touch-action:none;flex-shrink:0;padding-inline-start:var(--size-400);display:flex}.surface-field-surface-lift{box-shadow:var(--surface-box-shadow-active);opacity:var(--surface-lift-opacity);transition:opacity var(--surface-lift-duration) ease}.surface-field-surface-resize{border-radius:0 0 var(--surface-border-radius) 0;cursor:nwse-resize;opacity:.7;background:linear-gradient(135deg,#0000 45%,currentColor 45% 52%,#0000 52%) 4px 4px/12px 12px no-repeat,linear-gradient(135deg,#0000 70%,currentColor 70% 77%,#0000 77%) 4px 4px/12px 12px no-repeat;width:22px;height:22px;position:absolute;bottom:0;right:0}.surface-field-surface-title{color:var(--surface-title-color);font-weight:var(--font-weight-600);flex:0 auto;min-width:0}.surface-field-surface-title+.surface-field-surface-handle{margin-inline-start:auto}@media (prefers-reduced-motion:reduce){.surface-field-surface{transition:none}.surface-field-surface.--active{scale:1}}}
 /*$vite$:1*/

package/build/components/tasklist/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.tasklist{--check-duration:.15s;--gap:2px;--strike-duration:.2s;--timing-function:cubic-bezier(.65, 0, .35, 1);margin:0;padding:0;list-style:none}@media (prefers-reduced-motion:reduce){.tasklist{--check-duration:0s;--strike-duration:0s}}.tasklist-checkbox{--background-active:var(--color-text-500);--border-color-active:var(--color-text-500);--border-color-default:var(--color-border-400);--border-width:var(--border-width-400);--size:var(--size-500)}.tasklist-content{--opacity:var(--opacity-default);--opacity-active:.65;--opacity-default:1}.tasklist-description{--color:var(--color-text-300);--font-size:var(--font-size-300)}.tasklist-item{--background:var(--background-default);--background-default:transparent;--background-hover:color-mix(in oklch, var(--color-text-500) 3%, var(--background-default));--border-radius:var(--border-radius-400);--move-duration:.5s;--move-easing:linear(0, .109, .322, .536, .71, .835, .916, .965, .991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);--strike-delay:0s;--strike-length:0%;--transition-duration:.15s}.tasklist-item:not(.--active):hover{--background:var(--background-hover)}.tasklist-item:has(.checkbox-tag:checked){--strike-length:100%}.tasklist-item:has(.checkbox-tag:checked) .tasklist-content{--opacity:var(--opacity-active)}.tasklist-item--checking{--strike-delay:var(--check-duration)}@media (prefers-reduced-motion:reduce){.tasklist-item{--move-duration:0s}}.tasklist-label{--color:var(--color-text-500);--font-weight:var(--font-weight-500);--strike-color:var(--color-border-400);--strike-width:2px}.tasklist-row{--font-size:var(--font-size-400);--gap:10px;--line-height:var(--size-500);--padding-horizontal:var(--size-100);--padding-vertical:var(--size-100)}.tasklist-row--sortable:before{--background:var(--color-text-300);--opacity:var(--opacity-default);--opacity-default:0;--opacity-hover:1;--size:16px;--transition-duration:.15s}.tasklist-row--sortable:not(.--active):hover:before{--opacity:var(--opacity-hover)}.tasklist--plan .tasklist-label:before{--color:var(--color-text-300);--font-family:var(--font-family-mono);--font-size:var(--font-size-200);--font-weight:var(--font-weight-500);--gap:6px}.tasklist{gap:var(--gap);flex-direction:column;display:flex}.tasklist-checkbox{margin-top:calc((var(--line-height) - var(--size)) / 2)}.tasklist-content{min-width:0;opacity:var(--opacity);transition:opacity var(--strike-duration) var(--timing-function) var(--strike-delay)}.tasklist-description{color:var(--color);font-size:var(--font-size);margin-top:2px;display:block}.tasklist-item{background:var(--background);border-radius:var(--border-radius);transition:background-color var(--transition-duration) var(--timing-function);position:relative}.tasklist-item--moving{z-index:1}.tasklist-item--unchecking .tasklist-checkbox,.tasklist-item--unchecking .tasklist-checkbox .checkbox-check svg{transition-delay:var(--strike-duration)}.tasklist-label{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(var(--strike-color), var(--strike-color));background-position:0 55%;background-repeat:no-repeat;background-size:var(--strike-length) var(--strike-width);color:var(--color);font-weight:var(--font-weight);transition:background-size var(--strike-duration) var(--timing-function) var(--strike-delay)}.tasklist-row{cursor:pointer;font-size:var(--font-size);align-items:flex-start;gap:var(--gap);line-height:var(--line-height);padding:var(--padding-vertical) var(--padding-horizontal);-webkit-user-select:none;user-select:none;display:flex}.tasklist-row--sortable:before{background:var(--background);content:"";flex:0 0 var(--size);height:var(--size);margin-top:calc((var(--line-height) - var(--size)) / 2);opacity:var(--opacity);transition:opacity var(--transition-duration) var(--timing-function);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat}.tasklist--plan .tasklist-item{counter-set:tasklist var(--index)}.tasklist--plan .tasklist-label:before{color:var(--color);content:counter(tasklist, decimal-leading-zero);font-family:var(--font-family);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);margin-right:var(--gap)}}
+@layer components{.tasklist{margin:0;padding:0;list-style:none}.tasklist-item{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.tasklist-item{--background:var(--background-active)}.tasklist-item:not(.--active):hover{--background:var(--background-hover)}.tasklist-item:not(.--active):active{--background:var(--background-pressed)}@font-face{font-display:swap;font-family:Geist;font-style:normal;font-weight:100 900;src:url(../../../css-utilities/font/geist/Geist-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist;font-style:italic;font-weight:100 900;src:url(../../../css-utilities/font/geist/Geist-Italic-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:normal;font-weight:100 900;src:url(../../../css-utilities/font/geist/GeistMono-Variable.woff2)format("woff2")}@font-face{font-display:swap;font-family:Geist Mono;font-style:italic;font-weight:100 900;src:url(../../../css-utilities/font/geist/GeistMono-Italic-Variable.woff2)format("woff2")}.tasklist--plan .tasklist-label:before{--font-weight-300:300;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-family:"Geist Mono", monospace}.tasklist{--check-duration:var(--duration-fast);--gap:calc(var(--size-100) / 4);--strike-duration:var(--duration-moderate);--timing-function:cubic-bezier(.65, 0, .35, 1)}@media (prefers-reduced-motion:reduce){.tasklist{--check-duration:0s;--strike-duration:0s}}.tasklist--plan .tasklist-label:before{--color:var(--color-text-300);--font-size:var(--font-size-200);--font-weight:var(--font-weight-500);--gap:calc(var(--size-300) / 2)}.tasklist-checkbox{--background-active:var(--color-primary-500);--border-color-active:var(--color-primary-500);--border-color-default:var(--surface-border-hover);--border-width:var(--border-width-400);--indicator-color-default:var(--color-surface);--size:var(--size-500)}.tasklist-content{--opacity:var(--opacity-default);--opacity-active:.65;--opacity-default:1}.tasklist-description{--color:var(--color-text-300);--font-size:var(--font-size-300)}.tasklist-item{--background-hover:color-mix(in oklch, var(--color-primary-500) 3%, var(--background-default));--background-pressed:var(--background-hover);--border-radius:var(--border-radius-400);--move-duration:.5s;--move-easing:linear(0, .109, .322, .536, .71, .835, .916, .965, .991, 1.003, 1.007, 1.008, 1.006, 1.005, 1.003, 1.002, 1);--strike-delay:0s;--strike-length:0%}.tasklist-item--checking{--strike-delay:var(--check-duration)}.tasklist-item:has(.checkbox-tag:checked){--strike-length:100%}.tasklist-item:has(.checkbox-tag:checked) .tasklist-content{--opacity:var(--opacity-active)}@media (prefers-reduced-motion:reduce){.tasklist-item{--move-duration:0s}}.tasklist-label{--color:var(--color-text-500);--font-weight:var(--font-weight-500);--strike-color:var(--surface-border-hover);--strike-width:2px}.tasklist-row{--font-size:var(--font-size-400);--gap:var(--size-200);--line-height:var(--size-500);--padding-horizontal:var(--size-100);--padding-vertical:var(--size-100)}.tasklist-row--sortable:before{--background:var(--color-primary-300);--opacity:var(--opacity-default);--opacity-default:0;--opacity-hover:1;--size:var(--size-400)}.tasklist-row--sortable:not(.--active):hover:before{--opacity:var(--opacity-hover)}.tasklist{gap:var(--gap);flex-direction:column;display:flex}.tasklist--plan .tasklist-item{counter-set:tasklist var(--index)}.tasklist--plan .tasklist-label:before{color:var(--color);content:counter(tasklist, decimal-leading-zero);font-family:var(--font-family);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);margin-right:var(--gap)}.tasklist-checkbox{margin-top:calc((var(--line-height) - var(--size)) / 2)}.tasklist-content{min-width:0;opacity:var(--opacity);transition:opacity var(--strike-duration) var(--timing-function) var(--strike-delay)}.tasklist-description{color:var(--color);font-size:var(--font-size);margin-top:calc(var(--size-100) / 4);display:block}.tasklist-item{background:var(--background);border-radius:var(--border-radius);transition:background-color var(--transition-duration) var(--timing-function);position:relative}.tasklist-item--moving{z-index:1}.tasklist-item--unchecking .tasklist-checkbox,.tasklist-item--unchecking .tasklist-checkbox .checkbox-check svg{transition-delay:var(--strike-duration)}.tasklist-label{-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(var(--strike-color), var(--strike-color));background-position:0 55%;background-repeat:no-repeat;background-size:var(--strike-length) var(--strike-width);color:var(--color);font-weight:var(--font-weight);transition:background-size var(--strike-duration) var(--timing-function) var(--strike-delay)}.tasklist-row{cursor:pointer;font-size:var(--font-size);align-items:flex-start;gap:var(--gap);line-height:var(--line-height);padding:var(--padding-vertical) var(--padding-horizontal);-webkit-user-select:none;user-select:none;display:flex}.tasklist-row--sortable:before{background:var(--background);content:"";flex:0 0 var(--size);height:var(--size);margin-top:calc((var(--line-height) - var(--size)) / 2);opacity:var(--opacity);transition:opacity var(--transition-duration) var(--timing-function);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.5'/%3E%3Ccircle cx='9' cy='12' r='1.5'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='15' cy='5' r='1.5'/%3E%3Ccircle cx='15' cy='12' r='1.5'/%3E%3Ccircle cx='15' cy='19' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat}}
 /*$vite$:1*/

package/build/components/text/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.text{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.--text-truncate.text{display:block}}
+@layer components{.text{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}@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}}}
 /*$vite$:1*/

package/build/components/textarea/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.textarea{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.textarea{--background:var(--background-active)}.textarea:not(.--active):hover{--background:var(--background-hover)}.textarea:not(.--active):active{--background:var(--background-pressed)}.textarea{--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.textarea{--border-color:var(--border-color-active)}.textarea:not(.--active):hover{--border-color:var(--border-color-hover)}.textarea:not(.--active):active{--border-color:var(--border-color-pressed)}.textarea{--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.textarea{--color:var(--color-active)}.textarea:not(.--active):hover{--color:var(--color-hover)}.textarea:not(.--active):active{--color:var(--color-pressed)}.textarea{--resize-duration:.24s;--resize-timing-function:cubic-bezier(.4, 0, .2, 1);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400)}.textarea:not(.--active):not(.--active):hover{--box-shadow:var(--box-shadow-hover)}.textarea:not(.--active):not(.--active):active{--box-shadow:var(--box-shadow-pressed)}.textarea.--active{--box-shadow:var(--box-shadow-active)}.textarea{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), height var(--resize-duration) var(--resize-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-width:0;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));flex:auto;width:100%;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea--autoresize{--scrollbar-gutter:stable;--scrollbar-overflow:hidden;box-sizing:border-box;field-sizing:fixed;height:var(--height,var(--min-height));max-height:var(--max-height);min-height:var(--min-height);overflow-y:var(--scrollbar-overflow);resize:none;scrollbar-gutter:var(--scrollbar-gutter)}@media (prefers-reduced-motion:reduce){.textarea--autoresize{transition:none}}.textarea--measure{--scrollbar-gutter:stable;box-sizing:border-box;field-sizing:content;height:auto;max-height:var(--max-height);min-height:var(--min-height);pointer-events:none;resize:none;scrollbar-gutter:var(--scrollbar-gutter);visibility:hidden;transition:none;position:absolute;inset:0 auto auto 0;overflow-y:auto}.textarea--measure-fallback{height:calc(var(--content-height,var(--min-height)) + 2 * var(--border-width))}.textarea--scrollable{--scrollbar-overflow:auto}.textarea-resize{flex:auto;width:100%;min-width:0;display:grid;position:relative}}
+@layer components{.textarea{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.textarea{--background:var(--background-active)}.textarea:not(.--active):hover{--background:var(--background-hover)}.textarea:not(.--active):active{--background:var(--background-pressed)}.textarea{--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.textarea{--border-color:var(--border-color-active)}.textarea:not(.--active):hover{--border-color:var(--border-color-hover)}.textarea:not(.--active):active{--border-color:var(--border-color-pressed)}.textarea{--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.textarea{--box-shadow:var(--box-shadow-active)}.textarea:not(.--active):hover{--box-shadow:var(--box-shadow-hover)}.textarea:not(.--active):active{--box-shadow:var(--box-shadow-pressed)}.textarea{--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.textarea{--color:var(--color-active)}.textarea:not(.--active):hover{--color:var(--color-hover)}.textarea:not(.--active):active{--color:var(--color-pressed)}.textarea{--resize-duration:var(--duration-moderate);--resize-timing-function:cubic-bezier(.4, 0, .2, 1);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--font-size:var(--font-size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--size:var(--size-400);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), height var(--resize-duration) var(--resize-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);background:var(--background);border:var(--border-width) var(--border-style) var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:text;font-size:var(--font-size);min-width:0;padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));flex:auto;width:100%;position:relative}.textarea:invalid,.textarea:required{box-shadow:none}.textarea--autoresize{--scrollbar-gutter:stable;--scrollbar-overflow:hidden;box-sizing:border-box;field-sizing:fixed;height:var(--height,var(--min-height));max-height:var(--max-height);min-height:var(--min-height);overflow-y:var(--scrollbar-overflow);resize:none;scrollbar-gutter:var(--scrollbar-gutter)}@media (prefers-reduced-motion:reduce){.textarea--autoresize{transition:none}}.textarea--measure{--scrollbar-gutter:stable;box-sizing:border-box;field-sizing:content;height:auto;max-height:var(--max-height);min-height:var(--min-height);pointer-events:none;resize:none;scrollbar-gutter:var(--scrollbar-gutter);visibility:hidden;transition:none;position:absolute;inset:0 auto auto 0;overflow-y:auto}.textarea--measure-fallback{height:calc(var(--content-height,var(--min-height)) + 2 * var(--border-width))}.textarea--scrollable{--scrollbar-overflow:auto}.textarea-resize{flex:auto;width:100%;min-width:0;display:grid;position:relative}}
 /*$vite$:1*/

package/build/{css-utilities → components}/theme/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 type Mode = 'dark' | 'light';
 type Preference = Mode | 'system';
 type Store = {
@@ -8,7 +9,6 @@ type Store = {
 declare const KEY = "theme";
 export default _default;
 declare function _default(store?: Store): {
-    readonly class: string;
     readonly mode: Mode;
     readonly preference: Preference;
     set(preference: Preference): void;

package/build/{css-utilities → components}/theme/index.js

@@ -1,5 +1,6 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
-class ReactiveObject_1grmkcs0 extends reactivity_u0.ReactiveObject {
+import './scss/index.scss';
+class ReactiveObject_1y66z620 extends reactivity_u0.ReactiveObject {
     #preference;
     #system;
     constructor(_p0, _p1) {
@@ -20,26 +21,34 @@ class ReactiveObject_1grmkcs0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#system, _v1);
     }
 }
+const ATTRIBUTE = 'data-theme';
 const KEY = 'theme';
 const PREFERENCES = ['dark', 'light', 'system'];
 const QUERY = '(prefers-color-scheme: dark)';
+function apply(preference) {
+    let root = document.documentElement;
+    if (preference === 'system') {
+        root.removeAttribute(ATTRIBUTE);
+    }
+    else {
+        root.setAttribute(ATTRIBUTE, preference);
+    }
+}
 function system(dark) {
     return dark ? 'dark' : 'light';
 }
 export default (store) => {
-    let media = matchMedia(QUERY), state = new ReactiveObject_1grmkcs0('system', system(media.matches)), touched = false;
+    let media = matchMedia(QUERY), state = new ReactiveObject_1y66z620('system', system(media.matches)), touched = false;
     media.addEventListener('change', (event) => {
         state.system = system(event.matches);
     });
     store?.get(KEY).then((value) => {
         if (!touched && PREFERENCES.includes(value)) {
             state.preference = value;
+            apply(state.preference);
         }
     }, () => { });
     return {
-        get class() {
-            return `--theme-${this.mode}`;
-        },
         get mode() {
             return state.preference === 'system' ? state.system : state.preference;
         },
@@ -49,6 +58,7 @@ export default (store) => {
         set(preference) {
             touched = true;
             state.preference = preference;
+            apply(preference);
             if (preference === 'system') {
                 void store?.delete(KEY);
             }

package/build/components/theme/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{:root{--color-primary:light-dark(oklch(16% .0102 257),oklch(98% .0032 257));--color-surface:light-dark(oklch(98% .0032 257),oklch(16% .0102 257));--color-text:light-dark(oklch(36% .0325 257),oklch(90% .0162 257));--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-weight:0;--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));--color-primary-300:light-dark(oklch(from var(--color-primary) min(1, l + .03) c h),oklch(from var(--color-primary) min(1, l + .03) c h));--color-primary-400:var(--color-primary);--color-primary-500:light-dark(oklch(from var(--color-primary) max(0, l - .03) c h),oklch(from var(--color-primary) max(0, l - .03) c h));--background:var(--surface-background-default);--color:var(--color-text-400);--color-text-300:light-dark(oklch(from var(--color-text) min(1, pow(1.5 * (pow(l, 3) + .05) - .05, 1 / 3)) calc(c * min(1, (1 - min(1, pow(1.5 * (pow(l, 3) + .05) - .05, 1 / 3))) / max(1 - l, .01))) h),oklch(from var(--color-text) pow(max(0, (pow(l, 3) + .05) / 1.5 - .05), 1 / 3) calc(c * min(1, pow(max(0, (pow(l, 3) + .05) / 1.5 - .05), 1 / 3) / max(l, .01))) h));--color-text-400:var(--color-text);--color-text-500:light-dark(oklch(from var(--color-text) pow(max(0, (pow(l, 3) + .05) / 1.5 - .05), 1 / 3) calc(c * min(1, pow(max(0, (pow(l, 3) + .05) / 1.5 - .05), 1 / 3) / max(l, .01))) h),oklch(from var(--color-text) min(1, pow(1.5 * (pow(l, 3) + .05) - .05, 1 / 3)) calc(c * min(1, (1 - min(1, pow(1.5 * (pow(l, 3) + .05) - .05, 1 / 3))) / max(1 - l, .01))) h));color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}}
+/*$vite$:1*/

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

@@ -0,0 +1,52 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import type { Mode, Preference } from '../theme/index.js';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+declare const TOGGLE_OPTION: unique symbol;
+declare const TOGGLE_TRIGGER: unique symbol;
+type A = Attributes & {
+    mode: Theme;
+};
+type T = A & {
+    [TOGGLE_OPTION]?: Attributes;
+    [TOGGLE_TRIGGER]?: Attributes;
+    onconnect?: never;
+    ondocumentclick?: never;
+    onkeydown?: never;
+    onpointerenter?: never;
+    onpointerleave?: never;
+};
+type Theme = {
+    readonly mode: Mode;
+    readonly preference: Preference;
+    set(preference: Preference): void;
+};
+declare const _default: {
+    cards: {
+        (): template_u1.Renderable<any>;
+        <T extends A>(attributes: T): template_u1.Renderable<any>;
+        <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+        (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+        bind(context: {
+            attributes?: Partial<A> | undefined;
+            content?: template_u1.Renderable<any>;
+        }): any;
+    };
+    swatches: {
+        (): template_u1.Renderable<any>;
+        <T extends A>(attributes: T): template_u1.Renderable<any>;
+        <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+        (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+        bind(context: {
+            attributes?: Partial<A> | undefined;
+            content?: template_u1.Renderable<any>;
+        }): any;
+    };
+    toggle: template_u1.Factory<T, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+        readonly option: typeof TOGGLE_OPTION;
+        readonly trigger: typeof TOGGLE_TRIGGER;
+    }>;
+};
+export default _default;
+export type { Theme };

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

@@ -0,0 +1,167 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush } from '@esportsplus/reactivity';
+import faces from '../button/faces.js';
+import dismiss from '../../shared/dismiss.js';
+import monitor from '@esportsplus/ui/svg/monitor.svg';
+import moon from '@esportsplus/ui/svg/moon.svg';
+import sun from '@esportsplus/ui/svg/sun.svg';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+const template_0kyv8md2 = template_u1.template(`<svg aria-hidden='true' class='theme-picker-icon'><use />`);
+const template_0kyv8md5 = template_u1.template(`<div aria-label='Theme' class='theme-picker-cards' role='radiogroup'>`);
+const template_0kyv8md8 = template_u1.template(`<button class='theme-picker-cards-option'><span class='theme-picker-cards-preview '><span class='theme-picker-cards-preview-bar'></span><span class='theme-picker-cards-preview-line'></span><span class='theme-picker-cards-preview-line theme-picker-cards-preview-line--short'></span></span><span class='theme-picker-cards-label'>`);
+const template_0kyv8mdd = template_u1.template(`<div aria-label='Theme' class='theme-picker-swatches' role='radiogroup'>`);
+const template_0kyv8mdg = template_u1.template(`<button class='theme-picker-swatches-option'><span class='theme-picker-swatches-circle '></span><span class='theme-picker-swatches-label'>`);
+const template_0kyv8mdl = template_u1.template(`<div class='theme-picker-toggle'><button aria-haspopup='true' class='button button--feedback theme-picker-toggle-trigger' type='button'></button><div aria-label='Theme' class='theme-picker-toggle-menu' role='radiogroup'>`);
+const template_0kyv8mdq = template_u1.template(`<button class='theme-picker-toggle-option'>`);
+class ReactiveObject_0kyv8md0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+}
+const TOGGLE_OPTION = Symbol.for('@esportsplus/ui/theme-picker.toggle.option');
+const TOGGLE_TRIGGER = Symbol.for('@esportsplus/ui/theme-picker.toggle.trigger');
+const CHOICES = [
+    { icon: sun, label: 'Light', value: 'light' },
+    { icon: moon, label: 'Dark', value: 'dark' },
+    { icon: monitor, label: 'System', value: 'system' }
+];
+function choice(mode) {
+    return CHOICES.find((choice) => choice.value === mode.preference) ?? CHOICES[2];
+}
+function icon(id) {
+    return (() => {
+        let root_0kyv8md1 = template_0kyv8md2(), element_0kyv8md3 = root_0kyv8md1.firstChild.firstElementChild;
+        template_u1.setProperty(element_0kyv8md3, 'href', template_u1.interpolate(["#", (id)]));
+        return root_0kyv8md1;
+    })();
+}
+function radio(mode, choice) {
+    return {
+        'aria-checked': () => mode.preference === choice.value ? 'true' : 'false',
+        onclick: () => mode.set(choice.value),
+        role: 'radio',
+        type: 'button'
+    };
+}
+const cards = component(({ mode, ...attributes }) => {
+    let root_0kyv8md4 = template_0kyv8md5(), element_0kyv8md6 = root_0kyv8md4.firstChild;
+    template_u1.slot(element_0kyv8md6, CHOICES.map((choice) => {
+        let root_0kyv8md7 = template_0kyv8md8(), element_0kyv8md9 = root_0kyv8md7.firstChild, element_0kyv8mda = element_0kyv8md9.firstElementChild, element_0kyv8mdb = element_0kyv8mda.nextElementSibling;
+        template_u1.slot(element_0kyv8mdb, choice.label, 1);
+        template_u1.setList(element_0kyv8mda, 'class', template_u1.interpolate(["theme-picker-cards-preview--", (choice.value)]));
+        template_u1.setProperties(element_0kyv8md9, radio(mode, choice));
+        return root_0kyv8md7;
+    }), 1);
+    template_u1.setProperties(element_0kyv8md6, attributes);
+    return root_0kyv8md4;
+});
+const swatches = component(({ mode, ...attributes }) => {
+    let root_0kyv8mdc = template_0kyv8mdd(), element_0kyv8mde = root_0kyv8mdc.firstChild;
+    template_u1.slot(element_0kyv8mde, CHOICES.map((choice) => {
+        let root_0kyv8mdf = template_0kyv8mdg(), element_0kyv8mdh = root_0kyv8mdf.firstChild, element_0kyv8mdi = element_0kyv8mdh.firstElementChild, element_0kyv8mdj = element_0kyv8mdi.nextElementSibling;
+        template_u1.slot(element_0kyv8mdj, choice.label, 1);
+        template_u1.setList(element_0kyv8mdi, 'class', template_u1.interpolate(["theme-picker-swatches-circle--", (choice.value)]));
+        template_u1.setProperties(element_0kyv8mdh, radio(mode, choice));
+        return root_0kyv8mdf;
+    }), 1);
+    template_u1.setProperties(element_0kyv8mde, attributes);
+    return root_0kyv8mdc;
+});
+const toggle = component(({ mode, ...attributes }) => {
+    let options = [], state = new ReactiveObject_0kyv8md0(), trigger;
+    function close(focus = false) {
+        state.active = false;
+        if (focus) {
+            trigger?.focus();
+        }
+    }
+    function open(focus = false) {
+        state.active = true;
+        if (focus) {
+            flush();
+            options[CHOICES.indexOf(choice(mode))]?.focus();
+        }
+    }
+    return (() => {
+        let root_0kyv8mdk = template_0kyv8mdl(), element_0kyv8mdm = root_0kyv8mdk.firstChild, element_0kyv8mdn = element_0kyv8mdm.firstElementChild, element_0kyv8mdo = element_0kyv8mdn.nextElementSibling;
+        template_u1.slot(element_0kyv8mdn, faces(() => choice(mode).value, CHOICES.map((choice) => ({
+            content: '',
+            icon: () => icon(choice.icon),
+            key: choice.value
+        }))), 1);
+        template_u1.slot(element_0kyv8mdo, CHOICES.map((choice, i) => {
+            let root_0kyv8mdp = template_0kyv8mdq(), element_0kyv8mdr = root_0kyv8mdp.firstChild;
+            template_u1.slot(element_0kyv8mdr, icon(choice.icon), 1);
+            template_u1.setProperty(element_0kyv8mdr, 'aria-label', choice.label);
+            template_u1.setProperty(element_0kyv8mdr, 'title', choice.label);
+            template_u1.setProperties(element_0kyv8mdr, attributes[TOGGLE_OPTION]);
+            template_u1.setProperties(element_0kyv8mdr, radio(mode, choice));
+            template_u1.delegate(element_0kyv8mdr, 'click', () => {
+                mode.set(choice.value);
+                close(true);
+            });
+            template_u1.onconnect(element_0kyv8mdr, (element) => {
+                options[i] = element;
+            });
+            return root_0kyv8mdp;
+        }), 1);
+        template_u1.setProperty(element_0kyv8mdo, 'inert', () => !state.active);
+        template_u1.setProperties(element_0kyv8mdn, attributes[TOGGLE_TRIGGER]);
+        template_u1.setProperty(element_0kyv8mdn, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.setProperty(element_0kyv8mdn, 'aria-label', () => `Theme: ${choice(mode).label}`);
+        template_u1.delegate(element_0kyv8mdn, 'click', (event) => {
+            if (state.active) {
+                close();
+            }
+            else {
+                open(event.detail === 0);
+            }
+        });
+        template_u1.onconnect(element_0kyv8mdn, (element) => {
+            trigger = element;
+        });
+        template_u1.setProperties(element_0kyv8mdm, attributes);
+        template_u1.setList(element_0kyv8mdm, 'class', () => state.active && '--active');
+        template_u1.ondocument(element_0kyv8mdm, 'click', dismiss(() => state.active, () => close()));
+        template_u1.delegate(element_0kyv8mdm, 'keydown', (event) => {
+            if (!state.active) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.stopPropagation();
+                close(true);
+                return;
+            }
+            let step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            if (!step) {
+                return;
+            }
+            let i = options.indexOf(document.activeElement), n = options.length;
+            event.preventDefault();
+            options[((i === -1 ? CHOICES.indexOf(choice(mode)) : i) + step + n) % n]?.focus();
+        });
+        template_u1.on(element_0kyv8mdm, 'pointerenter', (event) => {
+            if (event.pointerType !== 'touch') {
+                open();
+            }
+        });
+        template_u1.on(element_0kyv8mdm, 'pointerleave', (event) => {
+            if (event.pointerType !== 'touch') {
+                close();
+            }
+        });
+        template_u1.setList(element_0kyv8mdm, 'style', () => `--index: ${CHOICES.indexOf(choice(mode))};`);
+        return root_0kyv8mdk;
+    })();
+}, { option: TOGGLE_OPTION, trigger: TOGGLE_TRIGGER });
+export default { cards, swatches, toggle };

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

@@ -0,0 +1,2 @@
+@layer components{.theme-picker-toggle-menu{--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){.theme-picker-toggle-menu{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.theme-picker-toggle-menu{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.theme-picker-toggle-menu{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.theme-picker-toggle-menu{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.theme-picker-toggle-menu{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.theme-picker-toggle-menu{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.theme-picker-toggle-menu{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.theme-picker-toggle-menu{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.theme-picker-toggle-menu{--surface-level:6;--surface-shadow-weight:6}}.theme-picker-toggle-option,.theme-picker-swatches-option,.theme-picker-cards-option{color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;padding:0}.theme-picker-toggle-option:focus-visible,.theme-picker-swatches-option:focus-visible,.theme-picker-cards-option:focus-visible{outline:2px solid var(--color-blue-400);outline-offset:calc(var(--size-100) / 4)}.theme-picker-cards{gap:var(--size-300);display:flex}.theme-picker-cards-label{color:var(--color-text-300);font-size:var(--font-size-200)}.theme-picker-cards-option{gap:var(--size-200);justify-items:center;display:grid}.theme-picker-cards-option[aria-checked=true] .theme-picker-cards-label{--font-weight:var(--font-weight-500);color:var(--color-text-500);font-weight:var(--font-weight)}.theme-picker-cards-option[aria-checked=true] .theme-picker-cards-preview{outline:2px solid var(--color-blue-400);outline-offset:calc(var(--size-100) / 4)}.theme-picker-cards-preview{border:1px solid var(--surface-border-default);border-radius:var(--border-radius-300);gap:calc(var(--size-200) / 2);width:64px;height:48px;padding:7px;display:grid;overflow:hidden}.theme-picker-cards-preview--dark{--bar:var(--color-white-300);background:var(--color-black-400)}.theme-picker-cards-preview--light{--bar:var(--color-black-300);background:var(--color-white-300)}.theme-picker-cards-preview--system{--bar:color-mix(in oklab, var(--color-white-300), var(--color-black-400));background:linear-gradient(135deg, var(--color-white-300) 50%, var(--color-black-400) 50%)}.theme-picker-cards-preview-bar{background:var(--bar);border-radius:var(--border-radius-100);opacity:.8;width:60%;height:6px}.theme-picker-cards-preview-line{background:var(--bar);border-radius:var(--border-radius-100);opacity:.35;height:4px}.theme-picker-cards-preview-line--short{width:70%}.theme-picker-icon{fill:none;height:var(--size-400);stroke:currentColor;width:var(--size-400);flex-shrink:0;display:block}.theme-picker-swatches{gap:var(--size-500);display:flex}.theme-picker-swatches-circle{border:1px solid var(--surface-border-hover);border-radius:50%;width:36px;height:36px;display:block}.theme-picker-swatches-circle--dark{background:var(--color-black-400)}.theme-picker-swatches-circle--light{background:var(--color-white-300)}.theme-picker-swatches-circle--system{background:linear-gradient(90deg, var(--color-white-300) 50%, var(--color-black-400) 50%)}.theme-picker-swatches-label{color:var(--color-text-300);font-size:var(--font-size-200)}.theme-picker-swatches-option{gap:var(--size-200);justify-items:center;display:grid}.theme-picker-swatches-option[aria-checked=true] .theme-picker-swatches-circle{box-shadow:0 0 0 2px var(--surface-background-default), 0 0 0 4px var(--color-blue-400)}.theme-picker-swatches-option[aria-checked=true] .theme-picker-swatches-label{--font-weight:var(--font-weight-500);color:var(--color-text-500);font-weight:var(--font-weight)}.theme-picker-toggle{--trigger-size:36px;display:inline-flex;position:relative}.theme-picker-toggle-menu{--border-width:var(--border-width-400);--center:calc(var(--border-width) + var(--padding) + var(--index) * (var(--option-size) + var(--gap)) + var(--option-size) / 2);--count:3;--gap:calc(var(--size-100) / 4);--option-size:28px;--padding:calc(var(--size-300) / 4);--width:calc(var(--count) * var(--option-size) + (var(--count) - 1) * var(--gap) + 2 * (var(--padding) + var(--border-width)));background:var(--surface-background-default);border:var(--border-width) solid var(--surface-border-default);box-shadow:var(--surface-shadow-default);clip-path:inset(0 calc(var(--width) - var(--center) - var(--trigger-size) / 2) 0 calc(var(--center) - var(--trigger-size) / 2) round var(--border-radius-400));gap:var(--gap);left:calc(var(--trigger-size) / 2 - var(--center));opacity:0;padding:var(--padding);top:calc((var(--trigger-size) - var(--option-size)) / 2 - var(--padding) - var(--border-width));transition:clip-path var(--duration-moderate-exit) var(--easing-spring), opacity var(--duration-fast) var(--easing-spring), visibility 0s linear var(--duration-moderate-exit);visibility:hidden;width:var(--width);z-index:10;border-radius:999px;display:flex;position:absolute}.theme-picker-toggle.--active>.theme-picker-toggle-menu{clip-path:inset(0 round 999px);opacity:1;transition:clip-path var(--duration-moderate) var(--easing-spring), opacity var(--duration-fast-exit) var(--easing-spring);visibility:visible}@media (prefers-reduced-motion:reduce){.theme-picker-toggle-menu,.theme-picker-toggle.--active>.theme-picker-toggle-menu{transition:opacity var(--duration-fast) var(--easing-spring), visibility 0s linear var(--duration-fast)}}.theme-picker-toggle-option{color:var(--color-text-300);flex:0 0 var(--option-size);height:var(--option-size);transition:background-color var(--duration-fast) var(--easing-spring), color var(--duration-fast) var(--easing-spring);border-radius:999px;justify-content:center;align-items:center;display:flex}.theme-picker-toggle-option:hover,.theme-picker-toggle-option[aria-checked=true]{color:var(--color-text-500)}.theme-picker-toggle-option[aria-checked=true]{background:var(--surface-background-active)}.theme-picker-toggle-trigger.button{--background-hover:var(--surface-background-hover);--border-color-default:var(--surface-border-default);--border-radius:var(--border-radius-400);--border-width:var(--border-width-400);--color-default:var(--color-text-400);--color-hover:var(--color-text-500);--icon-size:var(--size-400);--padding-horizontal:0px;--padding-vertical:0px;border:var(--border-width) solid var(--border-color);height:var(--trigger-size);transition:opacity var(--duration-fast) var(--easing-spring);width:var(--trigger-size)}.theme-picker-toggle.--active>.theme-picker-toggle-trigger.button{opacity:0}}
+/*$vite$:1*/

package/build/components/toast/index.js

@@ -58,11 +58,7 @@ const DURATION = 4000;
 const LIMIT = 3;
 const UNPLACED = { x: 1, y: -1 };
 function row(toast, layout, remove) {
-    let element, frontmost = 0, local = new ReactiveObject_1ali9cs0(null, null);
-    let size = observeSize(({ height }) => {
-        toast.measured.height = height;
-    });
-    let gesture = drag({
+    let element, frontmost = 0, gesture = drag({
         begin: (e, element) => e.button === 0 ? toward(edge(element.closest('.toaster') ?? element, 'toaster') ?? UNPLACED) : null,
         capture: () => {
             local.swiping = true;
@@ -79,6 +75,8 @@ function row(toast, layout, remove) {
             }
             local.swipe = null;
         }
+    }), local = new ReactiveObject_1ali9cs0(null, null), size = observeSize(({ height }) => {
+        toast.measured.height = height;
     });
     return (() => {
         let root_1ali9cs7 = template_1ali9cs8(), element_1ali9cs9 = root_1ali9cs7.firstChild, element_1ali9csa = element_1ali9cs9.firstElementChild;

package/build/components/toast/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.toaster{--opacity:0;--stack-span:50%;--stack-translate:0 calc(var(--stack-shift) * -1);--translate:var(--translate-x) var(--translate-y);--translate-x:0px;--translate-y:0px}.toaster--e,.toaster--n,.toaster:not([class*=toaster--]),.toaster--ne,.toaster--nw,.toaster--s,.toaster--se,.toaster--sw,.toaster--w{--opacity:1;--stack-span:100%}.toaster--e{--stack-translate:calc(var(--stack-shift) * -1) 0;--translate-x:calc(100% + var(--margin-horizontal));--translate-y:0px}.toaster--n,.toaster:not([class*=toaster--]),.toaster--ne,.toaster--nw{--stack-translate:0 var(--stack-shift);--translate-x:0px;--translate-y:calc(-100% - var(--margin-vertical))}.toaster--s,.toaster--se,.toaster--sw{--stack-translate:0 calc(var(--stack-shift) * -1);--translate-x:0px;--translate-y:calc(100% + var(--margin-vertical))}.toaster--w{--stack-translate:var(--stack-shift) 0;--translate-x:calc(-100% - var(--margin-horizontal));--translate-y:0px}.toaster{--margin-horizontal:var(--size-500);--margin-vertical:var(--size-500);--stack-peek:var(--size-300);--stack-scale:.94;--toast-anchor-height:0px;--toast-count:0;--toast-direction:1;--toast-frontmost-height:0px;--toast-gap:var(--size-300);--toast-hidden:0;--toast-limit:3;--toast-overflow-peek:24px;--toast-stack-height:0px;--toast-transition-duration:.4s;--toast-transition-timing-function:cubic-bezier(.22, 1, .36, 1);--toast-width:360px}.toaster--s,.toaster--se,.toaster--sw{--toast-direction:-1}.toast{--depth:min(var(--toast-index), var(--toast-limit) - 1);--fling-duration:.5s;--stack-shift:calc(var(--toast-frontmost-height) + var(--depth) * var(--stack-peek) - var(--toast-scale) * var(--toast-height));--stack-translate:0 var(--stack-shift);--toast-bleed:32px;--toast-content-gap:var(--size-300);--toast-content-opacity:1;--toast-duration:0s;--toast-exit-duration:.3s;--toast-exit-timing-function:var(--toast-transition-timing-function);--toast-expanded-y:calc((var(--toast-offset-y) + var(--toast-index) * var(--toast-gap)) * var(--toast-direction));--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:pow(var(--stack-scale), var(--depth));--toast-seconds:0;--toast-swipe-x:0px;--toast-swipe-y:0px}@media (prefers-reduced-motion:reduce){.toast{--fling-duration:0s}}.toast-close.button{--background-default:var(--color-white-300);--background-hover:var(--color-grey-400);--border-radius:999px;--box-shadow-default:0 0 0 var(--border-width-400) var(--color-border-400);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--icon-size:10px;--offset:calc(var(--size-200) * -1);--padding-horizontal:0px;--padding-vertical:0px;--size:var(--size-500)}@property --toast-progress{syntax:"<number>";inherits:true;initial-value:0}.toaster{height:max(0px, var(--toast-frontmost-height) + (min(var(--toast-count), var(--toast-limit)) - 1) * var(--stack-peek) + min(1, var(--toast-hidden)) * var(--toast-overflow-peek));inset:var(--margin-vertical) var(--margin-horizontal) auto auto;transition:translate var(--toast-transition-duration) var(--toast-transition-timing-function);width:min(var(--toast-width), 100% - var(--margin-horizontal) * 2);z-index:9999;position:fixed}.toaster--e{inset:50% var(--margin-horizontal) auto auto;translate:0 calc(var(--toast-anchor-height) / -2)}.toaster--n{inset:var(--margin-vertical) auto auto 50%;translate:-50%}.toaster--ne{inset:var(--margin-vertical) var(--margin-horizontal) auto auto}.toaster--nw{inset:var(--margin-vertical) auto auto var(--margin-horizontal)}.toaster--s{inset:auto auto var(--margin-vertical) 50%;translate:-50%}.toaster--se{inset:auto var(--margin-horizontal) var(--margin-vertical) auto}.toaster--sw{inset:auto auto var(--margin-vertical) var(--margin-horizontal)}.toaster--w{inset:50% auto auto var(--margin-horizontal);translate:0 calc(var(--toast-anchor-height) / -2)}.toaster>.toast{clip-path:inset(calc(var(--toast-bleed) * -1));scale:var(--toast-scale);touch-action:none;transform:translate(var(--toast-swipe-x), var(--toast-swipe-y));transform-origin:top;transition:clip-path var(--toast-transition-duration) var(--toast-transition-timing-function), opacity var(--toast-transition-duration) var(--toast-transition-timing-function), scale var(--toast-transition-duration) var(--toast-transition-timing-function), transform var(--toast-transition-duration) var(--toast-transition-timing-function), translate var(--toast-transition-duration) var(--toast-transition-timing-function);translate:var(--stack-translate);-webkit-user-select:none;user-select:none;z-index:calc(9999 - var(--toast-index));inset-inline:0;position:absolute;top:0}.toaster>.toast.toast--behind{--toast-content-opacity:0;clip-path:inset(calc(100% - var(--toast-frontmost-height)) calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1))}.toaster>.toast.toast--hidden{opacity:0}.toaster>.toaster-overflow{height:var(--toast-frontmost-height);inset-inline:calc((1 - pow(var(--stack-scale), var(--toast-limit))) * 50%);line-height:var(--toast-overflow-peek);opacity:min(1, var(--toast-hidden));pointer-events:none;transition:opacity var(--toast-transition-duration) var(--toast-transition-timing-function), translate var(--toast-transition-duration) var(--toast-transition-timing-function);translate:0 calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * var(--toast-direction));z-index:calc(9999 - var(--toast-limit));justify-content:center;align-items:flex-end;display:flex;position:absolute;top:0}.toaster--s>.toast,.toaster--se>.toast,.toaster--sw>.toast{--stack-translate:0 calc(var(--stack-shift) * -1);transform-origin:bottom;top:auto;bottom:0}.toaster--s>.toast.toast--behind,.toaster--se>.toast.toast--behind,.toaster--sw>.toast.toast--behind{clip-path:inset(calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1) calc(100% - var(--toast-frontmost-height)))}.toaster--s>.toaster-overflow,.toaster--se>.toaster-overflow,.toaster--sw>.toaster-overflow{align-items:flex-start;top:auto;bottom:0}.toaster--e,.toaster--w{height:var(--toast-frontmost-height)}.toaster--e>.toast,.toaster--w>.toast{--stack-shift:calc(var(--depth) * var(--stack-peek) + (1 - var(--toast-scale)) * var(--stack-span))}.toaster--e>.toast.toast--behind,.toaster--w>.toast.toast--behind{clip-path:inset(calc((100% - var(--toast-frontmost-height)) / 2) calc(var(--toast-bleed) * -1))}.toaster--e>.toaster-overflow,.toaster--w>.toaster-overflow{height:calc(var(--toast-frontmost-height) * pow(var(--stack-scale), var(--toast-limit)));bottom:auto;left:0;right:0;top:calc(var(--toast-frontmost-height) * (1 - pow(var(--stack-scale), var(--toast-limit))) / 2);writing-mode:vertical-rl}.toaster--e>.toast{--stack-translate:calc(var(--stack-shift) * -1) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);transform-origin:100%}.toaster--e>.toaster-overflow{translate:calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * -1) 0}.toaster--w>.toast{--stack-translate:var(--stack-shift) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);transform-origin:0}.toaster--w>.toaster-overflow{translate:calc((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) 0;align-items:flex-start}.toaster>.toast.toast--timed{animation:toast-timer var(--toast-duration) linear forwards}.toaster:is(:hover,:focus-within)>.toast,.toaster>.toast.toast--behind,.toaster>.toast.toast--swiping{animation-play-state:paused}.toaster:is(:hover,:focus-within){height:max(0px, var(--toast-stack-height) + (var(--toast-count) - 1) * var(--toast-gap))}.toaster:is(:hover,:focus-within)>.toast{--toast-content-opacity:1;opacity:1;scale:1;translate:0 var(--toast-expanded-y)}.toaster:is(:hover,:focus-within)>.toast,.toaster:is(:hover,:focus-within)>.toast.toast--behind{clip-path:inset(calc(var(--toast-bleed) * -1))}.toaster:is(:hover,:focus-within)>.toaster-overflow{opacity:0}.toaster>.toast.toast--swiping{transition:none}.toaster>.toast.toast--ending{animation:toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards;pointer-events:none}.toaster>.toast.toast--ending.toast--timed{animation:toast-timer var(--toast-duration) linear forwards paused, toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards}.toaster>.toast.toast--ending.toast--flung{animation-name:toast-fling}.toaster>.toast.toast--ending.toast--flung.toast--timed{animation-name:toast-timer,toast-fling}@starting-style{.toaster>.toast{opacity:0;scale:1;transform:translate(var(--translate-x), var(--translate-y))}}.toast-close-icon{height:var(--icon-size);width:var(--icon-size)}.toast-close.button{height:var(--size);opacity:var(--toast-content-opacity);inset-inline-end:var(--offset);top:var(--offset);width:var(--size);z-index:1;position:absolute}.toast-content{align-items:center;gap:var(--toast-content-gap);min-width:0;opacity:var(--toast-content-opacity);display:flex}@media (prefers-reduced-motion:reduce){.toaster{--translate-x:0px;--translate-y:0px}.toaster>.toast{transition:none}.toaster>.toast.toast--ending{animation-name:toast-fade}.toaster>.toast.toast--ending.toast--timed{animation-name:toast-timer,toast-fade}}@keyframes toast-exit{to{opacity:0;transform:translate(calc(var(--toast-swipe-x) + var(--translate-x)), calc(var(--toast-swipe-y) + var(--translate-y)))}}@keyframes toast-fade{to{opacity:0}}@keyframes toast-fling{to{transform:translate(calc(var(--toast-swipe-x) + var(--translate-x)), calc(var(--toast-swipe-y) + var(--translate-y)))}}@keyframes toast-timer{0%{--toast-progress:0}to{--toast-progress:1}}}
+@layer components{.toaster{--opacity:0;--stack-span:50%;--stack-translate:0 calc(var(--stack-shift) * -1);--translate:var(--translate-x) var(--translate-y);--translate-x:0px;--translate-y:0px}.toaster--e{--stack-translate:calc(var(--stack-shift) * -1) 0;--translate-x:calc(100% + var(--margin-horizontal));--translate-y:0px}.toaster--e,.toaster--n,.toaster:not([class*=toaster--]),.toaster--ne,.toaster--nw,.toaster--s,.toaster--se,.toaster--sw,.toaster--w{--opacity:1;--stack-span:100%}.toaster--n,.toaster:not([class*=toaster--]),.toaster--ne,.toaster--nw{--stack-translate:0 var(--stack-shift);--translate-x:0px;--translate-y:calc(-100% - var(--margin-vertical))}.toaster--s,.toaster--se,.toaster--sw{--stack-translate:0 calc(var(--stack-shift) * -1);--translate-x:0px;--translate-y:calc(100% + var(--margin-vertical))}.toaster--w{--stack-translate:var(--stack-shift) 0;--translate-x:calc(-100% - var(--margin-horizontal));--translate-y:0px}.toast{--depth:min(var(--toast-index), var(--toast-limit) - 1);--fling-duration:.5s;--stack-shift:calc(var(--toast-frontmost-height) + var(--depth) * var(--stack-peek) - var(--toast-scale) * var(--toast-height));--stack-translate:0 var(--stack-shift);--toast-bleed:32px;--toast-content-gap:var(--size-300);--toast-content-opacity:1;--toast-duration:0s;--toast-exit-duration:var(--duration-slow-exit);--toast-exit-timing-function:var(--easing-spring);--toast-expanded-y:calc((var(--toast-offset-y) + var(--toast-index) * var(--toast-gap)) * var(--toast-direction));--toast-height:0px;--toast-index:0;--toast-offset-y:0px;--toast-scale:pow(var(--stack-scale), var(--depth));--toast-seconds:0;--toast-swipe-x:0px;--toast-swipe-y:0px}@media (prefers-reduced-motion:reduce){.toast{--fling-duration:0s}}.toast-close.button{--background-default:var(--surface-background-default);--background-hover:var(--surface-background-hover);--border-radius:999px;--box-shadow-default:0 0 0 var(--border-width-400) var(--surface-border-hover);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--icon-size:var(--size-200);--offset:calc(var(--size-200) * -1);--padding-horizontal:0px;--padding-vertical:0px;--size:var(--size-500)}.toaster{--margin-horizontal:var(--size-500);--margin-vertical:var(--size-500);--stack-peek:var(--size-300);--stack-scale:.94;--toast-anchor-height:0px;--toast-count:0;--toast-direction:1;--toast-frontmost-height:0px;--toast-gap:var(--size-300);--toast-hidden:0;--toast-limit:3;--toast-overflow-peek:24px;--toast-stack-height:0px;--toast-transition-duration:var(--duration-slow);--toast-transition-timing-function:var(--easing-spring-bounce);--toast-width:360px}.toaster--s,.toaster--se,.toaster--sw{--toast-direction:-1}@property --toast-progress{syntax:"<number>";inherits:true;initial-value:0}.toaster{height:max(0px, var(--toast-frontmost-height) + (min(var(--toast-count), var(--toast-limit)) - 1) * var(--stack-peek) + min(1, var(--toast-hidden)) * var(--toast-overflow-peek));inset:var(--margin-vertical) var(--margin-horizontal) auto auto;transition:translate var(--toast-transition-duration) var(--toast-transition-timing-function);width:min(var(--toast-width), 100% - var(--margin-horizontal) * 2);z-index:9999;position:fixed}.toaster--e{inset:50% var(--margin-horizontal) auto auto;translate:0 calc(var(--toast-anchor-height) / -2)}.toaster--e>.toast{--stack-translate:calc(var(--stack-shift) * -1) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);transform-origin:100%}.toaster--e>.toaster-overflow{translate:calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * -1) 0}.toaster--e,.toaster--w{height:var(--toast-frontmost-height)}.toaster--e>.toast,.toaster--w>.toast{--stack-shift:calc(var(--depth) * var(--stack-peek) + (1 - var(--toast-scale)) * var(--stack-span))}.toaster--e>.toast.toast--behind,.toaster--w>.toast.toast--behind{clip-path:inset(calc((100% - var(--toast-frontmost-height)) / 2) calc(var(--toast-bleed) * -1))}.toaster--e>.toaster-overflow,.toaster--w>.toaster-overflow{height:calc(var(--toast-frontmost-height) * pow(var(--stack-scale), var(--toast-limit)));bottom:auto;left:0;right:0;top:calc(var(--toast-frontmost-height) * (1 - pow(var(--stack-scale), var(--toast-limit))) / 2);writing-mode:vertical-rl}.toaster--n{inset:var(--margin-vertical) auto auto 50%;translate:-50%}.toaster--ne{inset:var(--margin-vertical) var(--margin-horizontal) auto auto}.toaster--nw{inset:var(--margin-vertical) auto auto var(--margin-horizontal)}.toaster--s{inset:auto auto var(--margin-vertical) 50%;translate:-50%}.toaster--s>.toast,.toaster--se>.toast,.toaster--sw>.toast{--stack-translate:0 calc(var(--stack-shift) * -1);transform-origin:bottom;top:auto;bottom:0}.toaster--s>.toast.toast--behind,.toaster--se>.toast.toast--behind,.toaster--sw>.toast.toast--behind{clip-path:inset(calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1) calc(100% - var(--toast-frontmost-height)))}.toaster--s>.toaster-overflow,.toaster--se>.toaster-overflow,.toaster--sw>.toaster-overflow{align-items:flex-start;top:auto;bottom:0}.toaster--se{inset:auto var(--margin-horizontal) var(--margin-vertical) auto}.toaster--sw{inset:auto auto var(--margin-vertical) var(--margin-horizontal)}.toaster--w{inset:50% auto auto var(--margin-horizontal);translate:0 calc(var(--toast-anchor-height) / -2)}.toaster--w>.toast{--stack-translate:var(--stack-shift) calc((var(--toast-frontmost-height) - var(--toast-height)) / 2);transform-origin:0}.toaster--w>.toaster-overflow{translate:calc((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) 0;align-items:flex-start}.toaster>.toast{clip-path:inset(calc(var(--toast-bleed) * -1));scale:var(--toast-scale);touch-action:none;transform:translate(var(--toast-swipe-x), var(--toast-swipe-y));transform-origin:top;transition:clip-path var(--toast-transition-duration) var(--toast-transition-timing-function), opacity var(--toast-transition-duration) var(--toast-transition-timing-function), scale var(--toast-transition-duration) var(--toast-transition-timing-function), transform var(--toast-transition-duration) var(--toast-transition-timing-function), translate var(--toast-transition-duration) var(--toast-transition-timing-function);translate:var(--stack-translate);-webkit-user-select:none;user-select:none;z-index:calc(9999 - var(--toast-index));inset-inline:0;position:absolute;top:0}.toaster>.toast.toast--behind{--toast-content-opacity:0;clip-path:inset(calc(100% - var(--toast-frontmost-height)) calc(var(--toast-bleed) * -1) calc(var(--toast-bleed) * -1))}.toaster>.toast.toast--hidden{opacity:0}.toaster>.toast.toast--timed{animation:toast-timer var(--toast-duration) linear forwards}.toaster>.toaster-overflow{height:var(--toast-frontmost-height);inset-inline:calc((1 - pow(var(--stack-scale), var(--toast-limit))) * 50%);line-height:var(--toast-overflow-peek);opacity:min(1, var(--toast-hidden));pointer-events:none;transition:opacity var(--toast-transition-duration) var(--toast-transition-timing-function), translate var(--toast-transition-duration) var(--toast-transition-timing-function);translate:0 calc(((var(--toast-limit) - 1) * var(--stack-peek) + var(--toast-overflow-peek)) * var(--toast-direction));z-index:calc(9999 - var(--toast-limit));justify-content:center;align-items:flex-end;display:flex;position:absolute;top:0}.toaster:is(:hover,:focus-within)>.toast,.toaster>.toast.toast--behind,.toaster>.toast.toast--swiping{animation-play-state:paused}.toaster:is(:hover,:focus-within){height:max(0px, var(--toast-stack-height) + (var(--toast-count) - 1) * var(--toast-gap))}.toaster:is(:hover,:focus-within)>.toast{--toast-content-opacity:1;opacity:1;scale:1;translate:0 var(--toast-expanded-y)}.toaster:is(:hover,:focus-within)>.toast,.toaster:is(:hover,:focus-within)>.toast.toast--behind{clip-path:inset(calc(var(--toast-bleed) * -1))}.toaster:is(:hover,:focus-within)>.toaster-overflow{opacity:0}.toaster>.toast.toast--ending{animation:toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards;pointer-events:none}.toaster>.toast.toast--ending.toast--flung{animation-name:toast-fling}.toaster>.toast.toast--ending.toast--flung.toast--timed{animation-name:toast-timer,toast-fling}.toaster>.toast.toast--ending.toast--timed{animation:toast-timer var(--toast-duration) linear forwards paused, toast-exit var(--toast-exit-duration) var(--toast-exit-timing-function) forwards}.toaster>.toast.toast--swiping{transition:none}@starting-style{.toaster>.toast{opacity:0;scale:1;transform:translate(var(--translate-x), var(--translate-y))}}.toast-close-icon{height:var(--icon-size);width:var(--icon-size)}.toast-close.button{height:var(--size);opacity:var(--toast-content-opacity);inset-inline-end:var(--offset);top:var(--offset);width:var(--size);z-index:1;position:absolute}.toast-content{align-items:center;gap:var(--toast-content-gap);min-width:0;opacity:var(--toast-content-opacity);display:flex}@media (prefers-reduced-motion:reduce){.toaster{--translate-x:0px;--translate-y:0px}.toaster>.toast{transition:none}.toaster>.toast.toast--ending{animation-name:toast-fade}.toaster>.toast.toast--ending.toast--timed{animation-name:toast-timer,toast-fade}}@keyframes toast-exit{to{opacity:0;transform:translate(calc(var(--toast-swipe-x) + var(--translate-x)), calc(var(--toast-swipe-y) + var(--translate-y)))}}@keyframes toast-fade{to{opacity:0}}@keyframes toast-fling{to{transform:translate(calc(var(--toast-swipe-x) + var(--translate-x)), calc(var(--toast-swipe-y) + var(--translate-y)))}}@keyframes toast-timer{0%{--toast-progress:0}to{--toast-progress:1}}}
 /*$vite$:1*/

package/build/components/tooltip/menu.js

@@ -260,7 +260,9 @@ function createMenu(context = false) {
             enabled(node)[0]?.button?.focus();
         }
         function instant() {
-            return !root.panel || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0;
+            return !root.panel
+                || parseFloat(getComputedStyle(root.panel).getPropertyValue('--open-duration')) === 0
+                || matchMedia('(prefers-reduced-motion: reduce)').matches;
         }
         function open(focus = true) {
             stay();