@esportsplus/ui 0.57.0 → 0.58.0

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

@@ -10,4 +10,4 @@ declare const nav: {
 export default nav;
 export type { Mode, Spy } from './spy.js';
 export type { TocLink } from './toc.js';
-export type { Current, TreeGroup, TreeLink, TreeSection } from './tree.js';
+export type { Current, Indicator, TreeGroup, TreeLink, TreeSection } from './tree.js';

package/build/components/nav/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.nav-tree-link{--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.nav-tree-link{--border-color:var(--border-color-active)}.nav-tree-link:not(.--active):hover{--border-color:var(--border-color-hover)}.nav-tree-link:not(.--active):active{--border-color:var(--border-color-pressed)}.nav-tree-link{--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.nav-tree-link{--color:var(--color-active)}.nav-tree-link:not(.--active):hover{--color:var(--color-hover)}.nav-tree-link:not(.--active):active{--color:var(--color-pressed)}.nav-tree-link,.nav-tree-title{--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.nav-tree-link,.--text-truncate.nav-tree-title{display:block}.nav-tree-link--truncate{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.nav-tree{--focus-color:var(--color-blue-400);--focus-width:var(--border-width-400);--highlight-background-active:var(--color-black-400);--highlight-background-hover:var(--color-grey-400);--highlight-background-pressed:var(--color-grey-500);--highlight-color:var(--color-white-400);--indicator-color:var(--color-blue-400);--indicator-width:var(--border-width-400);--link-border-color:var(--color-border-400);--link-border-color-active:var(--link-border-color);--link-border-color-hover:var(--color-text-400);--link-border-radius:0px;--link-border-width:var(--border-width-400);--link-color:var(--color-text-400);--link-color-active:var(--color-black-500);--link-font-size:var(--font-size-300);--link-font-weight:var(--font-weight-300);--link-font-weight-active:var(--font-weight-500);--link-inset:0px;--link-padding-horizontal:var(--size-300);--link-padding-vertical:var(--size-100);--section-gap:var(--size-600);--title-color:var(--color-text-400);--title-font-size:var(--font-size-200);--title-font-weight:var(--font-weight-500);--title-font-weight-active:var(--font-weight-600);--title-spacing:var(--size-100)}.nav-tree--command{--highlight-background-active:var(--color-grey-400);--highlight-color:var(--color-text-500)}.nav-tree--highlight{--link-border-color:transparent;--link-border-color-active:transparent;--link-border-color-hover:transparent;--link-border-radius:var(--border-radius-300);--link-color-active:var(--highlight-color);--link-inset:var(--size-300)}.nav-tree--toc{--link-border-color-active:var(--link-color-active)}.nav-tree-highlight.highlight{--background-active:var(--highlight-background-active);--background-hover:var(--highlight-background-hover);--background-pressed:var(--highlight-background-pressed);--glide-duration:.2s;--glide-duration-active:.25s;--scale-hidden:1}.nav-tree{gap:var(--section-gap);flex-direction:column;display:flex}.nav-tree--command :is(.command-label,.command-match){color:inherit}.nav-tree-group,.nav-tree-links{flex-direction:column;display:flex}.nav-tree-group.--hidden,.nav-tree-link.--hidden,.nav-tree-links.--hidden{display:none}.nav-tree-indicator{background:var(--indicator-color);opacity:0;pointer-events:none;height:0;transition:display .16s allow-discrete, height .32s cubic-bezier(.34, 1.36, .64, 1), opacity .16s ease, transform .32s cubic-bezier(.34, 1.36, .64, 1);width:var(--indicator-width);display:none;position:absolute;top:0;left:0}.nav-tree-indicator.--active{opacity:1;display:block}@starting-style{.nav-tree-indicator.--active{opacity:0}}@media (prefers-reduced-motion:reduce){.nav-tree-indicator{transition:none}}.nav-tree-link{--border-color-active:var(--link-border-color-active);--border-color-default:var(--link-border-color);--border-color-hover:var(--link-border-color-hover);--border-color-pressed:var(--border-color-hover);--color-active:var(--link-color-active);--color-default:var(--link-color);--font-size:var(--link-font-size);--font-weight:var(--link-font-weight);border-left:var(--link-border-width) solid var(--border-color);border-radius:var(--link-border-radius);cursor:pointer;padding-block:max(0px, var(--link-padding-vertical) - var(--link-border-width));padding-inline:max(0px, var(--link-padding-horizontal) - var(--link-border-width));text-transform:capitalize;transition:border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start}.nav-tree-link:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.nav-tree-link--truncate{display:block}.nav-tree-link.--active{--font-weight:var(--link-font-weight-active)}.nav-tree-links{position:relative}.nav-tree-links,.nav-tree-title.nav-tree-link{margin-inline:calc(var(--link-inset) * -1)}.nav-tree-title{--color-default:var(--title-color);--font-size:var(--title-font-size);--font-weight:var(--title-font-weight);text-transform:uppercase}.nav-tree-title.nav-tree-link.--active{--font-weight:var(--title-font-weight-active)}.nav-tree-title:not(.nav-tree-link){margin-block:var(--title-spacing)}}
+@layer components{.nav-tree-link{--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.nav-tree-link{--border-color:var(--border-color-active)}.nav-tree-link:not(.--active):hover{--border-color:var(--border-color-hover)}.nav-tree-link:not(.--active):active{--border-color:var(--border-color-pressed)}.nav-tree-link{--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.nav-tree-link{--color:var(--color-active)}.nav-tree-link:not(.--active):hover{--color:var(--color-hover)}.nav-tree-link:not(.--active):active{--color:var(--color-pressed)}.nav-tree-link,.nav-tree-title{--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}.nav-tree-link.nav-tree-link--truncate,.nav-tree-title.nav-tree-link--truncate{display:block}.nav-tree-link--truncate{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}}.nav-tree-highlight.highlight{--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){.nav-tree-highlight.highlight{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.nav-tree-highlight.highlight{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.nav-tree-highlight.highlight{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.nav-tree-highlight.highlight{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.nav-tree-highlight.highlight{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.nav-tree-highlight.highlight{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.nav-tree-highlight.highlight{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.nav-tree-highlight.highlight{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.nav-tree-highlight.highlight{--surface-level:6;--surface-shadow-weight:6}}.nav-tree{--focus-color:var(--color-blue-400);--focus-width:var(--border-width-400);--highlight-background-active:var(--color-primary-400);--highlight-background-hover:var(--surface-background-hover);--highlight-background-pressed:var(--surface-background-pressed);--highlight-color:var(--surface-background-default);--indicator-color:var(--color-blue-400);--indicator-width:var(--border-width-400);--link-border-color:var(--surface-border-hover);--link-border-color-active:var(--link-border-color);--link-border-color-hover:var(--color-primary-400);--link-border-radius:0px;--link-border-width:var(--border-width-400);--link-color:var(--color-text-400);--link-color-active:var(--color-text-500);--link-font-size:var(--font-size-300);--link-font-weight:var(--font-weight-300);--link-font-weight-active:var(--font-weight-500);--link-inset:0px;--link-padding-horizontal:var(--size-300);--link-padding-vertical:var(--size-100);--section-gap:var(--size-600);--title-color:var(--color-text-400);--title-font-size:var(--font-size-200);--title-font-weight:var(--font-weight-500);--title-font-weight-active:var(--font-weight-600);--title-spacing:var(--size-100)}.nav-tree--command{--highlight-background-active:var(--surface-background-active);--highlight-color:var(--color-primary-500)}.nav-tree--highlight{--link-border-color:transparent;--link-border-color-active:transparent;--link-border-color-hover:transparent;--link-border-radius:var(--border-radius-300);--link-color-active:var(--highlight-color);--link-inset:var(--size-300)}.nav-tree--highlight.nav-tree--border{--link-color-active:var(--color-text-500)}.nav-tree--location{--highlight-background-active:var(--surface-background-active);--highlight-background-hover:var(--surface-background-hover);--highlight-background-pressed:var(--surface-background-pressed)}.nav-tree--toc{--link-border-color-active:var(--link-color-active)}.nav-tree-highlight.highlight{--background-active:var(--highlight-background-active);--background-hover:var(--highlight-background-hover);--background-pressed:var(--highlight-background-pressed);--glide-duration:var(--duration-moderate);--glide-duration-active:var(--duration-moderate);--line-color:var(--indicator-color);--line-width:var(--indicator-width);--scale-hidden:1}.nav-tree{gap:var(--section-gap);flex-direction:column;display:flex}.nav-tree--command :is(.command-label,.command-match){color:inherit}.nav-tree-group.--hidden,.nav-tree-link.--hidden,.nav-tree-links.--hidden{display:none}.nav-tree-group,.nav-tree-links{flex-direction:column;display:flex}.nav-tree-link{--border-color-active:var(--link-border-color-active);--border-color-default:var(--link-border-color);--border-color-hover:var(--link-border-color-hover);--border-color-pressed:var(--border-color-hover);--color-active:var(--link-color-active);--color-default:var(--link-color);--font-size:var(--link-font-size);--font-weight:var(--link-font-weight);border-left:var(--link-border-width) solid var(--border-color);border-radius:var(--link-border-radius);cursor:pointer;padding-block:max(0px, var(--link-padding-vertical) - var(--link-border-width));padding-inline:max(0px, var(--link-padding-horizontal) - var(--link-border-width));text-transform:capitalize;transition:border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start}.nav-tree-link--truncate{display:block}.nav-tree-link:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.nav-tree-link.--active{--font-weight:var(--link-font-weight-active)}.nav-tree-links{position:relative}.nav-tree-links,.nav-tree-title.nav-tree-link{margin-inline:calc(var(--link-inset) * -1)}.nav-tree-title{--color-default:var(--title-color);--font-size:var(--title-font-size);--font-weight:var(--title-font-weight);text-transform:uppercase}.nav-tree-title.nav-tree-link.--active{--font-weight:var(--title-font-weight-active)}.nav-tree-title:not(.nav-tree-link){margin-block:var(--title-spacing)}}
 /*$vite$:1*/

package/build/components/nav/tree.d.ts

@@ -2,9 +2,11 @@ import { type Attributes, type Renderable } from '@esportsplus/template';
 type A = Attributes & {
     active?: () => string | undefined;
     current?: Current;
+    indicator?: Indicator;
     sections: TreeSection[];
 };
 type Current = 'command' | 'location' | 'page';
+type Indicator = 'background' | 'border' | 'both';
 type TreeGroup = {
     label?: string;
     links: TreeLink[];
@@ -36,4 +38,4 @@ declare const _default: {
     }): any;
 };
 export default _default;
-export type { Current, TreeGroup, TreeLink, TreeSection };
+export type { Current, Indicator, TreeGroup, TreeLink, TreeSection };

package/build/components/nav/tree.js

@@ -1,51 +1,20 @@
-import { effect, onCleanup, read, signal, write } from '@esportsplus/reactivity';
+import { effect, signal, write } from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import highlight from '../highlight/index.js';
-const template_16yuw401 = template_u1.template(`<nav class='nav-tree  '><!--$-->`);
+const template_16yuw401 = template_u1.template(`<nav class='nav-tree   '><!--$-->`);
 const template_16yuw405 = template_u1.template(`<div class='nav-tree-group '><!--$-->`);
 const template_16yuw409 = template_u1.template(`<a class='nav-tree-link nav-tree-title '>`);
 const template_16yuw40c = template_u1.template(`<div class='nav-tree-title'>`);
-const template_16yuw40f = template_u1.template(`<div class='nav-tree-links '><!--$--><!--$-->`);
-const template_16yuw40m = template_u1.template(`<a class='nav-tree-link  '>`);
-const template_16yuw40o = template_u1.template(`<span aria-hidden='true' class='nav-tree-indicator'>`);
-function indicator(element, links, selected) {
-    let bar = element.querySelector(':scope > .nav-tree-indicator'), frame = 0;
-    if (!bar) {
-        return;
-    }
-    effect(() => {
-        let index = -1, key = read(selected);
-        for (let i = 0, n = links.length; i < n; i++) {
-            if (visible(links[i]) && keyOf(links[i]) === key) {
-                index = i;
-                break;
-            }
-        }
-        cancelAnimationFrame(frame);
-        frame = requestAnimationFrame(() => {
-            let anchor = element.querySelectorAll(':scope > .nav-tree-link')[index];
-            if (!bar) {
-                return;
-            }
-            if (!anchor) {
-                bar.classList.remove('--active');
-                return;
-            }
-            bar.style.height = `${anchor.offsetHeight}px`;
-            bar.style.transform = `translateY(${anchor.offsetTop}px)`;
-            bar.classList.add('--active');
-        });
-    });
-    onCleanup(() => cancelAnimationFrame(frame));
-}
+const template_16yuw40f = template_u1.template(`<div class='nav-tree-links '><!--$-->`);
+const template_16yuw40l = template_u1.template(`<a class='nav-tree-link  '>`);
 function keyOf(item) {
     return item.key ?? item.href;
 }
 function visible(link) {
     return link.visible?.() ?? true;
 }
-export default component(({ active, current = 'page', sections, ...attributes }) => {
+export default component(({ active, current = 'page', indicator = current === 'location' ? 'border' : 'background', sections, ...attributes }) => {
     let selected = signal(undefined);
     if (active) {
         effect(() => active(), (key) => {
@@ -62,7 +31,13 @@ export default component(({ active, current = 'page', sections, ...attributes })
     }
     return (() => {
         let root_16yuw400 = template_16yuw401(), element_16yuw402 = root_16yuw400.firstChild, element_16yuw403 = element_16yuw402.firstChild;
-        template_u1.slot(element_16yuw403, current !== 'location' && highlight({ class: 'nav-tree-highlight', hover: current !== 'command', target: '.nav-tree-link:not(.--hidden)' }));
+        template_u1.slot(element_16yuw403, highlight({
+            class: 'nav-tree-highlight',
+            fill: indicator !== 'border',
+            hover: current !== 'command',
+            line: indicator === 'background' ? undefined : 'left',
+            target: '.nav-tree-link:not(.--hidden)'
+        }));
         template_u1.slot(element_16yuw402, sections.map((section) => {
             let root_16yuw404 = template_16yuw405(), element_16yuw406 = root_16yuw404.firstChild, element_16yuw407 = element_16yuw406.firstChild;
             element_16yuw407.parentNode.insertBefore(section.href
@@ -82,31 +57,25 @@ export default component(({ active, current = 'page', sections, ...attributes })
                 })(), element_16yuw407);
             template_u1.slot(element_16yuw406, section.groups.map((group) => {
                 return (() => {
-                    let root_16yuw40e = template_16yuw40f(), element_16yuw40g = root_16yuw40e.firstChild, element_16yuw40h = element_16yuw40g.firstChild, element_16yuw40i = element_16yuw40h.nextSibling;
+                    let root_16yuw40e = template_16yuw40f(), element_16yuw40g = root_16yuw40e.firstChild, element_16yuw40h = element_16yuw40g.firstChild;
                     template_u1.slot(element_16yuw40h, group.label && (() => {
-                        let root_16yuw40j = template_16yuw40c(), element_16yuw40k = root_16yuw40j.firstChild;
-                        template_u1.slot(element_16yuw40k, group.label, 1);
-                        return root_16yuw40j;
+                        let root_16yuw40i = template_16yuw40c(), element_16yuw40j = root_16yuw40i.firstChild;
+                        template_u1.slot(element_16yuw40j, group.label, 1);
+                        return root_16yuw40i;
                     })());
-                    template_u1.slot(element_16yuw40i, group.links.map((link) => {
-                        let root_16yuw40l = template_16yuw40m(), element_16yuw40n = root_16yuw40l.firstChild;
-                        template_u1.slot(element_16yuw40n, link.content ?? link.label, 1);
-                        template_u1.setProperty(element_16yuw40n, 'aria-current', ariaCurrent(link));
-                        template_u1.setList(element_16yuw40n, 'class', activeClass(link));
-                        template_u1.setList(element_16yuw40n, 'class', link.visible && (() => !visible(link) && '--hidden'));
-                        template_u1.setProperty(element_16yuw40n, 'href', link.href);
-                        template_u1.delegate(element_16yuw40n, 'click', (event) => link.onclick?.(event));
-                        template_u1.setProperties(element_16yuw40n, current === 'command' && { tabindex: -1 });
-                        template_u1.setProperties(element_16yuw40n, link.attributes);
-                        return root_16yuw40l;
-                    }));
-                    template_u1.slot(element_16yuw40g, current === 'location' && template_16yuw40o(), 2);
+                    template_u1.slot(element_16yuw40g, group.links.map((link) => {
+                        let root_16yuw40k = template_16yuw40l(), element_16yuw40m = root_16yuw40k.firstChild;
+                        template_u1.slot(element_16yuw40m, link.content ?? link.label, 1);
+                        template_u1.setProperty(element_16yuw40m, 'aria-current', ariaCurrent(link));
+                        template_u1.setList(element_16yuw40m, 'class', activeClass(link));
+                        template_u1.setList(element_16yuw40m, 'class', link.visible && (() => !visible(link) && '--hidden'));
+                        template_u1.setProperty(element_16yuw40m, 'href', link.href);
+                        template_u1.delegate(element_16yuw40m, 'click', (event) => link.onclick?.(event));
+                        template_u1.setProperties(element_16yuw40m, current === 'command' && { tabindex: -1 });
+                        template_u1.setProperties(element_16yuw40m, link.attributes);
+                        return root_16yuw40k;
+                    }), 2);
                     template_u1.setList(element_16yuw40g, 'class', group.links.some((link) => link.visible) && (() => !group.links.some(visible) && '--hidden'));
-                    template_u1.onconnect(element_16yuw40g, (element) => {
-                        if (active && current === 'location') {
-                            indicator(element, group.links, selected);
-                        }
-                    });
                     return root_16yuw40e;
                 })();
             }), 2);
@@ -114,8 +83,9 @@ export default component(({ active, current = 'page', sections, ...attributes })
             template_u1.setProperties(element_16yuw406, current === 'command' && { 'aria-label': section.label, role: 'group' });
             return root_16yuw404;
         }), 2);
-        template_u1.setList(element_16yuw402, 'class', current !== 'location' && 'nav-tree--highlight');
+        template_u1.setList(element_16yuw402, 'class', template_u1.interpolate(["nav-tree--", (current === 'location' ? 'location' : 'highlight')]));
         template_u1.setList(element_16yuw402, 'class', current === 'command' && 'nav-tree--command');
+        template_u1.setList(element_16yuw402, 'class', indicator === 'border' && 'nav-tree--border');
         template_u1.setProperties(element_16yuw402, current === 'command' && { role: 'presentation' });
         template_u1.setProperties(element_16yuw402, attributes);
         return root_16yuw400;

package/build/components/notification/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.notification-bell-icon.icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.notification{--background:var(--color-red-400);--color:var(--color-white-400);--dot-size:calc(var(--size) * .57);--font-size:calc(var(--size) * .62);--font-weight:var(--font-weight-500);--outline-color:var(--color-white-400);--outline-width:2px;--roll-duration:.4s;--roll-timing-function:cubic-bezier(.22, 1, .36, 1);--size:var(--size-500);--timing-function:cubic-bezier(.34, 1.56, .64, 1);--transition-duration:.28s}.notification-bell{--background-hover:color-mix(in srgb, currentColor 8%, transparent);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--badge-inset:calc(var(--size) * .12);--badge-size:calc(var(--size) * .42);--border-radius:50%;--color-default:var(--color-text-400);--focus-color:currentColor;--focus-offset:2px;--focus-width:2px;--icon-size:50%;--icon-stroke-width:2;--padding-horizontal:0px;--padding-vertical:0px;--ring-angle:14deg;--ring-animation-name:none;--ring-duration:.8s;--size:var(--size-800);--transition-duration:.16s;--transition-timing-function:ease;--width:var(--size)}.notification-bell--ring-1{--ring-animation-name:notification-bell-ring-1}.notification-bell--ring-2{--ring-animation-name:notification-bell-ring-2}.notification-bell-icon.icon{--size:var(--icon-size)}.notification-bell .notification{--size:var(--badge-size)}.notification{background:var(--background);border-radius:calc(var(--size) / 2);box-shadow:0 0 0 var(--outline-width) var(--outline-color);color:var(--color);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);height:var(--size);line-height:var(--size);min-width:var(--size);padding:0 calc(var(--size) * .25);pointer-events:none;transition:scale var(--transition-duration) var(--timing-function);justify-content:center;align-items:center;display:inline-flex;scale:0}.notification.--active{scale:1}.notification--dot{height:var(--dot-size);min-width:0;width:var(--dot-size);padding:0}.notification-character{height:1lh;display:grid;overflow:hidden}.notification-character-digit{text-align:center;height:1lh}.notification-character-track{transition:translate var(--roll-duration) var(--roll-timing-function);translate:0 calc(var(--value) * -1lh);display:grid}@media (prefers-reduced-motion:reduce){.notification,.notification-character-track{transition:none}}.notification-bell{aspect-ratio:1;height:var(--size);width:var(--size);border:0}.notification-bell-icon.icon{animation:var(--ring-animation-name) var(--ring-duration) ease-in-out;transform-origin:50% 8%}.notification-bell-icon.icon svg{stroke-width:var(--icon-stroke-width)}.notification-bell .notification{left:calc(100% - var(--badge-inset));top:var(--badge-inset);position:absolute;translate:-50% -50%}.notification-bell:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}@media (prefers-reduced-motion:reduce){.notification-bell{transition:none}.notification-bell-icon.icon{transition:none;animation:none}}@keyframes notification-bell-ring-1{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}@keyframes notification-bell-ring-2{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}}
+@layer components{.notification-bell-icon.icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px}.notification{--background:var(--color-red-400);--color:var(--color-white-400);--dot-size:calc(var(--size) * .57);--font-size:calc(var(--size) * .62);--font-weight:var(--font-weight-500);--outline-color:var(--surface-background-default);--outline-width:var(--border-width-500);--roll-duration:var(--duration-slow);--roll-timing-function:cubic-bezier(.22, 1, .36, 1);--size:var(--size-500);--timing-function:var(--easing-spring);--transition-duration:var(--duration-fast)}.notification-bell{--background-hover:color-mix(in srgb, currentColor 8%, transparent);--background-pressed:color-mix(in srgb, currentColor 14%, transparent);--badge-inset:calc(var(--size) * .12);--badge-size:calc(var(--size) * .42);--border-radius:50%;--color-default:var(--color-text-400);--focus-color:currentColor;--focus-offset:calc(var(--size-100) / 4);--focus-width:var(--border-width-500);--icon-size:50%;--icon-stroke-width:2;--padding-horizontal:0px;--padding-vertical:0px;--ring-angle:14deg;--ring-animation-name:none;--ring-duration:.8s;--size:var(--size-800);--width:var(--size)}.notification-bell--ring-1{--ring-animation-name:notification-bell-ring-1}.notification-bell--ring-2{--ring-animation-name:notification-bell-ring-2}.notification-bell-icon.icon{--size:var(--icon-size)}.notification-bell .notification{--size:var(--badge-size)}.notification{background:var(--background);border-radius:calc(var(--size) / 2);box-shadow:0 0 0 var(--outline-width) var(--outline-color);color:var(--color);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);height:var(--size);line-height:var(--size);min-width:var(--size);padding:0 calc(var(--size) * .25);pointer-events:none;transition:scale var(--transition-duration) var(--timing-function);justify-content:center;align-items:center;display:inline-flex;scale:0}.notification.--active{scale:1}.notification--dot{height:var(--dot-size);min-width:0;width:var(--dot-size);padding:0}.notification-character{height:1lh;display:grid;overflow:hidden}.notification-character-digit{text-align:center;height:1lh}.notification-character-track{transition:translate var(--roll-duration) var(--roll-timing-function);translate:0 calc(var(--value) * -1lh);display:grid}@media (prefers-reduced-motion:reduce){.notification,.notification-character-track{transition:none}}.notification-bell{aspect-ratio:1;height:var(--size);width:var(--size);border:0}.notification-bell-icon.icon{animation:var(--ring-animation-name) var(--ring-duration) var(--easing-in-out);transform-origin:50% 8%}.notification-bell-icon.icon svg{stroke-width:var(--icon-stroke-width)}.notification-bell:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.notification-bell .notification{left:calc(100% - var(--badge-inset));top:var(--badge-inset);position:absolute;translate:-50% -50%}@media (prefers-reduced-motion:reduce){.notification-bell{transition:none}.notification-bell-icon.icon{transition:none;animation:none}}@keyframes notification-bell-ring-1{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}@keyframes notification-bell-ring-2{0%,to{rotate:0deg}15%{rotate:var(--ring-angle)}30%{rotate:calc(var(--ring-angle) * -.85)}45%{rotate:calc(var(--ring-angle) * .6)}60%{rotate:calc(var(--ring-angle) * -.4)}75%{rotate:calc(var(--ring-angle) * .2)}}}
 /*$vite$:1*/

package/build/components/overlay/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.overlay{--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}.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w{--opacity:1;--stack-span:100%}.overlay--e{--stack-translate:calc(var(--stack-shift) * -1) 0;--translate-x:calc(100% + var(--margin-horizontal));--translate-y:0px}.overlay--n,.overlay--ne,.overlay--nw{--stack-translate:0 var(--stack-shift);--translate-x:0px;--translate-y:calc(-100% - var(--margin-vertical))}.overlay--s,.overlay--se,.overlay--sw{--stack-translate:0 calc(var(--stack-shift) * -1);--translate-x:0px;--translate-y:calc(100% + var(--margin-vertical))}.overlay--w{--stack-translate:var(--stack-shift) 0;--translate-x:calc(-100% - var(--margin-horizontal));--translate-y:0px}.overlay{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--fling-duration:.5s;--handle-color:var(--color-border-300);--handle-length:40px;--handle-offset:var(--size-200);--handle-thickness:6px;--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--scale:1;--stack-dim:.2;--stack-peek:18px;--stack-scale:.94;--stack-shift:calc(var(--depth,0) * var(--stack-peek) + (1 - pow(var(--stack-scale), var(--depth,0))) * var(--stack-span));--width-closed:64px}@media (prefers-reduced-motion:reduce){.overlay{--fling-duration:0s}}.overlay:where(:not(.--active)){--transition-timing-function:cubic-bezier(.8, 0, .6, 1)}.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w{--close-duration:.3s;--ease:cubic-bezier(.32, .72, 0, 1);--open-duration:.5s;--transition-duration:var(--open-duration);--transition-timing-function:var(--ease)}.overlay--e:where(:not(.--active)),.overlay--n:where(:not(.--active)),.overlay--ne:where(:not(.--active)),.overlay--nw:where(:not(.--active)),.overlay--s:where(:not(.--active)),.overlay--se:where(:not(.--active)),.overlay--sw:where(:not(.--active)),.overlay--w:where(:not(.--active)){--transition-duration:var(--close-duration)}.overlay--e,.overlay--w{--max-width:320px}.overlay--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.overlay--alert{--backdrop:#0000001a;--blur:4px;--opacity:0;--scale:.95;--transition-duration:.1s;--transition-timing-function:ease;--translate:0px}.overlay--alert:where(:not(.--active)){--transition-timing-function:cubic-bezier(.75, 0, .75, .9)}.overlay--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:8px}.overlay--fade{--opacity:0;--translate:0px}.overlay--scale{--opacity:0;--scale:.92;--translate:0px}.overlay--spring{--opacity:0;--scale:.8;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--translate:0px}.overlay--spring:where(:not(.--active)){--transition-timing-function:cubic-bezier(.36, 0, .66, -.56)}.overlay-page{--dim:.2;--peek:18px;--scale:.94;--transition-duration:.5s;--transition-timing-function:cubic-bezier(.32, .72, 0, 1)}:where(dialog.overlay){color:inherit;max-height:calc(100% - var(--margin-vertical) * 2);z-index:9;background:0 0;border:0;max-width:100%;padding:0;inset:0}dialog.overlay{position:fixed}dialog.overlay:not(:modal){position:absolute}dialog.overlay.overlay--flow:not(:modal){z-index:auto;align-self:start;width:100%;max-width:none;min-height:0;max-height:none;margin:0;position:relative;inset:auto}dialog.overlay.overlay--flow:not(:modal):not([open]){visibility:hidden;display:block}.overlay{transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);margin:auto}.overlay:not(.--active){opacity:var(--opacity);pointer-events:none;scale:var(--scale);translate:var(--translate)}.overlay:not(.--active)::backdrop{opacity:0}.overlay:not(.--active) input[type=password]{display:none}.overlay::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.overlay.--active::backdrop{opacity:calc(1 - var(--progress,0))}.overlay.overlay--stacked::backdrop{opacity:0}.overlay--alert::backdrop,.overlay--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.overlay--e,.overlay--w{height:calc(100% - var(--margin-vertical) * 2)}.overlay--e,.overlay--ne,.overlay--se{margin-inline-end:var(--margin-horizontal)}.overlay--e:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--se:not(.overlay--floating){border-start-end-radius:0;border-end-end-radius:0}.overlay--n,.overlay--ne,.overlay--nw{margin-block-start:var(--margin-vertical)}.overlay--n:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--nw:not(.overlay--floating){border-start-start-radius:0;border-start-end-radius:0}.overlay--s,.overlay--se,.overlay--sw{margin-block-end:var(--margin-vertical)}.overlay--s:not(.overlay--floating),.overlay--se:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-end-end-radius:0;border-end-start-radius:0}.overlay--w,.overlay--nw,.overlay--sw{margin-inline-start:var(--margin-horizontal)}.overlay--w:not(.overlay--floating),.overlay--nw:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-start-start-radius:0;border-end-start-radius:0}.overlay--e{transform-origin:100%}.overlay--n{transform-origin:top}.overlay--ne{transform-origin:100% 0}.overlay--nw{transform-origin:0 0}.overlay--s{transform-origin:bottom}.overlay--se{transform-origin:100% 100%}.overlay--sw{transform-origin:0 100%}.overlay--w{transform-origin:0}.overlay.overlay--covered{filter:brightness(calc(1 - min(var(--depth), 1) * var(--stack-dim)));scale:pow(var(--stack-scale), var(--depth));translate:var(--stack-translate)}.overlay.overlay--draggable{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.overlay.overlay--draggable.overlay--scrollable{touch-action:auto}.overlay.overlay--draggable:not(.overlay--scrollable):is(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w){overflow:visible}.overlay.overlay--edge-fill{border-image-source:linear-gradient(var(--edge-background), var(--edge-background));border-image-slice:1;border-image-width:var(--edge-fill);border-image-outset:var(--edge-fill);border-image-repeat:stretch}.overlay.overlay--edge-fill.overlay--e{--edge-fill:0 50vw 0 0}.overlay.overlay--edge-fill.overlay--n{--edge-fill:50vh 0 0 0}.overlay.overlay--edge-fill.overlay--ne{--edge-fill:50vh 50vw 0 0}.overlay.overlay--edge-fill.overlay--nw{--edge-fill:50vh 0 0 50vw}.overlay.overlay--edge-fill.overlay--s{--edge-fill:0 0 50vh 0}.overlay.overlay--edge-fill.overlay--se{--edge-fill:0 50vw 50vh 0}.overlay.overlay--edge-fill.overlay--sw{--edge-fill:0 0 50vh 50vw}.overlay.overlay--edge-fill.overlay--w{--edge-fill:0 0 0 50vw}.overlay.overlay--rail{transition:width var(--transition-duration) var(--transition-timing-function);white-space:nowrap;width:min(var(--width-closed), 100% - var(--margin-horizontal) * 2);overflow:hidden}.overlay.overlay--rail.--active{width:min(var(--max-width), 100% - var(--margin-horizontal) * 2)}.overlay.overlay--rail:not(.--active){opacity:1;pointer-events:auto;translate:none;scale:1}@media (prefers-reduced-motion:reduce){.overlay.overlay--rail{transition:none}}.overlay.overlay--dragging{cursor:grabbing;opacity:calc(1 - var(--progress,0))}.overlay.overlay--dragging,.overlay.overlay--dragging::backdrop,.overlay.overlay--tracking,.overlay.overlay--tracking::backdrop{transition:none}.overlay-handle{background:var(--handle-color);border-radius:var(--handle-thickness);height:var(--handle-thickness);touch-action:none;width:var(--handle-length);position:absolute}.overlay:not(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w)>.overlay-handle{display:none}.overlay--e>.overlay-handle,.overlay--w>.overlay-handle{height:var(--handle-length);width:var(--handle-thickness);top:50%;translate:0 -50%}.overlay--e>.overlay-handle{left:var(--handle-offset)}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle,.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{left:50%;translate:-50%}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle{bottom:var(--handle-offset)}.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{top:var(--handle-offset)}.overlay--w>.overlay-handle{right:var(--handle-offset)}@media (prefers-reduced-motion:reduce){.overlay{--opacity:0;--scale:1;--translate:0px;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.overlay.overlay--covered{translate:none;scale:none}}.overlay-page{transform-origin:top;transition:filter var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function)}.overlay-host--active>.overlay-page{filter:brightness(calc(1 - min(var(--overlay-depth), 1) * var(--dim)));scale:calc(1 - min(var(--overlay-depth), 1) * (1 - var(--scale)));translate:0 calc(min(var(--overlay-depth), 1) * var(--peek))}.overlay-host--dragging>.overlay-page{transition:none}@media (prefers-reduced-motion:reduce){.overlay-host--active>.overlay-page{translate:none;scale:none}}}
+@layer components{.overlay{--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}.overlay--e{--stack-translate:calc(var(--stack-shift) * -1) 0;--translate-x:calc(100% + var(--margin-horizontal));--translate-y:0px}.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w{--opacity:1;--stack-span:100%}.overlay--n,.overlay--ne,.overlay--nw{--stack-translate:0 var(--stack-shift);--translate-x:0px;--translate-y:calc(-100% - var(--margin-vertical))}.overlay--s,.overlay--se,.overlay--sw{--stack-translate:0 calc(var(--stack-shift) * -1);--translate-x:0px;--translate-y:calc(100% + var(--margin-vertical))}.overlay--w{--stack-translate:var(--stack-shift) 0;--translate-x:calc(-100% - var(--margin-horizontal));--translate-y:0px}dialog.overlay{--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:7;--surface-shadow-cast:light-dark(oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .08),oklch(from light-dark(oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1) calc(c * (1 - clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .01 + min(calc(var(--surface-level) - 1), 0) * .01, 1)) / max(1 - l, .01)) h),oklch(from var(--color-surface) clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) calc(c * clamp(0, l + max(calc(var(--surface-level) - 1), 0) * .02 + min(calc(var(--surface-level) - 1), 0) * .02, l + .12) / max(l, .01)) h)) calc(l * .24) calc(c * .24) h / .16));--surface-shadow-default:0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 0, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 5 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 1, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 3 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 9 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 10 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 25 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -7 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, var(--surface-shadow-weight) - 0, 1) + .05 * clamp(0, var(--surface-shadow-weight) - 2, 1) + .15 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -8 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, var(--surface-shadow-weight) - 2, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 3, 1) + 2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + 4 * clamp(0, var(--surface-shadow-weight) - 5, 1) + -10 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -1 * clamp(0, var(--surface-shadow-weight) - 3, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 4, 1) + -2 * clamp(0, var(--surface-shadow-weight) - 5, 1) + 6 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, var(--surface-shadow-weight) - 2, 1) + -.1 * clamp(0, var(--surface-shadow-weight) - 6, 1)) * 10));--surface-shadow-hover:0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 5 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 1, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 3 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 9 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 25 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -7 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 0, 1) + .05 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + .15 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -8 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + 2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + 4 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + -10 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 3, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 4, 1) + -2 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 5, 1) + 6 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 2, 1) + -.1 * clamp(0, min(var(--surface-shadow-weight) + 1, 7) - 6, 1)) * 10));--surface-shadow-pressed:0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 5 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 1, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 3 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 9 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 25 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -7 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 0, 1) + .05 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + .15 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10)), 0 calc((0 + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -8 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + 2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + 4 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + -10 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) calc((0 + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 3, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 4, 1) + -2 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 5, 1) + 6 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 1px) oklch(from var(--surface-shadow-cast) l c h / calc(alpha * (0 + .1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 2, 1) + -.1 * clamp(0, max(var(--surface-shadow-weight) - 1, 0) - 6, 1)) * 10));--surface-level:1}.overlay{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--close-duration:var(--duration-slow-exit);--ease:var(--easing-spring);--fling-duration:.5s;--handle-color:var(--surface-border-default);--handle-length:40px;--handle-offset:var(--size-200);--handle-thickness:6px;--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--open-duration:var(--duration-slow);--scale:1;--stack-dim:.2;--stack-peek:18px;--stack-scale:.94;--stack-shift:calc(var(--depth,0) * var(--stack-peek) + (1 - pow(var(--stack-scale), var(--depth,0))) * var(--stack-span));--transition-duration:var(--open-duration);--transition-timing-function:var(--easing-spring-bounce);--width-closed:64px}@media (prefers-reduced-motion:reduce){.overlay{--fling-duration:0s}}.overlay--alert{--backdrop:#0000001a;--blur:var(--blur-400);--opacity:0;--scale:.95;--translate:0px}.overlay--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:var(--blur-500)}.overlay--e,.overlay--w{--max-width:320px}.overlay--fade{--opacity:0;--translate:0px}.overlay--floating{--margin-horizontal:var(--size-100);--margin-vertical:var(--size-100)}.overlay--scale{--opacity:0;--scale:.92;--translate:0px}.overlay--spring{--opacity:0;--scale:.8;--translate:0px}.overlay:where(:not(.--active)){--transition-duration:var(--close-duration);--transition-timing-function:var(--easing-spring)}.overlay-page{--dim:.2;--peek:18px;--scale:.94;--transition-duration:var(--duration-slow);--transition-timing-function:var(--easing-spring)}.overlay{transform-origin:50%;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);margin:auto}.overlay:not(.--active){opacity:var(--opacity);pointer-events:none;scale:var(--scale);translate:var(--translate)}.overlay:not(.--active)::backdrop{opacity:0}.overlay:not(.--active) input[type=password]{display:none}.overlay::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.overlay.--active::backdrop{opacity:calc(1 - var(--progress,0))}.overlay.overlay--stacked::backdrop{opacity:0}.overlay--alert::backdrop,.overlay--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.overlay--e{transform-origin:100%}.overlay--e,.overlay--ne,.overlay--se{margin-inline-end:var(--margin-horizontal)}.overlay--e:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--se:not(.overlay--floating){border-start-end-radius:0;border-end-end-radius:0}.overlay--e,.overlay--w{height:calc(100% - var(--margin-vertical) * 2)}.overlay--n{transform-origin:top}.overlay--n,.overlay--ne,.overlay--nw{margin-block-start:var(--margin-vertical)}.overlay--n:not(.overlay--floating),.overlay--ne:not(.overlay--floating),.overlay--nw:not(.overlay--floating){border-start-start-radius:0;border-start-end-radius:0}.overlay--ne{transform-origin:100% 0}.overlay--nw{transform-origin:0 0}.overlay--s{transform-origin:bottom}.overlay--s,.overlay--se,.overlay--sw{margin-block-end:var(--margin-vertical)}.overlay--s:not(.overlay--floating),.overlay--se:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-end-end-radius:0;border-end-start-radius:0}.overlay--se{transform-origin:100% 100%}.overlay--sw{transform-origin:0 100%}.overlay--w{transform-origin:0}.overlay--w,.overlay--nw,.overlay--sw{margin-inline-start:var(--margin-horizontal)}.overlay--w:not(.overlay--floating),.overlay--nw:not(.overlay--floating),.overlay--sw:not(.overlay--floating){border-start-start-radius:0;border-end-start-radius:0}.overlay-handle{background:var(--handle-color);border-radius:var(--handle-thickness);height:var(--handle-thickness);touch-action:none;width:var(--handle-length);position:absolute}.overlay--e>.overlay-handle{left:var(--handle-offset)}.overlay--e>.overlay-handle,.overlay--w>.overlay-handle{height:var(--handle-length);width:var(--handle-thickness);top:50%;translate:0 -50%}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle{bottom:var(--handle-offset)}.overlay--n>.overlay-handle,.overlay--ne>.overlay-handle,.overlay--nw>.overlay-handle,.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{left:50%;translate:-50%}.overlay--s>.overlay-handle,.overlay--se>.overlay-handle,.overlay--sw>.overlay-handle{top:var(--handle-offset)}.overlay--w>.overlay-handle{right:var(--handle-offset)}.overlay:not(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w)>.overlay-handle{display:none}.overlay.overlay--covered{filter:brightness(calc(1 - min(var(--depth), 1) * var(--stack-dim)));scale:pow(var(--stack-scale), var(--depth));translate:var(--stack-translate)}.overlay.overlay--draggable{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}.overlay.overlay--draggable.overlay--scrollable{touch-action:auto}.overlay.overlay--draggable:not(.overlay--scrollable):is(.overlay--e,.overlay--n,.overlay--ne,.overlay--nw,.overlay--s,.overlay--se,.overlay--sw,.overlay--w){overflow:visible}.overlay.overlay--dragging{cursor:grabbing;opacity:calc(1 - var(--progress,0))}.overlay.overlay--dragging,.overlay.overlay--dragging::backdrop,.overlay.overlay--tracking,.overlay.overlay--tracking::backdrop{transition:none}.overlay.overlay--edge-fill{border-image-outset:var(--edge-fill);border-image-slice:1;border-image-repeat:stretch;border-image-source:linear-gradient(var(--edge-background), var(--edge-background));border-image-width:var(--edge-fill-width)}.overlay.overlay--edge-fill.overlay--e{--edge-fill:0 50vw 0 0;--edge-fill-width:0 calc(50vw + 1px) 0 0}.overlay.overlay--edge-fill.overlay--n{--edge-fill:50vh 0 0 0;--edge-fill-width:calc(50vh + 1px) 0 0 0}.overlay.overlay--edge-fill.overlay--ne{--edge-fill:50vh 50vw 0 0;--edge-fill-width:calc(50vh + 1px) calc(50vw + 1px) 0 0}.overlay.overlay--edge-fill.overlay--nw{--edge-fill:50vh 0 0 50vw;--edge-fill-width:calc(50vh + 1px) 0 0 calc(50vw + 1px)}.overlay.overlay--edge-fill.overlay--s{--edge-fill:0 0 50vh 0;--edge-fill-width:0 0 calc(50vh + 1px) 0}.overlay.overlay--edge-fill.overlay--se{--edge-fill:0 50vw 50vh 0;--edge-fill-width:0 calc(50vw + 1px) calc(50vh + 1px) 0}.overlay.overlay--edge-fill.overlay--sw{--edge-fill:0 0 50vh 50vw;--edge-fill-width:0 0 calc(50vh + 1px) calc(50vw + 1px)}.overlay.overlay--edge-fill.overlay--w{--edge-fill:0 0 0 50vw;--edge-fill-width:0 0 0 calc(50vw + 1px)}.overlay.overlay--rail{transition:width var(--transition-duration) var(--transition-timing-function);white-space:nowrap;width:min(var(--width-closed), 100% - var(--margin-horizontal) * 2);overflow:hidden}.overlay.overlay--rail.--active{width:min(var(--max-width), 100% - var(--margin-horizontal) * 2)}.overlay.overlay--rail:not(.--active){opacity:1;pointer-events:auto;translate:none;scale:1}@media (prefers-reduced-motion:reduce){.overlay.overlay--rail{transition:none}.overlay{--opacity:0;--scale:1;--translate:0px;transition:filter var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function)}.overlay.overlay--covered{translate:none;scale:none}.overlay::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}}.overlay-page{transform-origin:top;transition:filter var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function)}.overlay-host--active>.overlay-page{filter:brightness(calc(1 - min(var(--overlay-depth), 1) * var(--dim)));scale:calc(1 - min(var(--overlay-depth), 1) * (1 - var(--scale)));translate:0 calc(min(var(--overlay-depth), 1) * var(--peek))}.overlay-host--dragging>.overlay-page{transition:none}@media (prefers-reduced-motion:reduce){.overlay-host--active>.overlay-page{translate:none;scale:none}}:where(dialog.overlay){color:inherit;max-height:calc(100% - var(--margin-vertical) * 2);z-index:9;background:0 0;border:0;max-width:100%;padding:0;inset:0}dialog.overlay{position:fixed}dialog.overlay.overlay--flow:not(:modal){z-index:auto;align-self:start;width:100%;max-width:none;min-height:0;max-height:none;margin:0;position:relative;inset:auto}dialog.overlay.overlay--flow:not(:modal):not([open]){visibility:hidden;display:block}dialog.overlay:not(:modal){position:absolute}}
 /*$vite$:1*/

package/build/components/page/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.page{--gap-horizontal:0px;--gap-vertical:0px}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500)}.page{gap:var(--gap-vertical) 0px;flex-flow:column;width:100%;min-height:100svh;display:flex;position:relative}.page-subtitle,.page-suptitle,.page-title{color:var(--color);z-index:1;width:100%;display:block;position:relative}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-title{text-wrap:balance}}
+@layer components{.page{--gap-horizontal:0px;--gap-vertical:0px}.page-header{--gap-horizontal:var(--size-400);--gap-vertical:var(--size-100)}.page-subtitle,.page-suptitle{--color:var(--color-default);--color-default:var(--color-text-400);--font-size:var(--font-size-400)}.page-title{--color:var(--color-default);--color-default:var(--color-text-500)}.page,.page-header{gap:var(--gap-vertical) var(--gap-horizontal);flex-flow:column;width:100%;display:flex;position:relative}.page-subtitle,.page-suptitle{font-size:var(--font-size)}.page-subtitle,.page-suptitle,.page-title{color:var(--color);z-index:1;width:100%;display:block;position:relative}.page-title{text-wrap:balance}}
 /*$vite$:1*/

