@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/card-input/index.js

@@ -0,0 +1,562 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_1pbvmay7 = template_u1.template(`<div class='card-input-shell card-input-shell--cvc'><div class='card-input-shell-header'><label class='card-input-label'>`);
+const template_1pbvmayc = template_u1.template(`<span class='card-input-error'>`);
+const template_1pbvmayf = template_u1.template(`<div class='card-input-shell card-input-shell--expiry'><div class='card-input-shell-header'><label class='card-input-label'>`);
+const template_1pbvmaym = template_u1.template(`<div class='card-input-shell card-input-shell--name'><div class='card-input-shell-header'><label class='card-input-label'>`);
+const template_1pbvmayt = template_u1.template(`<div class='card-input-shell card-input-shell--number'><div class='card-input-shell-header'><label class='card-input-label'>`);
+const template_1pbvmay10 = template_u1.template(`<div class='card-input-shell '><div class='card-input-shell-header'><label class='card-input-label'>`);
+const template_1pbvmay17 = template_u1.template(`<span aria-hidden='true' class='card-input-brand card-input-brand--large'><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><rect height='14.5' rx='2.5' width='22.5' x='6.75' y='4.75' /><path d='M6.75 9.25h22.5M10.5 15.5h4' /></g></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='12.5' font-style='italic' font-weight='800' letter-spacing='-0.3' text-anchor='middle' x='18' y='16.5'>VISA</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><circle cx='14' cy='12' fill='currentColor' opacity='0.55' r='7' /><circle cx='22' cy='12' fill='currentColor' opacity='0.9' r='7' /></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><rect fill='none' height='14.5' rx='2.5' stroke='currentColor' stroke-width='1.5' width='28.5' x='3.75' y='4.75' /><text fill='currentColor' font-size='8' font-weight='800' letter-spacing='0.4' text-anchor='middle' x='18' y='15.25'>AMEX</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='7.5' font-weight='700' letter-spacing='0.2' text-anchor='middle' x='15' y='15'>DISC</text><circle cx='28.5' cy='12.25' fill='currentColor' r='3.5' />`);
+const template_1pbvmay1e = template_u1.template(`<span aria-hidden='true' class='card-input-brand card-input-brand--small'><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><rect height='14.5' rx='2.5' width='22.5' x='6.75' y='4.75' /><path d='M6.75 9.25h22.5M10.5 15.5h4' /></g></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='12.5' font-style='italic' font-weight='800' letter-spacing='-0.3' text-anchor='middle' x='18' y='16.5'>VISA</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><circle cx='14' cy='12' fill='currentColor' opacity='0.55' r='7' /><circle cx='22' cy='12' fill='currentColor' opacity='0.9' r='7' /></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><rect fill='none' height='14.5' rx='2.5' stroke='currentColor' stroke-width='1.5' width='28.5' x='3.75' y='4.75' /><text fill='currentColor' font-size='8' font-weight='800' letter-spacing='0.4' text-anchor='middle' x='18' y='15.25'>AMEX</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='7.5' font-weight='700' letter-spacing='0.2' text-anchor='middle' x='15' y='15'>DISC</text><circle cx='28.5' cy='12.25' fill='currentColor' r='3.5' />`);
+const template_1pbvmay1l = template_u1.template(`<span aria-hidden='true' class='card-input-brand '><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><rect height='14.5' rx='2.5' width='22.5' x='6.75' y='4.75' /><path d='M6.75 9.25h22.5M10.5 15.5h4' /></g></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='12.5' font-style='italic' font-weight='800' letter-spacing='-0.3' text-anchor='middle' x='18' y='16.5'>VISA</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><circle cx='14' cy='12' fill='currentColor' opacity='0.55' r='7' /><circle cx='22' cy='12' fill='currentColor' opacity='0.9' r='7' /></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><rect fill='none' height='14.5' rx='2.5' stroke='currentColor' stroke-width='1.5' width='28.5' x='3.75' y='4.75' /><text fill='currentColor' font-size='8' font-weight='800' letter-spacing='0.4' text-anchor='middle' x='18' y='15.25'>AMEX</text></svg></span><span class='card-input-brand-mark '><svg viewBox='0 0 36 24'><text fill='currentColor' font-size='7.5' font-weight='700' letter-spacing='0.2' text-anchor='middle' x='15' y='15'>DISC</text><circle cx='28.5' cy='12.25' fill='currentColor' r='3.5' />`);
+const template_1pbvmay1t = template_u1.template(`<form aria-label='Card details' class='card-input' novalidate><div aria-hidden='true' class='card-input-preview'><div class='card-input-card '><div class='card-input-face card-input-face--front'><span class='card-input-ring'></span><div class='card-input-face-top'><svg class='card-input-chip' fill='none' viewBox='0 0 44 32'><rect fill='currentColor' height='32' opacity='0.22' rx='6' width='44' /><path d='M0 11h14m16 0h14M0 21h14m16 0h14M14 0v32M30 0v32M14 16h16' stroke='currentColor' stroke-opacity='0.3' /></svg></div><div class='card-input-number'></div><div class='card-input-face-bottom'><div class='card-input-holder'><span class='card-input-caption'>Card holder</span><span class='card-input-holder-value'></span></div><div class='card-input-expires'><span class='card-input-caption'>Expires</span><span class='card-input-expires-value'></span></div></div></div><div class='card-input-face card-input-face--back'><div class='card-input-stripe'></div><div class='card-input-signature'><div class='card-input-signature-value'></div><span class='card-input-caption'>CVC</span></div><p class='card-input-disclaimer'>Not a real card. Nothing you type leaves this page.</p></div></div></div><div class='card-input-fields'><!--$--><div class='card-input-row'><!--$--></div></div><div class='card-input-actions'><button class='card-input-submit ' type='submit'><span class='card-input-submit-labels'><span class='card-input-submit-label card-input-submit-label--idle'><span class='card-input-submit-text'></span></span><span class='card-input-submit-label card-input-submit-label--confirmed'><svg class='card-input-submit-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg><span class='card-input-submit-text'>Details look valid</span></span></span></button><!--$--><span aria-live='polite' class='card-input-live'></span><span aria-live='polite' class='card-input-live'>`);
+const template_1pbvmay2g = template_u1.template(`<span class='card-input-digit  '>`);
+const template_1pbvmay2j = template_u1.template(`<div class='card-input-control'><!--$--><span class='card-input-control-brand '>`);
+const template_1pbvmay2n = template_u1.template(`<p class='card-input-note'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><rect height='6.25' rx='1.5' width='9.5' x='3.25' y='7' /><path d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' />`);
+class ReactiveObject_1pbvmay0 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_1pbvmay1 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_1pbvmay2 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_1pbvmay3 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_1pbvmay4 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_1pbvmay5 extends reactivity_u0.ReactiveObject {
+    #confirmed = this[reactivity_u0.SIGNAL](false);
+    #focused;
+    constructor(_p0) {
+        super(null);
+        this.#focused = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get confirmed() {
+        return reactivity_u0.read(this.#confirmed);
+    }
+    set confirmed(_v0) {
+        reactivity_u0.write(this.#confirmed, _v0);
+    }
+    get focused() {
+        return reactivity_u0.read(this.#focused);
+    }
+    set focused(_v1) {
+        reactivity_u0.write(this.#focused, _v1);
+    }
+}
+const BRANDS = {
+    amex: { cvc: 4, gaps: [4, 10], lengths: [15], name: 'American Express', test: /^3[47]/ },
+    discover: { cvc: 3, gaps: [4, 8, 12, 16], lengths: [16, 19], name: 'Discover', test: /^(6011|65|64[4-9])/ },
+    mastercard: { cvc: 3, gaps: [4, 8, 12], lengths: [16], name: 'Mastercard', test: /^(5[1-5]|2[2-7])/ },
+    unknown: { cvc: 3, gaps: [4, 8, 12, 16], lengths: [16, 12, 13, 14, 15], name: 'Card', test: /^/ },
+    visa: { cvc: 3, gaps: [4, 8, 12, 16], lengths: [16, 13, 19], name: 'Visa', test: /^4/ }
+};
+const CARD_INPUT_FIELD = Symbol.for('@esportsplus/ui/card-input.field');
+const CARD_INPUT_SUBMIT = Symbol.for('@esportsplus/ui/card-input.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 (/\d/.test(value[i]) && ++seen === count) {
+            return i + 1;
+        }
+    }
+    return value.length;
+}
+function detect(digits) {
+    return ORDER.find((brand) => BRANDS[brand].test.test(digits)) ?? 'unknown';
+}
+function digitsOf(value) {
+    return value.replace(/\D/g, '');
+}
+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) {
+    let active = (b) => () => brand() === b && '--active';
+    return (size === "large" ? (() => {
+        let root_1pbvmay16 = template_1pbvmay17(), element_1pbvmay18 = root_1pbvmay16.firstChild.firstElementChild, element_1pbvmay19 = element_1pbvmay18.nextElementSibling, element_1pbvmay1a = element_1pbvmay19.nextElementSibling, element_1pbvmay1b = element_1pbvmay1a.nextElementSibling, element_1pbvmay1c = element_1pbvmay1b.nextElementSibling;
+        template_u1.setList(element_1pbvmay18, 'class', active('unknown'));
+        template_u1.setList(element_1pbvmay19, 'class', active('visa'));
+        template_u1.setList(element_1pbvmay1a, 'class', active('mastercard'));
+        template_u1.setList(element_1pbvmay1b, 'class', active('amex'));
+        template_u1.setList(element_1pbvmay1c, 'class', active('discover'));
+        return root_1pbvmay16;
+    })() : size === "small" ? (() => {
+        let root_1pbvmay1d = template_1pbvmay1e(), element_1pbvmay1f = root_1pbvmay1d.firstChild.firstElementChild, element_1pbvmay1g = element_1pbvmay1f.nextElementSibling, element_1pbvmay1h = element_1pbvmay1g.nextElementSibling, element_1pbvmay1i = element_1pbvmay1h.nextElementSibling, element_1pbvmay1j = element_1pbvmay1i.nextElementSibling;
+        template_u1.setList(element_1pbvmay1f, 'class', active('unknown'));
+        template_u1.setList(element_1pbvmay1g, 'class', active('visa'));
+        template_u1.setList(element_1pbvmay1h, 'class', active('mastercard'));
+        template_u1.setList(element_1pbvmay1i, 'class', active('amex'));
+        template_u1.setList(element_1pbvmay1j, 'class', active('discover'));
+        return root_1pbvmay1d;
+    })() : (() => {
+        let root_1pbvmay1k = template_1pbvmay1l(), element_1pbvmay1m = root_1pbvmay1k.firstChild, element_1pbvmay1n = element_1pbvmay1m.firstElementChild, element_1pbvmay1o = element_1pbvmay1n.nextElementSibling, element_1pbvmay1p = element_1pbvmay1o.nextElementSibling, element_1pbvmay1q = element_1pbvmay1p.nextElementSibling, element_1pbvmay1r = element_1pbvmay1q.nextElementSibling;
+        template_u1.setList(element_1pbvmay1m, 'class', template_u1.interpolate(["card-input-brand--", (size)]));
+        template_u1.setList(element_1pbvmay1n, 'class', active('unknown'));
+        template_u1.setList(element_1pbvmay1o, 'class', active('visa'));
+        template_u1.setList(element_1pbvmay1p, 'class', active('mastercard'));
+        template_u1.setList(element_1pbvmay1q, 'class', active('amex'));
+        template_u1.setList(element_1pbvmay1r, 'class', active('discover'));
+        return root_1pbvmay1k;
+    })());
+}
+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 { digits, value };
+}
+function skip(e) {
+    let element = e.currentTarget, at = element.selectionStart;
+    if (at === null || at !== element.selectionEnd) {
+        return;
+    }
+    if (e.key === 'Backspace' && at > 0 && /\D/.test(element.value[at - 1])) {
+        element.setSelectionRange(at - 1, at - 1);
+    }
+    if (e.key === 'Delete' && at < element.value.length && /\D/.test(element.value[at])) {
+        element.setSelectionRange(at + 1, at + 1);
+    }
+}
+function validate(field, values, final) {
+    let spec = BRANDS[detect(digitsOf(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 Object.assign(function ({ note = 'Demo only. Nothing is charged or sent anywhere.', onvalid, state = new ReactiveObject_1pbvmay0(), submit = 'Check details', ...attributes }) {
+    let fields = {
+        cvc: new ReactiveObject_1pbvmay1(),
+        expiry: new ReactiveObject_1pbvmay2(),
+        name: new ReactiveObject_1pbvmay3(),
+        number: new ReactiveObject_1pbvmay4()
+    }, id = `card-input-${++uid}`, local = new ReactiveObject_1pbvmay5(''), parts = { ...this?.attributes?.[CARD_INPUT_FIELD], ...attributes[CARD_INPUT_FIELD] }, reduced = matchMedia('(prefers-reduced-motion: reduce)'), regions = {}, ring, slots = new reactivity_u0.ReactiveArray(), timer;
+    function brand() {
+        return detect(digitsOf(state.number));
+    }
+    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) {
+            document.getElementById(`${id}-${bad}`)?.focus();
+            return;
+        }
+        let digits = digitsOf(state.number);
+        local.confirmed = true;
+        onvalid?.({ brand: detect(digits), expiry: state.expiry, last4: digits.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: `card-input-field card-input-field--${field}`,
+            id: `${id}-${field}`,
+            onblur: () => {
+                if (local.focused === field) {
+                    local.focused = '';
+                }
+                fields[field].error = validate(field, state, false);
+            },
+            onfocus: () => {
+                local.focused = field;
+            },
+            state: fields[field],
+            value: () => state[field]
+        });
+    }
+    function frame(field) {
+        let region = field && field !== 'cvc' ? regions[field] : undefined;
+        if (!ring) {
+            return;
+        }
+        if (!region) {
+            ring.classList.remove('--active');
+            return;
+        }
+        let style = `height: ${region.offsetHeight + 12}px; left: ${region.offsetLeft - 8}px; top: ${region.offsetTop - 6}px; width: ${region.offsetWidth + 16}px;`;
+        if (!ring.classList.contains('--active') || reduced.matches) {
+            ring.style.cssText = `${style} transition-property: opacity;`;
+            ring.getBoundingClientRect();
+            ring.style.removeProperty('transition-property');
+        }
+        else {
+            ring.style.cssText = style;
+        }
+        ring.classList.add('--active');
+    }
+    function set(field, value) {
+        state[field] = value;
+        fields[field].error = '';
+        local.confirmed = false;
+    }
+    function shell(field, label, content) {
+        return (field === "cvc" ? (() => {
+            let root_1pbvmay6 = template_1pbvmay7(), element_1pbvmay8 = root_1pbvmay6.firstChild.firstElementChild.firstElementChild, element_1pbvmay9 = root_1pbvmay6.firstChild.firstElementChild, element_1pbvmaya = root_1pbvmay6.firstChild;
+            template_u1.setProperty(element_1pbvmay8, 'for', template_u1.interpolate([(id), "-cvc"]));
+            template_u1.slot(element_1pbvmay8, label, 1);
+            new template_u1.EffectSlot(element_1pbvmay9, () => {
+                let error = fields[field].error;
+                return error ? (() => {
+                    let root_1pbvmayb = template_1pbvmayc(), element_1pbvmayd = root_1pbvmayb.firstChild;
+                    template_u1.setProperty(element_1pbvmayd, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    template_u1.slot(element_1pbvmayd, error, 1);
+                    return root_1pbvmayb;
+                })() : '';
+            }, 2);
+            template_u1.slot(element_1pbvmaya, content, 2);
+            return root_1pbvmay6;
+        })() : field === "expiry" ? (() => {
+            let root_1pbvmaye = template_1pbvmayf(), element_1pbvmayg = root_1pbvmaye.firstChild.firstElementChild.firstElementChild, element_1pbvmayh = root_1pbvmaye.firstChild.firstElementChild, element_1pbvmayi = root_1pbvmaye.firstChild;
+            template_u1.setProperty(element_1pbvmayg, 'for', template_u1.interpolate([(id), "-expiry"]));
+            template_u1.slot(element_1pbvmayg, label, 1);
+            new template_u1.EffectSlot(element_1pbvmayh, () => {
+                let error = fields[field].error;
+                return error ? (() => {
+                    let root_1pbvmayj = template_1pbvmayc(), element_1pbvmayk = root_1pbvmayj.firstChild;
+                    template_u1.setProperty(element_1pbvmayk, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    template_u1.slot(element_1pbvmayk, error, 1);
+                    return root_1pbvmayj;
+                })() : '';
+            }, 2);
+            template_u1.slot(element_1pbvmayi, content, 2);
+            return root_1pbvmaye;
+        })() : field === "name" ? (() => {
+            let root_1pbvmayl = template_1pbvmaym(), element_1pbvmayn = root_1pbvmayl.firstChild.firstElementChild.firstElementChild, element_1pbvmayo = root_1pbvmayl.firstChild.firstElementChild, element_1pbvmayp = root_1pbvmayl.firstChild;
+            template_u1.setProperty(element_1pbvmayn, 'for', template_u1.interpolate([(id), "-name"]));
+            template_u1.slot(element_1pbvmayn, label, 1);
+            new template_u1.EffectSlot(element_1pbvmayo, () => {
+                let error = fields[field].error;
+                return error ? (() => {
+                    let root_1pbvmayq = template_1pbvmayc(), element_1pbvmayr = root_1pbvmayq.firstChild;
+                    template_u1.setProperty(element_1pbvmayr, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    template_u1.slot(element_1pbvmayr, error, 1);
+                    return root_1pbvmayq;
+                })() : '';
+            }, 2);
+            template_u1.slot(element_1pbvmayp, content, 2);
+            return root_1pbvmayl;
+        })() : field === "number" ? (() => {
+            let root_1pbvmays = template_1pbvmayt(), element_1pbvmayu = root_1pbvmays.firstChild.firstElementChild.firstElementChild, element_1pbvmayv = root_1pbvmays.firstChild.firstElementChild, element_1pbvmayw = root_1pbvmays.firstChild;
+            template_u1.setProperty(element_1pbvmayu, 'for', template_u1.interpolate([(id), "-number"]));
+            template_u1.slot(element_1pbvmayu, label, 1);
+            new template_u1.EffectSlot(element_1pbvmayv, () => {
+                let error = fields[field].error;
+                return error ? (() => {
+                    let root_1pbvmayx = template_1pbvmayc(), element_1pbvmayy = root_1pbvmayx.firstChild;
+                    template_u1.setProperty(element_1pbvmayy, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    template_u1.slot(element_1pbvmayy, error, 1);
+                    return root_1pbvmayx;
+                })() : '';
+            }, 2);
+            template_u1.slot(element_1pbvmayw, content, 2);
+            return root_1pbvmays;
+        })() : (() => {
+            let root_1pbvmayz = template_1pbvmay10(), element_1pbvmay11 = root_1pbvmayz.firstChild, element_1pbvmay12 = element_1pbvmay11.firstElementChild.firstElementChild, element_1pbvmay13 = element_1pbvmay11.firstElementChild;
+            template_u1.setList(element_1pbvmay11, 'class', template_u1.interpolate(["card-input-shell--", (field)]));
+            template_u1.setProperty(element_1pbvmay12, 'for', template_u1.interpolate([(id), "-", (field)]));
+            template_u1.slot(element_1pbvmay12, label, 1);
+            new template_u1.EffectSlot(element_1pbvmay13, () => {
+                let error = fields[field].error;
+                return error ? (() => {
+                    let root_1pbvmay14 = template_1pbvmayc(), element_1pbvmay15 = root_1pbvmay14.firstChild;
+                    template_u1.setProperty(element_1pbvmay15, 'id', template_u1.interpolate([(id), "-", (field), "-error"]));
+                    template_u1.slot(element_1pbvmay15, error, 1);
+                    return root_1pbvmay14;
+                })() : '';
+            }, 2);
+            template_u1.slot(element_1pbvmay11, content, 2);
+            return root_1pbvmayz;
+        })());
+    }
+    effect(() => {
+        let digits = digitsOf(state.number), spec = BRANDS[detect(digits)], length = Math.max(spec.lengths[0], digits.length);
+        untrack(() => {
+            let initial = slots.$length === 0;
+            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(() => {
+        let focused = local.focused;
+        untrack(() => frame(focused));
+    });
+    onCleanup(() => {
+        clearTimeout(timer);
+    });
+    return (() => {
+        let root_1pbvmay1s = template_1pbvmay1t(), element_1pbvmay1u = root_1pbvmay1s.firstChild, element_1pbvmay1v = element_1pbvmay1u.firstElementChild.firstElementChild, element_1pbvmay1w = element_1pbvmay1v.firstElementChild.firstElementChild, element_1pbvmay1x = element_1pbvmay1w.nextElementSibling, element_1pbvmay1y = element_1pbvmay1x.nextElementSibling, element_1pbvmay1z = element_1pbvmay1y.nextElementSibling.firstElementChild, element_1pbvmay20 = element_1pbvmay1z.firstElementChild.nextElementSibling, element_1pbvmay21 = element_1pbvmay1z.nextElementSibling, element_1pbvmay22 = element_1pbvmay21.firstElementChild.nextElementSibling, element_1pbvmay23 = element_1pbvmay1v.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.firstElementChild, element_1pbvmay24 = element_1pbvmay1u.firstElementChild.nextElementSibling.firstChild, element_1pbvmay25 = element_1pbvmay1u.firstElementChild.nextElementSibling.firstElementChild.firstChild, element_1pbvmay26 = element_1pbvmay1u.firstElementChild.nextElementSibling.firstElementChild, element_1pbvmay27 = element_1pbvmay1u.firstElementChild.nextElementSibling, element_1pbvmay28 = element_1pbvmay27.nextElementSibling.firstElementChild, element_1pbvmay29 = element_1pbvmay28.firstElementChild.firstElementChild, element_1pbvmay2a = element_1pbvmay29.firstElementChild, element_1pbvmay2b = element_1pbvmay29.nextElementSibling, element_1pbvmay2c = element_1pbvmay27.nextElementSibling.firstChild.nextSibling, element_1pbvmay2d = element_1pbvmay28.nextElementSibling, element_1pbvmay2e = element_1pbvmay2d.nextElementSibling;
+        template_u1.setProperties(element_1pbvmay1u, this?.attributes);
+        template_u1.setProperties(element_1pbvmay1u, attributes);
+        template_u1.on(element_1pbvmay1u, 'submit', check);
+        template_u1.setList(element_1pbvmay1v, 'class', () => local.focused === 'cvc' && '--flipped');
+        template_u1.onrender(element_1pbvmay1w, (element) => { ring = element; });
+        template_u1.slot(element_1pbvmay1x, mark(brand, 'large'), 2);
+        template_u1.onrender(element_1pbvmay1y, (element) => { regions.number = element; });
+        element_1pbvmay1y.appendChild(new template_u1.ArraySlot(slots, (slot) => {
+            let root_1pbvmay2f = template_1pbvmay2g(), element_1pbvmay2h = root_1pbvmay2f.firstChild;
+            template_u1.setList(element_1pbvmay2h, 'class', () => slot.gap && '--gap');
+            template_u1.setList(element_1pbvmay2h, 'class', () => slot.char === '•' && '--placeholder');
+            template_u1.setProperty(element_1pbvmay2h, 'data-roll', () => slot.roll);
+            new template_u1.EffectSlot(element_1pbvmay2h, () => slot.char, 1);
+            return root_1pbvmay2f;
+        }, true).fragment);
+        template_u1.onrender(element_1pbvmay1z, (element) => { regions.name = element; });
+        new template_u1.EffectSlot(element_1pbvmay20, () => state.name.trim() || 'Your name', 1);
+        template_u1.onrender(element_1pbvmay21, (element) => { regions.expiry = element; });
+        new template_u1.EffectSlot(element_1pbvmay22, () => state.expiry || 'MM/YY', 1);
+        new template_u1.EffectSlot(element_1pbvmay23, () => state.cvc || (brand() === 'amex' ? '••••' : '•••'), 1);
+        template_u1.slot(element_1pbvmay24, shell('number', 'Card number', (() => {
+            let root_1pbvmay2i = template_1pbvmay2j(), element_1pbvmay2k = root_1pbvmay2i.firstChild.firstChild, element_1pbvmay2l = root_1pbvmay2i.firstChild.firstElementChild;
+            template_u1.slot(element_1pbvmay2k, control('number', {
+                autocomplete: 'cc-number',
+                inputmode: 'numeric',
+                oninput: (e) => {
+                    let element = e.currentTarget, next = BRANDS[detect(digitsOf(element.value))], { digits, value } = reformat(element, Math.max(...next.lengths), (d) => group(d, next.gaps));
+                    set('number', value);
+                    let max = BRANDS[detect(digits)].cvc;
+                    if (state.cvc.length > max) {
+                        state.cvc = state.cvc.slice(0, max);
+                    }
+                },
+                onkeydown: skip,
+                placeholder: '1234 5678 9012 3456'
+            }));
+            template_u1.setList(element_1pbvmay2l, 'class', () => brand() !== 'unknown' && '--known');
+            template_u1.slot(element_1pbvmay2l, mark(brand, 'small'), 1);
+            return root_1pbvmay2i;
+        })()));
+        template_u1.slot(element_1pbvmay25, shell('expiry', 'Expiry', control('expiry', {
+            autocomplete: 'cc-exp',
+            inputmode: 'numeric',
+            oninput: (e) => {
+                let { value } = reformat(e.currentTarget, 4, expiry, (d) => /^[2-9]/.test(d) ? `0${d}`.slice(0, 4) : d);
+                set('expiry', value);
+            },
+            onkeydown: skip,
+            placeholder: 'MM/YY'
+        })));
+        template_u1.slot(element_1pbvmay26, shell('cvc', 'CVC', control('cvc', {
+            autocomplete: 'cc-csc',
+            inputmode: 'numeric',
+            oninput: (e) => {
+                let { value } = reformat(e.currentTarget, BRANDS[brand()].cvc, (d) => d);
+                set('cvc', value);
+            },
+            placeholder: () => brand() === 'amex' ? '1234' : '123'
+        })), 2);
+        template_u1.slot(element_1pbvmay27, 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.setList(element_1pbvmay28, 'class', () => local.confirmed && '--active');
+        template_u1.setProperties(element_1pbvmay28, this?.attributes?.[CARD_INPUT_SUBMIT]);
+        template_u1.setProperties(element_1pbvmay28, attributes[CARD_INPUT_SUBMIT]);
+        template_u1.setProperty(element_1pbvmay29, 'aria-hidden', () => local.confirmed ? 'true' : 'false');
+        template_u1.slot(element_1pbvmay2a, submit, 1);
+        template_u1.setProperty(element_1pbvmay2b, 'aria-hidden', () => local.confirmed ? 'false' : 'true');
+        template_u1.slot(element_1pbvmay2c, note ? (() => {
+            let root_1pbvmay2m = template_1pbvmay2n(), element_1pbvmay2o = root_1pbvmay2m.firstChild;
+            template_u1.slot(element_1pbvmay2o, note, 2);
+            return root_1pbvmay2m;
+        })() : '');
+        new template_u1.EffectSlot(element_1pbvmay2d, () => local.confirmed ? 'Card details look valid' : '', 1);
+        new template_u1.EffectSlot(element_1pbvmay2e, () => brand() === 'unknown' ? '' : `${BRANDS[brand()].name} card`, 1);
+        return root_1pbvmay1s;
+    })();
+}, { field: CARD_INPUT_FIELD, submit: CARD_INPUT_SUBMIT });

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

@@ -0,0 +1,2 @@
+@layer components {.card-input{--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);--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--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%);color:var(--color);width:var(--width);flex-direction:column;gap:20px;display:flex}.card-input-actions{flex-direction:column;gap:10px;display:flex}.card-input-brand{display:grid}.card-input-brand--large{width:48px;height:32px}.card-input-brand--small{width:36px;height:24px}.card-input-brand-mark{filter:blur(4px);opacity:0;height:100%;transition:filter var(--swap-duration) var(--spring), opacity var(--swap-duration) var(--spring), scale var(--swap-duration) var(--spring);grid-area:1/1;width:100%;scale:.25}.card-input-brand-mark.--active{filter:blur();opacity:1;scale:1}.card-input-brand-mark svg{width:100%;height:100%;display:block}.card-input-caption{letter-spacing:.025em;opacity:.6;text-transform:uppercase;font-size:12px}.card-input-card{height:100%;transform-style:preserve-3d;transition:transform var(--flip-duration) var(--flip-timing-function);width:100%;position:relative}.card-input-card.--flipped{transform:rotateY(180deg)}.card-input-chip{width:44px;height:32px}.card-input-control{position:relative}.card-input-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%}.card-input-control-brand.--known{color:var(--color)}.card-input-digit{display:inline-block}.card-input-digit.--gap{margin-inline-start:.6em}.card-input-digit.--placeholder{opacity:.45}.card-input-digit[data-roll="1"]{animation:card-input-digit-1 var(--digit-duration) ease-out}.card-input-digit[data-roll="2"]{animation:card-input-digit-2 var(--digit-duration) ease-out}.card-input-disclaimer{opacity:.6;margin:auto 0 0;padding:0 24px 20px;font-size:12px}.card-input-error{color:var(--error-color);text-overflow:ellipsis;white-space:nowrap;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);overflow:hidden}@starting-style{.card-input-error{filter:blur(4px);opacity:0;translate:0 2px}}.card-input-expires{flex-direction:column;flex-shrink:0;gap:4px;display:flex}.card-input-expires-value{font-family:var(--font-mono);font-size:15px;font-weight:var(--font-weight-500)}.card-input-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;position:absolute;inset:0;overflow:hidden}.card-input-face--back{transform:rotateY(180deg)}.card-input-face--front{justify-content:space-between;padding:24px}.card-input-face-bottom{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.card-input-face-top{justify-content:space-between;align-items:flex-start;display:flex}.card-input-fields{flex-direction:column;gap:16px;display:flex}.card-input-shell .card-input-field{--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;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}.card-input-shell .card-input-field:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:-1px}.card-input-shell .card-input-field::placeholder{color:oklch(from var(--muted-color) l c h/.7)}.card-input-shell .card-input-field[aria-invalid=true]{--field-border-color:var(--error-color);--outline-color:var(--error-color)}.card-input-shell .card-input-field--cvc,.card-input-shell .card-input-field--expiry,.card-input-shell .card-input-field--number{font-family:var(--font-mono)}.card-input-shell .card-input-field--number{padding-inline-end:64px}.card-input-holder{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.card-input-holder-value{font-size:15px;font-weight:var(--font-weight-500);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;overflow:hidden}.card-input-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);-webkit-user-select:none;user-select:none}.card-input-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.card-input-note{color:var(--muted-color);justify-content:center;align-items:center;gap:6px;margin:0;font-size:13px;display:flex}.card-input-note svg{flex-shrink:0;width:14px;height:14px}.card-input-number{font-family:var(--font-mono);font-size:var(--card-number-font-size);letter-spacing:.025em;white-space:nowrap;align-self:flex-start}.card-input-preview{aspect-ratio:1.586;perspective:1200px;-webkit-user-select:none;user-select:none;width:100%;position:relative}.card-input-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}.card-input-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)}.card-input-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.card-input-shell{flex-direction:column;gap:8px;min-width:0;display:flex}.card-input-shell-header{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.card-input-signature{align-items:center;gap:12px;padding:20px 24px 0;display:flex}.card-input-signature-value{background:var(--card-color);border-radius:var(--border-radius-300);color:var(--card-background);font-family:var(--font-mono);flex:1;justify-content:flex-end;align-items:center;height:40px;padding-inline:12px;font-size:15px;font-style:italic;display:flex}.card-input-stripe{background:oklch(from var(--card-color) l c h/.15);height:44px;margin-top:24px}.card-input-submit{background:var(--submit-background);border-radius:var(--field-border-radius);color:var(--submit-color);cursor:pointer;font:inherit;font-size:var(--field-font-size);font-weight:var(--font-weight-500);height:var(--field-height);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;transition:scale .15s ease-out}.card-input-submit:active{scale:.96}.card-input-submit:focus-visible{outline:var(--border-width-500) solid var(--outline-color);outline-offset:2px}.card-input-submit-icon{flex-shrink:0;width:16px;height:16px}.card-input-submit-label{grid-area:1/1;justify-content:center;align-items:center;gap:8px;display:flex}.card-input-submit-label>*{transition:filter var(--swap-duration) var(--spring), opacity var(--swap-duration) var(--spring), scale var(--swap-duration) var(--spring)}.card-input-submit-label--confirmed>*,.card-input-submit.--active .card-input-submit-label--idle>*{filter:blur(4px);opacity:0}.card-input-submit-label--confirmed>svg{scale:.25}.card-input-submit.--active .card-input-submit-label--confirmed>*{filter:blur();opacity:1;scale:1}.card-input-submit-labels{display:grid}@keyframes card-input-digit-1{0%{filter:blur(2px);opacity:0;translate:0 -4px}}@keyframes card-input-digit-2{0%{filter:blur(2px);opacity:0;translate:0 -4px}}@media (prefers-reduced-motion:reduce){.card-input-brand-mark,.card-input-submit-label>*{filter:none!important;scale:1!important}.card-input-card.--flipped{transform:none}.card-input-digit[data-roll]{animation-name:card-input-fade}@starting-style{.card-input-error{filter:none;translate:0}}.card-input-face--back{opacity:0;transform:none}.card-input-card.--flipped .card-input-face--back{opacity:1}.card-input-card.--flipped .card-input-face--front{opacity:0}.card-input-submit:active{scale:1}}@keyframes card-input-fade{0%{opacity:0}}}
+/*$vite$:1*/

package/build/components/carousel-3d/index.d.ts

@@ -0,0 +1,27 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+declare const CAROUSEL_3D_BUTTON: unique symbol;
+declare const CAROUSEL_3D_CARD: unique symbol;
+type A = Attributes & {
+    [CAROUSEL_3D_BUTTON]?: Attributes;
+    [CAROUSEL_3D_CARD]?: Attributes;
+    items: Item[];
+    label: string;
+    state?: State;
+};
+type Item = {
+    note: Renderable<unknown>;
+    title: string;
+};
+type State = {
+    active: number;
+};
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { items, label, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly button: typeof CAROUSEL_3D_BUTTON;
+    readonly card: typeof CAROUSEL_3D_CARD;
+};
+export default _default;
+export type { Item as Carousel3dItem, State as Carousel3dState };