@erplora/outfitkit 0.1.23 → 0.1.25

package/dist/erplora.css

@@ -72,6 +72,33 @@
   --ok-spacing: 1rem;
   --ok-container-max: 1140px;
   --ok-font: var(--ion-font-family);
+  --ok-font-display: var(--font-display, var(--ok-font));
+
+  /* ── Escala tipográfica semántica ──
+   * Los componentes consumen estos niveles en lugar de inventar tamaños
+   * propios. Los clamp mantienen la jerarquía entre móvil y escritorio. */
+  --ok-type-display-size: clamp(3rem, 2.25rem + 3vw, 4.5rem);
+  --ok-type-display-weight: 650;
+  --ok-type-display-leading: 1;
+  --ok-type-page-title-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
+  --ok-type-page-title-compact-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
+  --ok-type-page-title-weight: 650;
+  --ok-type-page-title-leading: 1.04;
+  --ok-type-section-title-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
+  --ok-type-section-title-weight: 650;
+  --ok-type-section-title-leading: 1.06;
+  --ok-type-card-title-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
+  --ok-type-card-title-weight: 620;
+  --ok-type-card-title-leading: 1.25;
+  --ok-type-intro-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --ok-type-intro-leading: 1.6;
+  --ok-type-body-size: 1rem;
+  --ok-type-body-leading: 1.6;
+  --ok-type-card-body-size: 0.92rem;
+  --ok-type-card-body-leading: 1.55;
+  --ok-type-eyebrow-size: 0.72rem;
+  --ok-type-eyebrow-weight: 600;
+  --ok-type-eyebrow-leading: 1.2;
 }
 
 /* ── OSCURO (dark zinc, coherente con el light) ── */

package/dist/layout.css

@@ -175,8 +175,9 @@
   align-self: flex-start;
   padding: 0.28rem 0.7rem;
   border-radius: 999px;
