@africanies/angular-web-sdk 0.1.8 → 0.1.10

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

@@ -13,10 +13,15 @@ import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 /**
  * Semantic tone for {@link ChipComponent}.
  *
+ * Prefer these for common statuses. For one-off accents, pass {@link ChipComponent.color}
+ * instead — any CSS color with a faded background.
+ *
  * - `neutral` — generic label / count
  * - `success` — positive outcome (same green family as export)
  * - `warning` — caution / pending
  * - `danger` — error / exception
+ * - `info` — informational (theme blue)
+ * - `violet` / `teal` / `rose` / `cyan` — extra categorical tones
  * - `export` — SFN / outbound accent
  * - `import` — STN / inbound accent
  */
@@ -25,6 +30,11 @@ export type ChipVariant =
   | 'success'
   | 'warning'
   | 'danger'
+  | 'info'
+  | 'violet'
+  | 'teal'
+  | 'rose'
+  | 'cyan'
   | 'export'
   | 'import';
 
@@ -37,12 +47,14 @@ export type ChipSize = 'sm' | 'md';
  * Compact status / category label.
  *
  * Soft fills stay readable in dark mode (translucent accent tints, not
- * light-only subtle backgrounds).
+ * light-only subtle backgrounds). Pass {@link color} for a custom accent —
+ * text uses that color and the background is a faded mix of the same.
  *
  * @example
  * ```html
  * <africanies-chip variant="success">Delivered</africanies-chip>
- * <africanies-chip variant="import" icon="truck">In transit</africanies-chip>
+ * <africanies-chip variant="violet">Priority</africanies-chip>
+ * <africanies-chip color="#0f766e">Pay Later</africanies-chip>
  * <africanies-chip variant="warning" [removable]="true" (removed)="clear()">Pending</africanies-chip>
  * ```
  */
@@ -53,8 +65,38 @@ export type ChipSize = 'sm' | 'md';
   imports: [AfricaniesIconComponent],
   host: {
     '[class]': 'hostClass()',
+    '[style.--africanies-chip-accent]': 'customAccent()',
     role: 'status',
   },
