@africanies/angular-web-sdk 0.1.7 → 0.1.9

package/libs/africanies-ui/src/lib/content-stack/content-stack.component.ts

@@ -35,7 +35,7 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
         </p>
       }
       @if (extraLine()) {
-        <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">
           {{ extraLine() }}
         </p>
       }

package/libs/africanies-ui/src/lib/feedback/error-indicator.component.ts

@@ -132,10 +132,10 @@ import { ButtonComponent } from '../button/button.component';
           aria-hidden="true"
         >
           <span
-            class="africanies-error-indicator-dot-ping absolute inset-0 rounded-full bg-red-400 opacity-75"
+            class="africanies-error-indicator-dot-ping absolute inset-0 rounded-full bg-danger-dark opacity-75"
           ></span>
           <span
-            class="africanies-error-indicator-dot-core relative size-3 rounded-full bg-red-500"
+            class="africanies-error-indicator-dot-core relative size-3 rounded-full bg-danger-dark"
           ></span>
         </span>
 
@@ -150,7 +150,7 @@ import { ButtonComponent } from '../button/button.component';
           type="button"
           variant="ghost"
           size="sm"
-          class="africanies-error-indicator-retry shrink-0 !min-h-0 !border-transparent !bg-transparent !px-1.5 !py-0.5 !text-danger hover:!bg-danger/10 dark:hover:!bg-danger/20"
+          class="africanies-error-indicator-retry shrink-0 !min-h-0 !border-transparent !bg-transparent !px-1.5 !py-0.5 !text-danger-dark hover:!bg-danger/10 dark:hover:!bg-danger/20"
           [class.opacity-50]="disabled()"
           [disabled]="disabled()"
           (click)="onRetry()"

package/libs/africanies-ui/src/lib/feedback/error-state.component.ts

@@ -35,8 +35,8 @@ import { ButtonComponent } from '../button/button.component';
       class="flex flex-col items-center justify-center gap-3 py-10 px-4 text-center text-ink dark:text-white"
       role="alert"
     >
-      <africanies-icon name="warning" [size]="32" class="text-danger" />
-      <p class="m-0 text-body text-danger max-w-md">{{ message() }}</p>
+      <africanies-icon name="warning" [size]="32" class="text-danger-dark dark:text-danger" />
+      <p class="m-0 text-body text-danger-dark max-w-md dark:text-danger">{{ message() }}</p>
       <button
         africanies-button
         type="button"

package/libs/africanies-ui/src/lib/filters/filter-drawer.panel.ts

@@ -26,10 +26,6 @@ import {
 
 import { ButtonComponent } from '../button/button.component';
 import { DatePickerComponent } from '../forms/date-picker/date-picker.component';
-import {
-  RadioComponent,
-  type RadioOption,
-} from '../forms/radio/radio.component';
 import { SelectComponent } from '../forms/select/select.component';
 import type { SelectOption } from '../forms/select/select.types';
 import { TextInputComponent } from '../forms/text-input/text-input.component';
@@ -62,7 +58,6 @@ import { FilterQueryService } from './filter-query.service';
     AfricaniesIconComponent,
     ButtonComponent,
     DatePickerComponent,
-    RadioComponent,
     SelectComponent,
     TextInputComponent,
   ],
