@erplora/outfitkit 0.1.21 → 0.1.23

package/dist/layout.css

@@ -18,7 +18,11 @@
 
 :root {
   --ok-grid-gap: clamp(0.75rem, 1.5vw, 1.25rem);
-  --ok-section-pad-y: clamp(3rem, 7vw, 5.5rem);
+  --ok-section-pad-y-compact: clamp(2rem, 4vw, 3rem);
+  --ok-section-pad-y-standard: clamp(2.5rem, 5vw, 4.5rem);
+  --ok-section-pad-y-featured: clamp(3.5rem, 6vw, 5.5rem);
+  --ok-section-pad-y: var(--ok-section-pad-y-standard);
+  --ok-section-head-space: clamp(1.75rem, 3vw, 2.5rem);
 }
 
 /* ===== Container (web pública; en dashboard NO: ahí el ancho lo da el split-pane) ===== */
@@ -53,10 +57,11 @@
   min-width: 0;
 }
 
-/* Grid de cards/KPIs sin clases de breakpoint: se adapta solo al ancho útil. */
+/* Grid de cards/KPIs sin clases de breakpoint: se adapta solo al ancho útil.
+   auto-fit colapsa tracks vacíos para que 2–3 tarjetas sigan llenando el eje. */
 .ok-grid-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--ok-card-min, 260px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--ok-card-min, 16rem), 100%), 1fr));
   gap: var(--ok-grid-gap);
 }
 
@@ -116,15 +121,44 @@
   font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
 }
 
+/* Ritmo vertical compartido. .ok-section-content permite conservar un
+   .ok-container explícito dentro de superficies full-bleed. Los modificadores
+   pueden vivir en el propio bloque o en un wrapper y se heredan por tokens. */
+.ok-section-content {
+  box-sizing: border-box;
+  padding-block: var(--ok-section-pad-y);
+}
+
+.ok-section--compact {
+  --ok-section-pad-y: var(--ok-section-pad-y-compact);
+  --ok-section-head-space: clamp(1.5rem, 2.5vw, 2rem);
+}
+
+.ok-section--featured {
+  --ok-section-pad-y: var(--ok-section-pad-y-featured);
+  --ok-section-head-space: clamp(2rem, 4vw, 3rem);
+}
+
 .ok-section--divider {
   border-top: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 8%, transparent);
 }
 
+/* Superficie alterna para crear ritmo entre secciones de página. Funciona
+   tanto sobre .ok-section como sobre un wrapper full-bleed con .ok-container
+   en su interior. */
+.ok-section--soft {
+  background: color-mix(
+    in oklab,
+    var(--ok-text, var(--ion-text-color, #18181b)) 2.5%,
+    var(--ok-surface, var(--ion-background-color, #fff))
+  );
+}
+
 .ok-section-head {
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
-  margin-bottom: clamp(2rem, 4vw, 3rem);
+  margin-bottom: var(--ok-section-head-space);
   max-width: 56ch;
 }
 
@@ -187,6 +221,10 @@
  *      propio sustituye al flex de ion-row; ::before sí renderiza en hosts
  *      con shadow DOM)
  *
+ * En tablas editoriales, envolver con .ok-table-surface para obtener una
+ * superficie común sin añadir bordes de página. .ok-table-group identifica
+ * filas de sección que no deben convertirse en superficies independientes.
+ *
  * Tokens: --ok-table-cols (columnas del markup no-<table>; por defecto
  * partes iguales) · --ok-table-label-w (ancho de la etiqueta en móvil, 45%).
  * Celdas sin data-title (p.ej. acciones) ocupan el ancho completo en móvil.
@@ -203,6 +241,24 @@ table.ok-table-stack {
   border-collapse: collapse;
 }
 
+/* Marco editorial reutilizable. Usa una línea óptica muy suave en escritorio
+ * y desaparece en móvil, donde las filas ya construyen su propia superficie. */
+.ok-table-surface {
+  width: 100%;
+  overflow-x: auto;
+  background: var(--ok-surface, var(--ion-card-background, #fff));
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 6%, transparent);
+}
+
+.ok-table-surface > .ok-table-stack {
+  margin: 0;
+}
+
+.ok-table-surface > .ok-table-stack :is(tbody tr:last-child td, .ok-trow:last-child .ok-tcell) {
+  border-bottom: 0;
+}
+
 /* Markup no-<table>: cabecera y filas como grid de columnas iguales */
 .ok-table-stack > .ok-thead,
 .ok-table-stack > .ok-trow {
@@ -230,6 +286,13 @@ table.ok-table-stack {
 }
 
 @media (max-width: 767px) {
+  .ok-table-surface {
+    overflow: visible;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   /* La tabla nativa deja de comportarse como tabla */
   table.ok-table-stack,
   table.ok-table-stack :is(thead, tbody, tfoot, tr, th, td),
@@ -248,12 +311,24 @@ table.ok-table-stack {
     border: 0;
   }
 
-  /* Fila = card */
+  /* Fila = superficie ligera. Sin borde: la separación procede del fondo,
+     la sombra mínima y los divisores internos, evitando superficies anidadas. */
   .ok-table-stack :is(tbody tr, .ok-trow) {
-    border: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 12%, transparent);
-    border-radius: 8px;
+    border: 0;
+    border-radius: 12px;
     margin-bottom: 0.75rem;
     overflow: hidden;
+    background: var(--ok-surface, var(--ion-card-background, #fff));
+    box-shadow: 0 1px 3px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 9%, transparent);
+  }
+
+  /* Una fila de grupo es un rótulo editorial, no otra card de datos. */
+  .ok-table-stack :is(tbody tr.ok-table-group, .ok-trow.ok-table-group) {
+    margin: 1.25rem 0 0.35rem;
+    border-radius: 0;
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
   }
 
   /* Celda = par etiqueta/valor (display/width explícitos: pisan el :host

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "OutfitKit — librería de Web Components (Lit) que CONSTRUYE lo que Ionic no tiene (tree, data-table rica, inline-feedback, kpi/stat, stepper/wizard, calendar, kanban…) sobre primitivos de Ionic. Ionic es la base; OutfitKit cubre los huecos. npm + CDN, imports individuales, CSP-safe. Tema vía tokens --ok-* (fallback a --ion-*).",
   "type": "module",
   "license": "MIT",