@higinio/design-mcp 0.1.0 → 0.1.1

package/assets/nocturna/framework.css

@@ -16,6 +16,7 @@
   /* -- Primitivos: acento -- */
   --accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
   --accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
+  --accent-800: #12506f; /* solo light: texto de acción en hover */
 
   /* -- Primitivos: índigo -- */
   --indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
@@ -24,6 +25,7 @@
   /* -- Primitivos: escala nocturna -- */
   --night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
   --night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
+  --night-450: #5f6575; /* texto atenuado en light */
   --night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
   --night-100: #e8eaef; --night-50: #f6f7f9;
 
@@ -146,27 +148,28 @@
   --border-strong: #b9c3d1;
   --text-primary: #14171f;
   --text-secondary: #3d4354;
-  --text-muted: #6b7183;
+  --text-muted: #5f6575; /* night-400 caía a 4.27:1 sobre --surface-3 */
   --text-disabled: #9aa0b0;
   --text-heading: #0b0d12;
   --text-on-accent: #010203; /* el CTA no cambia */
-  --success: #15803d; --success-bg: #e3f5ea;
-  --warning: #a16207; --warning-bg: #fbf3dd;
-  --danger: #c03535;  --danger-bg: #fbe7e7;
-  --info: #1f87bb;    --info-bg: #e3f2fb;
+  /* Los semánticos son texto sobre su propio --*-bg tintado: se calibran contra ese fondo. */
+  --success: #166534; --success-bg: #e3f5ea;
+  --warning: #854d0e; --warning-bg: #fbf3dd;
+  --danger: #b02c2c;  --danger-bg: #fbe7e7;
+  --info: #186a94;    --info-bg: #e3f2fb;
   --accent-ghost-hover: rgba(31,135,187,.08);
   --accent-ghost-active: rgba(31,135,187,.14);
   --accent-selected: rgba(82,186,237,.12);
   --overlay: rgba(20,23,31,.45);
 
-  --link: #1f87bb;
-  --link-hover: #186a94;
-  --focus-color: #1f87bb;
+  --link: #186a94;       /* accent-700 · 5.95:1 — accent-600 solo daba 4.01:1 */
+  --link-hover: #12506f; /* accent-800 · en light el hover oscurece */
+  --focus-color: #1f87bb; /* accent-600 se queda: es UI (4.01 ≥ 3), no texto */
   --border-hover: #b9c3d1;
   --outline-hover-bg: #eaf1f7;
   --outline-active-bg: #d8dfe8;
   --text-on-danger: #ffffff;
-  --data-color: #1f87bb;
+  --data-color: #186a94; /* pinta cifras y .progress__value: es TEXTO, necesita 4.5 */
   --elevated-border: #d8dfe8;
   --card-border: #d8dfe8;
   --code-color: #186a94;
@@ -376,6 +379,8 @@ a:hover { color: var(--link-hover); }
    ============================================================ */
 .field { display: flex; flex-direction: column; margin-bottom: var(--form-gap); }
 .field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
+/* Campo obligatorio: asterisco decorativo; la semántica va en required/aria-required del control */
+.field--required > .field__label::after { content: "*"; margin-left: 2px; color: var(--danger); font-weight: 600; }
 .field__help { font-size: var(--text-sm); color: var(--text-muted); margin-top: 6px; }
 .field__error {
   display: inline-flex; align-items: center; gap: 6px;
@@ -519,6 +524,12 @@ a:hover { color: var(--link-hover); }
   margin-top: -2px;
 }
 .checkbox:checked::after { transform: rotate(-45deg) scale(1); }
+/* Indeterminate: guion horizontal, no el check. Solo por JS (el.indeterminate = true) */
+.checkbox:indeterminate { background: var(--accent-400); border-color: var(--accent-400); }
+.checkbox:indeterminate::after {
+  content: ""; width: 10px; height: 2px; margin-top: 0;
+  border: 0; border-radius: var(--radius-full); background: var(--text-on-accent); transform: none;
+}
 .radio::after {
   content: ""; width: 8px; height: 8px; border-radius: var(--radius-full);
   background: var(--text-on-accent); transform: scale(0);
@@ -600,6 +611,17 @@ a:hover { color: var(--link-hover); }
 .avatar__dot--away    { background: var(--warning); }
 .avatar__dot--offline { background: var(--border); }
 
+/* AvatarGroup — avatares solapados + chip +N.
+   Borde 2px del color del fondo (--surface-1 en tarjetas, --bg en el lienzo) para separar. */
+.avatar-group { display: inline-flex; align-items: center; }
+.avatar-group .avatar { border: 2px solid var(--surface-1); }
+.avatar-group .avatar:not(:first-child) { margin-left: -8px; }
+.avatar-group__more {
+  background: var(--surface-3); color: var(--text-secondary);
+  font-family: var(--font-body); font-weight: 600;
+  letter-spacing: 0; text-transform: none;
+}
+
 /* ============================================================
    12B. DIVIDER — .divider (hairline), .divider--label, .divider--vertical
    ============================================================ */
@@ -807,9 +829,39 @@ a:hover { color: var(--link-hover); }
 }
 .table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
 .table tbody tr:hover { background: var(--row-hover); }
