@muten/shadcn 0.1.14 → 0.2.0

package/registry/navigation-menu.muten

@@ -1,11 +1,11 @@
 # NavigationMenu - a site's top navigation: words that open a panel of links on hover (or tap, or focus) and plain
 # links. Once a panel is open, resting on the next word switches to its panel.
-#   NavigationMenu(label: "Principal") {
-#     NavMenuItem { NavMenuTrigger(label: "Producto")  NavMenuContent { NavMenuLink(title: "Agenda", description: "…", to: "/agenda") … } }
-#     NavMenuItemLink(label: "Precios", to: "/precios")
+#   NavigationMenu(label: "Primary") {
+#     NavMenuItem { NavMenuTrigger(label: "Product")  NavMenuContent { NavMenuLink(title: "Schedule", description: "…", to: "/agenda") … } }
+#     NavMenuItemLink(label: "Prices", to: "/precios")
 #   }
 # shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-navigation-menu-*) + kit.css.
-part NavigationMenu(label: text = "Principal") { Nav class("cn-navigation-menu cx-navmenu") data(slot: "navigation-menu") aria(label: $label) { slot } }
+part NavigationMenu(label: text = "Main") { Nav class("cn-navigation-menu cx-navmenu") data(slot: "navigation-menu", trl: $label) aria(label: $label) { slot } }
 part NavMenuItem() { Stack class("cx-ov") data(slot: "navigation-menu-item") { slot  OverlayBehavior(kind: "navmenu") } }
 part NavMenuTrigger(label: text) { Stack class("cx-ov-trigger") { Button class("cn-navigation-menu-trigger cx-navmenu-trigger") data(slot: "navigation-menu-trigger") { Span "{$label}"  Icon "lucide:chevron-down" class("cn-navigation-menu-trigger-icon") } } }
 part NavMenuContent(width: text = "26rem", columns: number = 2) { Stack class("cn-navigation-menu-content cx-ov-content cx-navmenu-panel") data(slot: "navigation-menu-content", align: "start") style(w: "{$width}", cols: "{$columns}") { slot } }

package/registry/navpill.muten

@@ -1,16 +1,16 @@
 # NavPill - a landing page's floating glass bar: it stays on top as you scroll, firming up (more opaque, a shadow)
 # once the page moves. The logo on the left, links and the call to action on the right (they lay out apart).
-#   NavPill(label: "Principal") {
+#   NavPill(label: "Primary") {
 #     Stack class("cx-hstack") { Icon "lucide:store"  Span "Storio" class("font-semibold") }
-#     Stack class("cx-hstack") { Link "Precios" -> "/precios"  LinkBtn(to: "/signup", size: "sm") { Span "Crear mi tienda" } }
+#     Stack class("cx-hstack") { Link "Prices" -> "/precios"  LinkBtn(to: "/signup", size: "sm") { Span "Create my shop" } }
 #   }
 # look "tray": a tray in the muted fill at rest that turns to glass once the page moves; the logo and NavLinks sit
 # together on the left, a Span class("cx-grow") pushes the rest right, and the call to action (class "cx-nav-cta")
 # turns primary as you scroll. On a phone NavLinks and anything with class "cx-nav-hide-sm" fold away and a Btn with
 # class "cx-nav-menu" shows instead.
-#   NavPill(look: "tray") { Image "~/logo.svg"  NavLinks { Link "Precios" -> "/pricing" }  Span class("cx-grow")
-#     Link "Entrar" -> "/login" class("cx-nav-hide-sm")  LinkBtn(to: "/signup") class("cx-nav-cta") { Span "Crear mi tienda" }
-#     Btn(variant: "ghost", size: "icon", label: "Menú", onClick: openMenu) class("cx-nav-menu") { Icon "lucide:menu" } }
+#   NavPill(look: "tray") { Image "~/logo.svg"  NavLinks { Link "Prices" -> "/pricing" }  Span class("cx-grow")
+#     Link "Sign in" -> "/login" class("cx-nav-hide-sm")  LinkBtn(to: "/signup") class("cx-nav-cta") { Span "Create my shop" }
+#     Btn(variant: "ghost", size: "icon", label: "Menu", onClick: openMenu) class("cx-nav-menu") { Icon "lucide:menu" } }
 # shadcn-for-muten · part · no deps · kit.css (.cx-navpill, scroll-driven where the browser supports it).
-part NavPill(label: text = "Principal", look: text = "") { Stack class("cx-navpill-wrap") data(look: $look) { Nav class("cx-navpill") data(look: $look) aria(label: $label) { slot } } }
+part NavPill(label: text = "Main", look: text = "") { Stack class("cx-navpill-wrap") data(look: $look) { Nav class("cx-navpill") data(look: $look, trl: $label) aria(label: $label) { slot } } }
 part NavLinks() { Stack class("cx-nav-links") { slot } }

package/registry/new-appointment.js

