@muten/shadcn 0.1.15 → 0.2.1

package/registry/sidebar.muten

@@ -3,15 +3,21 @@
 # whether it is folded. (AppShell is the whole frame - sidebar, header, sheet, ⌘K - built from data.)
 #   AppSidebar(collapsed: folded) {
 #     SidebarHeader { … }
-#     SidebarGroup(label: "Principal") { SidebarItem(label: "Agenda", value: "agenda", current: place, count: "14", onSelect: go) { Icon "lucide:calendar" } }
+#     SidebarGroup(label: "Primary") { SidebarItem(label: "Schedule", value: "agenda", current: place, count: "14", onSelect: go) { Icon "lucide:calendar" } }
 #     SidebarFooter { … }
 #   }
-# SidebarLink is the same item as a link to a route: the app marks where you are by itself (no `current` to keep).
-#   SidebarLink(label: "Citas", to: "/schedule", count: "6") { Icon "lucide:calendar-days" }
+# 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" }
 # 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 = "Menú") {
+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 } }
 }
+# SidebarTrigger - the fold toggle (shadcn's SidebarTrigger): an icon button that lives in the icon column, so it is
+# there folded or open. The page owns the state. SidebarHeader { SidebarTrigger(collapsed: folded, onToggle: toggleFold) }
+part SidebarTrigger(collapsed: bool, onToggle: action) {
+  Button -> $onToggle class("cn-button cn-button-variant-ghost cn-button-size-icon-sm group/button cx-sb-trigger") data(slot: "sidebar-trigger", name: "Show or hide the menu", trl: "Show or hide the menu", trn: "Show or hide the menu") aria(label: "Show or hide the menu", expanded: not $collapsed) { Icon "lucide:panel-left" }
+}
 part SidebarHeader() { Stack class("cn-sidebar-header cx-sb-head") data(slot: "sidebar-header") { slot } }
 part SidebarFooter() { Stack class("cn-sidebar-footer cx-sb-foot") data(slot: "sidebar-footer") { slot } }
 part SidebarGroup(label: text = "") {
@@ -27,8 +33,8 @@ part SidebarItem(label: text, value: text, current: text, onSelect: action, coun
     Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")
   }
 }