-.table tbody tr.is-selected { background: var(--accent-selected); box-shadow: inset 2px 0 0 var(--accent-400); }
 .table .num, .table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
 
+/* Zebra — filas pares en surface-2; hover y selección mandan sobre la banda */
+.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
+.table--zebra tbody tr:hover { background: var(--row-hover); }
+
+/* Sticky header — dentro de un contenedor con overflow: auto y altura acotada */
+.table--sticky thead th { position: sticky; top: 0; z-index: 1; }
+
+/* Header ordenable — botón dentro del th + icono; el estado vive en aria-sort del th */
+.th-sort {
+  display: inline-flex; align-items: center; gap: 6px;
+  margin: 0; padding: 0; border: 0; background: transparent;
+  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
+  cursor: pointer;
+}
+.th-sort:hover { color: var(--text-secondary); }
+.th-sort:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
+.sort-icon {
+  width: 14px; height: 14px; flex: none; opacity: .45;
+  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
+}
+.table th[aria-sort="ascending"] .sort-icon,
+.table th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--accent-400); }
+.table th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
+
+/* Columna de selección (checkbox en th y en cada fila) */
+.table .col-select { width: 44px; text-align: center; padding-left: var(--space-2); padding-right: var(--space-2); }
+
+/* Fila seleccionada — .row--selected (contrato); .is-selected se mantiene como alias */
+.table tbody tr.is-selected,
+.table tbody tr.row--selected { background: var(--accent-selected); box-shadow: inset 2px 0 0 var(--accent-400); }
+
 /* ============================================================
    19. NAVEGACIÓN — .navbar, .sidebar, .tabs, .breadcrumbs
    ============================================================ */
@@ -990,3 +1042,270 @@ a:hover { color: var(--link-hover); }
   position: absolute; width: 1px; height: 1px; margin: -1px;
   clip-path: inset(50%); overflow: hidden; white-space: nowrap;
 }