@@ -1,4 +1,4 @@
-// NewAppointment (muten Custom) - the kit's 4-step «Nueva cita» (kit/structure.js) in the adaptive modal. It opens
+// NewAppointment (muten Custom) - the kit's 4-step “New appointment” (kit/structure.js) in the adaptive modal. It opens
 // when `open` turns true; closing it in any way fires close, creating fires create(json {client, service, day, hour}).
 export function mount(el, inputs, on) {
   let wiz = null, was = false;

package/registry/new-appointment.muten

@@ -1,10 +1,10 @@
-# NewAppointment - «Nueva cita» in 4 steps inside the adaptive modal, built only from atoms: a Stepper under the
+# NewAppointment - “New appointment” in 4 steps inside the adaptive modal, built only from atoms: a Stepper under the
 # title, the client (search + choice list), the service (choice list with price), the day (tiles) and the hour, and
-# the summary. «Siguiente» stays disabled until the step is answered; steps slide sideways and the height eases.
+# the summary. “Next” stays disabled until the step is answered; steps slide sideways and the height eases.
 # The page owns `open` (true opens it); onClose fires however it closes, onCreate gets json {client, service, day, hour}.
-#   NewAppointment(open: creating, clients: @clients, services: @services, hours: @slots, closed: @closedDays, note: "Le llega la confirmación por WhatsApp.", onCreate: created, onClose: closeNew)
+#   NewAppointment(open: creating, clients: @clients, services: @services, hours: @slots, closed: @closedDays, note: "They get the confirmation on WhatsApp.", onCreate: created, onClose: closeNew)
 # clients {name, description} · services {name, duration, price, icon} · hours ["09:00", …] · closed [0] (weekdays).
 # shadcn-for-muten · Custom (kit/structure.js) · the kit's adaptive modal.
-part NewAppointment(open: bool, title: text = "Nueva cita", clients: list, services: list, hours: list, closed: list, note: text = "", onCreate: action, onClose: action) {
+part NewAppointment(open: bool, title: text = "New appointment", clients: list, services: list, hours: list, closed: list, note: text = "", onCreate: action, onClose: action) {
   Custom NewAppointment inputs(open: $open, title: $title, clients: $clients, services: $services, hours: $hours, closed: $closed, note: $note) on(create: $onCreate, close: $onClose) class("cx-wizard-host")
 }

package/registry/number-field.js

@@ -1,5 +1,5 @@
 // NumberField (muten Custom) - a number with − and + inside one Nova InputGroup. inputs: value, min, max, step,
-// prefix (a short label inside, like «X»), unit (after the number, like «min»), label (accessible name).
+// prefix (a short label inside, like “X”), unit (after the number, like “min”), label (accessible name).
 // handlers: input(value). Clamps to [min, max]; buttons, arrow keys and the wheel (while focused) step; holding a
 // button repeats. The buttons switch off at the ends.
 const ICON = { minus: '<path d="M5 12h14"/>', plus: '<path d="M5 12h14"/><path d="M12 5v14"/>' };
@@ -8,13 +8,15 @@ export function mount(el, inputs, on) {
   const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
   let min = num(inputs.min, -Infinity), max = num(inputs.max, Infinity), step = num(inputs.step, 1) || 1;
   const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
-  const btn = (k, name) => `<button type="button" data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-nf-btn" data-step="${k}" aria-label="${name}">${svg(k)}</button>`;
+  const btn = (k, name) => `<button type="button" data-slot="button" class="cn-button cn-button-variant-ghost cn-button-size-icon-xs group/button cx-nf-btn" data-step="${k}" aria-label="${name}" data-trl="${name}">${svg(k)}</button>`;
   el.innerHTML = `<div data-slot="input-group" role="group" class="cn-input-group group/input-group cx-nf">
     ${inputs.prefix ? `<div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-start cx-nf-prefix">${esc(inputs.prefix)}</div>` : ''}
-    <input data-slot="input-group-control" class="cn-input cn-input-group-input cx-num cx-nf-input" inputmode="decimal" aria-label="${esc(inputs.label || inputs.prefix || 'Número')}" role="spinbutton">
+    <input data-slot="input-group-control" class="cn-input cn-input-group-input cx-num cx-nf-input" inputmode="decimal" aria-label="${esc(inputs.label || inputs.prefix || 'Number')}" data-trl="${esc(inputs.label || inputs.prefix || 'Number')}" role="spinbutton">
     ${inputs.unit ? `<div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end cx-nf-unit">${esc(inputs.unit)}</div>` : ''}
-    <div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end cx-nf-steps">${btn('minus', 'Menos')}${btn('plus', 'Más')}</div>
+    <div data-slot="input-group-addon" class="cn-input-group-addon cn-input-group-addon-align-inline-end cx-nf-steps">${btn('minus', 'Less')}${btn('plus', 'More')}</div>
   </div>`;
+  if (inputs.lang) el.setAttribute('lang', inputs.lang);
+  import('@muten/shadcn/registry/kit/i18n.js').then((m) => m.localizeTree(el));
   const input = el.querySelector('input'), dec = el.querySelector('[data-step="minus"]'), inc = el.querySelector('[data-step="plus"]');
   const clamp = (v) => Math.min(max, Math.max(min, v));
   const decimals = (String(step).split('.')[1] || '').length;

package/registry/number-field.muten

@@ -1,7 +1,7 @@
 # NumberField - a number you nudge: − and + inside one field, arrows (Shift = ×10), the wheel while focused, and a
 # held button that repeats. Clamped to [min, max]; the button at an end switches off. The page owns the value.
 #   state { minutes = 30 : number }   action setMinutes(v: number) mutates minutes { minutes.set(v) }
-#   NumberField(value: minutes, min: 5, max: 240, step: 5, unit: "min", label: "Duración", onInput: setMinutes)
+#   NumberField(value: minutes, min: 5, max: 240, step: 5, unit: "min", label: "Duration", onInput: setMinutes)
 #   NumberField(value: x, min: 0, max: 1920, prefix: "X", onInput: setX)
 # shadcn-for-muten · Custom · Nova (.cn-input-group) + kit.css (.cx-nf) · host JS number-field.js.
 part NumberField(value: number, min: number, max: number, step: number = 1, prefix: text = "", unit: text = "", label: text = "", onInput: action) {

package/registry/order-board.js

@@ -1,6 +1,6 @@
 // OrderBoard / OrderCards (muten Custom) - the kit's order Board and card (kit/board.js). inputs: lanes, cards, sizes;
 // handlers change(json [{id, lane}]) · action(json {id, action}).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/board.js')]).then(([core, b]) => b.orderBoard(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/board.js')]).then(([core, b]) => core.relang(el, inputs, () => b.orderBoard(el, inputs, core, on)));
   return () => {};
 }

package/registry/order-board.muten

@@ -1,8 +1,8 @@
 # OrderBoard - lanes and cards are data. Each card groups its information by what it is about and orders it by what
 # needs you first: who and how much (the contact channel they asked for on the right), what waits for your decision
 # (tonal icon Buttons with their Indicator; tapping opens it in the modal), the products, the payment (total, short
-# state, and the button that fits: «Revisar comprobante», «Ver recibo de Stripe»), the delivery (time, progress,
-# «Ver entrega»), the note, and the one next step. Tapping a button never starts a drag. Drag a card with the mouse;
+# state, and the button that fits: “Revisar comprobante”, “See Stripe receipt”), the delivery (time, progress,
+# “See delivery”), the note, and the one next step. Tapping a button never starts a drag. Drag a card with the mouse;
 # on a phone hold it a moment. Drag the board's background (or swipe) to see the side lanes; carrying a card to the
 # edge scrolls it. Keyboard: Space lifts, arrows move, Space drops, Esc puts it back.
 #   OrderBoard(lanes: @lanes, cards: @orders, onChange: moved, onAction: act)

package/registry/order-play.muten

@@ -1,10 +1,10 @@
 # OrderPlay - an order shown, not used: who ordered, the products with their photos, how it is paid and delivered,
 # and the one next step. In a loop the step is pressed and the order moves on (its badge and the button change).
 # BookingPlay's twin, for a landing's bento: the same sheet, the same rhythm. The real board is OrderBoard.
-#   OrderPlay(who: "Diego Paredes", sub: "#1046 · hace 2 min", status: "Nuevo", statusNext: "Preparando",
-#             pay: "Efectivo al retirar", total: "USD 32", delivery: "Retira hoy · 6:00 PM", cta: "Preparar",
-#             ctaNext: "Avisar que está listo", label: "Un pedido como te llega") {
-#     OrderPlayItem(name: "Pomada mate", detail: "1 × USD 14", price: "USD 14", photo: "/img/pomada.webp")
+#   OrderPlay(who: "Diego Paredes", sub: "#1046 · hace 2 min", status: "New", statusNext: "Preparing",
+#             pay: "Cash on pickup", total: "USD 32", delivery: "Pickup today · 6:00 PM", cta: "Prepare",
+#             ctaNext: "Let them know it is ready", label: "An order as it reaches you") {
+#     OrderPlayItem(name: "Matte pomade", detail: "1 × USD 14", price: "USD 14", photo: "/img/pomada.webp")
 #   }
 # photo: the client's face (empty = their initial).
 # Reduced motion: the order as it arrives. shadcn-for-muten · part · no deps · kit.css (.cx-odp).

package/registry/pagination-nav.js

@@ -1,6 +1,6 @@
 // PaginationNav (muten Custom) - server pages' nav (kit/collections.js paginationNav): 7 fixed slots, range line.
 export function mount(el, inputs, on) {
   let update = null;
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => { update = c.paginationNav(el, inputs, core, on); });
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/collections.js')]).then(([core, c]) => { update = core.relang(el, inputs, () => (update = c.paginationNav(el, inputs, core, on))); });
   return (next) => update?.(next);
 }

package/registry/pagination-nav.muten

@@ -1,8 +1,8 @@
 # PaginationNav - pages that come from the server: always 7 slots once there are more than 7 pages (nothing slides),
-# «Página n de N» on a phone, and «41–50 de 237 clientes». The page owns the page number and loads the rows; while it
+# “Page n of N” on a phone, and “41–50 of 237 customers”. The page owns the page number and loads the rows; while it
 # loads, give the list class("cx-pg-list") data(loading: busy) so the old page dims in place (nothing changes size).
-#   PaginationNav(total: 237, per: 10, page: page, noun: "clientes", onPage: loadPage)
+#   PaginationNav(total: 237, per: 10, page: page, noun: "customers", onPage: loadPage)
 # shadcn-for-muten · Custom (kit collections) · host JS pagination-nav.js.
-part PaginationNav(total: number, per: number = 10, page: number, noun: text = "resultados", onPage: action) {
+part PaginationNav(total: number, per: number = 10, page: number, noun: text = "results", onPage: action) {
   Custom PaginationNav inputs(total: $total, per: $per, page: $page, noun: $noun) on(page: $onPage) class("cx-pgnav-host")
 }

package/registry/pagination.muten

@@ -1,12 +1,12 @@
 # Pagination (links) - pages that are routes of their own (a blog, a catalog that can be shared by URL): previous,
-# the numbers with the current one outlined, «…», next. For pages loaded from the server inside one screen use
+# the numbers with the current one outlined, “…”, next. For pages loaded from the server inside one screen use
 # PaginationNav.
 #   Pagination { PaginationPrevious(to: "/blog/1")  PaginationLink(label: "1", to: "/blog/1", page: 1, current: 2)  PaginationLink(label: "2", to: "/blog/2", page: 2, current: 2)  PaginationEllipsis()  PaginationNext(to: "/blog/3") }
 # shadcn-for-muten · parts · no deps · Nova (.cn-pagination-*).
-part Pagination(label: text = "Páginas") { Nav class("cn-pagination cx-pagination-links") data(slot: "pagination") aria(label: $label) { Stack class("cn-pagination-content cx-pl-row") data(slot: "pagination-content") { slot } } }
+part Pagination(label: text = "Pages") { Nav class("cn-pagination cx-pagination-links") data(slot: "pagination", trl: $label) aria(label: $label) { Stack class("cn-pagination-content cx-pl-row") data(slot: "pagination-content") { slot } } }
 part PaginationLink(label: text, to: text, page: number, current: number) {
   Link "{$label}" -> "{$to}" class("cn-button cn-button-size-icon group/button cx-pl-num", "cn-button-variant-outline" when $page == $current, "cn-button-variant-ghost" when $page != $current) data(slot: "pagination-link") aria(current: $page == $current)
 }
-part PaginationPrevious(to: text, label: text = "Anterior") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-previous") data(slot: "pagination-previous") { Icon "lucide:chevron-left"  Span "{$label}" class("cn-pagination-previous-text") } }
-part PaginationNext(to: text, label: text = "Siguiente") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-next") data(slot: "pagination-next") { Span "{$label}" class("cn-pagination-next-text")  Icon "lucide:chevron-right" } }
+part PaginationPrevious(to: text, label: text = "Previous") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-previous") data(slot: "pagination-previous") { Icon "lucide:chevron-left"  Span "{$label}" class("cn-pagination-previous-text") data(tr: $label) } }
+part PaginationNext(to: text, label: text = "Next") { Link -> "{$to}" class("cn-button cn-button-variant-ghost cn-button-size-default group/button cn-pagination-next") data(slot: "pagination-next") { Span "{$label}" class("cn-pagination-next-text") data(tr: $label)  Icon "lucide:chevron-right" } }
 part PaginationEllipsis() { Stack class("cn-pagination-ellipsis cx-pl-more") data(slot: "pagination-ellipsis") aria(hidden: "true") { Icon "lucide:ellipsis" } }

package/registry/password-field.muten

@@ -1,3 +1,3 @@
-# PasswordField - a password with show/hide and its strength.   PasswordField(label: "Contraseña nueva")
+# PasswordField - a password with show/hide and its strength.   PasswordField(label: "New password")
 # shadcn-for-muten · part over KitWidget (kit core).
-part PasswordField(label: text = "Contraseña") { Custom KitWidget inputs(name: "password", label: $label) class("cx-pwd-host") }
+part PasswordField(label: text = "Password") { Custom KitWidget inputs(name: "password", label: $label) class("cx-pwd-host") }

package/registry/permission-matrix.muten

@@ -2,16 +2,16 @@
 # role locked (always allowed). A real table (muten's Table / Row / Cell): the header names line up over their column and
 # every checkbox sits in the middle of its cell. On a phone the columns narrow; the table scrolls sideways if it must.
 # The grants are a list of "permission:role" keys, so the page flips one with `toggle`:
-#   state  { granted = ["Ver:Editor", "Ver:Lector", "Editar:Editor"] : list<text> }
+#   state  { granted = ["View:Editor", "View:Viewer", "Edit:Editor"] : list<text> }
 #   action flip(key: text) mutates granted { granted.toggle(key) }
-#   PermissionMatrix(roles: @roles, rows: @permissions, granted: granted, locked: "Propietario", onToggle: flip)
+#   PermissionMatrix(roles: @roles, rows: @permissions, granted: granted, locked: "Owner", onToggle: flip)
 # roles {name} · rows {name, description}. label names the first column.
 # shadcn-for-muten · part · no deps · kit.css (.cx-perm).
-part PermissionMatrix(roles: list, rows: list, granted: list, locked: text = "", label: text = "Permiso", onToggle: action) {
+part PermissionMatrix(roles: list, rows: list, granted: list, locked: text = "", label: text = "Permission", onToggle: action) {
   Stack class("cx-dt-scroll cx-scroll cx-perms") {
     Table class("cx-dt cx-perm") {
       Row head {
-        Cell "{$label}"
+        Cell "{$label}" data(tr: $label)
         each $roles as role { Cell "{role.name}" class("cx-perm-c") }
       }
       each $rows as perm {

package/registry/phone-bar.muten

@@ -1,17 +1,17 @@
 # PhoneBar - the app's bar at the bottom of a phone, the shape Storio's app uses: three fixed cells. The left one holds
-# the menu (or a back), the middle one the screen's tools as grey icons, the right one the screen's «create» (black),
+# the menu (or a back), the middle one the screen's tools as grey icons, the right one the screen's “create” (black),
 # or nothing. A screen whose buttons live in its own toolbar on a desktop hands them here on a phone (AgendaLive with
 # phone: "nav" does), so the page stays clean and the hand finds them in the same place on every screen.
-#   PhoneBar(label: "Agenda") {
-#     PhoneBarCell(side: "left") { PhoneBarButton(label: "Menú", onClick: openMenu) { Icon "lucide:menu" } }
-#     PhoneBarCell() { PhoneBarButton(label: "Día anterior", onClick: prev) { Icon "lucide:chevron-left" } … }
-#     PhoneBarCell(side: "right") { PhoneBarButton(label: "Nueva cita", look: "primary", onClick: add) { Icon "lucide:plus" } }
+#   PhoneBar(label: "Schedule") {
+#     PhoneBarCell(side: "left") { PhoneBarButton(label: "Menu", onClick: openMenu) { Icon "lucide:menu" } }
+#     PhoneBarCell() { PhoneBarButton(label: "Previous day", onClick: prev) { Icon "lucide:chevron-left" } … }
+#     PhoneBarCell(side: "right") { PhoneBarButton(label: "New appointment", look: "primary", onClick: add) { Icon "lucide:plus" } }
 #   }
 # place: "" (fixed to the bottom of the screen, only below 64rem: a desktop keeps its toolbars) · "inline" (where it
 # sits, always) · "frame" (the bottom of its positioned box: a phone mockup). The page's scroll keeps room for it with
 # padding-bottom: var(--cx-pbar-space). Every button needs its label: icon-only on screen, named for a screen reader.
 # shadcn-for-muten · part · no deps · kit.css (.cx-pbar).
-part PhoneBar(label: text = "Acciones", place: text = "") { Nav class("cx-pbar") data(place: $place) aria(label: $label) { slot } }
+part PhoneBar(label: text = "Actions", place: text = "") { Nav class("cx-pbar") data(place: $place, trl: $label) aria(label: $label) { slot } }
 part PhoneBarCell(side: text = "center") { Stack class("cx-pbar-cell") data(side: $side) { slot } }
 part PhoneBarButton(label: text = "", onClick: action, look: text = "", current: bool = false) {
   Button -> $onClick class("cx-pbar-btn") data(look: $look) aria(label: $label, pressed: $current) { slot }

package/registry/phone-field.js

@@ -1,5 +1,5 @@
 // PhoneField (muten Custom) - a phone with its country (kit/values.js phoneField).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => v.phoneField(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => core.relang(el, inputs, () => v.phoneField(el, inputs, core, on)));
   return () => {};
 }

package/registry/phone-field.muten

@@ -2,6 +2,6 @@
 # leaving the field, and what is stored (E.164). onChange gets {e164, valid, country}.
 #   PhoneField(label: "WhatsApp", value: "3001234567", country: "CO", onChange: setPhone)
 # shadcn-for-muten · Custom (kit values) · host JS phone-field.js.
-part PhoneField(label: text = "Teléfono", value: text = "", country: text = "CO", onChange: action) {
+part PhoneField(label: text = "Phone", value: text = "", country: text = "CO", onChange: action) {
   Custom PhoneField inputs(label: $label, value: $value, country: $country) on(change: $onChange) class("cx-ph-host")
 }

package/registry/phone-shell.js

@@ -2,6 +2,6 @@
 // actions, three fixed bottom tabs with a count. tabs [{label, icon, badge}], rows [{tab, section, title, subtitle,
 // value}]; handler select(label).
 export function mount(el, inputs, on) {
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => s.phoneShell(el, inputs, core, on));
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/structure.js')]).then(([core, s]) => core.relang(el, inputs, () => s.phoneShell(el, inputs, core, on)));
   return () => {};
 }

package/registry/pill.muten

@@ -1,6 +1,6 @@
 # Pill - the chip over a hero title (what is new, who it is for): rounder and bigger than a Badge, with an icon and a
 # line of text inside. tone "brand" tints it with the skin's --selected.
-#   Pill { Icon "lucide:sparkles"  Span "Nuevo: cobra con tarjeta" }
-#   Pill(tone: "brand") { Span "Para barberías y salones" }
+#   Pill { Icon "lucide:sparkles"  Span "New: charge by card" }
+#   Pill(tone: "brand") { Span "For barbershops and salons" }
 # shadcn-for-muten · part · no deps · kit.css (.cx-pill).
 part Pill(tone: text = "") { Stack class("cx-pill") data(slot: "pill", tone: $tone) { slot } }

package/registry/plans.muten

@@ -1,4 +1,4 @@
 # Plans - plan cards with a monthly/yearly switch; the current plan is marked; going up is one tap, going down asks.
-#   Plans(plans: @plans, note: "2 meses gratis")   plans: {id, name, price {month, year}, desc, features, current}
+#   Plans(plans: @plans, note: "2 months free")   plans: {id, name, price {month, year}, desc, features, current}
 # shadcn-for-muten · part over KitWidget (kit core).
 part Plans(plans: list, note: text = "") { Custom KitWidget inputs(name: "plans", plans: $plans, note: $note) class("cx-plans-host") }

package/registry/popover.muten

@@ -2,7 +2,7 @@
 # content is anything: a small form, a filter, a detail. Trigger and content go inside, as in shadcn:
 #   Popover {
 #     PopoverTrigger { TriggerBtn { Span "Filtrar" } }
-#     PopoverContent(align: "start") { PopoverHeader(title: "Filtrar", description: "Lo que ves en la lista.")  … }
+#     PopoverContent(align: "start") { PopoverHeader(title: "Filtrar", description: "What you see in the list.")  … }
 #   }
 # PopoverClose is a button inside the content that closes it. align: start | center | end.
 # shadcn-for-muten · parts + Custom (OverlayBehavior) · Nova (.cn-popover-*) + kit.css (.cx-ov).
@@ -15,4 +15,4 @@ part PopoverHeader(title: text, description: text = "") {
     Text "{$description}" class("cn-popover-description") data(slot: "popover-description")
   }
 }
-part PopoverClose(label: text = "Listo", variant: text = "default") { Button "{$label}" class("cn-button cn-button-variant-{$variant} cn-button-size-sm group/button") data(ovclose: "true") }
+part PopoverClose(label: text = "Done", variant: text = "default") { Button "{$label}" class("cn-button cn-button-variant-{$variant} cn-button-size-sm group/button") data(ovclose: "true", tr: $label) }

package/registry/pricing.muten

@@ -1,15 +1,15 @@
 # Pricing - the plans of a landing page side by side: name, the line under it, the price and its period, what it
 # includes (PricingFeature) and its button. featured "on" raises the recommended one, with its badge.
 #   Pricing {
-#     PricingTier(name: "Gratis", price: "$0", period: "/mes", description: "Para empezar") { PricingFeature(label: "Tu tienda")  LinkBtn(to: "/signup", variant: "outline") { Span "Empezar" } }
-#     PricingTier(name: "Pro", price: "$12", period: "/mes", description: "Para crecer", featured: "on") { … }
+#     PricingTier(name: "Free", price: "$0", period: "/mes", description: "To start") { PricingFeature(label: "Your shop")  LinkBtn(to: "/signup", variant: "outline") { Span "Start" } }
+#     PricingTier(name: "Pro", price: "$12", period: "/mes", description: "To grow", featured: "on") { … }
 #   }
 # was: the old price, struck (a yearly discount) · note: how it is billed · lead: the line over the features.
 # For the plans inside the app (monthly/yearly, current plan) use Plans. shadcn-for-muten · parts · no deps · kit.css (.cx-pricing).
 part Pricing() { Stack class("cx-pricing") { slot } }
-part PricingTier(name: text, price: text, period: text = "", description: text = "", featured: text = "", badge: text = "Recomendado", was: text = "", note: text = "", lead: text = "") {
+part PricingTier(name: text, price: text, period: text = "", description: text = "", featured: text = "", badge: text = "Recommended", was: text = "", note: text = "", lead: text = "") {
   Stack class("cx-tier") data(featured: $featured) {
-    when $featured != "" { Span "{$badge}" class("cx-tier-badge") }
+    when $featured != "" { Span "{$badge}" class("cx-tier-badge") data(tr: $badge) }
     Stack class("cx-tier-head") { Span "{$name}" class("cx-tier-name")  Text "{$description}" class("cx-tier-desc") }
     Stack class("cx-tier-price") {
       Span "{$price}" class("cx-tier-amount")  Span "{$period}" class("cx-tier-period")

package/registry/product-play.muten

@@ -1,7 +1,7 @@
 # ProductPlay - a product sheet shown, not used: the photo, the shop, the name with its price, a line about it, its
-# options (one picked) and the quantity beside «Agregar». For a landing; a picture (aria-hidden), `label` says what.
-#   ProductPlay(photo: "/pomade.webp", shop: "Bruma Barbería", name: "Pomada mate", price: "USD 14",
-#               text: "Fijación media.", cta: "Agregar · USD 14", label: "…") {
+# options (one picked) and the quantity beside “Add”. For a landing; a picture (aria-hidden), `label` says what.
+#   ProductPlay(photo: "/pomade.webp", shop: "Bruma Barbershop", name: "Matte pomade", price: "USD 14",
+#               text: "Medium hold.", cta: "Add · USD 14", label: "…") {
 #     ProductPlayOption(label: "50 g")  ProductPlayOption(label: "100 g", on: "yes")
 #   }
 # shadcn-for-muten · part · no deps · kit.css (.cx-pdp).

package/registry/progress.muten

@@ -1,10 +1,10 @@
-# Progress - a determinate bar, value 0-100; it eases between values.  Progress(value: done, label: "Pasos hechos")
+# Progress - a determinate bar, value 0-100; it eases between values.  Progress(value: done, label: "Steps done")
 # tone: the bar's colour from the series palette: brand (the skin's accent) | coral | teal | amber | blue | pink. Empty: the
 # primary colour. A row of channels or a ranking is a Progress per row, each in its tone.
 #   Progress(value: 46, tone: "coral", label: "Instagram")
 # shadcn-for-muten · part · no deps · Nova (.cn-progress) + kit.css (the value rides --w).
-part Progress(value: number, label: text = "Progreso", tone: text = "") {
-  Stack class("cn-progress") data(slot: "progress", tone: $tone) aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
+part Progress(value: number, label: text = "Progress", tone: text = "") {
+  Stack class("cn-progress") data(slot: "progress", tone: $tone, trl: $label) aria(role: "progressbar", label: $label, valuemin: 0, valuemax: 100, valuenow: $value) {
     Stack class("cn-progress-indicator") data(slot: "progress-indicator") style(w: "{$value}%")
   }
 }

package/registry/queue.muten

@@ -1,3 +1,3 @@
-# Queue - a waitlist: offer a freed slot to the first in line, with a countdown.   Queue(title: "Lista de espera · sábado", people: @waiting)
+# Queue - a waitlist: offer a freed slot to the first in line, with a countdown.   Queue(title: "Waitlist · Saturday", people: @waiting)
 # shadcn-for-muten · part over KitWidget (kit core).
 part Queue(title: text, people: list, minutes: number = 10) { Custom KitWidget inputs(name: "queue", title: $title, people: $people, minutes: $minutes) class("cx-queue-host") }

package/registry/radio-group.muten

@@ -2,7 +2,7 @@
 # choice needs one. A real radio group: arrows move and pick, only the chosen one is in the Tab order. The page
 # owns the value:
 #   state { plan = "pro" : text }   action setPlan(v: text) mutates plan { plan.set(v) }
-#   RadioGroup(label: "Plan") { RadioGroupItem(value: "free", current: plan, label: "Gratis", onSelect: setPlan)  … }
+#   RadioGroup(label: "Plan") { RadioGroupItem(value: "free", current: plan, label: "Free", onSelect: setPlan)  … }
 # For choices that carry more (a price, a duration) use ChoiceList. orientation: vertical | horizontal.
 # shadcn-for-muten · part + Custom (RovingBehavior) · Nova (.cn-radio-group) + kit.css (checked state).
 part RadioGroup(label: text = "", orientation: text = "vertical") {

package/registry/rank-item.muten

@@ -1,8 +1,8 @@
-# RankItem - one row of a ranking or a short list of things to act on: a lead (the rank «1», or a count «13»), the title
+# RankItem - one row of a ranking or a short list of things to act on: a lead (the rank “1”, or a count “13”), the title
 # with an optional tag, a line under it, an optional bar for its share, and the value on the right. Whatever goes in
-# the slot sits at the end of the row (an action: «Agregar», «Responder»).
-#   RankItem(lead: "1", title: "Corte clásico", tag: "Servicio", sub: "38 veces", value: "USD 760", share: 100)
-#   RankItem(lead: "13", title: "«tinte»", sub: "No está entre tus servicios") { Btn(variant: "outline", size: "sm", onClick: addService) { Span "Agregar" } }
+# the slot sits at the end of the row (an action: “Add”, “Reply”).
+#   RankItem(lead: "1", title: "Classic cut", tag: "Service", sub: "38 times", value: "USD 760", share: 100)
+#   RankItem(lead: "13", title: "“dye”", sub: "Not among your services") { Btn(variant: "outline", size: "sm", onClick: addService) { Span "Add" } }
 # share: 0-100 draws a Progress under the title (leave it at -1 for none). tone: the bar's colour (series palette).
 # busy: true keeps the row's shape with a skeleton.
 # shadcn-for-muten · part · no deps · kit.css (.cx-rank) + Item, Badge, Progress.

package/registry/resizable.muten

@@ -10,7 +10,7 @@ part ResizablePanelGroup(orientation: text = "horizontal", label: text = "") {
 }
 part ResizablePanel(size: number = 50, min: number = 15) { Stack class("cx-rz-panel") data(slot: "resizable-panel", size: $size, min: $min) { slot } }
 part ResizableHandle(grip: text = "") {
-  Stack class("cn-resizable-handle cx-rz-handle") data(slot: "resizable-handle", grip: $grip) aria(role: "separator", label: "Cambiar el tamaño") {
+  Stack class("cn-resizable-handle cx-rz-handle") data(slot: "resizable-handle", grip: $grip, trl: "Resize") aria(role: "separator", label: "Resize") {
     when $grip != "" { Span "" class("cn-resizable-handle-icon") }
   }
 }

package/registry/row-menu.js

@@ -1,5 +1,5 @@
 // RowMenu (muten Custom) - the kit's rowMenu (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.rowMenu(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.rowMenu(el, inputs, core, on)));
   return () => {};
 }

package/registry/row-menu.muten

@@ -1,5 +1,5 @@
 # RowMenu - the ⋯ of a row: a menu with arrows, Home/End, type-ahead, Esc back to the button. Put it in ItemActions.
-#   RowMenu(label: "Opciones de Corte clásico", items: @rowActions, onPick: act)
+#   RowMenu(label: "Classic cut options", items: @rowActions, onPick: act)
 #   items {id, label, icon (a kit icon id), danger, separator (a line before it)}
 # shadcn-for-muten · Custom (kit menus) · host JS row-menu.js.
-part RowMenu(label: text = "Más opciones", items: list, onPick: action) { Custom RowMenu inputs(label: $label, items: $items) on(pick: $onPick) class("cx-rowmenu-host") }
+part RowMenu(label: text = "More options", items: list, onPick: action) { Custom RowMenu inputs(label: $label, items: $items) on(pick: $onPick) class("cx-rowmenu-host") }

package/registry/save-button.muten

@@ -1,11 +1,11 @@
 # SaveButton - saving takes three moments and the button keeps its width through them, so nothing jumps:
-# idle («Guardar cambios») → saving (spinner, «Guardando…») → saved (check, «Guardado», green). The page owns status.
+# idle (“Save changes”) → saving (spinner, “Saving…”) → saved (check, “Saved”, green). The page owns status.
 #   SaveButton(status: saveState, onClick: save)      status: idle | saving | saved
 # shadcn-for-muten · part · no deps · kit.css (.cx-save).
-part SaveButton(status: text, onClick: action, label: text = "Guardar cambios") {
+part SaveButton(status: text, onClick: action, label: text = "Save changes") {
   Button -> $onClick class("cn-button cn-button-variant-default cn-button-size-default group/button cx-save") data(slot: "button", status: $status) {
-    when $status == "saving" { Stack class("cx-btn-label") { Icon "lucide:loader-circle" class("animate-spin")  Span "Guardando…" } }
-    when $status == "saved" { Stack class("cx-btn-label") { Icon "lucide:check"  Span "Guardado" } }
-    when $status != "saving" and $status != "saved" { Stack class("cx-btn-label") { Span "{$label}" } }
+    when $status == "saving" { Stack class("cx-btn-label") { Icon "lucide:loader-circle" class("animate-spin")  Span "Saving…" data(tr: "Saving…") } }
+    when $status == "saved" { Stack class("cx-btn-label") { Icon "lucide:check"  Span "Saved" data(tr: "Saved") } }
+    when $status != "saving" and $status != "saved" { Stack class("cx-btn-label") { Span "{$label}" data(tr: $label) } }
   }
 }

package/registry/scale-slider.js

@@ -2,6 +2,6 @@
 export function mount(el, inputs, on) {
   el.dataset.bubble = inputs.bubble || 'always'; el.dataset.ends = inputs.ends || 'on';   // optional value bubble and end labels (kit.css)
   let update = null;
-  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => { update = v.scaleSlider(el, inputs, core, on); });
+  Promise.all([import('@muten/shadcn/registry/kit/core.js'), import('@muten/shadcn/registry/kit/values.js')]).then(([core, v]) => { update = core.relang(el, inputs, () => (update = v.scaleSlider(el, inputs, core, on))); });
   return (next) => update?.(next);
 }

package/registry/scale-slider.muten

@@ -1,7 +1,7 @@
 # ScaleSlider - one or two thumbs; the value rides on each thumb and two bubbles that would touch merge into one;
 # the ends are written under it. Keys: arrows, Page Up/Down, Home/End. onChange gets "24" or "20000,80000".
-#   ScaleSlider(label: "Recordatorio antes de la cita", min: 1, max: 72, values: "24", format: "hours", onChange: setHours)
-#   ScaleSlider(label: "Precio", min: 0, max: 150000, step: 5000, values: "20000,80000", gap: 5000, format: "money", onChange: setPrice)
+#   ScaleSlider(label: "Reminder before the appointment", min: 1, max: 72, values: "24", format: "hours", onChange: setHours)
+#   ScaleSlider(label: "Price", min: 0, max: 150000, step: 5000, values: "20000,80000", gap: 5000, format: "money", onChange: setPrice)
 # bubble: always | drag (only while moving or focused) | off · ends: on | off (the min and max written under it).
 # format: hours | money | percent | "" (+ suffix). shadcn-for-muten · Custom (kit values) · host JS scale-slider.js.
 part ScaleSlider(label: text, min: number = 0, max: number = 100, step: number = 1, values: text, gap: number = 0, format: text = "", suffix: text = "", bubble: text = "always", ends: text = "on", onChange: action) {

package/registry/screen-tour.muten

@@ -2,7 +2,7 @@
 # that shows each step's capture, a tap where the finger would land, and at the end the sheet that confirms it. It
 # moves on by itself while it is on screen (each step's bar fills for its time); touching a step goes to it and stays.
 # Several tracks (book · order) get the library's tabs on top. Reduced motion: the first step, still; steps still work.
-#   ScreenTour(tracks: tour, label: "Así te reservan")      tour = a getter or a state list
+#   ScreenTour(tracks: tour, label: "This is how they book you")      tour = a getter or a state list
 # tracks [{id, label, steps: [{title, text, shot, tap: [x%, y%], ms, scroll (% of the capture's height), done}],
 #          done: {title, rows: [[label, value]], code, codeLabel, note}}]
 # shot: an image url (a long capture can scroll: give the first step `scroll`). A step with done: true shows the sheet.

package/registry/share-bar.muten

@@ -1,8 +1,8 @@
 # ShareBar - how one whole splits: a bar at 100 % cut into its parts, each in its tone, and under it each part's value
 # and name. Citas against pedidos, new clients against returning ones. All parts at 0 leave the empty track. busy: true
 # shows the bar and the values as a skeleton while they load.
-#   ShareBar(parts: split, label: "Ganado por tipo")
-# parts {label, value (a number: the part's weight), text (what is written: "USD 3.240", "28"), tone}
+#   ShareBar(parts: split, label: "Earned by type")
+# parts {label, value (a number: the part's weight), text (what is written: "USD 3,240", "28"), tone}
 # tone: brand | coral | teal | amber | blue | pink (the series palette; Chart and StackedBars use the same colours).
 # shadcn-for-muten · part · no deps · kit.css (.cx-split).
 part ShareBar(parts: list, label: text = "", busy: bool = false) {

package/registry/share-button.muten

@@ -1,10 +1,10 @@
 # ShareButton - Storio's share sheet made generic, inside the adaptive modal (Dialog wide, Drawer on a phone). On top
 # what is shared: the link's card (initials, name, address) or the product's (image, price in the corner, name over
 # it); then the link with Copiar and a row of brand targets you can drag sideways. QR opens the code in the same
-# sheet; if the phone has its own share menu, «Compartir en otra app» appears.
-#   ShareButton(label: "Compartir mi tienda", name: "Barbería El Roble", initials: "ER", url: "storio.ink/el-roble")
-#   ShareButton(label: "Compartir un producto", variant: "outline", kind: "product", name: "Barbería El Roble", url: "storio.ink/el-roble/p/pomada-mate", productName: "Pomada mate", productMeta: "Fijación media · 100 g", productPrice: 32000, productImage: "linear-gradient(135deg,#c79a6b,#6b4a2e)")
+# sheet; if the phone has its own share menu, “Compartir en otra app” appears.
+#   ShareButton(label: "Share my shop", name: "El Roble Barbershop", initials: "ER", url: "storio.ink/el-roble")
+#   ShareButton(label: "Share a product", variant: "outline", kind: "product", name: "El Roble Barbershop", url: "storio.ink/el-roble/p/pomada-mate", productName: "Matte pomade", productMeta: "Medium hold · 100 g", productPrice: 32000, productImage: "linear-gradient(135deg,#c79a6b,#6b4a2e)")
 # shadcn-for-muten · Custom (kit/structure.js) · kit.css (.cx-sh-*).
-part ShareButton(label: text = "Compartir", variant: text = "default", kind: text = "link", name: text, initials: text = "", url: text, text: text = "", productName: text = "", productMeta: text = "", productPrice: number = 0, productImage: text = "") {
+part ShareButton(label: text = "Share", variant: text = "default", kind: text = "link", name: text, initials: text = "", url: text, text: text = "", productName: text = "", productMeta: text = "", productPrice: number = 0, productImage: text = "") {
   Custom ShareButton inputs(label: $label, variant: $variant, kind: $kind, name: $name, initials: $initials, url: $url, text: $text, productName: $productName, productMeta: $productMeta, productPrice: $productPrice, productImage: $productImage) class("cx-share-host")
 }

package/registry/sheet.muten

@@ -1,6 +1,6 @@
 # Sheet - a panel that slides from a side and keeps the page behind it in view: a detail, filters, a cart. Full
 # height from the right (default) or left, full width from the top or bottom. The page owns open.
-#   Sheet(open: showing, onClose: done, title: "Pedido #1042", side: "right") { … ModalFooter { … } }
+#   Sheet(open: showing, onClose: done, title: "Order #1042", side: "right") { … ModalFooter { … } }
 # shadcn-for-muten · part over Modal (mode sheet).
 part Sheet(open: bool, onClose: action, title: text, description: text = "", side: text = "right") {
   Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "sheet", side: $side) { slot }

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")