Salvia Serena

<button class="btn btn--primary">Guardar cambios</button>
<button class="btn btn--secondary">Cancelar</button>
<button class="btn btn--outline">Exportar</button>
<button class="btn btn--ghost">Ver detalles</button>
<button class="btn btn--danger">Eliminar cuenta</button>

<!-- Tamaños: btn--sm · (md por defecto) · btn--lg -->
<button class="btn btn--primary btn--lg">Grande</button>

<button class="icon-btn icon-btn--ghost" aria-label="Buscar">
  <svg>…icono 18px…</svg>
</button>
<!-- Variantes: --ghost (default) · --secondary · --primary
     Tamaños: --sm 32px · (md 44px) · --lg 48px -->

<svg class="spinner" viewBox="0 0 24 24" fill="none">
  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"/>
  <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor"
        stroke-width="2.5" stroke-linecap="round"/>
</svg>

<div class="field">
  <label class="field__label" for="correo">Correo electrónico</label>
  <input class="input" id="correo" type="email" placeholder="tu@correo.com">
  <span class="field__help">Tu correo no se comparte con nadie.</span>
</div>

<!-- Obligatorio: .field--required en el .field + required/aria-required en el input -->
<div class="field field--required">
  <label class="field__label" for="nombre">Nombre completo</label>
  <input class="input" id="nombre" required aria-required="true">
</div>

<!-- Estados: input--error (+ .field__error) · input--success · disabled
     Icono leading: envolver en .input-icon -->

<div class="field">
  <label class="field__label" for="desc">Descripción</label>
  <textarea class="textarea" id="desc" maxlength="200"></textarea>
  <span class="textarea-counter">0 / 200</span>
</div>

<div class="select-wrap">
  <select class="select">
    <option>Ciudad de México (GMT-6)</option>
    <option>Bogotá (GMT-5)</option>
  </select>
</div>

<div class="segmented" role="radiogroup" aria-label="Vista">
  <input type="radio" name="vista" id="lista" checked><label for="lista">Lista</label>
  <input type="radio" name="vista" id="tablero"><label for="tablero">Tablero</label>
</div>
<!-- Compacto: añadir segmented--sm -->

<div class="slider-row">
  <span class="slider-label">Límite de gasto</span>
  <span class="slider-value">$ 350</span>
</div>
<input class="slider" type="range" min="0" max="1000" value="350">
<!-- JS: actualizar --slider-fill = ((v-min)/(max-min))*100 + '%' -->

<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="radio">
  <input type="radio" name="plan" checked>
  <span class="radio__dot"></span>
  Plan mensual
</label>

<!-- Indeterminate: propiedad del DOM, no atributo HTML -->
<!-- checkbox.indeterminate = true (guion horizontal) -->

<label class="switch">
  <input type="checkbox" checked>
  <span class="switch__track"></span>
  Notificaciones
</label>

<span class="badge badge--success">
  <svg>…icono…</svg>Activo
</span>
<!-- Tonos: (neutral) · --success · --warning · --danger · --info -->

<span class="tag">diseño
  <button class="tag__close" aria-label="Quitar etiqueta">
    <svg>…x…</svg>
  </button>
</span>

<span class="avatar avatar--lg">
  <span class="avatar__initials">HS</span>
  <i class="avatar__dot avatar__dot--online"></i>
</span>
<!-- Tamaños: --sm 28 · (md 36) · --lg 48 · --xl 64
     Presencia: --online · --busy · --away · (offline) -->

<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>
<!-- Solape -8px · cada avatar con anillo 2px de --surface -->

<hr class="divider">
<div class="divider--label" role="separator">o continúa con</div>
<span class="divider--vertical" role="separator"></span>

<div class="accordion">
  <div class="accordion__item is-open">
    <button class="accordion__header" aria-expanded="true">
      Pregunta <svg>…chevron…</svg>
    </button>
    <div class="accordion__panel"><div>
      <div class="accordion__content">Respuesta</div>
    </div></div>
  </div>
</div>
<!-- JS: alternar .is-open en .accordion__item + aria-expanded -->

<button class="btn btn--secondary" data-tooltip="Duplica el proyecto">
  Duplicar
</button>
<!-- Solo CSS: atributo data-tooltip. Fondo se invierte en dark. -->

