Primitivas de interfaz

Las formas que un componente no puede ser, porque envuelven un cuerpo que solo conoce quien llama: la tarjeta de sección, la rejilla de datos, el menú desplegable y el armazón propio de los contenedores. tokens.css trae las clases y la aplicación escribe el marcado. Todo lo de abajo es el marcado que devuelve ui.Styleguide, con sus palabras en tu idioma, y las pruebas de ui contrastan ese marcado con tokens.css.

Cada ejemplo funciona de verdad, pero sus enlaces no llevan a ninguna parte.

box

La tarjeta de sección con relleno, y el título que va fuera de ella.

Qué tarjeta es cuál

rst-list y rst-card no tienen relleno a propósito: contienen una serie de filas, y cada fila se rellena a sí misma. Mete dentro un formulario, un párrafo, una tira de enlaces o cualquier cosa que no sea una fila y se dibujará pegado al borde: el texto tocando el borde es la señal. La tarjeta con relleno para contenido cualquiera es rst-box, con su título como rst-box-head hermano justo antes.

Escritorio Móvil HTML

<div rst-box-head>
  <h2>Liquidación</h2>
  <a rst-btn href="/payout/edit">Editar</a>
</div>
<section rst-box>
  <p>Todo lo que hay en una pantalla va dentro de cajas.</p>
  <div rst-box-foot>Última actualización hace 2 horas</div>
</section>

button

Los botones tienen cuatro variantes y tres tamaños, y un enlace puede parecer uno. Para el indicador que muestra un formulario mientras se envía, mira form-foot.

Escritorio Móvil HTML

<p>
  <button rst-btn type="button">Cancelar</button> <button rst-btn="primary" type="button">Guardar</button> <button rst-btn="ghost" type="button">Vista previa</button> <button rst-btn="danger" type="button">Eliminar</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">Pequeño</button> <button rst-btn="primary" type="button">Predeterminado</button> <button rst-btn="primary lg" type="button">Grande</button> <a rst-btn href="/orders">Ver pedidos</a>
</p>
<p>
  <button rst-btn="primary block" type="button">Continuar</button>
</p>
<p>
  <button rst-btn type="button" disabled>Archivado</button>
</p>

dropdown

El menú details/summary que hay detrás de los menús de desbordamiento de la cabecera y del filtro de una barra de lista, más un filtro aplicado como etiqueta que se puede quitar.

Escritorio Móvil HTML

<details rst-dropdown name="rst-menus">
  <summary>
    Filtrar
    <span rst-caret aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </span>
    <span class="rst-sr-only">Filtrar pedidos: Pagado</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">Pagado</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>Precio</summary>
      <div>
        <a href="/orders?price=free">Gratis</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>Pagado</span>
  <a href="/orders" aria-label="Quitar el filtro Pagado">✕</a>
</span>

form-layout

Los atributos que dan a un formulario su ritmo y su barra de guardar. Ningún parcial los emite: envuelven una serie de campos que compone quien los usa.

Escritorio Móvil HTML

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">Nombre</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">Correo electrónico</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">Ciudad</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">C.P.</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>Los cambios se guardan al instante.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">Cancelar</a>
      <button rst-btn="primary" type="submit">Guardar</button>
    </div>
  </div>
</form>

help

Un signo de interrogación con borde que enlaza a un artículo de ayuda. Su tooltip de CSS es decoración; el enlace lleva su propia etiqueta en una frase completa.

Escritorio Móvil HTML

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Ayuda: pedidos" data-tip="Sobre los pedidos">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

list-grid

El vocabulario real de las tablas de datos: la tarjeta define sus columnas una vez y las filas solo eligen celdas.

Las pantallas se apilan en vertical

Una pantalla es una columna: page-header, luego section-header + tarjeta, luego el siguiente section-header + tarjeta, en orden de lectura. La disposición horizontal queda reservada a los idiomas que la traen: rst-box-head, rst-field-row, rst-lbar, celdas rst-lrow, rst-seg-tabs.

Escritorio Móvil HTML

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>Pedido</span>
    <span class="rst-m-hide">Estado</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">Pagado</span>
    <details rst-row-menu name="rst-menus">
      <summary aria-label="Acciones para Grace Hopper">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </summary>
      <div rst-row-menu-panel>
        <a href="/orders/AB3PX">Ver</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">Reembolsar pedido…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>Ningún pedido coincide. <a href="/orders">Quitar los filtros</a></p>
