@muten/shadcn 0.1.0 → 0.1.1

package/kit.css

@@ -1302,7 +1302,7 @@ html.cx-locked { overflow: hidden; }
 .cx-day b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .cx-day i { width: 4px; height: 4px; border-radius: 99px; background: var(--success); }
 .cx-day[data-full] i, .cx-day:disabled i { background: transparent; }
-.cx-day[aria-pressed="true"] small { color: inherit; opacity: .8; }
+.cx-day[aria-pressed="true"] small { color: inherit; }
 .cx-day[aria-pressed="true"] i { background: currentColor; }
 .cx-hour-grid .cn-button { width: 100%; font-variant-numeric: tabular-nums; }
 .cx-hour-skel { height: 28px; }
@@ -2761,3 +2761,7 @@ a.cx-bc-item:hover { color: var(--foreground); }
 /* ── Press: anything you press gives way a little (0.97), so the page feels it heard you ── */
 .style-nova .cn-button { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: 160ms; transition-timing-function: cubic-bezier(.23, 1, .32, 1); }
 .style-nova .cn-button:active:not(:disabled) { transform: scale(0.97); }
+
+/* contrast: the label of the hour groups (Mañana, Tarde) and an appointment's second line read at 4.5:1 */
+.cx-hours-h { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
+.cx-ag-ev .cx-text[data-variant="caption"], .cx-ag-ev .cx-text[data-variant="muted"] { color: color-mix(in srgb, var(--foreground) 78%, var(--tone)); }

package/motion.css

@@ -60,7 +60,7 @@
 
 /* Drift: a strip that slides by itself (put its items twice, so it loops without a seam). */
 @keyframes mu-drift { to { transform: translateX(-50%); } }
-.drift { display: flex; width: max-content; animation: mu-drift var(--drift, 60s) linear infinite; }
+.drift { display: flex; flex-direction: row; width: max-content; animation: mu-drift var(--drift, 60s) linear infinite; }
 .drift:hover { animation-play-state: paused; }
 
 /* Photo-in: a picture settles from a soft zoom as it appears. */

package/package.json

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

package/registry/drawer.muten

@@ -2,6 +2,6 @@
 # It is the adaptive Modal forced to drawer. The page owns open.
 #   Drawer(open: picking, onClose: done, title: "Elige la hora") { … ModalFooter { … } }
 # shadcn-for-muten · part over Modal.
-part Drawer(open: bool, onClose: action, title: text, description: text = "", size: text = "") {
+part Drawer(open: bool, onClose: action, title: text = "", description: text = "", size: text = "") {
   Modal(open: $open, onClose: $onClose, title: $title, description: $description, mode: "drawer", size: $size) { slot }
 }

package/registry/kit/board.js

@@ -91,7 +91,7 @@ export function orderBoard(root, i, core, on) {
     const groups = GROUP_ORDER.filter((k) => c[k]).map((k) => GROUPS[k](c[k], c));
     const next = c.actions.find(([a]) => a === 'advance');
     return `<div data-slot="card-header" class="cn-card-header">${person}</div>`
-      + (groups.length ? `<div data-slot="card-content" class="cn-card-content"><div data-slot="item-group" class="cn-item-group" role="list">${groups.join(ui.itemSeparator())}</div></div>` : '')
+      + (groups.length ? `<div data-slot="card-content" class="cn-card-content"><div data-slot="item-group" class="cn-item-group">${groups.join(ui.itemSeparator())}</div></div>` : '')
       + (next ? `<div data-slot="card-footer" class="cn-card-footer">${ui.button({ label: `${next[1]}<svg><use href="#right"/></svg>`, variant: 'default', size: 'default', attrs: 'data-bact="advance"', cls: 'cx-fill' })}</div>` : '');
   };
 

package/registry/kit/structure.js

@@ -297,7 +297,8 @@ export function booking(root, i, core, on) {
       b.className = 'cn-button cn-button-variant-outline cx-size-tile cx-day'; b.disabled = s === null;
       if (s && !s.length) b.dataset.full = '';
       b.setAttribute('aria-pressed', !!picked.day && key(d) === key(picked.day));
-      b.setAttribute('aria-label', `${DAYLONG[d.getDay()]} ${d.getDate()}${s === null ? ', cerrado' : s.length ? `, ${s.length} horarios` : ', sin horarios'}`);
+      // the name starts with what the tile shows («vie 9»), so a voice user can say it; the long day and the state follow
+      b.setAttribute('aria-label', `${key(d) === key(today) ? 'hoy' : DAY[d.getDay()]} ${d.getDate()}, ${DAYLONG[d.getDay()]}${s === null ? ', cerrado' : s.length ? `, ${s.length} horarios` : ', sin horarios'}`);
       b.innerHTML = `<small>${key(d) === key(today) ? 'hoy' : DAY[d.getDay()]}</small><b>${d.getDate()}</b><i></i>`;
       b.onclick = () => pickDay(d);
       weekEl.appendChild(b);
@@ -312,7 +313,8 @@ export function booking(root, i, core, on) {
       return;
     }
     const am = s.filter((h) => h < '13:00'), pm = s.filter((h) => h >= '13:00');
-    const grid = (label, hs) => hs.length ? `<h4>${label}</h4><div class="cx-hour-grid">${hs.map((h) => `<button class="cn-button cn-button-variant-outline cn-button-size-sm cx-hour" aria-pressed="${h === picked.hour}">${h}</button>`).join('')}</div>` : '';
+    // the part of the day is a label, not a heading: the picker sits inside pages whose outline it must not break
+    const grid = (label, hs) => hs.length ? `<p class="cx-hours-h">${label}</p><div class="cx-hour-grid">${hs.map((h) => `<button class="cn-button cn-button-variant-outline cn-button-size-sm cx-hour" aria-pressed="${h === picked.hour}">${h}</button>`).join('')}</div>` : '';
     hours.innerHTML = `<div class="cx-panel" style="display:flex;flex-direction:column;gap:10px">${grid('Mañana', am)}${grid('Tarde', pm)}</div>`;
     $$('.cx-hour', hours).forEach((b) => b.onclick = () => { picked.hour = b.textContent; $$('.cx-hour', hours).forEach((x) => x.setAttribute('aria-pressed', x === b)); sum(); });
   };

package/registry/modal.muten

@@ -10,7 +10,7 @@
 # mode: auto | dialog | drawer | sheet (a panel from a side) · side: right | left | top | bottom (for sheet)
 # role: dialog | alertdialog · dismiss: on | off (off: no ✕ and the backdrop does not close it; only its buttons do)
 # size: "" | tall (a list that pages)   ·   shadcn-for-muten · part + Custom (ModalBehavior) · kit.css (.cx-modal).
-part Modal(open: bool, onClose: action, title: text, description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on") {
+part Modal(open: bool, onClose: action, title: text = "", description: text = "", mode: text = "auto", size: text = "", side: text = "right", role: text = "dialog", dismiss: text = "on") {
   Stack class("cx-modal-root") data(open: $open) {
     when $dismiss != "off" { Button "" -> $onClose class("cx-overlay") aria(label: "Cerrar", hidden: "true") data(closes: "true") }
     when $dismiss == "off" { Stack class("cx-overlay") aria(hidden: "true") }