@higinio/design-mcp 0.1.0 → 0.1.1

package/assets/celeste/styleguide.html

@@ -291,6 +291,8 @@ html, body { overflow-x: clip; }
 .field__help { font-size: var(--text-sm); color: var(--text-muted); }
 .field__error { font-size: var(--text-sm); color: var(--danger-500); display: inline-flex; align-items: center; gap: 6px; }
 .field__error svg { width: 14px; height: 14px; flex: none; }
+/* Campo obligatorio (§10.4): asterisco decorativo; el input lleva required/aria-required */
+.field--required .field__label::after { content: " *"; color: var(--danger-500); }
 
 .input, .textarea, .select {
   width: 100%; font-family: var(--font-body); font-size: var(--text-base);
@@ -402,6 +404,15 @@ html, body { overflow-x: clip; }
 .checkbox input:checked ~ .checkbox__box svg { stroke-dashoffset: 0; }
 .checkbox input:focus-visible ~ .checkbox__box { box-shadow: var(--ring); }
 .checkbox input:disabled ~ * { opacity: .5; cursor: not-allowed; }
+/* Estado indeterminate (§10.9): guion horizontal para "seleccionar todo" parcial */
+.checkbox__box { position: relative; }
+.checkbox input:indeterminate ~ .checkbox__box { background: var(--accent); border-color: var(--accent); }
+.checkbox input:indeterminate ~ .checkbox__box svg { visibility: hidden; }
+.checkbox input:indeterminate ~ .checkbox__box::after {
+  content: ""; position: absolute; top: 50%; left: 50%;
+  width: 10px; height: 2px;
+  background: var(--text-on-primary); transform: translate(-50%, -50%);
+}
 
 .radio__dot {
   width: 20px; height: 20px; flex: none; display: grid; place-items: center;
@@ -504,6 +515,19 @@ html, body { overflow-x: clip; }
 .avatar__dot--busy   { background: var(--danger-500); }
 .avatar__dot--away   { background: var(--warning-500); }
 
+/* AvatarGroup (§10.27): stack solapado con anillo de superficie */
+.avatar-group { display: inline-flex; align-items: center; }
+.avatar-group .avatar { border: 2px solid var(--surface); border-radius: var(--radius-full); }
+.avatar-group .avatar + .avatar,
+.avatar-group .avatar-group__more { margin-left: -8px; }
+.avatar-group__more {
+  display: grid; place-items: center; flex: none;
+  width: 36px; height: 36px; border-radius: var(--radius-full);
+  border: 2px solid var(--surface);
+  background: var(--accent-soft-strong); color: var(--text-on-primary-solid);
+  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold);
+}
+
 .divider { border: 0; border-top: var(--border-width) solid var(--border); margin: var(--space-4) 0; }
 .divider--label {
   display: flex; align-items: center; gap: 12px; border: 0; margin: var(--space-4) 0;
@@ -755,6 +779,30 @@ html, body { overflow-x: clip; }
 .table tbody tr.is-selected { background: var(--accent-soft); }
 .table .num, .table td.num, .table th.num { text-align: right; font-family: var(--font-mono); }
 
+/* Variantes de tabla (§10.21): zebra, sticky header, orden y selección */
+.table--zebra tbody tr:nth-child(even) { background: var(--surface-alt); }
+.table--zebra tbody tr:nth-child(even):hover { background: var(--bg); }
+.table--sticky thead th { position: sticky; top: 0; z-index: 1; }
+.table tbody tr.row--selected,
+.table tbody tr.row--selected:hover { background: var(--accent-soft); }
+.table .col-select { width: 44px; text-align: center; }
+.table .col-select .checkbox { display: inline-flex; justify-content: center; gap: 0; }
+
+.th-sort {
+  display: inline-flex; align-items: center; gap: 6px; width: 100%;
+  border: 0; background: transparent; cursor: pointer;
+  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left;
+}
+.th-sort--num { justify-content: flex-end; }
+.th-sort .sort-icon {
+  width: 14px; height: 14px; flex: none; opacity: .35;
+  transition: opacity var(--duration-fast) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
+}
+.table th[aria-sort="ascending"] .sort-icon,
+.table th[aria-sort="descending"] .sort-icon { opacity: 1; color: var(--accent); }
+.table th[aria-sort="descending"] .sort-icon { transform: rotate(180deg); }
+
 .stat__label {
   display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
   font-size: var(--text-sm); color: var(--text-muted);
@@ -864,6 +912,298 @@ html, body { overflow-x: clip; }
   border-radius: var(--radius-sm); padding: 1px 6px;
 }
 
+/* Combobox / Autocomplete (§10.28) */
+.combobox { position: relative; }
+.combobox__input {
+  width: 100%; height: var(--control-height-md); padding: 0 14px;
+  font-family: var(--font-body); font-size: var(--text-base);
+  color: var(--text-primary); background: var(--surface);
+  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+.combobox__input:hover:not(:disabled):not(:focus) { border-color: var(--text-disabled); }
+.combobox__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
+.combobox__input:disabled { background: var(--surface-alt); color: var(--text-disabled); cursor: not-allowed; }
+.combobox__list {
+  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
+  max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
+  background: var(--surface); border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
+  opacity: 0; transform: translateY(-4px); pointer-events: none;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
+}
+.combobox.is-open .combobox__list { opacity: 1; transform: none; pointer-events: auto; }
+.combobox__option {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; border-radius: var(--radius-sm);
+  font-size: var(--text-sm); color: var(--text-primary); cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.combobox__option .combobox__check {
+  width: 16px; height: 16px; margin-left: auto; flex: none;
+  color: var(--accent); opacity: 0;
+}
+.combobox__option.is-active { background: var(--accent-soft); }
+.combobox__option[aria-selected="true"] { color: var(--link); font-weight: var(--weight-medium); }
+.combobox__option[aria-selected="true"] .combobox__check { opacity: 1; }
+.combobox__empty { padding: 10px 12px; font-size: var(--text-sm); color: var(--text-muted); }
+
+/* Búsqueda (§10.28) */
+.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%; height: var(--control-height-md); padding: 0 40px;
+  font-family: var(--font-body); font-size: var(--text-base);
+  color: var(--text-primary); background: var(--surface);
+  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
+.search__input:hover:not(:focus) { border-color: var(--text-disabled); }
+.search__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
+.search__clear {
+  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
+  display: none; width: 32px; height: 32px; align-items: center; justify-content: center;
+  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-alt); color: var(--text-primary); }
+.search__clear svg { width: 16px; height: 16px; }
+.search__input:not(:placeholder-shown) ~ .search__clear { display: inline-flex; }
+
+/* Drawer / Sheet (§10.29) */
+.drawer {
+  position: fixed; inset: 0; z-index: 100;
+  visibility: hidden; pointer-events: none;
+  transition: visibility 0s linear var(--duration-base);
+}
+.drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
+.drawer__overlay {
+  position: absolute; inset: 0; background: var(--overlay);
+  opacity: 0; transition: opacity var(--duration-base) var(--ease-out);
+}
+.drawer.is-open .drawer__overlay { opacity: 1; }
+.drawer__panel {
+  position: absolute; inset: 0 0 0 auto; width: min(400px, 100%);
+  display: flex; flex-direction: column; gap: var(--space-5);
+  padding: var(--card-padding); background: var(--surface);
+  box-shadow: var(--shadow-xl); overflow-y: auto; overscroll-behavior: contain;
+  transform: translateX(100%);
+  transition: transform var(--duration-base) var(--ease-in);
+}
+.drawer.is-open .drawer__panel {
+  transform: none;
+  transition: transform var(--duration-slow) var(--ease-out);
+}
+.drawer--right .drawer__panel { inset: 0 0 0 auto; transform: translateX(100%); }
+.drawer--left .drawer__panel { inset: 0 auto 0 0; transform: translateX(-100%); }
+.drawer--bottom .drawer__panel {
+  inset: auto 0 0 0; width: 100%; max-height: 85vh;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(100%);
+}
+.drawer__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
+}
+.drawer__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
+.drawer__body { flex: 1; }
+.drawer__footer {
+  display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: auto;
+}
+
+/* Popover (§10.30) */
+.popover { position: relative; display: inline-block; }
+.popover__panel {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  width: max-content; max-width: 300px; padding: var(--space-4);
+  background: var(--surface); border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
+  transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
+}
+.popover.is-open .popover__panel { opacity: 1; transform: none; pointer-events: auto; }
+.popover--right .popover__panel { left: auto; right: 0; transform-origin: top right; }
+
+/* ButtonGroup (§10.31) */
+.btn-group { display: inline-flex; }
+.btn-group .btn { border-radius: 0; }
+.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);
+}
+.btn-group .btn:not(:first-child) { margin-left: calc(var(--border-width) * -1); }
+.btn-group .btn:hover, .btn-group .btn:focus-visible { z-index: 1; }
+
+/* DatePicker (§10.32) */
+.datepicker { position: relative; display: inline-block; }
+.datepicker__input {
+  width: 100%; height: var(--control-height-md); padding: 0 40px 0 14px;
+  font-family: var(--font-body); font-size: var(--text-base);
+  color: var(--text-primary); background: var(--surface);
+  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              box-shadow var(--duration-fast) var(--ease-out);
+}
+.datepicker__input:hover:not(:disabled):not(:focus) { border-color: var(--text-disabled); }
+.datepicker__input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
+.datepicker__input:disabled { background: var(--surface-alt); color: var(--text-disabled); cursor: not-allowed; }
+.datepicker__icon {
+  position: absolute; right: 12px; top: calc(var(--control-height-md) / 2); transform: translateY(-50%);
+  width: 18px; height: 18px; color: var(--text-muted); pointer-events: none;
+}
+.datepicker__calendar {
+  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
+  width: max-content; padding: var(--space-4);
+  background: var(--surface); border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
+  transform-origin: top left; opacity: 0; transform: scale(.96); pointer-events: none;
+  transition: opacity var(--duration-base) var(--ease-out),
+              transform var(--duration-base) var(--ease-out);
+}
+.datepicker.is-open .datepicker__calendar { opacity: 1; transform: none; pointer-events: auto; }
+.datepicker--right .datepicker__calendar { left: auto; right: 0; transform-origin: top right; }
+
+.calendar { width: 15.75rem; }
+.calendar__header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--space-2); margin-bottom: var(--space-3);
+}
+.calendar__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
+.calendar__weekdays,
+.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
+.calendar__weekdays { margin-bottom: 4px; }
+.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);
+}
+.calendar__day {
+  display: flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; margin: 0 auto; padding: 0;
+  border: 0; border-radius: var(--radius-sm); background: transparent;
+  font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-primary);
+  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(--accent-soft); }
+.calendar__day--outside { color: var(--text-disabled); }
+.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; }
+
+/* FileUpload (§10.33) */
+.file-upload {
+  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
+  background: var(--surface);
+  transition: border-color var(--duration-fast) var(--ease-out),
+              background-color var(--duration-fast) var(--ease-out);
+}
+.file-upload.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
+.file-upload__input {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
+}
+.file-upload__label {
+  display: flex; flex-direction: column; align-items: center; text-align: center;
+  gap: var(--space-2); padding: var(--space-8) var(--space-6); cursor: pointer;
+}
+.file-upload__label > svg { width: 32px; height: 32px; color: var(--text-muted); }
+.file-upload__title { font-size: var(--text-sm); color: var(--text-secondary); }
+.file-upload__hint { font-size: var(--text-xs); color: var(--text-muted); }
+.file-upload__button {
+  display: inline-flex; align-items: center; justify-content: center;
+  height: var(--control-height-sm); padding: 0 16px; margin-top: var(--space-1);
+  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-md);
+  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary);
+  background: var(--surface);
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+.file-upload__label:hover .file-upload__button { background: var(--bg); }
+.file-upload__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+.file-upload__item {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-3); border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-md); background: var(--surface);
+}
+.file-upload__icon { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
+.file-upload__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
+.file-upload__name {
+  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.file-upload__size { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
+.file-upload__size svg { width: 12px; height: 12px; flex: none; }
+.file-upload__meta .progress { margin-top: 2px; }
+.file-upload__remove {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; 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-alt); color: var(--text-primary); }
+.file-upload__remove svg { width: 16px; height: 16px; }
+.file-upload__item--error { border-color: var(--danger-500); }
+.file-upload__item--error .file-upload__icon,
+.file-upload__item--error .file-upload__size { color: var(--danger-text); }
+
+/* Stepper / Wizard (§10.34) */
+.stepper { display: flex; list-style: none; margin: 0; padding: 0; }
+.step {
+  position: relative; flex: 1;
+  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
+}
+.step__marker {
+  position: relative; z-index: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex: none; border-radius: var(--radius-full);
+  border: 2px solid var(--border-strong); background: var(--surface);
+  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted);
+}
+.step__marker svg { width: 16px; height: 16px; }
+.step__label { font-size: var(--text-sm); color: var(--text-secondary); }
+.step__connector {
+  position: absolute; top: 16px; z-index: 0; left: 50%; right: -50%;
+  height: 2px; margin: 0 20px; background: var(--border);
+}
+.step--complete .step__marker { background: var(--accent); border-color: var(--accent); color: var(--text-on-primary); }
+.step--complete .step__label { color: var(--text-primary); }
+.step--complete .step__connector { background: var(--accent); }
+.step--current .step__marker { border-color: var(--accent); color: var(--accent); }
+.step--current .step__label { color: var(--text-primary); font-weight: var(--weight-semibold); }
+.stepper--vertical { flex-direction: column; align-items: stretch; }
+.stepper--vertical .step {
+  flex-direction: row; align-items: flex-start; text-align: left;
+  gap: var(--space-3); padding-bottom: var(--space-6);
+}
+.stepper--vertical .step:last-child { padding-bottom: 0; }
+.stepper--vertical .step__connector {
+  top: 36px; bottom: -4px; left: 15px; right: auto;
+  width: 2px; height: auto; margin: 0;
+}
+.stepper--vertical .step__label { padding-top: 5px; }
+
+/* Kbd (§10.35) */
+.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); line-height: 1;
+  color: var(--text-secondary); background: var(--surface);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
+}
+.kbd-combo { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: var(--text-xs); }
+
 .u-visually-hidden {
   position: absolute; width: 1px; height: 1px; margin: -1px;
   clip-path: inset(50%); overflow: hidden; white-space: nowrap;
@@ -1115,6 +1455,10 @@ html, body { overflow-x: clip; }
     <symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></symbol>
     <symbol id="i-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></symbol>
     <symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></symbol>
+    <symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/></symbol>
+    <symbol id="i-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></symbol>
+    <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></symbol>
+    <symbol id="i-arrow-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></symbol>
   </defs>
 </svg>
 
@@ -1160,6 +1504,7 @@ html, body { overflow-x: clip; }
       <a href="#comp-switch">Switch</a>
       <a href="#comp-badge-tag">Badge y Tag</a>
       <a href="#comp-avatar">Avatar</a>
+      <a href="#comp-avatar-group">AvatarGroup</a>
       <a href="#comp-divider">Divider</a>
       <a href="#comp-accordion">Accordion</a>
       <a href="#comp-tooltip">Tooltip</a>
@@ -1174,6 +1519,14 @@ html, body { overflow-x: clip; }
       <a href="#comp-navegacion">Navegación</a>
       <a href="#comp-skeleton">Skeleton y EmptyState</a>
       <a href="#comp-card">Card, Link y Code</a>
+      <a href="#comp-combobox">Combobox y búsqueda</a>
+      <a href="#comp-drawer">Drawer / Sheet</a>
+      <a href="#comp-popover">Popover</a>
+      <a href="#comp-button-group">ButtonGroup</a>
+      <a href="#comp-datepicker">DatePicker</a>
+      <a href="#comp-file-upload">FileUpload</a>
+      <a href="#comp-stepper">Stepper / Wizard</a>
+      <a href="#comp-kbd">Kbd</a>
     </div>
     <div class="ds-nav__group">Recursos</div>
     <a href="#motion">Motion</a>
@@ -1415,7 +1768,7 @@ html, body { overflow-x: clip; }
   <section id="componentes">
     <p class="ds-eyebrow">Biblioteca</p>
     <h2>Componentes</h2>
-    <p class="ds-lead">Los 26 componentes del sistema, renderizados en vivo con las clases del framework <span class="u-mono">celeste-clasica.css</span>. Cada bloque incluye su código de uso.</p>
+    <p class="ds-lead">Los 35 componentes del sistema, renderizados en vivo con las clases del framework <span class="u-mono">celeste-clasica.css</span>. Cada bloque incluye su código de uso.</p>
 
     <!-- Botones -->
     <div class="ds-component" id="comp-botones">
@@ -1499,8 +1852,12 @@ html, body { overflow-x: clip; }
     <!-- Input -->
     <div class="ds-component" id="comp-input">
       <h3>Input</h3>
-      <p class="ds-spec">Altura 44 px · label siempre visible (nunca placeholder como label) · focus con borde <span class="u-mono">--accent</span> + ring.</p>
+      <p class="ds-spec">Altura 44 px · label siempre visible (nunca placeholder como label) · focus con borde <span class="u-mono">--accent</span> + ring · obligatorio con <span class="u-mono">.field--required</span> (asterisco <span class="u-mono">--danger</span> + <span class="u-mono">required/aria-required</span>).</p>
       <div class="ds-demo ds-demo--col" style="max-width:420px">
+        <div class="field field--required">
+          <label class="field__label" for="demo-input-req">Nombre completo</label>
+          <input class="input" id="demo-input-req" type="text" required aria-required="true" autocomplete="name" placeholder="Tu nombre">
+        </div>
         <div class="field">
           <label class="field__label" for="demo-input-1">Correo electrónico</label>
           <input class="input" id="demo-input-1" type="email" placeholder="tu@correo.com">
@@ -1535,6 +1892,12 @@ html, body { overflow-x: clip; }
   &lt;span class="field__help"&gt;Nunca compartiremos tu correo.&lt;/span&gt;
 &lt;/div&gt;
 
+&lt;!-- Obligatorio: .field--required en el .field + required/aria-required en el input --&gt;
+&lt;div class="field field--required"&gt;
+  &lt;label class="field__label" for="nombre"&gt;Nombre completo&lt;/label&gt;
+  &lt;input class="input" id="nombre" required aria-required="true"&gt;
+&lt;/div&gt;
+
 &lt;!-- Estados: input--error (+ .field__error) · input--success · disabled
      Icono leading: envolver en .input-icon --&gt;</code></pre>
         </div>
@@ -1648,10 +2011,11 @@ html, body { overflow-x: clip; }
     <!-- Checkbox y Radio -->
     <div class="ds-component" id="comp-checkbox-radio">
       <h3>Checkbox y Radio</h3>
-      <p class="ds-spec">20 px · borde 2 px · check que se dibuja con <span class="u-mono">ease-spring</span> · label clicable con gap 10 px.</p>
+      <p class="ds-spec">20 px · borde 2 px · check que se dibuja con <span class="u-mono">ease-spring</span> · label clicable con gap 10 px · estado <span class="u-mono">indeterminate</span> (guion) para «seleccionar todo» parcial.</p>
       <div class="ds-demo">
         <label class="checkbox"><input type="checkbox" checked><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Recibir novedades</label>
         <label class="checkbox"><input type="checkbox"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Recordarme</label>
+        <label class="checkbox"><input type="checkbox" id="demoIndeterminate"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Seleccionar todo (parcial)</label>
         <label class="checkbox"><input type="checkbox" disabled><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Deshabilitado</label>
       </div>
       <div class="ds-demo" role="radiogroup" aria-label="Plan">
@@ -1673,7 +2037,10 @@ html, body { overflow-x: clip; }
   &lt;input type="radio" name="plan" checked&gt;
   &lt;span class="radio__dot"&gt;&lt;/span&gt;
   Plan mensual
-&lt;/label&gt;</code></pre>
+&lt;/label&gt;
+
+&lt;!-- Indeterminate: propiedad del DOM, no atributo HTML --&gt;
+&lt;!-- checkbox.indeterminate = true (guion horizontal) --&gt;</code></pre>
         </div>
       </details>
     </div>
@@ -1756,6 +2123,33 @@ html, body { overflow-x: clip; }
       </details>
     </div>
 
+    <!-- AvatarGroup -->
+    <div class="ds-component" id="comp-avatar-group">
+      <h3>AvatarGroup</h3>
+      <p class="ds-spec">Stack de avatares solapados (<span class="u-mono">-8px</span>) con anillo 2 px de <span class="u-mono">--surface</span> que los separa · <span class="u-mono">avatar-group__more</span> para el +N de overflow.</p>
+      <div class="ds-demo">
+        <div class="avatar-group">
+          <span class="avatar"><span class="avatar__initials">HS</span></span>
+          <span class="avatar"><span class="avatar__initials">MG</span></span>
+          <span class="avatar"><span class="avatar__initials">AL</span></span>
+          <span class="avatar"><span class="avatar__initials">RD</span></span>
+          <span class="avatar-group__more">+3</span>
+        </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="avatar-group"&gt;
+  &lt;span class="avatar"&gt;&lt;span class="avatar__initials"&gt;HS&lt;/span&gt;&lt;/span&gt;
+  &lt;span class="avatar"&gt;&lt;span class="avatar__initials"&gt;MG&lt;/span&gt;&lt;/span&gt;
+  &lt;span class="avatar"&gt;&lt;span class="avatar__initials"&gt;AL&lt;/span&gt;&lt;/span&gt;
+  &lt;span class="avatar"&gt;&lt;span class="avatar__initials"&gt;RD&lt;/span&gt;&lt;/span&gt;
+  &lt;span class="avatar-group__more"&gt;+3&lt;/span&gt;
+&lt;/div&gt;
+&lt;!-- Solape -8px · cada avatar con anillo 2px de --surface --&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
     <!-- Divider -->
     <div class="ds-component" id="comp-divider">
       <h3>Divider</h3>
@@ -1936,28 +2330,32 @@ html, body { overflow-x: clip; }
     <!-- Modal -->
     <div class="ds-component" id="comp-modal">
       <h3>Modal</h3>
-      <p class="ds-spec">Overlay <span class="u-mono">--overlay</span> · panel 480 px (confirmación) o 640 px (formulario) · fade + scale(0.96→1) · Esc y click en overlay cierran.</p>
+      <p class="ds-spec"><span class="u-mono">role="dialog"</span> · <span class="u-mono">aria-modal</span> · <span class="u-mono">aria-labelledby</span> + <span class="u-mono">aria-describedby</span> · al abrir el foco entra al panel, queda atrapado (Tab/Shift+Tab ciclan) y vuelve al disparador al cerrar · Esc y click en overlay cierran, salvo flujos destructivos (el de confirmación no cierra por overlay).</p>
       <div class="ds-demo">
         <button class="btn btn--secondary" data-modal-open="demoModal">Abrir confirmación</button>
         <button class="btn btn--secondary" data-modal-open="demoModalLg">Abrir formulario</button>
       </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="modal" id="miModal" role="dialog" aria-modal="true" aria-labelledby="miModalTitulo"&gt;
+<pre class="ds-pre"><code>&lt;div class="modal" id="miModal" role="dialog" aria-modal="true"
+     aria-labelledby="miModalTitulo" aria-describedby="miModalDesc"&gt;
+  &lt;!-- overlay sin data-modal-close en flujos destructivos --&gt;
   &lt;div class="modal__overlay" data-modal-close&gt;&lt;/div&gt;
-  &lt;div class="modal__panel"&gt;
+  &lt;div class="modal__panel" tabindex="-1"&gt;
     &lt;div class="modal__header"&gt;
       &lt;h4 class="modal__title" id="miModalTitulo"&gt;¿Eliminar proyecto?&lt;/h4&gt;
       &lt;button class="icon-btn icon-btn--ghost" data-modal-close aria-label="Cerrar"&gt;…x…&lt;/button&gt;
     &lt;/div&gt;
-    &lt;p&gt;Esta acción no se puede deshacer.&lt;/p&gt;
+    &lt;p id="miModalDesc"&gt;Esta acción no se puede deshacer.&lt;/p&gt;
     &lt;div class="modal__footer"&gt;
       &lt;button class="btn btn--secondary" data-modal-close&gt;Cancelar&lt;/button&gt;
       &lt;button class="btn btn--danger"&gt;Eliminar&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
-&lt;!-- Panel ancho: modal__panel--lg (640px) --&gt;</code></pre>
+&lt;!-- Panel ancho: modal__panel--lg (640px) --&gt;
+&lt;!-- JS: al abrir guarda el disparador y enfoca el panel; Tab/Shift+Tab
+     atrapados dentro; al cerrar (Esc, ×, Cancelar) el foco vuelve al disparador --&gt;</code></pre>
         </div>
       </details>
     </div>
@@ -1996,27 +2394,77 @@ html, body { overflow-x: clip; }
     <!-- Tabla -->
     <div class="ds-component" id="comp-tabla">
       <h3>Tabla</h3>
-      <p class="ds-spec">Header uppercase <span class="u-mono">+0.04em</span> · filas 52 px · numéricos a la derecha con <span class="u-mono">tabular-nums</span> · seleccionada en <span class="u-mono">--accent-soft</span>.</p>
-      <div class="ds-demo ds-demo--col" style="padding:0;overflow-x:auto">
-        <table class="table">
-          <thead><tr><th>Cliente</th><th>Estado</th><th class="num">Facturas</th><th class="num">Monto</th></tr></thead>
-          <tbody>
-            <tr><td>Constructora Delta</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>Activo</span></td><td class="num">12</td><td class="num">$ 48,200.00</td></tr>
-            <tr class="is-selected"><td>Grupo Andrade</td><td><span class="badge badge--warning"><svg><use href="#i-triangle-alert"/></svg>Pendiente</span></td><td class="num">3</td><td class="num">$ 9,850.00</td></tr>
-            <tr><td>Studio Nébula</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>Activo</span></td><td class="num">27</td><td class="num">$ 132,400.00</td></tr>
-            <tr><td>Farmacias Luna</td><td><span class="badge badge--danger"><svg><use href="#i-circle-alert"/></svg>Vencido</span></td><td class="num">1</td><td class="num">$ 1,120.00</td></tr>
-          </tbody>
-        </table>
+      <p class="ds-spec">Header uppercase <span class="u-mono">+0.04em</span> · filas 52 px · numéricos a la derecha con <span class="u-mono">tabular-nums</span>. Variantes: <span class="u-mono">.table--zebra</span> · <span class="u-mono">.table--sticky</span> (header fijo) · columna ordenable con <span class="u-mono">aria-sort</span> · selección con <span class="u-mono">.row--selected</span> y «seleccionar todo» indeterminate.</p>
+      <div class="ds-demo ds-demo--col" style="padding:0">
+        <div style="max-height:264px;overflow:auto;width:100%">
+          <table class="table table--zebra table--sticky" id="demoTable">
+            <thead>
+              <tr>
+                <th class="col-select" scope="col">
+                  <label class="checkbox"><input type="checkbox" id="demoSelectAll" aria-label="Seleccionar todas las filas"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></label>
+                </th>
+                <th scope="col">Cliente</th>
+                <th scope="col">Estado</th>
+                <th class="num" scope="col" aria-sort="none">
+                  <button type="button" class="th-sort th-sort--num" data-sort="monto">Monto<svg class="sort-icon" aria-hidden="true"><use href="#i-arrow-up"/></svg></button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="col-select"><label class="checkbox"><input type="checkbox" class="js-row-select" aria-label="Seleccionar Constructora Delta"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></label></td>
+                <td>Constructora Delta</td>
+                <td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>Activo</span></td>
+                <td class="num" data-monto="48200">$ 48,200.00</td>
+              </tr>
+              <tr class="row--selected">
+                <td class="col-select"><label class="checkbox"><input type="checkbox" class="js-row-select" checked aria-label="Seleccionar Grupo Andrade"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></label></td>
+                <td>Grupo Andrade</td>
+                <td><span class="badge badge--warning"><svg><use href="#i-triangle-alert"/></svg>Pendiente</span></td>
+                <td class="num" data-monto="9850">$ 9,850.00</td>
+              </tr>
+              <tr>
+                <td class="col-select"><label class="checkbox"><input type="checkbox" class="js-row-select" aria-label="Seleccionar Studio Nébula"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></label></td>
+                <td>Studio Nébula</td>
+                <td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>Activo</span></td>
+                <td class="num" data-monto="132400">$ 132,400.00</td>
+              </tr>
+              <tr>
+                <td class="col-select"><label class="checkbox"><input type="checkbox" class="js-row-select" aria-label="Seleccionar Farmacias Luna"><span class="checkbox__box"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span></label></td>
+                <td>Farmacias Luna</td>
+                <td><span class="badge badge--danger"><svg><use href="#i-circle-alert"/></svg>Vencido</span></td>
+                <td class="num" data-monto="1120">$ 1,120.00</td>
+              </tr>
+            </tbody>
+          </table>
+        </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;table class="table"&gt;
-  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Cliente&lt;/th&gt;&lt;th class="num"&gt;Monto&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
+<pre class="ds-pre"><code>&lt;table class="table table--zebra table--sticky"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th class="col-select" scope="col"&gt;
+        &lt;label class="checkbox"&gt;&lt;input type="checkbox" aria-label="Seleccionar todo"&gt;
+          &lt;span class="checkbox__box"&gt;&lt;svg&gt;…check…&lt;/svg&gt;&lt;/span&gt;&lt;/label&gt;
+      &lt;/th&gt;
+      &lt;th scope="col"&gt;Cliente&lt;/th&gt;
+      &lt;th class="num" scope="col" aria-sort="none"&gt;
+        &lt;button class="th-sort th-sort--num" data-sort="monto"&gt;
+          Monto&lt;svg class="sort-icon" aria-hidden="true"&gt;…&lt;/svg&gt;&lt;/button&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
   &lt;tbody&gt;
-    &lt;tr&gt;&lt;td&gt;Constructora Delta&lt;/td&gt;&lt;td class="num"&gt;$ 48,200.00&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr class="is-selected"&gt;&lt;td&gt;Grupo Andrade&lt;/td&gt;&lt;td class="num"&gt;$ 9,850.00&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="row--selected"&gt;
+      &lt;td class="col-select"&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" checked
+        aria-label="Seleccionar Grupo Andrade"&gt;…&lt;/label&gt;&lt;/td&gt;
+      &lt;td&gt;Grupo Andrade&lt;/td&gt;&lt;td class="num" data-monto="9850"&gt;$ 9,850.00&lt;/td&gt;
+    &lt;/tr&gt;
   &lt;/tbody&gt;
-&lt;/table&gt;</code></pre>
+&lt;/table&gt;
+&lt;!-- JS: click en .th-sort alterna aria-sort asc/desc y reordena tbody;
+     el checkbox del header pasa a indeterminate con selección parcial --&gt;</code></pre>
         </div>
       </details>
     </div>
@@ -2222,6 +2670,366 @@ html, body { overflow-x: clip; }
         </div>
       </details>
     </div>
+
+    <!-- Combobox / Autocomplete y Búsqueda -->
+    <div class="ds-component" id="comp-combobox">
+      <h3>Combobox y búsqueda</h3>
+      <p class="ds-spec"><span class="u-mono">role="combobox"</span> · <span class="u-mono">aria-expanded</span> + <span class="u-mono">aria-controls</span> + <span class="u-mono">aria-activedescendant</span> · lista <span class="u-mono">role="listbox"</span>, opciones <span class="u-mono">role="option"</span> · ↑/↓ mueven, Enter elige, Esc cierra, Home/End a extremos. La búsqueda se limpia con la ×.</p>
+      <div class="ds-demo ds-demo--col" style="max-width:420px">
+        <div class="field">
+          <label class="field__label" for="cbxInput">Ciudad</label>
+          <div class="combobox" id="cbx">
+            <input class="combobox__input" id="cbxInput" type="text" role="combobox" aria-expanded="false" aria-controls="cbxList" aria-autocomplete="list" autocomplete="off" spellcheck="false" placeholder="Escribe para filtrar…">
+            <ul class="combobox__list" id="cbxList" role="listbox" aria-label="Ciudades"></ul>
+          </div>
+        </div>
+        <div class="field">
+          <label class="field__label" for="searchInput">Buscar</label>
+          <div class="search">
+            <svg class="search__icon" aria-hidden="true"><use href="#i-search"/></svg>
+            <input class="search__input" id="searchInput" type="search" autocomplete="off" spellcheck="false" placeholder="Buscar proyectos…">
+            <button class="search__clear" type="button" aria-label="Limpiar"><svg><use href="#i-x"/></svg></button>
+          </div>
+        </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="combobox"&gt;
+  &lt;input class="combobox__input" type="text" role="combobox"
+    aria-expanded="false" aria-controls="lista" aria-autocomplete="list"
+    aria-activedescendant="opt-0" autocomplete="off"&gt;
+  &lt;ul class="combobox__list" id="lista" role="listbox" aria-label="Ciudades"&gt;
+    &lt;li class="combobox__option is-active" role="option" id="opt-0"
+        aria-selected="false"&gt;Guadalajara&lt;/li&gt;
+    &lt;li class="combobox__option" role="option" id="opt-1"
+        aria-selected="true"&gt;Monterrey
+      &lt;svg class="combobox__check"&gt;…check…&lt;/svg&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;div class="search"&gt;
+  &lt;svg class="search__icon" aria-hidden="true"&gt;…lupa…&lt;/svg&gt;
+  &lt;input class="search__input" type="search" placeholder="Buscar…"&gt;
+  &lt;button class="search__clear" aria-label="Limpiar"&gt;…x…&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- Drawer / Sheet -->
+    <div class="ds-component" id="comp-drawer">
+      <h3>Drawer / Sheet</h3>
+      <p class="ds-spec"><span class="u-mono">role="dialog"</span> · <span class="u-mono">aria-modal</span> · foco atrapado y devuelto al disparador (patrón del Modal) · <span class="u-mono">overscroll-behavior: contain</span> · entra deslizando desde el borde y sale más corto · Esc y click en overlay cierran. Variantes <span class="u-mono">--right</span> (default), <span class="u-mono">--left</span>, <span class="u-mono">--bottom</span>.</p>
+      <div class="ds-demo">
+        <button class="btn btn--secondary" data-drawer-open="demoDrawer">Abrir panel de filtros</button>
+      </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="drawer drawer--right" id="miDrawer" role="dialog"
+     aria-modal="true" aria-labelledby="miDrawerTitulo"&gt;
+  &lt;div class="drawer__overlay" data-drawer-close&gt;&lt;/div&gt;
+  &lt;div class="drawer__panel" tabindex="-1"&gt;
+    &lt;div class="drawer__header"&gt;
+      &lt;h4 class="drawer__title" id="miDrawerTitulo"&gt;Filtrar proyectos&lt;/h4&gt;
+      &lt;button class="icon-btn icon-btn--ghost" data-drawer-close aria-label="Cerrar"&gt;…x…&lt;/button&gt;
+    &lt;/div&gt;
+    &lt;!-- campos… --&gt;
+    &lt;div class="drawer__footer"&gt;
+      &lt;button class="btn btn--secondary" data-drawer-close&gt;Cancelar&lt;/button&gt;
+      &lt;button class="btn btn--primary" data-drawer-close&gt;Aplicar&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- Popover -->
+    <div class="ds-component" id="comp-popover">
+      <h3>Popover</h3>
+      <p class="ds-spec">Se abre por <strong>click</strong> (no hover, a diferencia del tooltip) y lleva contenido interactivo · trigger <span class="u-mono">aria-haspopup="dialog"</span> + <span class="u-mono">aria-expanded</span> · panel <span class="u-mono">role="dialog"</span> · aparece desde el trigger (fade + scale 0.96→1) · Esc y click fuera cierran.</p>
+      <div class="ds-demo">
+        <div class="popover" id="demoPopover">
+          <button class="btn btn--secondary popover__trigger" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="demoPopoverPanel"><svg><use href="#i-info"/></svg>Detalles del plan</button>
+          <div class="popover__panel" id="demoPopoverPanel" role="dialog" aria-label="Detalles del plan" tabindex="-1">
+            <p style="margin:0 0 6px;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)">Plan Estudio</p>
+            <p style="margin:0 0 12px;font-size:var(--text-sm);color:var(--text-secondary)">Incluye 12 tableros, 3 integraciones y respaldo diario. Puedes cambiar de plan cuando quieras.</p>
+            <a class="link" href="#comp-popover">Ver comparación de planes</a>
+          </div>
+        </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="popover"&gt;
+  &lt;button class="btn btn--secondary popover__trigger"
+          aria-haspopup="dialog" aria-expanded="false"
+          aria-controls="pop"&gt;Detalles del plan&lt;/button&gt;
+  &lt;div class="popover__panel" id="pop" role="dialog"
+       aria-label="Detalles del plan" tabindex="-1"&gt;
+    &lt;p&gt;Contenido con &lt;a class="link" href="#"&gt;un enlace&lt;/a&gt;.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- ButtonGroup -->
+    <div class="ds-component" id="comp-button-group">
+      <h3>ButtonGroup</h3>
+      <p class="ds-spec">Botones adyacentes con bordes compartidos (radius solo en los extremos, bordes internos colapsados) · <span class="u-mono">role="group"</span> + <span class="u-mono">aria-label</span> · usa los <span class="u-mono">.btn</span> existentes. Para un único-seleccionado, usa SegmentedControl.</p>
+      <div class="ds-demo">
+        <div class="btn-group" role="group" aria-label="Navegación de semana">
+          <button class="btn btn--secondary"><svg><use href="#i-chevron-left"/></svg>Anterior</button>
+          <button class="btn btn--secondary">Hoy</button>
+          <button class="btn btn--secondary">Siguiente<svg><use href="#i-chevron-right"/></svg></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="btn-group" role="group" aria-label="Navegación de semana"&gt;
+  &lt;button class="btn btn--secondary"&gt;Anterior&lt;/button&gt;
+  &lt;button class="btn btn--secondary"&gt;Hoy&lt;/button&gt;
+  &lt;button class="btn btn--secondary"&gt;Siguiente&lt;/button&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- DatePicker -->
+    <div class="ds-component" id="comp-datepicker">
+      <h3>DatePicker</h3>
+      <p class="ds-spec">Input + calendario en popover · rejilla <span class="u-mono">role="grid"</span>, encabezados <span class="u-mono">role="columnheader"</span> con <span class="u-mono">aria-label</span> completo, días <span class="u-mono">role="gridcell"</span> con <span class="u-mono">aria-label</span> de la fecha entera y <span class="u-mono">aria-selected</span> · las flechas mueven entre días · el input abre el calendario (click), Esc cierra y el foco entra al calendario · hoy marcado y un día seleccionado.</p>
+      <div class="ds-demo" style="min-height:360px;align-items:flex-start">
+        <div class="field" style="max-width:280px;width:100%">
+          <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">
+            <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">
+                <div class="calendar__header">
+                  <button class="icon-btn icon-btn--ghost icon-btn--sm" type="button" data-cal-prev aria-label="Mes anterior"><svg><use href="#i-chevron-left"/></svg></button>
+                  <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__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>
+                  <span class="calendar__weekday" role="columnheader" aria-label="miércoles">mi</span>
+                  <span class="calendar__weekday" role="columnheader" aria-label="jueves">ju</span>
+                  <span class="calendar__weekday" role="columnheader" aria-label="viernes">vi</span>
+                  <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>
+            </div>
+          </div>
+        </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="datepicker"&gt;
+  &lt;input class="datepicker__input" type="text" readonly
+         aria-haspopup="dialog" aria-expanded="false" 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;
+    &lt;div class="calendar"&gt;
+      &lt;div class="calendar__header"&gt;
+        &lt;button aria-label="Mes anterior"&gt;…&lt;/button&gt;
+        &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__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;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;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- FileUpload -->
+    <div class="ds-component" id="comp-file-upload">
+      <h3>FileUpload</h3>
+      <p class="ds-spec">Dropzone + lista · el input <span class="u-mono">file</span> real va oculto pero con label asociado y <span class="u-mono">aria-describedby</span> de formatos y tamaño · la zona describe la acción · estado <span class="u-mono">.is-dragover</span> al arrastrar · el error no se comunica solo por color (icono + texto) · el item que sube reusa la barra <span class="u-mono">.progress</span>.</p>
+      <div class="ds-demo ds-demo--col" style="max-width:480px">
+        <div class="file-upload" id="demoFileUpload">
+          <input class="file-upload__input" id="fuInput" type="file" multiple aria-describedby="fuHint">
+          <label class="file-upload__label" for="fuInput">
+            <svg aria-hidden="true"><use href="#i-upload"/></svg>
+            <span class="file-upload__title">Arrastra archivos o elige</span>
+            <span class="file-upload__button">Elegir archivos</span>
+            <span class="file-upload__hint" id="fuHint">PDF, PNG o JPG · hasta 10 MB</span>
+          </label>
+        </div>
+        <ul class="file-upload__list" id="fuList" aria-label="Archivos seleccionados">
+          <li class="file-upload__item">
+            <svg class="file-upload__icon" aria-hidden="true"><use href="#i-file"/></svg>
+            <div class="file-upload__meta">
+              <span class="file-upload__name">informe-anual-2026.pdf</span>
+              <span class="file-upload__size">2.4 MB · Subiendo 45%</span>
+              <div class="progress"><div class="progress__bar" style="width:45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Progreso de subida"></div></div>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Cancelar informe-anual-2026.pdf"><svg><use href="#i-x"/></svg></button>
+          </li>
+          <li class="file-upload__item">
+            <svg class="file-upload__icon" aria-hidden="true"><use href="#i-file"/></svg>
+            <div class="file-upload__meta">
+              <span class="file-upload__name">portada.png</span>
+              <span class="file-upload__size"><svg aria-hidden="true"><use href="#i-circle-check"/></svg>820 KB · Completo</span>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Quitar portada.png"><svg><use href="#i-x"/></svg></button>
+          </li>
+          <li class="file-upload__item file-upload__item--error">
+            <svg class="file-upload__icon" aria-hidden="true"><use href="#i-circle-alert"/></svg>
+            <div class="file-upload__meta">
+              <span class="file-upload__name">video-demo.mov</span>
+              <span class="file-upload__size"><svg aria-hidden="true"><use href="#i-circle-alert"/></svg>Formato no admitido · elige PDF, PNG o JPG</span>
+            </div>
+            <button class="file-upload__remove" type="button" aria-label="Quitar video-demo.mov"><svg><use href="#i-x"/></svg></button>
+          </li>
+        </ul>
+      </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="file-upload"&gt;
+  &lt;input class="file-upload__input" type="file" multiple
+         aria-describedby="hint"&gt;
+  &lt;label class="file-upload__label" for="…"&gt;
+    &lt;svg aria-hidden="true"&gt;…subir…&lt;/svg&gt;
+    &lt;span class="file-upload__title"&gt;Arrastra archivos o elige&lt;/span&gt;
+    &lt;span class="file-upload__button"&gt;Elegir archivos&lt;/span&gt;
+    &lt;span class="file-upload__hint" id="hint"&gt;PDF, PNG o JPG · hasta 10 MB&lt;/span&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+&lt;ul class="file-upload__list"&gt;
+  &lt;li class="file-upload__item"&gt;
+    &lt;svg class="file-upload__icon"&gt;…&lt;/svg&gt;
+    &lt;div class="file-upload__meta"&gt;
+      &lt;span class="file-upload__name"&gt;informe.pdf&lt;/span&gt;
+      &lt;span class="file-upload__size"&gt;2.4 MB · Subiendo 45%&lt;/span&gt;
+      &lt;div class="progress"&gt;&lt;div class="progress__bar" style="width:45%"&gt;&lt;/div&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button class="file-upload__remove" aria-label="Cancelar informe.pdf"&gt;×&lt;/button&gt;
+  &lt;/li&gt;
+  &lt;li class="file-upload__item file-upload__item--error"&gt;
+    &lt;svg class="file-upload__icon"&gt;…alerta…&lt;/svg&gt;
+    &lt;div class="file-upload__meta"&gt;
+      &lt;span class="file-upload__name"&gt;video.mov&lt;/span&gt;
+      &lt;span class="file-upload__size"&gt;…alerta… Formato no admitido&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;button class="file-upload__remove" aria-label="Quitar video.mov"&gt;×&lt;/button&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- Stepper / Wizard -->
+    <div class="ds-component" id="comp-stepper">
+      <h3>Stepper / Wizard</h3>
+      <p class="ds-spec"><span class="u-mono">&lt;ol&gt;</span> · <span class="u-mono">aria-current="step"</span> en el paso actual · el completo muestra un check (no solo color), el próximo muestra su número · estados <span class="u-mono">--complete</span>/<span class="u-mono">--current</span>/<span class="u-mono">--upcoming</span> · <span class="u-mono">.step__connector</span> entre pasos · variante <span class="u-mono">--vertical</span>.</p>
+      <div class="ds-demo ds-demo--col" style="gap:40px">
+        <ol class="stepper" aria-label="Progreso de configuración">
+          <li class="step step--complete">
+            <span class="step__connector" aria-hidden="true"></span>
+            <span class="step__marker"><svg aria-hidden="true"><use href="#i-check"/></svg></span>
+            <span class="step__label">Cuenta</span>
+          </li>
+          <li class="step step--complete">
+            <span class="step__connector" aria-hidden="true"></span>
+            <span class="step__marker"><svg aria-hidden="true"><use href="#i-check"/></svg></span>
+            <span class="step__label">Perfil</span>
+          </li>
+          <li class="step step--current" aria-current="step">
+            <span class="step__connector" aria-hidden="true"></span>
+            <span class="step__marker">3</span>
+            <span class="step__label">Facturación</span>
+          </li>
+          <li class="step step--upcoming">
+            <span class="step__marker">4</span>
+            <span class="step__label">Confirmar</span>
+          </li>
+        </ol>
+        <ol class="stepper stepper--vertical" aria-label="Pasos de publicación" style="align-self:flex-start;min-width:220px">
+          <li class="step step--complete">
+            <span class="step__connector" aria-hidden="true"></span>
+            <span class="step__marker"><svg aria-hidden="true"><use href="#i-check"/></svg></span>
+            <span class="step__label">Borrador guardado</span>
+          </li>
+          <li class="step step--current" aria-current="step">
+            <span class="step__connector" aria-hidden="true"></span>
+            <span class="step__marker">2</span>
+            <span class="step__label">Revisión del equipo</span>
+          </li>
+          <li class="step step--upcoming">
+            <span class="step__marker">3</span>
+            <span class="step__label">Publicación</span>
+          </li>
+        </ol>
+      </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;ol class="stepper" aria-label="Progreso de configuración"&gt;
+  &lt;li class="step step--complete"&gt;
+    &lt;span class="step__connector" aria-hidden="true"&gt;&lt;/span&gt;
+    &lt;span class="step__marker"&gt;…check…&lt;/span&gt;
+    &lt;span class="step__label"&gt;Cuenta&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class="step step--current" aria-current="step"&gt;
+    &lt;span class="step__connector" aria-hidden="true"&gt;&lt;/span&gt;
+    &lt;span class="step__marker"&gt;3&lt;/span&gt;
+    &lt;span class="step__label"&gt;Facturación&lt;/span&gt;
+  &lt;/li&gt;
+  &lt;li class="step step--upcoming"&gt;
+    &lt;span class="step__marker"&gt;4&lt;/span&gt;
+    &lt;span class="step__label"&gt;Confirmar&lt;/span&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;!-- Vertical: añade la clase --vertical al &lt;ol&gt; --&gt;
+&lt;ol class="stepper stepper--vertical"&gt;…&lt;/ol&gt;</code></pre>
+        </div>
+      </details>
+    </div>
+
+    <!-- Kbd -->
+    <div class="ds-component" id="comp-kbd">
+      <h3>Kbd</h3>
+      <p class="ds-spec">Tecla en <span class="u-mono">&lt;kbd&gt;</span> con borde, sombra sutil de tinta y tipografía mono · tamaño pequeño, mínimo 20px · combos con "+" entre teclas.</p>
+      <div class="ds-demo" style="gap:24px">
+        <kbd class="kbd">Esc</kbd>
+        <kbd class="kbd">Tab</kbd>
+        <kbd class="kbd">⏎</kbd>
+        <span class="kbd-combo"><kbd class="kbd">⌘</kbd> + <kbd class="kbd">K</kbd></span>
+        <span class="kbd-combo"><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">S</kbd></span>
+        <span class="kbd-combo"><kbd class="kbd">⌘</kbd> + <kbd class="kbd">⇧</kbd> + <kbd class="kbd">P</kbd></span>
+      </div>
+      <p class="ds-spec">Inline en el texto: abre la paleta con <kbd class="kbd">⌘</kbd> <kbd class="kbd">K</kbd> y guarda con <kbd class="kbd">Ctrl</kbd> <kbd class="kbd">S</kbd>.</p>
+      <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;kbd class="kbd"&gt;Esc&lt;/kbd&gt;
+
+&lt;!-- Combo: "+" literal entre teclas --&gt;
+&lt;span class="kbd-combo"&gt;
+  &lt;kbd class="kbd"&gt;⌘&lt;/kbd&gt; + &lt;kbd class="kbd"&gt;K&lt;/kbd&gt;
+&lt;/span&gt;</code></pre>
+        </div>
+      </details>
+    </div>
   </section>
 
   <!-- ============================== MOTION ============================== -->
@@ -2264,11 +3072,11 @@ html, body { overflow-x: clip; }
       <table class="table">
         <thead><tr><th>Combinación</th><th class="num">Contraste</th><th>Veredicto</th></tr></thead>
         <tbody>
-          <tr><td><span class="u-mono">neutral-800</span> sobre blanco</td><td class="num">≈ 10.4:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AAA</span></td></tr>
-          <tr><td>Blanco sobre <span class="u-mono">primary-500</span></td><td class="num">≈ 3.4:1</td><td><span class="badge badge--warning"><svg><use href="#i-triangle-alert"/></svg>Solo texto ≥18px o UI</span></td></tr>
-          <tr><td><span class="u-mono">--link</span> (primary-700) sobre blanco</td><td class="num">≈ 6:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AA texto normal</span></td></tr>
-          <tr><td><span class="u-mono">primary-300</span> sobre blanco</td><td class="num">≈ 1.8:1</td><td><span class="badge badge--danger"><svg><use href="#i-circle-alert"/></svg>Nunca como texto</span></td></tr>
-          <tr><td>Tonos <span class="u-mono">--*-text</span> sobre <span class="u-mono">*-100</span></td><td class="num">≥ 4.5:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AA garantizado</span></td></tr>
+          <tr><td><span class="u-mono">neutral-800</span> sobre blanco</td><td class="num">12.42:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AAA</span></td></tr>
+          <tr><td>Blanco sobre <span class="u-mono">primary-500</span></td><td class="num">3.22:1</td><td><span class="badge badge--warning"><svg><use href="#i-triangle-alert"/></svg>Solo texto ≥18px o UI</span></td></tr>
+          <tr><td><span class="u-mono">--link</span> (primary-700) sobre blanco</td><td class="num">5.94:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AA texto normal</span></td></tr>
+          <tr><td><span class="u-mono">primary-300</span> sobre blanco</td><td class="num">1.91:1</td><td><span class="badge badge--danger"><svg><use href="#i-circle-alert"/></svg>Nunca como texto</span></td></tr>
+          <tr><td>Tonos <span class="u-mono">--*-text</span> sobre <span class="u-mono">*-100</span></td><td class="num">4.72–6.60:1</td><td><span class="badge badge--success"><svg><use href="#i-circle-check"/></svg>AA garantizado</span></td></tr>
         </tbody>
       </table>
     </div>
@@ -2401,7 +3209,7 @@ html, body { overflow-x: clip; }
       <svg><use href="#i-info"/></svg>
       <div>
         <p class="alert__title">Cómo consumirlo en un proyecto nuevo</p>
-        <p class="alert__body">1) Copia <span class="u-mono">dist/celeste-clasica/celeste-clasica.css</span> (o solo <span class="u-mono">tokens.css</span>) e impórtalo antes de tus estilos, o pega el bloque <span class="u-mono">@theme</span> en tu CSS de Tailwind v4. 2) Aplica <span class="u-mono">.celeste-reset</span> al body. 3) Consume solo aliases semánticos. 4) Alterna <span class="u-mono">data-theme</span> en <span class="u-mono">&lt;html&gt;</span> para light/dark.</p>
+        <p class="alert__body">1) Instala <span class="u-mono">@higinio/design-css</span> (e importa <span class="u-mono">@higinio/design-css/celeste/framework.css</span>) o copia <span class="u-mono">dist/celeste-clasica/celeste-clasica.css</span> (o solo <span class="u-mono">tokens.css</span>) e impórtalo antes de tus estilos, o pega el bloque <span class="u-mono">@theme</span> en tu CSS de Tailwind v4. 2) Aplica <span class="u-mono">.celeste-reset</span> al body. 3) Consume solo aliases semánticos. 4) Alterna <span class="u-mono">data-theme</span> en <span class="u-mono">&lt;html&gt;</span> para light/dark.</p>
       </div>
     </div>
   </section>