package/build/components/pagination/arrows.d.ts

@@ -0,0 +1,15 @@
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    'aria-label'?: string;
+    next?: Link;
+    previous?: Link;
+};
+type Link = {
+    description?: string;
+    href: string;
+    label?: string;
+    title: string;
+};
+export default _default;
+declare function _default({ 'aria-label': label, next, previous, ...attributes }: A): DocumentFragment | Text;
+export type { Link };

package/build/components/pagination/arrows.js

@@ -0,0 +1,65 @@
+import * as template_u1 from '@esportsplus/template';
+import icon from '../icon/index.js';
+import next from '@esportsplus/ui/svg/arrow-right.svg';
+import previous from '@esportsplus/ui/svg/arrow-left.svg';
+const template_1u7zf8t1 = template_u1.template(`<button class='pagination-arrow pagination-arrow--next --disabled' disabled type='button'>`);
+const template_1u7zf8t4 = template_u1.template(`<button class='pagination-arrow pagination-arrow--previous --disabled' disabled type='button'>`);
+const template_1u7zf8t7 = template_u1.template(`<button class='pagination-arrow  --disabled' disabled type='button'>`);
+const template_1u7zf8ta = template_u1.template(`<a class='pagination-arrow pagination-arrow--next' rel='next'>`);
+const template_1u7zf8td = template_u1.template(`<a class='pagination-arrow pagination-arrow--previous' rel='prev'>`);
+const template_1u7zf8tg = template_u1.template(`<a class='pagination-arrow '>`);
+const template_1u7zf8tj = template_u1.template(`<nav class='pagination pagination--arrows'><!--$-->`);
+function arrow(direction, link) {
+    let graphic = icon({ 'aria-hidden': 'true', class: 'pagination-arrow-icon' }, direction === 'next' ? next : previous), name = direction === 'next' ? 'Next' : 'Previous';
+    if (!link) {
+        return (direction === "next" ? (() => {
+            let root_1u7zf8t0 = template_1u7zf8t1(), element_1u7zf8t2 = root_1u7zf8t0.firstChild;
+            template_u1.slot(element_1u7zf8t2, graphic, 1);
+            template_u1.setProperty(element_1u7zf8t2, 'aria-label', name);
+            return root_1u7zf8t0;
+        })() : direction === "previous" ? (() => {
+            let root_1u7zf8t3 = template_1u7zf8t4(), element_1u7zf8t5 = root_1u7zf8t3.firstChild;
+            template_u1.slot(element_1u7zf8t5, graphic, 1);
+            template_u1.setProperty(element_1u7zf8t5, 'aria-label', name);
+            return root_1u7zf8t3;
+        })() : (() => {
+            let root_1u7zf8t6 = template_1u7zf8t7(), element_1u7zf8t8 = root_1u7zf8t6.firstChild;
+            template_u1.slot(element_1u7zf8t8, graphic, 1);
+            template_u1.setProperty(element_1u7zf8t8, 'aria-label', name);
+            template_u1.setList(element_1u7zf8t8, 'class', template_u1.interpolate(["pagination-arrow--", (direction)]));
+            return root_1u7zf8t6;
+        })());
+    }
+    return (direction === "next" ? (() => {
+        let root_1u7zf8t9 = template_1u7zf8ta(), element_1u7zf8tb = root_1u7zf8t9.firstChild;
+        template_u1.slot(element_1u7zf8tb, graphic, 1);
+        template_u1.setProperty(element_1u7zf8tb, 'aria-label', template_u1.interpolate([(name), ": ", (link.title)]));
+        template_u1.setProperty(element_1u7zf8tb, 'href', link.href);
+        template_u1.setProperty(element_1u7zf8tb, 'title', template_u1.interpolate([(name), ": ", (link.title)]));
+        return root_1u7zf8t9;
+    })() : direction === "previous" ? (() => {
+        let root_1u7zf8tc = template_1u7zf8td(), element_1u7zf8te = root_1u7zf8tc.firstChild;
+        template_u1.slot(element_1u7zf8te, graphic, 1);
+        template_u1.setProperty(element_1u7zf8te, 'aria-label', template_u1.interpolate([(name), ": ", (link.title)]));
+        template_u1.setProperty(element_1u7zf8te, 'href', link.href);
+        template_u1.setProperty(element_1u7zf8te, 'title', template_u1.interpolate([(name), ": ", (link.title)]));
+        return root_1u7zf8tc;
+    })() : (() => {
+        let root_1u7zf8tf = template_1u7zf8tg(), element_1u7zf8th = root_1u7zf8tf.firstChild;
+        template_u1.slot(element_1u7zf8th, graphic, 1);
+        template_u1.setProperty(element_1u7zf8th, 'aria-label', template_u1.interpolate([(name), ": ", (link.title)]));
+        template_u1.setList(element_1u7zf8th, 'class', template_u1.interpolate(["pagination-arrow--", (direction)]));
+        template_u1.setProperty(element_1u7zf8th, 'href', link.href);
+        template_u1.setProperty(element_1u7zf8th, 'rel', direction === 'next' ? 'next' : 'prev');
+        template_u1.setProperty(element_1u7zf8th, 'title', template_u1.interpolate([(name), ": ", (link.title)]));
+        return root_1u7zf8tf;
+    })());
+}
+export default ({ 'aria-label': label = 'Pagination', next, previous, ...attributes }) => {
+    let root_1u7zf8ti = template_1u7zf8tj(), element_1u7zf8tk = root_1u7zf8ti.firstChild, element_1u7zf8tl = element_1u7zf8tk.firstChild;
+    template_u1.slot(element_1u7zf8tl, arrow('previous', previous));
+    template_u1.slot(element_1u7zf8tk, arrow('next', next), 2);
+    template_u1.setProperty(element_1u7zf8tk, 'aria-label', label);
+    template_u1.setProperties(element_1u7zf8tk, attributes);
+    return root_1u7zf8ti;
+};

