@elasticias/ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticias/ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",

package/styles/_patterns.scss

@@ -1134,22 +1134,6 @@
    lives in the "DETAIL SCREEN PRIMITIVES (Phase 7)" section below. Only the
    sub-element rules (`.left` / `.ref` / `.name` / `.right`) live here. */
 
-.detail-toolbar .left {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
-
-.detail-toolbar .ref {
-  font-family: var(--font-mono);
-  font-size: 14px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-}
 
 .detail-toolbar .name {
   font-family: var(--font-display);
@@ -1161,121 +1145,99 @@
   letter-spacing: -0.015em;
 }
 
-.detail-toolbar .right {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-inline-start: auto;
-}
-
 /* ──────────── DETAIL GRID + CARD ───────────────────────────────── */
 
-.detail-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--s-3);
-}
-
 @media (min-width: 1100px) {
   .detail-grid {
     grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
   }
 }
 
-.detail-stack {
-  display: grid;
-  gap: var(--s-3);
-  align-content: start;
-  min-width: 0;
-}
-
-.card {
-  background: var(--paper-alt);
-  border: 1px solid var(--rule);
-  border-radius: var(--r-2xl);
-  overflow: hidden;
-}
-
-.card-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--rule-soft, rgba(15, 17, 21, 0.05));
-  gap: var(--s-3);
-}
-
-.card-head .title {
-  font-family: var(--font-display);
-  font-variation-settings:
-    'opsz' 12,
-    'wght' 700,
-    'wdth' 88;
-  font-size: 14.5px;
-  letter-spacing: -0.01em;
-}
-
-.card-head .meta {
-  font-size: 11.5px;
-  color: var(--text-mute);
-  font-weight: 600;
-}
-
-.card-body {
-  padding: 16px;
-  display: grid;
-  /* minmax(0, 1fr): a grid item's default min-width is auto, so a wide child
-     — a table, a nested data card — sized this column and pushed the card
-     past its own container. Same trap as the content area and the screen
-     host; this is the third place it bites. */
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--s-3);
-}
-
-.card-foot {
-  padding: 10px 16px;
-  border-top: 1px solid var(--rule-soft, rgba(15, 17, 21, 0.05));
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--s-3);
-  background: var(--paper);
-}
-
 /* ──────────── FORM GRID + FIELD ────────────────────────────────── */
 
