@erplora/outfitkit 0.1.22 → 0.1.24

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) ===== */
@@ -117,6 +121,24 @@
   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);
 }
@@ -136,7 +158,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
-  margin-bottom: clamp(2rem, 4vw, 3rem);
+  margin-bottom: var(--ok-section-head-space);
   max-width: 56ch;
 }
 

package/dist/ok-data-table.js

@@ -151,7 +151,7 @@ class OkDataTable extends LitElement {
     .tk-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 19; }
     .drawer { position: absolute; top: 0; right: 0; height: 100%; width: 340px; max-width: 88%;
       background: var(--background); border-left: 1px solid var(--border-color);
-      box-shadow: -10px 0 28px rgba(0, 0, 0, 0.10); display: flex; flex-direction: column; z-index: 20;
+      display: flex; flex-direction: column; z-index: 20;
       animation: tk-slide-in 0.18s ease; }
     @keyframes tk-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
     .drawer .dh { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;

package/dist/ok-navbar.js

@@ -26,7 +26,9 @@ function adoptPanelSheet() {
       --height: 100%;
       --border-radius: 0;
       --background: var(--ok-surface, var(--ion-card-background, #ffffff));
-      --box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
+      /* Sin sombra lateral (decisión 2026-07-19, paneles laterales de SaaS y Hub): "none"
+         explícito para no caer al default de ion-modal; el backdrop separa. */
+      --box-shadow: none;
       /* El host del modal es un flex que centra el wrapper: lo anclamos a la derecha. */
       justify-content: flex-end;
       align-items: stretch;

package/dist/outfitkit.bundle.js

@@ -1130,7 +1130,7 @@ class z extends g {
     .tk-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); z-index: 19; }
     .drawer { position: absolute; top: 0; right: 0; height: 100%; width: 340px; max-width: 88%;
       background: var(--background); border-left: 1px solid var(--border-color);
-      box-shadow: -10px 0 28px rgba(0, 0, 0, 0.10); display: flex; flex-direction: column; z-index: 20;
+      display: flex; flex-direction: column; z-index: 20;
       animation: tk-slide-in 0.18s ease; }
     @keyframes tk-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
     .drawer .dh { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
@@ -14258,7 +14258,9 @@ function sd() {
       --height: 100%;
       --border-radius: 0;
       --background: var(--ok-surface, var(--ion-card-background, #ffffff));
-      --box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
+      /* Sin sombra lateral (decisión 2026-07-19, paneles laterales de SaaS y Hub): "none"
+         explícito para no caer al default de ion-modal; el backdrop separa. */
+      --box-shadow: none;
       /* El host del modal es un flex que centra el wrapper: lo anclamos a la derecha. */
       justify-content: flex-end;
       align-items: stretch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "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",