@foxeltech/angular-ui 0.7.75 → 0.7.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.7.75",
+  "version": "0.7.83",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/src/lib/styles/components.css

@@ -339,14 +339,27 @@ input[type='password'] {
   @apply font-mono text-sm text-text-primary tracking-normal;
 }
 
+/* ---- Nút: viền hairline + bóng mờ ở MỌI biến thể (anh Tú 04/09) --------
+   Demo `.og-button`: border `--og-rule`, hover `0 2px 7px rgba(0,0,0,.12)`;
+   `.bi-newbtn`: viền tối hơn nền 1 bậc + `0 1px 2px rgba(0,0,0,.15)`. Nút nền
+   đặc dùng viền inset tối 8% để không phải khai màu viền riêng cho gradient. */
 .btn-default {
   @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 .btn-success {
   @apply btn-common bg-gradient-success hover:opacity-75 text-surface;
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.12);
 }
 /* Nút hành động chính theo demo (`.bi-newbtn`): màu cố định, không phải accent. */
 /* ---- Tông severity theo ĐÚNG mô hình demo (đo 03/09) -----------------
@@ -604,13 +617,24 @@ input[type='password'] {
 }
 
 .btn-cta {
-  @apply btn-common bg-cta hover:bg-cta-hover text-white;
+  @apply btn-common bg-cta hover:bg-cta-hover text-white border border-cta-hover;
   box-shadow:
     inset 0 1px 0 rgb(255 255 255 / 0.18),
     0 1px 2px rgb(0 0 0 / 0.15);
 }
+.btn-cta:hover {
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 2px 6px rgb(0 0 0 / 0.2);
+}
+/* Outline = `.og-button--outline`: nền surface, viền --og-border, bóng 1px;
+   hover nổi lên 0 2px 7px như demo. */
 .btn-alternative {
-  @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
+  @apply btn-common bg-surface hover:bg-bg-hover text-text-primary border border-border-default;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+}
+.btn-alternative:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
 }
 .btn-menu-top {
   @apply btn-menu-common border-b border-border-default pt-small pb-semi;

package/src/lib/styles/utilities.css

@@ -31,7 +31,12 @@
 }
 
 @utility card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+  @apply text-left px-xl py-large border border-border-default rounded-lg transition-colors duration-500 ease-in-out;
