@muten/shadcn 0.2.11 → 0.2.13

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; }
@@ -5560,3 +5560,50 @@ a.cx-bc-item:hover { color: var(--foreground); }
   .style-nova .cn-alert > .cn-alert-action { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin: 8px 0 0; }
   .style-nova .cn-alert:has(> :is(svg, .mu-icon)) > .cn-alert-action { grid-column: 2; }
 }
+
+/* ═════ SIDEBAR SUB · the level below an item (SidebarSub, SidebarSubLink) ═════
+   Indented under its parent with a hairline on the left; an item holds an optional status dot or a spinning ring, the
+   name, a hint in words that opens on hover (always shown where there is no hover), and a count. */
+.cx-sb-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 15px; padding-left: 10px; border-left: 1px solid var(--border); min-width: 0; }
+.cx-sidebar[data-collapsed="true"] .cx-sb-sub { display: none; }
+.cx-sb-subitem { position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: calc(var(--radius) * .7); color: var(--muted-foreground); font-size: 13.5px; text-decoration: none; white-space: nowrap; min-width: 0; transition: background-color .15s ease, color .15s ease; }
+.cx-sb-subitem:hover { background: var(--accent); color: var(--foreground); }
+.cx-sb-subitem[data-active="true"] { background: var(--selected-soft); color: var(--selected); font-weight: 500; }
+.cx-sb-subitem:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
+.cx-sb-subitem > .mu-icon { width: 15px; height: 15px; flex: none; }
+.cx-sb-subitem > .cx-sb-count { margin-left: auto; }
+.cx-sb-sub > .cx-sb-subitem[data-tone] { color: var(--foreground); font-size: 14px; }
+.cx-sb-subitem:has(+ .cx-sb-sub) { font-weight: 600; }
+.cx-sb-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--muted-foreground); }
+.cx-sb-subitem[data-tone="ok"] > .cx-sb-dot { background: var(--success); }
+.cx-sb-subitem[data-tone="wait"] > .cx-sb-dot { background: var(--warning); }
+.cx-sb-subitem[data-tone="bad"] > .cx-sb-dot { background: var(--destructive); }
+.cx-sb-ring { width: 12px; height: 12px; flex: none; box-sizing: border-box; border-radius: 99px; border: 2px solid var(--warning); border-right-color: transparent; animation: cx-sb-spin .7s linear infinite; }
+.cx-sb-hint { margin-left: auto; font-size: 12px; color: var(--warning); opacity: 0; transform: translateX(4px); transition: opacity .15s ease, transform .2s var(--ease-out); flex: none; }
+.cx-sb-subitem:hover > .cx-sb-hint, .cx-sb-subitem:focus-visible > .cx-sb-hint { opacity: 1; transform: none; }
+/* with a mouse the words take the name's place on hover (the name fades, they fade in where it was): the row never
+   changes size and nothing shows cut. Without hover they sit after the name. */
+@media (hover: hover) {
+  .cx-sb-subitem { --hint-x: 28px; }
+  .cx-sb-subitem:has(> .cx-sb-dot) { --hint-x: 24px; }
+  .cx-sb-hint { position: absolute; left: var(--hint-x); right: 8px; top: 50%; translate: 0 -50%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; pointer-events: none; }
+  .cx-sb-label { transition: opacity .15s ease; }
+  .cx-sb-subitem:hover > .cx-sb-label:has(+ .cx-sb-hint), .cx-sb-subitem:focus-visible > .cx-sb-label:has(+ .cx-sb-hint) { opacity: 0; }
+}
+@media (hover: none) { .cx-sb-hint { opacity: 1; transform: none; } }
+
+/* ═════ TONE BADGE · busy, compact and lg (ToneBadge) ═════
+   busy swaps the dot for a ring that spins; compact keeps only the dot or the ring and opens the words beside it on
+   hover or focus (their column grows from 0fr, so nothing jumps); without hover they always show. lg sits beside a
+   page's title. */
+.cn-badge[class*="cx-tone-"] .cx-tone-words { display: grid; grid-template-columns: 1fr; overflow: hidden; }
+.cn-badge[class*="cx-tone-"] .cx-tone-words > span { min-width: 0; white-space: nowrap; }
+.cn-badge[data-size="lg"] { height: 28px; padding: 0 12px; gap: 8px; font-size: 14px; font-weight: 600; border: 1px solid color-mix(in oklch, var(--tone, var(--muted-foreground)) 30%, transparent); }
+.cn-badge[data-size="lg"] .cx-dot { width: 8px; height: 8px; }
+.cx-tone-ring { width: 12px; height: 12px; flex: none; box-sizing: border-box; border-radius: 99px; border: 2px solid var(--tone, currentColor); border-right-color: transparent; animation: cx-sb-spin .7s linear infinite; }
+.cn-badge[data-compact="true"] { gap: 0; padding-inline: 8px; transition: gap .2s var(--ease-out), padding .2s var(--ease-out); }
+.cn-badge[data-compact="true"] .cx-tone-words { grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns .2s var(--ease-out), opacity .15s ease; }
+.cn-badge[data-compact="true"]:hover, .cn-badge[data-compact="true"]:focus-within { gap: 8px; padding-inline: 12px; }
+.cn-badge[data-compact="true"]:hover .cx-tone-words, .cn-badge[data-compact="true"]:focus-within .cx-tone-words { grid-template-columns: 1fr; opacity: 1; }
+@media (hover: none) { .cn-badge[data-compact="true"] { gap: 8px; padding-inline: 12px; } .cn-badge[data-compact="true"] .cx-tone-words { grid-template-columns: 1fr; opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .cx-sb-ring, .cx-tone-ring { animation-duration: 1.6s; } .cn-badge[data-compact="true"], .cn-badge[data-compact="true"] .cx-tone-words, .cx-sb-hint { transition: none; } }

package/package.json

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

package/registry/badge.muten

@@ -19,10 +19,15 @@ part StatusBadge(label: text, tone: text = "") { Span "{$label}" class("cn-badge
 # ToneBadge - a state with its tone, tinted, with or without a dot: new | ok | wait | bad | pro (PRO uses --selected).
 #   The word is the tone mixed toward the ink, so it reads on its tint in light and dark.
 #   ToneBadge(label: "Confirmed", tone: "ok")    ToneBadge(label: "Pending", tone: "wait", dot: "dot")
-part ToneBadge(label: text, tone: text, dot: text = "") {
-  Stack class("cn-badge group/badge cx-tone-{$tone}") data(slot: "badge") {
-    when $dot != "" { Span "" class("cx-dot") }
-    Span "{$label}"
+#   busy: a ring that spins instead of the dot (something on its way). compact: only the dot or the ring, the words open
+#   beside it on hover or focus (where there is no hover they always show; a screen reader always reads them).
+#   size "lg": the state beside a page's title.
+#   ToneBadge(label: "Building v24", tone: "wait", busy: true, compact: true, size: "lg")
+part ToneBadge(label: text, tone: text, dot: text = "", busy: bool = false, compact: bool = false, size: text = "") {
+  Stack class("cn-badge group/badge cx-tone-{$tone}") data(slot: "badge", busy: $busy, compact: $compact, size: $size) {
+    when $busy { Span "" class("cx-tone-ring") aria(hidden: "true") }
+    when not $busy and $dot != "" { Span "" class("cx-dot") }
+    Stack class("cx-tone-words") { Span "{$label}" }
   }
 }
 # Chip - a value the person can take away with its ×; it fades out (no jump). The page owns the list.

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/sidebar.muten

@@ -9,6 +9,17 @@
 # SidebarLink is the same item as a link to a route: the app marks where you are by itself (no `current` to keep), also
 # below it (on /schedule/42 the “Appointments” link stays marked). `match` lists other pages it stands for ("/a /b").
 #   SidebarLink(label: "Appointments", to: "/schedule", count: "6") { Icon "lucide:calendar-days" }
+# SidebarSub is the level below an item (shadcn's SidebarMenuSub): indented, with a line on its left. Nest one inside
+# another for one more level. SidebarSubLink is an item in it; the app says which one is `active` (a tab, a query: a
+# route alone cannot tell), `tone` puts a status dot before it (ok · wait · bad · idle), `busy` a ring that spins
+# instead, and `hint` says that state in words: on hover beside the name, always for a screen reader. `active` and
+# `busy` are "true" or anything else (text, so a row's own call can fill them: "{isOpen(s.name)}"). An item with its
+# own level open below it is set in bold.
+#   SidebarLink(label: "Services", to: "/services") { Icon "lucide:layers" }
+#   SidebarSub(label: "Your services") {
+#     SidebarSubLink(label: "api", to: "/services/api", tone: "ok", busy: "{building}", hint: "Building v24")
+#     SidebarSub(label: "api") { SidebarSubLink(label: "Logs", to: "/services/api?tab=logs", active: "{tab == "logs"}") { Icon "lucide:terminal" } }
+#   }
 # The name AppSidebar avoids muten's own Sidebar primitive. shadcn-for-muten · parts · no deps · Nova (.cn-sidebar-*) + kit.css.
 part AppSidebar(collapsed: bool, label: text = "Menu") {
   Nav class("cx-sidebar") data(slot: "sidebar", collapsed: $collapsed) aria(label: $label) { Stack class("cn-sidebar-inner cx-sb-inner") data(slot: "sidebar-inner") { slot } }
@@ -40,3 +51,16 @@ part SidebarLink(label: text, to: text, count: text = "", match: text = "") {
     Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")
   }
 }
+part SidebarSub(label: text = "") {
+  Stack class("cn-sidebar-menu-sub cx-sb-sub") data(slot: "sidebar-menu-sub") aria(role: "group", label: $label) { slot }
+}
+part SidebarSubLink(label: text, to: text, active: text = "", count: text = "", tone: text = "", busy: text = "", hint: text = "") {
+  Link -> "{$to}" class("cn-sidebar-menu-sub-button cx-sb-subitem") data(slot: "sidebar-menu-sub-button", active: "{$active == "true"}", tone: $tone, busy: "{$busy == "true"}", name: $label) aria(current: "{$active == "true" ? "page" : "false"}", label: "{$label}{$hint == "" ? "" : ", {$hint}"}") {
+    when $busy == "true" { Span "" class("cx-sb-ring") aria(hidden: "true") }
+    when $busy != "true" and $tone != "" { Span "" class("cx-sb-dot") aria(hidden: "true") }
+    slot
+    Span "{$label}" class("cx-sb-label")
+    when $hint != "" { Span "{$hint}" class("cx-sb-hint") aria(hidden: "true") }
+    when $count != "" { Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge") }
+  }
+}

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",
@@ -936,7 +936,7 @@
       "deps": [],
       "part": "AppSidebar",
       "file": "registry/sidebar.muten",
-      "description": "AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem). Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive."
+      "description": "AppSidebar - a collapsible nav panel (SidebarHeader / SidebarGroup / SidebarItem / SidebarLink), with SidebarSub / SidebarSubLink for the level below an item (active, a status dot or spinning ring, a hint on hover). Named AppSidebar so it never shadows muten's core Sidebar <aside> primitive."
     },
     {
       "name": "site-footer",