<div class="alert alert--warning" role="status">
  <svg>…icono…</svg>
  <div>
    <p class="alert__title">Tu plan se renueva el 12 de julio</p>
    <p class="alert__body">Puedes revisar tu forma de pago hasta esa fecha.</p>
  </div>
  <button class="alert__close" aria-label="Cerrar aviso">…x…</button>
</div>
<!-- Tonos: --info · --success · --warning · --danger -->

<div class="toast-stack" role="status" aria-live="polite">
  <div class="toast toast--success">
    <svg>…icono…</svg>
    <div>
      <p class="toast__title">Cambios guardados</p>
      <p class="toast__body">El proyecto se actualizó.</p>
    </div>
    <button class="icon-btn icon-btn--ghost" aria-label="Cerrar">…x…</button>
  </div>
</div>

<div class="progress-row">
  <span class="progress-label">Almacenamiento</span>
  <span class="progress-value">68%</span>
</div>
<div class="progress">
  <div class="progress__bar" style="width:68%"
       role="progressbar" aria-valuenow="68"
       aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Tonos de barra: (accent) · --success · --warning · --danger -->

<div class="modal" id="miModal" role="dialog" aria-modal="true"
     aria-labelledby="miModalTitulo" aria-describedby="miModalDesc">
  <!-- overlay sin data-modal-close en flujos destructivos -->
  <div class="modal__overlay" data-modal-close></div>
  <div class="modal__panel" tabindex="-1">
    <div class="modal__header">
      <h4 class="modal__title" id="miModalTitulo">¿Eliminar proyecto?</h4>
      <button class="icon-btn icon-btn--ghost" data-modal-close aria-label="Cerrar">…x…</button>
    </div>
    <p id="miModalDesc">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">Eliminar</button>
    </div>
  </div>
</div>
<!-- Panel ancho: modal__panel--lg (640px) -->
<!-- JS: al abrir guarda el disparador y enfoca el panel; Tab/Shift+Tab
     atrapados dentro; al cerrar (Esc, ×, Cancelar) el foco vuelve al disparador -->

<div class="menu-wrap">
  <button class="btn btn--secondary">Acciones</button>
  <div class="menu" role="menu">
    <button class="menu__item" role="menuitem">…Editar</button>
    <div class="menu__sep" role="separator"></div>
    <button class="menu__item menu__item--danger" role="menuitem">…Eliminar</button>
  </div>
</div>
<!-- JS: alternar .is-open; cerrar con click fuera, Esc o al seleccionar -->

<table class="table table--zebra table--sticky">
  <thead>
    <tr>
      <th class="col-select" scope="col">
        <label class="checkbox"><input type="checkbox" aria-label="Seleccionar todo">
          <span class="checkbox__box"><svg>…check…</svg></span></label>
      </th>
      <th scope="col">Cliente</th>
      <th class="num" scope="col" aria-sort="none">
        <button class="th-sort th-sort--num" data-sort="monto">
          Monto<svg class="sort-icon" aria-hidden="true">…</svg></button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="row--selected">
      <td class="col-select"><label class="checkbox"><input type="checkbox" checked
        aria-label="Seleccionar Grupo Andrade">…</label></td>
      <td>Grupo Andrade</td><td class="num" data-monto="9850">$ 9,850.00</td>
    </tr>
  </tbody>
</table>
<!-- JS: click en .th-sort alterna aria-sort asc/desc y reordena tbody;
     el checkbox del header pasa a indeterminate con selección parcial -->

<div class="card">
  <div class="stat">
    <span class="stat__label"><svg>…</svg>Ingresos del mes</span>
    <div class="stat__row">
      <span class="stat__value">$ 128,400</span>
      <span class="stat__delta stat__delta--up"><svg>…</svg>+12.4%</span>
    </div>
  </div>
</div>
<!-- Delta: neutro por defecto (text-secondary) · --up (success-text) y
     --down (danger-text) solo cuando el producto decide qué sentido es bueno -->

<div class="metric-chips">
  <span class="metric-chip">
    <span class="metric-chip__label">Pasos</span> <span class="metric-chip__value">6,240</span>
  </span>
  <button class="metric-chip" type="button" aria-label="Agua: 3 de 8 vasos. Sumar un vaso">
    <svg aria-hidden="true">…plus…</svg>
    <span class="metric-chip__label">Agua</span> <span class="metric-chip__value">3 de 8</span>
  </button>
