@higinio/design-mcp 0.1.1 → 0.2.0

package/assets/celeste/design-doc.md

@@ -313,7 +313,7 @@ Export propio (extraído del estado loading de Button). SVG 16px default: círcu
 
 ### 10.5 Textarea
 
-Mismos estados que input. Min-height 96px, `resize: vertical`, padding 12px 14px. Contador de caracteres `text-xs` `--text-disabled` alineado a la derecha.
+Mismos estados que input. Min-height 96px, `resize: vertical`, padding 12px 14px. Contador de caracteres (`.textarea-counter`) `text-xs` `--text-muted` alineado a la derecha.
 
 ### 10.6 Select
 
@@ -387,7 +387,7 @@ Banner de estado **inline y persistente** (vs Toast, transitorio): errores de fo
 
 - 4 tonos: fondo suave semántico (`*-100`), radius `md`, padding `14px 16px`.
 - Icono semántico 20px en `*-500`: info→`info` · success→`circle-check` · warning→`triangle-alert` · danger→`circle-alert`.
-- Título `text-sm` semibold y cuerpo `text-sm` en `--*-text` (cuerpo con opacidad 0.92).
+- Título `text-sm` semibold y cuerpo `text-sm` en `--*-text`, a contraste completo (sin opacidad).
 - Botón cerrar opcional (× 16px en el color del tono) vía `onDismiss`. `role="status"`.
 
 ### 10.17 Toast
@@ -456,6 +456,26 @@ Tile de KPI único (componer dentro de `Card` para métricas de dashboard).
 - Valor grande en `--font-mono text-3xl` semibold `--text-primary` (tracking -0.01em, line-height 1).
 - Delta opcional en baseline (gap 10px): `text-sm` semibold con flecha 14px (`trending-up`/`trending-down`/`minus`). Tono derivado del signo (− → danger, resto success) u override `deltaTone`; colores del delta en `--*-text` (no los `-500`).
 
+#### Chip de métrica
+
+Pastilla de una línea con rótulo y valor —por ejemplo, «Agua **3 de 8**»— para métricas secundarias que no merecen un Stat completo.
+
+- **`.metric-chip`:** radius `full`, borde `1px --border`, fondo `--surface`, padding `4px 12px`, `text-sm` `--text-secondary`; icono opcional de 16px en `--text-muted`.
+- **Contenido:** `.metric-chip__label` y `.metric-chip__value`; el valor va semibold en `--link` con `tabular-nums`.
+- **Fila:** `.metric-chips` agrupa los chips con `display: flex; flex-wrap: wrap; gap: var(--space-2)`, así que saltan de línea en móvil.
+- **Interactivo** (por ejemplo, «sumar un vaso»): `button.metric-chip`, con `min-height: var(--control-height-md)` (44px) y padding horizontal de 16px. Hover: fondo `--accent-soft` y borde `--accent`. Active: fondo `--accent-soft-strong` y `scale(.98)`. Foco de teclado con el anillo del sistema (outline 2px `--accent`, offset 2px).
+
+```html
+<div class="metric-chips">
+  <span class="metric-chip"><span class="metric-chip__label">Pasos</span> <span class="metric-chip__value">6,240</span></span>
+  <button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso">
+    <span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span>
+  </button>
+</div>
+```
+
+**Accesibilidad:** el chip interactivo es un `<button>` con nombre accesible completo, no solo la cifra («Agua: 3 de 8 vasos. Sumar un vaso»); el nombre empieza por el texto visible (WCAG 2.5.3) y se actualiza con el valor. El chip informativo es texto: no lleva rol ni foco.
+
 ### 10.23 Pagination
 
 Navegador de páginas 1-indexado, bajo una `Table`.
