innoboxrr-form-core 2.2.0 → 2.4.0

package/README.md

@@ -1,49 +1,75 @@
 # innoboxrr-form-core
 
-Lo que comparten [`innoboxrr-form-elements`](../form-elements) (Vue) y
-[`innoboxrr-react-form-elements`](../react-form-elements) (React) y no depende
-de ningún framework.
+Lo que comparten [`innoboxrr-form-elements`](../form-elements) (Vue),
+[`innoboxrr-react-form-elements`](../react-form-elements) (React) y los dos
+datatables, y no depende de ningún framework: el tema, los iconos, las hojas de
+estilo, los archivos y las zonas horarias.
 
-Estaba duplicado en los dos paquetes, que es exactamente como dos copias
-empiezan a divergir.
+Estaba duplicado en los paquetes, que es exactamente como dos copias empiezan a
+divergir.
 
 ```
 npm i innoboxrr-form-core
 ```
 
-## Tema
+## Estilos
+
+```js
+import 'innoboxrr-form-core/styles'
+```
+
+Una sola importación trae las tres hojas: `tokens.css` (las variables),
+`layout.css` (las utilidades de maquetación) y `components.css` (los
+componentes). Nada de lo generado necesita UIkit, Tailwind ni Font Awesome.
+
+Colores, formas, densidad, capas y movimiento son variables CSS. Para cambiar el
+aspecto de todo, se redefinen:
 
-Antes cada componente llevaba su cadena CSS incrustada como valor por defecto
-de `customClass` —repetida en los dos paquetes— y el código que genera
-`larapack-generator` esperaba `inputClass` y `buttonClass` de un mixin global
-que la aplicación anfitriona tenía que registrar sin que nada lo dijera.
+```css
+:root {
+    --fe-primary: #7c3aed;
+    --fe-radius: 10px;
+    --fe-density: 0.875;
+}
+```
+
+El modo oscuro responde a la preferencia del sistema y a un `data-theme="dark"`
+en la raíz; `data-theme="light"` fuerza el claro aunque el sistema esté en
+oscuro.
+
+## Tema
 
-Ahora es un mapa de tokens que la aplicación ajusta **una vez**, al arrancar:
+Un mapa de tokens que la aplicación ajusta **una vez**, al arrancar. Cada token
+apunta a una clase del sistema propio (`fe-*`), así que el caso normal es no
+tocarlo; sirve para apuntar un token a las clases de otro sistema visual cuando
+la aplicación ya tiene el suyo:
 
 ```js
 import { setTheme } from 'innoboxrr-form-core'
 
 setTheme({
     input: 'form-control',
-    select: 'form-select',
     button: 'btn btn-primary',
 })
 ```
 
-Los tokens:
-
 | Grupo | Tokens |
 |---|---|
 | Envoltorios | `field`, `fieldInner`, `label`, `help`, `helpIcon`, `error` |
 | Controles | `input`, `select`, `textarea`, `checkbox`, `radio`, `file` |
-| Botones | `button`, `buttonSecondary`, `buttonDanger`, `buttonLink` |
-
-Los valores de fábrica son los de UIkit + Tailwind que ya usaba el ecosistema,
-así que actualizar no cambia nada de aspecto.
-
-`customClass` sigue existiendo y **reemplaza** al token, para el caso puntual.
-Antes unos controles lo reemplazaban y otros lo sumaban a una clase incrustada;
-ahora se comportan todos igual.
+| Botones | `button`, `buttonSecondary`, `buttonDanger`, `buttonLink`, `iconButton` |
+| Navegación | `breadcrumb`, `breadcrumbLink`, `breadcrumbCurrent`, `breadcrumbSeparator`, `actionMenu`, `actionMenuItem`, `actionMenuDanger`, `kbd` |
+| Superficies | `surface`, `surfaceRaised`, `toolbar`, `badge`, `badgePrimary`, `badgeSuccess`, `badgeDanger`, `badgeWarning` |
+| Esqueletos | `skeleton`, `skeletonText`, `skeletonCircle`, `skeletonBlock` |
+| Diálogos y drawers | `overlay`, `dialog`, `dialogSmall`, `dialogLarge`, `dialogHeader`, `dialogTitle`, `dialogBody`, `dialogFooter`, `drawer`, `drawerStart`, `drawerHeader`, `drawerTitle`, `drawerBody`, `drawerFooter` |
+| Menús | `menu`, `menuList`, `menuItem`, `menuItemDanger`, `menuSeparator`, `menuLabel` |
+| Paleta de comandos | `command`, `commandInput`, `commandList`, `commandGroup`, `commandItem`, `commandEmpty` |
+| Avisos | `toast`, `toastSuccess`, `toastDanger`, `toastWarning`, `toastTitle`, `toastClose`, `toastRegion` |
+| Tabla | `table`, `tableNumeric`, `tableSticky`, `tableSelect`, `tableResizer`, `tableEmpty`, `bulkBar`, `bulkCount` |
+| Edición en línea | `editable` |
+| Shell de aplicación | `shell`, `shellHeader`, `shellSidebar`, `shellMain` |
+
+`customClass` **reemplaza** al token, para el caso puntual:
 
 ```js
 import { getTheme, resetTheme, onThemeChange, classFor } from 'innoboxrr-form-core'
@@ -55,9 +81,57 @@ resetTheme()          // vuelve a fábrica (sobre todo para pruebas)
 onThemeChange(fn)     // devuelve la función para dejar de escuchar
 ```
 
