@higinio/design-mcp 0.1.1 → 0.2.0

package/assets/celeste/styleguide.html

@@ -322,7 +322,7 @@ html, body { overflow-x: clip; }
 .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; }
@@ -608,7 +608,7 @@ html, body { overflow-x: clip; }
 }
 .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: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
@@ -823,6 +823,32 @@ html, body { overflow-x: clip; }
 .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;
@@ -868,7 +894,7 @@ html, body { overflow-x: clip; }
 .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);
@@ -878,6 +904,68 @@ html, body { overflow-x: clip; }
 .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;
@@ -1082,6 +1170,7 @@ html, body { overflow-x: clip; }
 .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);
@@ -1096,7 +1185,7 @@ html, body { overflow-x: clip; }
               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; }
@@ -1287,6 +1376,14 @@ html, body { overflow-x: clip; }
 .ds-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: stretch; }
 .ds-demo:has(table) { overflow-x: auto; }
 
+/* Demo del sidebar contraíble: rejilla auto 1fr, el contenido sigue al riel sin animar el ancho */
+.ds-app-demo { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: 0; min-height: 400px; padding: 0; }
+.ds-app-demo > .sidebar { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
+.ds-app-demo__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-6); }
+@media (max-width: 767px) {
+  .ds-app-demo { grid-template-columns: 1fr; min-height: 0; }
+}
+
 .ds-code { margin: var(--space-2) 0 0; }
 .ds-code summary {
   cursor: pointer; user-select: none; font-size: var(--text-sm);
@@ -1824,7 +1921,7 @@ html, body { overflow-x: clip; }
   <svg>…icono 18px…</svg>
 </button>
 <!-- Variantes: --ghost (default) · --secondary · --primary
-     Tamaños: --sm 32px · (md 40px) · --lg 48px --&gt;</code></pre>
+     Tamaños: --sm 36px · (md 44px) · --lg 48px --&gt;</code></pre>
         </div>
       </details>
     </div>
@@ -2297,11 +2394,11 @@ html, body { overflow-x: clip; }
       <div class="ds-demo ds-demo--col" style="max-width:420px">
         <div>
           <div class="progress-row"><span class="progress-label">Almacenamiento</span><span class="progress-value js-progress-value">68%</span></div>
-          <div class="progress"><div class="progress__bar js-progress-bar" style="width:68%" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div></div>
+          <div class="progress"><div class="progress__bar js-progress-bar" style="width:68%" role="progressbar" aria-label="Almacenamiento" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div></div>
         </div>
         <div>
           <div class="progress-row"><span class="progress-label">Tareas completadas</span><span class="progress-value">24/30</span></div>
-          <div class="progress"><div class="progress__bar progress__bar--success" style="width:80%" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div></div>
+          <div class="progress"><div class="progress__bar progress__bar--success" style="width:80%" role="progressbar" aria-label="Tareas completadas" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div></div>
         </div>
         <div style="display:flex;align-items:center;gap:24px">
           <div class="progress-ring js-ring" data-value="68">
@@ -2516,6 +2613,30 @@ html, body { overflow-x: clip; }
 &lt;!-- Delta: --up (success-text) · --down (danger-text) · neutro (text-muted) --&gt;</code></pre>
         </div>
       </details>
+
+      <h4 style="margin-top:var(--space-10)">Chip de métrica</h4>
+      <p class="ds-spec">Pastilla de una línea con rótulo y valor en <span class="u-mono">--link</span> · fila con <span class="u-mono">gap</span> que salta de línea en móvil · el chip interactivo es un <span class="u-mono">&lt;button&gt;</span> de 44 px con nombre accesible completo.</p>
+      <div class="ds-demo">
+        <div class="metric-chips">
+          <span class="metric-chip"><span class="metric-chip__label">Pasos</span> <span class="metric-chip__value">6,240</span></span>
+          <span class="metric-chip"><span class="metric-chip__label">Sueño</span> <span class="metric-chip__value">7 h 20 min</span></span>
+          <button class="metric-chip" type="button" id="dsWaterChip" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"><svg aria-hidden="true"><use href="#i-plus"/></svg><span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span></button>
+        </div>
+      </div>
+      <details class="ds-code"><summary>Ver código</summary>
+        <div class="ds-code-box"><button class="ds-copy">Copiar</button>
+<pre class="ds-pre"><code>&lt;div class="metric-chips"&gt;
+  &lt;span class="metric-chip"&gt;
+    &lt;span class="metric-chip__label"&gt;Pasos&lt;/span&gt; &lt;span class="metric-chip__value"&gt;6,240&lt;/span&gt;
+  &lt;/span&gt;
+  &lt;button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso"&gt;
+    &lt;svg aria-hidden="true"&gt;…plus…&lt;/svg&gt;
+    &lt;span class="metric-chip__label"&gt;Agua&lt;/span&gt; &lt;span class="metric-chip__value"&gt;3 de 8&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/div&gt;
+&lt;!-- El aria-label se actualiza con el valor; empieza por el texto visible --&gt;</code></pre>
+        </div>
+      </details>
     </div>
 
     <!-- Pagination -->
@@ -2603,6 +2724,51 @@ html, body { overflow-x: clip; }
 &lt;/nav&gt;</code></pre>
         </div>
       </details>
+
+      <h4 style="margin-top:var(--space-10)">Sidebar contraíble</h4>
+      <p class="ds-spec">Expandido 260 px · riel de iconos de 64 px con grupos separados por una línea · en el riel, el nombre aparece como tooltip al pasar el cursor o al enfocar con teclado · el ancho cambia sin transición y solo los rótulos se funden · por debajo de 768 px lo sustituye un Drawer <span class="u-mono">--left</span>.</p>
+      <div class="ds-demo ds-app-demo">
+        <nav class="sidebar sidebar--collapsible" id="demoAppNav" aria-label="Navegación de ejemplo">
+          <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG1">
+            <span class="sidebar__group-label" id="demoAppNavG1">Trabajo</span>
+            <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page"><svg aria-hidden="true"><use href="#i-home"/></svg><span class="sidebar__label">Inicio</span></a>
+            <a class="sidebar__item" href="#comp-navegacion"><svg aria-hidden="true"><use href="#i-folder"/></svg><span class="sidebar__label">Proyectos</span></a>
+            <a class="sidebar__item" href="#comp-navegacion"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span class="sidebar__label">Calendario</span></a>
+          </div>
+          <div class="sidebar__group" role="group" aria-labelledby="demoAppNavG2">
+            <span class="sidebar__group-label" id="demoAppNavG2">Equipo</span>
+            <a class="sidebar__item" href="#comp-navegacion"><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="sidebar__label">Informes</span></a>
+            <a class="sidebar__item" href="#comp-navegacion"><svg aria-hidden="true"><use href="#i-user"/></svg><span class="sidebar__label">Personas</span></a>
+            <a class="sidebar__item" href="#comp-navegacion"><svg aria-hidden="true"><use href="#i-inbox"/></svg><span class="sidebar__label">Bandeja</span></a>
+          </div>
+          <button class="sidebar__item sidebar__toggle" type="button" aria-expanded="true" aria-controls="demoAppNav"><svg aria-hidden="true"><use href="#i-chevron-left"/></svg><span class="sidebar__label">Contraer</span></button>
+        </nav>
+        <div class="ds-app-demo__main">
+          <button class="icon-btn icon-btn--secondary sidebar-trigger" type="button" data-drawer-open="demoNavDrawer" aria-label="Abrir navegación" aria-expanded="false" aria-controls="demoNavDrawer"><svg aria-hidden="true"><use href="#i-menu"/></svg></button>
+          <h5 style="margin:0">Inicio</h5>
+          <p class="ds-spec" style="margin:0">El contenido ocupa el ancho que deja el sidebar: la rejilla <span class="u-mono">auto 1fr</span> sigue al riel al instante, sin animar el ancho.</p>
+        </div>
+      </div>
+      <details class="ds-code"><summary>Ver código</summary>
+        <div class="ds-code-box"><button class="ds-copy">Copiar</button>
+<pre class="ds-pre"><code>&lt;nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal"&gt;
+  &lt;div class="sidebar__group" role="group" aria-labelledby="navTrabajo"&gt;
+    &lt;span class="sidebar__group-label" id="navTrabajo"&gt;Trabajo&lt;/span&gt;
+    &lt;a class="sidebar__item is-active" href="/" aria-current="page"&gt;
+      &lt;svg aria-hidden="true"&gt;…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Inicio&lt;/span&gt;
+    &lt;/a&gt;
+  &lt;/div&gt;
+  &lt;button class="sidebar__item sidebar__toggle" type="button"
+          aria-expanded="true" aria-controls="appNav"&gt;
+    &lt;svg aria-hidden="true"&gt;…chevron-left…&lt;/svg&gt;&lt;span class="sidebar__label"&gt;Contraer&lt;/span&gt;
+  &lt;/button&gt;
+&lt;/nav&gt;
+&lt;!-- Contraído: .is-collapsed en el nav, aria-expanded="false" y texto «Expandir».
+     Por debajo de 768 px: botón ☰ .sidebar-trigger que abre un .drawer.drawer--left con los mismos ítems. --&gt;
+&lt;button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
+        aria-expanded="false" aria-controls="navDrawer"&gt;…menu…&lt;/button&gt;</code></pre>
+        </div>
+      </details>
     </div>
 
     <!-- Skeleton y EmptyState -->
@@ -2804,7 +2970,7 @@ html, body { overflow-x: clip; }
           <label class="field__label" for="dpInput">Fecha de entrega</label>
           <div class="datepicker" id="demoDatepicker">
             <input class="datepicker__input" id="dpInput" type="text" readonly autocomplete="off"
-                   aria-haspopup="dialog" aria-expanded="false" aria-controls="dpCal" placeholder="Elige una fecha">
+                   aria-haspopup="dialog" aria-controls="dpCal" placeholder="Elige una fecha">
             <svg class="datepicker__icon" aria-hidden="true"><use href="#i-calendar"/></svg>
             <div class="datepicker__calendar" id="dpCal" role="dialog" aria-label="Elegir fecha" tabindex="-1">
               <div class="calendar">
@@ -2813,6 +2979,7 @@ html, body { overflow-x: clip; }
                   <span class="calendar__title" aria-live="polite">—</span>
                   <button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" data-cal-next aria-label="Mes siguiente"><svg><use href="#i-chevron-right"/></svg></button>
                 </div>
+                <div class="calendar__table" role="grid" aria-label="Calendario">
                 <div class="calendar__weekdays" role="row">
                   <span class="calendar__weekday" role="columnheader" aria-label="lunes">lu</span>
                   <span class="calendar__weekday" role="columnheader" aria-label="martes">ma</span>
@@ -2822,7 +2989,8 @@ html, body { overflow-x: clip; }
                   <span class="calendar__weekday" role="columnheader" aria-label="sábado">sá</span>
                   <span class="calendar__weekday" role="columnheader" aria-label="domingo">do</span>
                 </div>
-                <div class="calendar__grid" id="dpGrid" role="grid" aria-label="Calendario"></div>
+                <div class="calendar__grid" id="dpGrid" role="rowgroup"></div>
+                </div>
               </div>
             </div>
           </div>
@@ -2832,7 +3000,7 @@ html, body { overflow-x: clip; }
         <div class="ds-code-box"><button class="ds-copy">Copiar</button>
 <pre class="ds-pre"><code>&lt;div class="datepicker"&gt;
   &lt;input class="datepicker__input" type="text" readonly
-         aria-haspopup="dialog" aria-expanded="false" aria-controls="cal"&gt;
+         aria-haspopup="dialog" aria-controls="cal"&gt;
   &lt;svg class="datepicker__icon" aria-hidden="true"&gt;…calendario…&lt;/svg&gt;
   &lt;div class="datepicker__calendar" id="cal" role="dialog"
        aria-label="Elegir fecha" tabindex="-1"&gt;
@@ -2842,17 +3010,21 @@ html, body { overflow-x: clip; }
         &lt;span class="calendar__title"&gt;julio 2026&lt;/span&gt;
         &lt;button aria-label="Mes siguiente"&gt;…&lt;/button&gt;
       &lt;/div&gt;
+      &lt;div class="calendar__table" role="grid" aria-label="julio 2026"&gt;
       &lt;div class="calendar__weekdays" role="row"&gt;
         &lt;span class="calendar__weekday" role="columnheader"
               aria-label="lunes"&gt;lu&lt;/span&gt; …
       &lt;/div&gt;
-      &lt;div class="calendar__grid" role="grid" aria-label="julio 2026"&gt;
+      &lt;div class="calendar__grid" role="rowgroup"&gt;
+       &lt;div class="calendar__week" role="row"&gt;
         &lt;button class="calendar__day calendar__day--today" role="gridcell"
                 aria-label="viernes, 10 de julio de 2026"
                 aria-selected="false"&gt;10&lt;/button&gt;
         &lt;button class="calendar__day calendar__day--selected" role="gridcell"
                 aria-label="viernes, 17 de julio de 2026"
                 aria-selected="true"&gt;17&lt;/button&gt; …
+       &lt;/div&gt;
+      &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
@@ -3221,7 +3393,7 @@ html, body { overflow-x: clip; }
     <p class="ds-lead">El sistema se distribuye como paquete npm (<span class="u-mono">@higinio/design-css</span>) y también como archivos sueltos en <span class="u-mono">dist/celeste-clasica/</span>. Instálalo o cópialos, y elige qué importar según tu stack (A/B/C). En todas: <strong>light por defecto</strong>; <span class="u-mono">&lt;html data-theme="dark"&gt;</span> activa el modo oscuro, y los componentes consumen <strong>solo aliases semánticos</strong>, nunca hex.</p>
 
     <h3>Instalar desde npm (recomendado)</h3>
-    <p>Un solo paquete con los dos sistemas en subrutas <span class="u-mono">/celeste/</span> y <span class="u-mono">/nocturna/</span>. Instálalo y usa las vías A/B/C apuntando a la subruta, en vez de a un archivo copiado.</p>
+    <p>Un solo paquete con todos los sistemas, cada uno en su subruta; Celeste Clásica vive en <span class="u-mono">/celeste/</span>. Instálalo y usa las vías A/B/C apuntando a la subruta, en vez de a un archivo copiado.</p>
     <div class="ds-code-box"><button class="ds-copy">Copiar</button>
 <pre class="ds-pre"><code>npm i @higinio/design-css
 
@@ -3283,20 +3455,23 @@ npm i tailwindcss @tailwindcss/postcss
   <section id="mcp">
     <p class="ds-eyebrow">Sistema</p>
     <h2>MCP</h2>
-    <p class="ds-lead">El paquete <span class="code">@higinio/design-mcp</span> expone ambos sistemas de diseño — Celeste Clásica y Nocturna Eléctrica — a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
+    <p class="ds-lead">El paquete <span class="code">@higinio/design-mcp</span> expone los sistemas de diseño de Higinio Sosa, entre ellos Celeste Clásica (<span class="u-mono">system="celeste"</span>), a cualquier IDE o cliente compatible con Model Context Protocol: tokens, componentes, reglas duras y validación de código. Complementa a las skills de Claude, no las reemplaza: misma fuente de verdad, accesible también fuera del entorno de Claude.</p>
 
-    <h3>Las 8 tools</h3>
+    <h3>Las 11 tools</h3>
     <div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto">
       <table class="table">
         <thead><tr><th>Tool</th><th>Qué hace</th></tr></thead>
         <tbody>
           <tr><td class="u-mono">list_design_systems</td><td>Lista los sistemas de diseño disponibles.</td></tr>
-          <tr><td class="u-mono">get_token</td><td>Devuelve el valor resuelto de un token o alias de un sistema.</td></tr>
+          <tr><td class="u-mono">get_token</td><td>Resuelve un alias semántico o un token DTCG por path a su valor.</td></tr>
           <tr><td class="u-mono">search_tokens</td><td>Busca tokens por nombre, categoría o valor.</td></tr>
           <tr><td class="u-mono">list_components</td><td>Lista los componentes documentados de un sistema.</td></tr>
           <tr><td class="u-mono">get_component_spec</td><td>Devuelve la especificación completa de un componente: estados, medidas, variantes.</td></tr>
           <tr><td class="u-mono">get_rules</td><td>Devuelve las reglas duras (no negociables) del sistema.</td></tr>
           <tr><td class="u-mono">validate_code</td><td>Audita CSS/HTML contra las reglas del sistema — hex directos, contraste, aliases.</td></tr>
+          <tr><td class="u-mono">validate_motion</td><td>Audita el motion contra las reglas del sistema: <span class="u-mono">transition</span> sobre todas las propiedades, ease-in en entradas, propiedades de layout, duraciones por encima de <span class="u-mono">--duration-page</span>.</td></tr>
+          <tr><td class="u-mono">check_slop</td><td>Detecta clichés de diseño generado por IA: gradientes, glassmorphism, sombras de negro puro, fuentes genéricas y copy de marketing.</td></tr>
+          <tr><td class="u-mono">checklist_preflight</td><td>Checklist estático de pre-producción sobre HTML/CSS: metadatos, headings, imágenes y accesibilidad de controles.</td></tr>
           <tr><td class="u-mono">generate_snippet</td><td>Genera un snippet de componente listo para usar, con los aliases correctos.</td></tr>
         </tbody>
       </table>
@@ -3390,6 +3565,31 @@ npm i tailwindcss @tailwindcss/postcss
   </div>
 </div>
 
+<!-- Navegación móvil del Sidebar contraíble (§10.24): Drawer --left -->
+<div class="drawer drawer--left" id="demoNavDrawer" role="dialog" aria-modal="true" aria-labelledby="demoNavDrawerTitle">
+  <div class="drawer__overlay" data-drawer-close></div>
+  <div class="drawer__panel" tabindex="-1">
+    <div class="drawer__header">
+      <h4 class="drawer__title" id="demoNavDrawerTitle">Navegación</h4>
+      <button class="icon-btn icon-btn--ghost" data-drawer-close aria-label="Cerrar"><svg><use href="#i-x"/></svg></button>
+    </div>
+    <nav class="drawer__body" aria-label="Navegación de ejemplo">
+      <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG1">
+        <span class="sidebar__group-label" id="demoNavDrawerG1">Trabajo</span>
+        <a class="sidebar__item is-active" href="#comp-navegacion" aria-current="page" data-drawer-close><svg aria-hidden="true"><use href="#i-home"/></svg><span class="sidebar__label">Inicio</span></a>
+        <a class="sidebar__item" href="#comp-navegacion" data-drawer-close><svg aria-hidden="true"><use href="#i-folder"/></svg><span class="sidebar__label">Proyectos</span></a>
+        <a class="sidebar__item" href="#comp-navegacion" data-drawer-close><svg aria-hidden="true"><use href="#i-calendar"/></svg><span class="sidebar__label">Calendario</span></a>
+      </div>
+      <div class="sidebar__group" role="group" aria-labelledby="demoNavDrawerG2">
+        <span class="sidebar__group-label" id="demoNavDrawerG2">Equipo</span>
+        <a class="sidebar__item" href="#comp-navegacion" data-drawer-close><svg aria-hidden="true"><use href="#i-chart"/></svg><span class="sidebar__label">Informes</span></a>
+        <a class="sidebar__item" href="#comp-navegacion" data-drawer-close><svg aria-hidden="true"><use href="#i-user"/></svg><span class="sidebar__label">Personas</span></a>
+        <a class="sidebar__item" href="#comp-navegacion" data-drawer-close><svg aria-hidden="true"><use href="#i-inbox"/></svg><span class="sidebar__label">Bandeja</span></a>
+      </div>
+    </nav>
+  </div>
+</div>
+
 <!-- Drawer de demostración (§10.29) -->
 <div class="drawer drawer--right" id="demoDrawer" role="dialog" aria-modal="true" aria-labelledby="demoDrawerTitle">
   <div class="drawer__overlay" data-drawer-close></div>
@@ -3843,6 +4043,31 @@ npm i tailwindcss @tailwindcss/postcss
     });
   });
 
