@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/card/expand.js

@@ -0,0 +1,118 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, flush } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import overlay from '../overlay/index.js';
+import close from '@esportsplus/ui/svg/close.svg';
+import '../button/scss/index.scss';
+const template_1stikp53 = template_u1.template(`<ul class='card-expand'>`);
+const template_1stikp56 = template_u1.template(`<li class='card-expand-item'><button aria-haspopup='dialog' class='card card--expand' type='button'><span class='card-expand-row'><span class='card-expand-title'></span><span class='card-expand-meta'></span></span><span class='card-expand-summary'>`);
+const template_1stikp5d = template_u1.template(`<div class='card-expand-panel'><div class='card-expand-header'><div class='card-expand-heading'><h2 class='card-expand-title'></h2><p class='card-expand-meta'></p></div><button aria-label='Close' class='button card-expand-close card-expand-delayed' type='button'><svg aria-hidden='true' class='card-expand-icon'><use /></svg></button></div><p class='card-expand-summary card-expand-summary--full'></p><p class='card-expand-detail card-expand-delayed'>`);
+class ReactiveObject_1stikp50 extends reactivity_u0.ReactiveObject {
+    #open;
+    constructor(_p0) {
+        super(null);
+        this.#open = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v0) {
+        reactivity_u0.write(this.#open, _v0);
+    }
+}
+class ReactiveObject_1stikp51 extends reactivity_u0.ReactiveObject {
+    #morph;
+    #open;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#morph = this[reactivity_u0.SIGNAL](_p0);
+        this.#open = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get morph() {
+        return reactivity_u0.read(this.#morph);
+    }
+    set morph(_v0) {
+        reactivity_u0.write(this.#morph, _v0);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v1) {
+        reactivity_u0.write(this.#open, _v1);
+    }
+}
+const EXPAND_TRIGGER = Symbol.for('@esportsplus/ui/card.expand.trigger');
+let uid = 0;
+export default component(function ({ items, state = new ReactiveObject_1stikp50(null), ...attributes }) {
+    let id = `card-expand-${++uid}`, view = new ReactiveObject_1stikp51(null, state.open);
+    effect(() => state.open, (next) => {
+        if (next === view.open) {
+            return;
+        }
+        let key = next ?? view.open;
+        if (typeof document.startViewTransition !== 'function') {
+            view.open = next;
+            return;
+        }
+        let settle = () => {
+            if (view.morph === key) {
+                view.morph = null;
+            }
+        };
+        view.morph = key;
+        void document.startViewTransition(() => {
+            view.open = next;
+            flush();
+        }).finished.then(settle, settle);
+    });
+    return (() => {
+        let root_1stikp52 = template_1stikp53(), element_1stikp54 = root_1stikp52.firstChild;
+        template_u1.slot(element_1stikp54, items.map((item, i) => {
+            let root_1stikp55 = template_1stikp56(), element_1stikp57 = root_1stikp55.firstChild, element_1stikp58 = element_1stikp57.firstElementChild, element_1stikp59 = element_1stikp58.firstElementChild.firstElementChild, element_1stikp5a = element_1stikp59.nextElementSibling, element_1stikp5b = element_1stikp58.firstElementChild.nextElementSibling;
+            template_u1.slot(element_1stikp59, item.title, 1);
+            template_u1.slot(element_1stikp5a, item.meta, 1);
+            template_u1.slot(element_1stikp5b, item.summary, 1);
+            template_u1.slot(element_1stikp57, overlay({
+                'aria-labelledby': `${id}-${i}`,
+                class: 'card card-expand-dialog',
+                state: {
+                    get active() {
+                        return view.open === item.id;
+                    },
+                    set active(value) {
+                        if (!value && state.open === item.id) {
+                            state.open = null;
+                        }
+                    }
+                }
+            }, (() => {
+                let root_1stikp5c = template_1stikp5d(), element_1stikp5e = root_1stikp5c.firstChild.firstElementChild.firstElementChild.firstElementChild, element_1stikp5f = element_1stikp5e.nextElementSibling, element_1stikp5g = root_1stikp5c.firstChild.firstElementChild.firstElementChild.nextElementSibling, element_1stikp5h = element_1stikp5g.firstElementChild.firstElementChild, element_1stikp5i = root_1stikp5c.firstChild.firstElementChild.nextElementSibling, element_1stikp5j = element_1stikp5i.nextElementSibling;
+                template_u1.slot(element_1stikp5e, item.title, 1);
+                template_u1.slot(element_1stikp5f, item.meta, 1);
+                template_u1.slot(element_1stikp5i, item.summary, 1);
+                template_u1.slot(element_1stikp5j, item.detail, 1);
+                template_u1.setProperty(element_1stikp5h, 'href', template_u1.interpolate(["#", (close)]));
+                template_u1.delegate(element_1stikp5g, 'click', () => {
+                    state.open = null;
+                });
+                template_u1.setProperty(element_1stikp5e, 'id', template_u1.interpolate([(id), "-", (i)]));
+                return root_1stikp5c;
+            })()), 2);
+            template_u1.setProperties(element_1stikp58, this?.attributes?.[EXPAND_TRIGGER]);
+            template_u1.setProperties(element_1stikp58, attributes[EXPAND_TRIGGER]);
+            template_u1.setList(element_1stikp58, 'class', () => view.morph === item.id && 'card--morphing');
+            template_u1.delegate(element_1stikp58, 'click', () => {
+                state.open = item.id;
+            });
+            template_u1.setList(element_1stikp57, 'class', [
+                () => view.open === item.id && '--active',
+                () => view.morph === item.id && 'card-expand-item--morphing'
+            ]);
+            return root_1stikp55;
+        }), 1);
+        template_u1.setProperties(element_1stikp54, this?.attributes);
+        template_u1.setProperties(element_1stikp54, attributes);
+        return root_1stikp52;
+    })();
+}, { trigger: EXPAND_TRIGGER });

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

@@ -0,0 +1,6 @@
+import expand from './expand.js';
+import './scss/index.scss';
+declare const card: {
+    expand: typeof expand;
+};
+export default card;

package/build/components/card/index.js

@@ -0,0 +1,4 @@
+import expand from './expand.js';
+import './scss/index.scss';
+const card = { expand };
+export default card;

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

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

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

@@ -0,0 +1,30 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import input from '../input/index.js';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+type A = Attributes & {
+    [CC_FIELD]?: FieldAttributes;
+    [CC_SUBMIT]?: Attributes;
+    note?: Renderable<unknown>;
+    onvalid?: (card: Card) => void;
+    state?: State;
+    submit?: Renderable<unknown>;
+};
+type Brand = 'amex' | 'discover' | 'mastercard' | 'unknown' | 'visa';
+type Card = {
+    brand: Brand;
+    expiry: string;
+    last4: string;
+    name: string;
+};
+type Field = 'cvc' | 'expiry' | 'name' | 'number';
+type FieldAttributes = Parameters<typeof input>[0];
+type State = Record<Field, string>;
+declare const CC_FIELD: unique symbol;
+declare const CC_SUBMIT: unique symbol;
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly field: typeof CC_FIELD;
+    readonly submit: typeof CC_SUBMIT;
+}>;
+export default _default;