@foxeltech/angular-ui 0.7.108 → 0.7.124

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.108",
+  "version": "0.7.124",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
     "@microsoft/signalr": "^10.0.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "d3-zoom": "^3.0.0",
+    "lucide-angular": "^1.0.0"
   },
   "exports": {
     "./tailwind.css": "./tailwind.css",

package/src/lib/styles/components.css

@@ -631,6 +631,10 @@ input[type='password'] {
     0 1px 2px rgb(0 0 0 / 0.15);
 }
 .btn-cta:hover {
+  /* The edge darkens a step past the fill — reference `.bi-newbtn:hover`
+     (measured 16/09). Without it the button only changed fill and shadow, so
+     the hover read softer than the design's. */
+  border-color: var(--color-cta-hover-border);
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18),
     0 2px 6px rgb(0 0 0 / 0.2);
@@ -971,7 +975,9 @@ input[type='password'] {
   font-size: var(--og-fs-xs);
   line-height: 1.5;
   white-space: nowrap;
-  font-weight: 500;
+  /* 400, per the reference's risk badge ("High · 82", measured 16/09). At 500
+     it sat a step heavier than every other 11.5px label around it. */
+  font-weight: 400;
 }
 .fx-badge--negative {
   background: rgb(var(--og-negative-soft-bg));
@@ -1032,3 +1038,15 @@ input[type='password'] {
 .fx-statusdot--accent::before {
   background: rgb(var(--og-accent));
 }
+
+/* A tooltip must never take the pointer. Material gives its overlay pane
+   `pointer-events: auto`, and with the drawer COLLAPSED a nav item's tooltip
+   opens at x≈70..110 while the collapse/expand button sits at 58..82 — the
+   tooltip covered the button's right half and swallowed the click, which is
+   why the toggle "sometimes" did nothing (MEASURED 16/09). Nothing in a
+   tooltip is interactive, so this is safe everywhere. */
+.mat-mdc-tooltip-panel,
+.mat-mdc-tooltip,
+.mat-mdc-tooltip-panel > * {
+  pointer-events: none !important;
+}

package/src/lib/styles/tokens.css

@@ -53,6 +53,9 @@
 
   --color-cta: #c2582a;
   --color-cta-hover: #b34e24;
+  /* Border of the CTA while hovered — the reference's `.bi-newbtn:hover`
+     darkens the edge one more step than the fill (16/09). */
+  --color-cta-hover-border: #a3461f;
 
   /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
      they resolve through the alias layer in theme.css, so every existing

package/src/lib/ui/components/bar-list/bar-list.component.html

@@ -1,29 +1,30 @@
-<div class="flex flex-col gap-small">
-  @for (item of items(); track item.label) {
+<!-- Ranked list, to the reference's "Top projects by risk" (measured in the
+     browser 16/09): the SCORE leads, right-aligned in a 70px column, then the
+     label in a 150px column, then a 3px track taking the rest. It used to be
+     label-left / score-right with a 5px full-width track underneath, which is a
+     different object — two lines per row instead of one. -->
+<div class="fx-barlist flex flex-col">
+  @for (item of items(); track item.label; let first = $first) {
     <button
       type="button"
-      class="text-left rounded-control px-normal py-small -mx-normal transition-colors"
+      class="fx-barlist__row text-left flex items-center"
       [class.hover:bg-surface-sunken]="interactive()"
       [class.cursor-default]="!interactive()"
       [tabindex]="interactive() ? 0 : -1"
       (click)="onSelect(item)"
     >
-      <div class="flex items-baseline justify-between gap-normal">
-        <span class="txt-body-medium-01 truncate">{{ item.label }}</span>
-        <span class="text-sm font-semibold text-strong shrink-0" style="font-family: var(--og-font-figure)">
-          {{ item.valueLabel ?? item.value }}
-        </span>
-      </div>
-      @if (item.meta) {
-        <div class="txt-utility-description truncate">{{ item.meta }}</div>
-      }
-      <div class="mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden">
-        <div
-          class="h-full rounded-pill transition-all duration-500"
-          [ngClass]="barClass(item)"
+      <span class="fx-barlist__score shrink-0">{{ item.valueLabel ?? item.value }}</span>
+      <span class="fx-barlist__label shrink-0 truncate">{{ item.label }}</span>
+      <span class="fx-barlist__track flex-1">
+        <span
+          class="fx-barlist__fill block"
+          [class.fx-barlist__fill--lead]="first"
           [style.width.%]="widthOf(item)"
-        ></div>
-      </div>
+        ></span>
+      </span>
     </button>
+    @if (item.meta) {
+      <div class="fx-barlist__meta truncate">{{ item.meta }}</div>
+    }
   }
 </div>

package/src/lib/ui/components/bar-list/bar-list.component.scss

@@ -0,0 +1,63 @@
+@reference '../../../styles/tailwind.css';
+
+/* Metrics from the reference (measured 16/09): rows 8px apart, each 18px tall
+   with a 10px gap between its three cells. */
+.fx-barlist {
+  gap: 8px;
+}
+
+.fx-barlist__row {
+  gap: 10px;
+  min-height: 18px;
+  /* A right gutter so the bar stops short of the panel edge (anh Tú 16/09).
+     The reference's row is 387px wide and its 147px track happens to end level
+     with the card's padding; this panel is twice that, so a track that fills
+     the remainder runs right up to the edge and reads as an overflow. */
+  padding: 0 24px 0 0;
+  background: transparent;
+  border: 0;
+}
+
+/* Score first, right-aligned in its own column — that alignment is what makes
+   the numbers read as a ranked column rather than trailing labels. */
+.fx-barlist__score {
+  width: 70px;
+  text-align: right;
+  font-family: var(--og-font-mono);
+  font-size: var(--og-fs-sm);
+  font-weight: 400;
+  color: rgb(var(--og-text));
+}
+
+.fx-barlist__label {
+  width: 150px;
+  font-size: var(--og-fs-sm);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+}
+
+/* A 3px hairline track, square ends — not the 5px pill it was. */
+.fx-barlist__track {
+  height: 3px;
+  background: rgb(var(--og-track));
+  overflow: hidden;
+}
+
+/* Every bar is muted EXCEPT the leader, which takes the accent. The reference
+   ranks by one colour and highlights the top row; tone-per-row turned the
+   panel into a severity chart, which is the donut's job, not this one. */
+.fx-barlist__fill {
+  height: 100%;
+  background: rgb(var(--og-text-muted));
+  transition: width 500ms ease;
+}
+
+.fx-barlist__fill--lead {
+  background: rgb(var(--og-accent));
+}
+
+.fx-barlist__meta {
+  font-size: var(--og-fs-2xs);
+  color: rgb(var(--og-text-faint));
+  padding-left: 80px;
+}

package/src/lib/ui/components/breadcrumb/breadcrumb.component.css

@@ -260,3 +260,34 @@
 .text-faint { color: rgb(var(--og-text-faint)); }
 .text-strong { color: rgb(var(--og-text)); }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+
+/* CTA crumb — the reference's "＋ Create project" at the end of the Project
+   Management trail (measured 16/09: 24px tall, 4px 10px 4px 8px, gap 5,
+   10.5px/600, radius 7, a light accent fill with an accent border).
+   The exact demo colours are #eaf1fa / #b9cde6 / #2a4f7c; the accent-soft
+   TOKENS are used instead so the pill follows the theme in all six — they sit
+   within ~3 of those values in light mode, and the border is mixed from the
+   accent rather than hard-coded because no token matches it. */
+.fx-crumb-cta {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 4px 10px 4px 8px;
+  line-height: 1.5;
+  border: 1px solid color-mix(in srgb, rgb(var(--og-accent)) 35%, transparent);
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-accent-soft-bg));
+  color: rgb(var(--og-accent-soft-fg));
+  font-size: var(--og-fs-2xs);
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 130ms ease, border-color 130ms ease;
+}
+
+.fx-crumb-cta:hover {
+  background: color-mix(in srgb, rgb(var(--og-accent)) 16%, rgb(var(--og-accent-soft-bg)));
+  border-color: color-mix(in srgb, rgb(var(--og-accent)) 55%, transparent);
+}

package/src/lib/ui/components/breadcrumb/breadcrumb.component.html

@@ -3,7 +3,12 @@
     @if (i > 0) {
       <span aria-hidden="true" class="fx-crumb-sep">/</span>
     }
-    @if (isChip(crumb)) {
+    @if (crumb.cta) {
+      <button type="button" class="fx-crumb-cta" (click)="go($event, crumb.url || '')">
+        <fx-ui-hero-icon [icon]="crumb.icon || 'plus'" [size]="13" class="flex shrink-0" />
+        <span class="truncate">{{ crumb.label }}</span>
+      </button>
+    } @else if (isChip(crumb)) {
       <span class="relative inline-flex min-w-0">
         <button
           type="button"

package/src/lib/ui/components/drawer/drawer.component.html

@@ -1,10 +1,15 @@
 <div class="drawer-host-wrapper">
   <a href="/" class="drawer-brand" [class.is-collapsed]="!isExpanded">
-    @if (logo) {
-      <img [src]="logo" alt="Home" class="drawer-brand-mark" />
-    } @else {
-      <div class="drawer-brand-mark"></div>
-    }
+    <!-- Logo sits in its own sunken tile (reference `.sb-logo`, measured 16/09):
+         the tile is what carries the hover border, so the mark keeps its own
+         size and nothing shifts by a pixel when that border appears. -->
+    <span class="drawer-brand-logo">
+      @if (logo) {
+        <img [src]="logo" alt="Home" class="drawer-brand-mark" />
+      } @else {
+        <span class="drawer-brand-mark"></span>
+      }
+    </span>
     @if (isExpanded && (logoText || logoSubtext)) {
       <span class="drawer-brand-copy">
         @if (logoText) {
@@ -87,6 +92,7 @@
       <a
         [routerLink]="item.route"
         class="drawer-item"
+        [class.is-collapsed]="!isExpanded"
         [class.active]="isActiveRoute(item.route)"
         [class.has-children]="item.children && item.children.length > 0"
         [style.paddingLeft.px]="isExpanded ? 8 + level * 16 : 16"
@@ -96,7 +102,16 @@
         (click)="onItemClick(item, $event)"
         >
         <div class="item-content">
-          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (item.iconData) {
+            <lucide-icon
+              [img]="item.iconData"
+              [size]="isExpanded ? 13 : 18"
+              class="item-icon"
+              [class.item-icon--solid]="item.iconSolid"
+            />
+          } @else {
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 13 : 18" class="item-icon"></fx-ui-hero-icon>
+          }
           @if (isExpanded) {
             <span class="item-label">{{ item.label }}</span>
           }
@@ -108,6 +123,7 @@
       <button
         type="button"
         class="drawer-item"
+        [class.is-collapsed]="!isExpanded"
         [class.active]="isActiveRoute(item.route)"
         [class.has-children]="item.children && item.children.length > 0"
         [style.paddingLeft.px]="isExpanded ? 8 + level * 16 : 16"
@@ -117,7 +133,16 @@
         (click)="onItemClick(item, $event)"
         >
         <div class="item-content">
-          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (item.iconData) {
+            <lucide-icon
+              [img]="item.iconData"
+              [size]="isExpanded ? 13 : 18"
+              class="item-icon"
+              [class.item-icon--solid]="item.iconSolid"
+            />
+          } @else {
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 13 : 18" class="item-icon"></fx-ui-hero-icon>
+          }
           @if (isExpanded) {
             <span class="item-label">{{ item.label }}</span>
           }

package/src/lib/ui/components/drawer/drawer.component.scss

@@ -30,7 +30,7 @@
    trước đó là 16px, tức 24px tổng). Brand nằm NGOÀI container nên phải tự
    cộng đủ 16px. */
 .drawer-brand {
-  @apply h-[60px] shrink-0 flex items-center gap-3 no-underline overflow-hidden;
+  @apply h-[60px] shrink-0 flex items-center gap-[10px] no-underline overflow-hidden;
   padding-left: 16px;
   padding-right: 8px;
   transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -51,8 +51,38 @@
   }
 }
 
+/* Sunken tile behind the mark (reference `.sb-logo`, measured 16/09: 6px pad,
+   radius-control, --og-surface-sunken). The border is declared TRANSPARENT and
+   only takes a colour on hover — declaring it here rather than adding one on
+   :hover is what keeps the row from shifting 1px when the pointer arrives. */
+.drawer-brand-logo {
+  @apply inline-flex items-center justify-center shrink-0;
+  padding: 6px;
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface-sunken));
+  border: 1px solid transparent;
+  transition:
+    padding 220ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms ease;
+}
+
+/* The whole brand row is one link, so the tile lights up for a hover anywhere
+   on it — the reference's `.sb-logo:hover` sits on a non-clickable span, where
+   pointer-over-the-mark is the only hover there is. */
+.drawer-brand:hover .drawer-brand-logo {
+  border-color: rgb(var(--og-border));
+}
+
+.drawer-brand.is-collapsed .drawer-brand-logo {
+  padding: 4px;
+}
+
 .drawer-brand-mark {
-  @apply h-[20px] w-auto shrink-0;
+  @apply h-[21px] w-auto shrink-0;
+}
+
+.drawer-brand.is-collapsed .drawer-brand-mark {
+  @apply h-[19px];
 }
 
 /* Cột chữ: title + subtitle xếp dọc. min-w-0 để truncate hoạt động khi
@@ -63,21 +93,26 @@
 
 /* Wordmark: dùng CHỮ THẬT chứ không phải ảnh text_logo.png — ảnh đó là
    navy đặc nên chìm hẳn trên theme dark; chữ ăn --og-text nên đúng cả 6. */
+/* Reference: --og-fs-lg / weight 500 / -0.015em / line-height 1 (measured 16/09).
+   It was 600 at -0.01em, which read a notch heavier and wider than the design. */
 .drawer-brand-text {
-  @apply truncate text-[15px] font-semibold text-text-primary select-none;
+  @apply truncate text-[length:var(--og-fs-lg)] font-medium text-text-primary select-none;
   font-family: var(--og-font-display);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.015em;
+  line-height: 1;
 }
 
-/* Subtitle: 11px muted, cùng cỡ với .drawer-version và caption
-   ADMINISTRATION nên không tự sinh ra một bậc typography mới. */
-/* line-clamp-2 chứ không phải truncate: tagline dài (VD "Binary Exploit
-   Intelligence Platform") không lọt một dòng trong cột chữ ~188px của drawer
-   260px, truncate sẽ cắt mất chữ. Hai dòng vẫn nằm gọn trong 60px của
-   .drawer-brand (18.75 + 1 + 27.5 = 47px). */
+/* Subtitle: 9px / weight 400 / +0.02em / line-height 1.2, --og-text-muted
+   (reference, measured 16/09).
+   MỘT DÒNG truncate chứ không còn line-clamp-2: ở 11px thì "Binary Exploit
+   Intelligence Platform" không lọt cột chữ ~188px nên phải cho xuống hai dòng;
+   ở 9px nó lọt (~157px), và một dòng mới đúng bản gốc. Đổi cỡ mà quên đổi chỗ
+   này thì subtitle lại tự ngắt dòng. */
 .drawer-brand-subtext {
-  @apply line-clamp-2 text-[11px] text-text-placeholder select-none mt-[1px];
-  letter-spacing: var(--og-tracking-label);
+  @apply truncate text-[9px] font-normal select-none mt-[2px];
+  color: rgb(var(--og-text-muted));
+  letter-spacing: 0.02em;
+  line-height: 1.2;
 }
 
 .drawer-container {
@@ -90,14 +125,30 @@
 .toggle-btn {
   @apply absolute top-1/2 -translate-y-1/2 z-50 flex items-center justify-center w-6 h-6 rounded-full bg-bg-primary border border-border-default cursor-pointer shadow-sm;
   right: -12px; /* half of button width to straddle the border */
-  transition: all 200ms ease;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+
+  /* An invisible 40px hit area over the 24px circle. The visible button is a
+     circle whose CORNERS are dead, and half of it hangs over the content pane,
+     so the reliable target was ~20px across — small enough that an off-centre
+     press missed (anh Tú: "đôi lúc không hoạt động"). The look does not
+     change; only what the pointer can hit. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    border-radius: 9999px;
+  }
 
   &:hover {
     @apply bg-bg-hover shadow-md;
   }
 
+  /* NO scale on :active. Shrinking the button under a pressed pointer moves its
+     edge inward mid-press; a press that started near the rim then released
+     outside the element, and the browser fires no `click` at all for a
+     mousedown/mouseup pair on different targets. Press feedback is the fill. */
   &:active {
-    transform: translateY(-50%) scale(0.9);
+    @apply bg-bg-hover;
   }
 
   &:focus-visible {
@@ -203,18 +254,64 @@
   @apply outline-none;
 }
 
+/* 9px icon-to-label, per the reference's nav row (measured 16/09). It was
+   `gap-3` = 12px. */
 .item-content {
-  @apply flex items-center gap-3 w-full overflow-hidden;
+  @apply flex items-center gap-[9px] w-full overflow-hidden;
+}
+
+/* 18px, in an 18px box — the reference's glyph is 12.5px inside an 18px span.
+   At 20px the icon alone made the row 32px tall, so the `min-height: 30px` on
+   .drawer-item was never the height that actually shipped. The gap lives on
+   .item-content; do NOT add a margin here as well or the two compound. */
+/* Collapsed the label is gone and the icon is the only thing in the row, so it
+   carries the row on its own and goes back up to 18px (anh Tú 16/09). Expanded
+   it stays at the reference's 13px mark. */
+.drawer-item.is-collapsed .item-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 0;
+}
+
+/* A solid mark: lucide draws outlines, and filling the shape turns the diamond
+   into the reference's filled lozenge.
+   The descendant selector is REQUIRED: lucide renders an <svg> INSIDE the
+   element carrying `.item-icon`, and it is that inner svg that holds
+   `fill="none"` — styling only the outer one left the mark hollow (MEASURED
+   16/09). Paths are named too, for the nesting lucide may skip. */
+.item-icon--solid {
+  fill: currentColor;
+}
+
+/* ::ng-deep is REQUIRED for the descendants, not a shortcut: lucide builds its
+   <svg> (and the `fill="none"` on it) at runtime with Renderer2, so those nodes
+   never carry this component's [_ngcontent] attribute and a scoped selector
+   matches nothing. The host element above is in the template and does get it —
+   which is why the outer fill applied while the mark stayed hollow. */
+:host ::ng-deep .item-icon--solid svg,
+:host ::ng-deep .item-icon--solid path,
+:host ::ng-deep .item-icon--solid polygon {
+  fill: currentColor;
 }
 
 .item-icon {
   @apply flex-shrink-0;
   color: inherit;
+  /* The reference's mark is a 12.5px glyph sitting in an 18px slot, so the
+     ICON is 13px and the 5px below restores the slot: 13 + 5 + the container's
+     9px gap = 27px from the icon's left edge to the label, exactly as in the
+     design. Sizing the icon itself 18px drew it half again too large. */
+  width: 13px;
+  height: 13px;
+  margin-right: 5px;
 }
 
 .item-label {
-  /* Size comes from .drawer-item (12.5px, 0.7.107) — no second scale here. */
-  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-5 text-left;
+  /* Size comes from .drawer-item (12.5px, 0.7.107) — no second scale here.
+     Leading is 18px, not `leading-5`'s 20px: the label is the tallest thing in
+     the row, so 20 + 6 + 6 padding made every row 32px and the declared
+     `min-height: 30px` never applied. The reference's row is 30. */
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-[18px] text-left;
   font-size: inherit;
 }
 

package/src/lib/ui/components/filter-pills/filter-pills.component.html

@@ -3,10 +3,13 @@
     <button
       type="button"
       [attr.aria-pressed]="isActive(option)"
-      class="flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      class="fx-pill flex items-center rounded-full border cursor-pointer transition-colors"
       [ngClass]="pillClass(option)"
       (click)="valueChange.emit(option.value)"
     >
+      @if (option.icon) {
+        <lucide-icon [img]="option.icon" [size]="14" class="flex shrink-0" />
+      }
       {{ option.label }}
       @if (option.count !== null && option.count !== undefined) {
         <span [ngClass]="countClass(option)" style="font-family: var(--og-font-figure)">{{ option.count }}</span>

package/src/lib/ui/components/filter-pills/filter-pills.component.scss

@@ -0,0 +1,23 @@
+@reference '../../../styles/tailwind.css';
+
+/* Pill metrics to the reference (measured in the browser 16/09): 29px tall,
+   6px/12px padding, --og-fs-xs at weight 600, 7px between label and count.
+   It was 26px at 4px/11px, 12px/700 and a 4px gap — a step smaller, a step
+   heavier and a step tighter than the design at every point. */
+.fx-pill {
+  padding: 6px 12px;
+  gap: 7px;
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  /* 15px, not a ratio: 6+6 padding + 2 border + 15 = the reference's 29px.
+     `1.4` on 11.5px renders 16.1 and the pill came out 30. */
+  line-height: 15px;
+}
+
+/* Hover lift, matching the reference's `.bi-filter-pill:hover` — the same
+   0 2px 7px rgba(0,0,0,.12) every other button in that design gets
+   (`.og-button:hover`, which `.btn-alternative` already carries here).
+   Measured 16/09; the pill had no hover affordance at all before. */
+.fx-pill:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
+}

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,20 +1,25 @@
 <!-- flex column filling the host: cards in one grid row share a height and a
      projected footer can sit at the bottom with `mt-auto` (design 01). -->
-<div class="card-common bg-surface flex flex-col flex-1 min-h-0">
+<!-- The card itself carries NO padding: the reference pads the header and the
+     body separately (10px 12px 4px / 10px 12px, measured 16/09), which is what
+     lets the header rule sit flush and the body start tight under it. -->
+<div class="card-common fx-section-card bg-surface flex flex-col flex-1 min-h-0">
   @if (titleStyle() === 'eyebrow') {
-    <div class="flex items-baseline justify-between gap-normal mb-large">
+    <div class="fx-section-card__head flex items-baseline justify-between gap-normal">
       <span class="txt-eyebrow">{{ title() }}</span>
       @if (aside()) {
-        <span class="txt-utility-description text-right">{{ aside() }}</span>
+        <span class="fx-section-card__aside text-right">{{ aside() }}</span>
       }
     </div>
   } @else {
-    <div class="flex items-center gap-normal mb-large">
+    <div class="fx-section-card__head flex items-center gap-normal">
       @if (icon) {
         <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
       }
       <span class="txt-heading-06">{{ title() }}</span>
     </div>
   }
-  <ng-content></ng-content>
+  <div class="fx-section-card__body flex flex-col flex-1 min-h-0">
+    <ng-content></ng-content>
+  </div>
 </div>

package/src/lib/ui/components/section-card/section-card.component.scss

@@ -0,0 +1,28 @@
+@reference '../../../styles/tailwind.css';
+
+/* Card padding, to the reference (measured in the browser 16/09).
+   `card-common` pads 20px/16px uniformly, which the design never does: there
+   the card has none, the header carries 10px 12px 4px and the body 10px 12px.
+   The uniform 16/20 is what made every panel on the page read roomier than the
+   design and pushed each section's first row 6px further from its title. */
+.fx-section-card {
+  padding: 0;
+}
+
+.fx-section-card__head {
+  padding: 10px 12px 4px;
+}
+
+.fx-section-card__body {
+  padding: 10px 12px;
+}
+
+/* Section caption ("ranked by risk · across all projects"): 11.5px/400 in
+   --og-text-faint. `txt-utility-description` is 12px/300 in --og-text-secondary
+   — a size too large, a weight too light and a shade too dark. */
+.fx-section-card__aside {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  line-height: 1.4;
+  color: rgb(var(--og-text-faint));
+}

package/src/lib/ui/components/stat-cards/stat-cards.component.css

@@ -16,3 +16,51 @@
     grid-template-columns: minmax(0, 1fr) !important;
   }
 }
+
+/* The ruled KPI strip, to the reference (`.og-statgrid--ruled`, measured in the
+   browser 16/09): one bordered, rounded, softly-shadowed panel with NO gap,
+   its cells padded 10px 12px and separated by a hairline on every cell but the
+   last. Same treatment the Exploit Intelligence page already hand-rolled. */
+.fx-stat-grid--ruled {
+  gap: 0;
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface));
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
+  overflow: hidden;
+}
+
+.fx-stat-grid--ruled .fx-stat-cell {
+  padding: 10px 12px;
+  border-right: 1px solid rgb(var(--og-border));
+}
+
+.fx-stat-grid--ruled .fx-stat-cell--last {
+  border-right: 0;
+}
+
+/* Cell type: 10.5px faint label, a 32px mono figure 6px below it, an 11.5px
+   muted sub 4px below that. */
+.fx-stat-cell__label {
+  font-size: var(--og-fs-2xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-faint));
+}
+
+.fx-stat-cell__figure {
+  font-family: var(--og-font-figure);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.1;
+  color: rgb(var(--og-text));
+  margin-top: 6px;
+}
+
+.fx-stat-cell__sub {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+  margin-top: 4px;
+}