@foxeltech/angular-ui 0.7.124 → 0.7.131

package/package.json

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

package/src/lib/styles/components.css

@@ -361,11 +361,12 @@ input[type='password'] {
     inset 0 0 0 1px rgb(0 0 0 / 0.08),
     0 1px 2px rgb(0 0 0 / 0.12);
 }
-/* Icon-only button (no label): square h-8 × w-8, no side padding, so the
-   glyph sits dead-centre (anh Tú 04/09). Consumers may still size it with
-   utilities (`w-9 h-9`) — those win in the utilities layer. */
+/* Icon-only button (no label): square, no side padding, so the glyph sits
+   dead-centre (anh Tú 04/09). The width tracks `btn-common`'s height — 27px
+   since 17/09 — so it stays square; consumers may still size it with
+   utilities (`w-9 h-9`), which win in the utilities layer. */
 .fx-btn--icon {
-  width: 2rem;
+  width: 27px;
   padding-left: 0;
   padding-right: 0;
 }

package/src/lib/styles/utilities.css

@@ -8,10 +8,15 @@
 }
 
 @utility btn-common {
-  /* Compact size (anh Tú 29/08): h-8 + 13px label — the pre-V2 h-10 read too
-     large against the V2 density. leading-none: arbitrary text-[13px] inherits
-     lh 1.5 and Archivo's uneven leading floats the ink ~1px above center. */
-  @apply flex text-[13px] leading-none h-8 font-semibold px-large py-small items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+  /* The demo's `.og-button--sm` (anh Tú 17/09: compact như New Analysis) —
+     27px tall, 11.5px at weight 400, 12px sides, 7px radius. MEASURED off the
+     reference's own `.og-button--sm.bi-newbtn`, which is the topbar CTA: it
+     wore this shape through `!` overrides because the shared button was a size
+     above it. The h-8 / 13px / 600 this replaces was itself a step down from
+     pre-V2 h-10 (29/08); against V2 panel density it still read one notch
+     heavy. leading-none: an arbitrary font-size inherits lh 1.5 and Archivo's
+     uneven leading floats the ink ~1px above centre. */
+  @apply flex text-[length:var(--og-fs-xs)] leading-none h-[27px] font-normal px-[12px] py-[4px] items-center justify-center rounded-control shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
 }
 
 @utility btn-menu-common {

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

@@ -14,229 +14,41 @@
   [disabled]="disabled() || loading()"
   (click)="onClick()"
 >
-  @if (loading()) {
-    <div class="flex w-full items-center justify-center" aria-hidden="true">
-      <svg
-        [attr.fill]="
-          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
-        "
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="4" cy="12" r="0">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_lo66"
-            begin="spinner_Aguh.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_z0Or"
-            begin="spinner_lo66.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="4" cy="12" r="3">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_JsnR"
-            begin="spinner_UHR2.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_Aguh"
-            begin="spinner_JsnR.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="12" cy="12" r="3">
-          <animate
-            begin="0;spinner_z0Or.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_hSjk"
-            begin="spinner_OLMs.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_UHR2"
-            begin="spinner_hSjk.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-        </circle>
-        <circle cx="20" cy="12" r="3">
-          <animate
-            id="spinner_4v5M"
-            begin="0;spinner_z0Or.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="3;0"
-            fill="freeze"
-          />
-          <animate
-            id="spinner_OLMs"
-            begin="spinner_4v5M.end"
-            attributeName="cx"
-            dur="0.001s"
-            values="20;4"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_OLMs.end"
-            attributeName="r"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="0;3"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_UHR2.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="4;12"
-            fill="freeze"
-          />
-          <animate
-            begin="spinner_Aguh.end"
-            attributeName="cx"
-            calcMode="spline"
-            dur="0.5s"
-            keySplines=".36,.6,.31,1"
-            values="12;20"
-            fill="freeze"
-          />
-        </circle>
-      </svg>
-    </div>
-  } @else {
-    <ng-container>
-      <div class="flex items-center justify-center gap-small">
-        @if (icon) {
-          <fx-ui-hero-icon
-            [icon]="icon"
-            [size]="16"
-            class="flex"
-            [ngClass]="{
-              'text-text-inverse': buttonVariant() === 'default',
-              'text-text-primary': buttonVariant() === 'alternative',
-              'text-accent-contrast': buttonVariant() === 'primary',
-              'text-surface': buttonVariant() === 'success',
-              'text-white': buttonVariant() === 'cta',
-            }"
-          ></fx-ui-hero-icon>
-        }
-        @if (label) {
-          <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
-          <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
-        }
-      </div>
-    </ng-container>
-  }
+  <!-- Loading keeps the LABEL, as the sign-in button does: a button that
+       swaps its text for a spinner collapses to a stub, and the row jumps.
+       The ring is that button's `.li-spin`, in the foreground the variant
+       already uses for its icon so it reads on a coloured ground. -->
+  <!-- 6px, the reference button's own gap; `gap-small` is 4px. -->
+  <div class="flex items-center justify-center gap-[6px]">
+    @if (loading()) {
+      <span
+        class="fx-btn__spin"
+        aria-hidden="true"
+        [ngClass]="{
+          'text-text-inverse': buttonVariant() === 'default',
+          'text-text-primary': buttonVariant() === 'alternative',
+          'text-accent-contrast': buttonVariant() === 'primary',
+          'text-surface': buttonVariant() === 'success',
+          'text-white': buttonVariant() === 'cta',
+        }"
+      ></span>
+    } @else if (icon) {
+      <fx-ui-hero-icon
+        [icon]="icon"
+        [size]="13"
+        class="flex"
+        [ngClass]="{
+          'text-text-inverse': buttonVariant() === 'default',
+          'text-text-primary': buttonVariant() === 'alternative',
+          'text-accent-contrast': buttonVariant() === 'primary',
+          'text-surface': buttonVariant() === 'success',
+          'text-white': buttonVariant() === 'cta',
+        }"
+      ></fx-ui-hero-icon>
+    }
+    @if (label) {
+      <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
+      <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
+    }
+  </div>
 </button>

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