package/build/components/pagination/cards.d.ts

@@ -0,0 +1,23 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import type { Link } from './arrows.js';
+import '../card/scss/index.scss';
+declare const PAGINATION_CARD: unique symbol;
+declare const PAGINATION_CARD_SUBTITLE: unique symbol;
+declare const PAGINATION_CARD_TITLE: unique symbol;
+type A = Attributes & {
+    [PAGINATION_CARD]?: Attributes;
+    [PAGINATION_CARD_SUBTITLE]?: Attributes;
+    [PAGINATION_CARD_TITLE]?: Attributes;
+    'aria-label'?: string;
+    next?: Link;
+    previous?: Link;
+    ring?: boolean;
+    tactile?: boolean;
+};
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly card: typeof PAGINATION_CARD;
+    readonly subtitle: typeof PAGINATION_CARD_SUBTITLE;
+    readonly title: typeof PAGINATION_CARD_TITLE;
+}>;
+export default _default;

package/build/components/pagination/cards.js

@@ -0,0 +1,66 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import next from '@esportsplus/ui/svg/chevron-right.svg';
+import previous from '@esportsplus/ui/svg/chevron-left.svg';
+import '../card/scss/index.scss';
+const template_1brh2sq1 = template_u1.template(`<a class='card pagination-card pagination-card--next  ' rel='next'><!--$--><span class='pagination-card-title'></span><span class='pagination-card-subtitle'>`);
+const template_1brh2sq7 = template_u1.template(`<a class='card pagination-card pagination-card--previous  ' rel='prev'><!--$--><span class='pagination-card-title'></span><span class='pagination-card-subtitle'>`);
+const template_1brh2sqd = template_u1.template(`<a class='card pagination-card   '><!--$--><span class='pagination-card-title'></span><span class='pagination-card-subtitle'>`);
+const template_1brh2sqj = template_u1.template(`<nav class='pagination pagination--cards'><!--$-->`);
+const PAGINATION_CARD = Symbol.for('@esportsplus/ui/pagination.cards.card');
+const PAGINATION_CARD_SUBTITLE = Symbol.for('@esportsplus/ui/pagination.cards.subtitle');
+const PAGINATION_CARD_TITLE = Symbol.for('@esportsplus/ui/pagination.cards.title');
+function card(attributes, direction, link) {
+    let arrow = icon({ 'aria-hidden': 'true', class: 'pagination-card-arrow' }, direction === 'next' ? next : previous);
+    return (direction === "next" ? (() => {
+        let root_1brh2sq0 = template_1brh2sq1(), element_1brh2sq2 = root_1brh2sq0.firstChild, element_1brh2sq3 = element_1brh2sq2.firstChild, element_1brh2sq4 = element_1brh2sq2.firstElementChild, element_1brh2sq5 = element_1brh2sq4.nextElementSibling;
+        template_u1.slot(element_1brh2sq3, direction === 'previous' && arrow);
+        template_u1.slot(element_1brh2sq4, link.title, 1);
+        template_u1.slot(element_1brh2sq5, link.label ?? (direction === 'next' ? 'Next' : 'Previous'), 1);
+        template_u1.slot(element_1brh2sq2, direction === 'next' && arrow, 2);
+        template_u1.setProperties(element_1brh2sq5, attributes[PAGINATION_CARD_SUBTITLE]);
+        template_u1.setProperties(element_1brh2sq4, attributes[PAGINATION_CARD_TITLE]);
+        template_u1.setList(element_1brh2sq2, 'class', attributes.ring && 'card--ring');
+        template_u1.setList(element_1brh2sq2, 'class', attributes.tactile && 'pagination-card--tactile');
+        template_u1.setProperty(element_1brh2sq2, 'href', link.href);
+        template_u1.setProperties(element_1brh2sq2, attributes[PAGINATION_CARD]);
+        return root_1brh2sq0;
+    })() : direction === "previous" ? (() => {
+        let root_1brh2sq6 = template_1brh2sq7(), element_1brh2sq8 = root_1brh2sq6.firstChild, element_1brh2sq9 = element_1brh2sq8.firstChild, element_1brh2sqa = element_1brh2sq8.firstElementChild, element_1brh2sqb = element_1brh2sqa.nextElementSibling;
+        template_u1.slot(element_1brh2sq9, direction === 'previous' && arrow);
+        template_u1.slot(element_1brh2sqa, link.title, 1);
+        template_u1.slot(element_1brh2sqb, link.label ?? (direction === 'next' ? 'Next' : 'Previous'), 1);
+        template_u1.slot(element_1brh2sq8, direction === 'next' && arrow, 2);
+        template_u1.setProperties(element_1brh2sqb, attributes[PAGINATION_CARD_SUBTITLE]);
+        template_u1.setProperties(element_1brh2sqa, attributes[PAGINATION_CARD_TITLE]);
+        template_u1.setList(element_1brh2sq8, 'class', attributes.ring && 'card--ring');
+        template_u1.setList(element_1brh2sq8, 'class', attributes.tactile && 'pagination-card--tactile');
+        template_u1.setProperty(element_1brh2sq8, 'href', link.href);
+        template_u1.setProperties(element_1brh2sq8, attributes[PAGINATION_CARD]);
+        return root_1brh2sq6;
+    })() : (() => {
+        let root_1brh2sqc = template_1brh2sqd(), element_1brh2sqe = root_1brh2sqc.firstChild, element_1brh2sqf = element_1brh2sqe.firstChild, element_1brh2sqg = element_1brh2sqe.firstElementChild, element_1brh2sqh = element_1brh2sqg.nextElementSibling;
+        template_u1.slot(element_1brh2sqf, direction === 'previous' && arrow);
+        template_u1.slot(element_1brh2sqg, link.title, 1);
+        template_u1.slot(element_1brh2sqh, link.label ?? (direction === 'next' ? 'Next' : 'Previous'), 1);
+        template_u1.slot(element_1brh2sqe, direction === 'next' && arrow, 2);
+        template_u1.setProperties(element_1brh2sqh, attributes[PAGINATION_CARD_SUBTITLE]);
+        template_u1.setProperties(element_1brh2sqg, attributes[PAGINATION_CARD_TITLE]);
+        template_u1.setList(element_1brh2sqe, 'class', template_u1.interpolate(["pagination-card--", (direction)]));
+        template_u1.setList(element_1brh2sqe, 'class', attributes.ring && 'card--ring');
+        template_u1.setList(element_1brh2sqe, 'class', attributes.tactile && 'pagination-card--tactile');
+        template_u1.setProperty(element_1brh2sqe, 'href', link.href);
+        template_u1.setProperty(element_1brh2sqe, 'rel', direction === 'next' ? 'next' : 'prev');
+        template_u1.setProperties(element_1brh2sqe, attributes[PAGINATION_CARD]);
+        return root_1brh2sqc;
+    })());
+}
+export default component(({ 'aria-label': label = 'Pagination', next, previous, ring, tactile, ...attributes }) => (next || previous) && (() => {
+    let root_1brh2sqi = template_1brh2sqj(), element_1brh2sqk = root_1brh2sqi.firstChild, element_1brh2sql = element_1brh2sqk.firstChild;
+    template_u1.slot(element_1brh2sql, previous && card({ ...attributes, ring, tactile }, 'previous', previous));
+    template_u1.slot(element_1brh2sqk, next && card({ ...attributes, ring, tactile }, 'next', next), 2);
+    template_u1.setProperty(element_1brh2sqk, 'aria-label', label);
+    template_u1.setProperties(element_1brh2sqk, attributes);
+    return root_1brh2sqi;
+})(), { card: PAGINATION_CARD, subtitle: PAGINATION_CARD_SUBTITLE, title: PAGINATION_CARD_TITLE });

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

