@africanies/angular-web-sdk 0.1.7 → 0.1.8

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,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()"
               >

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/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');