</div>
<!-- El aria-label se actualiza con el valor; empieza por el texto visible -->

<!-- Meta cumplida: .metric-chip--met pinta el ✓ en --success-500 y el nombre accesible lo dice -->
<button class="metric-chip metric-chip--met" type="button"
        aria-label="Agua: 8 de 8 vasos, meta cumplida. Empezar de nuevo">
  <svg aria-hidden="true">…check…</svg>
  <span class="metric-chip__label">Agua</span> <span class="metric-chip__value">8 de 8</span>
</button>

<ul class="pagination" aria-label="Paginación">
  <li><button class="pagination__btn" aria-label="Anterior">…‹…</button></li>
  <li><button class="pagination__btn">1</button></li>
  <li><span class="pagination__ellipsis">…</span></li>
  <li><button class="pagination__btn is-active" aria-current="page">5</button></li>
  <li><button class="pagination__btn">6</button></li>
  <li><button class="pagination__btn" aria-label="Siguiente">…›…</button></li>
</ul>

<nav class="navbar">
  <a class="navbar__brand" href="/">Higinio</a>
  <div class="navbar__nav">
    <a class="navbar__link is-active" href="#">Resumen</a>
    <a class="navbar__link" href="#">Proyectos</a>
  </div>
</nav>

<nav class="sidebar">
  <button class="sidebar__item is-active"><svg>…</svg>Inicio</button>
</nav>

<div class="tabs" role="tablist">
  <button class="tabs__tab is-active" role="tab">Resumen</button>
</div>

<nav class="breadcrumbs">
  <a href="#">Inicio</a><span class="breadcrumbs__sep">/</span>
  <span class="breadcrumbs__current">Panel</span>
</nav>

<nav class="sidebar sidebar--collapsible" id="appNav" aria-label="Principal">
  <div class="sidebar__group" role="group" aria-labelledby="navTrabajo">
    <span class="sidebar__group-label" id="navTrabajo">Trabajo</span>
    <a class="sidebar__item is-active" href="/" aria-current="page">
      <svg aria-hidden="true">…</svg><span class="sidebar__label">Inicio</span>
    </a>
  </div>
  <button class="sidebar__item sidebar__toggle" type="button"
          aria-expanded="true" aria-controls="appNav">
    <svg aria-hidden="true">…chevron-left…</svg><span class="sidebar__label">Contraer</span>
  </button>
</nav>
<!-- Contraído: .is-collapsed en el nav, aria-expanded="false" y texto «Expandir».
     Por debajo de 768 px: botón ☰ .sidebar-trigger que abre un .drawer.drawer--left con los mismos ítems. -->
<button class="icon-btn sidebar-trigger" type="button" aria-label="Abrir navegación"
        aria-expanded="false" aria-controls="navDrawer">…menu…</button>

<div class="skeleton" style="height:10px;width:85%"></div>
<div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>

<div class="empty-state">
  <svg>…icono 40px…</svg>
  <p class="empty-state__title">Aún no registras comidas hoy</p>
  <p class="empty-state__desc">Añade la primera cuando quieras.</p>
  <button class="btn btn--primary">Registrar comida</button>
</div>

<div class="card">…</div>
<div class="card card--interactive">…</div>

<a class="link" href="#">Enlace con subrayado animado</a>
<span class="code">--accent</span>

<div class="combobox">
  <input class="combobox__input" type="text" role="combobox"
    aria-expanded="false" aria-controls="lista" aria-autocomplete="list"
    aria-activedescendant="opt-0" autocomplete="off">
  <ul class="combobox__list" id="lista" role="listbox" aria-label="Ciudades">
    <li class="combobox__option is-active" role="option" id="opt-0"
        aria-selected="false">Guadalajara</li>
    <li class="combobox__option" role="option" id="opt-1"
        aria-selected="true">Monterrey
      <svg class="combobox__check">…check…</svg></li>
  </ul>
</div>

<div class="search">
  <svg class="search__icon" aria-hidden="true">…lupa…</svg>
  <input class="search__input" type="search" placeholder="Buscar…">
  <button class="search__clear" aria-label="Limpiar">…x…</button>
