@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/bento-grid/index.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type Card = Attributes & {
+    background?: Renderable<unknown>;
+    cta?: string;
+    description: string;
+    href?: string;
+    icon?: Renderable<unknown>;
+    name: string;
+    span?: 1 | 2 | 3;
+};
+declare function card({ background, cta, description, href, icon, name, span, ...attributes }: Card): DocumentFragment | Text;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends Attributes>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: Attributes, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<Attributes> | undefined;
+        content?: Renderable<any>;
+    }): any;
+} & {
+    card: typeof card;
+};
+export default _default;

package/build/components/bento-grid/index.js

@@ -0,0 +1,38 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_12bcjhy0 = template_u1.template(`<svg aria-hidden='true' class='bento-grid-arrow' fill='none' viewBox='0 0 15 15'><path d='M8.15 3.15a.5.5 0 0 1 .7 0l4 4a.5.5 0 0 1 0 .7l-4 4a.5.5 0 0 1-.7-.7L11.29 8H2.5a.5.5 0 0 1 0-1h8.79L8.15 3.85a.5.5 0 0 1 0-.7Z' fill='currentColor' />`);
+const template_12bcjhy2 = template_u1.template(`<div class='bento-grid-card'><div aria-hidden='true' class='bento-grid-background'></div><div class='bento-grid-body'><div class='bento-grid-content'><!--$--><h3 class='bento-grid-name'></h3><p class='bento-grid-description'></p></div></div><div class='bento-grid-cta'><a class='bento-grid-link'><!--$--></a></div><div aria-hidden='true' class='bento-grid-overlay'>`);
+const template_12bcjhyb = template_u1.template(`<span aria-hidden='true' class='bento-grid-icon'>`);
+const template_12bcjhye = template_u1.template(`<div class='bento-grid'>`);
+function arrow() {
+    return template_12bcjhy0();
+}
+function card({ background, cta = 'Learn more', description, href = '#', icon, name, span = 3, ...attributes }) {
+    return (() => {
+        let root_12bcjhy1 = template_12bcjhy2(), element_12bcjhy3 = root_12bcjhy1.firstChild, element_12bcjhy4 = element_12bcjhy3.firstElementChild, element_12bcjhy5 = element_12bcjhy4.nextElementSibling.firstElementChild.firstChild, element_12bcjhy6 = element_12bcjhy4.nextElementSibling.firstElementChild.firstElementChild, element_12bcjhy7 = element_12bcjhy6.nextElementSibling, element_12bcjhy8 = element_12bcjhy4.nextElementSibling.nextElementSibling.firstElementChild, element_12bcjhy9 = element_12bcjhy8.firstChild;
+        template_u1.setList(element_12bcjhy3, 'style', `--span: ${span}`);
+        template_u1.setProperties(element_12bcjhy3, attributes);
+        template_u1.slot(element_12bcjhy4, background, 1);
+        template_u1.slot(element_12bcjhy5, icon && (() => {
+            let root_12bcjhya = template_12bcjhyb(), element_12bcjhyc = root_12bcjhya.firstChild;
+            template_u1.slot(element_12bcjhyc, icon, 1);
+            return root_12bcjhya;
+        })());
+        template_u1.slot(element_12bcjhy6, name, 1);
+        template_u1.slot(element_12bcjhy7, description, 1);
+        template_u1.setProperty(element_12bcjhy8, 'href', href);
+        template_u1.slot(element_12bcjhy9, cta);
+        template_u1.slot(element_12bcjhy8, arrow(), 2);
+        return root_12bcjhy1;
+    })();
+}
+export default Object.assign(component(function (attributes, content) {
+    return (() => {
+        let root_12bcjhyd = template_12bcjhye(), element_12bcjhyf = root_12bcjhyd.firstChild;
+        template_u1.setProperties(element_12bcjhyf, this?.attributes);
+        template_u1.setProperties(element_12bcjhyf, attributes);
+        template_u1.slot(element_12bcjhyf, content, 1);
+        return root_12bcjhyd;
+    })();
+}), { card });