@@ -2410,9 +3218,22 @@ html, body { overflow-x: clip; }
   <section id="instalacion">
     <p class="ds-eyebrow">Sistema</p>
     <h2>Instalación</h2>
-    <p class="ds-lead">El sistema se distribuye como archivos en <span class="u-mono">dist/celeste-clasica/</span> — cópialos a tu proyecto (aún no hay paquete npm). Elige la vía según tu stack. 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>
+    <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>A · CSS drop-in (framework completo)</h3>
+    <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>
+    <div class="ds-code-box"><button class="ds-copy">Copiar</button>
+<pre class="ds-pre"><code>npm i @higinio/design-css
+
+/* framework completo (vía A) */
+@import "@higinio/design-css/celeste/framework.css";
+/* o solo tokens (vía B) */
+@import "@higinio/design-css/celeste/tokens.css";
+/* o Tailwind v4 (vía C) */
+@import "@higinio/design-css/celeste/tailwind.css";</code></pre>
+    </div>
+
+    <h3 style="margin-top:32px">A · CSS drop-in (framework completo)</h3>
     <p>Para cualquier proyecto — HTML plano o cualquier framework. Trae variables + clases de componentes listas (tipo Bootstrap) y ya importa las fuentes. Aplica <span class="u-mono">.celeste-reset</span> al <span class="u-mono">&lt;body&gt;</span>.</p>
     <div class="ds-code-box"><button class="ds-copy">Copiar</button>
 <pre class="ds-pre"><code>&lt;link rel="stylesheet" href="/estilos/celeste-clasica.css"&gt;
