@foxeltech/angular-ui 0.3.1 → 0.7.44

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

@@ -6,11 +6,75 @@
 }
 
 .drawer-host-wrapper {
-  @apply relative h-full border-r border-border-default;
+  /* Column flex: logo (fixed) + container (flex-1). The container was h-full
+     UNDER a 60px logo -> the drawer overflowed the viewport by 60px and the
+     footer (account block) sagged below the fold; opening its menu then
+     scroll-jumped the page. */
+  /* Nền SECONDARY (--og-page-bg) đặt ở WRAPPER chứ không ở .drawer-container:
+     hàng brand nằm ngoài container, nếu tô ở container thì 60px trên cùng
+     lộ nền của trang. Sáng: drawer xám, nội dung trắng; tối: drawer tối hơn
+     surface — đúng quy ước sidebar của cả hai chiều. */
+  @apply relative h-full border-r border-border-default flex flex-col bg-page;
+}
+
+/* Brand row — phải thẳng hàng với icon của nav item.
+   Icon nav nằm ở 24px tính từ mép drawer: 8px của .drawer-container (px-2)
+   + 16px padding-left inline của .drawer-item. Brand nằm NGOÀI container
+   nên phải tự cộng đủ 24px (trước đây p-4 + ml-5 = 36px → lệch 12px). */
+.drawer-brand {
+  @apply h-[60px] shrink-0 flex items-center gap-3 no-underline overflow-hidden;
+  padding-left: 24px;
+  padding-right: 8px;
+  transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* max-width là BẮT BUỘC: .drawer-host-wrapper là flex column có width auto
+     nên bề rộng của nó = max bề rộng các con. Chỉ .drawer-container được
+     animate 70/260px, còn hàng brand thì tự do — một tagline dài (VD "Binary
+     Exploit Intelligence Platform") sẽ NỚI RỘNG cả drawer thay vì xuống dòng.
+     Hai con số dưới đây phải khớp trigger drawerExpand trong drawer.component.ts. */
+  max-width: 260px;
+
+  /* Thu gọn: drawer rộng 70px, icon nav (20px @ 24px) có tâm 34px ≈ tâm
+     drawer 35px → căn giữa là khớp, không cần trừ bì. */
+  &.is-collapsed {
+    @apply justify-center;
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 70px;
+  }
+}
+
+.drawer-brand-mark {
+  @apply h-[20px] w-auto shrink-0;
+}
+
+/* Cột chữ: title + subtitle xếp dọc. min-w-0 để truncate hoạt động khi
+   drawer bị bóp — thiếu nó thì chữ đẩy tràn ra ngoài thay vì cắt. */
+.drawer-brand-copy {
+  @apply flex flex-col min-w-0 leading-tight;
+}
+
+/* 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. */
+.drawer-brand-text {
+  @apply truncate text-[15px] font-semibold text-text-primary select-none;
+  font-family: var(--og-font-display);
+  letter-spacing: -0.01em;
+}
+
+/* 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). */
+.drawer-brand-subtext {
+  @apply line-clamp-2 text-[11px] text-text-placeholder select-none mt-[1px];
+  letter-spacing: var(--og-tracking-label);
 }
 
 .drawer-container {
-  @apply px-2 h-full bg-bg-primary flex flex-col overflow-auto;
+  /* Nền do .drawer-host-wrapper lo — container để trong suốt. */
+  @apply px-2 flex-1 min-h-0 flex flex-col overflow-hidden;
   transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -33,6 +97,10 @@
   }
 }
 
+.drawer-footer-nav {
+  @apply border-t border-border-default pt-2 pb-1 px-0;
+}
+
 .drawer-nav {
   @apply flex-1 overflow-y-auto overflow-x-hidden py-2;
 
@@ -54,6 +122,15 @@
   }
 }
 
+.drawer-section-label {
+  @apply px-large pt-4 pb-1 text-[11px] font-semibold uppercase text-faint select-none;
+  letter-spacing: var(--og-tracking-label);
+}
+
+.drawer-section-rule {
+  @apply mx-3 my-3 border-t border-border-default;
+}
+
 .drawer-item-wrapper {
   @apply relative;
 }
@@ -62,15 +139,35 @@
   @apply flex items-center mt-1 w-full min-h-8 py-2 px-large border-none bg-transparent cursor-pointer no-underline text-text-primary relative rounded;
   transition: all 200ms ease;
 
+  /* Hover = glass mờ hơn: chỉ translucent, chưa có viền/shadow, để không
+     nhầm với hàng đang chọn. */
   &:hover {
-    @apply bg-bg-hover text-text-primary scale-95;
+    @apply text-text-primary scale-95;
+    background: rgb(var(--og-surface-raised) / 0.5);
   }
 