package/build/components/bento-grid/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.bento-grid{--background:var(--color-white-300);--border-radius:12px;--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .03), 0 2px 4px oklch(from var(--color-black-300) l c h / .05), 0 12px 24px oklch(from var(--color-black-300) l c h / .05);--description-color:var(--color-text-300);--duration:.3s;--ease:cubic-bezier(.4, 0, .2, 1);--focus-color:oklch(from var(--color-text-500) l c h / .38);--gap:16px;--icon-color:var(--color-text-400);--icon-size:48px;--link-color:var(--color-text-500);--link-font-size:calc(var(--font-size-400) * .875);--name-color:var(--color-text-400);--name-font-size:var(--font-size-500);--overlay-hover:oklch(from var(--color-black-300) l c h / .03);--padding:16px;--row-height:22rem;gap:var(--gap);grid-auto-rows:var(--row-height);grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid;container-type:inline-size}.bento-grid-arrow{height:16px;transition:translate var(--duration) var(--ease);flex-shrink:0;width:16px}.bento-grid-background{pointer-events:none;position:absolute;inset:0}.bento-grid-background>*{pointer-events:auto}.bento-grid-body{padding:var(--padding);z-index:1;margin-top:auto;position:relative}.bento-grid-card{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);flex-direction:column;grid-column:span 3;justify-content:space-between;display:flex;position:relative;overflow:hidden}.bento-grid-content{pointer-events:none;transition:translate var(--duration) var(--ease);flex-direction:column;gap:4px;display:flex}.bento-grid-cta{padding:0 var(--padding) var(--padding);z-index:1;display:flex;position:relative}.bento-grid-description{color:var(--description-color);max-width:32rem;margin:0}.bento-grid-icon{color:var(--icon-color);height:var(--icon-size);transform-origin:0;transition:scale var(--duration) var(--ease);width:var(--icon-size);display:flex}.bento-grid-icon svg{width:100%;height:100%}.bento-grid-link{color:var(--link-color);font-size:var(--link-font-size);font-weight:var(--font-weight-500);outline:0 solid var(--focus-color);outline-offset:2px;text-underline-offset:4px;border-radius:4px;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.bento-grid-link:focus-visible{outline-width:2px}.bento-grid-link:hover{text-decoration:underline}.bento-grid-link:hover .bento-grid-arrow{translate:2px}.bento-grid-name{color:var(--name-color);font-size:var(--name-font-size);font-weight:var(--font-weight-600);margin:0}.bento-grid-overlay{pointer-events:none;transition:background-color var(--duration) var(--ease);position:absolute;inset:0}.bento-grid-card:hover .bento-grid-overlay{background:var(--overlay-hover)}.bento-grid-card:hover .bento-grid-icon,.bento-grid-card:focus-within .bento-grid-icon{scale:.75}@container (width>=720px){.bento-grid-card{grid-column:span var(--span)}.bento-grid-cta{opacity:0;padding:var(--padding);transition:opacity var(--duration) var(--ease), translate var(--duration) var(--ease);bottom:0;position:absolute;inset-inline:0;translate:0 40px}.bento-grid-card:hover .bento-grid-content,.bento-grid-card:focus-within .bento-grid-content{translate:0 -40px}.bento-grid-card:hover .bento-grid-cta,.bento-grid-card:focus-within .bento-grid-cta{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){.bento-grid-arrow,.bento-grid-content,.bento-grid-icon{transition:none}.bento-grid-cta{translate:0!important}}}
+/*$vite$:1*/

package/build/components/bento-grid-spotlight/index.d.ts

@@ -0,0 +1,35 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type Card = Attributes & {
+    background?: Renderable<unknown>;
+    beam?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    description?: Renderable<unknown>;
+    icon?: Renderable<unknown>;
+    rows?: 1 | 2 | 3;
+    spotlight?: boolean;
+    tilt?: boolean;
+    title?: Renderable<unknown>;
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends Attributes>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: Attributes, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<Attributes> | undefined;
+        content?: Renderable<any>;
+    }): any;
+} & {
+    card: {
+        (): Renderable<any>;
+        <T extends Card>(attributes: T): Renderable<any>;
+        <T extends Renderable<any>>(content: T): Renderable<any>;
+        (attributes: Card, content?: Renderable<any>): Renderable<any>;
+        bind(context: {
+            attributes?: Partial<Card> | undefined;
+            content?: Renderable<any>;
+        }): any;
+    };
+};
+export default _default;

package/build/components/bento-grid-spotlight/index.js