+  styles: `
+    :host.africanies-chip--custom {
+      color: var(--africanies-chip-accent);
+      background-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 14%,
+        transparent
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 28%,
+        transparent
+      );
+    }
+    :host-context(.dark):host.africanies-chip--custom {
+      /* Lighten the accent so labels stay readable on dark surfaces. */
+      color: color-mix(in srgb, var(--africanies-chip-accent) 68%, white);
+      background-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 22%,
+        transparent
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 40%,
+        transparent
+      );
+    }
+  `,
   template: `
     @if (icon(); as iconName) {
       <africanies-icon [name]="iconName" [size]="iconSize()" class="shrink-0" />
@@ -73,9 +115,15 @@ export type ChipSize = 'sm' | 'md';
   `,
 })
 export class ChipComponent {
-  /** Semantic tone. Defaults to `neutral`. */
+  /** Semantic tone. Defaults to `neutral`. Ignored when {@link color} is set. */
   readonly variant = input<ChipVariant>('neutral');
 
+  /**
+   * Optional CSS color (`#7c3aed`, `rgb(…)`, `oklch(…)`, …). When set, overrides
+   * {@link variant}: label uses the color and the fill is a faded mix of it.
+   */
+  readonly color = input<string | null>(null);
+
   /** Padding / type scale. Defaults to `sm` (table / dense UI). */
   readonly size = input<ChipSize>('sm');
 
@@ -96,6 +144,12 @@ export class ChipComponent {
 
   protected readonly iconSize = computed(() => (this.size() === 'md' ? 14 : 12));
 
+  /** Trimmed custom accent, or `null` when using a named {@link variant}. */
+  protected readonly customAccent = computed(() => {
+    const value = this.color()?.trim() ?? '';
+    return value.length > 0 ? value : null;
+  });
+
   protected readonly hostClass = computed(() => {
     const base =
       'inline-flex max-w-full items-center gap-1 rounded-md font-sans font-medium ' +
@@ -110,11 +164,15 @@ export class ChipComponent {
   });
 
   /**
-   * Soft background + text per variant. Dark mode uses translucent accents so
-   * chips never wash out as near-white blobs.
-   * @returns Tailwind class string for the active variant.
+   * Soft background + text per variant, or the custom-color host class.
+   * Dark mode uses translucent accents so chips never wash out as near-white
+   * blobs.
+   * @returns Tailwind / host class string for the active tone.
    */
   private toneClass(): string {
+    if (this.customAccent()) {
+      return 'africanies-chip--custom';
+    }
     switch (this.variant()) {
       case 'success':
       case 'export':
@@ -125,6 +183,16 @@ export class ChipComponent {
         return 'bg-warning-subtle text-warning-dark dark:bg-warning/15 dark:text-warning';
       case 'danger':
         return 'bg-danger-subtle text-danger-dark dark:bg-danger/15 dark:text-danger';
+      case 'info':
+        return 'bg-info-subtle text-info dark:bg-info/20 dark:text-[#93c5fd]';
+      case 'violet':
+        return 'bg-violet-100 text-violet-800 dark:bg-violet-400/15 dark:text-violet-300';
+      case 'teal':
+        return 'bg-teal-100 text-teal-800 dark:bg-teal-400/15 dark:text-teal-300';
+      case 'rose':
+        return 'bg-rose-100 text-rose-800 dark:bg-rose-400/15 dark:text-rose-300';
+      case 'cyan':
+        return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-400/15 dark:text-cyan-300';
       default:
         return 'bg-border/60 text-ink dark:bg-white/10 dark:text-neutral-200';
     }

package/libs/africanies-ui/src/lib/layout/app-shell-header.component.ts

@@ -17,7 +17,7 @@ import type { Observable } from 'rxjs';
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 
 import type { AfricaniesMenuItem } from '../action-menu/menu-item';
-import { AvatarMenuComponent } from '../avatar';
+import { AvatarComponent, AvatarMenuComponent } from '../avatar';
 import type { AfricaniesNotification, NotificationPageResult } from '../notifications';
 import { NotificationDrawerService } from '../notifications';
 import type { HeaderWeather } from './header-greeting.util';
@@ -70,7 +70,12 @@ export class AppShellHeaderEndDirective {}
   selector: 'africanies-app-shell-header',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AfricaniesIconComponent, AvatarMenuComponent, DatePipe],
+  imports: [
+    AfricaniesIconComponent,
+    AvatarComponent,
+    AvatarMenuComponent,
+    DatePipe,
+  ],
   template: `
     <div
       class="flex min-w-0 items-center gap-2 px-3 py-2.5 sm:gap-4 sm:px-6 sm:py-3"
@@ -113,13 +118,15 @@ export class AppShellHeaderEndDirective {}
                   <span
                     class="text-body-sm font-medium tabular-nums tracking-tight text-ink dark:text-white"
                   >
-                    {{ temp }}°
+                    {{ temp }}°C
                   </span>
                 }
                 <span
                   class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                 >
-                  {{ weatherPlace() }}
+                  {{ weatherCondition() }}@if (weatherCity(); as city) {
+                    · {{ city }}
+                  }
                 </span>
               </div>
             }
@@ -178,12 +185,20 @@ export class AppShellHeaderEndDirective {}
             }
 
             @if (userName()) {
-              <africanies-avatar-menu
-                [name]="userName()!"
-                [src]="userAvatarSrc()"
-                [menuItems]="userMenuItems()"
-                [size]="'md'"
-              />
+              @if (userMenuItems().length > 0) {
+                <africanies-avatar-menu
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  [menuItems]="userMenuItems()"
+                  [size]="'md'"
+                />
+              } @else {
+                <africanies-avatar
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  size="md"
+                />
+              }
             }
           </div>
         }
@@ -274,15 +289,20 @@ export class AppShellHeaderComponent {
     if (temp === undefined || !Number.isFinite(temp)) {
       return null;
     }
-    return temp.toFixed(1);
+    return String(Math.round(temp));
   });
 
-  protected readonly weatherPlace = computed(() => {
+  protected readonly weatherCondition = computed(() => {
     const forecast = this.weather();
     if (!forecast) {
       return '';
     }
-    return forecast.city?.trim() || headerWeatherLabel(forecast.kind);
+    return headerWeatherLabel(forecast.kind, this.now().getHours());
+  });
+
+  protected readonly weatherCity = computed(() => {
+    const city = this.weather()?.city?.trim();
+    return city || null;
   });
 
   protected readonly weatherAriaLabel = computed(() => {
@@ -290,10 +310,13 @@ export class AppShellHeaderComponent {
     if (!forecast) {
       return 'Weather';
     }
-    const condition = headerWeatherLabel(forecast.kind).toLowerCase();
+    const condition = this.weatherCondition().toLowerCase();
     const temp = this.weatherTemp();
-    const city = forecast.city?.trim();
-    const degrees = temp === null ? condition : `${temp} degrees, ${condition}`;
+    const city = this.weatherCity();
+    const degrees =
+      temp === null
+        ? condition
+        : `${temp} degrees Celsius, ${condition}`;
     return city ? `Weather in ${city}: ${degrees}` : `Weather: ${degrees}`;
   });
 

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

@@ -33,7 +33,7 @@ export interface HeaderWeather {
   kind: HeaderWeatherKind;
   /** Celsius, when the forecast includes it. */
   temperatureC?: number;
-  /** City from IP geolocation, when known. */
+  /** City from reverse-geocode / IP geolocation, when known. */
   city?: string;
 }
 

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

@@ -185,7 +185,11 @@ describe('loadHeaderWeather', () => {
         return jsonResponse({ city: 'Abuja' });
       }
       if (String(url).includes('geojs')) {
-        throw new Error('should not call IP geo');
+        return jsonResponse({
+          latitude: 6.5,
+          longitude: 3.4,
+          city: 'Lagos',
+        });
       }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
     });
@@ -197,16 +201,94 @@ describe('loadHeaderWeather', () => {
       temperatureC: 31,
       city: 'Abuja',
     });
-    expect(
-      fetchFn.mock.calls.some((call) => String(call[0]).includes('geojs')),
-    ).toBe(false);
+  });
+
+  it('uses the IP city when browser geo succeeds but reverse geocode is empty', async () => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (success: PositionCallback) => {
+          success({
+            coords: {
+              latitude: 9.0765,
+              longitude: 7.3986,
+              accuracy: 10,
+              altitude: null,
+              altitudeAccuracy: null,
+              heading: null,
+              speed: null,
+              toJSON: () => ({}),
+            },
+            timestamp: Date.now(),
+            toJSON: () => ({}),
+          } as GeolocationPosition);
+        },
+      },
+    });
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: '' });
+      }
+      if (String(url).includes('geojs')) {
+        return jsonResponse({
+          latitude: 6.5,
+          longitude: 3.4,
+          city: 'Lagos',
+        });
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 31,
+      city: 'Lagos',
+    });
+  });
+
+  it('refetches when the hour cache has weather but no city', async () => {
+    sessionStorage.setItem(
+      'africanies-header-weather-v7',
+      JSON.stringify({
+        hour: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}-${new Date().getHours()}`,
+        kind: 'cloudy',
+        temperatureC: 25,
+      }),
+    );
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('geojs')) {
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Lagos' });
+      }
+      return jsonResponse({ current: { weather_code: 3, temperature_2m: 25 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'cloudy',
+      temperatureC: 25,
+      city: 'Lagos',
+    });
+    expect(fetchFn).toHaveBeenCalled();
   });
 });
 
 describe('headerWeatherLabel', () => {
   it('returns a short condition', () => {
     expect(headerWeatherLabel('rain')).toBe('Rain');
-    expect(headerWeatherLabel('clear')).toBe('Clear');
+    expect(headerWeatherLabel('cloudy')).toBe('Cloudy');
+  });
+
+  it('uses Sunny by day and Clear at night', () => {
+    expect(headerWeatherLabel('clear', 10)).toBe('Sunny');
+    expect(headerWeatherLabel('clear', 22)).toBe('Clear');
   });
 });
 

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