-.form-grid {
+/* ──────────────────────────────────────────────────────────────────
+   The 12-column form grid — one definition, two names.
+
+   `.ef-form-grid` is the host class of the <ef-form-grid> primitive;
+   `.form-grid` is the raw-class form written directly in templates.
+   Both are in active use (110 span sites across 13 files), and they
+   were maintained as two separate blocks that had already drifted
+   apart: one supported spans {1,2,3,4,6,12}, the other
+   {2,3,4,6,8,9,12}. A `col-8` inside a `.form-grid` therefore did
+   nothing at all, silently, and so did a `col-1` inside an
+   `.ef-form-grid`. Keeping both names on one rule per span makes the
+   two impossible to drift again.
+
+   Every span collapses to full width at the shell's own mobile
+   breakpoint (767px, the one EfViewportService uses). That single
+   rule is why a field never carries a per-breakpoint span in its
+   template, and why this grid stays mobile-first by default rather
+   than by remembering.
+   ────────────────────────────────────────────────────────────────── */
+.form-grid,
+.ef-form-grid {
   display: grid;
   gap: var(--s-3);
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
 
-.form-grid > .col-1 {
+.form-grid > .col-1,
+.ef-form-grid > .col-1 {
   grid-column: span 1;
 }
-.form-grid > .col-2 {
+.form-grid > .col-2,
+.ef-form-grid > .col-2 {
   grid-column: span 2;
 }
-.form-grid > .col-3 {
+.form-grid > .col-3,
+.ef-form-grid > .col-3 {
   grid-column: span 3;
 }
-.form-grid > .col-4 {
+.form-grid > .col-4,
+.ef-form-grid > .col-4 {
   grid-column: span 4;
 }
-.form-grid > .col-6 {
+.form-grid > .col-5,
+.ef-form-grid > .col-5 {
+  grid-column: span 5;
+}
+.form-grid > .col-6,
+.ef-form-grid > .col-6 {
   grid-column: span 6;
 }
-.form-grid > .col-12 {
+.form-grid > .col-7,
+.ef-form-grid > .col-7 {
+  grid-column: span 7;
+}
+.form-grid > .col-8,
+.ef-form-grid > .col-8 {
+  grid-column: span 8;
+}
+.form-grid > .col-9,
+.ef-form-grid > .col-9 {
+  grid-column: span 9;
+}
+.form-grid > .col-10,
+.ef-form-grid > .col-10 {
+  grid-column: span 10;
+}
+.form-grid > .col-11,
+.ef-form-grid > .col-11 {
+  grid-column: span 11;
+}
+.form-grid > .col-12,
+.ef-form-grid > .col-12 {
   grid-column: span 12;
 }
 
 @media (max-width: 767px) {
-  .form-grid > [class*='col-'] {
+  .form-grid > [class*='col-'],
+  .ef-form-grid > [class*='col-'] {
     grid-column: span 12;
   }
 }
 
+
 .field {
   display: grid;
   gap: 4px;
@@ -1422,12 +1384,6 @@
 
 /* ──────────── DASHBOARD KPI CARDS ───────────────────────────────── */
 
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--s-3);
-}
-
 .kpi-card {
   background: var(--paper-alt);
   border: 1px solid var(--rule);
@@ -1438,60 +1394,6 @@
   align-content: start;
 }
 
-.kpi-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.kpi-value {
-  font-family: var(--font-display);
-  font-variation-settings:
-    'opsz' 96,
-    'wght' 700,
-    'wdth' 80;
-  font-size: clamp(28px, 4vw, 40px);
-  letter-spacing: -0.03em;
-  line-height: 1;
-  font-feature-settings: 'tnum';
-  color: var(--text);
-}
-
-.kpi-value .unit {
-  font-family: var(--font-mono);
-  font-size: 0.4em;
-  font-weight: 500;
-  color: var(--text-mute);
-  margin-inline-start: 6px;
-  letter-spacing: 0;
-}
-
-.spark {
-  width: 100%;
-  height: 28px;
-  margin-top: 4px;
-}
-
-.delta {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: var(--r-pill);
-  letter-spacing: 0;
-}
-
-.delta.up {
-  background: var(--st-delivered-bg);
-  color: var(--st-delivered-fg);
-}
-
-.delta.down {
-  background: var(--st-cancelled-bg);
-  color: var(--st-cancelled-fg);
-}
-
 /* Lower-half dashboard grid (recent activity / pipeline / top lists). */
 
 .dash-grid {
@@ -2953,40 +2855,7 @@
   background: var(--paper);
 }
 
-/* Form grid — 12 cols, collapses to single col under 720px. */
-.ef-form-grid {
-  display: grid;
-  gap: var(--s-3);
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.ef-form-grid > .col-2 {
-  grid-column: span 2;
-}
-.ef-form-grid > .col-3 {
-  grid-column: span 3;
-}
-.ef-form-grid > .col-4 {
-  grid-column: span 4;
-}
-.ef-form-grid > .col-6 {
-  grid-column: span 6;
-}
-.ef-form-grid > .col-8 {
-  grid-column: span 8;
-}
-.ef-form-grid > .col-9 {
-  grid-column: span 9;
-}
-.ef-form-grid > .col-12 {
-  grid-column: span 12;
-}
-
-@media (max-width: 767px) {
-  .ef-form-grid > [class*='col-'] {
-    grid-column: span 12;
-  }
-}
+/* The 12-column form grid lives with `.form-grid` above. */
 
 /* Field row inside a form grid. */
 .ef-field {
@@ -3214,6 +3083,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
 }
 
 .kpi-value {
@@ -3227,6 +3097,7 @@
   letter-spacing: -0.04em;
   font-feature-settings: 'tnum';
   font-variant-numeric: tabular-nums;
+  color: var(--text);
 }
 
 .kpi-value .unit {
@@ -3242,13 +3113,18 @@
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--r-pill);
+  letter-spacing: 0;
 }
 
 .delta.up {
   color: var(--st-delivered-fg);
+  background: var(--st-delivered-bg);
 }
 .delta.down {
   color: var(--st-cancelled-fg);
+  background: var(--st-cancelled-bg);
 }
 .delta.flat {
   color: var(--text-mute);
@@ -3259,6 +3135,7 @@
   opacity: 0.9;
   display: block;
   width: 100%;
+  margin-top: 4px;
 }
 
 .kpi-grid {