@@ -0,0 +1,108 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_1dq8ad92 = template_u1.template(`<div class='bento-grid-spotlight-card '><!--$--><!--$--><!--$--><div class='bento-grid-spotlight-body'><div class='bento-grid-spotlight-visual'>`);
+const template_1dq8ad99 = template_u1.template(`<div aria-hidden='true' class='bento-grid-spotlight-glow'>`);
+const template_1dq8ad9a = template_u1.template(`<div aria-hidden='true' class='bento-grid-spotlight-beam'><div class='bento-grid-spotlight-beam-light'>`);
+const template_1dq8ad9c = template_u1.template(`<div aria-hidden='true' class='bento-grid-spotlight-background'>`);
+const template_1dq8ad9f = template_u1.template(`<div class='bento-grid-spotlight-footer'><!--$--><div><!--$-->`);
+const template_1dq8ad9k = template_u1.template(`<div aria-hidden='true' class='bento-grid-spotlight-icon'>`);
+const template_1dq8ad9n = template_u1.template(`<h3 class='bento-grid-spotlight-title'>`);
+const template_1dq8ad9q = template_u1.template(`<p class='bento-grid-spotlight-description'>`);
+const template_1dq8ad9t = template_u1.template(`<div class='bento-grid-spotlight'><div class='bento-grid-spotlight-grid'>`);
+class ReactiveObject_1dq8ad90 extends reactivity_u0.ReactiveObject {
+    #visible = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get visible() {
+        return reactivity_u0.read(this.#visible);
+    }
+    set visible(_v0) {
+        reactivity_u0.write(this.#visible, _v0);
+    }
+}
+const TILT = 5;
+const TILT_RANGE = 150;
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+const card = component(function ({ background, beam = true, columns = 1, description, icon, rows = 1, spotlight = true, tilt = false, title, ...attributes }, content) {
+    let footer = title || description || icon;
+    return (() => {
+        let root_1dq8ad91 = template_1dq8ad92(), element_1dq8ad93 = root_1dq8ad91.firstChild, element_1dq8ad94 = element_1dq8ad93.firstChild, element_1dq8ad95 = element_1dq8ad94.nextSibling, element_1dq8ad96 = element_1dq8ad95.nextSibling, element_1dq8ad97 = element_1dq8ad93.firstElementChild.firstElementChild, element_1dq8ad98 = element_1dq8ad93.firstElementChild;
+        template_u1.setList(element_1dq8ad93, 'class', tilt && '--tilt');
+        template_u1.setList(element_1dq8ad93, 'style', `--columns: ${columns}; --rows: ${rows};`);
+        template_u1.setProperties(element_1dq8ad93, this?.attributes);
+        template_u1.setProperties(element_1dq8ad93, attributes);
+        template_u1.on(element_1dq8ad93, 'pointerleave', function () {
+            this.style.setProperty('--tilt-x', '0deg');
+            this.style.setProperty('--tilt-y', '0deg');
+        });
+        template_u1.delegate(element_1dq8ad93, 'pointermove', function (event) {
+            let rect = this.getBoundingClientRect(), x = event.clientX - rect.left, y = event.clientY - rect.top;
+            this.style.setProperty('--spot-x', `${x}px`);
+            this.style.setProperty('--spot-y', `${y}px`);
+            if (tilt) {
+                this.style.setProperty('--tilt-x', `${clamp((y - rect.height / 2) / TILT_RANGE, -1, 1) * -TILT}deg`);
+                this.style.setProperty('--tilt-y', `${clamp((x - rect.width / 2) / TILT_RANGE, -1, 1) * TILT}deg`);
+            }
+        });
+        template_u1.slot(element_1dq8ad94, spotlight && template_1dq8ad99());
+        template_u1.slot(element_1dq8ad95, beam && template_1dq8ad9a());
+        template_u1.slot(element_1dq8ad96, background && (() => {
+            let root_1dq8ad9b = template_1dq8ad9c(), element_1dq8ad9d = root_1dq8ad9b.firstChild;
+            template_u1.slot(element_1dq8ad9d, background, 1);
+            return root_1dq8ad9b;
+        })());
+        template_u1.slot(element_1dq8ad97, content, 1);
+        template_u1.slot(element_1dq8ad98, footer && (() => {
+            let root_1dq8ad9e = template_1dq8ad9f(), element_1dq8ad9g = root_1dq8ad9e.firstChild.firstChild, element_1dq8ad9h = root_1dq8ad9e.firstChild.firstElementChild.firstChild, element_1dq8ad9i = root_1dq8ad9e.firstChild.firstElementChild;
+            template_u1.slot(element_1dq8ad9g, icon && (() => {
+                let root_1dq8ad9j = template_1dq8ad9k(), element_1dq8ad9l = root_1dq8ad9j.firstChild;
+                template_u1.slot(element_1dq8ad9l, icon, 1);
+                return root_1dq8ad9j;
+            })());
+            template_u1.slot(element_1dq8ad9h, title && (() => {
+                let root_1dq8ad9m = template_1dq8ad9n(), element_1dq8ad9o = root_1dq8ad9m.firstChild;
+                template_u1.slot(element_1dq8ad9o, title, 1);
+                return root_1dq8ad9m;
+            })());
+            template_u1.slot(element_1dq8ad9i, description && (() => {
+                let root_1dq8ad9p = template_1dq8ad9q(), element_1dq8ad9r = root_1dq8ad9p.firstChild;
+                template_u1.slot(element_1dq8ad9r, description, 1);
+                return root_1dq8ad9p;
+            })(), 2);
+            return root_1dq8ad9e;
+        })(), 2);
+        return root_1dq8ad91;
+    })();
+});
+export default Object.assign(component(function (attributes, content) {
+    let observer, ui = new ReactiveObject_1dq8ad90();
+    return (() => {
+        let root_1dq8ad9s = template_1dq8ad9t(), element_1dq8ad9u = root_1dq8ad9s.firstChild, element_1dq8ad9v = element_1dq8ad9u.firstElementChild;
+        template_u1.setProperties(element_1dq8ad9u, this?.attributes);
+        template_u1.setProperties(element_1dq8ad9u, attributes);
+        template_u1.setList(element_1dq8ad9u, 'class', () => ui.visible && '--visible');
+        template_u1.onconnect(element_1dq8ad9u, (element) => {
+            let children = element.firstElementChild.children;
+            for (let i = 0, n = children.length; i < n; i++) {
+                children[i].style.setProperty('--i', String(i));
+            }
+            observer = new IntersectionObserver((entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    ui.visible = true;
+                    observer?.disconnect();
+                }
+            }, { rootMargin: '-50px' });
+            observer.observe(element);
+        });
+        template_u1.ondisconnect(element_1dq8ad9u, () => {
+            observer?.disconnect();
+        });
+        template_u1.slot(element_1dq8ad9v, content, 1);
+        return root_1dq8ad9s;
+    })();
+}), { card });