+  /* Demo `.og-panel` / `.og-statgrid`: hairline border + two soft layers.
+     Replaces Tailwind shadow-sm, which reads harder at the edges. */
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
 }
 
 @utility tag-common {

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

@@ -1,12 +1,12 @@
 @if (variant() === 'dot') {
   <span
-    class="inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle"
+    class="inline-block w-[7px] h-[7px] rounded-full bg-muted/60 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"
+    class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted txt-tag-label whitespace-nowrap align-middle"
     [attr.title]="tooltip"
   >
     <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />

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

@@ -1,6 +1,6 @@
 <button
   type="button"
-  class="card-common bg-surface w-full flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all"
+  class="card-common bg-surface w-full flex-1 flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all"
   (click)="open.emit(card())"
 >
   <!-- Header: avatar + name/sub + score chip (design 12) -->
@@ -13,7 +13,10 @@
           >{{ card().avatar }}</span
         >
       }
-      <div class="min-w-0">
+      <!-- min-h 46px = name (24) + mt-xs (2) + sub (20): reserves the two-line
+           header even when a card has no sub line, so trend/metric rows line
+           up across the grid row (measured 04/09). -->
+      <div class="min-w-0 min-h-[46px]">
         <div class="txt-heading-06 truncate text-left">{{ card().name }}</div>
         @if (card().sub; as sub) {
           <div class="flex items-center gap-xs txt-utility-description mt-xs">
@@ -88,8 +91,9 @@
   }
 
   @if (card().meta || card().openLabel) {
+    <!-- mt-auto: footers line up across a grid row whatever each card holds -->
     <div
-      class="flex items-center justify-between w-full pt-normal border-t border-border-default"
+      class="flex items-center justify-between w-full pt-normal mt-auto border-t border-border-default"
     >
       <span class="txt-utility-description text-left">{{ card().meta }}</span>
       @if (card().openLabel) {

package/src/lib/ui/components/sample-frame/sample-frame.component.html

@@ -1,10 +1,9 @@
-<div class="relative rounded-lg border border-dashed border-warning/50 bg-warning/[0.03] p-normal">
-  <!-- flex-wrap + nowrap label: in narrow rails the chip drops to the next line
-       instead of the label breaking mid-word ("SAMPLE / LAYOUT"). -->
-  <div class="flex flex-wrap items-center gap-small mb-normal">
-    <span class="txt-tag-label text-warning uppercase tracking-wide whitespace-nowrap">{{ label() }}</span>
+<div class="relative flex flex-col flex-1 min-h-0">
+  <!-- One quiet chip marks the block as sample data; the tooltip names the
+       missing field. flex-wrap so the chip drops a line in narrow rails. -->
+  <div class="flex flex-wrap items-center gap-small mb-small">
     <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"
+      class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-border-subtle bg-neutral-soft text-muted txt-tag-label whitespace-nowrap"
       [attr.title]="tooltip"
     >
       <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
@@ -12,7 +11,7 @@
     </span>
   </div>
   <!-- Sample content is non-interactive: nothing here reflects real state. -->
-  <div class="pointer-events-none select-none opacity-90">
+  <div class="pointer-events-none select-none opacity-90 flex-1 min-h-0 flex flex-col">
     <ng-content></ng-content>
   </div>
 </div>

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

@@ -1,4 +1,6 @@
-<div class="card-common">
+<!-- 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">
   @if (titleStyle() === 'eyebrow') {
     <div class="flex items-baseline justify-between gap-normal mb-large">
       <span class="txt-eyebrow">{{ title() }}</span>

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

@@ -1,5 +1,6 @@
 <div
-  class="relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  class="relative inline-grid max-w-full grid-flow-col items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  [class]="gridClass()"
   role="group"
   [attr.aria-label]="ariaLabel()"
 >
@@ -15,6 +16,7 @@
   }
   @for (option of options(); track option.value) {
     <button
+      #opt
       type="button"
       (click)="select(option)"
       [disabled]="option.disabled"

package/types/foxeltech-angular-ui.d.ts

@@ -719,7 +719,23 @@ declare function toneBadge(tone: Tone | string | null | undefined): string;
  * nơi cần nhấn mạnh nhất; đừng dùng cho badge có chấm bên trong (chấm sẽ chìm).
  */
 declare function toneBadgeSolid(tone: Tone | string | null | undefined): string;
-/** Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền. */
+/**
+ * Chỉ MÀU của tông, không kèm hình dạng pill — cho ô icon, chip, ô nền.
+ *
+ * ⚠️ Đây là họ SOLID: `tone-tint-critical` đặt `background: --og-text`
+ * (gần đen) VÀ `color: --og-surface` (trắng) trên CÙNG element.
+ *
+ * Hệ quả bắt buộc nhớ:
+ * 1. Chỉ dùng cho **badge một phần tử**. Với hộp nhiều dòng thì con sẽ cần màu
+ *    chữ riêng, và nếu con ghi đè bằng `toneFg()` (đỏ sẫm) thì thành đỏ sẫm
+ *    trên gần đen — không đọc được. Đã bị đúng vậy ở hộp RISK của
+ *    `info-binary-detail` (anh Tú 03/09).
+ * 2. **KHÔNG** đặt `toneFg()` lên phần tử con của một phần tử đã có
+ *    `toneTint()` — nó phá màu tương phản mà `toneTint` vừa đặt.
+ *
+ * Hộp/khối nhiều dòng thì dùng `toneScale()`: nền nhạt (color-mix 12%) + chữ
+ * đúng tông, con chỉ cần THỪA HƯỞNG.
+ */
 declare function toneTint(tone: Tone | string | null | undefined): string;
 /**
  * CHỮ theo tông — dùng thành viên dễ đọc nhất của mỗi họ severity, KHÔNG phải
@@ -1837,6 +1853,10 @@ declare class MeterComponent {
  *  - titleStyle 'heading' (default): icon + heading, the pre-V2 look
  *  - titleStyle 'eyebrow': the V2 design's panel header — small tracked
  *    caption on the left, muted [aside] text on the right
+ *
+ * The host is a flex column (not the custom element's inline default) so that
+ * in a CSS grid row every card stretches to the row height and panels line up
+ * (anh Tú 04/09); a footer projected with `mt-auto` sticks to the bottom.
  */
 declare class SectionCardComponent {
     /** Caller-translated heading. */
@@ -2023,6 +2043,7 @@ declare class ThemePickerComponent {
  *   <fx-ui-pending-badge [field]="'confirmed-chains weekly series'" />
  *
  * Keep the copy factual: it states that data is missing, never fakes a value.
+ * Styling is neutral on purpose (anh Tú 04/09): a hint, not a warning.
  */
 declare class PendingBadgeComponent {
     /** Caller-translated chip text. */
@@ -2044,10 +2065,11 @@ declare class PendingBadgeComponent {
  * reviewed before its endpoint exists (anh Tú 29/08: "muốn có full giao diện
  * trước để review").
  *
- * The frame makes the status unmistakable — dashed outline, a corner label and
- * the pending marker naming the missing field — so sample shapes can never be
- * mistaken for measured values. Drop the wrapper (and the sample input) the
- * moment the API lands.
+ * The marker is deliberately quiet (anh Tú 04/09: no yellow frame, just a
+ * subtle "Pending API" chip): a neutral chip above the block, with the label
+ * and missing field in its tooltip. The content itself is non-interactive so
+ * sample shapes are never mistaken for live state. Drop the wrapper (and the
+ * sample input) the moment the API lands.
  *
  * The pending chip is inlined rather than composed from fx-ui-pending-badge:
  * one lib component importing another inside the same barrel tripped NG0919
@@ -2058,7 +2080,7 @@ declare class PendingBadgeComponent {
  *   </fx-ui-sample-frame>
  */
 declare class SampleFrameComponent {
-    /** Caller-translated corner label. */
+    /** Caller-translated block label — surfaces in the chip tooltip only. */
     readonly label: _angular_core.InputSignal<string>;
     /** Field the backend still owes — shown on the pending badge tooltip. */
     readonly field: _angular_core.InputSignal<string>;
@@ -2156,17 +2178,29 @@ declare class SegmentedComponent {
      * (design refs 04/05).
      */
     readonly variant: _angular_core.InputSignal<"default" | "pill">;
+    /**
+     * 'equal' (default): every segment takes the same width (view toggles such
+     * as Catalog | Table). 'content': each segment is as wide as its label —
+     * the demo's detail-pane tabs ("Affected software · Summary · Evidence"),
+     * where equal columns would truncate the long label in a narrow pane.
+     */
+    readonly fit: _angular_core.InputSignal<"equal" | "content">;
+    private readonly optionEls;
+    /** Measured box of the active segment — only used when fit === 'content'. */
+    private readonly thumbBox;
+    constructor();
     /** Index the sliding thumb sits on; -1 hides it (no/unknown selection). */
     readonly activeIndex: _angular_core.Signal<number>;
     /** Equal-width tracks → the thumb is 1/n of the inner width and slides by
      *  multiples of its own width. Pure CSS transform, nothing to measure. */
     readonly thumbWidth: _angular_core.Signal<string>;
     readonly thumbTransform: _angular_core.Signal<string>;
+    readonly gridClass: _angular_core.Signal<"auto-cols-auto" | "auto-cols-fr">;
     select(option: FxSegmentedOption): void;
     thumbClass(): string;
     optionClass(option: FxSegmentedOption): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SegmentedComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent, "fx-ui-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SegmentedComponent, "fx-ui-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 interface FxListRowBadge {

package/utilities.css

@@ -31,7 +31,12 @@
 }
 
 @utility card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+  @apply text-left px-xl py-large border border-border-default rounded-lg transition-colors duration-500 ease-in-out;
+  /* Demo `.og-panel` / `.og-statgrid`: hairline border + two soft layers.
+     Replaces Tailwind shadow-sm, which reads harder at the edges. */
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
 }
 
 @utility tag-common {