@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/cc/index.js

@@ -0,0 +1,569 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { computed, effect, onCleanup, read } from '@esportsplus/reactivity';
+import faces from '../button/faces.js';
+import { check as checkmark } from '../button/icons.js';
+import input from '../input/index.js';
+import amex from '@esportsplus/ui/svg/amex.svg';
+import card from '@esportsplus/ui/svg/card.svg';
+import chip from '@esportsplus/ui/svg/chip.svg';
+import discover from '@esportsplus/ui/svg/discover.svg';
+import lock from '@esportsplus/ui/svg/lock.svg';
+import mastercard from '@esportsplus/ui/svg/mastercard.svg';
+import visa from '@esportsplus/ui/svg/visa.svg';
+import '../button/scss/index.scss';
+import './scss/index.scss';
+const template_02im3v17 = template_u1.template(`<div class='cc-shell cc-shell--cvc'><div class='cc-shell-header'><label class='cc-label'>`);
+const template_02im3v1c = template_u1.template(`<span class='cc-error'>`);
+const template_02im3v1f = template_u1.template(`<div class='cc-shell cc-shell--expiry'><div class='cc-shell-header'><label class='cc-label'>`);
+const template_02im3v1m = template_u1.template(`<div class='cc-shell cc-shell--name'><div class='cc-shell-header'><label class='cc-label'>`);
+const template_02im3v1t = template_u1.template(`<div class='cc-shell cc-shell--number'><div class='cc-shell-header'><label class='cc-label'>`);
+const template_02im3v110 = template_u1.template(`<div class='cc-shell '><div class='cc-shell-header'><label class='cc-label'>`);
+const template_02im3v117 = template_u1.template(`<span aria-hidden='true' class='cc-brand cc-brand--large'>`);
+const template_02im3v11a = template_u1.template(`<span class='cc-brand-mark '><svg class='cc-brand-icon'><use />`);
+const template_02im3v11e = template_u1.template(`<span aria-hidden='true' class='cc-brand cc-brand--small'>`);
+const template_02im3v11k = template_u1.template(`<span aria-hidden='true' class='cc-brand '>`);
+const template_02im3v11q = template_u1.template(`<form aria-label='Card details' class='cc' novalidate><div aria-hidden='true' class='cc-preview'><div class='cc-card '><div class='cc-face cc-face--front'><span class='cc-ring '></span><div class='cc-face-top'><svg class='cc-chip'><use /></svg></div><div class='cc-number'></div><div class='cc-face-bottom'><div class='cc-holder'><span class='cc-caption'>Card holder</span><span class='cc-holder-value'></span></div><div class='cc-expires'><span class='cc-caption'>Expires</span><span class='cc-expires-value'></span></div></div></div><div class='cc-face cc-face--back'><div class='cc-stripe'></div><div class='cc-signature'><div class='cc-signature-value'></div><span class='cc-caption'>CVC</span></div><p class='cc-disclaimer'>Not a real card. Nothing you type leaves this page.</p></div></div></div><div class='cc-fields'><!--$--><div class='cc-row'><!--$--></div></div><div class='cc-actions'><button class='button button--feedback cc-submit' type='submit'></button><!--$--><span aria-live='polite' class='button-status' role='status'></span><span aria-live='polite' class='cc-live'>`);
+const template_02im3v12b = template_u1.template(`<span class='cc-digit   '>`);
+const template_02im3v12e = template_u1.template(`<div class='cc-control'><!--$--><span class='cc-control-brand '>`);
+const template_02im3v12i = template_u1.template(`<p class='cc-note'><svg aria-hidden='true' class='cc-note-icon'><use />`);
+class ReactiveObject_02im3v10 extends reactivity_u0.ReactiveObject {
+    #cvc = this[reactivity_u0.SIGNAL]('');
+    #expiry = this[reactivity_u0.SIGNAL]('');
+    #name = this[reactivity_u0.SIGNAL]('');
+    #number = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get cvc() {
+        return reactivity_u0.read(this.#cvc);
+    }
+    set cvc(_v0) {
+        reactivity_u0.write(this.#cvc, _v0);
+    }
+    get expiry() {
+        return reactivity_u0.read(this.#expiry);
+    }
+    set expiry(_v1) {
+        reactivity_u0.write(this.#expiry, _v1);
+    }
+    get name() {
+        return reactivity_u0.read(this.#name);
+    }
+    set name(_v2) {
+        reactivity_u0.write(this.#name, _v2);
+    }
+    get number() {
+        return reactivity_u0.read(this.#number);
+    }
+    set number(_v3) {
+        reactivity_u0.write(this.#number, _v3);
+    }
+}
+class ReactiveObject_02im3v11 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+}
+class ReactiveObject_02im3v12 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+}
+class ReactiveObject_02im3v13 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+}
+class ReactiveObject_02im3v14 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #error = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get error() {
+        return reactivity_u0.read(this.#error);
+    }
+    set error(_v1) {
+        reactivity_u0.write(this.#error, _v1);
+    }
+}
+class ReactiveObject_02im3v15 extends reactivity_u0.ReactiveObject {
+    #confirmed = this[reactivity_u0.SIGNAL](false);
+    #ring = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get confirmed() {
+        return reactivity_u0.read(this.#confirmed);
+    }
+    set confirmed(_v0) {
+        reactivity_u0.write(this.#confirmed, _v0);
+    }
+    get ring() {
+        return reactivity_u0.read(this.#ring);
+    }
+    set ring(_v1) {
+        reactivity_u0.write(this.#ring, _v1);
+    }
+}
+const DIGIT = /\d/;
+const NON_DIGITS = /\D/g;
+const NON_DIGIT = /\D/;
+const INVALID_MONTH_START = /^[2-9]/;
+const BRANDS = {
+    amex: { cvc: 4, gaps: [4, 10], icon: amex, lengths: [15], name: 'American Express', test: /^3[47]/ },
+    discover: { cvc: 3, gaps: [4, 8, 12, 16], icon: discover, lengths: [16, 19], name: 'Discover', test: /^(6011|65|64[4-9])/ },
+    mastercard: { cvc: 3, gaps: [4, 8, 12], icon: mastercard, lengths: [16], name: 'Mastercard', test: /^(5[1-5]|2[2-7])/ },
+    unknown: { cvc: 3, gaps: [4, 8, 12, 16], icon: card, lengths: [16, 12, 13, 14, 15], name: 'Card', test: /^/ },
+    visa: { cvc: 3, gaps: [4, 8, 12, 16], icon: visa, lengths: [16, 13, 19], name: 'Visa', test: /^4/ }
+};
+const CC_FIELD = Symbol.for('@esportsplus/ui/cc.field');
+const CC_SUBMIT = Symbol.for('@esportsplus/ui/cc.submit');
+const CONFIRM_FOR = 2000;
+const FIELDS = ['number', 'expiry', 'cvc', 'name'];
+const ORDER = ['visa', 'mastercard', 'amex', 'discover'];
+let uid = 0;
+function caret(value, count) {
+    if (count <= 0) {
+        return 0;
+    }
+    let seen = 0;
+    for (let i = 0, n = value.length; i < n; i++) {
+        if (DIGIT.test(value[i]) && ++seen === count) {
+            return i + 1;
+        }
+    }
+    return value.length;
+}
+function detect(value) {
+    let digits = digitsOf(value);
+    return ORDER.find((brand) => BRANDS[brand].test.test(digits)) ?? 'unknown';
+}
+function digitsOf(value) {
+    return value.replace(NON_DIGITS, '');
+}
+function expiry(digits) {
+    return digits.length > 2 ? `${digits.slice(0, 2)}/${digits.slice(2)}` : digits;
+}
+function group(digits, gaps) {
+    let out = '';
+    for (let i = 0, n = digits.length; i < n; i++) {
+        if (gaps.includes(i)) {
+            out += ' ';
+        }
+        out += digits[i];
+    }
+    return out;
+}
+function luhn(digits) {
+    let sum = 0;
+    for (let i = 0, n = digits.length; i < n; i++) {
+        let d = Number(digits[n - 1 - i]);
+        if (i % 2) {
+            d *= 2;
+            if (d > 9) {
+                d -= 9;
+            }
+        }
+        sum += d;
+    }
+    return sum % 10 === 0;
+}
+function mark(brand, size) {
+    return (size === "large" ? (() => {
+        let root_02im3v116 = template_02im3v117(), element_02im3v118 = root_02im3v116.firstChild;
+        template_u1.slot(element_02im3v118, Object.keys(BRANDS).map((b) => {
+            let root_02im3v119 = template_02im3v11a(), element_02im3v11b = root_02im3v119.firstChild, element_02im3v11c = element_02im3v11b.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_02im3v11c, 'href', template_u1.interpolate(["#", (BRANDS[b].icon)]));
+            template_u1.setList(element_02im3v11b, 'class', () => brand() === b && '--active');
+            return root_02im3v119;
+        }), 1);
+        return root_02im3v116;
+    })() : size === "small" ? (() => {
+        let root_02im3v11d = template_02im3v11e(), element_02im3v11f = root_02im3v11d.firstChild;
+        template_u1.slot(element_02im3v11f, Object.keys(BRANDS).map((b) => {
+            let root_02im3v11g = template_02im3v11a(), element_02im3v11h = root_02im3v11g.firstChild, element_02im3v11i = element_02im3v11h.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_02im3v11i, 'href', template_u1.interpolate(["#", (BRANDS[b].icon)]));
+            template_u1.setList(element_02im3v11h, 'class', () => brand() === b && '--active');
+            return root_02im3v11g;
+        }), 1);
+        return root_02im3v11d;
+    })() : (() => {
+        let root_02im3v11j = template_02im3v11k(), element_02im3v11l = root_02im3v11j.firstChild;
+        template_u1.slot(element_02im3v11l, Object.keys(BRANDS).map((b) => {
+            let root_02im3v11m = template_02im3v11a(), element_02im3v11n = root_02im3v11m.firstChild, element_02im3v11o = element_02im3v11n.firstElementChild.firstElementChild;
+            template_u1.setProperty(element_02im3v11o, 'href', template_u1.interpolate(["#", (BRANDS[b].icon)]));
+            template_u1.setList(element_02im3v11n, 'class', () => brand() === b && '--active');
+            return root_02im3v11m;
+        }), 1);
+        template_u1.setList(element_02im3v11l, 'class', template_u1.interpolate(["cc-brand--", (size)]));
+        return root_02im3v11j;
+    })());
+}
+function reformat(element, max, format, pad) {
+    let at = element.selectionStart ?? element.value.length, before = digitsOf(element.value.slice(0, at)).length, digits = digitsOf(element.value).slice(0, max);
+    if (pad) {
+        let padded = pad(digits);
+        before += padded.length - digits.length;
+        digits = padded;
+    }
+    let value = format(digits);
+    element.value = value;
+    if (document.activeElement === element) {
+        let position = caret(value, Math.min(before, digits.length));
+        element.setSelectionRange(position, position);
+    }
+    return value;
+}
+function skip(e) {
+    let element = e.currentTarget, at = element.selectionStart;
+    if (at === null || at !== element.selectionEnd) {
+        return;
+    }
+    if (e.key === 'Backspace' && at > 0 && NON_DIGIT.test(element.value[at - 1])) {
+        element.setSelectionRange(at - 1, at - 1);
+    }
+    if (e.key === 'Delete' && at < element.value.length && NON_DIGIT.test(element.value[at])) {
+        element.setSelectionRange(at + 1, at + 1);
+    }
+}
+function validate(field, values, final) {
+    let spec = BRANDS[detect(values.number)], value = values[field], digits = digitsOf(value);
+    if (!value.trim()) {
+        return final ? 'Required' : '';
+    }
+    if (field === 'number') {
+        if (!spec.lengths.includes(digits.length)) {
+            return 'Too short';
+        }
+        if (!luhn(digits)) {
+            return 'Not a valid number';
+        }
+    }
+    if (field === 'expiry') {
+        if (digits.length < 4) {
+            return 'Use MM/YY';
+        }
+        let month = Number(digits.slice(0, 2)), now = new Date(), year = 2000 + Number(digits.slice(2));
+        if (month < 1 || month > 12) {
+            return 'Invalid month';
+        }
+        if (year < now.getFullYear() || (year === now.getFullYear() && month < now.getMonth() + 1)) {
+            return 'Card expired';
+        }
+    }
+    if (field === 'cvc' && digits.length < spec.cvc) {
+        return 'Too short';
+    }
+    return '';
+}
+export default component(function ({ note = '', onvalid, state = new ReactiveObject_02im3v10(), submit = 'Check details', ...attributes }) {
+    let detected = computed(() => detect(state.number)), fields = {
+        cvc: new ReactiveObject_02im3v11(),
+        expiry: new ReactiveObject_02im3v12(),
+        name: new ReactiveObject_02im3v13(),
+        number: new ReactiveObject_02im3v14()
+    }, id = `cc-${++uid}`, local = new ReactiveObject_02im3v15(), parts = { ...this?.attributes?.[CC_FIELD], ...attributes[CC_FIELD] }, regions = {}, ring, slots = new reactivity_u0.ReactiveArray(), timer;
+    function brand() {
+        return read(detected);
+    }
+    function check(e) {
+        e.preventDefault();
+        let bad;
+        for (let i = 0, n = FIELDS.length; i < n; i++) {
+            let error = validate(FIELDS[i], state, true);
+            fields[FIELDS[i]].error = error;
+            if (error && !bad) {
+                bad = FIELDS[i];
+            }
+        }
+        if (bad) {
+            e.currentTarget.elements.namedItem(bad).focus();
+            return;
+        }
+        local.confirmed = true;
+        onvalid?.({ brand: brand(), expiry: state.expiry, last4: digitsOf(state.number).slice(-4), name: state.name.trim() });
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            local.confirmed = false;
+        }, CONFIRM_FOR);
+    }
+    function control(field, own) {
+        return input.call({ attributes: parts }, {
+            ...own,
+            'aria-describedby': () => fields[field].error && `${id}-${field}-error`,
+            'aria-invalid': () => fields[field].error ? 'true' : 'false',
+            class: `cc-field cc-field--${field}`,
+            id: `${id}-${field}`,
+            name: field,
+            onblur: () => {
+                fields[field].error = validate(field, state, false);
+            },
+            state: fields[field],
+            value: () => state[field]
+        });
+    }
+    function focused() {
+        return FIELDS.find((field) => fields[field].active) ?? '';
+    }
+    function frame(field) {
+        let region = field && field !== 'cvc' ? regions[field] : undefined;
+        if (!ring) {
+            return;
+        }
+        if (!region) {
+            local.ring = false;
+            return;
+        }
+        let style = `height: ${region.offsetHeight + 12}px; left: ${region.offsetLeft - 8}px; top: ${region.offsetTop - 6}px; width: ${region.offsetWidth + 16}px;`;
+        if (!local.ring) {
+            ring.style.cssText = `${style} transition-property: opacity;`;
+            ring.getBoundingClientRect();
+            ring.style.removeProperty('transition-property');
+        }
+        else {
+            ring.style.cssText = style;
+        }
+        local.ring = true;
+    }
+    function set(field, value) {
+        state[field] = value;
+        fields[field].error = '';
+        local.confirmed = false;
+    }
+    function shell(field, label, content) {
+        return (field === "cvc" ? (() => {
+            let root_02im3v16 = template_02im3v17(), element_02im3v18 = root_02im3v16.firstChild.firstElementChild.firstElementChild, element_02im3v19 = root_02im3v16.firstChild.firstElementChild, element_02im3v1a = root_02im3v16.firstChild;
+            template_u1.slot(element_02im3v18, label, 1);
+            new template_u1.EffectSlot(element_02im3v19, () => {
+                let error = fields[field].error;
+                return error && (() => {
+                    let root_02im3v1b = template_02im3v1c(), element_02im3v1d = root_02im3v1b.firstChild;
+                    template_u1.slot(element_02im3v1d, error, 1);
+                    template_u1.setProperty(element_02im3v1d, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    return root_02im3v1b;
+                })();
+            }, 2);
+            template_u1.slot(element_02im3v1a, content, 2);
+            template_u1.setProperty(element_02im3v18, 'for', template_u1.interpolate([(id), "-cvc"]));
+            return root_02im3v16;
+        })() : field === "expiry" ? (() => {
+            let root_02im3v1e = template_02im3v1f(), element_02im3v1g = root_02im3v1e.firstChild.firstElementChild.firstElementChild, element_02im3v1h = root_02im3v1e.firstChild.firstElementChild, element_02im3v1i = root_02im3v1e.firstChild;
+            template_u1.slot(element_02im3v1g, label, 1);
+            new template_u1.EffectSlot(element_02im3v1h, () => {
+                let error = fields[field].error;
+                return error && (() => {
+                    let root_02im3v1j = template_02im3v1c(), element_02im3v1k = root_02im3v1j.firstChild;
+                    template_u1.slot(element_02im3v1k, error, 1);
+                    template_u1.setProperty(element_02im3v1k, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    return root_02im3v1j;
+                })();
+            }, 2);
+            template_u1.slot(element_02im3v1i, content, 2);
+            template_u1.setProperty(element_02im3v1g, 'for', template_u1.interpolate([(id), "-expiry"]));
+            return root_02im3v1e;
+        })() : field === "name" ? (() => {
+            let root_02im3v1l = template_02im3v1m(), element_02im3v1n = root_02im3v1l.firstChild.firstElementChild.firstElementChild, element_02im3v1o = root_02im3v1l.firstChild.firstElementChild, element_02im3v1p = root_02im3v1l.firstChild;
+            template_u1.slot(element_02im3v1n, label, 1);
+            new template_u1.EffectSlot(element_02im3v1o, () => {
+                let error = fields[field].error;
+                return error && (() => {
+                    let root_02im3v1q = template_02im3v1c(), element_02im3v1r = root_02im3v1q.firstChild;
+                    template_u1.slot(element_02im3v1r, error, 1);
+                    template_u1.setProperty(element_02im3v1r, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    return root_02im3v1q;
+                })();
+            }, 2);
+            template_u1.slot(element_02im3v1p, content, 2);
+            template_u1.setProperty(element_02im3v1n, 'for', template_u1.interpolate([(id), "-name"]));
+            return root_02im3v1l;
+        })() : field === "number" ? (() => {
+            let root_02im3v1s = template_02im3v1t(), element_02im3v1u = root_02im3v1s.firstChild.firstElementChild.firstElementChild, element_02im3v1v = root_02im3v1s.firstChild.firstElementChild, element_02im3v1w = root_02im3v1s.firstChild;
+            template_u1.slot(element_02im3v1u, label, 1);
+            new template_u1.EffectSlot(element_02im3v1v, () => {
+                let error = fields[field].error;
+                return error && (() => {
+                    let root_02im3v1x = template_02im3v1c(), element_02im3v1y = root_02im3v1x.firstChild;
+                    template_u1.slot(element_02im3v1y, error, 1);
+                    template_u1.setProperty(element_02im3v1y, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    return root_02im3v1x;
+                })();
+            }, 2);
+            template_u1.slot(element_02im3v1w, content, 2);
+            template_u1.setProperty(element_02im3v1u, 'for', template_u1.interpolate([(id), "-number"]));
+            return root_02im3v1s;
+        })() : (() => {
+            let root_02im3v1z = template_02im3v110(), element_02im3v111 = root_02im3v1z.firstChild, element_02im3v112 = element_02im3v111.firstElementChild.firstElementChild, element_02im3v113 = element_02im3v111.firstElementChild;
+            template_u1.slot(element_02im3v112, label, 1);
+            new template_u1.EffectSlot(element_02im3v113, () => {
+                let error = fields[field].error;
+                return error && (() => {
+                    let root_02im3v114 = template_02im3v1c(), element_02im3v115 = root_02im3v114.firstChild;
+                    template_u1.slot(element_02im3v115, error, 1);
+                    template_u1.setProperty(element_02im3v115, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    return root_02im3v114;
+                })();
+            }, 2);
+            template_u1.slot(element_02im3v111, content, 2);
+            template_u1.setProperty(element_02im3v112, 'for', template_u1.interpolate([(id), "-", (field)]));
+            template_u1.setList(element_02im3v111, 'class', template_u1.interpolate(["cc-shell--", (field)]));
+            return root_02im3v1z;
+        })());
+    }
+    effect(() => digitsOf(state.number), (digits) => {
+        let initial = slots.$length === 0, spec = BRANDS[detect(digits)], length = Math.max(spec.lengths[0], digits.length);
+        for (let i = 0; i < length; i++) {
+            let char = digits[i] ?? '•', gap = spec.gaps.includes(i), slot = slots[i];
+            if (!slot) {
+                slots.push(reactivity_u0.reactive({ char, gap, roll: initial ? 0 : 1 }));
+                continue;
+            }
+            slot.gap = gap;
+            if (slot.char !== char) {
+                slot.char = char;
+                slot.roll = slot.roll === 1 ? 2 : 1;
+            }
+        }
+        if (slots.$length > length) {
+            slots.splice(length);
+        }
+    });
+    effect(focused, frame);
+    onCleanup(() => clearTimeout(timer));
+    return (() => {
+        let root_02im3v11p = template_02im3v11q(), element_02im3v11r = root_02im3v11p.firstChild, element_02im3v11s = element_02im3v11r.firstElementChild.firstElementChild, element_02im3v11t = element_02im3v11s.firstElementChild.firstElementChild, element_02im3v11u = element_02im3v11t.nextElementSibling.firstElementChild.firstElementChild, element_02im3v11v = element_02im3v11t.nextElementSibling, element_02im3v11w = element_02im3v11v.nextElementSibling, element_02im3v11x = element_02im3v11w.nextElementSibling.firstElementChild, element_02im3v11y = element_02im3v11x.firstElementChild.nextElementSibling, element_02im3v11z = element_02im3v11x.nextElementSibling, element_02im3v120 = element_02im3v11z.firstElementChild.nextElementSibling, element_02im3v121 = element_02im3v11s.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.firstElementChild, element_02im3v122 = element_02im3v11r.firstElementChild.nextElementSibling.firstChild, element_02im3v123 = element_02im3v11r.firstElementChild.nextElementSibling.firstElementChild.firstChild, element_02im3v124 = element_02im3v11r.firstElementChild.nextElementSibling.firstElementChild, element_02im3v125 = element_02im3v11r.firstElementChild.nextElementSibling, element_02im3v126 = element_02im3v125.nextElementSibling.firstElementChild, element_02im3v127 = element_02im3v125.nextElementSibling.firstChild.nextSibling, element_02im3v128 = element_02im3v126.nextElementSibling, element_02im3v129 = element_02im3v128.nextElementSibling;
+        template_u1.slot(element_02im3v11v, mark(brand, 'large'), 2);
+        element_02im3v11w.appendChild(new template_u1.ArraySlot(slots, (slot) => {
+            let root_02im3v12a = template_02im3v12b(), element_02im3v12c = root_02im3v12a.firstChild;
+            new template_u1.EffectSlot(element_02im3v12c, () => slot.char, 1);
+            template_u1.setList(element_02im3v12c, 'class', () => slot.gap && 'cc-digit--gap');
+            template_u1.setList(element_02im3v12c, 'class', () => slot.char === '•' && 'cc-digit--placeholder');
+            template_u1.setList(element_02im3v12c, 'class', () => slot.roll && `cc-digit--roll-${slot.roll}`);
+            return root_02im3v12a;
+        }, true).fragment);
+        new template_u1.EffectSlot(element_02im3v11y, () => state.name.trim() || 'Your name', 1);
+        new template_u1.EffectSlot(element_02im3v120, () => state.expiry || 'MM/YY', 1);
+        new template_u1.EffectSlot(element_02im3v121, () => state.cvc || (brand() === 'amex' ? '••••' : '•••'), 1);
+        template_u1.slot(element_02im3v122, shell('number', 'Card number', (() => {
+            let root_02im3v12d = template_02im3v12e(), element_02im3v12f = root_02im3v12d.firstChild.firstChild, element_02im3v12g = root_02im3v12d.firstChild.firstElementChild;
+            template_u1.slot(element_02im3v12f, control('number', {
+                autocomplete: 'cc-number',
+                inputmode: 'numeric',
+                oninput: (e) => {
+                    let element = e.currentTarget, spec = BRANDS[detect(element.value)];
+                    set('number', reformat(element, Math.max(...spec.lengths), (d) => group(d, spec.gaps)));
+                    if (state.cvc.length > spec.cvc) {
+                        state.cvc = state.cvc.slice(0, spec.cvc);
+                    }
+                },
+                onkeydown: skip,
+                placeholder: '1234 5678 9012 3456'
+            }));
+            template_u1.slot(element_02im3v12g, mark(brand, 'small'), 1);
+            template_u1.setList(element_02im3v12g, 'class', () => brand() !== 'unknown' && 'cc-control-brand--known');
+            return root_02im3v12d;
+        })()));
+        template_u1.slot(element_02im3v123, shell('expiry', 'Expiry', control('expiry', {
+            autocomplete: 'cc-exp',
+            inputmode: 'numeric',
+            oninput: (e) => {
+                set('expiry', reformat(e.currentTarget, 4, expiry, (d) => INVALID_MONTH_START.test(d) ? `0${d}`.slice(0, 4) : d));
+            },
+            onkeydown: skip,
+            placeholder: 'MM/YY'
+        })));
+        template_u1.slot(element_02im3v124, shell('cvc', 'CVC', control('cvc', {
+            autocomplete: 'cc-csc',
+            inputmode: 'numeric',
+            oninput: (e) => {
+                set('cvc', reformat(e.currentTarget, BRANDS[brand()].cvc, (d) => d));
+            },
+            placeholder: () => brand() === 'amex' ? '1234' : '123'
+        })), 2);
+        template_u1.slot(element_02im3v125, shell('name', 'Name on card', control('name', {
+            autocapitalize: 'words',
+            autocomplete: 'cc-name',
+            maxlength: 40,
+            oninput: (e) => {
+                set('name', e.currentTarget.value);
+            },
+            placeholder: 'Ada Lovelace',
+            spellcheck: false
+        })), 2);
+        template_u1.slot(element_02im3v126, faces(() => local.confirmed ? 'valid' : 'idle', [
+            { content: submit, key: 'idle' },
+            { content: 'Details look valid', icon: checkmark, key: 'valid' }
+        ]), 1);
+        template_u1.slot(element_02im3v127, !!note && (() => {
+            let root_02im3v12h = template_02im3v12i(), element_02im3v12j = root_02im3v12h.firstChild.firstElementChild.firstElementChild, element_02im3v12k = root_02im3v12h.firstChild;
+            template_u1.slot(element_02im3v12k, note, 2);
+            template_u1.setProperty(element_02im3v12j, 'href', template_u1.interpolate(["#", (lock)]));
+            return root_02im3v12h;
+        })());
+        new template_u1.EffectSlot(element_02im3v128, () => local.confirmed && 'Card details look valid', 1);
+        new template_u1.EffectSlot(element_02im3v129, () => brand() !== 'unknown' && `${BRANDS[brand()].name} card`, 1);
+        template_u1.setProperties(element_02im3v126, this?.attributes?.[CC_SUBMIT]);
+        template_u1.setProperties(element_02im3v126, attributes[CC_SUBMIT]);
+        template_u1.onconnect(element_02im3v11z, (element) => { regions.expiry = element; });
+        template_u1.onconnect(element_02im3v11x, (element) => { regions.name = element; });
+        template_u1.onconnect(element_02im3v11w, (element) => { regions.number = element; });
+        template_u1.setProperty(element_02im3v11u, 'href', template_u1.interpolate(["#", (chip)]));
+        template_u1.setList(element_02im3v11t, 'class', () => local.ring && '--active');
+        template_u1.onconnect(element_02im3v11t, (element) => { ring = element; });
+        template_u1.setList(element_02im3v11s, 'class', () => focused() === 'cvc' && 'cc-card--flipped');
+        template_u1.setProperties(element_02im3v11r, this?.attributes);
+        template_u1.setProperties(element_02im3v11r, attributes);
+        template_u1.on(element_02im3v11r, 'submit', check);
+        return root_02im3v11p;
+    })();
+}, { field: CC_FIELD, submit: CC_SUBMIT });

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

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

package/build/components/chat-minimap/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactiveArray } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import { type Range } from './range.js';
+import spy from './spy.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [CHAT_MINIMAP_ITEM]?: Attributes;
+    label?: string;
+    next?: string;
+    onnavigate?: (index: number) => void;
+    previous?: string;
+    side?: Side;
+    state?: Range;
+    turns: ReactiveArray<Turn> | Turn[];
+};
+type Side = 'left' | 'right';
+type Turn = {
+    description?: string;
+    title: string;
+};
+declare const CHAT_MINIMAP_ITEM: unique symbol;
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly item: typeof CHAT_MINIMAP_ITEM;
+    readonly spy: typeof spy;
+}>;
+export default _default;
+export type { Range as ChatMinimapRange, Side as ChatMinimapSide, Turn as ChatMinimapTurn };