package/build/components/bento-grid-spotlight/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.bento-grid-spotlight{--background:var(--color-grey-300);--beam-duration:8s;--beam-from:oklch(70.8% 0 0/0);--beam-to:oklch(70.8% 0 0/.4);--beam-width:1.5px;--border-color:var(--color-border-300);--border-radius:16px;--box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h / .05);--box-shadow-hover:0 10px 15px -3px oklch(from var(--color-border-300) l c h / .5), 0 4px 6px -4px oklch(from var(--color-border-300) l c h / .5);--description-color:var(--color-text-300);--description-font-size:calc(var(--font-size-400) * .875);--duration:.3s;--enter-duration:.7s;--enter-ease:linear(0, .066, .211, .388, .574, .733, .862, .958, 1.025, 1.063, 1.079, 1.081, 1.073, 1.06, 1.045, 1.031, 1.018, 1.008, 1.001, .997, .994, .993, .994, .994, .996, .997, .998, .999, 1, 1, 1);--enter-stagger:.1s;--gap:24px;--hover-duration:.57s;--hover-ease:linear(0, .065, .212, .394, .575, .736, .866, .962, 1.025, 1.062, 1.077, 1.078, 1.069, 1.056, 1.041, 1.028, 1.017, 1.007, 1.001, .997, .995, .994, .994, .995, .996, .997, .998, .999, 1, 1, 1);--hover-lift:-4px;--hover-scale:1.01;--icon-background:oklch(from var(--color-border-300) l c h / .5);--max-width:80rem;--padding:20px;--perspective:1000px;--press-scale:.98;--spotlight-color:oklch(from var(--color-black-300) l c h / .05);--spotlight-size:350px;--tilt-duration:.54s;--tilt-ease:linear(0, .043, .14, .261, .387, .505, .611, .702, .777, .837, .881, .918, .945, .965, .979, .989, .995, .999, 1.002, 1.003, 1.004, 1.004, 1.003, 1.003, 1.003, 1.002, 1.002, 1.001, 1.001, 1.001, 1);--title-color:var(--color-text-500);--title-font-size:calc(var(--font-size-400) * 1.125);max-width:var(--max-width);width:100%;margin-inline:auto;container-type:inline-size}.bento-grid-spotlight-background{opacity:.5;transition:opacity var(--duration) ease;z-index:0;position:absolute;inset:0}.bento-grid-spotlight-beam{border-radius:inherit;padding:var(--beam-width);pointer-events:none;z-index:0;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.bento-grid-spotlight-beam-light{animation:bento-grid-spotlight-beam var(--beam-duration) linear infinite;aspect-ratio:1;background:conic-gradient(from 0deg, var(--beam-from) 0%, var(--beam-to) 50%, var(--beam-from) 100%);opacity:.3;transition:opacity var(--duration) ease;width:250%;position:absolute;top:50%;left:50%;translate:-50% -50%}.bento-grid-spotlight-body{height:100%;padding:var(--padding);z-index:1;flex-direction:column;justify-content:space-between;display:flex;position:relative}.bento-grid-spotlight-card{background:var(--background);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);grid-row:span var(--rows);transition:box-shadow var(--duration) ease, scale var(--hover-duration) var(--hover-ease), transform var(--tilt-duration) var(--tilt-ease), translate var(--hover-duration) var(--hover-ease);flex-direction:column;display:flex;position:relative;overflow:hidden}.bento-grid-spotlight-card.--tilt{transform:perspective(var(--perspective)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}.bento-grid-spotlight-card:hover{box-shadow:var(--box-shadow-hover);scale:var(--hover-scale);translate:0 var(--hover-lift)}.bento-grid-spotlight-card:hover .bento-grid-spotlight-background,.bento-grid-spotlight-card:hover .bento-grid-spotlight-glow,.bento-grid-spotlight-card:hover .bento-grid-spotlight-beam-light{opacity:1}.bento-grid-spotlight-card:active{scale:var(--press-scale)}.bento-grid-spotlight-description{color:var(--description-color);font-size:var(--description-font-size);margin:4px 0 0}.bento-grid-spotlight-footer{align-items:flex-start;gap:16px;display:flex}.bento-grid-spotlight-visual:not(:empty)+.bento-grid-spotlight-footer{margin-top:24px}.bento-grid-spotlight-glow{background:radial-gradient(var(--spotlight-size) circle at var(--spot-x,50%) var(--spot-y,50%), var(--spotlight-color), transparent 80%);opacity:0;pointer-events:none;transition:opacity var(--duration) ease;z-index:0;position:absolute;inset:-1px}.bento-grid-spotlight-grid{gap:var(--gap);grid-template-columns:minmax(0,1fr);display:grid}.bento-grid-spotlight-icon{background:var(--icon-background);color:var(--title-color);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.bento-grid-spotlight-icon svg{width:20px;height:20px}.bento-grid-spotlight-title{color:var(--title-color);font-size:var(--title-font-size);font-weight:var(--font-weight-500);letter-spacing:-.02em;margin:0}.bento-grid-spotlight-visual{flex:1;min-height:0}.bento-grid-spotlight:not(.--visible) .bento-grid-spotlight-card{opacity:0}.bento-grid-spotlight.--visible .bento-grid-spotlight-card{animation:bento-grid-spotlight-enter var(--enter-duration) var(--enter-ease) backwards;animation-delay:calc(var(--i,0) * var(--enter-stagger))}@container (width>=560px){.bento-grid-spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bento-grid-spotlight-card{grid-column:span min(var(--columns), 2)}}@container (width>=900px){.bento-grid-spotlight-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bento-grid-spotlight-card{grid-column:span var(--columns)}}@media (prefers-reduced-motion:reduce){.bento-grid-spotlight-beam-light{animation:none}.bento-grid-spotlight-card{transition:box-shadow var(--duration) ease}.bento-grid-spotlight-card,.bento-grid-spotlight-card:active,.bento-grid-spotlight-card:hover{transform:translate(0,0)}.bento-grid-spotlight:not(.--visible) .bento-grid-spotlight-card{opacity:1}.bento-grid-spotlight.--visible .bento-grid-spotlight-card{animation:none}}@keyframes bento-grid-spotlight-beam{to{rotate:360deg}}@keyframes bento-grid-spotlight-enter{0%{opacity:0;translate:0 12px;scale:.98}}}
+/*$vite$:1*/

package/build/components/bookmark-button/index.d.ts

@@ -0,0 +1,23 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [BOOKMARK_BUTTON_ICON]?: Attributes;
+    count?: number;
+    label?: string;
+    onclick?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    onsave?: (saved: boolean) => void;
+    savedLabel?: string;
+    state?: State;
+};
+type State = {
+    saved: boolean;
+};
+declare const BOOKMARK_BUTTON_ICON: unique symbol;
+declare const _default: ((this: {
+    attributes?: A;
+} | void, { count, label, onsave, savedLabel, state, ...attributes }?: A) => DocumentFragment | Text) & {
+    readonly icon: typeof BOOKMARK_BUTTON_ICON;
+};
+export default _default;