@@ -2523,14 +3344,14 @@ npm i tailwindcss @tailwindcss/postcss
 </footer>
 
 <!-- Modales de demostración -->
-<div class="modal" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="demoModalTitle">
-  <div class="modal__overlay" data-modal-close></div>
-  <div class="modal__panel">
+<div class="modal" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="demoModalTitle" aria-describedby="demoModalDesc">
+  <div class="modal__overlay"></div>
+  <div class="modal__panel" tabindex="-1">
     <div class="modal__header">
       <h4 class="modal__title" id="demoModalTitle">¿Eliminar proyecto?</h4>
       <button class="icon-btn icon-btn--ghost" data-modal-close aria-label="Cerrar"><svg><use href="#i-x"/></svg></button>
     </div>
-    <p style="font-size:var(--text-sm);color:var(--text-secondary)">Se eliminará "Panel Higinio" con sus 12 tableros. Esta acción no se puede deshacer.</p>
+    <p id="demoModalDesc" style="font-size:var(--text-sm);color:var(--text-secondary)">Se eliminará «Panel Higinio» con sus 12 tableros. Esta acción no se puede deshacer.</p>
     <div class="modal__footer">
       <button class="btn btn--secondary" data-modal-close>Cancelar</button>
       <button class="btn btn--danger" data-modal-close>Eliminar proyecto</button>