@@ -472,6 +492,37 @@ Navegador de páginas 1-indexado, bajo una `Table`.
 - **Tabs:** borde inferior `--border`; tab activa con indicador 2px `--accent` que se desliza entre tabs (250ms).
 - **Breadcrumbs:** `text-sm` `--text-muted`, separador `/` (tipográfico), último ítem `--text-primary`.
 
+#### Sidebar contraíble
+
+Variante del Sidebar para apps con muchas secciones: alterna entre la lista con rótulos y un riel de iconos que deja más ancho al contenido.
+
+- **Estados:** expandido, 260px (el ancho del Sidebar), y contraído, riel de iconos de 64px. Clases: `.sidebar.sidebar--collapsible` y, contraído, `.is-collapsed`. Cada ítem lleva su icono de 18px y el nombre en `.sidebar__label`.
+- **Grupos con rótulo:** `.sidebar__group` con un `.sidebar__group-label` (`text-xs` semibold en mayúsculas, tracking `--tracking-label`, `--text-muted`); 16px entre grupos. En el riel, cada rótulo se convierte en un separador de 1px `--border` y el del primer grupo se oculta.
+- **Ítem activo:** `.is-active` (fondo `--accent-soft-strong`, texto `--link`) más `aria-current="page"`.
+- **Botón de contraer:** `.sidebar__item.sidebar__toggle` al pie (`margin-top: auto`), con un chevron que apunta hacia donde se moverá el borde (rota 180° en el riel) y el texto «Contraer» / «Expandir» en su `.sidebar__label`.
+- **Tooltip en el riel:** el `.sidebar__label` queda oculto a la vista pero accesible (patrón de `.u-visually-hidden`) y aparece a la derecha del ítem como tooltip (`--tooltip-bg`, `text-xs`, radius `sm`, delay 400ms) al pasar el cursor —solo con puntero real, §11.5— y al enfocar el ítem con teclado (`:focus-visible`). No es un `title`: el nombre sigue en el árbol de accesibilidad. El riel no recorta su contenido (sin `overflow`) para que el tooltip pueda salir de él.
+- **Por debajo de 768px** (`md`), `.sidebar--collapsible` no se muestra fijo: lo sustituye un botón ☰ `.icon-btn.sidebar-trigger` que abre un Drawer `.drawer--left` (§10.29) con los mismos grupos e ítems. El framework muestra `.sidebar-trigger` solo por debajo de 768px y lo oculta (`display: none`) desde 768px, el mismo breakpoint en el que aparece el sidebar fijo; así el ☰ y el sidebar nunca conviven. El botón lleva `aria-label="Abrir navegación"`, `aria-controls` con el id del drawer y `aria-expanded` (`false` cerrado, `true` abierto).
+- **Motion:** el ancho cambia sin transición —el layout usa `grid-template-columns: auto 1fr` y el contenido sigue al sidebar al instante—; nunca se anima `width`. Solo los rótulos se funden al expandir: `opacity` 0→1 y `translateX(-4px)`→0 en `--duration-fast` `--ease-out`. Con `prefers-reduced-motion`, sin animación (reset global, §11.5).
+
+```html
+<nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal">
+  <div class="sidebar__group" role="group" aria-labelledby="navHoy">
+    <span class="sidebar__group-label" id="navHoy">Hoy</span>
+    <a class="sidebar__item is-active" href="/" aria-current="page"><svg aria-hidden="true">…</svg><span class="sidebar__label">Inicio</span></a>
+  </div>
+  <button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="appNav">
+    <svg aria-hidden="true">…</svg><span class="sidebar__label">Contraer</span>
+  </button>
+</nav>
+
+<!-- Solo por debajo de 768px -->
+<button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
+        aria-expanded="false" aria-controls="navDrawer">…menu…</button>
+<div class="drawer drawer--left" id="navDrawer">…los mismos grupos e ítems…</div>
+```
+
+**Accesibilidad:** el contenedor es un `<nav>` con `aria-label`; el ítem de la página actual lleva `aria-current="page"` además de `.is-active`. El toggle es un `<button>` real con `aria-expanded` (`true` expandido, `false` en el riel) y `aria-controls` con el id del sidebar; al alternar, su texto cambia entre «Contraer» y «Expandir». El ☰ `.sidebar-trigger` también es un `<button>` con `aria-expanded` y `aria-controls` hacia el drawer, y el drawer sigue el contrato de foco del Modal. Los grupos se declaran con `role="group"` y `aria-labelledby` apuntando a su rótulo, que en el riel sigue siendo legible para el lector aunque se vea como una línea.
+
 ### 10.25 Skeleton y EmptyState
 
 - Skeleton: fondo `--surface-alt` con shimmer (gradiente que barre en 1.4s, loop). Radius igual al contenido que reemplaza.