package/build/components/bookmark-button/index.js

@@ -0,0 +1,120 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_16x42zk3 = template_u1.template(`<button class='button bookmark-button' type='button'><span aria-hidden='true' class='bookmark-button-icon'><svg class='bookmark-button-outline' viewBox='0 0 24 24'><path d='M6.5 4.75A1.75 1.75 0 0 1 8.25 3h7.5a1.75 1.75 0 0 1 1.75 1.75v15.07a.5.5 0 0 1-.79.41L12 16.75l-4.71 3.48a.5.5 0 0 1-.79-.41Z' /></svg><svg class='bookmark-button-fill' viewBox='0 0 24 24'><path d='M6.5 4.75A1.75 1.75 0 0 1 8.25 3h7.5a1.75 1.75 0 0 1 1.75 1.75v15.07a.5.5 0 0 1-.79.41L12 16.75l-4.71 3.48a.5.5 0 0 1-.79-.41Z' /></svg></span><!--$--><span aria-live='polite' class='bookmark-button-live'>`);
+const template_16x42zk9 = template_u1.template(`<span aria-hidden='true' class='bookmark-button-labels'><span class='bookmark-button-label bookmark-button-label--idle'></span><span class='bookmark-button-label bookmark-button-label--saved'>`);
+const template_16x42zkd = template_u1.template(`<span class='bookmark-button-count'><span class='bookmark-button-live'></span><span aria-hidden='true' class='bookmark-button-count-values'><span class='bookmark-button-count-value'>`);
+class ReactiveObject_16x42zk0 extends reactivity_u0.ReactiveObject {
+    #saved = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get saved() {
+        return reactivity_u0.read(this.#saved);
+    }
+    set saved(_v0) {
+        reactivity_u0.write(this.#saved, _v0);
+    }
+}
+class ReactiveObject_16x42zk1 extends reactivity_u0.ReactiveObject {
+    #note = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get note() {
+        return reactivity_u0.read(this.#note);
+    }
+    set note(_v0) {
+        reactivity_u0.write(this.#note, _v0);
+    }
+}
+const BOOKMARK_BUTTON_ICON = Symbol.for('@esportsplus/ui/bookmark-button.icon');
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const LAND = [
+    { easing: 'ease-out', scale: '1 1', translate: '0 0' },
+    { easing: 'ease-in', offset: 0.35, scale: '0.97 1.04', translate: '0 -2px' },
+    { easing: 'ease-out', offset: 0.65, scale: '1.04 0.95', translate: '0 1px' },
+    { scale: '1 1', translate: '0 0' }
+];
+const SPRING = 'linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1)';
+let uid = 0;
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function roll(container, value, previous) {
+    let blur = reduced() ? 'blur(0px)' : 'blur(4px)', direction = value > previous ? 1 : -1, next = document.createElement('span'), shift = reduced() ? 0 : 6;
+    for (let child of [...container.children]) {
+        child.classList.add('bookmark-button-count-value--leaving');
+        child.animate([{}, { filter: blur, opacity: 0, translate: `0 ${(-direction * shift) / 2}px` }], { duration: 120, easing: EASE_OUT, fill: 'forwards' }).finished.then(() => child.remove(), () => child.remove());
+    }
+    next.className = 'bookmark-button-count-value';
+    next.textContent = String(value);
+    container.append(next);
+    next.animate([{ filter: blur, opacity: 0, translate: `0 ${direction * shift}px` }, { filter: 'blur(0px)', opacity: 1, translate: '0 0' }], { duration: 300, easing: SPRING });
+}
+export default Object.assign(function ({ count, label = 'Save', onsave, savedLabel = 'Saved', state = new ReactiveObject_16x42zk0(), ...attributes } = {}) {
+    let icon, id = `bookmark-button-${++uid}`, live = new ReactiveObject_16x42zk1(), stop, total = () => (count ?? 0) + (state.saved ? 1 : 0);
+    function toggle() {
+        let element = this.querySelector('.bookmark-button-icon'), next = !state.saved;
+        state.saved = next;
+        live.note = next ? 'Saved' : 'Removed from saved';
+        onsave?.(next);
+        if (!element || reduced()) {
+            return;
+        }
+        if (next) {
+            icon?.cancel();
+            icon = element.animate(LAND, { duration: 400 });
+            return;
+        }
+        let { scale, translate } = getComputedStyle(element);
+        icon?.cancel();
+        icon = element.animate([{ scale, translate }, { scale: '1 1', translate: '0 0' }], { duration: 150, easing: EASE_OUT });
+    }
+    return (() => {
+        let root_16x42zk2 = template_16x42zk3(), element_16x42zk4 = root_16x42zk2.firstChild, element_16x42zk5 = element_16x42zk4.firstElementChild, element_16x42zk6 = element_16x42zk4.firstChild.nextSibling, element_16x42zk7 = element_16x42zk5.nextElementSibling;
+        template_u1.setProperties(element_16x42zk4, this?.attributes);
+        template_u1.setProperties(element_16x42zk4, attributes);
+        template_u1.setProperty(element_16x42zk4, 'aria-describedby', count === undefined ? undefined : `${id}-count`);
+        template_u1.setProperty(element_16x42zk4, 'aria-label', label);
+        template_u1.setProperty(element_16x42zk4, 'aria-pressed', () => state.saved ? 'true' : 'false');
+        template_u1.setList(element_16x42zk4, 'class', () => state.saved && '--active');
+        template_u1.delegate(element_16x42zk4, 'click', toggle);
+        template_u1.onconnect(element_16x42zk4, (element) => {
+            let container = element.querySelector('.bookmark-button-count-values'), previous = total();
+            if (!container) {
+                return;
+            }
+            stop = effect(() => {
+                let value = total();
+                if (value !== previous) {
+                    roll(container, value, previous);
+                    previous = value;
+                }
+            });
+        });
+        template_u1.ondisconnect(element_16x42zk4, () => {
+            icon?.cancel();
+            stop?.();
+        });
+        template_u1.setProperties(element_16x42zk5, this?.attributes?.[BOOKMARK_BUTTON_ICON]);
+        template_u1.setProperties(element_16x42zk5, attributes[BOOKMARK_BUTTON_ICON]);
+        element_16x42zk6.parentNode.insertBefore(count === undefined
+            ? (() => {
+                let root_16x42zk8 = template_16x42zk9(), element_16x42zka = root_16x42zk8.firstChild.firstElementChild, element_16x42zkb = element_16x42zka.nextElementSibling;
+                template_u1.slot(element_16x42zka, label, 1);
+                template_u1.slot(element_16x42zkb, savedLabel, 1);
+                return root_16x42zk8;
+            })()
+            : (() => {
+                let root_16x42zkc = template_16x42zkd(), element_16x42zke = root_16x42zkc.firstChild.firstElementChild, element_16x42zkf = element_16x42zke.nextElementSibling.firstElementChild;
+                template_u1.setProperty(element_16x42zke, 'id', template_u1.interpolate([(id), "-count"]));
+                new template_u1.EffectSlot(element_16x42zke, () => `${total()} saves`, 1);
+                template_u1.slot(element_16x42zkf, total(), 1);
+                return root_16x42zkc;
+            })(), element_16x42zk6);
+        new template_u1.EffectSlot(element_16x42zk7, () => live.note, 1);
+        return root_16x42zk2;
+    })();
+}, { icon: BOOKMARK_BUTTON_ICON });

package/build/components/bookmark-button/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.bookmark-button{--bookmark-button-background:var(--color-grey-400);--bookmark-button-background-hover:var(--color-white-300);--bookmark-button-box-shadow:0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);--bookmark-button-color:var(--color-text-500);--bookmark-button-count-color:var(--color-text-500);--bookmark-button-ease:cubic-bezier(.23, 1, .32, 1);--bookmark-button-fill-duration:.26s;--bookmark-button-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--bookmark-button-font-size:14px;--bookmark-button-gap:var(--size-100);--bookmark-button-height:40px;--bookmark-button-icon-size:20px;--bookmark-button-scale-pressed:.96;--bookmark-button-unfill-duration:.15s;--border-radius:999px;--padding-horizontal:16px;--padding-vertical:0px}.bookmark-button--white{--bookmark-button-background:var(--color-white-300);--bookmark-button-background-hover:color-mix(in oklab, var(--color-white-300) 60%, transparent)}.bookmark-button.button{--background-default:var(--bookmark-button-background);--background-hover:var(--bookmark-button-background-hover);--box-shadow-default:var(--bookmark-button-box-shadow);--color-default:var(--bookmark-button-color);--font-size:var(--bookmark-button-font-size);--font-weight:var(--font-weight-500);--line-height:20px;gap:var(--bookmark-button-gap);height:var(--bookmark-button-height);padding-inline:calc(var(--padding-horizontal) - 4px) var(--padding-horizontal);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;transition:background-color .15s ease-out,scale .15s ease-out;display:inline-flex}.bookmark-button:active{scale:var(--bookmark-button-scale-pressed)}.bookmark-button:focus-visible{outline:2px solid var(--bookmark-button-focus-color);outline-offset:2px}.bookmark-button-count{color:var(--bookmark-button-count-color);font-variant-numeric:tabular-nums;justify-content:flex-end;display:inline-flex;position:relative}.bookmark-button-count-values{justify-content:flex-end;display:inline-flex;position:relative}.bookmark-button-count-value{display:inline-block}.bookmark-button-count-value--leaving{position:absolute;top:0;right:0}.bookmark-button-fill,.bookmark-button-outline{height:var(--bookmark-button-icon-size);width:var(--bookmark-button-icon-size);grid-area:1/1}.bookmark-button-fill{clip-path:inset(85% 0 0);fill:currentColor;transition:clip-path var(--bookmark-button-unfill-duration) ease-out}.bookmark-button-icon{transform-origin:bottom;display:grid}.bookmark-button-label{filter:blur(4px);opacity:0;transition:filter .1s var(--bookmark-button-ease), opacity .1s var(--bookmark-button-ease), translate .1s var(--bookmark-button-ease);grid-area:1/1;translate:0 2px}.bookmark-button-label--idle{filter:blur();opacity:1;transition-duration:.2s;translate:0}.bookmark-button-labels{display:grid}.bookmark-button-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.bookmark-button-outline{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:1.75px}.bookmark-button.--active .bookmark-button-fill{clip-path:inset(12% 0 0);transition:clip-path var(--bookmark-button-fill-duration) var(--bookmark-button-ease)}.bookmark-button.--active .bookmark-button-label--idle{filter:blur(4px);opacity:0;transition-duration:.1s;translate:0 2px}.bookmark-button.--active .bookmark-button-label--saved{filter:blur();opacity:1;transition-duration:.2s;translate:0}@media (prefers-reduced-motion:reduce){.bookmark-button.button{transition:background-color .15s ease-out}.bookmark-button:active{scale:1}.bookmark-button .bookmark-button-fill{transition:none}.bookmark-button .bookmark-button-label{filter:none;transition-property:opacity;translate:0}}}
+/*$vite$:1*/