+  /* ---------- Sidebar contraíble (§10.24): riel de iconos ---------- */
+  Array.prototype.forEach.call(d.querySelectorAll(".sidebar__toggle"), function (btn) {
+    var nav = d.getElementById(btn.getAttribute("aria-controls"));
+    var label = btn.querySelector(".sidebar__label");
+    if (!nav) return;
+    btn.addEventListener("click", function () {
+      var collapsed = nav.classList.toggle("is-collapsed");
+      btn.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      if (label) label.textContent = collapsed ? "Expandir" : "Contraer";
+    });
+  });
+
+  /* ---------- Chip de métrica (§10.22): sumar un vaso ---------- */
+  var waterChip = d.getElementById("dsWaterChip");
+  if (waterChip) {
+    var waterValue = waterChip.querySelector(".metric-chip__value");
+    var waterMax = 8, water = 3;
+    waterChip.addEventListener("click", function () {
+      water = water >= waterMax ? 0 : water + 1;
+      waterValue.textContent = water + " de " + waterMax;
+      waterChip.setAttribute("aria-label", "Agua: " + water + " de " + waterMax + " vasos. " +
+        (water < waterMax ? "Sumar un vaso" : "Empezar de nuevo"));
+    });
+  }
+
   /* ---------- Toast ---------- */
   var TOAST_DATA = {
     success: ["i-circle-check", "Cambios guardados", "El proyecto se actualizó correctamente."],
@@ -3988,6 +4213,7 @@ npm i tailwindcss @tailwindcss/postcss
     if (!dr) return;
     drawerTrigger = trigger || d.activeElement;
     dr.classList.add("is-open");
+    if (drawerTrigger.hasAttribute("aria-expanded")) drawerTrigger.setAttribute("aria-expanded", "true");
     var f = modalFocusables(dr);
     var panel = dr.querySelector(".drawer__panel");
     window.setTimeout(function () { (f[0] || panel).focus(); }, 0);
@@ -3995,6 +4221,7 @@ npm i tailwindcss @tailwindcss/postcss
   function closeDrawer(dr) {
     if (!dr || !dr.classList.contains("is-open")) return;
     dr.classList.remove("is-open");
+    if (drawerTrigger && drawerTrigger.hasAttribute("aria-expanded")) drawerTrigger.setAttribute("aria-expanded", "false");
     if (drawerTrigger && typeof drawerTrigger.focus === "function") drawerTrigger.focus();
     drawerTrigger = null;
   }
@@ -4152,6 +4379,7 @@ npm i tailwindcss @tailwindcss/postcss
     var dpInput = d.getElementById("dpInput");
     var dpCal = d.getElementById("dpCal");
     var dpGrid = d.getElementById("dpGrid");
+    var dpTable = dpGrid.parentNode;
     var dpTitle = dp.querySelector(".calendar__title");
     var MONTHS = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
       "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
@@ -4168,13 +4396,20 @@ npm i tailwindcss @tailwindcss/postcss
     function dpRender() {
       var y = view.getFullYear(), m = view.getMonth();
       dpTitle.textContent = MONTHS[m] + " " + y;
-      dpGrid.setAttribute("aria-label", MONTHS[m] + " " + y);
+      dpTable.setAttribute("aria-label", MONTHS[m] + " " + y);
       dpGrid.innerHTML = "";
       var startDow = (new Date(y, m, 1).getDay() + 6) % 7; // lunes = 0
       var daysInMonth = new Date(y, m + 1, 0).getDate();
       var weeks = Math.ceil((startDow + daysInMonth) / 7);
       var start = new Date(y, m, 1 - startDow);
+      var week = null;
       for (var i = 0; i < weeks * 7; i++) {
+        if (i % 7 === 0) {
+          week = d.createElement("div");
+          week.className = "calendar__week";
+          week.setAttribute("role", "row");
+          dpGrid.appendChild(week);
+        }
         var cell = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
         var btn = d.createElement("button");
         btn.type = "button";
@@ -4189,7 +4424,7 @@ npm i tailwindcss @tailwindcss/postcss
         btn.setAttribute("aria-label", fmtLong.format(cell));
         btn.tabIndex = sameDay(cell, focusDate) ? 0 : -1;
         btn.setAttribute("data-ts", String(cell.getTime()));
-        dpGrid.appendChild(btn);
+        week.appendChild(btn);
       }
     }
     function dpButtonFor(dt) { return dpGrid.querySelector('[data-ts="' + atMidnight(dt).getTime() + '"]'); }
@@ -4208,7 +4443,6 @@ npm i tailwindcss @tailwindcss/postcss
     }
     function dpOpen() {
       dp.classList.add("is-open");
-      dpInput.setAttribute("aria-expanded", "true");
       focusDate = new Date(selected);
       view = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
       dpRender();
@@ -4217,7 +4451,6 @@ npm i tailwindcss @tailwindcss/postcss
     function dpClose(returnFocus) {
       if (!dp.classList.contains("is-open")) return;
       dp.classList.remove("is-open");
-      dpInput.setAttribute("aria-expanded", "false");
       if (returnFocus) dpInput.focus();
     }
     function dpSelect(dt) {