@@ -1,4 +1,6 @@
 import { type Attributes } from '@esportsplus/template';
+import arrows from './arrows.js';
+import cards from './cards.js';
 import dots from './dots.js';
 import '../button/scss/index.scss';
 import './scss/index.scss';
@@ -11,6 +13,9 @@ declare const plain: ({ onchange, siblings, state: api, total, ...attributes }:
     total: number;
 }) => DocumentFragment | Text;
 declare const pagination: typeof plain & {
+    arrows: typeof arrows;
+    cards: typeof cards;
     dots: typeof dots;
 };
 export default pagination;
+export type { Link as PaginationLink } from './arrows.js';

package/build/components/pagination/index.js

@@ -4,6 +4,8 @@ import { effect } from '@esportsplus/reactivity';
 import icon from '../icon/index.js';
 import next from '@esportsplus/ui/svg/arrow-right.svg';
 import previous from '@esportsplus/ui/svg/arrow-left.svg';
+import arrows from './arrows.js';
+import cards from './cards.js';
 import dots from './dots.js';
 import '../button/scss/index.scss';
 import './scss/index.scss';
@@ -82,5 +84,5 @@ const plain = ({ onchange, siblings = 1, state: api = new ReactiveObject_0rssf9r
         return root_0rssf9r1;
     })();
 };
