@muten/shadcn 0.2.11 → 0.2.12

package/kit.css

@@ -606,8 +606,8 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
 .cx-otp[data-state="bad"] .cn-input-otp-slot { border-color: var(--destructive); }
 .cx-otp[data-state="bad"] { animation: cx-shake calc(var(--t-move) * 1.35) var(--ease-out); }
 .cx-otp[data-state="ok"] .cn-input-otp-slot { border-color: var(--success); color: var(--success); }
-#otp-msg[data-tone="bad"] { color: var(--destructive); }
-#otp-msg[data-tone="ok"] { color: var(--success); }
+[data-otp-msg][data-tone="bad"] { color: var(--destructive); }
+[data-otp-msg][data-tone="ok"] { color: var(--success); }
 
 /* ── Color picker ── */
 .cx-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
@@ -713,7 +713,7 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
 .cx-pagination .cx-pg-num .cn-button, .cx-pg-gap { width: 32px; }
 .cx-pg-gap { display: flex; justify-content: center; }
 .cx-pg-list { transition: opacity 160ms ease; }
-.cx-pg-list[data-loading] { opacity: .45; }
+.cx-pg-list[data-loading="true"] { opacity: .45; }   /* muten writes "false" too: only true dims */
 .cx-pg-empty { border-top-color: transparent; }
 /* virtual list */
 .cx-vlist { height: 364px; overflow-y: auto; border-radius: calc(var(--radius) * 1.2); box-shadow: 0 0 0 1px var(--border); overscroll-behavior: contain; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/input-otp.muten

@@ -1,7 +1,9 @@
 # InputOtp - the verification code: slots in two groups, a caret, “Verificando…”, ok / bad, a resend countdown. The
 # PAGE checks the code: onInput gets it when complete; answer with state ("ok" | "bad") and message.
 #   InputOtp(value: code, length: 6, hint: "We sent it to +57 300 123 4567", state: otpState, message: otpMsg, onInput: check)
+#   InputOtp(length: 8, letters: true, resendIn: 0, …)   a code copied from another screen (KQ4M-7T2X): letters and
+#   digits, in capitals, a pasted dash dropped, and no resend button (resendIn 0 never offers one).
 # shadcn-for-muten · Custom (kit values) · host JS input-otp.js.
-part InputOtp(value: text = "", length: number = 6, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
-  Custom InputOtp inputs(value: $value, length: $length, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")
+part InputOtp(value: text = "", length: number = 6, letters: bool = false, hint: text = "", state: text = "", message: text = "", resendIn: number = 30, onInput: action) {
+  Custom InputOtp inputs(value: $value, length: $length, letters: $letters, hint: $hint, state: $state, message: $message, resendIn: $resendIn) on(input: $onInput) class("cx-otp-host")
 }

package/registry/kit/i18n.js

@@ -90,7 +90,7 @@ Object.assign(ES, {
   'maximum': 'máximo', 'minimum': 'mínimo', 'Currency': 'Moneda', 'Country': 'País', '{0} (it has no minor unit)': '{0} (no tiene unidad menor)', 'cents of {0}': 'centavos de {0}',
   'Saved as: {0} {1}': 'Se guarda: {0} {1}', 'Type a price': 'Escribe un precio', 'Search currency': 'Buscar moneda', 'Search country': 'Buscar país',
   'Saved as +{0}': 'Se guarda como +{0}', '{0} digits short for a number from {1}': 'Faltan {0} dígitos para un número de {1}', '{0} digits, without the {1}': '{0} dígitos, sin el {1}',
-  '{0}-digit code': 'Código de {0} dígitos', 'Checking…': 'Verificando…', 'Resend in 0:{0}': 'Reenviar en 0:{0}', 'Resend code': 'Reenviar código',
+  '{0}-digit code': 'Código de {0} dígitos', '{0}-character code': 'Código de {0} caracteres', 'Checking…': 'Verificando…', 'Resend in 0:{0}': 'Reenviar en 0:{0}', 'Resend code': 'Reenviar código',
   'We sent you a new code': 'Te enviamos un código nuevo', 'Done, it is verified': 'Listo, quedó verificado', 'That is not the code': 'Ese código no es',
 });
 

package/registry/kit/values.js

@@ -157,7 +157,14 @@ export function phoneField(root, i, core, on) {
 export function otpField(root, i, core, on) {
   const { $ } = core, T = (k, ...a) => core.t(core.langOf(root), k, ...a);
   const len = Number(i.length) || 6, half = Math.ceil(len / 2);
-  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="${T('{0}-digit code', len)}"><div data-slot="input-otp" class="cn-input-otp" aria-hidden="true"><div data-slot="input-otp-group" class="cn-input-otp-group"></div><div data-slot="input-otp-separator" class="cn-input-otp-separator cx-otp-sep"><span></span></div><div data-slot="input-otp-group" class="cn-input-otp-group"></div></div></div><p class="cx-note" data-otp-msg></p><button data-slot="button" class="cn-button cn-button-variant-link cn-button-size-sm group/button" data-otp-resend disabled></button></div>`;
+  // letters: a code people copy from another screen (KQ4M-7T2X), so letters and digits, shown in capitals, and room in the
+  // field for a pasted dash or spaces, which are dropped (maxlength would otherwise cut the paste before the cleanup)
+  const letters = i.letters === true || i.letters === 'true';
+  const keep = letters ? (v) => v.toUpperCase().replace(/[^A-Z0-9]/g, '') : (v) => v.replace(/\D/g, '');
+  const field = letters
+    ? `inputmode="text" autocapitalize="characters" autocomplete="off" spellcheck="false" maxlength="${len * 2}" aria-label="${T('{0}-character code', len)}"`
+    : `inputmode="numeric" autocomplete="one-time-code" maxlength="${len}" aria-label="${T('{0}-digit code', len)}"`;
+  root.innerHTML = `<div class="cx-vline cx-otp-stack"><div class="cx-otp"><input class="cx-otp-input" ${field}><div data-slot="input-otp" class="cn-input-otp" aria-hidden="true"><div data-slot="input-otp-group" class="cn-input-otp-group"></div><div data-slot="input-otp-separator" class="cn-input-otp-separator cx-otp-sep"><span></span></div><div data-slot="input-otp-group" class="cn-input-otp-group"></div></div></div><p class="cx-note" data-otp-msg></p><button data-slot="button" class="cn-button cn-button-variant-link cn-button-size-sm group/button" data-otp-resend disabled></button></div>`;
   const otpIn = $('.cx-otp-input', root), otpBox = $('.cx-otp', root), otpMsg = $('[data-otp-msg]', root), resend = $('[data-otp-resend]', root);
   const slots = [];
   root.querySelectorAll('.cn-input-otp-group').forEach((g, gi) => { const n = gi ? len - half : half; for (let k = 0; k < n; k++) { const s = document.createElement('div'); s.className = 'cn-input-otp-slot'; s.dataset.slot = 'input-otp-slot'; g.appendChild(s); slots.push(s); } });
@@ -166,16 +173,20 @@ export function otpField(root, i, core, on) {
   const paint = () => { const v = otpIn.value, focused = document.activeElement === otpIn, at = Math.min(v.length, len - 1); slots.forEach((s, k) => { s.textContent = v[k] || ''; const act = focused && k === at && !busy; s.dataset.active = act; if (act && !v[k]) s.innerHTML = '<span class="cx-caret"></span>'; }); };
   const toEnd = () => { const n = otpIn.value.length; otpIn.setSelectionRange(n, n); };
   otpIn.addEventListener('input', () => {
-    otpIn.value = otpIn.value.replace(/\D/g, '').slice(0, len); delete otpBox.dataset.state; otpMsg.removeAttribute('data-tone'); otpMsg.textContent = hint; paint();
+    otpIn.value = keep(otpIn.value).slice(0, len); delete otpBox.dataset.state; otpMsg.removeAttribute('data-tone'); otpMsg.textContent = hint; paint();
     if (otpIn.value.length === len) { busy = true; otpIn.readOnly = true; otpMsg.textContent = T('Checking…'); paint(); on?.complete?.(otpIn.value); }
   });
   ['focus', 'blur', 'click', 'keyup'].forEach((t) => otpIn.addEventListener(t, () => { toEnd(); paint(); }));
   otpIn.addEventListener('select', toEnd);
+  // resendIn 0: a code that is not sent again (one a shop gave you, one a terminal shows), so no resend button at all
   let left = Number(i.resendIn ?? 30), rt = 0;
+  const resends = left > 0;
+  resend.hidden = !resends;
   const tick = () => { left--; resend.disabled = left > 0; resend.textContent = left > 0 ? T('Resend in 0:{0}', String(left).padStart(2, '0')) : T('Resend code'); if (left > 0) rt = setTimeout(tick, 1000); };
   resend.textContent = T('Resend in 0:{0}', String(left).padStart(2, '0'));
   resend.onclick = () => { left = Number(i.resendIn ?? 30) + 1; clearTimeout(rt); tick(); otpMsg.removeAttribute('data-tone'); otpMsg.textContent = T('We sent you a new code'); otpIn.value = ''; delete otpBox.dataset.state; otpIn.focus(); on?.resend?.(); };
-  rt = setTimeout(tick, 1000); paint();
+  if (resends) rt = setTimeout(tick, 1000);
+  paint();
   const answer = (st, msg) => {
     if (!st || st === 'checking') return;
     busy = false; otpIn.readOnly = false;

package/registry/modal-behavior.js

@@ -2,6 +2,20 @@
 // the Modal part's (muten state + kit.css). This only does what markup cannot: history (Back closes), Esc, the focus
 // trap, the scroll lock, the auto mode (dialog on a wide screen, drawer on a phone) and the drawer's drag to close.
 // Same rules as the reference artifact's modal.
+// MODALS STACK (a receipt opened over a cita): Back, Esc and the focus trap belong to the TOP one only, and the page's
+// scroll is unlocked when the last one closes. Each modal used to listen to every Back: closing the receipt went back
+// in history and that Back also closed the cita under it, leaving the agenda without its buttons (21-10-2026).
+const stack = (globalThis.__cxModals ||= { list: [], skip: 0, wired: false });
+if (!stack.wired) {
+  stack.wired = true;
+  addEventListener('popstate', () => {
+    // the history.back() a modal makes when it closes itself is its own, not a Back for the one under it
+    if (stack.skip > 0) { stack.skip -= 1; return; }
+    stack.list.at(-1)?.onPop();
+  });
+}
+const isTop = (me) => stack.list.at(-1) === me;
+
 export function mount(el, inputs, on) {
   const mdl = el.closest('.cx-modal'), root = mdl.parentElement, ov = root.querySelector(':scope > .cx-overlay');
   const body = mdl.querySelector(':scope > .cx-modal-body');
@@ -11,6 +25,7 @@ export function mount(el, inputs, on) {
   // of opening: a dialog that only learns it is a dialog as it opens animates its centring from the corner
   const resolve = () => { if (auto && !isOpen) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog'; };
   let isOpen = false, pushed = false, lastFocus = null;
+  const me = { onPop: () => { if (isOpen) { pushed = false; close(); } } };
   queueMicrotask(() => resolve()); phone.addEventListener('change', resolve);
   // the footer sticks under the scrolling body, not inside it
   const placeFooter = () => { const f = body.querySelector('.cx-modal-foot'); if (f) mdl.appendChild(f); };
@@ -40,6 +55,7 @@ export function mount(el, inputs, on) {
     if (auto) mdl.dataset.mode = phone.matches ? 'drawer' : 'dialog';
     if (wantsAnchor()) place(); else unplace();
     lastFocus = document.activeElement;
+    stack.list.push(me);
     document.documentElement.classList.add('cx-locked');
     // on the phone, focusing a field would throw the keyboard over the sheet: focus the sheet itself
     requestAnimationFrame(() => { ((mdl.dataset.mode === 'dialog' && focusables().find((x) => x.matches('input, textarea'))) || mdl).focus({ preventScroll: true }); });
@@ -48,9 +64,10 @@ export function mount(el, inputs, on) {
   const shut = () => {
     if (!isOpen) return; isOpen = false;
     mdl.style.transform = ''; if (ov) ov.style.opacity = '';
-    document.documentElement.classList.remove('cx-locked');
+    stack.list = stack.list.filter((one) => one !== me);
+    if (stack.list.length === 0) document.documentElement.classList.remove('cx-locked');
     lastFocus?.focus?.({ preventScroll: true });
-    if (pushed) { pushed = false; history.back(); }
+    if (pushed) { pushed = false; stack.skip += 1; history.back(); }
   };
   mdl.tabIndex = -1;
   // A link inside (a menu in a drawer): close first, then go. Closing undoes the history entry the modal pushed, and
@@ -64,9 +81,8 @@ export function mount(el, inputs, on) {
     pushed = false; addEventListener('popstate', go);
     close(); history.back();
   }, true);
-  addEventListener('popstate', () => { if (isOpen) { pushed = false; close(); } });
   document.addEventListener('keydown', (e) => {
-    if (!isOpen) return;
+    if (!isOpen || !isTop(me)) return;
     if (e.key === 'Escape') { e.preventDefault(); close(); }
     if (e.key === 'Tab') { const f = focusables(); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }
   });

package/registry.json

@@ -457,7 +457,7 @@
       "part": "InputOtp",
       "file": "registry/input-otp.muten",
       "component": "InputOtp",
-      "description": "InputOtp(value, length, hint, state, message, resendIn, onInput): slots, caret, ok/bad, resend countdown."
+      "description": "InputOtp(value, length, letters, hint, state, message, resendIn, onInput): slots, caret, ok/bad, resend countdown (none with resendIn 0); letters for a code like KQ4M-7T2X."
     },
     {
       "name": "input",