+  /* Hàng đang chọn = GLASS, KHÔNG dùng màu primary (anh Tú chốt 31/08):
+     một tấm surface trong suốt nổi trên nền secondary của drawer + viền
+     hairline + shadow nhẹ. Chữ/icon giữ màu text thường.
+     - surface-RAISED (không phải surface) vì ở charcoal raised (#211c1b)
+       sáng hơn page-bg (#0e0e10) nên tấm kính vẫn nổi; ở porcelain cả hai
+       đều là trắng nên không khác gì.
+     - Viền vẽ bằng inset box-shadow chứ không phải `border`: .drawer-item
+       khai border-none, thêm border thật sẽ đẩy layout 1px.
+     - backdrop-blur chỉ có tác dụng khi nền sau có hoạ tiết/gradient; nền
+       phẳng thì hiệu ứng đến từ độ trong + viền + shadow. */
   &.active {
-    @apply bg-gradient-primary text-white font-medium;
+    @apply text-text-primary font-medium;
+    background: rgb(var(--og-surface-raised) / 0.8);
+    backdrop-filter: blur(12px);
+    /* shadow viết literal chứ không dùng var(--shadow-sm): biến đó do @theme
+       của Tailwind sinh, không chắc có mặt trong scope của component SCSS. */
+    box-shadow:
+      inset 0 0 0 1px rgb(var(--og-border)),
+      0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
 
-    .item-icon {
-      @apply text-white;
+    &:hover {
+      background: rgb(var(--og-surface-raised) / 0.95);
     }
   }
 
@@ -114,21 +211,10 @@
 
 .drawer-version {
   @apply flex items-center justify-center py-3 px-4 text-text-placeholder text-[11px] border-t border-border-default select-none;
-  font-family: 'Roboto', monospace;
+  font-family: var(--og-font-mono);
 }
 
 .drawer-version-dot {
   @apply block w-1.5 h-1.5 rounded-full bg-text-placeholder;
 }
 
-/* Collapsed mode: center the icons */
-.drawer-container[style*='width: 64px'] {
-  .drawer-item {
-    @apply justify-center;
-    padding-left: 16px !important;
-  }
-
-  .item-content {
-    @apply justify-center;
-  }
-}

package/src/lib/ui/components/empty-state/empty-state.component.html

@@ -1,9 +1,9 @@
 <div
   class="flex flex-col items-center justify-center gap-small w-full"
-  [style.minHeight]="height"
+  [style.minHeight]="height()"
 >
   @if (icon) {
     <fx-ui-hero-icon class="text-text-placeholder" [icon]="icon" [size]="24"></fx-ui-hero-icon>
   }
-  <div class="txt-default text-text-placeholder">{{ message }}</div>
+  <div class="txt-default text-text-placeholder">{{ message() }}</div>
 </div>

package/src/lib/ui/components/facets-rail/facets-rail.component.html

@@ -0,0 +1,42 @@
+<div class="flex flex-col gap-large">
+  @if (hasSelection()) {
+    <button type="button" class="txt-link self-end" (click)="reset()">
+      {{ resetLabel() }}
+    </button>
+  }
+  @for (group of groups(); track group.id) {
+    <div role="group" [attr.aria-label]="group.label">
+      <div
+        class="txt-table-header uppercase mb-small"
+        [style.letter-spacing]="'var(--og-tracking-label)'"
+      >
+        {{ group.label }}
+      </div>
+      <div class="flex flex-col gap-xs">
+        @for (option of group.options; track option.value) {
+          <button
+            type="button"
+            (click)="toggle(group, option)"
+            [attr.aria-pressed]="isSelected(group, option)"
+            class="flex items-center gap-normal px-normal py-small rounded-control text-left transition-colors"
+            [ngClass]="
+              isSelected(group, option)
+                ? 'bg-accent-soft text-accent-soft-fg font-medium'
+                : 'text-body hover:bg-surface-sunken'
+            "
+          >
+            @if (option.tone) {
+              <fx-ui-status-dot [tone]="option.tone" [size]="7" />
+            }
+            <span class="text-sm truncate flex-1">{{ option.label }}</span>
+            @if (option.count !== undefined) {
+              <span class="txt-tag-label text-faint" style="font-family: var(--og-font-figure)">
+                {{ option.count }}
+              </span>
+            }
+          </button>
+        }
+      </div>
+    </div>
+  }
+</div>

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

@@ -0,0 +1,16 @@
+<div class="flex flex-wrap items-center gap-small">
+  @for (option of options(); track option.value) {
+    <button
+      type="button"
+      [attr.aria-pressed]="isActive(option)"
+      class="flex items-center gap-small px-semi py-xs rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      [ngClass]="pillClass(option)"
+      (click)="valueChange.emit(option.value)"
+    >
+      {{ option.label }}
+      @if (option.count !== null && option.count !== undefined) {
+        <span [ngClass]="countClass(option)" style="font-family: var(--og-font-figure)">{{ option.count }}</span>
+      }
+    </button>
+  }
+</div>

package/src/lib/ui/components/hero-icon/hero-icon.component.html

@@ -1,9 +1,10 @@
-<ng-heroicons
-  [stroke]="stroke"
-  [icon]="icon"
-  [size]="size"
-  [solid]="solid"
-  [outline]="outline"
-  [color]="color"
-  [class]="class"
-/>
+<svg
+  [attr.width]="size() || 24"
+  [attr.height]="size() || 24"
+  [attr.stroke-width]="solid() ? null : stroke()"
+  [style.color]="color() || null"
+  [class]="class()"
+  aria-hidden="true"
+>
+  <use [attr.href]="href" />
+</svg>

package/src/lib/ui/components/info-field/info-field.component.html

@@ -1,4 +1,4 @@
 <div class="flex flex-col gap-small min-w-0">
-  <span class="txt-field-label !mb-0">{{ label }}</span>
+  <span class="txt-field-label !mb-0">{{ label() }}</span>
   <span class="txt-default" [ngClass]="valueClass">{{ displayValue }}</span>
 </div>

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

@@ -1,8 +1,8 @@
-<div class="mb-4 text-left w-full text-text-primary" [class]="class">
+<div class="mb-4 text-left w-full text-text-primary" [class]="class()">
   @if (label) {
     <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
@@ -24,16 +24,16 @@
       [appTrimOnBlurCollapse]="true"
       [id]="fieldId"
       [type]="displayType"
-      [placeholder]="placeholder"
+      [placeholder]="placeholder()"
       [disabled]="disabled"
       [value]="value"
       (input)="onInput($event)"
       (blur)="onBlur()"
       (focus)="onFocus()"
-      [attr.maxlength]="maxlength"
+      [attr.maxlength]="maxlength()"
       [attr.aria-invalid]="invalid || null"
       [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
-      [attr.aria-required]="required ? true : null"
+      [attr.aria-required]="required() ? true : null"
       [class]="type === 'otp' ? 'input-otp' : 'input-default'"
       [class.input-invalid]="invalid"
       [class.pr-8]="type === 'password' || suffixIcon"
@@ -48,7 +48,7 @@
         [attr.aria-label]="
           type === 'password'
             ? (showPassword ? 'Hide password' : 'Show password')
-            : (suffixAriaLabel || null)
+            : (suffixAriaLabel() || null)
         "
         [attr.aria-pressed]="type === 'password' ? showPassword : null"
       >

package/src/lib/ui/components/kanban-board/kanban-board.component.html

@@ -1,6 +1,6 @@
 <div class="kanban-board">
   <div class="kanban-columns">
-    @for (column of columns; track column.id) {
+    @for (column of columns(); track column.id) {
       <div class="kanban-column">
         <div class="kanban-column-header">
           <h3 class="kanban-column-title">{{ column.title }}</h3>

package/src/lib/ui/components/kanban-board/kanban-board.component.scss

@@ -10,20 +10,20 @@
 }
 
 .kanban-column {
-  @apply flex flex-col min-w-[300px] bg-gray-50 dark:bg-gray-800 rounded-lg;
+  @apply flex flex-col min-w-[300px] bg-surface-sunken rounded-lg;
   flex-shrink: 0;
 }
 
 .kanban-column-header {
-  @apply flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700;
+  @apply flex items-center justify-between p-4 border-b border-border;
 }
 
 .kanban-column-title {
-  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 m-0;
+  @apply text-lg font-semibold text-strong m-0;
 }
 
 .kanban-column-count {
-  @apply px-2 py-1 text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full;
+  @apply px-2 py-1 text-sm font-medium bg-neutral-soft text-neutral-soft-fg rounded-full;
 }
 
 .kanban-column-content {
@@ -32,7 +32,7 @@
 }
 
 .kanban-item {
-  @apply bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600;
+  @apply bg-surface-raised rounded-lg shadow-sm border border-border;
   @apply transition-shadow duration-200;
   cursor: move;
 
@@ -42,18 +42,18 @@
 }
 
 .kanban-item-default {
-  @apply p-4 text-gray-900 dark:text-gray-100;
+  @apply p-4 text-strong;
 }
 
 .kanban-item-placeholder {
-  @apply bg-gray-200 dark:bg-gray-600 rounded-lg border-2 border-dashed border-gray-400 dark:border-gray-500;
+  @apply bg-neutral-soft rounded-lg border-2 border-dashed border-border-strong;
   @apply opacity-50;
   min-height: 60px;
 }
 
 .kanban-column-empty {
-  @apply flex items-center justify-center h-32 text-gray-400 dark:text-gray-500 text-sm;
-  @apply border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg;
+  @apply flex items-center justify-center h-32 text-faint text-sm;
+  @apply border-2 border-dashed border-border rounded-lg;
 }
 
 // CDK Drag and Drop Styles

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

@@ -0,0 +1,20 @@
+<div class="flex items-center gap-normal min-w-0">
+  @if (dotTone() !== undefined) {
+    <fx-ui-status-dot [tone]="dotTone() ?? null" [pulse]="dotPulse()" />
+  }
+  <span class="txt-body-medium-01 truncate flex-1">{{ title() }}</span>
+  @for (badge of badges(); track badge.label) {
+    <span
+      class="txt-tag-label px-normal py-[1px] rounded-pill whitespace-nowrap"
+      [ngClass]="badgeClass(badge)"
+    >
+      {{ badge.label }}
+    </span>
+  }
+</div>
+@if (meta()) {
+  <div class="txt-utility-description mt-xs truncate" [class.ml-large]="dotTone() !== undefined">
+    {{ meta() }}
+  </div>
+}
+<ng-content></ng-content>

package/src/lib/ui/components/loading-panel/loading-panel.component.html

@@ -1,5 +1,5 @@
 <!-- Full-screen glass overlay -->
-@if (show) {
+@if (show()) {
   <div
     class="fixed inset-0 z-50 flex items-center justify-center"
     aria-hidden="false"

package/src/lib/ui/components/master-detail/master-detail.component.css

@@ -9,3 +9,25 @@
     flex-shrink: 0;
   }
 }
+
+/* Facets rail: full-width when stacked; fixed narrow column on lg+. */
+.fx-md-facets {
+  width: 100%;
+}
+
+@media (min-width: 1080px) {
+  .fx-md-facets {
+    width: 230px;
+    flex-shrink: 0;
+  }
+}
+
+/* prevnext style: the Material paginator stays as the paging engine but is
+   visually removed (display:none would break its measurements on re-show). */
+.fx-md-paginator-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -1,13 +1,19 @@
-<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth">
+<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth()">
+  <!-- Facets rail (V2 3-column lookup) — wrapper always rendered so ng-content
+       stays unconditional; hidden when the host projects nothing. -->
+  <div class="fx-md-facets card-common bg-surface" [class.hidden]="!hasFacets">
+    <ng-content select="[mdFacets]"></ng-content>
+  </div>
+
   <!-- Master: list pane -->
   <div class="fx-md-list card-common">
     <ng-content select="[mdHeader]"></ng-content>
     <ng-content select="[mdFilters]"></ng-content>
     <div
       class="flex flex-col gap-normal overflow-auto pr-xs"
-      [style.maxHeight]="maxListHeight"
+      [style.maxHeight]="maxListHeight()"
       role="listbox"
-      [attr.aria-label]="listLabel || null"
+      [attr.aria-label]="listLabel() || null"
     >
       @if (table.loading) {
         <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
@@ -24,18 +30,18 @@
             class="text-left rounded-lg border p-semi transition-colors"
             [ngClass]="
               isSelected(row)
-                ? 'border-gradient-primary-start bg-gradient-primary-start/5'
+                ? 'border-accent bg-accent-soft/60'
                 : 'border-border-default hover:border-border-interactive bg-bg-primary'
             "
           >
             <ng-container
-              [ngTemplateOutlet]="rowTemplate"
+              [ngTemplateOutlet]="rowTemplate()"
               [ngTemplateOutletContext]="{ $implicit: row, selected: isSelected(row) }"
             ></ng-container>
           </button>
         }
         @if (!table.dataSource.data.length) {
-          <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
         }
       }
     </div>
@@ -44,26 +50,52 @@
          wires page events — a binding here would double-fetch every change. -->
     <mat-paginator
       class="mt-normal"
+      [class.fx-md-paginator-hidden]="paginationStyle() === 'prevnext'"
       [length]="table.total"
       [pageSize]="table.pageSize"
-      [pageSizeOptions]="pageSizeOptions"
+      [pageSizeOptions]="pageSizeOptions()"
     ></mat-paginator>
+    @if (paginationStyle() === 'prevnext') {
+      <div class="flex items-center justify-between mt-normal">
+        <span class="txt-utility-description" style="font-family: var(--og-font-figure)">
+          {{ rangeText() }}
+        </span>
+        <div class="flex gap-small">
+          <button
+            type="button"
+            class="btn-alternative !h-8 !px-semi text-sm"
+            [disabled]="!paginator().hasPreviousPage()"
+            (click)="paginator().previousPage()"
+          >
+            {{ prevLabel() }}
+          </button>
+          <button
+            type="button"
+            class="btn-alternative !h-8 !px-semi text-sm"
+            [disabled]="!paginator().hasNextPage()"
+            (click)="paginator().nextPage()"
+          >
+            {{ nextLabel() }}
+          </button>
+        </div>
+      </div>
+    }
   </div>
 
   <!-- Detail pane -->
   <div class="w-full lg:flex-1 min-w-0">
     @if (table.selected) {
       @if (table.detailBusy) {
-        <fx-ui-skeleton-detail [cards]="skeletonCards"></fx-ui-skeleton-detail>
+        <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
       } @else {
         <ng-container
-          [ngTemplateOutlet]="detailTemplate"
+          [ngTemplateOutlet]="detailTemplate()"
           [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
         ></ng-container>
       }
     } @else {
       <div class="card-common flex items-center justify-center h-[300px]">
-        <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+        <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
       </div>
     }
   </div>

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

@@ -0,0 +1,27 @@
+<button
+  type="button"
+  class="inline-flex items-center justify-center rounded-lg p-1 hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+  [matMenuTriggerFor]="menu"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+>
+  <ng-content></ng-content>
+</button>
+
+<mat-menu #menu="matMenu">
+  @for (item of items(); track item.label) {
+    <button
+      mat-menu-item
+      type="button"
+      [disabled]="item.disabled"
+      (click)="select.emit(item)"
+    >
+      <span class="flex items-center gap-normal" [class]="toneClass(item)">
+        @if (item.icon) {
+          <fx-ui-hero-icon [icon]="item.icon" [size]="18"></fx-ui-hero-icon>
+        }
+        <span>{{ item.label }}</span>
+      </span>
+    </button>
+  }
+</mat-menu>

package/src/lib/ui/components/pending-badge/pending-badge.component.html

@@ -0,0 +1,15 @@
+@if (variant() === 'dot') {
+  <span
+    class="inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle"
+    [attr.title]="tooltip"
+    [attr.aria-label]="tooltip"
+  ></span>
+} @else {
+  <span
+    class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap align-middle"
+    [attr.title]="tooltip"
+  >
+    <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
+    {{ label() }}
+  </span>
+}

package/src/lib/ui/components/pipeline-stepper/pipeline-stepper.component.html

@@ -0,0 +1,45 @@
+<ol class="flex items-start overflow-x-auto pb-small" role="list">
+  @for (stage of stages(); track stage.id; let i = $index; let last = $last) {
+    <li class="flex items-start" [class.flex-1]="!last" [attr.aria-current]="stateOf(stage) === 'active' ? 'step' : null">
+      <button
+        type="button"
+        class="flex flex-col items-center gap-xs min-w-20 px-xs"
+        [class.cursor-pointer]="canClick(stage)"
+        [class.cursor-default]="!canClick(stage)"
+        [tabindex]="canClick(stage) ? 0 : -1"
+        (click)="onStageClick(stage, i)"
+      >
+        <span
+          class="w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-colors"
+          [ngClass]="circleClass(stage)"
+        >
+          @switch (stateOf(stage)) {
+            @case ('done') {
+              <fx-ui-hero-icon icon="check" [size]="16" class="flex" />
+            }
+            @case ('error') {
+              <fx-ui-hero-icon icon="exclamation-triangle" [size]="16" class="flex" />
+            }
+            @default {
+              {{ i + 1 }}
+            }
+          }
+        </span>
+        <span class="text-xs text-center whitespace-nowrap" [ngClass]="labelClass(stage)">
+          {{ stage.label }}
+        </span>
+        @if (stage.description) {
+          <span class="txt-utility-description text-center whitespace-nowrap">
+            {{ stage.description }}
+          </span>
+        }
+      </button>
+      @if (!last) {
+        <div class="flex-1 h-[2px] mt-4 mx-xs rounded-pill min-w-6" [ngClass]="connectorClass(stage)"></div>
+      }
+    </li>
+  }
+</ol>
+<div class="mt-large">
+  <ng-content></ng-content>
+</div>