</div>
<p rst-count-line>Mostrando <strong>1–20</strong> de <strong>412</strong></p>

modal

Un modal es una URL propia, no un estado del cliente: la página de debajo marcada como inert, el panel encima y un enlace normal para cerrar.

Escritorio Móvil HTML

<div rst-backdrop inert>
  <div rst-page>
    <h1>Ajustes</h1>
  </div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">Perfil</a>
      <a href="/settings/billing">Facturación</a>
      <a href="/settings/notifications">Notificaciones</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="Cerrar los ajustes">✕</a>
      <h2 id="modal-title">Perfil</h2>
      <p>Actualiza el nombre y la foto que se muestran en toda la cuenta.</p>
    </section>
  </dialog>
</div>

Míralo en vivo en la URL a la que pertenece (se abre en una pestaña nueva).

selbox

La casilla de selección que lleva una fila de lista en modo selección. Su etiqueta repite la identidad de la fila.

Escritorio Móvil HTML

<label rst-selbox>
  <input type="checkbox" aria-label="Seleccionar el pedido AB3PX">
</label>

shell-sidebar

El armazón del shell sidebar en una página de contenido: en un teléfono, un control para volver al índice.

Escritorio Móvil HTML

<div rst-shell-sidebar="page">
  <a rst-skip href="#main">Ir al contenido</a>
  <div rst-shell-back>
    <a href="/#nav-reports" rel="up" aria-label="Volver a Secciones">Secciones</a>
  </div>
  <aside rst-shell-rail>
    <h1 rst-shell-title>
      <span><a rst-shell-brand href="/">Notes</a></span><span>Informes</span>
    </h1>
    <a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav>
      <span rst-shell-group>Trabajo</span>
      <a id="nav-dashboard" href="/dashboard">Panel</a>
      <a id="nav-reports" href="/reports" aria-current="page">Informes</a>
    </nav>
    <div rst-shell-rail-foot>
      <details rst-dropdown rst-shell-profile name="rst-shell-menu">
        <summary>
          <span rst-shell-avatar>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <div rst-shell-who>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
            <span rst-person-email>ada@example.com</span>
          </div>
          <a href="/settings">Ajustes</a>
        </div>
      </details>
    </div>
  </aside>
  <main rst-shell-main id="main">
    <div rst-page>Contenido.</div>
  </main>
</div>

Abre la demo del armazón con barra lateral, una vista previa independiente. (se abre en una pestaña nueva).

shell-topbar

El armazón propio del contenedor con barra superior, como marcado. Layout lo entrega como una plantilla entera.

Escritorio Móvil HTML

<div rst-shell-topbar>
  <a rst-skip href="#main">Ir al contenido</a>
  <header rst-shell-bar>
    <a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu">
      <summary>
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menú</summary>
    </details>
    <div rst-shell-tail>
      <nav rst-shell-nav>
        <a href="/" aria-current="page">Inicio</a>
        <a href="/archive">Archivo</a>
      </nav>
      <details rst-dropdown rst-shell-account name="rst-menus">
        <summary>
          Cuenta
          <span rst-caret aria-hidden="true">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <a href="/settings">Ajustes</a>
        </div>
      </details>
    </div>
  </header>
  <main rst-page id="main">Contenido.</main>
  <footer rst-shell-foot>Hecho con rastrillo</footer>
</div>

Abre la demo del armazón con barra superior, una vista previa dedicada. (se abre en una pestaña nueva).

stat-band

Una fila de cifras a lo largo de la parte superior de un panel.

Escritorio Móvil HTML

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>Ingresos de este mes</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>frente al mes pasado</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Pedidos de hoy</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Cesta media</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Reembolsos</span>
    <span rst-stat-num>7</span>
  </div>
</div>

tblock

Una tarjeta con borde cuyo cuerpo solo se muestra mientras su interruptor está activado, mediante :has(). El interruptor manda; mostrarlo es una comodidad visual.

Escritorio Móvil HTML

<div rst-tblock>
  <label rst-tblock-head>
    <input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span>
      <span rst-tblock-title>Notificaciones por correo</span>
      <span rst-tblock-desc>Se envía por cada respuesta en un hilo en el que participas.</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">Frecuencia</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="Resumen diario">
    </div>
  </div>
</div>