@@ -0,0 +1,30 @@
+
+
+/* Loading ring — the sign-in button's `.li-spin`, sized to sit beside a label.
+   `currentColor` so the variant's own foreground class colours it. */
+.fx-btn__spin {
+  display: inline-block;
+  /* 12px, matching the button's 13px icon — 14 crowded the 27px box. */
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  opacity: 0.9;
+  animation: fx-btn-spin 0.8s linear infinite;
+}
+
+@keyframes fx-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* A ring that has stopped still marks the button as busy, and `aria-busy`
+   carries the state regardless. */
+@media (prefers-reduced-motion: reduce) {
+  .fx-btn__spin {
+    animation: none;
+  }
+}

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

@@ -73,9 +73,21 @@
     min-height: 420px;
   }
 
-  /* Panes CO GIÃN: facets/list nhường chỗ để cụm detail luôn có sàn 400px.
-     `--fx-md-list-width` (input `listWidth`) giờ là bề rộng MONG MUỐN kiêm
-     tối đa của cụm list, không còn là con số cứng. */
+  /* Track widths are the DESIGN'S own: every three-column screen in the demo
+     bundle is `204px minmax(0,1fr) 340px` — measured on Results, License and
+     Relationships, 17/09. So the rail and the DETAIL are the fixed tracks and
+     the LIST takes what is left.
+
+     It used to be the other way round: the list was capped at 420px and the
+     detail was `flex: 1 1 360px`, so every pixel of a wide window went to the
+     reading pane — ~930px of it at 1920, against a list that never grew past
+     420 (anh Tú 17/09: kéo rộng cột list ra và thu nhỏ cột detail lại).
+
+     All three still SHRINK below their track (`flex-basis` + a floor, not a
+     hard width): with the rail open the three floors add up past the 720px
+     where this query starts, and a pane that refuses to give way would push
+     the frame into a horizontal scrollbar instead. Collapsed, the rail is
+     40px and 40 + 260 + 300 fits. */
   /* Hairline to the RIGHT of rail and list instead of below. */
   .fx-md-facets,
   .fx-md-list {
@@ -91,10 +103,10 @@
     max-width: 40px;
   }
   .fx-md-facets--open {
-    flex: 0 1 230px;
+    flex: 0 1 204px;
     width: auto;
-    min-width: 200px;
-    max-width: 260px;
+    min-width: 180px;
+    max-width: 204px;
   }
   .fx-md-rail-toggle {
     height: 100%;
@@ -109,14 +121,30 @@
 
   .fx-md-list {
     width: auto;
-    flex: 0 1 var(--fx-md-list-width, 420px);
+    flex: 1 1 0;
     min-width: 260px;
-    max-width: var(--fx-md-list-width, 420px);
+    /* Uncapped unless a caller asks for one — see the `listWidth` input. */
+    max-width: var(--fx-md-list-width, none);
   }
 
   .fx-md-detail {
+    width: auto;
+    flex: 0 1 var(--fx-md-detail-width, 340px);
+    min-width: 300px;
+    max-width: var(--fx-md-detail-width, 340px);
+  }
+
+  /* `detailWidth="auto"`: the pre-0.7.130 split, kept for the panes that need
+     the room (Binaries, Remediation — anh Tú 17/09). The detail takes the
+     spare width and the LIST goes back to being the capped one. */
+  .fx-md-row--detail-fluid .fx-md-list {
+    flex: 0 1 var(--fx-md-list-width, 420px);
+    max-width: var(--fx-md-list-width, 420px);
+  }
+  .fx-md-row--detail-fluid .fx-md-detail {
     flex: 1 1 360px;
     min-width: 360px;
+    max-width: none;
   }
 }
 

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

