@africanies/angular-web-sdk 0.1.6 → 0.1.8

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-neutral-300 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-neutral-300` /
+ * 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

@@ -186,7 +186,7 @@ const SELECT_PANEL_POSITIONS: ConnectedPosition[] = [
         @if (multiple() && selectedList().length) {
           @for (chip of selectedList(); track trackOption(chip)) {
             <span
-              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink text-body-sm text-ink dark:text-white px-2 py-0.5"
+              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink-950 text-body-sm text-ink dark:text-white px-2 py-0.5"
             >
               @if (chip.prefix; as prefixIcon) {
                 <africanies-icon [name]="prefixIcon" [size]="14" class="shrink-0" />
@@ -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,7 +107,7 @@ 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
@@ -117,7 +117,7 @@ export class AppShellHeaderEndDirective {}
                   </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() }}
                 </span>
@@ -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()"
               >
@@ -349,7 +349,7 @@ export class AppShellHeaderComponent {
     this.notificationsDrawer
       .open({
         title: this.notificationsTitle(),
-        notifications: onLoadPage ? undefined : this.notifications(),
+        notifications: this.notifications(),
         onLoadPage,
         onMarkRead,
         onMarkAllRead,

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

@@ -199,8 +199,8 @@ export class AppShellComponent {
 
   protected readonly shellRootClass = computed(() =>
     this.layoutPreview()
-      ? 'relative flex h-full min-h-0'
-      : 'relative flex min-h-full',
+      ? 'relative flex h-full min-h-0 bg-background-chrome dark:bg-ink-950'
+      : 'relative flex min-h-full bg-background-chrome dark:bg-ink-950',
   );
 
   protected readonly headerDensity = computed((): 'mobile' | 'tablet' | 'desktop' => {
@@ -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/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -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"
+      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 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

@@ -38,14 +38,16 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
 /**
  * App shell side navigation with icons, nested items, and a collapsible rail.
  *
- * **Design - ink spine:** a continuous mode-accent edge with soft active
- * highlights. Collapsed mode keeps icons; hover opens a floating label blade
- * (name + children) instead of a plain tooltip.
+ * **Design - ink spine:** a continuous mode-accent edge; active leaves use
+ * primary fill + white text (portal parity); expanded parents of an active
+ * child use primary text on white. Collapsed mode keeps icons; hover opens a
+ * floating label blade (name + children) instead of a plain tooltip.
  *
  * ## 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`).
  *
@@ -72,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',
@@ -196,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);
@@ -238,21 +245,24 @@ 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');
 
     const leaf = this.isLeafActive(item);
     const ancestor = !leaf && this.isItemActive(item);
+    const colors = this.modeColor.classes();
 
+    // Portal: active leaf / collapsed rail = primary fill + white text.
     if (leaf) {
-      return `${base} ${this.modeColor.classes().soft} ${this.modeColor.classes().text} font-semibold`;
+      return `${base} ${colors.activeFill} font-semibold`;
     }
+    // Portal: expanded parent of active child = primary text on white.
     if (ancestor) {
-      return `${base} ${this.modeColor.classes().soft} ${this.modeColor.classes().text} font-semibold`;
+      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'
     );
   }
@@ -260,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().soft} ${this.modeColor.classes().text} font-semibold`;
+      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…
@@ -127,7 +127,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -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,19 +290,20 @@ 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');
-  protected readonly items = signal<AfricaniesNotification[]>(
-    this.data.onLoadPage ? [] : (this.data.notifications ?? []),
-  );
+  private readonly seededItems = this.data.notifications ?? [];
+  protected readonly items = signal<AfricaniesNotification[]>(this.seededItems);
   protected readonly markingId = signal<string | null>(null);
   protected readonly markingAll = signal(false);
   protected readonly confirmingMarkAll = signal(false);
-  protected readonly loadingInitial = signal(!!this.data.onLoadPage);
+  protected readonly loadingInitial = signal(
+    !!this.data.onLoadPage && this.seededItems.length === 0,
+  );
   protected readonly loadingMore = signal(false);
   protected readonly loadError = signal<string | null>(null);
   protected readonly hasMore = signal(false);
@@ -334,7 +335,12 @@ export class NotificationDrawerPanel {
 
   constructor() {
     if (this.data.onLoadPage) {
-      this.fetchPage(1, 'replace');
+      if (this.seededItems.length > 0) {
+        this.currentPage.set(1);
+        this.fetchPage(1, 'refresh');
+      } else {
+        this.fetchPage(1, 'replace');
+      }
     }
 
     effect(() => {
@@ -578,7 +584,10 @@ export class NotificationDrawerPanel {
     this.fetchPage(this.currentPage() + 1, 'append');
   }
 
-  private fetchPage(page: number, mode: 'replace' | 'append'): void {
+  private fetchPage(
+    page: number,
+    mode: 'replace' | 'append' | 'refresh',
+  ): void {
     const loadPage = this.data.onLoadPage;
     if (!loadPage) {
       return;
@@ -587,6 +596,8 @@ export class NotificationDrawerPanel {
     if (mode === 'replace') {
       this.loadingInitial.set(true);
       this.loadError.set(null);
+    } else if (mode === 'refresh') {
+      this.loadError.set(null);
     } else {
       this.loadingMore.set(true);
     }
@@ -594,7 +605,7 @@ export class NotificationDrawerPanel {
     this.runPageLoad(
       () => loadPage(page),
       (result) => {
-        if (mode === 'replace') {
+        if (mode === 'replace' || mode === 'refresh') {
           this.items.set(result.items ?? []);
         } else {
           this.appendItems(result.items ?? []);
@@ -614,6 +625,8 @@ export class NotificationDrawerPanel {
         if (mode === 'replace') {
           this.loadError.set('Could not load notifications. Try again.');
           this.loadingInitial.set(false);
+        } else if (mode === 'refresh' && this.items().length === 0) {
+          this.loadError.set('Could not load notifications. Try again.');
         }
         this.loadingMore.set(false);
       },

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

@@ -59,15 +59,15 @@ export class DrawerService implements OverlayOpener {
           'africanies-overlay-backdrop',
           'bg-ink/45',
           'backdrop-blur-sm',
-          'dark:bg-ink/60',
+          'dark:bg-ink-950/60',
         ],
         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',