@@ -2540,7 +3361,7 @@ npm i tailwindcss @tailwindcss/postcss
 
 <div class="modal" id="demoModalLg" role="dialog" aria-modal="true" aria-labelledby="demoModalLgTitle">
   <div class="modal__overlay" data-modal-close></div>
-  <div class="modal__panel modal__panel--lg">
+  <div class="modal__panel modal__panel--lg" tabindex="-1">
     <div class="modal__header">
       <h4 class="modal__title" id="demoModalLgTitle">Invitar al equipo</h4>
       <button class="icon-btn icon-btn--ghost" data-modal-close aria-label="Cerrar"><svg><use href="#i-x"/></svg></button>
@@ -2569,6 +3390,40 @@ npm i tailwindcss @tailwindcss/postcss
   </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>
+  <div class="drawer__panel" tabindex="-1">
+    <div class="drawer__header">
+      <h4 class="drawer__title" id="demoDrawerTitle">Filtrar proyectos</h4>
+      <button class="icon-btn icon-btn--ghost" data-drawer-close aria-label="Cerrar"><svg><use href="#i-x"/></svg></button>
+    </div>
+    <div class="field">
+      <label class="field__label" for="drawer-nombre">Nombre</label>
+      <input class="input" id="drawer-nombre" type="text" autocomplete="off" placeholder="Buscar por nombre">
+    </div>
+    <div class="field">
+      <label class="field__label" for="drawer-estado">Estado</label>
+      <div class="select-wrap">
+        <select class="select" id="drawer-estado">
+          <option>Todos</option>
+          <option>Activos</option>
+          <option>Archivados</option>
+        </select>
+      </div>
+    </div>
+    <label class="switch">
+      <input type="checkbox">
+      <span class="switch__track"></span>
+      Solo mis proyectos
+    </label>
+    <div class="drawer__footer">
+      <button class="btn btn--secondary" data-drawer-close>Cancelar</button>
+      <button class="btn btn--primary" data-drawer-close>Aplicar filtros</button>
+    </div>
+  </div>
+</div>
+
 <!-- Contenedor de toasts -->
 <div class="toast-stack" id="toastStack" role="status" aria-live="polite"></div>
 