-Los dos paquetes de componentes se suscriben, así que **un `setTheme` en
-caliente repinta lo que ya esté montado**: leerlo directamente no lo haría,
-porque el tema es estado de módulo, fuera del framework.
+Los paquetes de componentes se suscriben, así que **un `setTheme` en caliente
+repinta lo que ya esté montado**.
+
+## Piezas de escritorio
+
+Diálogos, drawers, menús y avisos se apoyan en lo que ya hace el navegador, sin
+librerías de interfaz: `<dialog>` con `showModal()` pone la capa superior, el
+fondo inerte, el foco atrapado, Escape para cerrar y la devolución del foco; el
+atributo `popover` pone el cierre al pulsar fuera. Estas hojas solo los dibujan.
+Los componentes de Vue y React envuelven exactamente este marcado.
+
+```html
+<dialog class="fe-drawer">
+    <header class="fe-drawer-header">
+        <h2 class="fe-drawer-title">Nuevo producto</h2>
+        <button class="fe-icon-button" aria-label="Cerrar">…</button>
+    </header>
+    <div class="fe-drawer-body">…</div>
+    <footer class="fe-drawer-footer">…</footer>
+</dialog>
+```
+
+- **Diálogo**: `fe-dialog`, con `fe-dialog-sm` o `fe-dialog-lg` para el ancho.
+- **Drawer**: `fe-drawer` a la derecha; `fe-drawer-start` lo pega a la izquierda.
+- **Paleta de comandos**: `<dialog class="fe-dialog fe-command">` con
+  `fe-command-input` y una `fe-command-list` de `fe-command-item`; el elemento
+  activo lleva `aria-selected="true"`.
+- **Avisos**: una `fe-toast-region` con `popover="manual"`, para seguir encima
+  de un drawer abierto con `showModal()`.
+- **Menús**: `fe-menu` con `popover`, colocado con Floating UI.
+- **Tabla**: `fe-table-select` para la columna de casillas, `data-selected` en
+  la fila, `fe-bulk-bar` para lo que se hace con la selección y
+  `fe-table-resizer` para cambiar el ancho de una columna.
+
+Un `<dialog>` cerrado está oculto porque el navegador le pone `display: none`;
+por eso ninguna regla fija `display` fuera del estado `[open]`. Las capas que no
+viven en la capa superior —la cabecera fija de una tabla, un overlay dibujado a
+mano, los tooltips— siguen la escala `--fe-z-*`, nunca un número suelto.
+
+## Iconos
+
+Un nombre semántico y un mapa que decide de dónde sale el dibujo. Los valores son
+nombres de Iconify (`coleccion:icono`):
+
+```js
+import { setIcons, iconFor } from 'innoboxrr-form-core'
+
+setIcons({ plus: 'lucide:plus', delete: 'lucide:trash-2' })
+iconFor('plus')      // 'lucide:plus'
+iconFor('mdi:home')  // un nombre completo pasa tal cual
+```
 
 ## Archivos
 
@@ -76,10 +150,6 @@ hay que meter en el `FormData`.
 
 `validateFiles` es la misma función devolviendo una promesa, por compatibilidad.
 