@@ -6,6 +6,8 @@
   class="fx-md-row flex flex-col items-stretch"
   [class.fx-md-row--rail-open]="railOpen()"
   [style.--fx-md-list-width]="listWidth()"
+  [class.fx-md-row--detail-fluid]="detailFluid()"
+  [style.--fx-md-detail-width]="detailFluid() ? null : detailWidth()"
   [style.--fx-md-pane-h]="paneHeight()"
 >
   <!-- Facets rail — collapsible (» / «), collapsed = 40px strip with the label
@@ -108,7 +110,7 @@
         <div class="flex gap-small">
           <button
             type="button"
-            class="btn-alternative !h-8 !px-semi text-sm"
+            class="btn-alternative"
             [disabled]="!paginator().hasPreviousPage()"
             (click)="paginator().previousPage()"
           >
@@ -116,7 +118,7 @@
           </button>
           <button
             type="button"
-            class="btn-alternative !h-8 !px-semi text-sm"
+            class="btn-alternative"
             [disabled]="!paginator().hasNextPage()"
             (click)="paginator().nextPage()"
           >

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

@@ -51,14 +51,36 @@ declare class FlowCanvasComponent {
     readonly height: _angular_core.InputSignal<string>;
     /** Caller-translated hint shown when the graph is empty. */
     readonly emptyText: _angular_core.InputSignal<string>;
+    /**
+     * Work is running against this chain — validation, typically.
+     *
+     * The edges become a travelling dashed line ("marching ants") so the canvas
+     * says something is in flight without a spinner sitting on top of the graph.
+     * Purely presentational: the caller owns what "busy" means and when it ends.
+     */
+    readonly busy: _angular_core.InputSignal<boolean>;
     readonly nodeClick: _angular_core.OutputEmitterRef<string>;
     private readonly flow;
     private readonly host;
     private readonly destroyRef;
     constructor();
     private fitHandle;
-    /** Coalesces fit requests into one frame after vflow has measured its nodes. */
+    /**
+     * Coalesces fit requests, then fits TWICE — one frame apart.
+     *
+     * vflow frames the graph from `getNodesBounds`, which sums each node's
+     * `point()` and its `size()`. For an html-template node that size is the
+     * MEASURED box and is still 0 on the frame the nodes are created, so the
+     * first fit sees a bounds box running origin-to-origin: five 176px cards
+     * measured 864px instead of 1040px, and the graph was framed 88px — half a
+     * card — too far right, clipping the last one (MEASURED 16/09).
+     *
+     * The second pass runs once the cards have been laid out and measured, and
+     * is what actually frames them. The first is kept so a slow frame still
+     * shows something sensible rather than the graph pinned top-left.
+     */
     private scheduleFit;
+    private fit;
     /** Column index per node: pinned value, else longest path from a source. */
     private readonly columns;
     /** ngx-vflow nodes: html-template cards positioned by the derived layout. */
@@ -86,7 +108,7 @@ declare class FlowCanvasComponent {
     isEdgeActive(edge: Edge): boolean;
     isEdgeDimmed(edge: Edge): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlowCanvasComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowCanvasComponent, "fx-ui-flow-canvas", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowCanvasComponent, "fx-ui-flow-canvas", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; }, never, never, true, never>;
 }
 
 declare class FlowConnection {

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

@@ -2097,8 +2097,27 @@ declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
     /** True when the host projected a [mdFacets] block — switches to 3 columns. */
     hasFacets: boolean;
     table: BaseMasterDetailComponent<any>;
-    /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
-    readonly listWidth: _angular_core.InputSignal<string>;
+    /**
+     * Optional CAP on the list pane.
+     *
+     * The list is the flexible track now (the design's `204px 1fr 340px`), so it
+     * takes whatever the rail and the detail leave. Set this only for a screen
+     * whose rows genuinely stop reading better past some width; left unset the
+     * property is not emitted at all and the pane simply fills.
+     */
+    readonly listWidth: _angular_core.InputSignal<string | null>;
+    /**
+     * The detail pane's fixed track — the design's own 340px, and 450px on the
+     * screens anh Tú widened (17/09).
+     *
+     * Pass `'auto'` (or null) to give the detail the SPARE width instead and cap
+     * the list at `listWidth` — the pre-0.7.130 behaviour, which Binaries and
+     * Remediation keep because their panes carry header blocks, metric grids and
+     * step lists that a narrow track cannot hold.
+     */
+    readonly detailWidth: _angular_core.InputSignal<string | null>;
+    /** true = detail takes the spare width; false = it is a fixed track. */
+    protected detailFluid(): boolean;
     /**
      * Chiều cao CHUNG của cả ba cụm (facets / list / detail). Mặc định trừ phần
      * chrome phía trên (topbar + tab strip + context line) khỏi viewport để
@@ -2144,7 +2163,7 @@ declare class MasterDetailComponent implements AfterViewInit, AfterContentInit {
     optionId(index: number): string;
     onKeydown(event: KeyboardEvent, index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MasterDetailComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "paneHeight": { "alias": "paneHeight"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; "isSignal": true; }; "paginationStyle": { "alias": "paginationStyle"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "pageLabel": { "alias": "pageLabel"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "facetsOpen": { "alias": "facetsOpen"; "required": false; "isSignal": true; }; "facetsLabel": { "alias": "facetsLabel"; "required": false; "isSignal": true; }; "expandFacetsLabel": { "alias": "expandFacetsLabel"; "required": false; "isSignal": true; }; "collapseFacetsLabel": { "alias": "collapseFacetsLabel"; "required": false; "isSignal": true; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdFacets]", "[mdHeader]", "[mdFilters]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; "isSignal": true; }; "detailWidth": { "alias": "detailWidth"; "required": false; "isSignal": true; }; "paneHeight": { "alias": "paneHeight"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "listLabel": { "alias": "listLabel"; "required": false; "isSignal": true; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; "isSignal": true; }; "paginationStyle": { "alias": "paginationStyle"; "required": false; "isSignal": true; }; "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "pageLabel": { "alias": "pageLabel"; "required": false; "isSignal": true; }; "ofLabel": { "alias": "ofLabel"; "required": false; "isSignal": true; }; "facetsOpen": { "alias": "facetsOpen"; "required": false; "isSignal": true; }; "facetsLabel": { "alias": "facetsLabel"; "required": false; "isSignal": true; }; "expandFacetsLabel": { "alias": "expandFacetsLabel"; "required": false; "isSignal": true; }; "collapseFacetsLabel": { "alias": "collapseFacetsLabel"; "required": false; "isSignal": true; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdFacets]", "[mdHeader]", "[mdFilters]"], true, never>;
 }
 
 interface FxMenuItem {

package/utilities.css

@@ -8,10 +8,15 @@
 }
 
 @utility btn-common {
-  /* Compact size (anh Tú 29/08): h-8 + 13px label — the pre-V2 h-10 read too
-     large against the V2 density. leading-none: arbitrary text-[13px] inherits
-     lh 1.5 and Archivo's uneven leading floats the ink ~1px above center. */
-  @apply flex text-[13px] leading-none h-8 font-semibold px-large py-small items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+  /* The demo's `.og-button--sm` (anh Tú 17/09: compact như New Analysis) —
+     27px tall, 11.5px at weight 400, 12px sides, 7px radius. MEASURED off the
+     reference's own `.og-button--sm.bi-newbtn`, which is the topbar CTA: it
+     wore this shape through `!` overrides because the shared button was a size
+     above it. The h-8 / 13px / 600 this replaces was itself a step down from
+     pre-V2 h-10 (29/08); against V2 panel density it still read one notch
+     heavy. leading-none: an arbitrary font-size inherits lh 1.5 and Archivo's
+     uneven leading floats the ink ~1px above centre. */
+  @apply flex text-[length:var(--og-fs-xs)] leading-none h-[27px] font-normal px-[12px] py-[4px] items-center justify-center rounded-control shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
 }
 
 @utility btn-menu-common {