@@ -3,10 +3,10 @@ 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';
+const CACHE_KEY = 'africanies-header-weather-v7';
 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 — city string is used only when reverse-geocode is empty. */
 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 =
@@ -88,9 +88,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];
 }
 
@@ -116,8 +123,7 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
  *
  * 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).
+ * geocoded from those coordinates, with the IP city as a fallback.
  *
  * 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
@@ -191,10 +197,16 @@ function readCache(hour: string): HeaderWeather | null {
     if (parsed.hour !== hour || !parsed.kind) {
       return null;
     }
+    // City-less entries (e.g. browser geo + failed reverse) used to stick for
+    // the hour — treat them as a miss so we can recover the location label.
+    const city = asCity(parsed.city);
+    if (!city) {
+      return null;
+    }
     return {
       kind: parsed.kind,
       temperatureC: parsed.temperatureC,
-      city: parsed.city,
+      city,
     };
   } catch {
     return null;
@@ -211,30 +223,38 @@ 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 geo. IP is always fetched in parallel so its city can backfill
+ * the label when reverse-geocode is empty (browser geo has no city string).
  */
 async function resolveCoordinates(
   fetchFn: typeof fetch,
 ): Promise<(Coordinates & { fallbackCity?: string }) | null> {
-  const browser = await tryBrowserGeolocation();
+  const [browser, ipGeo] = await Promise.all([
+    tryBrowserGeolocation(),
+    fetchIpGeo(fetchFn),
+  ]);
+  const ipCity = asCity(ipGeo?.city);
+
   if (browser) {
-    return browser;
+    return { ...browser, fallbackCity: ipCity };
   }
 
-  const geo = (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
-  const latitude = asNumber(geo?.latitude);
-  const longitude = asNumber(geo?.longitude);
+  const latitude = asNumber(ipGeo?.latitude);
+  const longitude = asNumber(ipGeo?.longitude);
   if (latitude === null || longitude === null) {
     return null;
   }
   return {
     latitude,
     longitude,
-    fallbackCity: asCity(geo?.city),
+    fallbackCity: ipCity,
   };
 }
 
+async function fetchIpGeo(fetchFn: typeof fetch): Promise<GeoJsPayload | null> {
+  return (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
+}
+
 async function tryBrowserGeolocation(): Promise<Coordinates | null> {
   if (
     typeof navigator === 'undefined' ||

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

@@ -38,6 +38,10 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
 /**
  * Compact segmented control for view modes and filters.
  *
+ * Selected option uses a **solid brand pill** (white label) on a neutral track —
+ * same pattern as the portal shipping-mode toggle. With exactly two options the
+ * pill slides; with more options each selected chip fills in place.
+ *
  * ## Router mode (URL is source of truth)
  *
  * Set `routerLink` (and optional `queryParams`) on items. The selected pill
@@ -65,20 +69,38 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AfricaniesIconComponent],
+  styles: `
+    :host .africanies-segment-thumb {
+      width: calc((100% - 0.5rem) / 2);
+    }
+  `,
   template: `
     <div
-      class="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-background-welcome p-1 dark:bg-ink-950"
+      class="relative inline-grid max-w-full rounded-lg bg-[#f0f2f5] p-1 dark:bg-[#2a2c31]"
       role="group"
       [attr.aria-label]="ariaLabel()"
+      [class.grid-cols-2]="useSlidingThumb()"
+      [class.inline-flex]="!useSlidingThumb()"
+      [class.flex-wrap]="!useSlidingThumb()"
+      [class.gap-1]="!useSlidingThumb()"
     >
+      @if (useSlidingThumb()) {
+        <div
+          class="africanies-segment-thumb pointer-events-none absolute top-1 bottom-1 left-1 rounded-md shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none"
+          [class]="thumbFillClass()"
+          [style.transform]="
+            activeIndex() === 1
+              ? 'translateX(calc(100% + 0.25rem))'
+              : 'translateX(0)'
+          "
+          aria-hidden="true"
+        ></div>
+      }
+
       @for (item of items(); track item.id) {
         @if (item.routerLink !== null && item.routerLink !== undefined) {
           <a
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
             [class.opacity-50]="item.disabled"
@@ -95,11 +117,7 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
         } @else {
           <button
             type="button"
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [disabled]="!!item.disabled"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
@@ -154,21 +172,18 @@ export class SegmentComponent {
     { initialValue: this.router.url },
   );
 
-  protected readonly segmentChrome = computed(
-    () =>
-      'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-body-sm transition-colors duration-150 no-underline',
+  /** Two equal options → portal-style sliding brand pill. */
+  protected readonly useSlidingThumb = computed(
+    () => this.items().length === 2,
   );
 
-  protected readonly selectedClass = computed(() => {
-    const colors = this.modeColor.classes();
-    return `${colors.soft} ${colors.text} shadow-sm font-semibold`;
+  /** Index of the active option (0 / 1 for the sliding thumb). */
+  protected readonly activeIndex = computed(() => {
+    const list = this.items();
+    const idx = list.findIndex((item) => this.isItemActive(item));
+    return idx < 0 ? 0 : idx;
   });
 
-  protected readonly idleClass = computed(
-    () =>
-      'font-medium text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white',
-  );
-
   constructor() {
     effect(() => {
       this.url();
@@ -198,6 +213,67 @@ export class SegmentComponent {
     return this.activeId() === item.id;
   }
 
+  /**
+   * Sliding thumb fill. STN / SFN options keep their own brand color so the
+   * pill matches mode identity; other pairs follow the active theme primary.
+   */
+  protected thumbFillClass(): string {
+    const active = this.items()[this.activeIndex()];
+    return this.brandFillFor(active?.id ?? null);
+  }
+
+  /**
+   * Option chrome: sliding mode keeps labels transparent over the thumb;
+   * multi-option mode paints a solid selected chip in place.
+   *
+   * @param item - Option being rendered.
+   * @returns Class string for the control.
+   */
+  protected optionChrome(item: AfricaniesNavItem): string {
+    const base =
+      'relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-center text-body-sm no-underline transition-colors duration-150';
+    const active = this.isItemActive(item);
+
+    if (this.useSlidingThumb()) {
+      return (
+        base +
+        ' w-full ' +
+        (active
+          ? 'font-semibold text-white'
+          : 'font-medium text-ink hover:text-ink dark:text-neutral-300 dark:hover:text-white')
+      );
+    }
+
+    if (active) {
+      return `${base} font-semibold text-white shadow-sm ${this.brandFillFor(item.id)}`;
+    }
+
+    return (
+      base +
+      ' font-medium text-ink hover:bg-white/70 hover:text-ink dark:text-neutral-300 dark:hover:bg-white/10 dark:hover:text-white'
+    );
+  }
+
+  /**
+   * Solid brand fill for a selected option / sliding thumb.
+   *
+   * Light + dark use the same SFN green / STN orange primaries so the control
+   * stays mode-identifiable on both surfaces (portal primary, not soft tint).
+   * Class strings are full literals so Tailwind keeps them.
+   *
+   * @param id - Option id (`stn` / `sfn` get fixed brands; else theme primary).
+   * @returns Background utility classes.
+   */
+  protected brandFillFor(id: string | null): string {
+    if (id === 'stn') {
+      return 'bg-import dark:bg-import';
+    }
+    if (id === 'sfn') {
+      return 'bg-export dark:bg-export';
+    }
+    return this.modeColor.classes().activeFill;
+  }
+
   protected selectLocal(item: AfricaniesNavItem): void {
     if (item.disabled || item.routerLink != null) {
       return;