-La vista previa de lo que no es imagen es un `data:` URI. Antes era una URL de
-`icon-library.com`: cada archivo disparaba una petición a un tercero que puede
-caerse o cambiar.
-
 ## Zonas horarias
 
 ```js

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "innoboxrr-form-core",
-  "version": "2.2.0",
-  "description": "El nucleo agnostico de los formularios innoboxrr: tema, archivos y zonas horarias.",
+  "version": "2.4.0",
+  "description": "El nucleo agnostico de la interfaz innoboxrr: tema, iconos, estilos, archivos y zonas horarias.",
   "type": "module",
   "main": "index.js",
   "exports": {

package/src/components.css

@@ -104,7 +104,7 @@
 [data-tooltip]::after {
     content: attr(data-tooltip);
     position: absolute;
-    z-index: 60;
+    z-index: var(--fe-z-tooltip);
     bottom: calc(100% + var(--fe-space-2));
     left: 50%;
     transform: translateX(-50%);
@@ -329,6 +329,38 @@
     font-size: var(--fe-text-sm);
 }
 
+/* Un botón que solo lleva un icono: cerrar un diálogo, abrir el menú de una
+   fila. Cuadrado, para que el objetivo no dependa del ancho del glifo. */
+.fe-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fe-control-height);
+    height: var(--fe-control-height);
+    padding: 0;
+    color: var(--fe-text-muted);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--fe-radius);
+    cursor: pointer;
+    transition: background var(--fe-transition), color var(--fe-transition);
+}
+
+.fe-icon-button:hover:not(:disabled) {
+    color: var(--fe-text);
+    background: var(--fe-surface-hover);
+}
+
+.fe-icon-button:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 2px;
+}
+
+.fe-icon-button:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
 /* El icono que va dentro del control, a la izquierda. Sustituye a
    `uk-form-icon`, que además de la clase traía el componente de iconos de
    UIkit. */
@@ -433,6 +465,22 @@
     text-decoration: underline;
 }
 
+/* La tecla de un atajo, en un menú o en la paleta de comandos. */
+.fe-kbd {
+    display: inline-flex;
+    align-items: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 var(--fe-space-1);
+    font-family: var(--fe-font-mono);
+    font-size: var(--fe-text-xs);
+    color: var(--fe-text-muted);
+    background: var(--fe-surface-sunk);
+    border: 1px solid var(--fe-border);
+    border-bottom-width: 2px;
+    border-radius: var(--fe-radius-sm);
+}
+
 /* ============================================================
    SUPERFICIES
    ============================================================ */
@@ -474,6 +522,30 @@
     color: var(--fe-text-muted);
 }
 
+.fe-badge-primary {
+    background: var(--fe-primary-soft);
+    color: var(--fe-primary);
+}
+
+.fe-badge-success {
+    background: var(--fe-success-soft);
+    color: var(--fe-success);
+}
+
+.fe-badge-danger {
+    background: var(--fe-danger-soft);
+    color: var(--fe-danger);
+}
+
+.fe-badge-warning {
+    background: var(--fe-warning-soft);
+    color: var(--fe-warning);
+}
+
+/* ============================================================
+   ESQUELETOS
+   ============================================================ */
+
 /* Un esqueleto en vez de un spinner: mantiene la forma de lo que va a
    llegar, así que la página no salta al cargar. */
 .fe-skeleton {
@@ -488,6 +560,32 @@
     animation: fe-skeleton 1.4s ease infinite;
 }
 
+/* Las tres formas que aparecen en una vista de administración: una línea de
+   texto, un avatar y un bloque. Sin ellas cada vista inventaba su altura. */
+.fe-skeleton-text {
+    display: block;
+    width: 100%;
+    height: 0.875em;
+}
+
+.fe-skeleton-text + .fe-skeleton-text {
+    margin-top: var(--fe-space-2);
+}
+
+.fe-skeleton-circle {
+    display: inline-block;
+    width: 2.5rem;
+    aspect-ratio: 1;
+    border-radius: var(--fe-radius-full);
+}
+
+.fe-skeleton-block {
+    display: block;
+    width: 100%;
+    height: 6rem;
+    border-radius: var(--fe-radius);
+}
+
 @keyframes fe-skeleton {
     0% {
         background-position: 100% 50%;
@@ -497,35 +595,181 @@
     }
 }
 
+/* ============================================================
+   DIALOGOS Y DRAWERS
+   ============================================================ */
+
+/*
+ * Sobre el elemento <dialog> del navegador, abierto con showModal():
+ *
+ *     <dialog class="fe-dialog">
+ *         <header class="fe-dialog-header">…</header>
+ *         <div class="fe-dialog-body">…</div>
+ *         <footer class="fe-dialog-footer">…</footer>
+ *     </dialog>
+ *
+ * El navegador pone lo que antes había que programar: la capa superior sin
+ * z-index, el fondo inerte, el foco atrapado dentro, Escape para cerrar y la
+ * devolución del foco al cerrar. Aquí solo se dibuja.
+ *
+ * Nada de lo de aquí fija `display` en el estado cerrado: un <dialog> sin
+ * `open` está oculto porque el navegador le pone display: none, y una regla
+ * que lo pisara lo dejaría visible siempre.
+ */
+
 .fe-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(16, 18, 27, 0.45);
+    z-index: var(--fe-z-overlay);
+    background: var(--fe-overlay);
 }
 
 .fe-dialog {
+    width: min(var(--fe-dialog-width), calc(100vw - 2 * var(--fe-space-4)));
+    max-height: 85vh;
+    padding: 0;
+    color: var(--fe-text);
     background: var(--fe-surface-raised);
     border: 1px solid var(--fe-border);
     border-radius: var(--fe-radius-lg);
     box-shadow: var(--fe-shadow-lg);
-    max-height: 85vh;
     overflow: auto;
 }
 
+.fe-dialog[open] {
+    display: flex;
+    flex-direction: column;
+    animation: fe-dialog-in var(--fe-duration) var(--fe-ease-out);
+}
+
+.fe-dialog::backdrop,
+.fe-drawer::backdrop {
+    background: var(--fe-overlay);
+    animation: fe-backdrop-in var(--fe-duration) var(--fe-ease-out);
+}
+
+.fe-dialog-sm {
+    --fe-dialog-width: 24rem;
+}
+
+.fe-dialog-lg {
+    --fe-dialog-width: 48rem;
+}
+
+.fe-dialog-header,
+.fe-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-4) var(--fe-space-5);
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-dialog-title,
+.fe-drawer-title {
+    margin: 0;
+    font-size: var(--fe-text-lg);
+    font-weight: 600;
+    color: var(--fe-text);
+}
+
+.fe-dialog-body,
+.fe-drawer-body {
+    padding: var(--fe-space-5);
+    overflow: auto;
+}
+
+.fe-dialog-footer,
+.fe-drawer-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--fe-space-2);
+    padding: var(--fe-space-3) var(--fe-space-5);
+    border-top: 1px solid var(--fe-border);
+}
+
+/* Un drawer es un <dialog> pegado a un borde. El formulario de crear o
+   editar se abre aquí y la tabla sigue a la vista, detrás. */
 .fe-drawer {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: min(32rem, 100vw);
+    width: min(var(--fe-drawer-width), 100vw);
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: none;
+    margin: 0 0 0 auto;
+    padding: 0;
+    color: var(--fe-text);
     background: var(--fe-surface);
+    border: none;
     border-left: 1px solid var(--fe-border);
     box-shadow: var(--fe-shadow-lg);
+    overflow: hidden;
+}
+
+.fe-drawer[open] {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+    animation: fe-drawer-in var(--fe-duration) var(--fe-ease-out);
 }
 
+.fe-drawer-body {
+    flex: 1 1 auto;
+}
+
+.fe-drawer-start {
+    margin: 0 auto 0 0;
+    border-left: none;
+    border-right: 1px solid var(--fe-border);
+}
+
+.fe-drawer-start[open] {
+    animation-name: fe-drawer-start-in;
+}
+
+@keyframes fe-dialog-in {
+    from {
+        opacity: 0;
+        transform: translateY(0.5rem) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes fe-drawer-in {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: none;
+    }
+}
+
+@keyframes fe-drawer-start-in {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: none;
+    }
+}
+
+@keyframes fe-backdrop-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* ============================================================
+   MENUS
+   ============================================================ */
+
 .fe-menu {
     min-width: 11rem;
     padding: var(--fe-space-1);
@@ -535,6 +779,29 @@
     box-shadow: var(--fe-shadow);
 }
 
+/*
+ * Un menú que vive en la capa superior del navegador, con el atributo
+ * `popover`. El navegador ya se encarga de abrirlo, cerrarlo al pulsar fuera,
+ * cerrarlo con Escape y sacarlo por encima de todo; aquí solo hay que quitarle
+ * los estilos que trae de fábrica para que Floating UI pueda colocarlo.
+ */
+.fe-menu[popover] {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    overflow: visible;
+}
+
+.fe-menu[popover]:popover-open {
+    animation: fe-menu-in var(--fe-duration-fast) ease;
+}
+
+.fe-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
 .fe-menu-item {
     display: flex;
     align-items: center;
@@ -544,6 +811,7 @@
     font-size: var(--fe-text-sm);
     color: var(--fe-text);
     text-align: left;
+    text-decoration: none;
     background: none;
     border: none;
     border-radius: var(--fe-radius-sm);
@@ -555,17 +823,159 @@
     background: var(--fe-surface-hover);
 }
 
+.fe-menu-item:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: -2px;
+}
+
+.fe-menu-item-danger {
+    color: var(--fe-danger);
+}
+
+.fe-menu-item-danger:hover,
+.fe-menu-item-danger[data-highlighted] {
+    background: var(--fe-danger-soft);
+}
+
+/* Un elemento que no se puede usar se ve y se explica, no desaparece: quien no
+   tiene permiso tiene que saber que la acción existe. */
+.fe-menu-item:disabled,
+.fe-menu-item[aria-disabled='true'] {
+    color: var(--fe-text-subtle);
+    background: none;
+    cursor: not-allowed;
+}
+
+.fe-menu-item .fe-kbd {
+    margin-left: auto;
+}
+
+.fe-menu-separator {
+    height: 1px;
+    margin: var(--fe-space-1) 0;
+    background: var(--fe-border);
+    border: none;
+}
+
+.fe-menu-label {
+    padding: var(--fe-space-2) var(--fe-space-3) var(--fe-space-1);
+    font-size: var(--fe-text-xs);
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--fe-text-subtle);
+}
+
+@keyframes fe-menu-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* ============================================================
+   PALETA DE COMANDOS
+   ============================================================ */
+
+/*
+ * Un <dialog class="fe-dialog fe-command"> con un buscador y una lista. Se
+ * abre arriba y no centrado: el ojo va a donde se escribe, y la lista crece
+ * hacia abajo sin mover el buscador.
+ */
+
+.fe-command {
+    --fe-dialog-width: var(--fe-command-width);
+    margin: 12vh auto auto;
+    max-height: 70vh;
+}
+
+.fe-command-input {
+    width: 100%;
+    min-height: calc(var(--fe-control-height) * 1.4);
+    padding: 0 var(--fe-space-5);
+    font-family: var(--fe-font);
+    font-size: var(--fe-text-lg);
+    color: var(--fe-text);
+    background: none;
+    border: none;
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-command-input:focus {
+    outline: none;
+}
+
+.fe-command-input::placeholder {
+    color: var(--fe-text-subtle);
+}
+
+.fe-command-list {
+    list-style: none;
+    margin: 0;
+    padding: var(--fe-space-2);
+    overflow: auto;
+}
+
+.fe-command-group {
+    padding: var(--fe-space-2) var(--fe-space-3) var(--fe-space-1);
+    font-size: var(--fe-text-xs);
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--fe-text-subtle);
+}
+
+.fe-command-item {
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-3);
+    width: 100%;
+    padding: var(--fe-space-2) var(--fe-space-3);
+    font-size: var(--fe-text-base);
+    color: var(--fe-text);
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: var(--fe-radius);
+    cursor: pointer;
+}
+
+.fe-command-item[aria-selected='true'],
+.fe-command-item[data-highlighted] {
+    background: var(--fe-primary-soft);
+    color: var(--fe-text);
+}
+
+.fe-command-item .fe-kbd {
+    margin-left: auto;
+}
+
+.fe-command-empty {
+    padding: var(--fe-space-6) var(--fe-space-4);
+    font-size: var(--fe-text-sm);
+    text-align: center;
+    color: var(--fe-text-muted);
+}
+
+/* ============================================================
+   AVISOS
+   ============================================================ */
+
 .fe-toast {
     display: flex;
     align-items: flex-start;
     gap: var(--fe-space-3);
     padding: var(--fe-space-3) var(--fe-space-4);
     font-size: var(--fe-text-sm);
+    color: var(--fe-text);
     background: var(--fe-surface-raised);
     border: 1px solid var(--fe-border);
     border-left: 3px solid var(--fe-primary);
     border-radius: var(--fe-radius);
     box-shadow: var(--fe-shadow);
+    animation: fe-toast-in var(--fe-duration) var(--fe-ease-out);
 }
 
 .fe-toast-danger {
@@ -576,6 +986,61 @@
     border-left-color: var(--fe-success);
 }
 
+.fe-toast-warning {
+    border-left-color: var(--fe-warning);
+}
+
+.fe-toast-title {
+    display: block;
+    font-weight: 600;
+}
+
+.fe-toast-close {
+    margin-left: auto;
+}
+
+/*
+ * La región donde se apilan los avisos. Va con el atributo popover="manual"
+ * para vivir en la capa superior: un aviso que llega mientras hay un drawer
+ * abierto con showModal() quedaría debajo del fondo inerte, y justo ahí es
+ * donde se guarda un formulario.
+ */
+.fe-toast-region {
+    position: fixed;
+    right: var(--fe-space-4);
+    bottom: var(--fe-space-4);
+    z-index: var(--fe-z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--fe-space-2);
+    width: min(24rem, calc(100vw - 2 * var(--fe-space-4)));
+    pointer-events: none;
+}
+
+.fe-toast-region[popover] {
+    inset: auto var(--fe-space-4) var(--fe-space-4) auto;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    background: transparent;
+    border: none;
+}
+
+.fe-toast-region > * {
+    pointer-events: auto;
+}
+
+@keyframes fe-toast-in {
+    from {
+        opacity: 0;
+        transform: translateY(0.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
 /* ============================================================
    TABLA
    ============================================================ */
@@ -587,6 +1052,7 @@
 }
 
 .fe-table th {
+    position: relative;
     padding: var(--fe-space-2) var(--fe-space-3);
     font-size: var(--fe-text-xs);
     font-weight: 500;
@@ -618,18 +1084,202 @@
     text-align: right;
 }
 
+/* Una columna ordenable lo dice antes de pulsarla. */
+.fe-table th[aria-sort] {
+    cursor: pointer;
+    user-select: none;
+}
+
+.fe-table th[aria-sort='ascending'],
+.fe-table th[aria-sort='descending'] {
+    color: var(--fe-text);
+}
+
+/* La cabecera se queda arriba al desplazar un listado largo. */
+.fe-table-sticky thead th {
+    position: sticky;
+    top: 0;
+    z-index: var(--fe-z-sticky);
+    background: var(--fe-surface);
+}
+
+/* La columna de las casillas de selección: tan estrecha como la casilla. */
+.fe-table-select {
+    width: 1%;
+    white-space: nowrap;
+}
+
+/* El tirador para cambiar el ancho de una columna. */
+.fe-table-resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+    touch-action: none;
+}
+
+.fe-table-resizer:hover,
+.fe-table-resizer[data-resizing='true'] {
+    background: var(--fe-focus);
+}
+
+/* Una tabla sin filas dice por qué, en el sitio de las filas. */
+.fe-table-empty {
+    padding: var(--fe-space-6) var(--fe-space-4);
+    text-align: center;
+    color: var(--fe-text-muted);
+}
+
+/*
+ * La barra que aparece al seleccionar filas: cuántas hay y qué se puede hacer
+ * con todas a la vez. Sustituye a la barra de herramientas mientras dura la
+ * selección, en el mismo sitio, para que la tabla no salte.
+ */
+.fe-bulk-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-2) var(--fe-space-4);
+    color: var(--fe-text);
+    background: var(--fe-primary-soft);
+    border-radius: var(--fe-radius);
+}
+
+.fe-bulk-count {
+    font-size: var(--fe-text-sm);
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   EDICION EN LINEA
+   ============================================================ */
+
+/* Un valor que se edita donde está. Se distingue del texto normal solo al
+   pasar o enfocar, para que una tabla editable no parezca un formulario. */
+.fe-editable {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fe-space-1);
+    min-height: 1.5em;
+    padding: 0 var(--fe-space-1);
+    margin: 0 calc(-1 * var(--fe-space-1));
+    border-radius: var(--fe-radius-sm);
+    border-bottom: 1px dashed transparent;
+    cursor: text;
+}
+
+.fe-editable:hover {
+    border-bottom-color: var(--fe-border-strong);
+}
+
+.fe-editable:focus-visible {
+    outline: 2px solid var(--fe-focus);
+    outline-offset: 1px;
+}
+
+.fe-editable[data-saving='true'] {
+    opacity: 0.6;
+    cursor: progress;
+}
+
+.fe-editable[data-invalid='true'] {
+    border-bottom-color: var(--fe-danger);
+}
+
+/* ============================================================
+   SHELL DE APLICACION
+   ============================================================ */
+
+/*
+ * La forma de una aplicación de escritorio: cabecera, barra lateral y el área
+ * de trabajo, que es lo único que cambia al navegar.
+ *
+ *     <div class="fe-shell">
+ *         <header class="fe-shell-header">…</header>
+ *         <nav class="fe-shell-sidebar">…</nav>
+ *         <main class="fe-shell-main">…</main>
+ *     </div>
+ */
+
+.fe-shell {
+    display: grid;
+    grid-template-columns: var(--fe-sidebar-width) minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    min-height: 100dvh;
+    color: var(--fe-text);
+    background: var(--fe-bg);
+}
+
+.fe-shell-header {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: var(--fe-space-3);
+    padding: var(--fe-space-2) var(--fe-space-4);
+    background: var(--fe-surface);
+    border-bottom: 1px solid var(--fe-border);
+}
+
+.fe-shell-sidebar {
+    padding: var(--fe-space-3);
+    overflow: auto;
+    background: var(--fe-surface);
+    border-right: 1px solid var(--fe-border);
+}
+
+.fe-shell-main {
+    min-width: 0;
+    padding: var(--fe-space-5);
+    overflow: auto;
+}
+
+/* En pantallas estrechas la barra lateral sale del flujo y se abre encima. */
+@media (max-width: 959px) {
+    .fe-shell {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .fe-shell-sidebar {
+        display: none;
+    }
+
+    .fe-shell[data-sidebar-open='true'] .fe-shell-sidebar {
+        display: block;
+        position: fixed;
+        inset: 0 auto 0 0;
+        z-index: var(--fe-z-overlay);
+        width: min(var(--fe-sidebar-width), 85vw);
+        box-shadow: var(--fe-shadow-lg);
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .fe-skeleton {
         animation: none;
     }
 
+    .fe-dialog[open],
+    .fe-drawer[open],
+    .fe-dialog::backdrop,
+    .fe-drawer::backdrop,
+    .fe-menu[popover]:popover-open,
+    .fe-toast {
+        animation: none;
+    }
+
     .fe-input,
     .fe-select,
     .fe-textarea,
     .fe-button,
     .fe-button-secondary,
     .fe-button-danger,
-    .fe-button-link {
+    .fe-button-link,
+    .fe-icon-button {
         transition: none;
     }
 }

package/src/icons.js

@@ -41,8 +41,12 @@ export const defaultIcons = {
     hide: 'fa6-solid:eye-slash',
     actions: 'fa6-solid:gears',
     refresh: 'fa6-solid:rotate',
+    restore: 'fa6-solid:rotate-left',
     search: 'fa6-solid:magnifying-glass',
     filter: 'fa6-solid:filter',
+    more: 'fa6-solid:ellipsis',
+    external: 'fa6-solid:arrow-up-right-from-square',
+    logout: 'fa6-solid:right-from-bracket',
 
     // ESTADO
     help: 'fa6-solid:circle-question',
@@ -58,12 +62,35 @@ export const defaultIcons = {
     up: 'fa6-solid:chevron-up',
     down: 'fa6-solid:chevron-down',
     close: 'fa6-solid:xmark',
+    home: 'fa6-solid:house',
+    menu: 'fa6-solid:bars',
+    sidebar: 'fa6-solid:table-columns',
+    command: 'fa6-solid:terminal',
+    settings: 'fa6-solid:gear',
+
+    // SELECCION Y ORDEN
+    check: 'fa6-solid:check',
+    minus: 'fa6-solid:minus',
+    sort: 'fa6-solid:sort',
+    sortUp: 'fa6-solid:sort-up',
+    sortDown: 'fa6-solid:sort-down',
 
     // OBJETOS
     box: 'fa6-solid:box',
     users: 'fa6-solid:users',
     gift: 'fa6-solid:gift',
     file: 'fa6-solid:file',
+    media: 'fa6-solid:photo-film',
+
+    // EDICION
+    save: 'fa6-solid:floppy-disk',
+    copy: 'fa6-solid:clone',
+    drag: 'fa6-solid:grip-vertical',
+
+    // GRABACION
+    record: 'fa6-solid:microphone',
+    pause: 'fa6-solid:pause',
+    play: 'fa6-solid:play',
 }
 
 /** @type {IconMap} */

package/src/theme.js

@@ -52,6 +52,7 @@ export const defaultTheme = {
     buttonSecondary: 'fe-button-secondary',
     buttonDanger: 'fe-button-danger',
     buttonLink: 'fe-button-link',
+    iconButton: 'fe-icon-button',
 
     // NAVEGACION Y ACCIONES
     breadcrumb: 'fe-breadcrumb',
@@ -61,25 +62,81 @@ export const defaultTheme = {
     actionMenu: 'fe-action-menu',
     actionMenuItem: 'fe-action-item',
     actionMenuDanger: 'fe-action-danger',
+    kbd: 'fe-kbd',
 
     // SUPERFICIES Y PIEZAS DE APLICACION
     surface: 'fe-surface',
     surfaceRaised: 'fe-surface-raised',
     toolbar: 'fe-toolbar',
     badge: 'fe-badge',
+    badgePrimary: 'fe-badge-primary',
+    badgeSuccess: 'fe-badge-success',
+    badgeDanger: 'fe-badge-danger',
+    badgeWarning: 'fe-badge-warning',
     skeleton: 'fe-skeleton',
+    skeletonText: 'fe-skeleton-text',
+    skeletonCircle: 'fe-skeleton-circle',
+    skeletonBlock: 'fe-skeleton-block',
+
+    // DIALOGOS Y DRAWERS, sobre <dialog> y showModal()
     overlay: 'fe-overlay',
     dialog: 'fe-dialog',
+    dialogSmall: 'fe-dialog-sm',
+    dialogLarge: 'fe-dialog-lg',
+    dialogHeader: 'fe-dialog-header',
+    dialogTitle: 'fe-dialog-title',
+    dialogBody: 'fe-dialog-body',
+    dialogFooter: 'fe-dialog-footer',
     drawer: 'fe-drawer',
+    drawerStart: 'fe-drawer-start',
+    drawerHeader: 'fe-drawer-header',
+    drawerTitle: 'fe-drawer-title',
+    drawerBody: 'fe-drawer-body',
+    drawerFooter: 'fe-drawer-footer',
+
+    // MENUS, sobre el atributo popover
     menu: 'fe-menu',
+    menuList: 'fe-menu-list',
     menuItem: 'fe-menu-item',
+    menuItemDanger: 'fe-menu-item-danger',
+    menuSeparator: 'fe-menu-separator',
+    menuLabel: 'fe-menu-label',
+
+    // PALETA DE COMANDOS
+    command: 'fe-command',
+    commandInput: 'fe-command-input',
+    commandList: 'fe-command-list',
+    commandGroup: 'fe-command-group',
+    commandItem: 'fe-command-item',
+    commandEmpty: 'fe-command-empty',
+
+    // AVISOS
     toast: 'fe-toast',
     toastDanger: 'fe-toast-danger',
     toastSuccess: 'fe-toast-success',
+    toastWarning: 'fe-toast-warning',
+    toastTitle: 'fe-toast-title',
+    toastClose: 'fe-toast-close',
+    toastRegion: 'fe-toast-region',
 
     // TABLA
     table: 'fe-table',
     tableNumeric: 'fe-numeric',
+    tableSticky: 'fe-table-sticky',
+    tableSelect: 'fe-table-select',
+    tableResizer: 'fe-table-resizer',
+    tableEmpty: 'fe-table-empty',
+    bulkBar: 'fe-bulk-bar',
+    bulkCount: 'fe-bulk-count',
+
+    // EDICION EN LINEA
+    editable: 'fe-editable',
+
+    // SHELL DE APLICACION
+    shell: 'fe-shell',
+    shellHeader: 'fe-shell-header',
+    shellSidebar: 'fe-shell-sidebar',
+    shellMain: 'fe-shell-main',
 }
 
 /** @type {Theme} */

package/src/tokens.css

@@ -51,8 +51,15 @@
     --fe-warning: #8a6212;
     --fe-warning-soft: #f8f0dd;
 
+    --fe-info: #1f6fb2;
+    --fe-info-soft: #e5f0f9;
+
     --fe-focus: #4b5bd7;
 
+    /* Lo que queda detrás de un diálogo o un drawer abierto. Era un rgba
+       escrito dentro de .fe-overlay, igual en claro que en oscuro. */
+    --fe-overlay: rgba(16, 18, 27, 0.45);
+
     /* ---------- FORMA ---------- */
 
     --fe-radius-sm: 4px;
@@ -97,6 +104,30 @@
     /* ---------- MOVIMIENTO ---------- */
 
     --fe-transition: 120ms ease;
+    --fe-duration-fast: 120ms;
+    --fe-duration: 200ms;
+    /* Rápido al empezar y suave al llegar: lo que se abre tiene que sentirse
+       inmediato, no animado. */
+    --fe-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+
+    /* ---------- CAPAS ---------- */
+
+    /* Un orden y no un número por componente. Lo que se abre con showModal() o
+       con el atributo popover ya vive en la capa superior del navegador y no
+       necesita z-index; esto es para lo que no: la cabecera fija de una tabla,
+       un overlay dibujado a mano, los tooltips. */
+    --fe-z-sticky: 10;
+    --fe-z-dropdown: 40;
+    --fe-z-overlay: 50;
+    --fe-z-tooltip: 60;
+    --fe-z-toast: 70;
+
+    /* ---------- MEDIDAS DE APLICACION ---------- */
+
+    --fe-dialog-width: 32rem;
+    --fe-drawer-width: 32rem;
+    --fe-command-width: 40rem;
+    --fe-sidebar-width: 15rem;
 }
 
 /* La elección explícita de claro gana sobre un sistema en oscuro, de ahí el
@@ -133,8 +164,13 @@
         --fe-warning: #d9ac53;
         --fe-warning-soft: #2a2417;
 
+        --fe-info: #7cb3e6;
+        --fe-info-soft: #16222e;
+
         --fe-focus: #8b95f0;
 
+        --fe-overlay: rgba(0, 0, 0, 0.6);
+
         --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
         --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
         --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
@@ -173,8 +209,13 @@
     --fe-warning: #d9ac53;
     --fe-warning-soft: #2a2417;
 
+    --fe-info: #7cb3e6;
+    --fe-info-soft: #16222e;
+
     --fe-focus: #8b95f0;
 
+    --fe-overlay: rgba(0, 0, 0, 0.6);
+
     --fe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
     --fe-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
     --fe-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);