-const pagination = Object.assign(plain, { dots });
+const pagination = Object.assign(plain, { arrows, cards, dots });
 export default pagination;

package/build/components/pagination/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components{.pagination-fill{position:absolute;inset:0}.pagination{--gap:var(--size-300);--size:32px}.pagination--dots{--color:var(--color-text-500);--dot-color:oklch(from var(--color) l c h / .2);--dot-color-hover:oklch(from var(--color) l c h / .35);--dot-gap:6px;--dot-size:6px;--focus-color:var(--color);--height:32px;--pill-color:var(--color);--pill-width:20px;--pressed-scale:.96;--step:calc(var(--dot-size) + var(--dot-gap));--track-color:var(--pill-color);--transition-duration:.15s;--transition-timing-function:ease-out}.pagination--dots-autoplay{--track-color:oklch(from var(--pill-color) l c h / .4)}.pagination--dots-large{--dot-gap:8px;--dot-size:8px;--pill-width:28px}.pagination-control,.pagination-page{--background-hover:var(--color-grey-400);--background-pressed:var(--color-grey-500);--border-color-default:var(--color-border-300);--border-radius:var(--border-radius-400);--border-width:var(--border-width-400);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px;--width:auto}.pagination-control{--background-default:var(--color-white-300);--box-shadow-default:var(--box-shadow-100);--color-default:var(--color-text-500)}.pagination-dot{--mark-scale:none;--near:clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1)}.pagination-dot:active{--mark-scale:var(--pressed-scale)}@media (hover:hover){.pagination-dot:hover{--dot-color:var(--dot-color-hover)}}.pagination-page{--background-active:var(--color-white-300);--border-color-active:var(--color-border-300);--border-color-default:transparent;--color-active:var(--color-text-500);--padding-horizontal:0px}.pagination-page.--active{--box-shadow:var(--box-shadow-100)}.pagination-page--dots{--background-hover:transparent;--background-pressed:transparent;--color-hover:var(--color-default)}.pagination-pill{--k:clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));--t:clamp(0, var(--progress) - var(--k), 1);--lead-t:clamp(0, var(--t) / .6, 1);--trail-t:clamp(0, (var(--t) - .4) / .6, 1);--lead:calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));--trail:calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)))}.pagination-dot{box-sizing:content-box;cursor:pointer;inset-block:0;left:calc(var(--index) * var(--step) + (var(--pill-width) - var(--dot-size)) * clamp(0, var(--index) - var(--progress), 1));margin:0 0 0 calc(var(--dot-gap) / -2);padding:0 calc(var(--dot-gap) / 2);touch-action:manipulation;width:calc(var(--dot-size) + (var(--pill-width) - var(--dot-size)) * var(--near));background:0 0;border:0;border-radius:999px;outline:none;align-items:center;display:flex;position:absolute}.pagination-dot:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}.pagination-fill{background:var(--pill-color);transform-origin:0}.pagination-mark{background:var(--dot-color);height:var(--dot-size);scale:var(--mark-scale);transition:background-color var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function);border-radius:999px;width:100%}.pagination-pill{background:var(--track-color);height:var(--dot-size);pointer-events:none;translate:calc(var(--k) * var(--step) + var(--step) * var(--trail)) -50%;width:calc(var(--pill-width) + var(--step) * (var(--lead) - var(--trail)));border-radius:999px;position:absolute;top:50%;left:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.pagination-mark{transition:background-color var(--transition-duration) var(--transition-timing-function);scale:none}}.pagination{align-items:center;gap:var(--gap);justify-content:space-between;width:100%;display:flex}.pagination--dots{contain:layout;height:var(--height);width:calc((var(--count) - 1) * var(--step) + var(--pill-width));flex:none;display:block;position:relative}.pagination-control,.pagination-page{border:var(--border-width) solid var(--border-color);height:var(--size)}.pagination-control{gap:var(--size-100)}.pagination-control.--disabled{opacity:.64;pointer-events:none}.pagination-page{font-variant:tabular-nums;min-width:var(--size)}.pagination-page--dots{cursor:default;pointer-events:none}.pagination-pages{align-items:center;gap:var(--size-100);display:flex}}
+@layer components{.pagination-arrow{--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){.pagination-arrow{--surface-level:-2;--surface-shadow-weight:0}}@container style(--surface-level:-2){.pagination-arrow{--surface-level:-1;--surface-shadow-weight:0}}@container style(--surface-level:-1){.pagination-arrow{--surface-level:0;--surface-shadow-weight:0}}@container style(--surface-level:0){.pagination-arrow{--surface-level:1;--surface-shadow-weight:1}}@container style(--surface-level:1){.pagination-arrow{--surface-level:2;--surface-shadow-weight:2}}@container style(--surface-level:2){.pagination-arrow{--surface-level:3;--surface-shadow-weight:3}}@container style(--surface-level:3){.pagination-arrow{--surface-level:4;--surface-shadow-weight:4}}@container style(--surface-level:4){.pagination-arrow{--surface-level:5;--surface-shadow-weight:5}}@container style(--surface-level:5){.pagination-arrow{--surface-level:6;--surface-shadow-weight:6}}.pagination-arrow{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default)}.--active.pagination-arrow{--background:var(--background-active)}.pagination-arrow:not(.--active):hover{--background:var(--background-hover)}.pagination-arrow:not(.--active):active{--background:var(--background-pressed)}.pagination{--gap:var(--size-300);--size:32px}.pagination--arrows{--arrow-border-radius:var(--border-radius-400);--arrow-color:var(--color-text-500);--arrow-size:var(--size-600);--disabled-opacity:.4;--focus-color:var(--color-primary-500);--focus-width:var(--border-width-500);--gap:var(--size-100);--icon-size:var(--size-400)}.pagination--dots{--color:var(--color-text-500);--dot-color:oklch(from var(--color) l c h / .2);--dot-color-hover:oklch(from var(--color) l c h / .35);--dot-gap:calc(var(--size-300) / 2);--dot-size:6px;--focus-color:var(--color);--height:32px;--pill-color:var(--color);--pill-width:var(--size-500);--step:calc(var(--dot-size) + var(--dot-gap));--track-color:var(--pill-color)}.pagination--dots-autoplay{--track-color:oklch(from var(--pill-color) l c h / .4)}.pagination--dots-large{--dot-gap:var(--size-100);--dot-size:var(--size-100);--pill-width:28px}.pagination-card{--arrow-gap:var(--size-300);--arrow-inset:max(0px, calc(var(--padding-horizontal) - var(--border-width)));--arrow-shift:0px;--background-default:var(--surface-background-default);--background-hover:var(--surface-background-hover);--background-pressed:var(--surface-background-pressed);--border-color-default:var(--surface-border-default);--border-radius:var(--border-radius-600);--border-width:var(--border-width-400);--color-default:var(--color-text-300);--color-hover:var(--color-text-400);--color-pressed:var(--color-text-500);--focus-color:var(--color-primary-500);--focus-width:var(--border-width-500);--gap-vertical:0px;--icon-size:var(--size-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.pagination-card--next{--direction:1}.pagination-card--previous{--direction:-1}.pagination-card--tactile{--box-shadow-hover:var(--surface-shadow-hover)}@media (prefers-reduced-motion:reduce){.pagination-card{--arrow-shift:0px}}.pagination-card-subtitle{--color:var(--color-text-300);--font-size:var(--font-size-300)}.pagination-card-title{--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.pagination-control{--background-default:var(--surface-background-default);--box-shadow-default:var(--surface-shadow-default);--color-default:var(--color-text-500)}.pagination-control,.pagination-page{--background-hover:var(--surface-background-hover);--background-pressed:var(--surface-background-pressed);--border-color-default:var(--surface-border-default);--border-radius:var(--border-radius-400);--border-width:var(--border-width-400);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--padding-horizontal:var(--size-300);--padding-vertical:0px;--width:auto}.pagination-dot{--near:clamp(0, 1 - max(var(--progress) - var(--index), var(--index) - var(--progress)), 1)}@media (hover:hover){.pagination-dot:hover{--dot-color:var(--dot-color-hover)}}.pagination-page{--background-active:var(--surface-background-default);--border-color-active:var(--surface-border-default);--border-color-default:transparent;--box-shadow-active:var(--surface-shadow-default);--color-active:var(--color-text-500);--padding-horizontal:0px}.pagination-page--dots{--background-hover:transparent;--background-pressed:transparent;--color-hover:var(--color-default)}.pagination-pill{--k:clamp(0, round(down, var(--progress), 1), max(var(--count) - 2, 0));--lead:calc(var(--lead-t) * var(--lead-t) * (3 - 2 * var(--lead-t)));--lead-t:clamp(0, var(--t) / .6, 1);--t:clamp(0, var(--progress) - var(--k), 1);--trail:calc(var(--trail-t) * var(--trail-t) * (3 - 2 * var(--trail-t)));--trail-t:clamp(0, (var(--t) - .4) / .6, 1)}.pagination.pagination--arrows{gap:var(--gap);flex:none;justify-content:flex-start;width:auto}.pagination-arrow{--background-default:var(--arrow-background,var(--surface-background-default));--background-hover:var(--arrow-background-hover,var(--surface-background-hover));--background-pressed:var(--arrow-background-pressed,var(--surface-background-pressed));background:var(--background);border-radius:var(--arrow-border-radius);color:var(--arrow-color);cursor:pointer;height:var(--arrow-size);transition:background-color var(--transition-duration) var(--transition-timing-function);width:var(--arrow-size);border:0;outline:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.pagination-arrow:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--size-100) / 4)}@media (hover:none){.pagination-arrow{--background-hover:var(--background-default)}}.pagination-arrow.--disabled{--background-hover:var(--background-default);--background-pressed:var(--background-default);cursor:default;opacity:var(--disabled-opacity)}.pagination-arrow .pagination-arrow-icon{--color:currentColor;--size:var(--icon-size)}.pagination-arrow--next .pagination-arrow-icon{margin-right:calc(var(--icon-size) / -4)}.pagination-arrow--previous .pagination-arrow-icon{margin-left:calc(var(--icon-size) / -4)}.pagination-card{--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.pagination-card{--color:var(--color-active)}.pagination-card:not(.--active):hover{--color:var(--color-hover)}.pagination-card:not(.--active):active{--color:var(--color-pressed)}.pagination.pagination--cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;display:grid}@media (width<=560px){.pagination.pagination--cards{grid-template-columns:minmax(0,1fr)}}.pagination-card{color:var(--color);gap:var(--gap-vertical) var(--gap-horizontal);outline:none;flex-direction:column;min-width:0;text-decoration:none;display:flex}.pagination-card .pagination-card-arrow{--size:var(--icon-size);transition:color var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);translate:var(--arrow-offset,0) -50%;position:absolute;top:50%}.pagination-card .pagination-card-arrow:first-child{left:var(--arrow-inset)}.pagination-card .pagination-card-arrow:last-child{right:var(--arrow-inset)}.pagination-card--next{text-align:end;grid-column:2;align-items:flex-end}@media (width<=560px){.pagination-card--next{grid-column:auto}}.pagination-card--previous{text-align:start;align-items:flex-start}.pagination-card--tactile:active{transform:translateY(1px)}.pagination-card--tactile:focus-visible{--box-shadow:var(--box-shadow-hover)}.pagination-card--tactile:focus-visible,.pagination-card--tactile:hover{transform:translateY(-1px)}@media (prefers-reduced-motion:reduce){.pagination-card--tactile{transform:none!important}}.pagination-card-subtitle{color:var(--color);font-size:var(--font-size);transition:color var(--transition-duration) var(--transition-timing-function)}.pagination-card-title{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);overflow-wrap:anywhere;text-transform:capitalize;transition:color var(--transition-duration) var(--transition-timing-function)}.pagination-card:focus-visible{--color:var(--color-hover);outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--size-100) / 4)}.pagination-card:focus-visible,.pagination-card:hover{--arrow-offset:calc(var(--arrow-shift) * var(--direction))}.pagination-card:has(>.pagination-card-arrow:first-child){padding-left:calc(var(--arrow-inset) + var(--icon-size) + var(--arrow-gap))}.pagination-card:has(>.pagination-card-arrow:last-child){padding-right:calc(var(--arrow-inset) + var(--icon-size) + var(--arrow-gap))}.pagination-fill{position:absolute;inset:0}.pagination-dot{box-sizing:content-box;cursor:pointer;inset-block:0;left:calc(var(--index) * var(--step) + (var(--pill-width) - var(--dot-size)) * clamp(0, var(--index) - var(--progress), 1));margin:0 0 0 calc(var(--dot-gap) / -2);padding:0 calc(var(--dot-gap) / 2);touch-action:manipulation;width:calc(var(--dot-size) + (var(--pill-width) - var(--dot-size)) * var(--near));background:0 0;border:0;border-radius:999px;outline:none;align-items:center;display:flex;position:absolute}.pagination-dot:focus-visible{outline:var(--border-width-500) solid var(--focus-color)}.pagination-fill{background:var(--pill-color);transform-origin:0}.pagination-mark{background:var(--dot-color);height:var(--dot-size);transition:background-color var(--transition-duration) var(--transition-timing-function);border-radius:999px;width:100%}.pagination-pill{background:var(--track-color);height:var(--dot-size);pointer-events:none;translate:calc(var(--k) * var(--step) + var(--step) * var(--trail)) -50%;width:calc(var(--pill-width) + var(--step) * (var(--lead) - var(--trail)));border-radius:999px;position:absolute;top:50%;left:0;overflow:hidden}@media (prefers-reduced-motion:reduce){.pagination-mark{transition:background-color var(--transition-duration) var(--transition-timing-function);scale:none}}.pagination{align-items:center;gap:var(--gap);justify-content:space-between;width:100%;display:flex}.pagination--dots{contain:layout;height:var(--height);width:calc((var(--count) - 1) * var(--step) + var(--pill-width));flex:none;display:block;position:relative}.pagination-control{gap:var(--size-100)}.pagination-control.--disabled{opacity:.64;pointer-events:none}.pagination-control,.pagination-page{border:var(--border-width) solid var(--border-color);height:var(--size)}.pagination-page{font-variant:tabular-nums;min-width:var(--size)}.pagination-page--dots{cursor:default;pointer-events:none}.pagination-pages{align-items:center;gap:var(--size-100);display:flex}}
 /*$vite$:1*/