@muten/shadcn 0.1.14 → 0.2.0

package/registry/kit/board.js

@@ -1,4 +1,4 @@
-// kit/board.js - the order Board and its card (the reference artifact's «Tablero» and «Tarjeta: mínimo y máximo"),
+// kit/board.js - the order Board and its card (the reference artifact's “Board” and “Card: minimum and maximum”),
 // composed only from atoms. Lanes and cards are data; the card groups its information by what it is about and
 // orders it by what needs the owner first. Drag with the mouse, hold on touch, Space/arrows with the keyboard.
 //   lanes [{id, title, next}]  next = the label of the step that moves a card INTO the following lane
@@ -9,6 +9,8 @@
 // on.change(json [{id, lane}]) after a card moves; on.action(json {id, action}) for every card button.
 export function orderBoard(root, i, core, on) {
   const { ui, $, $$, lib, openModal: open, closeModal, CONTENT, body, foot, easeHeight, money0, hue, ini } = core;
+  // its language: the nearest lang (the page's), English by default; the card data the page passes is said as is
+  const L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
   const list = (v) => (Array.isArray(v) ? v : []);
   const copy = (x) => JSON.parse(JSON.stringify(x));
   const CARDS = Object.fromEntries(list(i.cards).map((c) => [c.id, { actions: [], ...copy(c) }]));
@@ -43,7 +45,7 @@ export function orderBoard(root, i, core, on) {
       footer: `<div class="cx-vstack"><div class="cx-hstack">${o.photos.slice(0, 5).map((x) => ui.avatar(x, { shape: 'square', size: 'lg', bg: x })).join('')}${o.photos.length > 5 ? `<span data-slot="avatar" data-size="lg" data-shape="square" class="cn-avatar group/avatar"><span class="cn-avatar-fallback">+${o.photos.length - 5}</span></span>` : ''}</div>${o.extras?.length ? `<div class="cx-hstack">${o.extras.map((e) => ui.badge(e, { variant: 'outline' })).join('')}</div>` : ''}</div>`,
     }),
     pay: (p, c) => {
-      const action = p.method === 'transfer' && p.tone === 'new' ? ['receipt', 'Revisar comprobante', 'image'] : p.method === 'card' ? ['stripe', 'Ver recibo de Stripe', 'card'] : null;
+      const action = p.method === 'transfer' && p.tone === 'new' ? ['receipt', T('Review receipt'), 'image'] : p.method === 'card' ? ['stripe', T('See Stripe receipt'), 'card'] : null;
       return ui.item({
         media: ui.itemMedia(ui.icon('card')),
         title: `<span>Pago · ${money0(c.total)}</span>`,
@@ -54,7 +56,7 @@ export function orderBoard(root, i, core, on) {
     },
     delivery: (d) => {
       const info = d.track ? `<b>${d.track.steps[d.track.at]}</b> · ${d.track.courier.split(' ')[0]}, ${d.track.eta}` : d.map ? d.map.address : '';
-      const more = (d.track || d.map) ? ui.button({ label: d.track ? 'Ver entrega' : 'Ver mapa', size: 'xs', attrs: 'data-bact="delivery"' }) : '';
+      const more = (d.track || d.map) ? ui.button({ label: d.track ? T('See delivery') : T('See map'), size: 'xs', attrs: 'data-bact="delivery"' }) : '';
       return ui.item({
         media: ui.itemMedia(ui.icon(d.mode === 'pickup' ? 'store' : 'truck')),
         title: `${d.label}${d.when ? ` · ${d.when}` : ''}`,
@@ -69,18 +71,18 @@ export function orderBoard(root, i, core, on) {
   const signals = (c) => {
     const list = c.request ? (Array.isArray(c.request) ? c.request : [c.request]) : [];
     const items = list.map((r, i) => ui.button({ icon: r.icon, size: 'icon-sm', variant: 'ghost', tone: SIGNAL_TONE[r.tone] || 'info', cls: 'cx-has-indicator', attrs: `data-bact="request" data-i="${i}" data-name="${r.title}" aria-haspopup="dialog" aria-label="${r.title}${r.text ? ': ' + r.text : ''}"` }).replace('</button>', `${ui.indicator(SIGNAL_TONE[r.tone] || 'info')}</button>`));
-    if (c.note) items.push(ui.button({ icon: 'quote', size: 'icon-sm', variant: 'ghost', tone: 'note', cls: 'cx-has-indicator', attrs: `data-bact="note" data-name="Nota del cliente" aria-haspopup="dialog" aria-label="Nota de ${c.who.split(' ')[0]}: ${c.note}"` }).replace('</button>', `${ui.indicator('note')}</button>`));
-    return items.length ? `<div class="cx-hstack" role="group" aria-label="Pendientes">${items.join('')}</div>` : '';
+    if (c.note) items.push(ui.button({ icon: 'quote', size: 'icon-sm', variant: 'ghost', tone: 'note', cls: 'cx-has-indicator', attrs: `data-bact="note" data-name="${T('Client note')}" aria-haspopup="dialog" aria-label="${T('{0}\'s note: {1}', c.who.split(' ')[0], c.note)}"` }).replace('</button>', `${ui.indicator('note')}</button>`));
+    return items.length ? `<div class="cx-hstack" role="group" aria-label="${T('Pending')}">${items.join('')}</div>` : '';
   };
   const CONTACT = {
     whatsapp: { icon: 'b-whatsapp', color: '#25D366', name: 'WhatsApp' },
     telegram: { icon: 'b-telegram', color: '#26A5E4', name: 'Telegram' },
     instagram: { icon: 'b-instagram', color: '#E4405F', name: 'Instagram' },
-    phone: { icon: 'call', color: 'var(--foreground)', name: 'una llamada' },
+    phone: { icon: 'call', color: 'var(--foreground)', name: T('a call') },
   };
   const cardInner = (id) => {
     const c = CARDS[id], via = CONTACT[c.contact];
-    const contact = via ? ui.button({ icon: via.icon, size: 'icon-sm', variant: 'ghost', tone: 'brand', attrs: `style="--brand:${via.color}" data-bact="contact" aria-label="Contactar a ${c.who} por ${via.name}, como lo pidió" title="Prefiere ${via.name}"` }) : '';
+    const contact = via ? ui.button({ icon: via.icon, size: 'icon-sm', variant: 'ghost', tone: 'brand', attrs: `style="--brand:${via.color}" data-bact="contact" aria-label="${T('Contact {0} on {1}, as they asked', c.who, via.name)}" title="${T('Prefers {0}', via.name)}"` }) : '';
     const person = ui.item({
       media: ui.itemMedia(ui.avatar(c.who), 'default'),
       title: `<span class="cx-ellipsis" title="${c.who}">${c.who}</span>`,
@@ -102,13 +104,13 @@ export function orderBoard(root, i, core, on) {
     const list = $('.cx-lane-list', l), n = $$('.cx-bcard', list).length;
     $('.cx-count', l).textContent = n;
     const empty = $('.cx-lane-empty-b', list);
-    if (!n && !$('.cx-bph', list) && !empty) list.insertAdjacentHTML('beforeend', '<div class="cx-lane-empty-b">Suelta aquí un pedido</div>');
+    if (!n && !$('.cx-bph', list) && !empty) list.insertAdjacentHTML('beforeend', `<div class="cx-lane-empty-b">${T('Drop an order here')}</div>`);
     if ((n || $('.cx-bph', list)) && empty) empty.remove();
   });
   const sayCard = (card) => { const lane = card.closest('.cx-blane'), list = $$('.cx-bcard', lane); brdLive.textContent = `Pedido ${card.dataset.card}: ${lane.getAttribute('aria-label')}, posición ${list.indexOf(card) + 1} de ${list.length}`; };
   const flip = (els, change) => { // animate siblings from their old place to the new one
     const before = new Map(els.map((x) => [x, x.getBoundingClientRect()])); change();
-    before.forEach((r, x) => { const n = x.getBoundingClientRect(); const dx = r.left - n.left, dy = r.top - n.top; if (dx || dy) x.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], { duration: 200, easing: 'cubic-bezier(.22, 1, .36, 1)' }); });
+    before.forEach((r, x) => { const n = x.getBoundingClientRect(); const dx = r.left - n.left, dy = r.top - n.top; if (dx || dy) x.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'none' }], { duration: 200, easing: 'cubic-bezier(.23, 1, .32, 1)' }); });
   };
   let bDrag = null;
   brd.addEventListener('pointerdown', (e) => {
@@ -148,7 +150,7 @@ export function orderBoard(root, i, core, on) {
     const to = d.ph.getBoundingClientRect(), from = d.card.getBoundingClientRect();
     d.card.classList.remove('cx-dragging'); d.card.style.cssText = '';
     d.ph.replaceWith(d.card); syncLanes();
-    d.card.animate([{ transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) rotate(1.5deg)` }, { transform: 'none' }], { duration: 220, easing: 'cubic-bezier(.22, 1, .36, 1)' });
+    d.card.animate([{ transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) rotate(1.5deg)` }, { transform: 'none' }], { duration: 220, easing: 'cubic-bezier(.23, 1, .32, 1)' });
     sayCard(d.card); emit();
   };
   addEventListener('pointerup', bEnd); addEventListener('pointercancel', bEnd);
@@ -201,10 +203,10 @@ export function orderBoard(root, i, core, on) {
   let receiptFor = null, replyFor = null, deliveryFor = null, requestFor = null, requestIdx = 0;
   KINDS.request = () => {
     const c = CARDS[requestFor], list = Array.isArray(c.request) ? c.request : [c.request], r = list[requestIdx] || list[0];
-    $('#mdl-title').textContent = r.title; $('#mdl-desc').textContent = `${c.who} · pedido ${requestFor}${r.when ? ' · ' + r.when : ''}`;
-    body.innerHTML = `${r.text ? `<blockquote class="cx-req-full" data-tone="${r.tone}">${r.text}</blockquote>` : '<p class="cx-note" style="text-align:left">Sin mensaje del cliente.</p>'}${r.photo ? `<span class="cx-bc-ph" style="width:96px;background:${r.photo}"></span>` : ''}${list.length > 1 ? `<div class="cx-req-next"><b>También por resolver</b>${list.filter((x) => x !== r).map((x) => `<span><svg><use href="#${x.icon}"/></svg>${x.title}</span>`).join('')}</div>` : ''}`;
+    $('#mdl-title').textContent = r.title; $('#mdl-desc').textContent = `${T('{0} · order {1}', c.who, requestFor)}${r.when ? ' · ' + r.when : ''}`;
+    body.innerHTML = `${r.text ? `<blockquote class="cx-req-full" data-tone="${r.tone}">${r.text}</blockquote>` : `<p class="cx-note" style="text-align:left">${T('No message from the client.')}</p>`}${r.photo ? `<span class="cx-bc-ph" style="width:96px;background:${r.photo}"></span>` : ''}${list.length > 1 ? `<div class="cx-req-next"><b>${T('Also to solve')}</b>${list.filter((x) => x !== r).map((x) => `<span><svg><use href="#${x.icon}"/></svg>${x.title}</span>`).join('')}</div>` : ''}`;
     const [yes, no] = r.actions;
-    foot.innerHTML = (no ? btn('outline', no[1], `data-req-act="${no[0]}"`) : btn('outline', 'Cerrar', 'data-dismiss')) + (yes ? btn('default', yes[1], `data-req-act="${yes[0]}"`) : '');
+    foot.innerHTML = (no ? btn('outline', no[1], `data-req-act="${no[0]}"`) : btn('outline', T('Close'), 'data-dismiss')) + (yes ? btn('default', yes[1], `data-req-act="${yes[0]}"`) : '');
     foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
   };
   document.addEventListener('click', (e) => {
@@ -216,30 +218,30 @@ export function orderBoard(root, i, core, on) {
   let noteFor = null, stripeFor = null;
   KINDS.note = () => {
     const c = CARDS[noteFor];
-    $('#mdl-title').textContent = `Nota de ${c.who.split(' ')[0]}`; $('#mdl-desc').textContent = `${c.who} · pedido ${noteFor}`;
+    $('#mdl-title').textContent = T('{0}\'s note', c.who.split(' ')[0]); $('#mdl-desc').textContent = T('{0} · order {1}', c.who, noteFor);
     body.innerHTML = `<blockquote class="cx-req-full" data-tone="note">${c.note}</blockquote>`;
-    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + btn('default', 'Copiar nota', 'data-note-copy');
+    foot.innerHTML = btn('outline', T('Close'), 'data-dismiss') + btn('default', T('Copy note'), 'data-note-copy');
     foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
   };
   KINDS.stripe = () => {
     const c = CARDS[stripeFor], p = c.pay;
-    $('#mdl-title').textContent = 'Recibo de pago'; $('#mdl-desc').textContent = `${c.who} · pedido ${stripeFor}`;
-    body.innerHTML = `<div class="cx-stripe"><div class="cx-stripe-top"><span class="cx-stripe-amt cx-num">${money0(c.total)}</span><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>Pagado</span></div><dl><dt>Medio</dt><dd>${p.detail.split(' · ')[0]}</dd><dt>Procesado por</dt><dd>Stripe</dd><dt>Fecha</dt><dd>8 oct 2026 · 09:14</dd><dt>ID del pago</dt><dd class="cx-num">pi_3Q${stripeFor.slice(1)}xK8aR2</dd><dt>Comisión</dt><dd class="cx-num">${money0(Math.round(c.total * 0.039))}</dd><dt>Recibes</dt><dd class="cx-num"><b>${money0(c.total - Math.round(c.total * 0.039))}</b></dd></dl></div>`;
-    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://dashboard.stripe.com/test/payments" target="_blank" rel="noopener">Abrir en Stripe</a>`;
+    $('#mdl-title').textContent = T('Payment receipt'); $('#mdl-desc').textContent = T('{0} · order {1}', c.who, stripeFor);
+    body.innerHTML = `<div class="cx-stripe"><div class="cx-stripe-top"><span class="cx-stripe-amt cx-num">${money0(c.total)}</span><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>${T('Paid')}</span></div><dl><dt>${T('Method')}</dt><dd>${p.detail.split(' · ')[0]}</dd><dt>${T('Processed by')}</dt><dd>Stripe</dd><dt>${T('Date')}</dt><dd>${T('Oct 8, 2026')} · 09:14</dd><dt>${T('Payment ID')}</dt><dd class="cx-num">pi_3Q${stripeFor.slice(1)}xK8aR2</dd><dt>${T('Fee')}</dt><dd class="cx-num">${money0(Math.round(c.total * 0.039))}</dd><dt>${T('You get')}</dt><dd class="cx-num"><b>${money0(c.total - Math.round(c.total * 0.039))}</b></dd></dl></div>`;
+    foot.innerHTML = btn('outline', T('Close'), 'data-dismiss') + `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://dashboard.stripe.com/test/payments" target="_blank" rel="noopener">${T('Open in Stripe')}</a>`;
     foot.firstElementChild.classList.add('cx-exit');
   };
   document.addEventListener('click', (e) => {
     if (!e.target.closest('[data-note-copy]') || !noteFor) return;
     const t = e.target.closest('[data-note-copy]'), text = CARDS[noteFor].note;
-    try { navigator.clipboard.writeText(text).then(() => { t.textContent = 'Copiada'; }, () => { getSelection().selectAllChildren($('.cx-req-full', body)); }); } catch { getSelection().selectAllChildren($('.cx-req-full', body)); }
+    try { navigator.clipboard.writeText(text).then(() => { t.innerHTML = `<span class="cx-swap-in">${T('Copied')}</span>`; }, () => { getSelection().selectAllChildren($('.cx-req-full', body)); }); } catch { getSelection().selectAllChildren($('.cx-req-full', body)); }
   });
   KINDS.delivery = () => {
     const c = CARDS[deliveryFor], d = c.delivery;
-    $('#mdl-title').textContent = d.label; $('#mdl-desc').textContent = `${c.who} · pedido ${deliveryFor}${d.when ? ' · ' + d.when : ''}`;
+    $('#mdl-title').textContent = d.label; $('#mdl-desc').textContent = `${T('{0} · order {1}', c.who, deliveryFor)}${d.when ? ' · ' + d.when : ''}`;
     const steps = d.track ? `<div class="cx-dl-steps" style="--n:${d.track.steps.length}">${d.track.steps.map((st, i) => `<div ${i < d.track.at ? 'data-done' : i === d.track.at ? 'data-now aria-current="step"' : ''}><i></i><span>${st}</span></div>`).join('')}</div>` : '';
-    const courier = d.track ? `<div class="cx-dl-courier"><span data-slot="avatar" data-size="default" class="cn-avatar cx-av" style="--h:${hue(d.track.courier)}"><span class="cn-avatar-fallback">${ini(d.track.courier)}</span></span><div><b>${d.track.courier}</b><small>Domiciliario · ${d.track.vehicle}</small></div><div class="cx-dl-eta"><small>Llega en</small><b>${d.track.eta}</b></div></div>` : '';
+    const courier = d.track ? `<div class="cx-dl-courier"><span data-slot="avatar" data-size="default" class="cn-avatar cx-av" style="--h:${hue(d.track.courier)}"><span class="cn-avatar-fallback">${ini(d.track.courier)}</span></span><div><b>${d.track.courier}</b><small>Domiciliario · ${d.track.vehicle}</small></div><div class="cx-dl-eta"><small>${T('Arrives in')}</small><b>${d.track.eta}</b></div></div>` : '';
     body.innerHTML = `<div class="cx-dl">${d.map ? `<div class="cx-dl-map">${miniMap(d.map)}</div><div class="cx-dl-addr"><svg><use href="#mappin"/></svg><div><b>${d.map.address}</b><small>${d.map.detail}</small></div></div>` : ''}${steps}${courier}</div>`;
-    foot.innerHTML = btn('outline', 'Cerrar', 'data-dismiss') + (d.map ? `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(d.map.address)}" target="_blank" rel="noopener"><svg><use href="#mappin"/></svg>Abrir en Maps</a>` : '');
+    foot.innerHTML = btn('outline', T('Close'), 'data-dismiss') + (d.map ? `<a data-slot="button" class="cn-button cn-button-variant-default cn-button-size-default group/button cx-go" href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(d.map.address)}" target="_blank" rel="noopener"><svg><use href="#mappin"/></svg>${T('Open in Maps')}</a>` : '');
     foot.firstElementChild.classList.add('cx-exit');
   };
   const redraw = (id) => { const card = $(`.cx-bcard[data-card="${id}"]`, root); easeHeight(card, () => { card.innerHTML = cardInner(id); }); card.animate([{ boxShadow: '0 0 0 2px var(--selected)' }, { boxShadow: '0 0 0 1px var(--border)' }], { duration: 700, easing: 'ease-out' }); };
@@ -251,7 +253,7 @@ export function orderBoard(root, i, core, on) {
       const ls = lanesEls().filter((l) => l.dataset.lane !== 'cancel'), li = ls.indexOf(card.closest('.cx-blane')); if (li < 0 || li >= ls.length - 1) return;
       const NEXT = Object.fromEntries(LANES_B.map((l) => [l.id, l.next ? [['advance', l.next, 'secondary']] : []]));
       const to = ls[li + 1]; c.actions = NEXT[to.dataset.lane] ?? c.actions;
-      if (to.dataset.lane === 'done') { if (c.delivery) delete c.delivery.track; c.status = ['ok', 'Entregado']; }
+      if (to.dataset.lane === 'done') { if (c.delivery) delete c.delivery.track; c.status = ['ok', T('Delivered')]; }
       flip($$('.cx-bcard', brd), () => { $('.cx-lane-list', to).prepend(card); card.innerHTML = cardInner(id); syncLanes(); });
       card.focus({ preventScroll: true }); sayCard(card); emit();
     }
@@ -262,8 +264,8 @@ export function orderBoard(root, i, core, on) {
     if (act === 'stripe') { stripeFor = id; openModal('stripe', 'auto'); }
     if (act === 'contact') brdLive.textContent = `Abriendo ${CONTACT[c.contact].name} con ${c.who}`;
     if (act === 'reply') { replyFor = id; openModal('reply', 'auto'); }
-    if (act === 'cancel-yes') { delete c.request; c.status = ['bad', 'Cancelado']; c.pay = { ...c.pay, tone: 'muted', label: `Devuelto ${money0(c.total)}` }; delete c.delivery; c.actions = []; if (!card.closest('.cx-board')) { redraw(id); return; } const to = $('[data-lane=cancel] .cx-lane-list', brd); flip($$('.cx-bcard', brd), () => { to.prepend(card); card.innerHTML = cardInner(id); syncLanes(); }); to.closest('.cx-blane').scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); brdLive.textContent = `Pedido ${id} cancelado y devuelto`; emit(); }
-    if (act === 'cancel-no') { const rest = Array.isArray(c.request) ? c.request.filter((_, i) => i !== +(b.dataset.i || 0)) : []; if (rest.length) c.request = rest.length === 1 ? rest[0] : rest; else delete c.request; c.actions = [['advance', 'Preparar', 'secondary']]; redraw(id); }
+    if (act === 'cancel-yes') { delete c.request; c.status = ['bad', T('Canceled')]; c.pay = { ...c.pay, tone: 'muted', label: T('Refunded {0}', money0(c.total)) }; delete c.delivery; c.actions = []; if (!card.closest('.cx-board')) { redraw(id); return; } const to = $('[data-lane=cancel] .cx-lane-list', brd); flip($$('.cx-bcard', brd), () => { to.prepend(card); card.innerHTML = cardInner(id); syncLanes(); }); to.closest('.cx-blane').scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); brdLive.textContent = `Pedido ${id} cancelado y devuelto`; emit(); }
+    if (act === 'cancel-no') { const rest = Array.isArray(c.request) ? c.request.filter((_, i) => i !== +(b.dataset.i || 0)) : []; if (rest.length) c.request = rest.length === 1 ? rest[0] : rest; else delete c.request; c.actions = [['advance', T('Prepare'), 'secondary']]; redraw(id); }
     if (act === 'refund') { if (Array.isArray(c.request)) { c.request = c.request.filter((_, i) => i !== +(b.dataset.i || 0)); if (c.request.length === 1) c.request = c.request[0]; } else delete c.request; c.pay = { ...c.pay, tone: 'info', label: `Reembolsado ${money0(c.total)}` }; redraw(id); }
   };
   root.addEventListener('click', onCardButton);
@@ -271,29 +273,29 @@ export function orderBoard(root, i, core, on) {
   const sizes = $('.cx-card-sizes', root); if (sizes) sizes.innerHTML = SIZES.map(([t, d, id]) => `<div class="cx-cs-col"><div class="cx-cs-h"><b>${t}</b><span>${d}</span></div><div data-slot="card" data-size="sm" class="cn-card group/card cx-bcard cx-bcard-static" data-card="${id}" aria-label="${t}">${cardInner(id)}</div></div>`).join('');
   KINDS.receipt = () => {
     const c = CARDS[receiptFor];
-    $('#mdl-title').textContent = 'Comprobante de pago'; $('#mdl-desc').textContent = `${c.who} · pedido ${receiptFor}`;
-    body.innerHTML = `<div class="cx-rcpt"><div class="cx-rcpt-shot" role="img" aria-label="Captura de la transferencia"><span class="cx-rcpt-ok"><svg><use href="#check"/></svg></span><b>Transferencia exitosa</b><span class="cx-rcpt-amt">${money0(c.total)}</span><dl><dt>Para</dt><dd>Barbería El Roble</dd><dt>Desde</dt><dd>${c.who}</dd><dt>Referencia</dt><dd class="cx-num">M${receiptFor.slice(1)}7731</dd><dt>Fecha</dt><dd>8 oct 2026 · 10:42</dd></dl></div><div class="cx-rcpt-check"><span>Monto del pedido</span><b class="cx-num">${money0(c.total)}</b><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>Coincide</span></div></div>`;
-    foot.innerHTML = btn('outline', 'Rechazar', 'data-rcpt="no"') + btn('default', 'Aprobar pago', 'data-rcpt="yes"');
+    $('#mdl-title').textContent = T('Payment proof'); $('#mdl-desc').textContent = T('{0} · order {1}', c.who, receiptFor);
+    body.innerHTML = `<div class="cx-rcpt"><div class="cx-rcpt-shot" role="img" aria-label="${T('Screenshot of the transfer')}"><span class="cx-rcpt-ok"><svg><use href="#check"/></svg></span><b>${T('Transfer successful')}</b><span class="cx-rcpt-amt">${money0(c.total)}</span><dl><dt>${T('To')}</dt><dd>Barbería El Roble</dd><dt>${T('From')}</dt><dd>${c.who}</dd><dt>${T('Reference')}</dt><dd class="cx-num">M${receiptFor.slice(1)}7731</dd><dt>${T('Date')}</dt><dd>${T('Oct 8, 2026')} · 10:42</dd></dl></div><div class="cx-rcpt-check"><span>${T('Order amount')}</span><b class="cx-num">${money0(c.total)}</b><span data-slot="badge" class="cn-badge group/badge cx-tone-ok"><span class="cx-dot"></span>${T('Matches')}</span></div></div>`;
+    foot.innerHTML = btn('outline', T('Reject'), 'data-rcpt="no"') + btn('default', T('Approve payment'), 'data-rcpt="yes"');
     foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
   };
   KINDS.reply = () => {
     const c = CARDS[replyFor];
-    $('#mdl-title').textContent = `Responder a ${c.who}`; $('#mdl-desc').textContent = `Queja del pedido ${replyFor}`;
-    body.innerHTML = `<div class="cx-bc-req" data-tone="bad" style="margin:0"><div class="cx-bc-req-h"><svg><use href="#info"/></svg><b>Queja</b><small>${(c.request.when ?? c.request[0]?.when)}</small></div><p>«${(c.request.text ?? c.request[0]?.text)}»</p></div><div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="rp-t">Tu respuesta</label><textarea data-slot="textarea" class="cn-textarea" id="rp-t" rows="4">Hola ${c.who.split(' ')[0]}, lo siento mucho. Te enviamos una nueva hoy sin costo.</textarea><p data-slot="field-description" class="cn-field-description">Le llega por WhatsApp.</p></div>`;
-    foot.innerHTML = btn('outline', 'Cancelar', 'data-dismiss') + btn('default', 'Enviar respuesta', 'data-reply-send');
+    $('#mdl-title').textContent = T('Answer {0}', c.who); $('#mdl-desc').textContent = T('Complaint about order {0}', replyFor);
+    body.innerHTML = `<div class="cx-bc-req" data-tone="bad" style="margin:0"><div class="cx-bc-req-h"><svg><use href="#info"/></svg><b>${T('Complaint')}</b><small>${(c.request.when ?? c.request[0]?.when)}</small></div><p>«${(c.request.text ?? c.request[0]?.text)}»</p></div><div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="rp-t">${T('Your answer')}</label><textarea data-slot="textarea" class="cn-textarea" id="rp-t" rows="4">${T('Hi {0}, I am so sorry. We are sending you a new one today at no cost.', c.who.split(' ')[0])}</textarea><p data-slot="field-description" class="cn-field-description">${T('It reaches them on WhatsApp.')}</p></div>`;
+    foot.innerHTML = btn('outline', T('Cancel'), 'data-dismiss') + btn('default', T('Send answer'), 'data-reply-send');
     foot.firstElementChild.classList.add('cx-exit'); foot.lastElementChild.classList.add('cx-go');
   };
   document.addEventListener('click', (e) => {
     const r = e.target.closest('[data-rcpt]');
     if (r && receiptFor) {
       const c = CARDS[receiptFor], ok = r.dataset.rcpt === 'yes';
-      c.pay = ok ? { method: 'transfer', tone: 'ok', label: 'Pagado', detail: c.pay?.detail } : { method: 'transfer', tone: 'bad', label: 'Rechazado', detail: c.pay?.detail };
-      c.actions = ok ? [['advance', 'Preparar', 'secondary']] : [];
+      c.pay = ok ? { method: 'transfer', tone: 'ok', label: T('Paid'), detail: c.pay?.detail } : { method: 'transfer', tone: 'bad', label: T('Rejected'), detail: c.pay?.detail };
+      c.actions = ok ? [['advance', T('Prepare'), 'secondary']] : [];
       redraw(receiptFor); brdLive.textContent = ok ? `Pago de ${c.who} aprobado` : `Comprobante de ${c.who} rechazado`;
       receiptFor = null; closeModal();
     }
     if (e.target.closest('[data-reply-send]') && replyFor) {
-      const c = CARDS[replyFor]; c.request = { ...(Array.isArray(c.request) ? c.request[0] : c.request), tone: 'info', icon: 'check', title: 'Queja respondida', when: 'ahora', text: c.request.text, actions: [['refund', 'Reembolsar', 'ghost']] };
+      const c = CARDS[replyFor]; c.request = { ...(Array.isArray(c.request) ? c.request[0] : c.request), tone: 'info', icon: 'check', title: T('Complaint answered'), when: T('now'), text: c.request.text, actions: [['refund', T('Refund'), 'ghost']] };
       redraw(replyFor); replyFor = null; closeModal();
     }
   });

package/registry/kit/collections.js

@@ -2,19 +2,19 @@
 // Carousel's behaviour, generic. Data and labels come in; nothing about a product is inside.
 
 // Tags: chips animate in and out, the field's height eases; suggestions; a cap with its count. i {label, tags
-// "Barba,Corte clásico", suggestions "Fade,Navaja", max, hint} → on.change("Barba,Corte clásico,Fade")
+// "Beard,Classic cut", suggestions "Fade,Razor", max, hint} → on.change("Beard,Classic cut,Fade")
 export function tagInput(root, i, core, on) {
-  const { $, $$, fold, easeHeight } = core;
+  const { $, $$, fold, easeHeight } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   const split = (s) => String(s || '').split(',').map((x) => x.trim()).filter(Boolean);
   const MAXT = Number(i.max) || 8, SUG = split(i.suggestions), id = 'tg' + Math.random().toString(36).slice(2, 7);
   let tags = split(i.tags);
-  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="${id}">${i.label || 'Etiquetas'}</label><div class="cx-taginput"><input id="${id}" class="cx-tag-field" placeholder="${i.placeholder || 'Agrega y presiona Enter'}" autocomplete="off"></div><p data-slot="field-description" class="cn-field-description cx-count-line"><span>${i.hint || ''}</span><span data-tg-n></span></p></div>${SUG.length ? '<div class="cx-suggest"><span>Sugerencias</span><div class="cx-line" style="justify-content:flex-start" data-tg-sug></div></div>' : ''}`;
+  root.innerHTML = `<div data-slot="field" class="cn-field cn-field-orientation-vertical group/field"><label data-slot="label" class="cn-label" for="${id}">${T(i.label || 'Tags')}</label><div class="cx-taginput"><input id="${id}" class="cx-tag-field" placeholder="${i.placeholder || 'Agrega y presiona Enter'}" autocomplete="off"></div><p data-slot="field-description" class="cn-field-description cx-count-line"><span>${i.hint || ''}</span><span data-tg-n></span></p></div>${SUG.length ? `<div class="cx-suggest"><span>${T('Suggestions')}</span><div class="cx-line" style="justify-content:flex-start" data-tg-sug></div></div>` : ''}`;
   const tgBox = $('.cx-taginput', root), tgIn = $('input', root), tgN = $('[data-tg-n]', root), tgSug = $('[data-tg-sug]', root);
-  const chipHtml = (t) => `<span data-slot="badge" class="cn-badge cn-badge-variant-secondary cx-chip" data-tag="${t}">${t}<button class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-chip-x" aria-label="Quitar ${t}" title="Quitar" tabindex="-1"><svg style="width:12px;height:12px"><use href="#x"/></svg></button></span>`;
+  const chipHtml = (t) => `<span data-slot="badge" class="cn-badge cn-badge-variant-secondary cx-chip" data-tag="${t}">${t}<button class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-chip-x" aria-label="${T('Remove {0}', t)}" title="Quitar" tabindex="-1"><svg style="width:12px;height:12px"><use href="#x"/></svg></button></span>`;
   const emit = () => on?.change?.(tags.join(','));
   const tgMeta = () => {
     tgN.textContent = `${tags.length}/${MAXT}`; tgN.parentElement.toggleAttribute('data-near', tags.length >= MAXT);
-    tgIn.placeholder = tags.length >= MAXT ? `Llegaste al tope de ${MAXT}` : tags.length ? '' : (i.placeholder || 'Agrega y presiona Enter');
+    tgIn.placeholder = tags.length >= MAXT ? T('You reached the limit of {0}', MAXT) : tags.length ? '' : (i.placeholder || T('Add and press Enter'));
     if (tgSug) $$('.cx-sug', tgSug).forEach((b) => { b.disabled = tags.some((t) => fold(t) === fold(b.textContent)) || tags.length >= MAXT; });
   };
   const tgAdd = (raw) => {
@@ -40,19 +40,19 @@ export function tagInput(root, i, core, on) {
 }
 
 // Pagination nav for server pages: always 7 slots once there are more than 7 pages (the buttons never slide),
-// «Página n de N» on a phone, and the range line. i {total, per, page, noun} → on.page(n)
+// “Page n of N” on a phone, and the range line. i {total, per, page, noun} → on.page(n)
 export function paginationNav(root, i, core, on) {
-  const { $ } = core;
-  root.innerHTML = '<div class="cx-pg-foot"><nav class="cn-pagination cx-pagination" aria-label="Páginas"><ul class="cn-pagination-content" style="list-style:none;margin:0;padding:0"></ul></nav><span class="cx-num" aria-live="polite" data-pg-range></span></div>';
+  const { $ } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a);
+  root.innerHTML = `<div class="cx-pg-foot"><nav class="cn-pagination cx-pagination" aria-label="${T('Pages')}"><ul class="cn-pagination-content" style="list-style:none;margin:0;padding:0"></ul></nav><span class="cx-num" aria-live="polite" data-pg-range></span></div>`;
   const pgNav = $('ul', root), pgRange = $('[data-pg-range]', root);
-  let total = Number(i.total) || 0, per = Number(i.per) || 10, page = Number(i.page) || 1, noun = i.noun || 'resultados';
+  let total = Number(i.total) || 0, per = Number(i.per) || 10, page = Number(i.page) || 1, noun = T(i.noun || 'results');
   const pages = () => Math.max(1, Math.ceil(total / per));
   const nums = () => { const P = pages(); if (P <= 7) return Array.from({ length: P }, (_, k) => k + 1); if (page <= 4) return [1, 2, 3, 4, 5, '…', P]; if (page >= P - 3) return [1, '…', P - 4, P - 3, P - 2, P - 1, P]; return [1, '…', page - 1, page, page + 1, '…', P]; };
   const paint = (focus) => {
     const P = pages();
-    const nav = (dir, p, off) => `<li><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-default cn-pagination-${dir === -1 ? 'previous' : 'next'} group/button" data-page="${p}" ${off ? 'disabled' : ''} aria-label="Página ${dir === -1 ? 'anterior' : 'siguiente'}">${dir === -1 ? '<svg><use href="#left"/></svg><span>Anterior</span>' : '<span>Siguiente</span><svg><use href="#right"/></svg>'}</button></li>`;
-    pgNav.innerHTML = nav(-1, page - 1, page === 1) + nums().map((p) => (p === '…' ? '<li class="cx-pg-num"><span class="cn-pagination-ellipsis cx-pg-gap" aria-hidden="true"><svg><use href="#more"/></svg></span></li>' : `<li class="cx-pg-num"><button data-slot="button" class="cn-button ${p === page ? 'cn-button-variant-outline' : 'cn-button-variant-ghost'} cn-button-size-icon group/button cx-num" data-page="${p}" ${p === page ? 'aria-current="page"' : ''} aria-label="Página ${p}">${p}</button></li>`)).join('') + `<li class="cx-pg-compact">Página ${page} de ${P}</li>` + nav(1, page + 1, page === P);
-    pgRange.textContent = `${(page - 1) * per + 1}–${Math.min(total, page * per)} de ${total} ${noun}`;
+    const nav = (dir, p, off) => `<li><button data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-default cn-pagination-${dir === -1 ? 'previous' : 'next'} group/button" data-page="${p}" ${off ? 'disabled' : ''} aria-label="${dir === -1 ? T('Previous page') : T('Next page')}">${dir === -1 ? `<svg><use href="#left"/></svg><span>${T('Previous')}</span>` : `<span>${T('Next')}</span><svg><use href="#right"/></svg>`}</button></li>`;
+    pgNav.innerHTML = nav(-1, page - 1, page === 1) + nums().map((p) => (p === '…' ? '<li class="cx-pg-num"><span class="cn-pagination-ellipsis cx-pg-gap" aria-hidden="true"><svg><use href="#more"/></svg></span></li>' : `<li class="cx-pg-num"><button data-slot="button" class="cn-button ${p === page ? 'cn-button-variant-outline' : 'cn-button-variant-ghost'} cn-button-size-icon group/button cx-num" data-page="${p}" ${p === page ? 'aria-current="page"' : ''} aria-label="${T('Page {0}', p)}">${p}</button></li>`)).join('') + `<li class="cx-pg-compact">${T('Page {0} of {1}', page, P)}</li>` + nav(1, page + 1, page === P);
+    pgRange.textContent = T('{0}–{1} of {2} {3}', (page - 1) * per + 1, Math.min(total, page * per), total, noun);
     if (focus) pgNav.querySelector('[aria-current]')?.focus({ preventScroll: true });
   };
   pgNav.addEventListener('click', (e) => { const b = e.target.closest('[data-page]'); if (!b || b.disabled) return; page = +b.dataset.page; paint(true); on?.page?.(page); });
@@ -61,12 +61,12 @@ export function paginationNav(root, i, core, on) {
 }
 
 // Virtual list: only the visible rows (+ a margin) exist in the DOM. i {rows [{title, subtitle, value}], total
-// (rows repeat up to it, for a long demo), rowHeight, label} → on.jump not needed: «Ir al n» via inputs.jump.
+// (rows repeat up to it, for a long demo), rowHeight, label} → on.jump not needed: “Go to n” via inputs.jump.
 export function virtualList(root, i, core) {
-  const { $ } = core;
+  const { $ } = core, L = core.langOf(root), T = (k, ...a) => core.t(L, k, ...a), loc = L === 'es' ? 'es-CO' : 'en-US';
   const rows = Array.isArray(i.rows) ? i.rows : [];
   const VTOTAL = Math.max(Number(i.total) || 0, rows.length), VROW = Number(i.rowHeight) || 52, VOVER = 6;
-  root.innerHTML = `<div class="cx-pages-wrap"><div class="cx-vlist cx-scroll" tabindex="0" role="list" aria-label="${i.label || 'Lista'}"><div class="cx-vspace"><div class="cx-vwin"></div></div></div><div class="cx-pg-foot"><span class="cx-num" data-vl-info></span>${i.jump ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-vl-jump>Ir al ${Number(i.jump).toLocaleString('es-CO')}</button>` : ''}</div></div>`;
+  root.innerHTML = `<div class="cx-pages-wrap"><div class="cx-vlist cx-scroll" tabindex="0" role="list" aria-label="${T(i.label || 'List')}"><div class="cx-vspace"><div class="cx-vwin"></div></div></div><div class="cx-pg-foot"><span class="cx-num" data-vl-info></span>${i.jump ? `<button data-slot="button" class="cn-button cn-button-variant-outline cn-button-size-sm group/button" data-vl-jump>${T('Go to {0}', Number(i.jump).toLocaleString(loc))}</button>` : ''}</div></div>`;
   const vBox = $('.cx-vlist', root), vSpace = $('.cx-vspace', root), vWin = $('.cx-vwin', root), vInfo = $('[data-vl-info]', root);
   vSpace.style.height = VTOTAL * VROW + 'px';
   let vFirst = -1, vRaf = 0;
@@ -80,7 +80,7 @@ export function virtualList(root, i, core) {
       vWin.innerHTML = html;
     }
     const a = Math.floor(top / VROW) + 1, b = Math.min(VTOTAL, Math.ceil((top + h) / VROW));
-    vInfo.textContent = `${a.toLocaleString('es-CO')}–${b.toLocaleString('es-CO')} de ${VTOTAL.toLocaleString('es-CO')} · ${vWin.childElementCount} filas en el DOM`;
+    vInfo.textContent = T('{0}–{1} of {2} · {3} rows in the DOM', a.toLocaleString(loc), b.toLocaleString(loc), VTOTAL.toLocaleString(loc), vWin.childElementCount);
   };
   vBox.addEventListener('scroll', () => { cancelAnimationFrame(vRaf); vRaf = requestAnimationFrame(vPaint); }, { passive: true });
   vBox.addEventListener('keydown', (e) => { const d = { ArrowDown: VROW, ArrowUp: -VROW, PageDown: vBox.clientHeight, PageUp: -vBox.clientHeight }[e.key]; if (d) { e.preventDefault(); vBox.scrollTop += d; } if (e.key === 'Home') { e.preventDefault(); vBox.scrollTop = 0; } if (e.key === 'End') { e.preventDefault(); vBox.scrollTop = vBox.scrollHeight; } });
@@ -91,16 +91,16 @@ export function virtualList(root, i, core) {
 // Carousel behaviour over the slides muten rendered inside a `.cx-car` (the Carousel part): pages, indicator
 // (dots · progress · count · thumbs), loop, autoplay with its own pause, arrows (bar | overlay), keys and mouse drag.
 export function carouselBehavior(root, i, core) {
-  const { $, $$, ui } = core;
+  const { $, $$, ui } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   const perView = String(i.perView || '1').split(',').map(Number), [perSm, perLg] = perView.length > 1 ? perView : [Math.min(perView[0], 2), perView[0]];
   const center = i.center === 'on', loop = i.loop === 'on', autoplay = Number(i.autoplay) || 0, indicator = i.indicator || 'dots', arrows = i.arrows || 'bar';
   root.style.setProperty('--per', perLg); root.style.setProperty('--per-sm', perSm);
   if (center) root.dataset.center = '';
   const view = $('.cx-car-view', root); view.dataset.arrows = arrows;
-  const prevB = ui.button({ icon: 'left', size: 'icon-sm', attrs: 'data-car="prev" aria-label="Anterior" title="Anterior"', cls: 'cx-car-arrow' });
-  const nextB = ui.button({ icon: 'right', size: 'icon-sm', attrs: 'data-car="next" aria-label="Siguiente" title="Siguiente"', cls: 'cx-car-arrow' });
+  const prevB = ui.button({ icon: 'left', size: 'icon-sm', attrs: `data-car="prev" aria-label="${T('Previous')}" title="${T('Previous')}"`, cls: 'cx-car-arrow' });
+  const nextB = ui.button({ icon: 'right', size: 'icon-sm', attrs: `data-car="next" aria-label="${T('Next')}" title="${T('Next')}"`, cls: 'cx-car-arrow' });
   if (arrows === 'overlay') view.insertAdjacentHTML('beforeend', prevB + nextB);
-  root.insertAdjacentHTML('beforeend', `<div class="cx-car-bar"><div class="cx-car-ind" data-ind="${indicator}"></div><div class="cx-hstack" style="gap:6px">${autoplay ? ui.button({ icon: 'pause', size: 'icon-sm', variant: 'ghost', attrs: 'data-car="play" aria-label="Pausar" title="Pausar"' }) : ''}${arrows === 'bar' ? prevB + nextB : ''}</div></div>`);
+  root.insertAdjacentHTML('beforeend', `<div class="cx-car-bar"><div class="cx-car-ind" data-ind="${indicator}"></div><div class="cx-hstack" style="gap:6px">${autoplay ? ui.button({ icon: 'pause', size: 'icon-sm', variant: 'ghost', attrs: `data-car="play" aria-label="${T('Pause')}" title="${T('Pause')}"` }) : ''}${arrows === 'bar' ? prevB + nextB : ''}</div></div>`);
   const track = $('.cx-car-track', root), ind = $('.cx-car-ind', root), cards = $$('.cx-car-slide', track);
   cards.forEach((c, k) => { c.setAttribute('role', 'group'); c.setAttribute('aria-roledescription', 'diapositiva'); c.setAttribute('aria-label', `${k + 1} de ${cards.length}`); });
   const step = () => (cards[1] ? cards[1].offsetLeft - cards[0].offsetLeft : track.clientWidth);
@@ -116,10 +116,10 @@ export function carouselBehavior(root, i, core) {
   const paint = () => {
     const n = pages(), cur = current();
     // the dots are tabs, so their holder is the tablist (a tab without one fails the a11y check)
-    if (indicator === 'dots') { ind.setAttribute('role', 'tablist'); ind.setAttribute('aria-label', 'Diapositivas'); if (ind.childElementCount !== n) ind.innerHTML = Array.from({ length: n }, (_, k) => ui.button({ variant: 'ghost', size: 'icon-xs', cls: 'cx-dotb', attrs: `role="tab" data-go="${k}" aria-label="Ir a ${k + 1} de ${n}"`, label: '<span class="cx-dot-mark"></span>' })).join(''); $$('[data-go]', ind).forEach((d, k) => d.setAttribute('aria-selected', k === cur)); }
+    if (indicator === 'dots') { ind.setAttribute('role', 'tablist'); ind.setAttribute('aria-label', T('Slides')); if (ind.childElementCount !== n) ind.innerHTML = Array.from({ length: n }, (_, k) => ui.button({ variant: 'ghost', size: 'icon-xs', cls: 'cx-dotb', attrs: `role="tab" data-go="${k}" aria-label="${T('Go to {0} of {1}', k + 1, n)}"`, label: '<span class="cx-dot-mark"></span>' })).join(''); $$('[data-go]', ind).forEach((d, k) => d.setAttribute('aria-selected', k === cur)); }
     if (indicator === 'progress') ind.innerHTML = `<div class="cx-hstack" style="gap:10px;flex-wrap:nowrap">${ui.progress(((cur + 1) / n) * 100, `Diapositiva ${cur + 1} de ${n}`)}${ui.text(`${cur + 1} / ${n}`, 'caption')}</div>`;
     if (indicator === 'count') ind.innerHTML = ui.text(`${cur + 1} de ${n}`, 'caption');
-    if (indicator === 'thumbs') { if (!ind.childElementCount) ind.innerHTML = `<div class="cx-hstack" role="tablist" aria-label="Miniaturas">${cards.map((_, k) => ui.button({ variant: 'ghost', size: 'icon-lg', cls: 'cx-thumb', attrs: `role="tab" data-go="${k}" aria-label="Foto ${k + 1}"`, label: thumbOf(k) })).join('')}</div>`; $$('[data-go]', ind).forEach((d, k) => { d.setAttribute('aria-selected', k === cur); d.setAttribute('aria-pressed', k === cur); }); }
+    if (indicator === 'thumbs') { if (!ind.childElementCount) ind.innerHTML = `<div class="cx-hstack" role="tablist" aria-label="${T('Thumbnails')}">${cards.map((_, k) => ui.button({ variant: 'ghost', size: 'icon-lg', cls: 'cx-thumb', attrs: `role="tab" data-go="${k}" aria-label="${T('Photo {0}', k + 1)}"`, label: thumbOf(k) })).join('')}</div>`; $$('[data-go]', ind).forEach((d, k) => { d.setAttribute('aria-selected', k === cur); d.setAttribute('aria-pressed', k === cur); }); }
     if (center) cards.forEach((c, k) => c.toggleAttribute('data-active', k === cur));
     if (!loop) { $$('[data-car="prev"]', root).forEach((b) => { b.disabled = cur === 0; }); $$('[data-car="next"]', root).forEach((b) => { b.disabled = cur >= n - 1; }); }
   };
@@ -129,7 +129,7 @@ export function carouselBehavior(root, i, core) {
     const a = e.target.closest('[data-car]'); if (!a) return;
     if (a.dataset.car === 'prev') go(current() - 1);
     if (a.dataset.car === 'next') go(current() + 1);
-    if (a.dataset.car === 'play') { playing = !playing; a.innerHTML = ui.icon(playing ? 'pause' : 'play'); a.setAttribute('aria-label', playing ? 'Pausar' : 'Reproducir'); a.title = a.getAttribute('aria-label'); }
+    if (a.dataset.car === 'play') { playing = !playing; a.innerHTML = ui.icon(playing ? 'pause' : 'play'); a.setAttribute('aria-label', playing ? T('Pause') : T('Play')); a.title = a.getAttribute('aria-label'); }
   });
   track.tabIndex = 0;
   track.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { e.preventDefault(); go(current() + 1); } if (e.key === 'ArrowLeft') { e.preventDefault(); go(current() - 1); } });
@@ -146,7 +146,7 @@ export function carouselBehavior(root, i, core) {
   addEventListener('pointerup', () => { if (!drag) return; const moved = drag.moved; drag = null; track.classList.remove('dragging'); if (moved) { go(nearest()); track.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); } });
   let playing = !!autoplay && !matchMedia('(prefers-reduced-motion: reduce)').matches, hold = false;
   if (autoplay) {
-    if (!playing) { const b = $('[data-car="play"]', root); b.innerHTML = ui.icon('play'); b.setAttribute('aria-label', 'Reproducir'); }
+    if (!playing) { const b = $('[data-car="play"]', root); b.innerHTML = ui.icon('play'); b.setAttribute('aria-label', T('Play')); }
     ['pointerenter', 'focusin', 'touchstart'].forEach((t) => root.addEventListener(t, () => { hold = true; }, { passive: true }));
     ['pointerleave', 'focusout'].forEach((t) => root.addEventListener(t, () => { hold = false; }));
     setInterval(() => { if (playing && !hold && !document.hidden) go(loop || current() < pages() - 1 ? current() + 1 : 0); }, autoplay);