@@ -541,10 +592,10 @@ Botones adyacentes con bordes compartidos para acciones relacionadas (barra de f
 
 Campo de fecha con un calendario en popover. Reusa el patrón visual del `Popover` (§10.30, panel `--surface` + `shadow-lg`, aparición desde el `transform-origin` del disparador) y la navegación por teclado del `Combobox` (§10.28).
 
-- **`.datepicker`** — contenedor relativo (`.is-open` lo abre). **`.datepicker__input`** con el look de `Input` (borde `--border-strong`, focus `--accent` + `--ring`), `readonly` + `aria-haspopup="dialog"` + `aria-expanded` + `aria-controls`; un `.datepicker__icon` de calendario 18px a la derecha (decorativo, `aria-hidden`).
+- **`.datepicker`** — contenedor relativo (`.is-open` lo abre). **`.datepicker__input`** con el look de `Input` (borde `--border-strong`, focus `--accent` + `--ring`), `readonly` + `aria-haspopup="dialog"` + `aria-controls` (sin `aria-expanded`, que no es válido en un `input` de texto; el estado abierto lo da `.is-open`); un `.datepicker__icon` de calendario 18px a la derecha (decorativo, `aria-hidden`).
 - **`.datepicker__calendar`** — panel flotante `role="dialog"` con `aria-label`, mismo patrón que `.popover__panel`. Variante `.datepicker--right` ancla a la derecha.
-- **`.calendar`** — dentro del panel: `.calendar__header` (mes/año en `.calendar__title` + botones prev/next con `#i-chevron-left/right`), `.calendar__weekdays` (7 encabezados `role="columnheader"` con `aria-label` completo: "lunes"…), `.calendar__grid` (`role="grid"`), y `.calendar__day` (botón `role="gridcell"`, `aria-label` de la fecha completa vía `Intl.DateTimeFormat` y `aria-selected`). Semana empieza en lunes.
-- **Estados de día:** `.calendar__day--today` (semibold + anillo interior `--border-strong`), `.calendar__day--selected` (fondo `--accent`, texto `--text-on-primary`), `.calendar__day--outside` (días de otro mes, `--text-disabled`), `[disabled]` (no seleccionable). El hover usa `--accent-soft`.
+- **`.calendar`** — dentro del panel: `.calendar__header` (mes/año en `.calendar__title` + botones prev/next con `#i-chevron-left/right`), `.calendar__table` (`role="grid"`) que envuelve la fila de cabeceras `.calendar__weekdays` (`role="row"`, 7 encabezados `role="columnheader"` con `aria-label` completo: "lunes"…) y `.calendar__grid` (`role="rowgroup"`) con una `.calendar__week` (`role="row"`, `display: contents` para no romper la rejilla) por semana, y `.calendar__day` (botón `role="gridcell"`, `aria-label` de la fecha completa vía `Intl.DateTimeFormat` y `aria-selected`). Semana empieza en lunes.
+- **Estados de día:** `.calendar__day--today` (semibold + anillo interior `--border-strong`), `.calendar__day--selected` (fondo `--accent`, texto `--text-on-primary`), `.calendar__day--outside` (días de otro mes, `--text-muted`), `[disabled]` (no seleccionable). El hover usa `--accent-soft`.
 - **Teclado y foco (como Popover):** el input abre por click (o Enter/Espacio/↓); al abrir, el foco entra al calendario (día enfocado). Dentro de la rejilla las **flechas** mueven el foco entre días (roving `tabindex`, cambiando de mes al cruzar el borde), Home/End saltan a los extremos de la semana, PageUp/PageDown cambian de mes, Enter/Espacio selecciona; **Esc** cierra y devuelve el foco al input. La fecha se formatea con `Intl` (`es-MX`), nunca a mano.
 - **Motion:** el panel aparece con fade + `scale(0.96→1)`, `--duration-base` `--ease-out`, bajo el techo `--duration-page`. Solo `transform`/`opacity`.
 

package/assets/celeste/framework.css

@@ -335,7 +335,7 @@
 .input-icon .input { padding-left: 40px; }
 
 .textarea { min-height: 96px; padding: 12px 14px; resize: vertical; line-height: var(--leading-base); }
-.textarea-counter { font-size: var(--text-xs); color: var(--text-disabled); text-align: right; }
+.textarea-counter { font-size: var(--text-xs); color: var(--text-muted); text-align: right; }
 
 .select-wrap { position: relative; }
 .select { appearance: none; padding-right: 38px; cursor: pointer; }
@@ -634,7 +634,7 @@
 }
 .alert > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
 .alert__title { font-weight: var(--weight-semibold); margin: 0 0 2px; }