@@ -2863,30 +3718,102 @@ npm i tailwindcss @tailwindcss/postcss
     });
   });
 
-  /* ---------- Modal ---------- */
-  var openModalBtns = d.querySelectorAll("[data-modal-open]");
-  Array.prototype.forEach.call(openModalBtns, function (btn) {
-    btn.addEventListener("click", function () {
-      var modal = d.getElementById(btn.getAttribute("data-modal-open"));
-      if (modal) modal.classList.add("is-open");
+  /* ---------- Modal (§10.19): focus-trap + retorno de foco + Esc ---------- */
+  var modalTrigger = null;
+  var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+  function modalFocusables(modal) {
+    return Array.prototype.filter.call(modal.querySelectorAll(FOCUSABLE), function (el) {
+      return el.offsetWidth > 0 || el.offsetHeight > 0;
     });
+  }
+  function openModal(modal, trigger) {
+    if (!modal) return;
+    modalTrigger = trigger || d.activeElement;
+    modal.classList.add("is-open");
+    var f = modalFocusables(modal);
+    var panel = modal.querySelector(".modal__panel");
+    window.setTimeout(function () { (f[0] || panel).focus(); }, 0);
+  }
+  function closeModal(modal) {
+    if (!modal || !modal.classList.contains("is-open")) return;
+    modal.classList.remove("is-open");
+    if (modalTrigger && typeof modalTrigger.focus === "function") modalTrigger.focus();
+    modalTrigger = null;
+  }
+  Array.prototype.forEach.call(d.querySelectorAll("[data-modal-open]"), function (btn) {
+    btn.addEventListener("click", function () { openModal(d.getElementById(btn.getAttribute("data-modal-open")), btn); });
   });
   d.addEventListener("click", function (e) {
-    if (e.target.closest("[data-modal-close]")) {
-      var modal = e.target.closest(".modal");
-      if (modal) modal.classList.remove("is-open");
-    }
+    if (e.target.closest("[data-modal-close]")) closeModal(e.target.closest(".modal"));
   });
   d.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
-    Array.prototype.forEach.call(d.querySelectorAll(".modal.is-open"), function (m) {
-      m.classList.remove("is-open");
-    });
-    Array.prototype.forEach.call(d.querySelectorAll(".menu.is-open"), function (m) {
-      m.classList.remove("is-open");
-    });
+    var openM = d.querySelector(".modal.is-open");
+    if (openM) {
+      if (e.key === "Escape") { e.preventDefault(); closeModal(openM); return; }
+      if (e.key === "Tab") {
+        var f = modalFocusables(openM);
+        if (!f.length) { e.preventDefault(); return; }
+        var first = f[0], last = f[f.length - 1];
+        if (!openM.contains(d.activeElement)) { e.preventDefault(); first.focus(); }
+        else if (e.shiftKey && d.activeElement === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && d.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      Array.prototype.forEach.call(d.querySelectorAll(".menu.is-open"), function (m) {
+        m.classList.remove("is-open");
+      });
+    }
   });
 
+  /* ---------- Tabla (§10.21): orden + selección + indeterminate ---------- */
+  var demoTable = d.getElementById("demoTable");
+  if (demoTable) {
+    var selectAll = d.getElementById("demoSelectAll");
+    function rowBoxes() { return Array.prototype.slice.call(demoTable.querySelectorAll(".js-row-select")); }
+    function syncSelectAll() {
+      var boxes = rowBoxes();
+      var checked = boxes.filter(function (b) { return b.checked; }).length;
+      selectAll.checked = checked === boxes.length;
+      selectAll.indeterminate = checked > 0 && checked < boxes.length;
+    }
+    rowBoxes().forEach(function (b) {
+      b.addEventListener("change", function () {
+        b.closest("tr").classList.toggle("row--selected", b.checked);
+        syncSelectAll();
+      });
+    });
+    if (selectAll) {
+      selectAll.addEventListener("change", function () {
+        rowBoxes().forEach(function (b) {
+          b.checked = selectAll.checked;
+          b.closest("tr").classList.toggle("row--selected", b.checked);
+        });
+        selectAll.indeterminate = false;
+      });
+      syncSelectAll();
+    }
+    var sortBtn = demoTable.querySelector(".th-sort[data-sort='monto']");
+    if (sortBtn) {
+      var sortTh = sortBtn.closest("th");
+      sortBtn.addEventListener("click", function () {
+        var dir = sortTh.getAttribute("aria-sort") === "ascending" ? "descending" : "ascending";
+        sortTh.setAttribute("aria-sort", dir);
+        var tbody = demoTable.querySelector("tbody");
+        Array.prototype.slice.call(tbody.querySelectorAll("tr")).sort(function (a, b) {
+          var va = +a.querySelector("[data-monto]").getAttribute("data-monto");
+          var vb = +b.querySelector("[data-monto]").getAttribute("data-monto");
+          return dir === "ascending" ? va - vb : vb - va;
+        }).forEach(function (r) { tbody.appendChild(r); });
+      });
+    }
+  }
+
+  /* ---------- Checkbox indeterminate (§10.9) — solo se fija por JS ---------- */
+  var indet = d.getElementById("demoIndeterminate");
+  if (indet) indet.indeterminate = true;
+
   /* ---------- Menu ---------- */
   Array.prototype.forEach.call(d.querySelectorAll(".js-menu-toggle"), function (btn) {
     btn.addEventListener("click", function (e) {
@@ -3054,6 +3981,316 @@ npm i tailwindcss @tailwindcss/postcss
   } else {
     Array.prototype.forEach.call(countEls, countUp);
   }
+
+  /* ---------- Drawer (§10.29): focus-trap + retorno de foco + Esc ---------- */
+  var drawerTrigger = null;
+  function openDrawer(dr, trigger) {
+    if (!dr) return;
+    drawerTrigger = trigger || d.activeElement;
+    dr.classList.add("is-open");
+    var f = modalFocusables(dr);
+    var panel = dr.querySelector(".drawer__panel");
+    window.setTimeout(function () { (f[0] || panel).focus(); }, 0);
+  }
+  function closeDrawer(dr) {
+    if (!dr || !dr.classList.contains("is-open")) return;
+    dr.classList.remove("is-open");
+    if (drawerTrigger && typeof drawerTrigger.focus === "function") drawerTrigger.focus();
+    drawerTrigger = null;
+  }
+  Array.prototype.forEach.call(d.querySelectorAll("[data-drawer-open]"), function (btn) {
+    btn.addEventListener("click", function () {
+      openDrawer(d.getElementById(btn.getAttribute("data-drawer-open")), btn);
+    });
+  });
+  d.addEventListener("click", function (e) {
+    if (e.target.closest("[data-drawer-close]")) closeDrawer(e.target.closest(".drawer"));
+  });
+  d.addEventListener("keydown", function (e) {
+    var openD = d.querySelector(".drawer.is-open");
+    if (!openD) return;
+    if (e.key === "Escape") { e.preventDefault(); closeDrawer(openD); return; }
+    if (e.key === "Tab") {
+      var f = modalFocusables(openD);
+      if (!f.length) { e.preventDefault(); return; }
+      var first = f[0], last = f[f.length - 1];
+      if (!openD.contains(d.activeElement)) { e.preventDefault(); first.focus(); }
+      else if (e.shiftKey && d.activeElement === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && d.activeElement === last) { e.preventDefault(); first.focus(); }
+    }
+  });
+
+  /* ---------- Popover (§10.30): click, foco al panel, Esc y click-out ---------- */
+  Array.prototype.forEach.call(d.querySelectorAll(".popover"), function (pop) {
+    var trigger = pop.querySelector(".popover__trigger");
+    var panel = pop.querySelector(".popover__panel");
+    if (!trigger || !panel) return;
+    function openPop() {
+      pop.classList.add("is-open");
+      trigger.setAttribute("aria-expanded", "true");
+      window.setTimeout(function () { panel.focus(); }, 0);
+    }
+    function closePop(returnFocus) {
+      if (!pop.classList.contains("is-open")) return;
+      pop.classList.remove("is-open");
+      trigger.setAttribute("aria-expanded", "false");
+      if (returnFocus) trigger.focus();
+    }
+    trigger.addEventListener("click", function (e) {
+      e.stopPropagation();
+      if (pop.classList.contains("is-open")) closePop(true); else openPop();
+    });
+    d.addEventListener("click", function (e) {
+      if (pop.classList.contains("is-open") && !pop.contains(e.target)) closePop(false);
+    });
+    pop.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") { e.preventDefault(); closePop(true); }
+    });
+  });
+
+  /* ---------- Combobox (§10.28): filtro en vivo + navegación por teclado ---------- */
+  var cbx = d.getElementById("cbx");
+  if (cbx) {
+    var cbxInput = d.getElementById("cbxInput");
+    var cbxList = d.getElementById("cbxList");
+    var CITIES = ["Aguascalientes", "Ciudad de México", "Guadalajara", "Mérida",
+      "Monterrey", "Puebla", "Querétaro", "Tijuana"];
+    var cbxActive = -1;
+    function cbxOptions() {
+      return Array.prototype.slice.call(cbxList.querySelectorAll(".combobox__option"));
+    }
+    function cbxRender() {
+      var q = cbxInput.value.trim().toLowerCase();
+      var matches = CITIES.filter(function (c) { return c.toLowerCase().indexOf(q) !== -1; });
+      cbxList.innerHTML = "";
+      if (!matches.length) {
+        var empty = d.createElement("li");
+        empty.className = "combobox__empty";
+        empty.textContent = "Sin resultados";
+        cbxList.appendChild(empty);
+      } else {
+        matches.forEach(function (c, i) {
+          var li = d.createElement("li");
+          li.className = "combobox__option";
+          li.id = "cbx-opt-" + i;
+          li.setAttribute("role", "option");
+          li.setAttribute("aria-selected", c === cbxInput.value ? "true" : "false");
+          li.appendChild(d.createTextNode(c));
+          li.insertAdjacentHTML("beforeend",
+            '<svg class="combobox__check" aria-hidden="true"><use href="#i-check"/></svg>');
+          cbxList.appendChild(li);
+        });
+      }
+      cbxActive = -1;
+      cbxInput.removeAttribute("aria-activedescendant");
+    }
+    function cbxOpen() { cbx.classList.add("is-open"); cbxInput.setAttribute("aria-expanded", "true"); }
+    function cbxClose() { cbx.classList.remove("is-open"); cbxInput.setAttribute("aria-expanded", "false"); cbxSetActive(-1); }
+    function cbxSetActive(i) {
+      var opts = cbxOptions();
+      opts.forEach(function (o) { o.classList.remove("is-active"); });
+      cbxActive = i;
+      if (i >= 0 && opts[i]) {
+        opts[i].classList.add("is-active");
+        cbxInput.setAttribute("aria-activedescendant", opts[i].id);
+        opts[i].scrollIntoView({ block: "nearest" });
+      } else {
+        cbxInput.removeAttribute("aria-activedescendant");
+      }
+    }
+    function cbxChoose(opt) {
+      if (!opt || opt.classList.contains("combobox__empty")) return;
+      cbxInput.value = opt.textContent.trim();
+      cbxRender();
+      cbxClose();
+    }
+    cbxInput.addEventListener("input", function () { cbxRender(); cbxOpen(); });
+    cbxInput.addEventListener("focus", function () { cbxRender(); cbxOpen(); });
+    cbxInput.addEventListener("keydown", function (e) {
+      var opts = cbxOptions();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!cbx.classList.contains("is-open")) cbxOpen();
+        if (opts.length) cbxSetActive(Math.min(opts.length - 1, cbxActive + 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (opts.length) cbxSetActive(Math.max(0, cbxActive - 1));
+      } else if (e.key === "Home") {
+        if (opts.length) { e.preventDefault(); cbxSetActive(0); }
+      } else if (e.key === "End") {
+        if (opts.length) { e.preventDefault(); cbxSetActive(opts.length - 1); }
+      } else if (e.key === "Enter") {
+        if (cbxActive >= 0 && opts[cbxActive]) { e.preventDefault(); cbxChoose(opts[cbxActive]); }
+      } else if (e.key === "Escape") {
+        if (cbx.classList.contains("is-open")) { e.preventDefault(); cbxClose(); }
+      }
+    });
+    cbxList.addEventListener("mousedown", function (e) {
+      var opt = e.target.closest(".combobox__option");
+      if (opt) { e.preventDefault(); cbxChoose(opt); }
+    });
+    cbxInput.addEventListener("blur", function () { window.setTimeout(cbxClose, 120); });
+    d.addEventListener("click", function (e) { if (!cbx.contains(e.target)) cbxClose(); });
+    cbxRender();
+  }
+
+  /* ---------- Búsqueda (§10.28): limpiar ---------- */
+  Array.prototype.forEach.call(d.querySelectorAll(".search"), function (s) {
+    var input = s.querySelector(".search__input");
+    var clear = s.querySelector(".search__clear");
+    if (!input || !clear) return;
+    clear.addEventListener("click", function () {
+      input.value = "";
+      input.focus();
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+  });
+
+  /* ---------- DatePicker (§10.32): calendario + navegación por teclado ---------- */
+  var dp = d.getElementById("demoDatepicker");
+  if (dp) {
+    var dpInput = d.getElementById("dpInput");
+    var dpCal = d.getElementById("dpCal");
+    var dpGrid = d.getElementById("dpGrid");
+    var dpTitle = dp.querySelector(".calendar__title");
+    var MONTHS = ["enero", "febrero", "marzo", "abril", "mayo", "junio",
+      "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
+    var fmtLong = new Intl.DateTimeFormat("es-MX", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
+    var fmtInput = new Intl.DateTimeFormat("es-MX", { day: "2-digit", month: "2-digit", year: "numeric" });
+    function atMidnight(dt) { return new Date(dt.getFullYear(), dt.getMonth(), dt.getDate()); }
+    function sameDay(a, b) {
+      return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    }
+    var today = atMidnight(new Date());
+    var selected = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+    var focusDate = new Date(selected);
+    var view = new Date(selected.getFullYear(), selected.getMonth(), 1);
+    function dpRender() {
+      var y = view.getFullYear(), m = view.getMonth();
+      dpTitle.textContent = MONTHS[m] + " " + y;
+      dpGrid.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);
+      for (var i = 0; i < weeks * 7; i++) {
+        var cell = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+        var btn = d.createElement("button");
+        btn.type = "button";
+        btn.className = "calendar__day";
+        btn.setAttribute("role", "gridcell");
+        btn.textContent = String(cell.getDate());
+        if (cell.getMonth() !== m) btn.classList.add("calendar__day--outside");
+        if (sameDay(cell, today)) btn.classList.add("calendar__day--today");
+        var isSel = sameDay(cell, selected);
+        if (isSel) btn.classList.add("calendar__day--selected");
+        btn.setAttribute("aria-selected", isSel ? "true" : "false");
+        btn.setAttribute("aria-label", fmtLong.format(cell));
+        btn.tabIndex = sameDay(cell, focusDate) ? 0 : -1;
+        btn.setAttribute("data-ts", String(cell.getTime()));
+        dpGrid.appendChild(btn);
+      }
+    }
+    function dpButtonFor(dt) { return dpGrid.querySelector('[data-ts="' + atMidnight(dt).getTime() + '"]'); }
+    function dpMoveFocus(dt) {
+      focusDate = atMidnight(dt);
+      if (focusDate.getMonth() !== view.getMonth() || focusDate.getFullYear() !== view.getFullYear()) {
+        view = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
+        dpRender();
+      } else {
+        Array.prototype.forEach.call(dpGrid.querySelectorAll(".calendar__day"), function (b) {
+          b.tabIndex = b.getAttribute("data-ts") === String(focusDate.getTime()) ? 0 : -1;
+        });
+      }
+      var b = dpButtonFor(focusDate);
+      if (b) b.focus();
+    }
+    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();
+      window.setTimeout(function () { var b = dpButtonFor(focusDate); if (b) b.focus(); else dpCal.focus(); }, 0);
+    }
+    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) {
+      selected = atMidnight(dt);
+      dpInput.value = fmtInput.format(selected);
+      dpClose(true);
+    }
+    dpInput.addEventListener("click", function () {
+      if (dp.classList.contains("is-open")) dpClose(true); else dpOpen();
+    });
+    dpInput.addEventListener("keydown", function (e) {
+      if ((e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && !dp.classList.contains("is-open")) {
+        e.preventDefault(); dpOpen();
+      }
+    });
+    dp.querySelector("[data-cal-prev]").addEventListener("click", function () {
+      view = new Date(view.getFullYear(), view.getMonth() - 1, 1); dpRender();
+    });
+    dp.querySelector("[data-cal-next]").addEventListener("click", function () {
+      view = new Date(view.getFullYear(), view.getMonth() + 1, 1); dpRender();
+    });
+    dpGrid.addEventListener("click", function (e) {
+      var btn = e.target.closest(".calendar__day");
+      if (btn) dpSelect(new Date(Number(btn.getAttribute("data-ts"))));
+    });
+    dpGrid.addEventListener("keydown", function (e) {
+      var delta = null;
+      if (e.key === "ArrowLeft") delta = -1;
+      else if (e.key === "ArrowRight") delta = 1;
+      else if (e.key === "ArrowUp") delta = -7;
+      else if (e.key === "ArrowDown") delta = 7;
+      else if (e.key === "Home") delta = -((focusDate.getDay() + 6) % 7);
+      else if (e.key === "End") delta = 6 - ((focusDate.getDay() + 6) % 7);
+      else if (e.key === "PageUp") { e.preventDefault(); dpMoveFocus(new Date(focusDate.getFullYear(), focusDate.getMonth() - 1, focusDate.getDate())); return; }
+      else if (e.key === "PageDown") { e.preventDefault(); dpMoveFocus(new Date(focusDate.getFullYear(), focusDate.getMonth() + 1, focusDate.getDate())); return; }
+      else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); dpSelect(focusDate); return; }
+      else return;
+      e.preventDefault();
+      dpMoveFocus(new Date(focusDate.getFullYear(), focusDate.getMonth(), focusDate.getDate() + delta));
+    });
+    dpCal.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") { e.preventDefault(); dpClose(true); }
+    });
+    d.addEventListener("click", function (e) {
+      if (dp.classList.contains("is-open") && !dp.contains(e.target)) dpClose(false);
+    });
+    dpInput.value = fmtInput.format(selected);
+    dpRender();
+  }
+
+  /* ---------- FileUpload (§10.33): dragover + quitar item ---------- */
+  var fu = d.getElementById("demoFileUpload");
+  if (fu) {
+    ["dragenter", "dragover"].forEach(function (ev) {
+      fu.addEventListener(ev, function (e) { e.preventDefault(); fu.classList.add("is-dragover"); });
+    });
+    ["dragleave", "drop"].forEach(function (ev) {
+      fu.addEventListener(ev, function (e) {
+        e.preventDefault();
+        if (ev === "dragleave" && e.relatedTarget && fu.contains(e.relatedTarget)) return;
+        fu.classList.remove("is-dragover");
+      });
+    });
+  }
+  var fuList = d.getElementById("fuList");
+  if (fuList) {
+    fuList.addEventListener("click", function (e) {
+      var btn = e.target.closest(".file-upload__remove");
+      if (!btn) return;
+      var item = btn.closest(".file-upload__item");
+      if (item && item.parentNode) item.parentNode.removeChild(item);
+    });
+  }
 })();
 </script>
 </body>