-  font-size: 0.72rem;
-  font-weight: 600;
+  font-size: var(--ok-type-eyebrow-size, 0.72rem);
+  font-weight: var(--ok-type-eyebrow-weight, 600);
+  line-height: var(--ok-type-eyebrow-leading, 1.2);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--ok-primary, var(--ion-color-primary, #1496d6));
@@ -190,17 +191,58 @@
 
 .ok-section-title {
   margin: 0;
-  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
-  line-height: 1.06;
+  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+  font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+  line-height: var(--ok-type-section-title-leading, 1.06);
   letter-spacing: -0.025em;
-  font-weight: 650;
+  font-weight: var(--ok-type-section-title-weight, 650);
 }
 
 .ok-section-sub {
   margin: 0;
-  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
-  line-height: 1.55;
+  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+  line-height: var(--ok-type-intro-leading, 1.6);
+  color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+}
+
+/* Tipografía editorial reutilizable fuera de los componentes. El display se
+ * reserva para el hero principal; page-title para cabeceras interiores e
+ * intro/body para el texto que las acompaña. */
+.ok-display-title,
+.ok-page-title {
+  margin: 0;
+  font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+  letter-spacing: -0.045em;
+}
+
+.ok-display-title {
+  font-size: var(--ok-type-display-size, clamp(3rem, 2.25rem + 3vw, 4.5rem));
+  font-weight: var(--ok-type-display-weight, 650);
+  line-height: var(--ok-type-display-leading, 1);
+}
+
+.ok-page-title {
+  font-size: var(--ok-type-page-title-size, clamp(2.35rem, 1.75rem + 2.6vw, 4rem));
+  font-weight: var(--ok-type-page-title-weight, 650);
+  line-height: var(--ok-type-page-title-leading, 1.04);
+  text-wrap: balance;
+}
+
+.ok-intro,
+.ok-body {
+  margin: 0;
   color: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
+  text-wrap: pretty;
+}
+
+.ok-intro {
+  font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+  line-height: var(--ok-type-intro-leading, 1.6);
+}
+
+.ok-body {
+  font-size: var(--ok-type-body-size, 1rem);
+  line-height: var(--ok-type-body-leading, 1.6);
 }
 
 /* ===== Tabla apilable (.ok-table-stack) — patrón «no more tables» =====

package/dist/ok-bento-item.js

@@ -96,20 +96,26 @@ class OkBentoItem extends LitElement {
       mask: var(--u) center / contain no-repeat;
     }
     .eyebrow {
-      font-size: 0.7rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--muted);
     }
     .title {
       margin: 0;
-      font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.015em;
-      line-height: 1.2;
+      line-height: var(--ok-type-card-title-leading, 1.25);
+    }
+    ::slotted(p) {
+      margin: 0;
+      color: var(--muted);
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
     }
-    ::slotted(p) { margin: 0; color: var(--muted); line-height: 1.55; }
   `;
   }
   updated() {

package/dist/ok-cta-band.js

@@ -68,31 +68,34 @@ class OkCtaBand extends LitElement {
       border: 1px solid color-mix(in oklab, var(--color) 12%, transparent);
     }
     .eyebrow {
-      font-size: 0.74rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.06em;
       text-transform: uppercase;
       color: var(--muted);
     }
     .title {
       margin: 0;
-      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
-      line-height: 1.08;
+      font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+      font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+      line-height: var(--ok-type-section-title-leading, 1.06);
       letter-spacing: -0.03em;
-      font-weight: 680;
+      font-weight: var(--ok-type-section-title-weight, 650);
       max-width: 22ch;
     }
     ::slotted([slot='heading']) {
       margin: 0;
-      font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem);
-      line-height: 1.08;
+      font-family: var(--ok-font-display, var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif));
+      font-size: var(--ok-type-section-title-size, clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem));
+      line-height: var(--ok-type-section-title-leading, 1.06);
       letter-spacing: -0.03em;
-      font-weight: 680;
+      font-weight: var(--ok-type-section-title-weight, 650);
     }
     .sub {
       margin: 0;
-      font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
-      line-height: 1.5;
+      font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+      line-height: var(--ok-type-intro-leading, 1.6);
       color: var(--muted);
       max-width: 50ch;
     }

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-feature-card.js

@@ -91,23 +91,24 @@ class OkFeatureCard extends LitElement {
       mask: var(--u) center / contain no-repeat;
     }
     .eyebrow {
-      font-size: 0.7rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--muted);
     }
     .title {
       margin: 0;
-      font-size: 1.15rem;
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.015em;
-      line-height: 1.25;
+      line-height: var(--ok-type-card-title-leading, 1.25);
     }
     .desc {
       color: var(--muted);
-      font-size: 0.92rem;
-      line-height: 1.55;
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
     }
     ::slotted(*) { margin: 0; }
   `;

package/dist/ok-hero.js

@@ -86,9 +86,9 @@ class OkHero extends LitElement {
       border-radius: 999px;
       color: var(--primary);
       background: color-mix(in oklab, var(--primary) 12%, transparent);
-      font-size: 0.72rem;
-      font-weight: 600;
-      line-height: 1.2;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.04em;
       text-transform: uppercase;
     }
@@ -111,14 +111,14 @@ class OkHero extends LitElement {
       max-width: 52rem;
       margin: 0;
       font-family: var(--font-display);
-      font-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
-      font-weight: 650;
-      line-height: 1.04;
+      font-size: var(--ok-type-page-title-size, clamp(2.35rem, 1.75rem + 2.6vw, 4rem));
+      font-weight: var(--ok-type-page-title-weight, 650);
+      line-height: var(--ok-type-page-title-leading, 1.04);
       letter-spacing: -0.045em;
       text-wrap: balance;
     }
     :host([compact]) .title {
-      font-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
+      font-size: var(--ok-type-page-title-compact-size, clamp(2rem, 1.55rem + 2vw, 3.25rem));
     }
     .title ::slotted([slot='title']) {
       margin: 0 !important;
@@ -135,8 +135,8 @@ class OkHero extends LitElement {
       max-width: 46rem;
       margin: 1.5rem 0 0;
       color: var(--color-muted);
-      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
-      line-height: 1.6;
+      font-size: var(--ok-type-intro-size, clamp(1rem, 0.95rem + 0.25vw, 1.125rem));
+      line-height: var(--ok-type-intro-leading, 1.6);
       text-wrap: pretty;
     }
     .subtitle ::slotted([slot='subtitle']) {

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/ok-product-card.js

@@ -78,8 +78,9 @@ class OkProductCard extends LitElement {
       mask: var(--u) center / contain no-repeat;
     }
     .cat {
-      font-size: 0.68rem;
-      font-weight: 600;
+      font-size: var(--ok-type-eyebrow-size, 0.72rem);
+      font-weight: var(--ok-type-eyebrow-weight, 600);
+      line-height: var(--ok-type-eyebrow-leading, 1.2);
       letter-spacing: 0.05em;
       text-transform: uppercase;
       color: var(--muted);
@@ -97,15 +98,15 @@ class OkProductCard extends LitElement {
     }
     .name {
       margin: 0.3rem 0 0;
-      font-size: 1.05rem;
-      font-weight: 620;
+      font-size: var(--ok-type-card-title-size, 1.15rem);
+      font-weight: var(--ok-type-card-title-weight, 620);
       letter-spacing: -0.01em;
-      line-height: 1.25;
+      line-height: var(--ok-type-card-title-leading, 1.25);
     }
     .desc {
       color: var(--muted);
-      font-size: 0.88rem;
-      line-height: 1.5;
+      font-size: var(--ok-type-card-body-size, 0.92rem);
+      line-height: var(--ok-type-card-body-leading, 1.55);
       flex: 1;
     }
     .foot {