-.alert__body { opacity: .92; margin: 0; }
+.alert__body { margin: 0; }
 .alert__close {
   margin-left: auto; flex: none; display: grid; place-items: center;
   width: 24px; height: 24px; border: 0; border-radius: var(--radius-sm);
@@ -855,6 +855,32 @@
 .stat__delta--up   { color: var(--success-text); }
 .stat__delta--down { color: var(--danger-text); }
 
+/* Chip de métrica (§10.22): rótulo y valor en una pastilla de una línea */
+.metric-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.metric-chip {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border: var(--border-width) solid var(--border); border-radius: var(--radius-full);
+  background: var(--surface);
+  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5;
+  color: var(--text-secondary); white-space: nowrap;
+}
+.metric-chip svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
+.metric-chip__value {
+  font-weight: var(--weight-semibold); color: var(--link);
+  font-variant-numeric: tabular-nums;
+}
+button.metric-chip {
+  min-height: var(--control-height-md); padding-inline: var(--space-4);
+  cursor: pointer; text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              border-color var(--duration-fast) var(--ease-out),
+              transform var(--duration-instant) var(--ease-out);
+}
+button.metric-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
+button.metric-chip:active { background: var(--accent-soft-strong); transform: scale(.98); }
+button.metric-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
 .pagination { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
 .pagination__btn {
   display: inline-grid; place-items: center;
@@ -903,7 +929,7 @@
 .sidebar__item {
   display: flex; align-items: center; gap: 10px;
   padding: 10px 12px; border-radius: var(--radius-md);
-  font-size: var(--text-sm); font-weight: var(--weight-medium);
+  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
   color: var(--text-secondary); text-decoration: none; border: 0; background: transparent;
   cursor: pointer; text-align: left; width: 100%;
   transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
@@ -913,6 +939,68 @@
 .sidebar__item.is-active { background: var(--accent-soft-strong); color: var(--link); }
 .sidebar__item.is-active svg { color: var(--accent); }
 
+/* Grupos con rótulo dentro del sidebar */
+.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
+.sidebar__group + .sidebar__group { margin-top: var(--space-4); }
+.sidebar__group-label {
+  padding: 0 12px var(--space-1);
+  font-size: var(--text-xs); font-weight: var(--weight-semibold);
+  text-transform: uppercase; letter-spacing: var(--tracking-label);
+  color: var(--text-muted); white-space: nowrap;
+}
+.sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Sidebar contraíble (§10.24): expandido 260 px, riel de iconos de 64 px.
+   El ancho cambia sin transición; solo los rótulos se funden con opacity y transform. */
+.sidebar--collapsible .sidebar__label {
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-fast) var(--ease-out);
+}
+.sidebar__toggle { margin-top: auto; }
+.sidebar.is-collapsed { width: 64px; padding-inline: var(--space-3); }
+.sidebar.is-collapsed .sidebar__item { position: relative; justify-content: center; padding-inline: 0; }
+.sidebar.is-collapsed .sidebar__toggle svg { transform: rotate(180deg); }
+.sidebar.is-collapsed .sidebar__group + .sidebar__group { margin-top: var(--space-2); }
+/* En el riel, el rótulo de grupo es un separador de 1 px; su texto sigue en el árbol de accesibilidad */
+.sidebar.is-collapsed .sidebar__group-label {
+  height: 1px; padding: 0; margin: 0 var(--space-2) var(--space-2);
+  overflow: hidden; color: transparent; background: var(--border);
+}
+/* Oculto a la vista pero accesible (patrón de .u-visually-hidden) */
+.sidebar.is-collapsed .sidebar__label,
+.sidebar.is-collapsed .sidebar__group:first-child > .sidebar__group-label {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}
+.sidebar.is-collapsed .sidebar__label {
+  border-radius: var(--radius-sm); background: var(--tooltip-bg); color: var(--tooltip-text);
+  font-size: var(--text-xs); line-height: 16px;
+  pointer-events: none; z-index: 70;
+  opacity: 0; transform: translateX(-4px);
+}
+/* Tooltip del riel: el propio rótulo aparece a la derecha del ítem, también con teclado */
+.sidebar.is-collapsed .sidebar__item:focus-visible .sidebar__label {
+  left: calc(100% + 8px); top: calc(50% - 14px); width: auto; height: auto;
+  margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+  opacity: 1; transform: none; transition-delay: 400ms;
+}
+/* Por hover solo con puntero real — en touch quedaría pegado tras el tap */
+@media (hover: hover) and (pointer: fine) {
+  .sidebar.is-collapsed .sidebar__item:hover .sidebar__label {
+    left: calc(100% + 8px); top: calc(50% - 14px); width: auto; height: auto;
+    margin: 0; padding: 6px 10px; clip-path: none; overflow: visible;
+    opacity: 1; transform: none; transition-delay: 400ms;
+  }
+}
+/* Por debajo de 768 px la navegación vive en un Drawer --left (§10.29), que abre el botón ☰
+   .sidebar-trigger (combinado con .icon-btn); desde 768 px el sidebar es fijo y el botón sobra */
+@media (max-width: 767px) {
+  .sidebar--collapsible { display: none; }
+}
+@media (min-width: 768px) {
+  .sidebar-trigger { display: none; }
+}
+
 .tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-width) solid var(--border); }
 .tabs__tab {
   padding: 12px 4px; margin-bottom: -1px;
@@ -1128,6 +1216,7 @@
 .calendar__weekdays,
 .calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
 .calendar__weekdays { margin-bottom: 4px; }
+.calendar__week { display: contents; }
 .calendar__weekday {
   display: flex; align-items: center; justify-content: center; height: 28px;
   font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted);
@@ -1142,7 +1231,7 @@
               color var(--duration-fast) var(--ease-out);
 }
 .calendar__day:hover:not(:disabled):not(.calendar__day--selected) { background: var(--accent-soft); }
-.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day--outside { color: var(--text-muted); }
 .calendar__day--today { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--border-strong); }
 .calendar__day--selected { background: var(--accent); color: var(--text-on-primary); font-weight: var(--weight-semibold); }
 .calendar__day:disabled { color: var(--text-disabled); cursor: not-allowed; }