package/build/components/breadcrumb/ellipsis.d.ts

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/ellipsis.js

@@ -0,0 +1,11 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import more from './svg/more.svg';
+const template_176lwtf1 = template_u1.template(`<span aria-hidden='true' class='breadcrumb-ellipsis' role='presentation'>`);
+export default component((attributes) => {
+    let root_176lwtf0 = template_176lwtf1(), element_176lwtf2 = root_176lwtf0.firstChild;
+    template_u1.setProperties(element_176lwtf2, attributes);
+    template_u1.slot(element_176lwtf2, icon(more), 1);
+    return root_176lwtf0;
+});

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

@@ -0,0 +1,29 @@
+import * as template_u1 from '@esportsplus/template';
+import ellipsis from './ellipsis.js';
+import item from './item.js';
+import link from './link.js';
+import list from './list.js';
+import menu from './menu.js';
+import page from './page.js';
+import separator from './separator.js';
+import './scss/index.scss';
+declare let root: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+declare const breadcrumb: typeof root & {
+    ellipsis: typeof ellipsis;
+    item: typeof item;
+    link: typeof link;
+    list: typeof list;
+    menu: typeof menu;
+    page: typeof page;
+    separator: typeof separator;
+};
+export default breadcrumb;

package/build/components/breadcrumb/index.js