+
+/* ============================================================
+   25. COMBOBOX / AUTOCOMPLETE — .combobox + SEARCH — .search
+   El listado vive sobre --surface-2 (superficie de dropdowns).
+   ============================================================ */
+.combobox { position: relative; }
+.combobox__input { width: 100%; } /* consume .input para el resto de estilos */
+.combobox__list {
+  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
+  margin: 0; padding: 6px; list-style: none; max-height: 264px; overflow: auto;
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+}
+.combobox__list[hidden] { display: none; }
+.combobox__option {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  padding: 10px 12px; border-radius: var(--radius-sm);
+  color: var(--text-primary); font-size: var(--text-sm); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.combobox__option[hidden] { display: none; }
+/* .is-active = resaltado por teclado; [aria-selected] = la elegida (fondo + icono, no solo color) */
+.combobox__option.is-active { background: var(--surface-3); }
+.combobox__option[aria-selected="true"] { background: var(--accent-selected); color: var(--accent-300); }
+[data-theme="light"] .combobox__option[aria-selected="true"] { color: var(--link); }
+.combobox__check { display: none; margin-left: auto; width: 16px; height: 16px; color: var(--accent-400); flex: none; }
+.combobox__option[aria-selected="true"] .combobox__check { display: block; }
+
+/* Search — wrapper con lupa (aria-hidden) + botón limpiar (×, aria-label="Limpiar") */
+.search { position: relative; display: flex; align-items: center; }
+.search__icon {
+  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
+  width: 18px; height: 18px; color: var(--text-disabled); pointer-events: none;
+}
+.search__input { width: 100%; padding-left: 40px; padding-right: 40px; } /* consume .input */
+/* Oculta el clear nativo de WebKit para no duplicar el affordance del .search__clear */
+.search__input::-webkit-search-cancel-button,
+.search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
+.search__clear {
+  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
+  display: inline-grid; place-content: center; width: 28px; height: 28px; padding: 0;
+  border: 0; border-radius: var(--radius-full); background: transparent;
+  color: var(--text-muted); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.search__clear:hover { background: var(--surface-3); color: var(--text-primary); }
+.search__clear svg { width: 16px; height: 16px; }
+.search__clear[hidden] { display: none; }
+
+/* ============================================================
+   26. DRAWER / SHEET — .drawer + __overlay + __panel (focus-trap por JS)
+   Motion: transform translate + fade del overlay (--duration-slow).
+   El overlay reutiliza --overlay del modal; SIN blur nuevo.
+   ============================================================ */
+.drawer { position: fixed; inset: 0; z-index: 100; }
+.drawer[hidden] { display: none; }
+.drawer__overlay {
+  position: absolute; inset: 0; background: var(--overlay);
+  opacity: 0; transition: opacity var(--duration-slow) var(--ease-out);
+}
+.drawer.is-open .drawer__overlay { opacity: 1; }
+.drawer__panel {
+  position: absolute; top: 0; right: 0; bottom: 0;
+  display: flex; flex-direction: column;
+  width: min(400px, 100%); padding: var(--card-padding);
+  background: var(--surface-2); border-left: 1px solid var(--elevated-border);
+  box-shadow: var(--shadow-3);
+  overflow-y: auto; overscroll-behavior: contain;
+  transform: translateX(100%);
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+.drawer.is-open .drawer__panel { transform: none; }
+/* Variante izquierda */
+.drawer--left .drawer__panel {
+  right: auto; left: 0; border-left: 0; border-right: 1px solid var(--elevated-border);
+  transform: translateX(-100%);
+}
+.drawer--left.is-open .drawer__panel { transform: none; }
+/* Variante inferior (sheet) */
+.drawer--bottom .drawer__panel {
+  top: auto; left: 0; right: 0; width: 100%; max-height: 80dvh;
+  border-left: 0; border-top: 1px solid var(--elevated-border);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  transform: translateY(100%);
+}
+.drawer--bottom.is-open .drawer__panel { transform: none; }
+.drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
+.drawer__title { font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; letter-spacing: normal; color: var(--text-heading); margin: 0; }
+.drawer__body { flex: 1; }
+.drawer__footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
+
+/* ============================================================
+   27. POPOVER — .popover + __trigger + __panel (abre por CLICK)
+   Motion: fade + scale(0.96→1) desde el transform-origin del trigger.
+   Panel sobre --surface-2. Se distingue del Tooltip: click, no hover.
+   ============================================================ */
+.popover { position: relative; display: inline-flex; }
+.popover__panel {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  min-width: 240px; max-width: 320px; padding: var(--space-4);
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+  transform-origin: top left; /* origin-aware: crece desde el disparador */
+  opacity: 0; transform: scale(.96); visibility: hidden;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out),
+              visibility 0s linear var(--duration-base);
+}
+.popover.is-open .popover__panel {
+  opacity: 1; transform: none; visibility: visible;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out),
+              visibility 0s;
+}
+/* Alineado a la derecha del disparador */
+.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
+
+/* ============================================================
+   28. BUTTON GROUP — .btn-group (bordes compartidos, radios en extremos)
+   ============================================================ */
+.btn-group { display: inline-flex; }
+.btn-group > .btn { border-radius: 0; }
+.btn-group > .btn:not(:first-child) { margin-left: -1px; }
+.btn-group > .btn:first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
+.btn-group > .btn:last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+/* El botón enfocado/hover sube de z-index para que su borde no lo tape el vecino */
+.btn-group > .btn:hover, .btn-group > .btn:focus-visible, .btn-group > .btn.is-active { z-index: 1; }
+
+/* ============================================================
+   29. DATEPICKER — .datepicker + calendario en popover
+   El panel reutiliza el look de .popover__panel sobre --surface-2.
+   Grid role="grid"; días como <button role="gridcell">.
+   ============================================================ */
+.datepicker { position: relative; }
+.datepicker__input { cursor: pointer; } /* consume .input; el icono va con .input-wrap */
+.datepicker__calendar {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  padding: var(--space-4);
+  background: var(--surface-2); border: 1px solid var(--elevated-border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-3);
+}
+.datepicker__calendar[hidden] { display: none; }
+
+.calendar { width: 252px; }
+.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
+.calendar__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-heading); } /* mes en minúscula (es) */
+.calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--space-1); }
+.calendar__weekdays span {
+  display: grid; place-items: center; height: 28px;
+  font-size: var(--text-xs); font-weight: 500; color: var(--text-muted);
+}
+.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.calendar__week { display: contents; } /* fila semántica (role="row") sin romper el grid */
+.calendar__day {
+  display: grid; place-items: center; width: 100%; height: 36px; padding: 0;
+  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
+  color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.calendar__day:hover:not([disabled]):not(.calendar__day--selected) { background: var(--surface-3); }
+/* Hoy: aro de acento por borde (no glow) + texto de acento */
+.calendar__day--today { border-color: var(--accent-400); color: var(--accent-300); }
+/* Seleccionado: fondo de acento + texto oscuro + peso — no depende solo del color */
+.calendar__day--selected { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); font-weight: 600; }
+.calendar__day--outside { color: var(--text-disabled); }
+.calendar__day[disabled] { color: var(--text-disabled); opacity: .5; cursor: not-allowed; }
+
+/* ============================================================
+   30. FILE UPLOAD — .file-upload (dropzone) + __list
+   El input file real va oculto accesiblemente (.visually-hidden).
+   ============================================================ */
+.file-upload { display: block; }
+.file-upload__label {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
+  padding: var(--space-8) var(--space-6); text-align: center;
+  background: var(--surface-1); border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out),
+              color var(--duration-fast) var(--ease-out);
+}
+.file-upload__label > svg { width: 28px; height: 28px; color: var(--text-muted); }
+.file-upload__button { color: var(--link); font-weight: 600; }
+.file-upload__hint { font-size: var(--text-xs); color: var(--text-disabled); }
+@media (hover: hover) and (pointer: fine) {
+  .file-upload__label:hover { border-color: var(--border-hover); background: var(--surface-2); color: var(--text-secondary); }
+}
+/* El ring se pinta sobre el label porque el input está oculto */
+.file-upload__input:focus-visible + .file-upload__label { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
+/* Arrastrando encima: acento (icono + borde, no solo color) */
+.file-upload.is-dragover .file-upload__label { border-color: var(--accent-400); background: var(--accent-ghost-hover); color: var(--text-secondary); }
+
+.file-upload__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+.file-upload__item {
+  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
+  padding: var(--space-3); background: var(--surface-2);
+  border: 1px solid var(--border); border-radius: var(--radius-md);
+}
+.file-upload__item > svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
+.file-upload__item > div { min-width: 0; } /* permite truncar el nombre */
+.file-upload__item .progress { margin-top: var(--space-2); }
+.file-upload__name { display: block; font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-upload__size { display: block; font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+/* Error: borde + icono + texto en danger, nunca solo por color */
+.file-upload__item--error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-bg); }
+.file-upload__item--error > svg { color: var(--danger); }
+.file-upload__item--error .file-upload__size { color: var(--danger); }
+.file-upload__remove {
+  display: inline-grid; place-content: center; width: 28px; height: 28px; padding: 0; flex: none;
+  border: 0; border-radius: var(--radius-full); background: transparent;
+  color: var(--text-muted); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
+}
+.file-upload__remove:hover { background: var(--surface-3); color: var(--text-primary); }
+.file-upload__remove svg { width: 16px; height: 16px; }
+
+/* ============================================================
+   31. STEPPER / WIZARD — .stepper (<ol>) + .step
+   Completo → check (no solo color); actual → acento.
+   ============================================================ */
+.stepper { display: flex; list-style: none; margin: 0; padding: 0; }
+.step {
+  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
+  gap: var(--space-2); text-align: center; min-width: 0;
+}
+.step__marker {
+  position: relative; z-index: 1;
+  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
+  border-radius: var(--radius-full); border: 2px solid var(--border);
+  background: var(--surface-1); color: var(--text-muted);
+  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums;
+}
+.step__marker svg { width: 16px; height: 16px; }
+.step__label { font-size: var(--text-sm); color: var(--text-muted); }
+.step__connector {
+  position: absolute; top: 15px; left: 50%; z-index: 0;
+  width: 100%; height: 2px; background: var(--border);
+}
+/* Completo */
+.step--complete .step__marker { background: var(--accent-400); border-color: var(--accent-400); color: var(--text-on-accent); }
+.step--complete .step__label { color: var(--text-secondary); }
+.step--complete .step__connector { background: var(--accent-400); }
+/* Actual */
+.step--current .step__marker { border-color: var(--accent-400); color: var(--accent-300); }
+.step--current .step__label { color: var(--text-primary); font-weight: 600; }
+/* Próximo = valores por defecto (atenuado) */
+
+/* Variante vertical */
+.stepper--vertical { flex-direction: column; }
+.stepper--vertical .step { flex-direction: row; align-items: flex-start; gap: var(--space-3); text-align: left; padding-bottom: var(--space-6); }
+.stepper--vertical .step:last-child { padding-bottom: 0; }
+.stepper--vertical .step__label { padding-top: var(--space-1); }
+.stepper--vertical .step__connector { top: 34px; left: 15px; width: 2px; height: calc(100% - 34px); }
+
+/* ============================================================
+   32. KBD — .kbd (tecla / atajo de teclado)
+   Combos: varias .kbd con un "+" literal entre ellas.
+   ============================================================ */
+.kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 6px;
+  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1;
+  color: var(--text-secondary); background: var(--surface-2);
+  border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-1);
+}