-part SidebarLink(label: text, to: text, count: text = "") {
-  Link -> "{$to}" class("cn-sidebar-menu-button cn-sidebar-menu-button-variant-default cn-sidebar-menu-button-size-default cx-sb-item") data(slot: "sidebar-menu-button", name: $label) {
+part SidebarLink(label: text, to: text, count: text = "", match: text = "") {
+  Link -> "{$to}" class("cn-sidebar-menu-button cn-sidebar-menu-button-variant-default cn-sidebar-menu-button-size-default cx-sb-item") data(slot: "sidebar-menu-button", name: $label, match: $match) {
     slot
     Span "{$label}" class("cx-sb-label")
     Span "{$count}" class("cn-sidebar-menu-badge cx-sb-count") data(slot: "sidebar-menu-badge")

package/registry/site-footer.muten

@@ -4,20 +4,20 @@
 # theme, so it sits on any skin, light or dark.
 #   SiteFooter {
 #     FooterHead {
-#       FooterBrand(tag: "Vende y agenda por ti.") { Link "" -> "/" aria(label: "Inicio") { Image "/logo.svg" alt("Storio") } }
-#       FooterActions { LinkBtn(to: "/login", variant: "outline") { Span "Entrar" }  LinkBtn(to: "/signup") { Span "Crear mi tienda" } }
+#       FooterBrand(tag: "Sells and books for you.") { Link "" -> "/" aria(label: "Home") { Image "/logo.svg" alt("Storio") } }
+#       FooterActions { LinkBtn(to: "/login", variant: "outline") { Span "Sign in" }  LinkBtn(to: "/signup") { Span "Create my shop" } }
 #     }
 #     FooterLinks {
-#       FooterCol(title: "Producto") { Link "Qué es" -> "/product"  Link "Precios" -> "/pricing" }
-#       FooterCol(title: "Legal") { Link "Términos" -> "/terms"  Link "Privacidad" -> "/privacy" }
+#       FooterCol(title: "Product") { Link "What it is" -> "/product"  Link "Prices" -> "/pricing" }
+#       FooterCol(title: "Legal") { Link "Terms" -> "/terms"  Link "Privacy" -> "/privacy" }
 #     }
 #     FooterBar { Span "© 2026 Candhrly LLC"  Link "hello@storio.ink" -> "mailto:hello@storio.ink" }
 #   }
 # FooterCol(wide: "on") takes two columns of links on a phone and one long column on a desk (a long list, like trades).
 # The bar puts its first child on the left and the rest on the right.
 # shadcn-for-muten · part · no deps · kit.css (.cx-foot).
-part SiteFooter(label: text = "Pie de página") {
-  Footer class("cx-foot") aria(label: $label) { Stack class("cx-foot-in") { slot } }
+part SiteFooter(label: text = "Footer") {
+  Footer class("cx-foot") data(trl: $label) aria(label: $label) { Stack class("cx-foot-in") { slot } }
 }
 part FooterHead() { Stack class("cx-foot-head") { slot } }
 part FooterBrand(tag: text = "") {

package/registry/sortable-behavior.js

@@ -1,37 +1,84 @@
-// SortableBehavior (muten Custom) - reorder the Items of a Sortable: pointer (mouse + touch) on the grip, the others
-// slide to make room; or focus the grip and use Up/Down. Announces «<title>: posición n de m» and emits the keys in
-// their new order. Same feel as the reference artifact's sortable list.
+// SortableBehavior (muten Custom) - reorder the Items of a Sortable, with a GHOST of the row already where it will
+// land. Pointer (mouse + touch) on the grip, or focus the grip and use Up/Down. Announces “<title>: position n of m”
+// and emits the keys in their new order. Motion on the kit's tokens (kit.css “Sortable”):
+//   · the row taken lifts (2 % bigger, a deeper shadow) and follows the pointer, kept within the list
+//   · the others slide apart (--t-move) and the ghost (the row's own copy, dashed, its content faded) glides to the
+//     slot the row will take, in step with them; rows of different heights are measured, not assumed
+//   · on release the row settles exactly onto the ghost (200 ms), the ghost fades, THEN the order is committed with
+//     nothing moving, so there is no jump; Escape puts it back where it was
+//   · the keyboard moves it with no drag animation (keyboard actions never animate)
 export function mount(el, inputs, on) {
   const sort = el.parentElement;
+  let I = null; const T = (k, ...a) => (I ? I.t(I.langOf(sort), k, ...a) : a.reduce((x, v, n) => x.replace(`{${n}}`, v), k));
+  // the grips' names: “Move <title>” in the list's language (muten cannot interpolate inside aria(label: "…")), said
+  // again when a lang changes
+  const name = () => sort.querySelectorAll('.cx-grip').forEach((g) => { const it = g.closest('.cx-item'); const title = g.dataset.title || it?.querySelector('.cn-item-title')?.textContent || ''; g.setAttribute('aria-label', T('Move {0}', title)); g.title = T('Drag to reorder'); });
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => { I = m; name(); });
+  document.addEventListener('kit:lang', () => { if (sort.isConnected) name(); });
   const live = document.createElement('span'); live.className = 'cx-sr'; live.setAttribute('aria-live', 'polite'); sort.after(live);
   const items = () => [...sort.querySelectorAll(':scope > .cx-item')];
-  sort.querySelectorAll('.cx-grip').forEach((g) => { g.tabIndex = 0; g.title = 'Arrastra para ordenar'; });
+  const settleMs = () => (parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--t-move')) > 1 ? 200 : 1);
+  sort.querySelectorAll('.cx-grip').forEach((g) => { g.tabIndex = 0; });
+  name();
   const done = (item) => {
-    const all = items(); live.textContent = `${item.querySelector('.cn-item-title')?.textContent || ''}: posición ${all.indexOf(item) + 1} de ${all.length}`;
+    const all = items(); live.textContent = T('{0}: position {1} of {2}', item.querySelector('.cn-item-title')?.textContent || '', all.indexOf(item) + 1, all.length);
     on.reorder?.(all.map((x) => x.dataset.key).join(','));
   };
+
   sort.addEventListener('pointerdown', (e) => {
-    const grip = e.target.closest('.cx-grip'); if (!grip) return;
+    const grip = e.target.closest('.cx-grip'); if (!grip || e.button > 0) return;
     e.preventDefault();
-    const item = grip.closest('.cx-item'), all = items();
-    const rects = all.map((x) => x.getBoundingClientRect()), start = e.clientY, from = all.indexOf(item);
-    const step = rects[1] ? rects[1].top - rects[0].top : rects[0].height + 8;
+    const item = grip.closest('.cx-item'), all = items(), from = all.indexOf(item);
+    const tops = all.map((x) => x.offsetTop), heights = all.map((x) => x.offsetHeight);
+    const gap = parseFloat(getComputedStyle(sort).rowGap) || 0, h = heights[from], room = h + gap;
+    const others = all.filter((x) => x !== item);
+    const mids = others.map((x) => x.offsetTop + x.offsetHeight / 2);
+    // where the row's top lands when it takes index k among the others
+    const topAt = (k) => tops[0] + others.slice(0, k).reduce((sum, x) => sum + x.offsetHeight + gap, 0);
+    const startY = e.clientY, minDy = tops[0] - tops[from] - room / 2, maxDy = topAt(others.length) - tops[from] + room / 2;
     let to = from;
-    item.classList.add('lifting'); grip.setPointerCapture(e.pointerId);
+
+    // the ghost: the row's own copy, the same box in the same place, dashed and faded; inert and silent
+    const ghost = item.cloneNode(true);
+    ghost.classList.add('cx-sort-ghost'); ghost.removeAttribute('data-key'); ghost.setAttribute('aria-hidden', 'true'); ghost.inert = true;
+    ghost.style.left = item.offsetLeft + 'px'; ghost.style.width = item.offsetWidth + 'px'; ghost.style.translate = `0 ${tops[from]}px`;
+    sort.appendChild(ghost);
+    requestAnimationFrame(() => ghost.classList.add('on'));
+
+    item.classList.add('lifting'); document.documentElement.classList.add('cx-sorting');
+    grip.setPointerCapture(e.pointerId);
+    const place = () => {
+      others.forEach((x, k) => { const i = all.indexOf(x); let shift = 0; if (from < to && i > from && i <= to) shift = -room; if (from > to && i < from && i >= to) shift = room; x.style.translate = shift ? `0 ${shift}px` : ''; });
+      ghost.style.translate = `0 ${topAt(to)}px`;
+    };
     const move = (ev) => {
-      const dy = ev.clientY - start; item.style.transform = `translateY(${dy}px)`;
-      to = Math.max(0, Math.min(all.length - 1, from + Math.round(dy / step)));
-      all.forEach((x, i) => { if (x === item) return; let shift = 0; if (from < to && i > from && i <= to) shift = -step; if (from > to && i < from && i >= to) shift = step; x.style.transform = shift ? `translateY(${shift}px)` : ''; });
+      const dy = Math.max(minDy, Math.min(maxDy, ev.clientY - startY));
+      item.style.translate = `0 ${dy}px`;
+      const center = tops[from] + h / 2 + dy;
+      const next = mids.filter((m) => m < center).length;
+      if (next !== to) { to = next; place(); }
     };
-    const up = () => {
-      grip.removeEventListener('pointermove', move); grip.removeEventListener('pointerup', up); grip.removeEventListener('pointercancel', up);
-      all.forEach((x) => { x.style.transition = 'none'; x.style.transform = ''; });
-      const ref = all[to]; if (to !== from) sort.insertBefore(item, from < to ? ref.nextSibling : ref);
-      item.classList.remove('lifting'); void sort.offsetWidth; all.forEach((x) => { x.style.transition = ''; });
-      if (to !== from) done(item);
+    const finish = (commit) => {
+      grip.removeEventListener('pointermove', move); grip.removeEventListener('pointerup', up); grip.removeEventListener('pointercancel', cancel); removeEventListener('keydown', esc, true);
+      if (!commit) { to = from; place(); }
+      item.classList.remove('lifting'); item.classList.add('settling');
+      item.style.translate = `0 ${topAt(to) - tops[from]}px`;
+      ghost.classList.remove('on');
+      setTimeout(() => {
+        all.forEach((x) => { x.style.transition = 'none'; x.style.translate = ''; });
+        item.classList.remove('settling'); ghost.remove(); document.documentElement.classList.remove('cx-sorting');
+        // right before the row it now precedes, or right after the last one (never past the list's own markers)
+        if (to !== from) { if (others[to]) sort.insertBefore(item, others[to]); else others[others.length - 1].after(item); }
+        void sort.offsetWidth; all.forEach((x) => { x.style.transition = ''; });
+        if (to !== from) done(item);
+      }, settleMs());
     };
-    grip.addEventListener('pointermove', move); grip.addEventListener('pointerup', up); grip.addEventListener('pointercancel', up);
+    const up = () => finish(true);
+    const cancel = () => finish(false);
+    const esc = (ev) => { if (ev.key === 'Escape') { ev.preventDefault(); ev.stopPropagation(); finish(false); } };
+    grip.addEventListener('pointermove', move); grip.addEventListener('pointerup', up); grip.addEventListener('pointercancel', cancel); addEventListener('keydown', esc, true);
   });
+
   sort.addEventListener('keydown', (e) => {
     const grip = e.target.closest('.cx-grip'); if (!grip || !['ArrowUp', 'ArrowDown'].includes(e.key)) return;
     e.preventDefault(); const item = grip.closest('.cx-item');

package/registry/sortable-list.js

@@ -5,7 +5,9 @@ export function mount(el, inputs, on) {
   const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
   const GRIP = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>';
   const names = String(inputs.items || '').split(',').map((s) => s.trim()).filter(Boolean);
-  el.innerHTML = `<div class="cx-sortable" aria-label="${esc(inputs.label || 'Orden')}">${names.map((n) => `<div class="cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item" data-slot="item" data-key="${esc(n)}"><span class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip" role="button" aria-label="Mover ${esc(n)}" data-grip="true">${GRIP}</span><div class="cn-item-content"><span class="cn-item-title">${esc(n)}</span></div></div>`).join('')}<span class="cx-sl-anchor"></span></div>`;
+  el.innerHTML = `<div class="cx-sortable" aria-label="${esc(inputs.label || 'Order')}" data-trl="${esc(inputs.label || 'Order')}">${names.map((n) => `<div class="cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item" data-slot="item" data-key="${esc(n)}"><span class="cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip" role="button" aria-label="Move ${esc(n)}" data-trl="Move {0}" data-tra="${esc(n)}" data-grip="true">${GRIP}</span><div class="cn-item-content"><span class="cn-item-title">${esc(n)}</span></div></div>`).join('')}<span class="cx-sl-anchor"></span></div>`;
+  if (inputs.lang) el.setAttribute('lang', inputs.lang);
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => m.localizeTree(el));
   import('@muten/shadcn/registry/sortable-behavior.js').then((b) => b.mount(el.querySelector('.cx-sl-anchor'), {}, { reorder: (v) => on.reorder?.(v) }));
   return () => {};
 }

package/registry/sortable-list.muten

@@ -1,6 +1,6 @@
 # SortableList - plain names you put in order (the layers of a design, the steps of a flow) from comma-joined text:
 # the same rows and feel as Sortable (the grip, the others making room, Up/Down on the focused grip).
 #   state { layers = "Fondo,Jugador,Interfaz" : text }   action reorder(v: text) mutates layers { layers.set(v) }
-#   SortableList(items: layers, label: "Capas", onReorder: reorder)
+#   SortableList(items: layers, label: "Layers", onReorder: reorder)
 # For rows with a price or details use Sortable with SortItem. shadcn-for-muten · Custom · sortable-list.js.
-part SortableList(items: text, label: text = "Orden", onReorder: action) { Custom SortableList inputs(items: $items, label: $label) on(reorder: $onReorder) class("cx-slist-host") }
+part SortableList(items: text, label: text = "Order", onReorder: action) { Custom SortableList inputs(items: $items, label: $label) on(reorder: $onReorder) class("cx-slist-host") }

package/registry/sortable.muten

@@ -1,14 +1,15 @@
 # Sortable - Items you reorder: take the grip with a mouse or a finger, or focus it and use the arrows. The others
-# make room as you drag; a screen reader hears the new position. onReorder gets the keys in their new order
+# slide apart as you drag and a ghost of the row already sits where it will land (it settles onto it on release;
+# Escape puts it back); a screen reader hears the new position. onReorder gets the keys in their new order
 # ("cut,beard,trim") so the page can save it.
-#   Sortable(label: "Orden de los servicios en tu tienda", onReorder: saveOrder) {
-#     SortItem(key: "cut", title: "Corte clásico", price: "$25.000")
+#   Sortable(label: "Order of the services in your shop", onReorder: saveOrder) {
+#     SortItem(key: "cut", title: "Classic cut", price: "$25.000")
 #   }
 # shadcn-for-muten · part + Custom (SortableBehavior) · kit.css (.cx-sortable).
 part Sortable(label: text, onReorder: action) { Stack class("cx-sortable") aria(label: $label) { slot  SortableBehavior(onReorder: $onReorder) } }
 part SortItem(key: text, title: text, price: text = "") {
   Stack class("cn-item cn-item-variant-outline cn-item-size-sm group/item cx-item") data(slot: "item", key: $key) {
-    Stack class("cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip") aria(role: "button", label: "Mover {$title}") data(grip: "true") { Icon "lucide:grip-vertical" }
+    Stack class("cn-button cn-button-variant-ghost cn-button-size-icon-xs cx-grip") aria(role: "button", label: $title) data(grip: "true", title: $title) { Icon "lucide:grip-vertical" }
     Stack class("cn-item-content") data(slot: "item-content") { Span "{$title}" class("cn-item-title") data(slot: "item-title") }
     Span "{$price}" class("cx-price")
   }

package/registry/spinner.muten

@@ -1,4 +1,4 @@
 # Spinner - a loading mark for a button or a line, never for a whole screen (that is a Skeleton).
-#   Btn(onClick: save) disabled… { Spinner()  Span "Guardando…" }
+#   Btn(onClick: save) disabled… { Spinner()  Span "Saving…" }
 # shadcn-for-muten · part · no deps · Nova (.cn-spinner).
-part Spinner() { Icon "lucide:loader-circle" class("cn-spinner animate-spin") aria(label: "Cargando", role: "status") }
+part Spinner() { Icon "lucide:loader-circle" class("cn-spinner animate-spin") data(trl: "Loading") aria(label: "Loading", role: "status") }

package/registry/split-button.muten

@@ -1,8 +1,8 @@
 # SplitButton - one main action and, joined to it, a chevron with the other ways to do it (save / save as draft).
 # The main action runs on its own; the menu takes DropdownItem parts.
-#   SplitButton(label: "Publicar", onClick: publish) { DropdownItem(label: "Guardar como borrador", onSelect: draft)  DropdownItem(label: "Programar…", onSelect: schedule) }
+#   SplitButton(label: "Publish", onClick: publish) { DropdownItem(label: "Save as draft", onSelect: draft)  DropdownItem(label: "Schedule…", onSelect: schedule) }
 # variant: as Btn. shadcn-for-muten · part over ButtonGroup + DropdownMenu.
-part SplitButton(label: text, onClick: action, variant: text = "default", size: text = "default", menu: text = "Más opciones") {
+part SplitButton(label: text, onClick: action, variant: text = "default", size: text = "default", menu: text = "More options") {
   ButtonGroup(label: $label) {
     Btn(variant: $variant, size: $size, onClick: $onClick) { Span "{$label}" }
     ButtonGroupSeparator()

package/registry/stacked-bars.js

@@ -1,4 +1,4 @@
-// StackedBars (muten Custom) - bars over time with one or more series stacked in each (citas + pedidos by month), an
+// StackedBars (muten Custom) - bars over time with one or more series stacked in each (appointments + pedidos by month), an
 // axis in the page's unit (USD 8K), a bar you can pick (it says so with aria-pressed and sends its id), a note over the
 // plot while there is nothing to show, and a skeleton while it loads. The data changes in place: the bars slide to their
 // new height, nothing blinks. inputs: rows [{id, label, <key>: number, …}], series [{key, label, tone}], selected,
@@ -29,7 +29,7 @@ export function mount(el, inputs, on) {
   };
 
   const paint = () => {
-    const rows = list(state.rows), series = list(state.series), unit = state.unit || '', locale = state.locale || 'es';
+    const rows = list(state.rows), series = list(state.series), unit = state.unit || '', locale = state.locale || (el.closest('[lang]')?.getAttribute('lang')) || 'en';
     const totals = rows.map((r) => series.reduce((sum, s) => sum + (Number(r[s.key]) || 0), 0));
     const top = niceTop(Math.max(0, ...totals)), busy = !!state.busy, none = !busy && totals.every((t) => t === 0);
     const legend = series.length > 1 ? `<ul class="${NS}-legend">${series.map((s) => `<li data-tone="${esc(s.tone || 'brand')}">${esc(s.label)}</li>`).join('')}</ul>` : '';
@@ -46,7 +46,7 @@ export function mount(el, inputs, on) {
     const n = busy ? Math.max(rows.length, 7) : rows.length;
     el.innerHTML = `${legend}<div class="${NS}-body"><div class="${NS}-y" aria-hidden="true">${ticks}</div><div class="${NS}-plot"><div class="${NS}-grid" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="${NS}-bars" role="group" aria-label="${esc(state.label || '')}" style="--n:${n}"${busy ? ' aria-busy="true"' : ''}>${bars}</div>${none && state.empty ? `<div class="cx-veil-note"><div class="cx-veil-box">${state.emptyTitle ? `<span class="cx-veil-t">${esc(state.emptyTitle)}</span>` : ''}<span class="cx-veil-s">${esc(state.empty)}</span></div></div>` : ''}</div><span></span><div class="${NS}-x" aria-hidden="true" style="--n:${n}">${xs}</div></div>`;
     if (!drawn && !busy && rows.length && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
-      el.querySelectorAll(`.${NS}-stack`).forEach((s, i) => s.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 480, delay: i * 24, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }));
+      el.querySelectorAll(`.${NS}-stack`).forEach((s, i) => s.animate([{ transform: 'scaleY(0)' }, { transform: 'scaleY(1)' }], { duration: 480, delay: i * 24, easing: 'cubic-bezier(.23, 1, .32, 1)', fill: 'backwards' }));
       drawn = true;
     }
   };

package/registry/stacked-bars.muten

@@ -1,8 +1,8 @@
-# StackedBars - bars over time with one or more series stacked in each: the year by month, citas and pedidos together.
+# StackedBars - bars over time with one or more series stacked in each: the year by month, appointments and pedidos together.
 # The axis is in the page's unit (USD 8K), a bar can be picked (it is pressed, and onPick gets its id), while nothing
 # is there yet a calm note sits over the plot (`empty`, with `emptyTitle` on top), and while it loads (`busy`) a skeleton keeps the shape. When the
 # data changes the bars slide to their new height. Each bar says its values to a screen reader and on hover.
-#   StackedBars(rows: @months, series: @kinds, selected: monthId, unit: "USD", onPick: pickMonth, label: "Ventas por mes")
+#   StackedBars(rows: @months, series: @kinds, selected: monthId, unit: "USD", onPick: pickMonth, label: "Sales by month")
 # rows {id, label, <key>: number…} · series {key, label, tone}: tone brand | coral | teal | amber | blue | pink, the
 # series palette (the first series sits at the bottom). One series is a plain bar chart. A legend shows from two.
 # readonly: true shows the pick but lets no bar be pressed (a plan that cannot change month).

package/registry/stamp-card.muten

@@ -1,10 +1,10 @@
 # StampCard - a loyalty card: stamps toward a reward (good for any shop).
-#   StampCard(store: "Barbería El Roble", owner: "Laura", total: 10, stamps: 7, reward: "un corte gratis")
+#   StampCard(store: "El Roble Barbershop", owner: "Laura", total: 10, stamps: 7, reward: "a free haircut")
 # The words are templates (%owner %n %total %left %reward); the defaults are Spanish:
 #   StampCard(…, title: "%owner's card", progress: "%n of %total · %left to go for %reward", complete: "Complete! %reward earned.",
 #             count: "%n of %total stamps", redeem: "Redeem reward", stamp: "Stamp a visit")
 # demo "on": it stamps itself one visit at a time and starts over, for a landing; the first touch stops it.
 # shadcn-for-muten · part over KitWidget (kit core).
-part StampCard(store: text, owner: text, total: number = 10, stamps: number, reward: text, demo: text = "", title: text = "Cartilla de %owner", progress: text = "%n de %total · faltan %left para %reward", complete: text = "¡Completa! Ganó %reward.", count: text = "%n de %total sellos", redeem: text = "Canjear premio", stamp: text = "Sellar visita") {
+part StampCard(store: text, owner: text, total: number = 10, stamps: number, reward: text, demo: text = "", title: text = "%owner's card", progress: text = "%n of %total · %left more for %reward", complete: text = "Complete! Earned %reward.", count: text = "%n of %total stamps", redeem: text = "Redeem reward", stamp: text = "Stamp a visit") {
   Custom KitWidget inputs(name: "stampCard", store: $store, owner: $owner, total: $total, stamps: $stamps, reward: $reward, demo: $demo, title: $title, progress: $progress, complete: $complete, count: $count, redeem: $redeem, stamp: $stamp) class("cx-stamp-host")
 }

package/registry/stat-band.muten

@@ -1,9 +1,9 @@
 # StatBand - a row of big numbers split by hairlines (two per row on a phone). Each Stat holds its value in the slot
 # (a Span, or a CountUp that counts up when it comes into view) and its label under it.
-#   StatBand { Stat(label: "citas al mes") { CountUp(to: "12,400") }  Stat(label: "tiendas") { Span "850" } }
+#   StatBand { Stat(label: "appointments a month") { CountUp(to: "12,400") }  Stat(label: "shops") { Span "850" } }
 # look: "tiles" puts each number on its own soft tile, left-aligned, for a card inside an app (what the bot did this
-# month: «0 reservas que cerró solo»); the default is the landing's band, centred between hairlines.
-#   StatBand(look: "tiles") { Stat(label: "reservas que cerró solo") { Span "12" }  Stat(label: "pedidos que tomó solo") { Span "5" } }
+# month: “0 bookings it closed by itself”); the default is the landing's band, centred between hairlines.
+#   StatBand(look: "tiles") { Stat(label: "bookings it closed by itself") { Span "12" }  Stat(label: "orders it took by itself") { Span "5" } }
 # While the numbers load, put a Skeleton in each Stat's slot.
 # shadcn-for-muten · parts · no deps · kit.css (.cx-statband).
 part StatBand(look: text = "") { Stack class("cx-statband") data(look: $look) { slot } }

package/registry/stat.muten

@@ -1,10 +1,10 @@
 # StatCard - one number for any use (sales, bookings, wait time…): label, the value, the change against a period and
 # its line. The icon goes in the slot (or leave it empty). `tone` says if the change is good (ok) or bad (bad) -
 # for a cost or a wait, going down is the good one.
-#   StatCard(label: "Ventas", value: "$1.284.000", delta: "▲ 12 %", tone: "ok", compare: "vs. semana pasada", series: "3,5,4,6,5,8,9") { Icon "lucide:credit-card" }
+#   StatCard(label: "Sales", value: "$1.284.000", delta: "▲ 12 %", tone: "ok", compare: "vs. last week", series: "3,5,4,6,5,8,9") { Icon "lucide:credit-card" }
 # A card that asks for something (what is owed, orders to confirm): `line` says what the number means and `to` + `cta`
 # is the one thing to do about it, written at the foot of the card.
-#   StatCard(label: "Por cobrar", value: "USD 305", line: "4 citas sin marcar como pagadas", to: "/close-day", cta: "Cerrar el día") { Icon "lucide:clock" }
+#   StatCard(label: "To collect", value: "USD 305", line: "4 appointments not marked as paid", to: "/close-day", cta: "Close the day") { Icon "lucide:clock" }
 # busy: true keeps the card's shape with a skeleton while the number loads (the label stays).
 # Lay several in a StatGrid. Spark draws the series alone: Spark(series: "3,5,4", tone: "success").
 # shadcn-for-muten · part + Custom (Spark.js) · kit.css (.cx-stat).
@@ -20,7 +20,7 @@ part StatCard(label: text, value: text = "", delta: text = "", tone: text = "ok"
         Skeleton() class("cx-stat-sk-l")
       }
       when not $busy {
-        Span "{$value}" class("cx-text") data(slot: "text", variant: "title")
+        Stack class("cx-text cx-stat-v") data(slot: "text", variant: "title") { CountUp(to: $value, roll: "change") }
         Span "{$line}" class("cx-text cx-stat-line") data(slot: "text", variant: "caption")
         Stack class("cx-stat-row cx-stat-delta") {
           Span "{$delta}" class("cn-badge cn-badge-variant-ghost group/badge") data(slot: "badge", variant: "status", tone: $tone)

package/registry/status-bar.muten

@@ -1,7 +1,7 @@
 # StatusBar - the thin line under an editor that says how things stand: the tool, the position, the size, the zoom,
 # whether it is saved. StatusSpacer pushes what follows to the right; an item can carry an icon.
-#   StatusBar { StatusItem(label: "Listo") { Icon "lucide:circle-check" }  StatusSpacer()  StatusItem(label: "1080 × 1350")  StatusItem(label: "100 %") }
+#   StatusBar { StatusItem(label: "Done") { Icon "lucide:circle-check" }  StatusSpacer()  StatusItem(label: "1080 × 1350")  StatusItem(label: "100 %") }
 # shadcn-for-muten · parts · no deps · kit.css (.cx-status).
-part StatusBar(label: text = "Estado") { Stack class("cx-status") data(slot: "status-bar") aria(role: "status", label: $label) { slot } }
+part StatusBar(label: text = "Status") { Stack class("cx-status") data(slot: "status-bar", trl: $label) aria(role: "status", label: $label) { slot } }
 part StatusItem(label: text) { Stack class("cx-status-item") { slot  Span "{$label}" class("cx-status-text") } }
 part StatusSpacer() { Stack class("cx-status-spacer") }

package/registry/stepper.muten

@@ -1,9 +1,9 @@
 # Stepper - where you are in a flow of a few steps. Horizontal: one short bar per step under its name, as the «Nueva
-# cita» modal shows it. Vertical: numbered circles joined by a line, each with what it asks. A done step fills its
+# appointment» modal shows it. Vertical: numbered circles joined by a line, each with what it asks. A done step fills its
 # bar (or shows a check); the current one is marked and read out as the current step.
-#   Stepper(count: 4, label: "Paso 2 de 4: Servicio") { Step(num: "1", label: "Cliente", state: "done")  Step(num: "2", label: "Servicio", state: "now") … }
-#   Stepper(count: 3, orientation: "vertical") { Step(num: "1", label: "Tu negocio", description: "Nombre y rubro", state: "done") … }
-# look "list" (vertical): a numbered list for «how it works», ruled rows and a round number, the current one filled.
+#   Stepper(count: 4, label: "Step 2 of 4: Service") { Step(num: "1", label: "Customer", state: "done")  Step(num: "2", label: "Service", state: "now") … }
+#   Stepper(count: 3, orientation: "vertical") { Step(num: "1", label: "Your business", description: "Nombre y rubro", state: "done") … }
+# look "list" (vertical): a numbered list for “how it works”, ruled rows and a round number, the current one filled.
 # state: done | now | "" (to come). shadcn-for-muten · part · no deps · kit.css (.cx-stepper).
 part Stepper(count: number, orientation: text = "horizontal", label: text = "", look: text = "") {
   Stack class("cx-stepper cx-stp") data(slot: "stepper", orientation: $orientation, look: $look) style(n: "{$count}") aria(role: "list", label: $label) { slot }

package/registry/store-qr.js

@@ -1,5 +1,5 @@
 // StoreQr (muten Custom) - the kit's storeQr (kit/menus.js).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/menus.js')]).then(([core, m]) => m.storeQr(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/menus.js')]).then(([core, m]) => core.relang(el, inputs, () => m.storeQr(el, inputs, core, on)));
   return () => {};
 }

package/registry/store-qr.muten

@@ -1,5 +1,5 @@
-# StoreQr - the shop's QR with its mark in the middle, the name, the link and «Copiar enlace» (falls back to
+# StoreQr - the shop's QR with its mark in the middle, the name, the link and “Copiar enlace” (falls back to
 # selecting the link when the clipboard says no).
-#   StoreQr(url: "https://storio.ink/el-roble", name: "Barbería El Roble", mark: "ER")
+#   StoreQr(url: "https://storio.ink/el-roble", name: "El Roble Barbershop", mark: "ER")
 # shadcn-for-muten · Custom (kit menus + vendored qrcode-generator, MIT) · host JS store-qr.js.
 part StoreQr(url: text, name: text = "", mark: text = "") { Custom StoreQr inputs(url: $url, name: $name, mark: $mark) class("cx-qr-host") }

package/registry/swatch.muten

@@ -4,7 +4,7 @@
 #   action pick(c: text) mutates active { active.set(c) }
 #   SwatchPalette(label: "Colores recientes") { each colors as c { Swatch(color: c, current: active, onSelect: pick) } }
 # size: sm | default | lg. shadcn-for-muten · part · no deps · kit.css (.cx-swatch).
-part SwatchPalette(label: text = "Colores") { Stack class("cx-swatches-row") aria(role: "group", label: $label) { slot } }
+part SwatchPalette(label: text = "Colors") { Stack class("cx-swatches-row") data(trl: $label) aria(role: "group", label: $label) { slot } }
 part Swatch(color: text, current: text, onSelect: action, size: text = "default") {
   Button -> $onSelect($color) class("cx-swatch") data(size: $size, name: $color) aria(pressed: $color == $current, label: $color) style(bg: "{$color}")
 }

package/registry/switch.muten

@@ -1,16 +1,17 @@
 # Switch - on/off; the page owns the bool and the action. SwitchRow is the settings line: label, switch, the why.
-#   Switch(on: dark, onToggle: toggleDark, label: "Modo oscuro")
-#   SwitchRow(on: home, onToggle: toggleHome, label: "También a domicilio", description: "Pide la verificación de identidad…")
+#   Switch(on: dark, onToggle: toggleDark, label: "Dark mode")
+#   SwitchRow(on: home, onToggle: toggleHome, label: "Also at home", description: "Ask for identity verification…")
+# disabled: a bool (a state or a getter) - it shows its state and cannot be flipped (a locked choice, a prerequisite missing).
 # size: default | sm. shadcn-for-muten · part · no deps · Nova (.cn-switch reads data-checked / data-unchecked).
-part Switch(on: bool, onToggle: action, label: text = "", size: text = "default") {
-  Button -> $onToggle class("cn-switch group/switch") data(slot: "switch", size: $size, checked: $on, unchecked: not $on) aria(role: "switch", checked: $on, label: $label) {
+part Switch(on: bool, onToggle: action, label: text = "", size: text = "default", disabled: bool = false) {
+  Button -> $onToggle class("cn-switch group/switch") data(slot: "switch", size: $size, checked: $on, unchecked: not $on) aria(role: "switch", checked: $on, label: $label) disabled when $disabled {
     Span "" class("cn-switch-thumb") data(slot: "switch-thumb", checked: $on, unchecked: not $on)
   }
 }
-part SwitchRow(on: bool, onToggle: action, label: text, description: text = "") {
-  Stack class("cx-switch-row") {
+part SwitchRow(on: bool, onToggle: action, label: text, description: text = "", disabled: bool = false) {
+  Stack class("cx-switch-row") data(disabled: $disabled) {
     Span "{$label}" class("cn-label") data(slot: "label")
-    Switch(on: $on, onToggle: $onToggle, label: $label)
+    Switch(on: $on, onToggle: $onToggle, label: $label, disabled: $disabled)
     Text "{$description}" class("cx-switch-why")
   }
 }

package/registry/table-view.muten

@@ -1,10 +1,10 @@
 # TableView - the DataTable: filters as data (search · facet · date · range) with counts and chips, rows that fade /
 # slide / enter, the height easing, sort by header, selection with a bulk bar in its own space, the phone's
-# «buscar + Filtros» sheet, and Items when its box is narrow. (`DataTable` is muten's raw table primitive.)
-#   TableView(columns: @cols, rows: @appointments, filters: @filters, statuses: @statuses, bulk: @bulk, one: "cita", many: "citas", onAction: act)
+# “buscar + Filtros” sheet, and Items when its box is narrow. (`DataTable` is muten's raw table primitive.)
+#   TableView(columns: @cols, rows: @appointments, filters: @filters, statuses: @statuses, bulk: @bulk, one: "appointment", many: "appointments", onAction: act)
 # columns {key, label, type: person|text|date|status|money, sub} · filters {id, type, label, key | keys} ·
 # statuses {id, label, tone} · bulk {id, label, variant, set {…}} → onAction gets {"action", "ids"}.
 # shadcn-for-muten · part over KitWidget (kit core + kit/table.js).
-part TableView(columns: list, rows: list, filters: list, statuses: list, bulk: list, one: text = "fila", many: text = "filas", onAction: action) {
+part TableView(columns: list, rows: list, filters: list, statuses: list, bulk: list, one: text = "row", many: text = "rows", onAction: action) {
   Custom KitWidget inputs(name: "table", columns: $columns, rows: $rows, filters: $filters, statuses: $statuses, bulk: $bulk, one: $one, many: $many) on(action: $onAction) class("cx-table-host")
 }

package/registry/tabs-behavior.js

@@ -6,9 +6,17 @@ export function mount(el) {
   const ind = document.createElement('span'); ind.className = 'cx-tab-ind'; ind.setAttribute('aria-hidden', 'true'); list.prepend(ind);
   const tabs = () => [...list.querySelectorAll(':scope > .cx-tab')];
   const chosen = () => tabs().find((t) => t.getAttribute('aria-selected') === 'true' || t.getAttribute('aria-pressed') === 'true');
-  let first = true;
+  let first = true, lastIdx = -1;
+  // once the person switches (never on the first paint), the panels' container learns it and which way they went, so
+  // the new panel comes in from that side (kit.css “Tab panels”)
+  const mark = (t) => {
+    const k = tabs().indexOf(t); const box = list.parentElement;
+    if (lastIdx >= 0 && k !== lastIdx && box) { box.setAttribute('data-tabs-moved', ''); box.setAttribute('data-tabs-dir', k < lastIdx ? 'back' : 'forward'); }
+    lastIdx = k;
+  };
   const place = () => {
     const t = chosen(); if (!t) { ind.style.opacity = '0'; return; }
+    mark(t);
     ind.style.opacity = '';
     if (first) ind.style.transition = 'none';
     ind.style.left = t.offsetLeft + 'px'; ind.style.width = t.offsetWidth + 'px';

package/registry/tabs.muten

@@ -1,8 +1,8 @@
 # Tabs - the indicator slides from one tab to the next (260 ms). variant "" = segmented (a pill on a muted track),
 # "line" = an underline with a count per tab that scrolls sideways on a phone. Arrows, Home and End move between tabs.
 # The page owns the current value; TabsContent shows the panel of the current one.
-#   Tabs(label: "Periodo") { TabsTrigger(value: "day", current: period, label: "Hoy", onSelect: setPeriod)  TabsTrigger(value: "week", current: period, label: "Semana", onSelect: setPeriod) }
-#   Tabs(label: "Pedidos", variant: "line") { TabsTrigger(value: "new", current: lane, label: "Nuevos", count: "4", onSelect: setLane) … }
+#   Tabs(label: "Period") { TabsTrigger(value: "day", current: period, label: "Today", onSelect: setPeriod)  TabsTrigger(value: "week", current: period, label: "Week", onSelect: setPeriod) }
+#   Tabs(label: "Orders", variant: "line") { TabsTrigger(value: "new", current: lane, label: "New", count: "4", onSelect: setLane) … }
 #   TabsContent(value: "new", current: lane) { … }
 # shadcn-for-muten · part + Custom (TabsBehavior: the indicator + keys) · kit.css (.cx-tabs).
 part Tabs(label: text, variant: text = "") {

package/registry/tag-input.js

@@ -1,5 +1,5 @@
 // TagInput (muten Custom) - the kit's tags field (kit/collections.js tagInput): chips in/out, height eases, a cap.
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => c.tagInput(el, { ...inputs, tags: inputs.value ?? inputs.tags }, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => core.relang(el, inputs, () => c.tagInput(el, { ...inputs, tags: inputs.value ?? inputs.tags }, core, on)));
   return () => {};
 }

package/registry/tag-input.muten

@@ -1,7 +1,7 @@
 # TagInput - tags as chips: Enter or a comma adds, Backspace marks then removes the last, a repeated tag flashes the
 # one already there, suggestions to tap, a cap with its count. The value is comma-joined text.
-#   TagInput(value: tags, label: "Etiquetas del servicio", suggestions: "Fade,Navaja,Niños", max: 8, hint: "Ayudan a que te encuentren.", onChange: setTags)
+#   TagInput(value: tags, label: "Service tags", suggestions: "Fade,Razor,Kids", max: 8, hint: "They help people find you.", onChange: setTags)
 # shadcn-for-muten · Custom (kit collections) · host JS tag-input.js.
-part TagInput(value: text, placeholder: text = "", label: text = "Etiquetas", suggestions: text = "", max: number = 8, hint: text = "", onChange: action) {
+part TagInput(value: text, placeholder: text = "", label: text = "Tags", suggestions: text = "", max: number = 8, hint: text = "", onChange: action) {
   Custom TagInput inputs(value: $value, placeholder: $placeholder, label: $label, suggestions: $suggestions, max: $max, hint: $hint) on(change: $onChange) class("cx-tags-host")
 }

package/registry/text.muten

@@ -1,7 +1,7 @@
 # Text (part name Txt - `Text` is a muten primitive) - the one text atom, in a few roles. Everything that shows words
 # in the kit is built from it, so a role changes in one place.
-#   Txt(value: "Corte clásico", variant: "heading")
-#   Txt(value: "{count} citas", variant: "muted")
+#   Txt(value: "Classic cut", variant: "heading")
+#   Txt(value: "{count} appointments", variant: "muted")
 # variant: body | title | heading | strong | label | muted | caption   (default: body)
 # shadcn-for-muten · part · no deps · styled by kit.css (.cx-text).
 part Txt(value: text, variant: text = "body") { Span "{$value}" class("cx-text") data(slot: "text", variant: $variant) }

package/registry/time-field.js

@@ -1,5 +1,5 @@
 // TimeField (muten Custom) - the kit's timeField (kit/dates.js).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/dates.js')]).then(([core, m]) => m.timeField(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/dates.js')]).then(([core, m]) => core.relang(el, inputs, () => m.timeField(el, inputs, core, on)));
   return () => {};
 }

package/registry/time-field.muten

@@ -1,6 +1,6 @@
-# TimeField - a field-like button with the time (and mañana/tarde); it opens the hour / minute wheels.
-#   TimeField(label: "Hora", value: "10:30", from: 9, to: 19, step: 15, onChange: setTime)      → "HH:MM"
+# TimeField - a field-like button with the time (and AM/PM); it opens the hour / minute wheels.
+#   TimeField(label: "Time", value: "10:30", from: 9, to: 19, step: 15, onChange: setTime)      → "HH:MM"
 # shadcn-for-muten · Custom (kit dates) · host JS time-field.js.
-part TimeField(label: text = "Hora", value: text = "", from: number = 9, to: number = 19, step: number = 15, onChange: action) {
+part TimeField(label: text = "Time", value: text = "", from: number = 9, to: number = 19, step: number = 15, onChange: action) {
   Custom TimeField inputs(label: $label, value: $value, from: $from, to: $to, step: $step) on(change: $onChange) class("cx-tf-host")
 }

package/registry/timeline.muten

@@ -1,12 +1,12 @@
 # Timeline - what happened, in order: a dot and a line join the events; the last one (where things stand now) is
 # marked. Each event has what happened, when, and an optional detail.
-#   Timeline(label: "Historial del pedido") {
-#     TimelineItem(title: "Pedido recibido", time: "hoy · 10:38")
-#     TimelineItem(title: "Esperando tu revisión", time: "ahora", state: "now")
+#   Timeline(label: "Order history") {
+#     TimelineItem(title: "Order received", time: "today · 10:38")
+#     TimelineItem(title: "Waiting for your review", time: "now", state: "now")
 #   }
 # state: "" (past) | now (where it stands) | next (still to come, faded).
 # shadcn-for-muten · part · no deps · kit.css (.cx-timeline).
-part Timeline(label: text = "") { Stack class("cx-timeline cx-tl") aria(role: "list", label: $label) { slot } }
+part Timeline(label: text = "") { Stack class("cx-timeline cx-tl") aria(role: "list", label: $label) { slot  ListMotion() } }
 part TimelineItem(title: text, time: text = "", description: text = "", state: text = "") {
   Stack class("cx-tl-item") data(state: $state) aria(role: "listitem") {
     Span "{$title}" class("cx-text cx-tl-title") data(slot: "text", variant: "body")

package/registry/toaster.muten

@@ -2,8 +2,8 @@
 # hovering the pile fans them out and pauses them; each one leaves on its own (duration) or with its ×, and can carry
 # one action (Deshacer). The page bumps a counter to show one, with the title it has at that moment:
 #   state { toasts = 0 : number  toastTitle = "" : text }
-#   action saved() mutates toasts, toastTitle { toastTitle.set("Cita creada")  toasts.set(toasts + 1) }
-#   Toaster(trigger: toasts, title: toastTitle, description: "Jueves 9 a las 10:30", action: "Deshacer", onAction: undo)
+#   action saved() mutates toasts, toastTitle { toastTitle.set("Appointment created")  toasts.set(toasts + 1) }
+#   Toaster(trigger: toasts, title: toastTitle, description: "Thursday 9 at 10:30", action: "Undo", onAction: undo)
 # For what the person just did on this screen (saving, saved) the Island is lighter; a toast is for news that can wait.
 # shadcn-for-muten · Custom · kit.css (.pg-toasts, .pg-toast) · host JS toaster.js.
 part Toaster(trigger: number, title: text, description: text = "", action: text = "", duration: number = 5000, onAction: action) {

package/registry/toggle-group.muten

@@ -1,7 +1,7 @@
 # ToggleGroup - toggles in a row (shadcn Nova). One choice: ToggleGroupItem with the page's text state. Several
 # choices: put Toggle parts inside, each with its own bool. spacing "0" joins them into one control; "2" separates.
 #   state { align = "left" : text }   action setAlign(v: text) mutates align { align.set(v) }
-#   ToggleGroup(label: "Alineación") { ToggleGroupItem(value: "left", current: align, onSelect: setAlign, label: "Izquierda") { Icon "lucide:align-left" } … }
+#   ToggleGroup(label: "Alignment") { ToggleGroupItem(value: "left", current: align, onSelect: setAlign, label: "Left") { Icon "lucide:align-left" } … }
 #   ToggleGroup(variant: "outline", spacing: "2") { Toggle(on: bold, onToggle: b, variant: "outline") { Icon "lucide:bold" } … }
 # variant: default | outline · size: sm | default | lg · spacing: 0 | 1 | 2 · orientation: horizontal | vertical
 # shadcn-for-muten · part · no deps · Nova (.cn-toggle-group) + kit.css (joined/vertical).