@@ -0,0 +1,19 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import ellipsis from './ellipsis.js';
+import item from './item.js';
+import link from './link.js';
+import list from './list.js';
+import menu from './menu.js';
+import page from './page.js';
+import separator from './separator.js';
+import './scss/index.scss';
+const template_1iy9n1s1 = template_u1.template(`<nav aria-label='breadcrumb' class='breadcrumb'>`);
+let root = component((attributes, content) => {
+    let root_1iy9n1s0 = template_1iy9n1s1(), element_1iy9n1s2 = root_1iy9n1s0.firstChild;
+    template_u1.setProperties(element_1iy9n1s2, attributes);
+    template_u1.slot(element_1iy9n1s2, content, 1);
+    return root_1iy9n1s0;
+});
+const breadcrumb = Object.assign(root, { ellipsis, item, link, list, menu, page, separator });
+export default breadcrumb;

package/build/components/breadcrumb/item.d.ts

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/item.js

@@ -0,0 +1,9 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_0oomduv1 = template_u1.template(`<li class='breadcrumb-item'>`);
+export default component((attributes, content) => {
+    let root_0oomduv0 = template_0oomduv1(), element_0oomduv2 = root_0oomduv0.firstChild;
+    template_u1.setProperties(element_0oomduv2, attributes);
+    template_u1.slot(element_0oomduv2, content, 1);
+    return root_0oomduv0;
+});