@@ -220,12 +215,37 @@ import { FilterQueryService } from './filter-query.service';
                   </div>
                 }
                 @case ('boolean') {
-                  <africanies-radio
-                    label=""
-                    [options]="toRadioOptions(field.options)"
-                    [value]="draft().values[field.key] ?? null"
-                    (valueChange)="onRadioChange(field.key, $event)"
-                  />
+                  <div class="flex flex-wrap gap-2">
+                    @for (opt of booleanOptions(field); track opt.value) {
+                      <button
+                        type="button"
+                        class="cursor-pointer rounded-md border px-2.5 py-1.5 text-body-sm transition-colors"
+                        [style.color]="
+                          draft().values[field.key] === opt.value
+                            ? opt.color ?? null
+                            : null
+                        "
+                        [style.border-color]="
+                          draft().values[field.key] === opt.value
+                            ? opt.color ?? null
+                            : null
+                        "
+                        [style.background-color]="
+                          draft().values[field.key] === opt.value && opt.color
+                            ? opt.color + '1A'
+                            : null
+                        "
+                        [class]="
+                          draft().values[field.key] === opt.value
+                            ? 'font-medium'
+                            : 'border-neutral-300 text-neutral-600 hover:border-neutral-400 dark:border-white/15 dark:text-neutral-300'
+                        "
+                        (click)="setFieldValue(field.key, opt.value)"
+                      >
+                        {{ opt.label }}
+                      </button>
+                    }
+                  </div>
                 }
                 @case ('select') {
                   <!-- Label already shown in the section header — avoid double label. -->
@@ -284,7 +304,7 @@ import { FilterQueryService } from './filter-query.service';
               type="button"
               variant="ghost"
               size="sm"
-              class="shrink-0 !min-h-0 self-start !px-1 !py-0 text-neutral-500 hover:text-ink dark:text-neutral-400 dark:hover:text-white"
+              class="shrink-0 !min-h-0 self-start !px-1 !py-0 text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white"
               aria-label="Dismiss"
               (click)="applyError.set(null)"
             >
@@ -507,14 +527,6 @@ export class FilterDrawerPanel {
     this.draft.update((s) => ({ ...s, order: opt?.value }));
   }
 
-  protected onRadioChange(key: string, value: string | null): void {
-    if (value == null) {
-      this.clearField(key);
-      return;
-    }
-    this.setFieldValue(key, value);
-  }
-
   protected onSelectChange(
     key: string,
     selected: SelectOption<string> | SelectOption<string>[] | null,
@@ -678,13 +690,18 @@ export class FilterDrawerPanel {
     );
   }
 
-  protected toRadioOptions(
-    options: FilterOptionModel[] | undefined,
-  ): RadioOption<string>[] {
-    return (options ?? []).map((o) => ({
-      label: o.label,
-      value: o.value,
-    }));
+  /**
+   * Boolean Yes/No chips. Prefer field.options when present; otherwise default
+   * colored Yes/No so every boolean filter stays visually distinct.
+   */
+  protected booleanOptions(field: FilterFieldModel): FilterOptionModel[] {
+    if (field.options?.length) {
+      return field.options;
+    }
+    return [
+      { value: '1', label: 'Yes', color: '#25945c' },
+      { value: '0', label: 'No', color: '#FF001C' },
+    ];
   }
 
   protected onReset(): void {

package/libs/africanies-ui/src/lib/forms/checkbox/checkbox.component.ts

@@ -19,6 +19,7 @@ import { ModeColorService } from '@africanies/africanies-theme';
 
 import {
   FORM_ERROR_CLASS,
+  FORM_FOCUS_VISIBLE_PEER_CLASS,
   FORM_HINT_CLASS,
 } from '../form-field.classes';
 
@@ -132,7 +133,7 @@ export class CheckboxComponent implements ControlValueAccessor {
   protected readonly markClass = computed(() => {
     const base =
       'pointer-events-none flex size-4 items-center justify-center rounded border text-white transition-colors ' +
-      'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ink';
+      FORM_FOCUS_VISIBLE_PEER_CLASS;
     const err = this.error() ? ' !border-danger dark:!border-danger' : '';
     if (this.value()) {
       const c = this.modeColor.classes();

package/libs/africanies-ui/src/lib/forms/file-upload/file-preview.dialog.ts

@@ -83,7 +83,7 @@ type PreviewKind = 'image' | 'unavailable';
           <div
             class="flex flex-col items-center gap-3 rounded-md bg-background-welcome px-6 py-10 text-center ring-1 ring-border dark:bg-white/5 dark:ring-white/15"
           >
-            <africanies-icon name="eye-slash" [size]="32" class="text-neutral-500" />
+            <africanies-icon name="eye-slash" [size]="32" class="text-neutral-600" />
             <p class="m-0 text-body font-medium text-ink dark:text-white">
               Preview not available
             </p>

package/libs/africanies-ui/src/lib/forms/file-upload/file-upload.component.ts

@@ -341,7 +341,7 @@ let nextFileUploadId = 0;
                   <span> · </span>
                   <button
                     type="button"
-                    class="cursor-pointer bg-transparent p-0 text-caption font-medium text-ink underline underline-offset-2 hover:text-neutral-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-white dark:hover:text-neutral-200"
+                    class="cursor-pointer bg-transparent p-0 text-caption font-medium text-ink underline underline-offset-2 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink dark:text-white dark:hover:text-neutral-200"
                     (click)="openPreview(item); $event.stopPropagation()"
                   >
                     View

package/libs/africanies-ui/src/lib/forms/form-field.classes.ts

@@ -6,29 +6,59 @@
  * when consumers scan the published UI bundle.
  */
 
+/**
+ * Inset focus ring — stays inside the control border box.
+ *
+ * Prefer this over `outline` + `outline-offset`. Those paint *outside* the box
+ * and are clipped by `overflow: hidden|clip|auto` ancestors (modals, drawers,
+ * steppers, scroll panes). `box-sizing` does not affect outlines.
+ */
+export const FORM_FOCUS_WITHIN_CLASS =
+  'focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus';
+
+/** Same inset ring for host / button-style focus-visible. */
+export const FORM_FOCUS_VISIBLE_CLASS =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus';
+
+/** Peer-driven inset ring (checkbox / radio control chrome). */
+export const FORM_FOCUS_VISIBLE_PEER_CLASS =
+  'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-focus';
+
+/** Direct focus (OTP cells and similar). */
+export const FORM_FOCUS_CLASS =
+  'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-focus';
+
 /** Label above the control. Hidden when empty so callers can omit a label. */
 export const FORM_LABEL_CLASS =
   'block text-body-sm font-medium text-ink dark:text-white mb-1.5 empty:hidden';
 
-/** Default control shell — `h-10` matches md `africanies-button`. */
+/**
+ * Default control shell — `h-10` matches md `africanies-button`.
+ *
+ * Focus utilities are inlined (not concatenated) so Tailwind content scanning
+ * always sees the full class names in this string literal.
+ */
 export const FORM_FIELD_CLASS =
-  'flex items-center w-full h-10 box-border rounded-md border border-border bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
-  'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ink';
+  'flex items-center w-full h-10 box-border rounded-control border border-control bg-surface dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
+  'focus-within:outline-none focus-within:ring-2 focus-within:ring-inset focus-within:ring-focus';
 
 /**
  * Error border — `!` so it wins over shell `border-border` /
  * `dark:border-white/25` (same specificity; those utilities sort later in the
  * generated CSS and otherwise paint over `border-danger`).
  *
+ * Use `danger` (`#ff001c`) for both border and focus ring so field chrome
+ * matches validation copy (not the darker accessible `danger-dark` text token).
+ *
  * Keep these literals static for Tailwind content scanning in consumer apps.
  */
 export const FORM_FIELD_ERROR_CLASS =
-  '!border-danger dark:!border-danger focus-within:!outline-danger';
+  '!border-danger dark:!border-danger focus-within:!ring-danger focus:!ring-danger';
 
 /** Native input / textarea inside a shell. */
 export const FORM_CONTROL_INNER_CLASS =
   'flex-1 min-w-0 min-h-0 h-full w-full bg-transparent border-0 outline-none text-body text-ink dark:text-white px-3 py-0 ' +
-  'placeholder:text-neutral-400 disabled:cursor-not-allowed';
+  'placeholder:text-neutral-500 disabled:cursor-not-allowed';
 
 /** Prefix / suffix projection gutters. Hidden when nothing is projected. */
 export const FORM_AFFIX_CLASS =
@@ -50,7 +80,7 @@ export const FORM_DATE_INNER_CLASS =
 export const FORM_HINT_CLASS =
   'mt-1.5 text-caption text-neutral-600 dark:text-neutral-400 m-0';
 
-/** Field-level validation message (not ErrorStateComponent). */
+/** Field-level validation message (not ErrorStateComponent). Matches `#ff001c`. */
 export const FORM_ERROR_CLASS = 'mt-1.5 text-caption text-danger m-0';
 
 /** Disabled shell — dimmed with not-allowed cursor over the full field chrome. */

package/libs/africanies-ui/src/lib/forms/otp-input/otp-input.component.ts

@@ -24,6 +24,7 @@ import { ButtonComponent } from '../../button/button.component';
 import {
   FORM_ERROR_CLASS,
   FORM_FIELD_ERROR_CLASS,
+  FORM_FOCUS_CLASS,
   FORM_HINT_CLASS,
   FORM_LABEL_CLASS,
 } from '../form-field.classes';
@@ -165,7 +166,7 @@ export class OtpInputComponent implements ControlValueAccessor, OnDestroy {
     let classes =
       'size-10 shrink-0 rounded-md border border-neutral-300 bg-white text-center text-body font-medium text-ink outline-none transition-colors ' +
       'dark:border-white/25 dark:bg-ink-950 dark:text-white ' +
-      'focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-ink disabled:cursor-not-allowed';
+      `${FORM_FOCUS_CLASS} disabled:cursor-not-allowed`;
     if (this.masked()) {
       classes += ' africanies-otp-cell-masked text-body-lg';
     }

package/libs/africanies-ui/src/lib/forms/radio/radio.component.ts

@@ -18,6 +18,7 @@ import { ModeColorService } from '@africanies/africanies-theme';
 
 import {
   FORM_ERROR_CLASS,
+  FORM_FOCUS_VISIBLE_PEER_CLASS,
   FORM_HINT_CLASS,
   FORM_LABEL_CLASS,
 } from '../form-field.classes';
@@ -178,7 +179,7 @@ export class RadioComponent<T = string> implements ControlValueAccessor {
   protected markClass(opt: RadioOption<T>): string {
     const base =
       'pointer-events-none flex size-4 items-center justify-center rounded-full border-2 bg-transparent transition-colors ' +
-      'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-ink';
+      FORM_FOCUS_VISIBLE_PEER_CLASS;
     const err = this.error() ? ' !border-danger dark:!border-danger' : '';
     if (this.isSelected(opt)) {
       // Ring uses mode accent; fill stays transparent so the center dot reads clearly.

package/libs/africanies-ui/src/lib/forms/select/select.component.ts

@@ -305,7 +305,7 @@ const SELECT_PANEL_POSITIONS: ConnectedPosition[] = [
             <input
               #searchInput
               type="search"
-              class="w-full rounded-md border border-neutral-300 dark:border-white/25 bg-transparent text-body text-ink dark:text-white px-2.5 py-1.5 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              class="w-full rounded-md border border-neutral-300 dark:border-white/25 bg-transparent text-body text-ink dark:text-white px-2.5 py-1.5 outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink"
               [value]="searchQuery()"
               placeholder="Search…"
               (input)="onSearchInput($event)"

package/libs/africanies-ui/src/lib/forms/toggle/toggle.component.ts

@@ -71,7 +71,7 @@ let nextToggleId = 0;
           [id]="controlId"
           type="button"
           role="switch"
-          class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-border p-0.5 box-border transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:border-white/15"
+          class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-border p-0.5 box-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink dark:border-white/15"
           [ngClass]="trackClass()"
           [attr.aria-checked]="on()"
           [attr.aria-busy]="loading() ? true : null"

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

@@ -70,7 +70,7 @@ export type ImageFit = 'cover' | 'contain';
 
       @if (showPlaceholder()) {
         <div
-          class="absolute inset-0 flex items-center justify-center bg-neutral-200 text-neutral-500 dark:bg-white/10 dark:text-neutral-400"
+          class="absolute inset-0 flex items-center justify-center bg-neutral-200 text-neutral-600 dark:bg-white/10 dark:text-neutral-400"
           [class.animate-pulse]="pending()"
           aria-hidden="true"
         >

package/libs/africanies-ui/src/lib/info-popover/info-popover.component.ts

@@ -245,9 +245,9 @@ export class InfoPopoverComponent {
    */
   protected readonly panelArrowClass = computed(() => {
     const card =
-      'relative z-10 w-max max-w-xs rounded-lg border border-border bg-white px-4 py-3 text-ink shadow-lg dark:border-white/15 dark:bg-ink-950 dark:text-white';
+      'relative z-10 w-max max-w-xs rounded-panel border border-border bg-surface px-4 py-3 text-ink shadow-floating dark:border-white/15 dark:bg-ink-950 dark:text-white';
     const base =
-      "before:pointer-events-none before:absolute before:z-0 before:h-2.5 before:w-2.5 before:rotate-45 before:border before:border-border before:bg-white before:content-[''] dark:before:border-white/15 dark:before:bg-ink-950";
+      "before:pointer-events-none before:absolute before:z-0 before:h-2.5 before:w-2.5 before:rotate-45 before:border before:border-border before:bg-surface before:content-[''] dark:before:border-white/15 dark:before:bg-ink-950";
     switch (this.placement()) {
       case 'bottom':
         return `${card} ${base} before:left-1/2 before:top-0 before:-translate-x-1/2 before:-translate-y-1/2 before:border-b-0 before:border-r-0`;

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

@@ -39,7 +39,7 @@ import { PageHeaderComponent } from './page-header.component';
           <div class="flex min-w-0 items-center gap-2 sm:gap-3">
             @if (showBackButton()) {
               <a
-                class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg 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-lg 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"
                 [attr.aria-label]="backLabel()"
                 [routerLink]="backTarget()!.routerLink"
                 [queryParams]="backTarget()!.queryParams"

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

@@ -81,7 +81,7 @@ export class AppShellHeaderEndDirective {}
         @if (greeting(); as hello) {
           <div class="min-w-0 overflow-hidden">
             <p
-              class="m-0 truncate text-caption leading-none text-neutral-500 dark:text-neutral-400"
+              class="m-0 truncate text-caption leading-none text-neutral-600 dark:text-neutral-400"
             >
               {{ hello.kicker }}
             </p>
@@ -107,19 +107,19 @@ export class AppShellHeaderEndDirective {}
                 <africanies-icon
                   [name]="weatherIcon()"
                   [size]="18"
-                  class="text-neutral-500 dark:text-neutral-400"
+                  class="text-neutral-600 dark:text-neutral-400"
                 />
                 @if (weatherTemp(); as temp) {
                   <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-500 md:inline dark:text-neutral-400"
+                  class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                 >
-                  {{ weatherPlace() }}
+                  {{ weatherCondition() }}
                 </span>
               </div>
             }
@@ -127,7 +127,7 @@ export class AppShellHeaderEndDirective {}
             @if (showClock()) {
               <div class="flex items-baseline gap-2" aria-live="polite">
                 <time
-                  class="hidden text-caption text-neutral-500 md:inline dark:text-neutral-400"
+                  class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                   [dateTime]="nowIso()"
                 >
                   {{ now() | date: clockDateFormat() }}
@@ -157,7 +157,7 @@ export class AppShellHeaderEndDirective {}
             @if (showNotifications()) {
               <button
                 type="button"
-                class="relative inline-flex size-9 cursor-pointer items-center justify-center rounded-lg 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="relative inline-flex size-9 cursor-pointer items-center justify-center rounded-lg 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"
                 [attr.aria-label]="notificationAriaLabel()"
                 (click)="openNotifications()"
               >
@@ -274,15 +274,15 @@ 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 weatherAriaLabel = computed(() => {
@@ -290,11 +290,11 @@ 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}`;
-    return city ? `Weather in ${city}: ${degrees}` : `Weather: ${degrees}`;
+    return temp === null
+      ? `Weather: ${condition}`
+      : `Weather: ${temp} degrees Celsius, ${condition}`;
   });
 
   protected readonly unreadCount = computed(

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

@@ -21,7 +21,7 @@
           >
             <button
               type="button"
-              class="inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-border text-ink transition-colors hover:bg-background-welcome dark:border-white/15 dark:text-white dark:hover:bg-white/10"
+              class="inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-control text-ink transition-colors hover:bg-background-hover dark:border-white/15 dark:text-white dark:hover:bg-white/10"
               [attr.aria-label]="mobileNavOpen() ? 'Close navigation' : 'Open navigation'"
               [attr.aria-expanded]="mobileNavOpen()"
               (click)="toggleMobileNav()"
@@ -37,7 +37,7 @@
         }
 
         <div
-          class="sticky top-0 z-30 border-b border-border bg-white/90 backdrop-blur-md dark:border-white/10 dark:bg-ink-950/90"
+          class="sticky top-0 z-30 border-b border-border bg-surface/90 backdrop-blur-md dark:border-white/10 dark:bg-ink-950/90"
         >
           @if (hasCustomHeader()) {
             <ng-content select="[africaniesAppShellHeader]" />

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

@@ -229,16 +229,16 @@ export class AppShellComponent {
     // Preview embeds: absolute/h-full so the drawer stays inside the frame.
     // Production: h-dvh so the rail fills the viewport (h-full only matches parent).
     if (preview === 'desktop') {
-      return 'z-50 shrink-0 self-start sticky top-0 block h-full';
+      return 'z-50 shrink-0 self-start sticky top-0 block h-full min-h-0';
     }
 
     if (preview === 'mobile' || preview === 'tablet') {
       return open
-        ? 'z-50 shrink-0 self-start absolute inset-y-0 left-0 h-full shadow-xl'
+        ? 'z-50 shrink-0 self-start absolute inset-y-0 left-0 h-full min-h-0 shadow-xl'
         : 'hidden';
     }
 
-    const base = 'z-50 shrink-0 self-start h-dvh';
+    const base = 'z-50 shrink-0 self-start h-dvh min-h-0';
     if (open) {
       return `${base} fixed inset-y-0 left-0 shadow-xl lg:sticky lg:top-0 lg:block`;
     }

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

@@ -33,8 +33,6 @@ export interface HeaderWeather {
   kind: HeaderWeatherKind;
   /** Celsius, when the forecast includes it. */
   temperatureC?: number;
-  /** City from IP geolocation, when known. */
-  city?: string;
 }
 
 const PERIOD_KICKERS: Record<HeaderGreetingPeriod, readonly string[]> = {

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

@@ -66,7 +66,7 @@ describe('loadHeaderWeather', () => {
     ).resolves.toBeNull();
   });
 
-  it('reads Open-Meteo after IP geolocation and reverse-geocodes the city', async () => {
+  it('reads Open-Meteo after IP coordinates', async () => {
     const fetchFn = jest.fn(async (url: string) => {
       if (String(url).includes('geojs')) {
         return jsonResponse({
@@ -75,9 +75,6 @@ describe('loadHeaderWeather', () => {
           city: 'Lagos',
         });
       }
-      if (String(url).includes('bigdatacloud')) {
-        return jsonResponse({ city: 'Abuja', locality: 'Abuja' });
-      }
       return jsonResponse({
         current: { weather_code: 61, temperature_2m: 27.4 },
       });
@@ -88,29 +85,8 @@ describe('loadHeaderWeather', () => {
     ).resolves.toEqual({
       kind: 'rain',
       temperatureC: 27.4,
-      city: 'Abuja',
-    });
-    expect(fetchFn).toHaveBeenCalledTimes(3);
-  });
-
-  it('falls back to the IP city when reverse geocode is empty', async () => {
-    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({});
-      }
-      return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
-    });
-
-    await expect(
-      loadHeaderWeather(fetchFn as unknown as typeof fetch),
-    ).resolves.toEqual({
-      kind: 'clear',
-      temperatureC: 30,
-      city: 'Lagos',
     });
+    expect(fetchFn).toHaveBeenCalledTimes(2);
   });
 
   it('reuses the same-hour session cache', async () => {
@@ -118,9 +94,6 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2 });
       }
-      if (String(url).includes('bigdatacloud')) {
-        return jsonResponse({ city: 'Accra' });
-      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
     });
 
@@ -128,16 +101,13 @@ describe('loadHeaderWeather', () => {
     const second = await loadHeaderWeather(fetchFn as unknown as typeof fetch);
 
     expect(first).toEqual(second);
-    expect(fetchFn).toHaveBeenCalledTimes(3);
+    expect(fetchFn).toHaveBeenCalledTimes(2);
   });
 
   it('fetches again when the cached hour no longer matches', async () => {
     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({ latitude: 1, longitude: 2 });
       }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30.2 } });
     });
@@ -154,7 +124,7 @@ describe('loadHeaderWeather', () => {
     sessionStorage.setItem(cacheKey!, JSON.stringify(stored));
 
     await loadHeaderWeather(fetchFn as unknown as typeof fetch);
-    expect(fetchFn).toHaveBeenCalledTimes(6);
+    expect(fetchFn).toHaveBeenCalledTimes(4);
   });
 
   it('uses browser coordinates when geolocation succeeds', async () => {
@@ -181,9 +151,6 @@ describe('loadHeaderWeather', () => {
     });
 
     const fetchFn = jest.fn(async (url: string) => {
-      if (String(url).includes('bigdatacloud')) {
-        return jsonResponse({ city: 'Abuja' });
-      }
       if (String(url).includes('geojs')) {
         throw new Error('should not call IP geo');
       }
@@ -195,7 +162,6 @@ describe('loadHeaderWeather', () => {
     ).resolves.toEqual({
       kind: 'clear',
       temperatureC: 31,
-      city: 'Abuja',
     });
     expect(
       fetchFn.mock.calls.some((call) => String(call[0]).includes('geojs')),
@@ -206,7 +172,12 @@ describe('loadHeaderWeather', () => {
 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');
   });
 });