@africanies/angular-web-sdk 0.1.7 → 0.1.9

package/libs/africanies-ui/src/lib/layout/header-weather.ts

@@ -2,15 +2,12 @@ import type { IconName } from '@africanies/africanies-icons';
 
 import type { HeaderWeather, HeaderWeatherKind } from './header-greeting.util';
 
-/** Bump when cache shape or city resolution strategy changes. */
-const CACHE_KEY = 'africanies-header-weather-v4';
+/** Bump when cache shape or lookup strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v5';
 const FETCH_MS = 4_000;
 const BROWSER_GEO_MS = 3_500;
-/** IP fallback — city string is often wrong (e.g. NG IPs labelled Lagos). */
+/** IP fallback for coordinates only — city strings are often wrong. */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
-/** Client reverse-geocode so the label matches the forecast coordinates. */
-const REVERSE_GEO_URL =
-  'https://api.bigdatacloud.net/data/reverse-geocode-client';
 
 const WEATHER_LABELS: Record<HeaderWeatherKind, string> = {
   clear: 'Clear',
@@ -26,21 +23,13 @@ interface CachedWeather {
   hour: string;
   kind: HeaderWeatherKind;
   temperatureC?: number;
-  city?: string;
 }
 
 interface GeoJsPayload {
-  city?: string;
   latitude?: string | number;
   longitude?: string | number;
 }
 
-interface ReverseGeoPayload {
-  city?: string;
-  locality?: string;
-  principalSubdivision?: string;
-}
-
 interface OpenMeteoPayload {
   current?: {
     weather_code?: number;
@@ -88,9 +77,16 @@ export function mapWmoWeatherCode(code: number): HeaderWeatherKind | null {
  * Short condition label for the header weather chip.
  *
  * @param kind - Coarse forecast kind.
- * @returns Display label such as `Rain` or `Clear`.
+ * @param hour - Local hour; clear days show as Sunny, nights as Clear.
+ * @returns Display label such as `Rain` or `Sunny`.
  */
-export function headerWeatherLabel(kind: HeaderWeatherKind): string {
+export function headerWeatherLabel(
+  kind: HeaderWeatherKind,
+  hour = new Date().getHours(),
+): string {
+  if (kind === 'clear') {
+    return hour >= 19 || hour < 6 ? 'Clear' : 'Sunny';
+  }
   return WEATHER_LABELS[kind];
 }
 
@@ -112,12 +108,12 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
 }
 
 /**
- * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
+ * Local forecast via browser / IP coordinates + Open-Meteo (no API key).
  *
- * Coordinates prefer the browser Geolocation API (accurate for travellers;
- * may prompt once). Otherwise IP geo is used. The city label is reverse-
- * geocoded from those coordinates — IP `city` strings are often wrong for
- * Nigeria (many networks resolve as Lagos).
+ * Coordinates prefer the browser Geolocation API (may prompt once).
+ * Otherwise IP geo is used for lat/lon only — city labels are not shown
+ * because IP and reverse-geocode cities are often wrong (e.g. NG IPs
+ * labelled Lagos).
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -162,11 +158,8 @@ export async function loadHeaderWeather(
     }
 
     const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-    const city =
-      (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
-      coords.fallbackCity;
-    const weather: HeaderWeather = { kind, temperatureC, city };
-    writeCache({ hour, kind, temperatureC, city });
+    const weather: HeaderWeather = { kind, temperatureC };
+    writeCache({ hour, kind, temperatureC });
     return weather;
   } catch {
     return null;
@@ -194,7 +187,6 @@ function readCache(hour: string): HeaderWeather | null {
     return {
       kind: parsed.kind,
       temperatureC: parsed.temperatureC,
-      city: parsed.city,
     };
   } catch {
     return null;
@@ -211,12 +203,11 @@ function writeCache(value: CachedWeather): void {
 
 /**
  * Prefer device coordinates when available (may prompt once); otherwise fall
- * back to IP geo. IP city labels for Nigeria are often wrong — reverse
- * geocoding from these coordinates still depends on accurate lat/lon.
+ * back to IP lat/lon for the forecast only.
  */
 async function resolveCoordinates(
   fetchFn: typeof fetch,
-): Promise<(Coordinates & { fallbackCity?: string }) | null> {
+): Promise<Coordinates | null> {
   const browser = await tryBrowserGeolocation();
   if (browser) {
     return browser;
@@ -228,11 +219,7 @@ async function resolveCoordinates(
   if (latitude === null || longitude === null) {
     return null;
   }
-  return {
-    latitude,
-    longitude,
-    fallbackCity: asCity(geo?.city),
-  };
+  return { latitude, longitude };
 }
 
 async function tryBrowserGeolocation(): Promise<Coordinates | null> {
@@ -266,23 +253,6 @@ async function tryBrowserGeolocation(): Promise<Coordinates | null> {
   });
 }
 
-async function reverseGeocodeCity(
-  fetchFn: typeof fetch,
-  latitude: number,
-  longitude: number,
-): Promise<string | undefined> {
-  const url =
-    `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
-    `&longitude=${encodeURIComponent(String(longitude))}` +
-    `&localityLanguage=en`;
-  const payload = (await fetchJson(fetchFn, url)) as ReverseGeoPayload | null;
-  return (
-    asCity(payload?.city) ??
-    asCity(payload?.locality) ??
-    asCity(payload?.principalSubdivision)
-  );
-}
-
 function asNumber(value: unknown): number | null {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;
@@ -294,17 +264,6 @@ function asNumber(value: unknown): number | null {
   return null;
 }
 
-function asCity(value: unknown): string | undefined {
-  if (typeof value !== 'string') {
-    return undefined;
-  }
-  const trimmed = value.trim();
-  if (!trimmed || trimmed.toLowerCase() === 'n/a') {
-    return undefined;
-  }
-  return trimmed;
-}
-
 async function fetchJson(
   fetchFn: typeof fetch,
   url: string,

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -131,8 +131,8 @@ export class ShippingModeSwitchComponent {
   /** Host padding / divider — tighter when the rail is collapsed. */
   protected readonly hostClass = computed(() =>
     this.collapsed()
-      ? 'block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10'
-      : 'block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10',
+      ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
+      : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10',
   );
 
   /**
@@ -159,18 +159,18 @@ export class ShippingModeSwitchComponent {
     const compact = this.collapsed();
     const base =
       'flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border text-center text-caption font-medium transition-colors ' +
-      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
       (compact ? 'min-h-9 px-1 py-1.5' : 'min-h-[4.5rem] px-1.5 py-2');
     const idle =
-      'border-border bg-white text-ink hover:bg-background-welcome dark:border-white/15 dark:bg-ink-950 dark:text-white dark:hover:bg-white/10';
+      'border-control bg-surface text-ink hover:bg-background-hover dark:border-white/15 dark:bg-ink-950 dark:text-white dark:hover:bg-white/10';
 
     if (option === 'stn') {
       return selected
-        ? `${base} border-import bg-import text-white`
+        ? `${base} border-import-strong bg-import-strong text-white dark:border-import dark:bg-import`
         : `${base} ${idle}`;
     }
     return selected
-      ? `${base} border-export bg-export text-white`
+      ? `${base} border-export-strong bg-export-strong text-white dark:border-export dark:bg-export`
       : `${base} ${idle}`;
   }
 }

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.html

@@ -1,5 +1,5 @@
     <aside
-      class="relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950"
+      class="relative flex h-full min-h-0 flex-col overflow-visible border-r border-border bg-surface transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950"
       [style.width]="collapsed() ? '3.75rem' : '15rem'"
       [attr.aria-label]="ariaLabel()"
     >
@@ -10,7 +10,7 @@
       ></div>
 
       <div
-        class="flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10"
+        class="sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b border-border bg-surface py-3 dark:border-white/10 dark:bg-ink-950"
         [class.flex-col]="collapsed()"
         [class.px-3]="collapsed()"
         [class.pl-4]="!collapsed()"
@@ -43,7 +43,8 @@
         }
         <button
           type="button"
-          class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          data-onboarding="nav-collapse"
           [attr.aria-label]="
             collapsed() ? 'Expand navigation' : 'Collapse navigation'
           "
@@ -57,21 +58,28 @@
         </button>
       </div>
 
-      <nav class="africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3">
+      <nav
+        class="africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3"
+      >
         @if (!collapsed() && expandParents() && hasOpenBranches()) {
-          <button
-            type="button"
-            class="absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white"
-            aria-label="Collapse all"
-            (click)="collapseAllBranches()"
-          >
-            <africanies-icon name="compress" [size]="14" />
-          </button>
+          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->
+          <div class="sticky top-0 z-10 h-0 overflow-visible">
+            <button
+              type="button"
+              class="absolute right-0 top-0 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white"
+              data-onboarding="nav-branches-collapse"
+              aria-label="Collapse all"
+              (click)="collapseAllBranches()"
+            >
+              <africanies-icon name="compress" [size]="14" />
+            </button>
+          </div>
         }
         <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
           @for (item of items(); track item.id) {
             <li
-              class="relative overflow-visible"
+              class="relative overflow-visible last:mb-0"
+              [class.mb-3]="!collapsed() && !item.children?.length"
               (mouseenter)="onItemEnter(item.id)"
               (mouseleave)="onItemLeave(item.id)"
             >

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.ts

@@ -46,7 +46,8 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
  * ## Parent items with children
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
  * Clicking a parent only opens/closes the branch (no route change). When any
- * branch is open, a collapse-all control sits above the list (top right).
+ * branch is open, a sticky collapse-all control sits above the list (top right).
+ * The rail expand/collapse control stays pinned in the logo header.
  * **Collapsed rail:** clicking a parent expands the rail, opens the
  * branch, and activates the first enabled child (router or `activeId`).
  *
@@ -73,7 +74,7 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AfricaniesIconComponent, RouterLink, NgTemplateOutlet],
   host: {
-    class: 'relative z-20 block h-full',
+    class: 'relative z-20 block h-full min-h-0',
   },
   styleUrl: './africanies-side-nav.component.css',
   templateUrl: './africanies-side-nav.component.html',
@@ -197,10 +198,15 @@ export class SideNavComponent {
   }
 
   /** Fold every parent branch on the expanded rail. */
-  protected collapseAllBranches(): void {
+  collapseAllBranches(): void {
     this.openBranches.set(new Set());
   }
 
+  /** Open every parent branch (e.g. so the collapse-all control is visible). */
+  expandAllBranches(): void {
+    this.openBranches.set(new Set(this.collectParentIds(this.items())));
+  }
+
   protected onItemEnter(id: string): void {
     if (this.collapsed()) {
       this.hoverId.set(id);
@@ -239,7 +245,7 @@ export class SideNavComponent {
   protected rowClass(item: AfricaniesSideNavItem): string {
     const base =
       'group relative flex w-full items-center gap-2 rounded-lg text-body-sm no-underline transition-colors ' +
-      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
       (this.collapsed() ? 'justify-center px-1.5 py-2' : 'px-3 py-2') +
       (item.disabled ? ' cursor-not-allowed opacity-50' : ' cursor-pointer');
 
@@ -256,7 +262,7 @@ export class SideNavComponent {
       return `${base} bg-transparent ${colors.text} font-semibold`;
     }
     return (
-      `${base} font-medium text-neutral-600 hover:bg-background-welcome hover:text-ink ` +
+      `${base} font-medium text-neutral-600 hover:bg-background-hover hover:text-ink ` +
       'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white'
     );
   }
@@ -264,14 +270,14 @@ export class SideNavComponent {
   protected childRowClass(item: AfricaniesSideNavItem): string {
     const base =
       'relative flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-body-sm no-underline transition-colors ' +
-      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
       (item.disabled ? 'cursor-not-allowed opacity-50 ' : 'cursor-pointer ');
 
     if (this.isLeafActive(item)) {
       return `${base} ${this.modeColor.classes().activeFill} font-semibold`;
     }
     return (
-      `${base} font-medium text-neutral-600 hover:bg-background-welcome hover:text-ink ` +
+      `${base} font-medium text-neutral-600 hover:bg-background-hover hover:text-ink ` +
       'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white'
     );
   }

package/libs/africanies-ui/src/lib/notifications/notification-drawer.panel.ts

@@ -66,7 +66,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
             {{ title() }}
           </h2>
           @if (hasUnread()) {
-            <p class="m-0 text-caption text-neutral-500 dark:text-neutral-400">
+            <p class="m-0 text-caption text-neutral-600 dark:text-neutral-400">
               {{ unreadCount() }} unread
             </p>
           }
@@ -112,7 +112,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
             <africanies-icon
               name="spinner"
               [size]="24"
-              class="animate-spin text-neutral-500 dark:text-neutral-400"
+              class="animate-spin text-neutral-600 dark:text-neutral-400"
             />
             <p class="m-0 text-body-sm text-neutral-600 dark:text-neutral-400">
               Loading notifications…
@@ -179,7 +179,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
                       </h3>
                       @if (item.timestamp) {
                         <time
-                          class="shrink-0 whitespace-nowrap text-[11px] tabular-nums text-neutral-500 dark:text-neutral-400"
+                          class="shrink-0 whitespace-nowrap text-[11px] tabular-nums text-neutral-600 dark:text-neutral-400"
                           [dateTime]="item.timestamp"
                         >
                           {{ formatTimestamp(item.timestamp) }}
@@ -258,7 +258,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
             >
               @if (loadingMore()) {
                 <span
-                  class="inline-flex items-center gap-2 text-caption text-neutral-500 dark:text-neutral-400"
+                  class="inline-flex items-center gap-2 text-caption text-neutral-600 dark:text-neutral-400"
                   aria-live="polite"
                 >
                   <africanies-icon name="spinner" [size]="14" class="animate-spin" />
@@ -290,9 +290,9 @@ export class NotificationDrawerPanel {
     const base =
       'inline-flex cursor-pointer items-center gap-1 self-start text-caption font-semibold underline underline-offset-[3px] transition-colors';
     if (this.shipping.mode() === 'stn') {
-      return `${base} text-import decoration-import/35 hover:decoration-import dark:text-import-light dark:decoration-import-light/40 dark:hover:decoration-import-light`;
+      return `${base} text-import-strong decoration-import-strong/35 hover:decoration-import-strong dark:text-import-light dark:decoration-import-light/40 dark:hover:decoration-import-light`;
     }
-    return `${base} text-export decoration-export/35 hover:decoration-export dark:text-export-light dark:decoration-export-light/40 dark:hover:decoration-export-light`;
+    return `${base} text-export-strong decoration-export-strong/35 hover:decoration-export-strong dark:text-export-light dark:decoration-export-light/40 dark:hover:decoration-export-light`;
   });
 
   protected readonly title = computed(() => this.data.title ?? 'Notifications');

package/libs/africanies-ui/src/lib/overlay/confirm-dialog.component.ts

@@ -161,8 +161,8 @@ export class ConfirmDialogComponent {
     const well =
       'inline-flex size-14 shrink-0 items-center justify-center rounded-2xl';
     return this.options.danger
-      ? `${well} bg-danger-subtle text-danger dark:bg-danger/20 dark:text-danger`
-      : `${well} bg-export-subtle text-export dark:bg-export/20 dark:text-export-light`;
+      ? `${well} bg-danger-subtle text-danger-dark dark:bg-danger/20 dark:text-danger`
+      : `${well} bg-export-subtle text-export-strong dark:bg-export/20 dark:text-export-light`;
   });
 
   constructor() {

package/libs/africanies-ui/src/lib/overlay/drawer.service.ts

@@ -63,11 +63,11 @@ export class DrawerService implements OverlayOpener {
         ],
         panelClass: [
           'africanies-drawer-panel',
-          'bg-white',
+          'bg-surface',
           'dark:bg-ink-950',
           'text-ink',
           'dark:text-white',
-          'shadow-xl',
+          'shadow-floating',
           'border-l',
           'border-border',
           'dark:border-white/15',

package/libs/africanies-ui/src/lib/overlay/modal.service.ts

@@ -151,12 +151,12 @@ export class ModalService implements OverlayOpener {
         ],
         panelClass: [
           'africanies-modal-panel',
-          'bg-white',
+          'bg-surface',
           'dark:bg-ink-950',
           'text-ink',
           'dark:text-white',
-          'rounded-lg',
-          'shadow-xl',
+          'rounded-panel',
+          'shadow-floating',
           'border',
           'border-border',
           'dark:border-white/15',

package/libs/africanies-ui/src/lib/overlay/overlay-frame.component.ts

@@ -83,7 +83,7 @@ export class OverlayFooterDirective {}
       <ng-content select="[africaniesOverlayHeader]" />
     </div>
     <div
-      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-[2px] -mx-[2px]"
+      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-1 -mx-1"
     >
       <ng-content />
     </div>

package/libs/africanies-ui/src/lib/pagination/pagination.component.ts

@@ -144,7 +144,7 @@ type PageItem = number | 'ellipsis';
         @for (item of pageItems(); track trackPageItem(item, $index)) {
           @if (item === 'ellipsis') {
             <span
-              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-500 dark:text-neutral-400"
+              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-600 dark:text-neutral-400"
               aria-hidden="true"
             >
               …

package/libs/africanies-ui/src/lib/stepper/stepper.component.ts

@@ -53,9 +53,9 @@ function prefersReducedMotion(): boolean {
     .africanies-step-body {
       min-width: 0;
       overflow-x: clip;
-      /* 2 px breathing room so focus-outline rings on edge fields are not clipped */
-      padding-inline: 2px;
-      margin-inline: -2px;
+      /* 4 px breathing room so any remaining external focus rings are not clipped */
+      padding-inline: 4px;
+      margin-inline: -4px;
     }
     .africanies-step-pane {
       min-width: 0;
@@ -66,7 +66,7 @@ function prefersReducedMotion(): boolean {
     <div class="flex flex-col gap-5 text-ink dark:text-white">
       <div class="flex flex-col gap-2">
         <p
-          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400"
+          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
           Step {{ activeIndex() + 1 }} of {{ steps().length }}
           <span
@@ -95,7 +95,7 @@ function prefersReducedMotion(): boolean {
             <li class="flex min-w-0 shrink-0 items-center gap-1">
               <button
                 type="button"
-                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed"
+                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink disabled:cursor-not-allowed"
                 [class]="headerButtonClass(i)"
                 [attr.aria-current]="i === activeIndex() ? 'step' : null"
                 [disabled]="!canActivate(i)"
@@ -223,7 +223,7 @@ export class StepperComponent {
     if (past) {
       return 'cursor-pointer text-ink hover:bg-background-welcome dark:text-white dark:hover:bg-white/10';
     }
-    return 'opacity-40 text-neutral-500 dark:text-neutral-400';
+    return 'opacity-40 text-neutral-600 dark:text-neutral-400';
   }
 
   protected stepBadgeClass(index: number): string {
@@ -233,7 +233,7 @@ export class StepperComponent {
       const c = this.modeColor.classes();
       return `${base} ${c.border} ${c.bg} text-white`;
     }
-    return `${base} border-border bg-white text-neutral-500 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
+    return `${base} border-control bg-surface text-neutral-600 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
   }
 
   protected canActivate(index: number): boolean {

package/libs/africanies-ui/src/lib/table/table-column.ts

@@ -34,6 +34,15 @@ export interface TableColumn<T = unknown> {
    */
   width?: string;
 
+  /**
+   * Optional CSS max-width (e.g. `'14rem'`).
+   *
+   * Caps growth for text-heavy columns without forcing a large minimum the
+   * way {@link width} can. Prefer this for Name / Description / Message when
+   * other columns should stay compact.
+   */
+  maxWidth?: string;
+
   /**
    * Pin the column while the table scrolls horizontally.
    *

package/libs/africanies-ui/src/lib/table/table.component.spec.ts

@@ -0,0 +1,99 @@
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShippingModeService } from '@africanies/africanies-core';
+import type { ShippingMode } from '@africanies/africanies-models';
+
+import { TableComponent } from './table.component';
+import type { TableColumn } from './table-column';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [TableComponent],
+  template: `
+    <africanies-table
+      [columns]="columns"
+      [rows]="rows()"
+      [loading]="loading()"
+      [error]="error()"
+      loadingLabel="Loading page…"
+    />
+  `,
+})
+class TableHostComponent {
+  readonly columns: TableColumn<Row>[] = [{ key: 'name', header: 'Name' }];
+  readonly rows = signal<Row[]>([]);
+  readonly loading = signal(false);
+  readonly error = signal<string | null>(null);
+}
+
+describe('TableComponent keep-rows loading', () => {
+  let fixture: ComponentFixture<TableHostComponent>;
+  let host: TableHostComponent;
+
+  beforeEach(async () => {
+    const mode = signal<ShippingMode>('sfn');
+    await TestBed.configureTestingModule({
+      imports: [TableHostComponent],
+      providers: [
+        {
+          provide: ShippingModeService,
+          useValue: {
+            mode: mode.asReadonly(),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TableHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('shows a keep-rows overlay when loading with rows on screen', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).not.toBeNull();
+    expect(root.textContent).toContain('Ada');
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('uses the in-grid body loader on first load with no rows', () => {
+    host.rows.set([]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).toBeNull();
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('shows a full-width stale error when rows remain after a failed fetch', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.error.set('Could not load page.');
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const indicator = root.querySelector('africanies-error-indicator');
+    expect(indicator).not.toBeNull();
+    expect(indicator?.className).toContain('w-full');
+    expect(root.textContent).toContain('Could not load page.');
+    expect(root.textContent).toContain('Ada');
+  });
+});