package/build/components/breadcrumb/link.d.ts

@@ -0,0 +1,15 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type A = Attributes & {
+    render?: (attributes: Attributes, content: Renderable<unknown>) => Renderable<unknown>;
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/link.js

@@ -0,0 +1,14 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_02qqdxm1 = template_u1.template(`<a class='breadcrumb-link'>`);
+export default component(({ render, ...attributes }, content) => {
+    if (render) {
+        return render({ ...attributes, class: ['breadcrumb-link'].concat(attributes.class ?? []) }, content);
+    }
+    return (() => {
+        let root_02qqdxm0 = template_02qqdxm1(), element_02qqdxm2 = root_02qqdxm0.firstChild;
+        template_u1.setProperties(element_02qqdxm2, attributes);
+        template_u1.slot(element_02qqdxm2, content, 1);
+        return root_02qqdxm0;
+    })();
+});

package/build/components/breadcrumb/list.d.ts

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/list.js

@@ -0,0 +1,9 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_1kaqk9i1 = template_u1.template(`<ol class='breadcrumb-list'>`);
+export default component((attributes, content) => {
+    let root_1kaqk9i0 = template_1kaqk9i1(), element_1kaqk9i2 = root_1kaqk9i0.firstChild;
+    template_u1.setProperties(element_1kaqk9i2, attributes);
+    template_u1.slot(element_1kaqk9i2, content, 1);
+    return root_1kaqk9i0;
+});

package/build/components/breadcrumb/menu.d.ts

@@ -0,0 +1,13 @@
+import * as template_u1 from '@esportsplus/template';
+import type { A } from '../tooltip/menu.js';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/menu.js

@@ -0,0 +1,16 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import icon from '../icon/index.js';
+import tooltip from '../tooltip/index.js';
+import caret from './svg/caret.svg';
+const template_162q6hj1 = template_u1.template(`<!--$--><!--$-->`);
+export default component((attributes, content) => tooltip.menu({
+    ...attributes,
+    class: ['breadcrumb-link', 'breadcrumb-menu'].concat(attributes.class ?? []),
+    [tooltip.menu.tooltipContent]: { direction: 'sw', ...attributes[tooltip.menu.tooltipContent] }
+}, (() => {
+    let root_162q6hj0 = template_162q6hj1(), element_162q6hj2 = root_162q6hj0.firstChild, element_162q6hj3 = element_162q6hj2.nextSibling;
+    template_u1.slot(element_162q6hj2, content);
+    template_u1.slot(element_162q6hj3, icon({ class: 'breadcrumb-menu-caret' }, caret));
+    return root_162q6hj0;
+})()));

package/build/components/breadcrumb/page.d.ts

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;

package/build/components/breadcrumb/page.js

@@ -0,0 +1,9 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+const template_1vdakvn1 = template_u1.template(`<span aria-current='page' aria-disabled='true' class='breadcrumb-page' role='link'>`);
+export default component((attributes, content) => {
+    let root_1vdakvn0 = template_1vdakvn1(), element_1vdakvn2 = root_1vdakvn0.firstChild;
+    template_u1.setProperties(element_1vdakvn2, attributes);
+    template_u1.slot(element_1vdakvn2, content, 1);
+    return root_1vdakvn0;
+});

package/build/components/breadcrumb/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.breadcrumb{--color:var(--color-default);--color-active:var(--color-text-500);--color-default:var(--color-text-300);--color-hover:var(--color-text-500);--font-size:var(--font-size-300)}.breadcrumb-ellipsis{--size:var(--size-500)}.breadcrumb-menu-caret.icon,.breadcrumb-separator .icon{--size:var(--size-300)}.breadcrumb{color:var(--color);font-size:var(--font-size)}.breadcrumb-ellipsis{height:var(--size);width:var(--size);justify-content:center;align-items:center;display:flex}.breadcrumb-item{align-items:center;gap:var(--gap);display:inline-flex}.breadcrumb-link{color:var(--color);transition:color var(--transition-duration) var(--transition-timing-function)}.breadcrumb-link:not(.--active):hover{--color:var(--color-hover)}.breadcrumb-list{align-items:center;gap:var(--gap);overflow-wrap:break-word;flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.breadcrumb-menu{align-items:center;gap:calc(var(--gap) / 2);display:flex}.breadcrumb-menu.--active{--color:var(--color-hover)}.breadcrumb-menu.--active .breadcrumb-menu-caret{transform:rotate(180deg)}.breadcrumb-menu-caret{transition:transform var(--transition-duration) var(--transition-timing-function)}.breadcrumb-page{color:var(--color-active)}.breadcrumb-separator{align-items:center;display:flex}[dir=rtl] .breadcrumb-separator .icon{transform:scaleX(-1)}}
+/*$vite$:1*/

package/build/components/breadcrumb/separator.d.ts

@@ -0,0 +1,12 @@
+import * as template_u1 from '@esportsplus/template';
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends template_u1.Attributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: template_u1.Attributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<template_u1.Attributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;