</div>

<div class="drawer drawer--right" id="miDrawer" role="dialog"
     aria-modal="true" aria-labelledby="miDrawerTitulo">
  <div class="drawer__overlay" data-drawer-close></div>
  <div class="drawer__panel" tabindex="-1">
    <div class="drawer__header">
      <h4 class="drawer__title" id="miDrawerTitulo">Filtrar proyectos</h4>
      <button class="icon-btn icon-btn--ghost" data-drawer-close aria-label="Cerrar">…x…</button>
    </div>
    <!-- campos… -->
    <div class="drawer__footer">
      <button class="btn btn--secondary" data-drawer-close>Cancelar</button>
      <button class="btn btn--primary" data-drawer-close>Aplicar</button>
    </div>
  </div>
</div>

<div class="popover">
  <button class="btn btn--secondary popover__trigger"
          aria-haspopup="dialog" aria-expanded="false"
          aria-controls="pop">Detalles del plan</button>
  <div class="popover__panel" id="pop" role="dialog"
       aria-label="Detalles del plan" tabindex="-1">
    <p>Contenido con <a class="link" href="#">un enlace</a>.</p>
  </div>
</div>

<div class="btn-group" role="group" aria-label="Navegación de semana">
  <button class="btn btn--secondary">Anterior</button>
  <button class="btn btn--secondary">Hoy</button>
  <button class="btn btn--secondary">Siguiente</button>
</div>

<div class="datepicker">
  <input class="datepicker__input" type="text" readonly
         aria-haspopup="dialog" aria-controls="cal">
  <svg class="datepicker__icon" aria-hidden="true">…calendario…</svg>
  <div class="datepicker__calendar" id="cal" role="dialog"
       aria-label="Elegir fecha" tabindex="-1">
    <div class="calendar">
      <div class="calendar__header">
        <button aria-label="Mes anterior">…</button>
        <span class="calendar__title">julio 2026</span>
        <button aria-label="Mes siguiente">…</button>
      </div>
      <div class="calendar__table" role="grid" aria-label="julio 2026">
      <div class="calendar__weekdays" role="row">
        <span class="calendar__weekday" role="columnheader"
              aria-label="lunes">lu</span> …
      </div>
      <div class="calendar__grid" role="rowgroup">
       <div class="calendar__week" role="row">
        <button class="calendar__day calendar__day--today" role="gridcell"
                aria-label="viernes, 10 de julio de 2026"
                aria-selected="false">10</button>
        <button class="calendar__day calendar__day--selected" role="gridcell"
                aria-label="viernes, 17 de julio de 2026"
                aria-selected="true">17</button> …
       </div>
      </div>
      </div>
    </div>
  </div>
</div>

<div class="file-upload">
  <input class="file-upload__input" type="file" multiple
         aria-describedby="hint">
  <label class="file-upload__label" for="…">
    <svg aria-hidden="true">…subir…</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="hint">PDF, PNG o JPG · hasta 10 MB</span>
  </label>
</div>
<ul class="file-upload__list">
  <li class="file-upload__item">
    <svg class="file-upload__icon">…</svg>
    <div class="file-upload__meta">
      <span class="file-upload__name">informe.pdf</span>
      <span class="file-upload__size">2.4 MB · Subiendo 45%</span>
      <div class="progress"><div class="progress__bar" style="width:45%"></div></div>
    </div>
    <button class="file-upload__remove" aria-label="Cancelar informe.pdf">×</button>
  </li>
  <li class="file-upload__item file-upload__item--error">
    <svg class="file-upload__icon">…alerta…</svg>
    <div class="file-upload__meta">
      <span class="file-upload__name">video.mov</span>
      <span class="file-upload__size">…alerta… Formato no admitido</span>
    </div>
    <button class="file-upload__remove" aria-label="Quitar video.mov">×</button>
  </li>
</ul>

<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">…check…</span>
    <span class="step__label">Cuenta</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>

<!-- Vertical: añade la clase --vertical al <ol> -->
<ol class="stepper stepper--vertical">…</ol>

<kbd class="kbd">Esc</kbd>

<!-- Combo: "+" literal entre teclas -->
<span class="kbd-combo">
  <kbd class="kbd">⌘</kbd> + <kbd class="kbd">K</kbd>
</span>