@foxeltech/angular-ui 0.7.131 → 0.7.133

package/package.json

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

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

@@ -105,12 +105,12 @@
           @if (item.iconData) {
             <lucide-icon
               [img]="item.iconData"
-              [size]="isExpanded ? 13 : 18"
+              [size]="isExpanded ? 15 : 20"
               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>
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 15 : 20" class="item-icon"></fx-ui-hero-icon>
           }
           @if (isExpanded) {
             <span class="item-label">{{ item.label }}</span>
@@ -136,12 +136,12 @@
           @if (item.iconData) {
             <lucide-icon
               [img]="item.iconData"
-              [size]="isExpanded ? 13 : 18"
+              [size]="isExpanded ? 15 : 20"
               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>
+            <fx-ui-hero-icon [icon]="item.icon" [size]="isExpanded ? 15 : 20" 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

@@ -184,7 +184,9 @@
 .drawer-section-label {
   /* Demo (.og-sidebar__section sau override): 10.5px, text-faint, giãn chữ
      .08em và KHÔNG viết hoa — override đặt `text-transform: none`. */
-  @apply px-large pt-4 pb-1 text-[10.5px]/[1.4] font-semibold text-faint select-none;
+  /* 11.5px since 17/09, up from the demo's 10.5 — it moves with the rows it
+     captions, or the caption reads as a different scale from the nav. */
+  @apply px-large pt-4 pb-1 text-[length:var(--og-fs-xs)]/[1.4] font-semibold text-faint select-none;
   letter-spacing: var(--og-tracking-label);
 }
 
@@ -204,9 +206,13 @@
      8px in, not 16. */
   @apply flex items-center w-full border-none bg-transparent cursor-pointer no-underline relative;
   margin-top: 1px;
-  min-height: 30px;
-  padding: 6px 8px;
-  font-size: var(--og-fs-sm);
+  /* +12% on the reference's 12.5px/30px row (anh Tú 17/09: bump the font size
+     of the sidebar a bit like 10-20%). The row has to grow with the text or
+     the 20px leading exceeds `min-height` and the declared height stops being
+     the shipped one — the mistake the 0.7.107 note below records. */
+  min-height: 34px;
+  padding: 7px 8px;
+  font-size: 14px;
   color: rgb(var(--og-text-body));
   border-radius: var(--og-radius-control);
   transition: background-color 130ms ease, color 130ms ease;
@@ -268,8 +274,8 @@
    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;
+  width: 20px;
+  height: 20px;
   margin-right: 0;
 }
 
@@ -297,21 +303,22 @@
 .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;
+  /* The reference's mark is a 12.5px glyph in an 18px slot — icon 13px plus
+     5px to restore the slot, i.e. 13 + 5 + the container's 9px gap = 27px from
+     the icon's left edge to the label. Scaled with the 14px label (17/09):
+     15px + 6px keeps the same proportion at 30px. Sizing the icon itself 18px
+     drew it half again too large. */
+  width: 15px;
+  height: 15px;
+  margin-right: 6px;
 }
 
 .item-label {
-  /* 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;
+  /* Size comes from .drawer-item (14px since 17/09) — no second scale here.
+     Leading tracks it: 20px, and the row's 7px padding either side makes 34,
+     which is what `min-height` now declares. Raising one without the other is
+     how the row's stated height stopped matching the shipped one before. */
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-[20px] text-left;
   font-size: inherit;
 }
 
@@ -329,7 +336,7 @@
 }
 
 .drawer-version {
-  @apply flex items-center justify-center py-3 px-4 text-text-placeholder text-[11px] border-t border-border-default select-none;
+  @apply flex items-center justify-center py-3 px-4 text-text-placeholder text-[12px] border-t border-border-default select-none;
   font-family: var(--og-font-mono);
 }
 

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

@@ -58,6 +58,24 @@
   margin-top: 6px;
 }
 
+/* The figure follows the BOX, not just the grid (anh Tú 18/09: show all the
+   stats numbers much smaller on the mobile screen). The 32px reference figure
+   is sized for a quarter of a desktop page; on a phone the strip is already
+   2-up, so each cell is ~175px and a six-digit count like 52,311 filled it
+   edge to edge. Same two thresholds the columns use, so the type steps down
+   with the layout rather than at some other width. */
+@container (width < 720px) {
+  .fx-stat-cell__figure {
+    font-size: 22px;
+    margin-top: 4px;
+  }
+}
+@container (width < 360px) {
+  .fx-stat-cell__figure {
+    font-size: 20px;
+  }
+}
+
 .fx-stat-cell__sub {
   font-size: var(--og-fs-xs);
   font-weight: 400;