@africanies/angular-web-sdk 0.1.7 → 0.1.9

package/.nx/cache/{3314955264390318442 → 3953970051755345887}/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs

@@ -92,7 +92,7 @@ class ButtonComponent {
      */
     hostClass = computed(() => {
         const base = 'relative inline-flex items-center justify-center gap-2 box-border font-sans font-medium rounded-md border transition-colors cursor-pointer ' +
-            '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 ' +
             'disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed';
         const sizes = {
             sm: 'text-body-sm px-2.5 py-0 h-8',
@@ -108,16 +108,19 @@ class ButtonComponent {
             variantClass = this.modeColor.classes().ghostPrimary;
         }
         else if (variant === 'secondary') {
+            variantClass = this.modeColor.classes().stroked;
+        }
+        else if (variant === 'flat') {
             variantClass =
-                'bg-white dark:bg-ink-950 text-ink dark:text-white border-border dark:border-white/15 hover:bg-background-welcome dark:hover:bg-white/10';
+                'bg-surface dark:bg-ink-950 text-ink dark:text-white border-control dark:border-white/15 hover:bg-background-hover dark:hover:bg-white/10';
         }
         else if (variant === 'ghost') {
             variantClass =
-                'bg-transparent text-ink dark:text-white border-transparent hover:bg-background-welcome dark:hover:bg-white/10';
+                'bg-transparent text-ink dark:text-white border-transparent hover:bg-background-hover dark:hover:bg-white/10';
         }
         else if (variant === 'ghost-danger') {
             variantClass =
-                'bg-transparent text-danger border-transparent hover:bg-danger-subtle dark:hover:bg-danger/10';
+                'bg-transparent text-danger-dark border-transparent hover:bg-danger-subtle dark:text-danger dark:hover:bg-danger/10';
         }
         else if (variant === 'underline') {
             variantClass =
@@ -125,7 +128,7 @@ class ButtonComponent {
         }
         else {
             variantClass =
-                'bg-danger text-white border-transparent hover:bg-danger-dark';
+                'bg-danger-dark text-white border-transparent hover:bg-danger-strong dark:bg-danger dark:hover:bg-danger-dark';
         }
         return `${base} ${sizes[this.size()]} ${variantClass}`;
     }, /* @ts-ignore */
@@ -268,20 +271,20 @@ class ToastItemComponent {
         return v === 'warning' || v === 'danger' ? 'assertive' : 'polite';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "a11yLive" }] : /* istanbul ignore next */ []));
-    shellClass = computed(() => 'africanies-toast-enter relative flex w-full overflow-hidden rounded-lg border border-border ' +
-        'bg-white/95 text-ink shadow-lg backdrop-blur-md ' +
-        'dark:border-white/15 dark:bg-ink/95 dark:text-white', /* @ts-ignore */
+    shellClass = computed(() => 'africanies-toast-enter relative flex w-full overflow-hidden rounded-panel border border-border ' +
+        'bg-surface/95 text-ink shadow-floating backdrop-blur-md ' +
+        'dark:border-white/15 dark:bg-ink-950/95 dark:text-white', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => `w-1 shrink-0 self-stretch ${accentFill(this.item().variant)}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
     iconClass = computed(() => {
         switch (this.item().variant) {
             case 'success':
-                return 'text-export dark:text-export-light';
+                return 'text-export-strong dark:text-export-light';
             case 'warning':
                 return 'text-warning-dark dark:text-warning';
             case 'danger':
-                return 'text-danger';
+                return 'text-danger-dark dark:text-danger';
             default:
                 return 'text-ink-blue dark:text-neutral-300';
         }
@@ -291,11 +294,11 @@ class ToastItemComponent {
         const base = 'm-0 break-words text-body-sm font-semibold';
         switch (this.item().variant) {
             case 'success':
-                return `${base} text-export dark:text-export-light`;
+                return `${base} text-export-strong dark:text-export-light`;
             case 'warning':
                 return `${base} text-warning-dark dark:text-warning`;
             case 'danger':
-                return `${base} text-danger`;
+                return `${base} text-danger-dark dark:text-danger`;
             default:
                 return `${base} text-ink dark:text-white`;
         }
@@ -681,14 +684,14 @@ class ToastHostComponent {
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.collapseAll()"
@@ -699,7 +702,7 @@ class ToastHostComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.expandAll()"
@@ -711,7 +714,7 @@ class ToastHostComponent {
           <button
             africanies-button
             type="button"
-            variant="secondary"
+            variant="flat"
             size="sm"
             class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
             (click)="toastService.clear()"
@@ -750,14 +753,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.collapseAll()"
@@ -768,7 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.expandAll()"
@@ -780,7 +783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <button
             africanies-button
             type="button"
-            variant="secondary"
+            variant="flat"
             size="sm"
             class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
             (click)="toastService.clear()"
@@ -1501,9 +1504,9 @@ class ActionMenuComponent {
         const active = this.activeIndex() === index;
         const base = 'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm no-underline transition-colors ' +
             'disabled:cursor-not-allowed disabled:opacity-50 ' +
-            'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ink';
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus';
         if (item.danger) {
-            return (`${base} text-danger ` +
+            return (`${base} text-danger-dark dark:text-danger ` +
                 (active
                     ? 'bg-danger-subtle dark:bg-danger/15'
                     : 'hover:bg-danger-subtle dark:hover:bg-danger/15'));
@@ -1707,7 +1710,7 @@ class ActionMenuComponent {
     >
       <div
         #panel
-        class="min-w-44 rounded-md border border-border bg-white py-1 shadow-lg outline-none dark:border-white/15 dark:bg-ink-950"
+        class="min-w-44 rounded-md border border-border bg-surface py-1 shadow-floating outline-none dark:border-white/15 dark:bg-ink-950"
         role="menu"
         tabindex="-1"
         [attr.aria-label]="ariaLabel()"
@@ -1824,7 +1827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     >
       <div
         #panel
-        class="min-w-44 rounded-md border border-border bg-white py-1 shadow-lg outline-none dark:border-white/15 dark:bg-ink-950"
+        class="min-w-44 rounded-md border border-border bg-surface py-1 shadow-floating outline-none dark:border-white/15 dark:bg-ink-950"
         role="menu"
         tabindex="-1"
         [attr.aria-label]="ariaLabel()"
@@ -1927,7 +1930,7 @@ class EmptyStateComponent {
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -1958,7 +1961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2053,10 +2056,10 @@ class ErrorIndicatorComponent {
           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>
 
@@ -2071,7 +2074,7 @@ class ErrorIndicatorComponent {
           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()"
@@ -2098,10 +2101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           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>
 
@@ -2116,7 +2119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           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()"
@@ -2167,12 +2170,12 @@ class ErrorStateComponent {
       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"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2198,12 +2201,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       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"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2736,11 +2739,11 @@ class AlertComponent {
     iconClass = computed(() => {
         switch (this.variant()) {
             case 'success':
-                return 'text-export dark:text-export-light';
+                return 'text-export-strong dark:text-export-light';
             case 'warning':
                 return 'text-warning-dark dark:text-warning';
             case 'danger':
-                return 'text-danger';
+                return 'text-danger-dark dark:text-danger';
             default:
                 return 'text-ink-blue dark:text-neutral-300';
         }
@@ -2750,11 +2753,11 @@ class AlertComponent {
         const base = 'm-0 text-body font-medium';
         switch (this.variant()) {
             case 'success':
-                return `${base} text-export dark:text-export-light`;
+                return `${base} text-export-strong dark:text-export-light`;
             case 'warning':
                 return `${base} text-warning-dark dark:text-warning`;
             case 'danger':
-                return `${base} text-danger`;
+                return `${base} text-danger-dark dark:text-danger`;
             default:
                 return `${base} text-ink dark:text-white`;
         }
@@ -2907,13 +2910,13 @@ class ChipComponent {
         switch (this.variant()) {
             case 'success':
             case 'export':
-                return 'bg-export-subtle text-export dark:bg-export/15 dark:text-export-light';
+                return 'bg-export-subtle text-export-strong dark:bg-export/15 dark:text-export-light';
             case 'import':
-                return 'bg-import-subtle text-import dark:bg-import/15 dark:text-import-light';
+                return 'bg-import-subtle text-import-strong dark:bg-import/15 dark:text-import-light';
             case 'warning':
                 return 'bg-warning-subtle text-warning-dark dark:bg-warning/15 dark:text-warning';
             case 'danger':
-                return 'bg-danger-subtle text-danger dark:bg-danger/15 dark:text-danger';
+                return 'bg-danger-subtle text-danger-dark dark:bg-danger/15 dark:text-danger';
             default:
                 return 'bg-border/60 text-ink dark:bg-white/10 dark:text-neutral-200';
         }
@@ -2934,7 +2937,7 @@ class ChipComponent {
     @if (removable()) {
       <button
         type="button"
-        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink"
+        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus"
         [attr.aria-label]="removeLabel()"
         (click)="onRemove($event)"
       >
@@ -2962,7 +2965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     @if (removable()) {
       <button
         type="button"
-        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ink"
+        class="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus"
         [attr.aria-label]="removeLabel()"
         (click)="onRemove($event)"
       >
@@ -3177,7 +3180,7 @@ class ContentStackComponent {
         </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>
       }
@@ -3206,7 +3209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         </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>
       }
@@ -3779,8 +3782,8 @@ class InfoPopoverComponent {
      * Bound via `[class]` so arrow position tracks preferred placement.
      */
     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';
-        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";
+        const card = '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-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`;
@@ -4080,22 +4083,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * scanner must see full utility names in this package so they survive purge
  * 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.
+ */
+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. */
+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). */
+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). */
+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. */
 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`. */
-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';
 /**
- * Error border — `!` so it wins over shell `border-neutral-300` /
+ * 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.
+ */
+const FORM_FIELD_CLASS = '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.
  */
-const FORM_FIELD_ERROR_CLASS = '!border-danger dark:!border-danger focus-within:!outline-danger';
+const FORM_FIELD_ERROR_CLASS = '!border-danger dark:!border-danger focus-within:!ring-danger focus:!ring-danger';
 /** Native input / textarea inside a shell. */
 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. */
 const FORM_AFFIX_CLASS = 'inline-flex items-center shrink-0 px-2.5 text-neutral-600 dark:text-neutral-400 empty:hidden';
 /**
@@ -4110,7 +4135,7 @@ const FORM_DATE_INNER_CLASS = FORM_CONTROL_INNER_CLASS +
     ' cursor-pointer [&::-webkit-calendar-picker-indicator]:cursor-pointer';
 /** Hint under the control (hidden when error is shown). */
 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`. */
 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. */
 const FORM_DISABLED_CLASS = 'opacity-50 cursor-not-allowed';
@@ -4341,229 +4366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { dateInput: [{ type: i0.ViewChild, args: ['dateInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
-let nextRadioId = 0;
-/**
- * Radio group following the shared AFRICANIES form field pattern.
- *
- * **Prefix/suffix slots are omitted** — radios are mutually exclusive options
- * with labels; affix projection does not apply.
- *
- * Selected ring and center disc follow {@link ModeColorService}
- * (SFN green / STN orange).
- *
- * @typeParam T - Option value type.
- *
- * @example
- * ```html
- * <africanies-radio
- *   label="Shipment mode"
- *   [options]="modeOptions"
- *   [(value)]="mode"
- * />
- * ```
- */
-class RadioComponent {
-    modeColor = inject(ModeColorService);
-    groupName = `africanies-radio-${++nextRadioId}`;
-    hintId = `${this.groupName}-hint`;
-    errorId = `${this.groupName}-error`;
-    labelClass = FORM_LABEL_CLASS;
-    hintClass = FORM_HINT_CLASS;
-    errorClass = FORM_ERROR_CLASS;
-    /** Group legend / label. */
-    label = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Helper copy. Hidden while {@link error} is set. */
-    hint = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    /** Field-level validation message. Distinct from `ErrorStateComponent`. */
-    error = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    /** Options rendered as radios. */
-    options = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Selected option value (`[(value)]` + CVA). */
-    value = model(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Host disable flag (in addition to CVA). */
-    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
-        transform: booleanAttribute });
-    cvaDisabled = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    describedBy = computed(() => {
-        if (this.error()) {
-            return this.errorId;
-        }
-        if (this.hint()) {
-            return this.hintId;
-        }
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    onChange = () => undefined;
-    onTouched = () => undefined;
-    trackOption(opt) {
-        return String(opt.value);
-    }
-    isSelected(opt) {
-        return Object.is(this.value(), opt.value);
-    }
-    markClass(opt) {
-        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';
-        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.
-            return `${base} ${this.modeColor.classes().border}${err}`;
-        }
-        return `${base} border-neutral-400 dark:border-white${err}`;
-    }
-    /** Selected inner disc — SFN green / STN orange. */
-    dotClass = computed(() => `block size-1.5 rounded-full ${this.modeColor.classes().bg}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
-    /** @param value - Selected option value or `null`. */
-    writeValue(value) {
-        this.value.set(value);
-    }
-    /** @param fn - Selection change callback. */
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    /** @param fn - Blur callback. */
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /** @param isDisabled - Blocks interaction when true. */
-    setDisabledState(isDisabled) {
-        this.cvaDisabled.set(isDisabled);
-    }
-    select(opt) {
-        if (this.disabled() || opt.disabled) {
-            return;
-        }
-        this.value.set(opt.value);
-        this.onChange(opt.value);
-    }
-    onBlur() {
-        this.onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: RadioComponent, isStandalone: true, selector: "africanies-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex max-w-full" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => RadioComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
-    <fieldset
-      class="m-0 p-0 border-0 min-w-0"
-      [attr.aria-invalid]="error() ? true : null"
-      [attr.aria-describedby]="describedBy()"
-    >
-      <legend [class]="labelClass">{{ label() }}</legend>
-      <div class="flex flex-row flex-wrap gap-x-4 gap-y-2" role="radiogroup">
-        @for (opt of options(); track trackOption(opt)) {
-          <label
-            class="inline-flex items-center gap-2.5 text-body text-ink dark:text-white"
-            [class.opacity-50]="disabled() || opt.disabled"
-            [class.cursor-pointer]="!(disabled() || opt.disabled)"
-            [class.cursor-not-allowed]="disabled() || opt.disabled"
-          >
-            <span class="relative inline-flex size-4 shrink-0">
-              <input
-                type="radio"
-                class="peer absolute inset-0 z-10 m-0 size-full opacity-0"
-                [class.cursor-pointer]="!(disabled() || opt.disabled)"
-                [class.cursor-not-allowed]="disabled() || opt.disabled"
-                [name]="groupName"
-                [checked]="isSelected(opt)"
-                [disabled]="disabled() || !!opt.disabled"
-                (change)="select(opt)"
-                (blur)="onBlur()"
-              />
-              <span [class]="markClass(opt)" aria-hidden="true">
-                @if (isSelected(opt)) {
-                  <span [class]="dotClass()"></span>
-                }
-              </span>
-            </span>
-            <span>{{ opt.label }}</span>
-          </label>
-        }
-      </div>
-      @if (error(); as err) {
-        <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
-      } @else if (hint(); as h) {
-        <p [id]="hintId" [class]="hintClass">{{ h }}</p>
-      }
-    </fieldset>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadioComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'africanies-radio',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'inline-flex max-w-full',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => RadioComponent),
-                            multi: true,
-                        },
-                    ],
-                    template: `
-    <fieldset
-      class="m-0 p-0 border-0 min-w-0"
-      [attr.aria-invalid]="error() ? true : null"
-      [attr.aria-describedby]="describedBy()"
-    >
-      <legend [class]="labelClass">{{ label() }}</legend>
-      <div class="flex flex-row flex-wrap gap-x-4 gap-y-2" role="radiogroup">
-        @for (opt of options(); track trackOption(opt)) {
-          <label
-            class="inline-flex items-center gap-2.5 text-body text-ink dark:text-white"
-            [class.opacity-50]="disabled() || opt.disabled"
-            [class.cursor-pointer]="!(disabled() || opt.disabled)"
-            [class.cursor-not-allowed]="disabled() || opt.disabled"
-          >
-            <span class="relative inline-flex size-4 shrink-0">
-              <input
-                type="radio"
-                class="peer absolute inset-0 z-10 m-0 size-full opacity-0"
-                [class.cursor-pointer]="!(disabled() || opt.disabled)"
-                [class.cursor-not-allowed]="disabled() || opt.disabled"
-                [name]="groupName"
-                [checked]="isSelected(opt)"
-                [disabled]="disabled() || !!opt.disabled"
-                (change)="select(opt)"
-                (blur)="onBlur()"
-              />
-              <span [class]="markClass(opt)" aria-hidden="true">
-                @if (isSelected(opt)) {
-                  <span [class]="dotClass()"></span>
-                }
-              </span>
-            </span>
-            <span>{{ opt.label }}</span>
-          </label>
-        }
-      </div>
-      @if (error(); as err) {
-        <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
-      } @else if (hint(); as h) {
-        <p [id]="hintId" [class]="hintClass">{{ h }}</p>
-      }
-    </fieldset>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
-
 /**
  * Tailwind panel classes for each {@link ModalSize}.
  *
@@ -4873,16 +4675,16 @@ class ModalService {
                 'africanies-overlay-backdrop',
                 'bg-ink/45',
                 'backdrop-blur-sm',
-                'dark:bg-ink/60',
+                'dark:bg-ink-950/60',
             ],
             panelClass: [
                 'africanies-modal-panel',
-                'bg-white',
+                'bg-surface',
                 'dark:bg-ink-950',
                 'text-ink',
                 'dark:text-white',
-                'rounded-lg',
-                'shadow-xl',
+                'rounded-panel',
+                'shadow-floating',
                 'border',
                 'border-border',
                 'dark:border-white/15',
@@ -5687,7 +5489,7 @@ class SelectComponent {
         @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" />
@@ -5806,7 +5608,7 @@ class SelectComponent {
             <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)"
@@ -6015,7 +5817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         @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" />
@@ -6134,7 +5936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <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)"
@@ -6801,13 +6603,6 @@ class FilterDrawerPanel {
         const opt = Array.isArray(selected) ? selected[0] : selected;
         this.draft.update((s) => ({ ...s, order: opt?.value }));
     }
-    onRadioChange(key, value) {
-        if (value == null) {
-            this.clearField(key);
-            return;
-        }
-        this.setFieldValue(key, value);
-    }
     onSelectChange(key, selected) {
         const opt = Array.isArray(selected) ? selected[0] : selected;
         if (!opt) {
@@ -6948,11 +6743,18 @@ class FilterDrawerPanel {
             value,
         });
     }
-    toRadioOptions(options) {
-        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.
+     */
+    booleanOptions(field) {
+        if (field.options?.length) {
+            return field.options;
+        }
+        return [
+            { value: '1', label: 'Yes', color: '#25945c' },
+            { value: '0', label: 'No', color: '#FF001C' },
+        ];
     }
     onReset() {
         const next = resetFilterState(true, this.draft());
@@ -7201,23 +7003,48 @@ class FilterDrawerPanel {
                   </div>
                 }
                 @case ('boolean') {
-                  <africanies-radio
-                    label=""
-                    [options]="toRadioOptions(field.options)"
-                    [value]="draft().values[field.key] ?? null"
-                    (valueChange)="onRadioChange(field.key, $event)"
-                  />
-                }
-                @case ('select') {
-                  <!-- Label already shown in the section header — avoid double label. -->
-                  <africanies-select
-                    label=""
-                    [searchable]="true"
-                    [placeholder]="field.placeholder ?? 'Select…'"
-                    [options]="selectOptionsFor(field)"
-                    [selected]="selectedForField(field)"
-                    [error]="optionErrorFor(field.key)"
-                    [loading]="optionLoadingFor(field.key)"
+                  <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. -->
+                  <africanies-select
+                    label=""
+                    [searchable]="true"
+                    [placeholder]="field.placeholder ?? 'Select…'"
+                    [options]="selectOptionsFor(field)"
+                    [selected]="selectedForField(field)"
+                    [error]="optionErrorFor(field.key)"
+                    [loading]="optionLoadingFor(field.key)"
                     [retrying]="optionLoadingFor(field.key)"
                     [showRetry]="true"
                     (retry)="retryFieldOptions(field.key)"
@@ -7265,7 +7092,7 @@ class FilterDrawerPanel {
               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)"
             >
@@ -7297,7 +7124,7 @@ class FilterDrawerPanel {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: DatePickerComponent, selector: "africanies-date-picker", inputs: ["label", "hint", "error", "min", "max", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: RadioComponent, selector: "africanies-radio", inputs: ["label", "hint", "error", "options", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "africanies-select", inputs: ["label", "hint", "error", "showRetry", "retryLabel", "retryingLabel", "retrying", "loading", "loadingLabel", "placeholder", "options", "selected", "searchable", "allowFreeText", "multiple", "maxSelected", "create", "disabled", "showTriggerIcon", "size"], outputs: ["retry", "searchChange", "optionsChange", "selectedChange"] }, { kind: "component", type: TextInputComponent, selector: "africanies-text-input", inputs: ["label", "hint", "error", "placeholder", "type", "autocomplete", "value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: DatePickerComponent, selector: "africanies-date-picker", inputs: ["label", "hint", "error", "min", "max", "value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: SelectComponent, selector: "africanies-select", inputs: ["label", "hint", "error", "showRetry", "retryLabel", "retryingLabel", "retrying", "loading", "loadingLabel", "placeholder", "options", "selected", "searchable", "allowFreeText", "multiple", "maxSelected", "create", "disabled", "showTriggerIcon", "size"], outputs: ["retry", "searchChange", "optionsChange", "selectedChange"] }, { kind: "component", type: TextInputComponent, selector: "africanies-text-input", inputs: ["label", "hint", "error", "placeholder", "type", "autocomplete", "value", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FilterDrawerPanel, decorators: [{
             type: Component,
@@ -7312,7 +7139,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AfricaniesIconComponent,
                         ButtonComponent,
                         DatePickerComponent,
-                        RadioComponent,
                         SelectComponent,
                         TextInputComponent,
                     ],
@@ -7470,12 +7296,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   </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. -->
@@ -7534,7 +7385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               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)"
             >
@@ -7610,15 +7461,15 @@ class DrawerService {
                 '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',
@@ -7751,8 +7602,8 @@ class ConfirmDialogComponent {
     iconWellClass = computed(() => {
         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`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconWellClass" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -8138,7 +7989,7 @@ class OverlayFrameComponent {
       <ng-content select="[africaniesOverlayHeader]" />
     </div>
     <div
-      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-[2px] -mx-[2px]"
+      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-1 -mx-1"
     >
       <ng-content />
     </div>
@@ -8161,7 +8012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       <ng-content select="[africaniesOverlayHeader]" />
     </div>
     <div
-      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-[2px] -mx-[2px]"
+      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-1 -mx-1"
     >
       <ng-content />
     </div>
@@ -9053,7 +8904,7 @@ class CheckboxComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     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();
@@ -9722,13 +9573,13 @@ class FilePreviewDialogComponent {
           <img
             [src]="src()"
             [alt]="data.file.name"
-            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink dark:ring-white/15"
+            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink-950 dark:ring-white/15"
           />
         } @else {
           <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>
@@ -9792,13 +9643,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <img
             [src]="src()"
             [alt]="data.file.name"
-            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink dark:ring-white/15"
+            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink-950 dark:ring-white/15"
           />
         } @else {
           <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>
@@ -10275,7 +10126,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10288,7 +10139,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -10343,7 +10194,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10412,7 +10263,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"
@@ -10491,7 +10342,7 @@ class FileUploadComponent {
                   <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
@@ -10575,7 +10426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10588,7 +10439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -10643,7 +10494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10712,7 +10563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"
@@ -10791,7 +10642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   <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
@@ -11205,7 +11056,7 @@ class OtpInputComponent {
     cellClass = computed(() => {
         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';
         }
@@ -11614,6 +11465,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
   `, styles: [".africanies-otp-cell-masked{-webkit-text-security:disc;text-security:disc}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cellInputs: [{ type: i0.ViewChildren, args: ['cellInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showResend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResend", required: false }] }], resendPrompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendPrompt", required: false }] }], resendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendLabel", required: false }] }], resendCooldown: [{ type: i0.Input, args: [{ isSignal: true, alias: "resendCooldown", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], resend: [{ type: i0.Output, args: ["resend"] }] } });
 
+let nextRadioId = 0;
+/**
+ * Radio group following the shared AFRICANIES form field pattern.
+ *
+ * **Prefix/suffix slots are omitted** — radios are mutually exclusive options
+ * with labels; affix projection does not apply.
+ *
+ * Selected ring and center disc follow {@link ModeColorService}
+ * (SFN green / STN orange).
+ *
+ * @typeParam T - Option value type.
+ *
+ * @example
+ * ```html
+ * <africanies-radio
+ *   label="Shipment mode"
+ *   [options]="modeOptions"
+ *   [(value)]="mode"
+ * />
+ * ```
+ */
+class RadioComponent {
+    modeColor = inject(ModeColorService);
+    groupName = `africanies-radio-${++nextRadioId}`;
+    hintId = `${this.groupName}-hint`;
+    errorId = `${this.groupName}-error`;
+    labelClass = FORM_LABEL_CLASS;
+    hintClass = FORM_HINT_CLASS;
+    errorClass = FORM_ERROR_CLASS;
+    /** Group legend / label. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper copy. Hidden while {@link error} is set. */
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Field-level validation message. Distinct from `ErrorStateComponent`. */
+    error = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Options rendered as radios. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Selected option value (`[(value)]` + CVA). */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Host disable flag (in addition to CVA). */
+    disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+        transform: booleanAttribute });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    disabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.error()) {
+            return this.errorId;
+        }
+        if (this.hint()) {
+            return this.hintId;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    trackOption(opt) {
+        return String(opt.value);
+    }
+    isSelected(opt) {
+        return Object.is(this.value(), opt.value);
+    }
+    markClass(opt) {
+        const base = 'pointer-events-none flex size-4 items-center justify-center rounded-full border-2 bg-transparent transition-colors ' +
+            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.
+            return `${base} ${this.modeColor.classes().border}${err}`;
+        }
+        return `${base} border-neutral-400 dark:border-white${err}`;
+    }
+    /** Selected inner disc — SFN green / STN orange. */
+    dotClass = computed(() => `block size-1.5 rounded-full ${this.modeColor.classes().bg}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotClass" }] : /* istanbul ignore next */ []));
+    /** @param value - Selected option value or `null`. */
+    writeValue(value) {
+        this.value.set(value);
+    }
+    /** @param fn - Selection change callback. */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** @param fn - Blur callback. */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** @param isDisabled - Blocks interaction when true. */
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    select(opt) {
+        if (this.disabled() || opt.disabled) {
+            return;
+        }
+        this.value.set(opt.value);
+        this.onChange(opt.value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: RadioComponent, isStandalone: true, selector: "africanies-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "inline-flex max-w-full" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <fieldset
+      class="m-0 p-0 border-0 min-w-0"
+      [attr.aria-invalid]="error() ? true : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      <legend [class]="labelClass">{{ label() }}</legend>
+      <div class="flex flex-row flex-wrap gap-x-4 gap-y-2" role="radiogroup">
+        @for (opt of options(); track trackOption(opt)) {
+          <label
+            class="inline-flex items-center gap-2.5 text-body text-ink dark:text-white"
+            [class.opacity-50]="disabled() || opt.disabled"
+            [class.cursor-pointer]="!(disabled() || opt.disabled)"
+            [class.cursor-not-allowed]="disabled() || opt.disabled"
+          >
+            <span class="relative inline-flex size-4 shrink-0">
+              <input
+                type="radio"
+                class="peer absolute inset-0 z-10 m-0 size-full opacity-0"
+                [class.cursor-pointer]="!(disabled() || opt.disabled)"
+                [class.cursor-not-allowed]="disabled() || opt.disabled"
+                [name]="groupName"
+                [checked]="isSelected(opt)"
+                [disabled]="disabled() || !!opt.disabled"
+                (change)="select(opt)"
+                (blur)="onBlur()"
+              />
+              <span [class]="markClass(opt)" aria-hidden="true">
+                @if (isSelected(opt)) {
+                  <span [class]="dotClass()"></span>
+                }
+              </span>
+            </span>
+            <span>{{ opt.label }}</span>
+          </label>
+        }
+      </div>
+      @if (error(); as err) {
+        <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
+      } @else if (hint(); as h) {
+        <p [id]="hintId" [class]="hintClass">{{ h }}</p>
+      }
+    </fieldset>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'africanies-radio',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'inline-flex max-w-full',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioComponent),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    <fieldset
+      class="m-0 p-0 border-0 min-w-0"
+      [attr.aria-invalid]="error() ? true : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      <legend [class]="labelClass">{{ label() }}</legend>
+      <div class="flex flex-row flex-wrap gap-x-4 gap-y-2" role="radiogroup">
+        @for (opt of options(); track trackOption(opt)) {
+          <label
+            class="inline-flex items-center gap-2.5 text-body text-ink dark:text-white"
+            [class.opacity-50]="disabled() || opt.disabled"
+            [class.cursor-pointer]="!(disabled() || opt.disabled)"
+            [class.cursor-not-allowed]="disabled() || opt.disabled"
+          >
+            <span class="relative inline-flex size-4 shrink-0">
+              <input
+                type="radio"
+                class="peer absolute inset-0 z-10 m-0 size-full opacity-0"
+                [class.cursor-pointer]="!(disabled() || opt.disabled)"
+                [class.cursor-not-allowed]="disabled() || opt.disabled"
+                [name]="groupName"
+                [checked]="isSelected(opt)"
+                [disabled]="disabled() || !!opt.disabled"
+                (change)="select(opt)"
+                (blur)="onBlur()"
+              />
+              <span [class]="markClass(opt)" aria-hidden="true">
+                @if (isSelected(opt)) {
+                  <span [class]="dotClass()"></span>
+                }
+              </span>
+            </span>
+            <span>{{ opt.label }}</span>
+          </label>
+        }
+      </div>
+      @if (error(); as err) {
+        <p [id]="errorId" [class]="errorClass" role="alert">{{ err }}</p>
+      } @else if (hint(); as h) {
+        <p [id]="hintId" [class]="hintClass">{{ h }}</p>
+      }
+    </fieldset>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
 /**
  * Radio form control exports.
  */
@@ -12600,7 +12674,7 @@ class ToggleComponent {
           [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"
@@ -12662,7 +12736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           [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"
@@ -13498,16 +13572,16 @@ class ShippingModeSwitchComponent {
         const selected = this.mode() === option;
         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';
+        const idle = '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}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ShippingModeSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -13786,14 +13860,16 @@ const DEFAULT_LINK_ACTIVE$1 = {
 /**
  * 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`).
  *
@@ -13906,6 +13982,10 @@ class SideNavComponent {
     collapseAllBranches() {
         this.openBranches.set(new Set());
     }
+    /** Open every parent branch (e.g. so the collapse-all control is visible). */
+    expandAllBranches() {
+        this.openBranches.set(new Set(this.collectParentIds(this.items())));
+    }
     onItemEnter(id) {
         if (this.collapsed()) {
             this.hoverId.set(id);
@@ -13938,28 +14018,31 @@ class SideNavComponent {
     }
     rowClass(item) {
         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 ` +
+        return (`${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');
     }
     childRowClass(item) {
         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 ` +
+        return (`${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');
     }
     /**
@@ -14102,13 +14185,13 @@ class SideNavComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SideNavComponent, isStandalone: true, selector: "africanies-side-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandParents: { classPropertyName: "expandParents", publicName: "expandParents", isSignal: true, isRequired: false, transformFunction: null }, expandBranchesByDefault: { classPropertyName: "expandBranchesByDefault", publicName: "expandBranchesByDefault", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoMiniSrc: { classPropertyName: "logoMiniSrc", publicName: "logoMiniSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", activeId: "activeIdChange" }, host: { classAttribute: "relative z-20 block h-full" }, ngImport: i0, template: "    <aside\n      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\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          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\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            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\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SideNavComponent, isStandalone: true, selector: "africanies-side-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandParents: { classPropertyName: "expandParents", publicName: "expandParents", isSignal: true, isRequired: false, transformFunction: null }, expandBranchesByDefault: { classPropertyName: "expandBranchesByDefault", publicName: "expandBranchesByDefault", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoMiniSrc: { classPropertyName: "logoMiniSrc", publicName: "logoMiniSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", activeId: "activeIdChange" }, host: { classAttribute: "relative z-20 block h-full min-h-0" }, ngImport: i0, template: "    <aside\n      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\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        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\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          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\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-10 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              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\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'africanies-side-nav', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent, RouterLink, NgTemplateOutlet], host: {
-                        class: 'relative z-20 block h-full',
-                    }, template: "    <aside\n      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\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          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\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            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\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
+                        class: 'relative z-20 block h-full min-h-0',
+                    }, template: "    <aside\n      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\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        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\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          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\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-10 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              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\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], expandParents: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandParents", required: false }] }], expandBranchesByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBranchesByDefault", required: false }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoMiniSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoMiniSrc", required: false }] }] } });
 
 /**
@@ -14637,7 +14720,7 @@ class AppShellContentHeaderComponent {
           <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"
@@ -14683,7 +14766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <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"
@@ -14856,7 +14939,7 @@ class AvatarMenuComponent {
       <button
         type="button"
         africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-welcome focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
         [attr.aria-label]="ariaLabel()"
       >
         <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
@@ -14864,7 +14947,7 @@ class AvatarMenuComponent {
           <africanies-icon
             name="chevron-down"
             [size]="14"
-            class="shrink-0 text-neutral-500 dark:text-neutral-400"
+            class="shrink-0 text-neutral-600 dark:text-neutral-400"
             aria-hidden="true"
           />
         }
@@ -14893,7 +14976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       <button
         type="button"
         africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-welcome focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
         [attr.aria-label]="ariaLabel()"
       >
         <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
@@ -14901,7 +14984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <africanies-icon
             name="chevron-down"
             [size]="14"
-            class="shrink-0 text-neutral-500 dark:text-neutral-400"
+            class="shrink-0 text-neutral-600 dark:text-neutral-400"
             aria-hidden="true"
           />
         }
@@ -14934,14 +15017,15 @@ class NotificationDrawerPanel {
     viewLinkClass = computed(() => {
         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`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewLinkClass" }] : /* istanbul ignore next */ []));
     title = computed(() => this.data.title ?? 'Notifications', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    items = signal(this.data.onLoadPage ? [] : (this.data.notifications ?? []), /* @ts-ignore */
+    seededItems = this.data.notifications ?? [];
+    items = signal(this.seededItems, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     markingId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "markingId" }] : /* istanbul ignore next */ []));
@@ -14949,7 +15033,7 @@ class NotificationDrawerPanel {
     ...(ngDevMode ? [{ debugName: "markingAll" }] : /* istanbul ignore next */ []));
     confirmingMarkAll = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "confirmingMarkAll" }] : /* istanbul ignore next */ []));
-    loadingInitial = signal(!!this.data.onLoadPage, /* @ts-ignore */
+    loadingInitial = signal(!!this.data.onLoadPage && this.seededItems.length === 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadingInitial" }] : /* istanbul ignore next */ []));
     loadingMore = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
@@ -14983,7 +15067,13 @@ class NotificationDrawerPanel {
     markAllConfirmTimer = null;
     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(() => {
             if (this.loadingInitial() ||
@@ -15177,11 +15267,14 @@ class NotificationDrawerPanel {
             this.loadingInitial.set(true);
             this.loadError.set(null);
         }
+        else if (mode === 'refresh') {
+            this.loadError.set(null);
+        }
         else {
             this.loadingMore.set(true);
         }
         this.runPageLoad(() => loadPage(page), (result) => {
-            if (mode === 'replace') {
+            if (mode === 'replace' || mode === 'refresh') {
                 this.items.set(result.items ?? []);
             }
             else {
@@ -15196,6 +15289,9 @@ class NotificationDrawerPanel {
                 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);
         });
     }
@@ -15269,7 +15365,7 @@ class NotificationDrawerPanel {
             {{ 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>
           }
@@ -15315,7 +15411,7 @@ class NotificationDrawerPanel {
             <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…
@@ -15330,7 +15426,7 @@ class NotificationDrawerPanel {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -15382,7 +15478,7 @@ class NotificationDrawerPanel {
                       </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) }}
@@ -15461,7 +15557,7 @@ class NotificationDrawerPanel {
             >
               @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" />
@@ -15500,7 +15596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             {{ 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>
           }
@@ -15546,7 +15642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <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…
@@ -15561,7 +15657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -15613,7 +15709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                       </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) }}
@@ -15692,7 +15788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             >
               @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" />
@@ -15995,8 +16091,11 @@ function hashString(value) {
     return hash;
 }
 
-const CACHE_KEY = 'africanies-header-weather-v3';
+/** Bump when cache shape or lookup strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v5';
 const FETCH_MS = 4_000;
+const BROWSER_GEO_MS = 3_500;
+/** IP fallback for coordinates only — city strings are often wrong. */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
 const WEATHER_LABELS = {
     clear: 'Clear',
@@ -16041,9 +16140,13 @@ function mapWmoWeatherCode(code) {
  * Short condition label for the header weather chip.
  *
  * @param kind - Coarse forecast kind.
- * @returns Display label such as `Rain` or `Clear`.
+ * @param hour - Local hour; clear days show as Sunny, nights as Clear.
+ * @returns Display label such as `Rain` or `Sunny`.
  */
-function headerWeatherLabel(kind) {
+function headerWeatherLabel(kind, hour = new Date().getHours()) {
+    if (kind === 'clear') {
+        return hour >= 19 || hour < 6 ? 'Clear' : 'Sunny';
+    }
     return WEATHER_LABELS[kind];
 }
 /**
@@ -16063,7 +16166,12 @@ function headerWeatherIcon(kind, hour) {
     return 'cloud-o';
 }
 /**
- * City-level forecast via IP geolocation + Open-Meteo (no API key).
+ * Local forecast via browser / IP coordinates + Open-Meteo (no API key).
+ *
+ * Coordinates prefer the browser Geolocation API (may prompt once).
+ * Otherwise IP geo is used for lat/lon only — city labels are not shown
+ * because IP and reverse-geocode cities are often wrong (e.g. NG IPs
+ * labelled Lagos).
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -16083,14 +16191,12 @@ async function loadHeaderWeather(fetchFn) {
         return cached;
     }
     try {
-        const geo = (await fetchJson(run, GEO_URL));
-        const latitude = asNumber(geo?.latitude);
-        const longitude = asNumber(geo?.longitude);
-        if (latitude === null || longitude === null) {
+        const coords = await resolveCoordinates(run);
+        if (!coords) {
             return null;
         }
         const forecastUrl = `https://api.open-meteo.com/v1/forecast` +
-            `?latitude=${latitude}&longitude=${longitude}` +
+            `?latitude=${coords.latitude}&longitude=${coords.longitude}` +
             `&current=weather_code,temperature_2m`;
         const forecast = (await fetchJson(run, forecastUrl));
         const code = asNumber(forecast?.current?.weather_code);
@@ -16102,9 +16208,8 @@ async function loadHeaderWeather(fetchFn) {
             return null;
         }
         const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-        const city = asCity(geo?.city);
-        const weather = { kind, temperatureC, city };
-        writeCache({ hour, kind, temperatureC, city });
+        const weather = { kind, temperatureC };
+        writeCache({ hour, kind, temperatureC });
         return weather;
     }
     catch {
@@ -16130,7 +16235,6 @@ function readCache(hour) {
         return {
             kind: parsed.kind,
             temperatureC: parsed.temperatureC,
-            city: parsed.city,
         };
     }
     catch {
@@ -16145,6 +16249,46 @@ function writeCache(value) {
         // Private mode / quota — greeting still works without cache.
     }
 }
+/**
+ * Prefer device coordinates when available (may prompt once); otherwise fall
+ * back to IP lat/lon for the forecast only.
+ */
+async function resolveCoordinates(fetchFn) {
+    const browser = await tryBrowserGeolocation();
+    if (browser) {
+        return browser;
+    }
+    const geo = (await fetchJson(fetchFn, GEO_URL));
+    const latitude = asNumber(geo?.latitude);
+    const longitude = asNumber(geo?.longitude);
+    if (latitude === null || longitude === null) {
+        return null;
+    }
+    return { latitude, longitude };
+}
+async function tryBrowserGeolocation() {
+    if (typeof navigator === 'undefined' ||
+        typeof navigator.geolocation?.getCurrentPosition !== 'function') {
+        return null;
+    }
+    return await new Promise((resolve) => {
+        const timer = setTimeout(() => resolve(null), BROWSER_GEO_MS);
+        navigator.geolocation.getCurrentPosition((position) => {
+            clearTimeout(timer);
+            resolve({
+                latitude: position.coords.latitude,
+                longitude: position.coords.longitude,
+            });
+        }, () => {
+            clearTimeout(timer);
+            resolve(null);
+        }, {
+            enableHighAccuracy: false,
+            maximumAge: 600_000,
+            timeout: BROWSER_GEO_MS,
+        });
+    });
+}
 function asNumber(value) {
     if (typeof value === 'number' && Number.isFinite(value)) {
         return value;
@@ -16155,16 +16299,6 @@ function asNumber(value) {
     }
     return null;
 }
-function asCity(value) {
-    if (typeof value !== 'string') {
-        return undefined;
-    }
-    const trimmed = value.trim();
-    if (!trimmed || trimmed.toLowerCase() === 'n/a') {
-        return undefined;
-    }
-    return trimmed;
-}
 async function fetchJson(fetchFn, url) {
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), FETCH_MS);
@@ -16297,27 +16431,27 @@ class AppShellHeaderComponent {
         if (temp === undefined || !Number.isFinite(temp)) {
             return null;
         }
-        return temp.toFixed(1);
+        return String(Math.round(temp));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weatherTemp" }] : /* istanbul ignore next */ []));
-    weatherPlace = computed(() => {
+    weatherCondition = computed(() => {
         const forecast = this.weather();
         if (!forecast) {
             return '';
         }
-        return forecast.city?.trim() || headerWeatherLabel(forecast.kind);
+        return headerWeatherLabel(forecast.kind, this.now().getHours());
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weatherPlace" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "weatherCondition" }] : /* istanbul ignore next */ []));
     weatherAriaLabel = computed(() => {
         const forecast = this.weather();
         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}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weatherAriaLabel" }] : /* istanbul ignore next */ []));
     unreadCount = computed(() => (this.notifications() ?? []).filter((n) => !n.read).length, /* @ts-ignore */
@@ -16366,7 +16500,7 @@ class AppShellHeaderComponent {
         this.notificationsDrawer
             .open({
             title: this.notificationsTitle(),
-            notifications: onLoadPage ? undefined : this.notifications(),
+            notifications: this.notifications(),
             onLoadPage,
             onMarkRead,
             onMarkAllRead,
@@ -16386,7 +16520,7 @@ class AppShellHeaderComponent {
         @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>
@@ -16412,19 +16546,19 @@ class AppShellHeaderComponent {
                 <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>
             }
@@ -16432,7 +16566,7 @@ class AppShellHeaderComponent {
             @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() }}
@@ -16462,7 +16596,7 @@ class AppShellHeaderComponent {
             @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()"
               >
@@ -16513,7 +16647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         @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>
@@ -16539,19 +16673,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <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>
             }
@@ -16559,7 +16693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             @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() }}
@@ -16589,7 +16723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             @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()"
               >
@@ -16763,8 +16897,8 @@ class AppShellComponent {
     hostClass = computed(() => this.layoutPreview() ? 'block h-full' : 'block min-h-full', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     shellRootClass = computed(() => this.layoutPreview()
-        ? 'relative flex h-full min-h-0'
-        : 'relative flex min-h-full', /* @ts-ignore */
+        ? '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', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellRootClass" }] : /* istanbul ignore next */ []));
     headerDensity = computed(() => {
         const preview = this.layoutPreview();
@@ -16791,14 +16925,14 @@ 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`;
         }
@@ -16834,13 +16968,13 @@ class AppShellComponent {
         this.mobileNavOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AppShellComponent, isStandalone: true, selector: "africanies-app-shell", inputs: { contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, showAccent: { classPropertyName: "showAccent", publicName: "showAccent", isSignal: true, isRequired: false, transformFunction: null }, showHeaderChrome: { classPropertyName: "showHeaderChrome", publicName: "showHeaderChrome", isSignal: true, isRequired: false, transformFunction: null }, layoutPreview: { classPropertyName: "layoutPreview", publicName: "layoutPreview", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, catalogNav: { classPropertyName: "catalogNav", publicName: "catalogNav", isSignal: true, isRequired: false, transformFunction: null }, showContentBack: { classPropertyName: "showContentBack", publicName: "showContentBack", isSignal: true, isRequired: false, transformFunction: null }, contentBackLink: { classPropertyName: "contentBackLink", publicName: "contentBackLink", isSignal: true, isRequired: false, transformFunction: null }, contentBackLabel: { classPropertyName: "contentBackLabel", publicName: "contentBackLabel", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, greetingName: { classPropertyName: "greetingName", publicName: "greetingName", isSignal: true, isRequired: false, transformFunction: null }, userAvatarSrc: { classPropertyName: "userAvatarSrc", publicName: "userAvatarSrc", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsTitle: { classPropertyName: "notificationsTitle", publicName: "notificationsTitle", isSignal: true, isRequired: false, transformFunction: null }, showClock: { classPropertyName: "showClock", publicName: "showClock", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, clockDateFormat: { classPropertyName: "clockDateFormat", publicName: "clockDateFormat", isSignal: true, isRequired: false, transformFunction: null }, clockFormat: { classPropertyName: "clockFormat", publicName: "clockFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, queries: [{ propertyName: "customHeader", first: true, predicate: AppShellHeaderSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "    <div [class]=\"shellRootClass()\">\n      @if (mobileNavOpen()) {\n        <button\n          type=\"button\"\n          class=\"absolute inset-0 z-40 cursor-pointer bg-ink/40\"\n          [class.lg:hidden]=\"!layoutPreview()\"\n          aria-label=\"Close navigation\"\n          (click)=\"closeMobileNav()\"\n        ></button>\n      }\n\n      <div [class]=\"sidenavHostClass()\">\n        <ng-content select=\"[sidenav]\" />\n      </div>\n\n      <div class=\"flex min-w-0 flex-1 flex-col\">\n        @if (showMobileBar()) {\n          <div\n            class=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2 dark:border-white/10\"\n            [class.lg:hidden]=\"!layoutPreview()\"\n          >\n            <button\n              type=\"button\"\n              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\"\n              [attr.aria-label]=\"mobileNavOpen() ? 'Close navigation' : 'Open navigation'\"\n              [attr.aria-expanded]=\"mobileNavOpen()\"\n              (click)=\"toggleMobileNav()\"\n            >\n              <africanies-icon name=\"align-justify\" [size]=\"18\" />\n            </button>\n            <img\n              [src]=\"logoMiniUrl\"\n              alt=\"African Import Export Solutions\"\n              class=\"h-7 w-auto object-contain\"\n            />\n          </div>\n        }\n\n        <div\n          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\"\n        >\n          @if (hasCustomHeader()) {\n            <ng-content select=\"[africaniesAppShellHeader]\" />\n          } @else if (showHeaderChrome()) {\n            <africanies-app-shell-header\n              [userName]=\"userName()\"\n              [greetingName]=\"greetingName()\"\n              [userAvatarSrc]=\"userAvatarSrc()\"\n              [userMenuItems]=\"userMenuItems()\"\n              [notifications]=\"notifications()\"\n              [notificationsTitle]=\"notificationsTitle()\"\n              [showClock]=\"showClock()\"\n              [showNotifications]=\"showNotifications()\"\n              [clockDateFormat]=\"clockDateFormat()\"\n              [clockFormat]=\"clockFormat()\"\n              [density]=\"headerDensity()\"\n            />\n          }\n          @if (showAccent()) {\n            <div\n              class=\"h-0.5 w-full transition-colors duration-300\"\n              [class]=\"modeColor.classes().bg\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n        </div>\n\n        <main [class]=\"mainClass()\">\n          @if (showContentChrome()) {\n            <africanies-app-shell-content-header\n              [breadcrumbs]=\"breadcrumbs()\"\n              [title]=\"headerTitle()\"\n              [subtitle]=\"headerSubtitle()\"\n              [url]=\"currentUrl()\"\n              [catalogNav]=\"catalogNav()\"\n              [showBack]=\"showContentBack()\"\n              [backLink]=\"contentBackLink()\"\n              [backLabel]=\"contentBackLabel()\"\n            />\n          }\n          <ng-content />\n        </main>\n      </div>\n    </div>", dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: AppShellContentHeaderComponent, selector: "africanies-app-shell-content-header", inputs: ["breadcrumbs", "title", "subtitle", "url", "catalogNav", "showBack", "backLink", "backLabel"] }, { kind: "component", type: AppShellHeaderComponent, selector: "africanies-app-shell-header", inputs: ["userName", "greetingName", "userAvatarSrc", "userMenuItems", "notifications", "notificationsTitle", "onNotificationMarkRead", "onNotificationMarkAllRead", "onNotificationLoadPage", "showClock", "showNotifications", "density", "clockDateFormat", "clockFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AppShellComponent, isStandalone: true, selector: "africanies-app-shell", inputs: { contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, showAccent: { classPropertyName: "showAccent", publicName: "showAccent", isSignal: true, isRequired: false, transformFunction: null }, showHeaderChrome: { classPropertyName: "showHeaderChrome", publicName: "showHeaderChrome", isSignal: true, isRequired: false, transformFunction: null }, layoutPreview: { classPropertyName: "layoutPreview", publicName: "layoutPreview", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, catalogNav: { classPropertyName: "catalogNav", publicName: "catalogNav", isSignal: true, isRequired: false, transformFunction: null }, showContentBack: { classPropertyName: "showContentBack", publicName: "showContentBack", isSignal: true, isRequired: false, transformFunction: null }, contentBackLink: { classPropertyName: "contentBackLink", publicName: "contentBackLink", isSignal: true, isRequired: false, transformFunction: null }, contentBackLabel: { classPropertyName: "contentBackLabel", publicName: "contentBackLabel", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, greetingName: { classPropertyName: "greetingName", publicName: "greetingName", isSignal: true, isRequired: false, transformFunction: null }, userAvatarSrc: { classPropertyName: "userAvatarSrc", publicName: "userAvatarSrc", isSignal: true, isRequired: false, transformFunction: null }, userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null }, notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, notificationsTitle: { classPropertyName: "notificationsTitle", publicName: "notificationsTitle", isSignal: true, isRequired: false, transformFunction: null }, showClock: { classPropertyName: "showClock", publicName: "showClock", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, clockDateFormat: { classPropertyName: "clockDateFormat", publicName: "clockDateFormat", isSignal: true, isRequired: false, transformFunction: null }, clockFormat: { classPropertyName: "clockFormat", publicName: "clockFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, queries: [{ propertyName: "customHeader", first: true, predicate: AppShellHeaderSlotDirective, descendants: true, isSignal: true }], ngImport: i0, template: "    <div [class]=\"shellRootClass()\">\n      @if (mobileNavOpen()) {\n        <button\n          type=\"button\"\n          class=\"absolute inset-0 z-40 cursor-pointer bg-ink/40\"\n          [class.lg:hidden]=\"!layoutPreview()\"\n          aria-label=\"Close navigation\"\n          (click)=\"closeMobileNav()\"\n        ></button>\n      }\n\n      <div [class]=\"sidenavHostClass()\">\n        <ng-content select=\"[sidenav]\" />\n      </div>\n\n      <div class=\"flex min-w-0 flex-1 flex-col\">\n        @if (showMobileBar()) {\n          <div\n            class=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2 dark:border-white/10\"\n            [class.lg:hidden]=\"!layoutPreview()\"\n          >\n            <button\n              type=\"button\"\n              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\"\n              [attr.aria-label]=\"mobileNavOpen() ? 'Close navigation' : 'Open navigation'\"\n              [attr.aria-expanded]=\"mobileNavOpen()\"\n              (click)=\"toggleMobileNav()\"\n            >\n              <africanies-icon name=\"align-justify\" [size]=\"18\" />\n            </button>\n            <img\n              [src]=\"logoMiniUrl\"\n              alt=\"African Import Export Solutions\"\n              class=\"h-7 w-auto object-contain\"\n            />\n          </div>\n        }\n\n        <div\n          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\"\n        >\n          @if (hasCustomHeader()) {\n            <ng-content select=\"[africaniesAppShellHeader]\" />\n          } @else if (showHeaderChrome()) {\n            <africanies-app-shell-header\n              [userName]=\"userName()\"\n              [greetingName]=\"greetingName()\"\n              [userAvatarSrc]=\"userAvatarSrc()\"\n              [userMenuItems]=\"userMenuItems()\"\n              [notifications]=\"notifications()\"\n              [notificationsTitle]=\"notificationsTitle()\"\n              [showClock]=\"showClock()\"\n              [showNotifications]=\"showNotifications()\"\n              [clockDateFormat]=\"clockDateFormat()\"\n              [clockFormat]=\"clockFormat()\"\n              [density]=\"headerDensity()\"\n            />\n          }\n          @if (showAccent()) {\n            <div\n              class=\"h-0.5 w-full transition-colors duration-300\"\n              [class]=\"modeColor.classes().bg\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n        </div>\n\n        <main [class]=\"mainClass()\">\n          @if (showContentChrome()) {\n            <africanies-app-shell-content-header\n              [breadcrumbs]=\"breadcrumbs()\"\n              [title]=\"headerTitle()\"\n              [subtitle]=\"headerSubtitle()\"\n              [url]=\"currentUrl()\"\n              [catalogNav]=\"catalogNav()\"\n              [showBack]=\"showContentBack()\"\n              [backLink]=\"contentBackLink()\"\n              [backLabel]=\"contentBackLabel()\"\n            />\n          }\n          <ng-content />\n        </main>\n      </div>\n    </div>", dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: AppShellContentHeaderComponent, selector: "africanies-app-shell-content-header", inputs: ["breadcrumbs", "title", "subtitle", "url", "catalogNav", "showBack", "backLink", "backLabel"] }, { kind: "component", type: AppShellHeaderComponent, selector: "africanies-app-shell-header", inputs: ["userName", "greetingName", "userAvatarSrc", "userMenuItems", "notifications", "notificationsTitle", "onNotificationMarkRead", "onNotificationMarkAllRead", "onNotificationLoadPage", "showClock", "showNotifications", "density", "clockDateFormat", "clockFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AppShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'africanies-app-shell', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent, AppShellContentHeaderComponent, AppShellHeaderComponent], host: {
                         '[class]': 'hostClass()',
-                    }, template: "    <div [class]=\"shellRootClass()\">\n      @if (mobileNavOpen()) {\n        <button\n          type=\"button\"\n          class=\"absolute inset-0 z-40 cursor-pointer bg-ink/40\"\n          [class.lg:hidden]=\"!layoutPreview()\"\n          aria-label=\"Close navigation\"\n          (click)=\"closeMobileNav()\"\n        ></button>\n      }\n\n      <div [class]=\"sidenavHostClass()\">\n        <ng-content select=\"[sidenav]\" />\n      </div>\n\n      <div class=\"flex min-w-0 flex-1 flex-col\">\n        @if (showMobileBar()) {\n          <div\n            class=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2 dark:border-white/10\"\n            [class.lg:hidden]=\"!layoutPreview()\"\n          >\n            <button\n              type=\"button\"\n              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\"\n              [attr.aria-label]=\"mobileNavOpen() ? 'Close navigation' : 'Open navigation'\"\n              [attr.aria-expanded]=\"mobileNavOpen()\"\n              (click)=\"toggleMobileNav()\"\n            >\n              <africanies-icon name=\"align-justify\" [size]=\"18\" />\n            </button>\n            <img\n              [src]=\"logoMiniUrl\"\n              alt=\"African Import Export Solutions\"\n              class=\"h-7 w-auto object-contain\"\n            />\n          </div>\n        }\n\n        <div\n          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\"\n        >\n          @if (hasCustomHeader()) {\n            <ng-content select=\"[africaniesAppShellHeader]\" />\n          } @else if (showHeaderChrome()) {\n            <africanies-app-shell-header\n              [userName]=\"userName()\"\n              [greetingName]=\"greetingName()\"\n              [userAvatarSrc]=\"userAvatarSrc()\"\n              [userMenuItems]=\"userMenuItems()\"\n              [notifications]=\"notifications()\"\n              [notificationsTitle]=\"notificationsTitle()\"\n              [showClock]=\"showClock()\"\n              [showNotifications]=\"showNotifications()\"\n              [clockDateFormat]=\"clockDateFormat()\"\n              [clockFormat]=\"clockFormat()\"\n              [density]=\"headerDensity()\"\n            />\n          }\n          @if (showAccent()) {\n            <div\n              class=\"h-0.5 w-full transition-colors duration-300\"\n              [class]=\"modeColor.classes().bg\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n        </div>\n\n        <main [class]=\"mainClass()\">\n          @if (showContentChrome()) {\n            <africanies-app-shell-content-header\n              [breadcrumbs]=\"breadcrumbs()\"\n              [title]=\"headerTitle()\"\n              [subtitle]=\"headerSubtitle()\"\n              [url]=\"currentUrl()\"\n              [catalogNav]=\"catalogNav()\"\n              [showBack]=\"showContentBack()\"\n              [backLink]=\"contentBackLink()\"\n              [backLabel]=\"contentBackLabel()\"\n            />\n          }\n          <ng-content />\n        </main>\n      </div>\n    </div>" }]
+                    }, template: "    <div [class]=\"shellRootClass()\">\n      @if (mobileNavOpen()) {\n        <button\n          type=\"button\"\n          class=\"absolute inset-0 z-40 cursor-pointer bg-ink/40\"\n          [class.lg:hidden]=\"!layoutPreview()\"\n          aria-label=\"Close navigation\"\n          (click)=\"closeMobileNav()\"\n        ></button>\n      }\n\n      <div [class]=\"sidenavHostClass()\">\n        <ng-content select=\"[sidenav]\" />\n      </div>\n\n      <div class=\"flex min-w-0 flex-1 flex-col\">\n        @if (showMobileBar()) {\n          <div\n            class=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2 dark:border-white/10\"\n            [class.lg:hidden]=\"!layoutPreview()\"\n          >\n            <button\n              type=\"button\"\n              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\"\n              [attr.aria-label]=\"mobileNavOpen() ? 'Close navigation' : 'Open navigation'\"\n              [attr.aria-expanded]=\"mobileNavOpen()\"\n              (click)=\"toggleMobileNav()\"\n            >\n              <africanies-icon name=\"align-justify\" [size]=\"18\" />\n            </button>\n            <img\n              [src]=\"logoMiniUrl\"\n              alt=\"African Import Export Solutions\"\n              class=\"h-7 w-auto object-contain\"\n            />\n          </div>\n        }\n\n        <div\n          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\"\n        >\n          @if (hasCustomHeader()) {\n            <ng-content select=\"[africaniesAppShellHeader]\" />\n          } @else if (showHeaderChrome()) {\n            <africanies-app-shell-header\n              [userName]=\"userName()\"\n              [greetingName]=\"greetingName()\"\n              [userAvatarSrc]=\"userAvatarSrc()\"\n              [userMenuItems]=\"userMenuItems()\"\n              [notifications]=\"notifications()\"\n              [notificationsTitle]=\"notificationsTitle()\"\n              [showClock]=\"showClock()\"\n              [showNotifications]=\"showNotifications()\"\n              [clockDateFormat]=\"clockDateFormat()\"\n              [clockFormat]=\"clockFormat()\"\n              [density]=\"headerDensity()\"\n            />\n          }\n          @if (showAccent()) {\n            <div\n              class=\"h-0.5 w-full transition-colors duration-300\"\n              [class]=\"modeColor.classes().bg\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n        </div>\n\n        <main [class]=\"mainClass()\">\n          @if (showContentChrome()) {\n            <africanies-app-shell-content-header\n              [breadcrumbs]=\"breadcrumbs()\"\n              [title]=\"headerTitle()\"\n              [subtitle]=\"headerSubtitle()\"\n              [url]=\"currentUrl()\"\n              [catalogNav]=\"catalogNav()\"\n              [showBack]=\"showContentBack()\"\n              [backLink]=\"contentBackLink()\"\n              [backLabel]=\"contentBackLabel()\"\n            />\n          }\n          <ng-content />\n        </main>\n      </div>\n    </div>" }]
         }], propDecorators: { customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppShellHeaderSlotDirective), { isSignal: true }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], showAccent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAccent", required: false }] }], showHeaderChrome: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderChrome", required: false }] }], layoutPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutPreview", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }], catalogNav: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalogNav", required: false }] }], showContentBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContentBack", required: false }] }], contentBackLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBackLink", required: false }] }], contentBackLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBackLabel", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], greetingName: [{ type: i0.Input, args: [{ isSignal: true, alias: "greetingName", required: false }] }], userAvatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAvatarSrc", required: false }] }], userMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenuItems", required: false }] }], notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }], notificationsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsTitle", required: false }] }], showClock: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClock", required: false }] }], showNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotifications", required: false }] }], clockDateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "clockDateFormat", required: false }] }], clockFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "clockFormat", required: false }] }] } });
 
 /**
@@ -16968,7 +17102,7 @@ class ImageComponent {
 
       @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"
         >
@@ -17024,7 +17158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
       @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"
         >
@@ -17368,7 +17502,7 @@ class PaginationComponent {
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_previous_page"
           (click)="emitPage(meta().current_page - 1)"
@@ -17378,7 +17512,7 @@ class PaginationComponent {
         @for (item of pageItems(); track trackPageItem(item, $index)) {
           @if (item === 'ellipsis') {
             <span
-              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-500 dark:text-neutral-400"
+              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-600 dark:text-neutral-400"
               aria-hidden="true"
             >
               …
@@ -17389,7 +17523,7 @@ class PaginationComponent {
               type="button"
               size="sm"
               class="min-w-8"
-              [variant]="item === meta().current_page ? 'primary' : 'secondary'"
+              [variant]="item === meta().current_page ? 'primary' : 'flat'"
               [disabled]="controlsDisabled()"
               [attr.aria-label]="'Page ' + item"
               [attr.aria-current]="
@@ -17404,7 +17538,7 @@ class PaginationComponent {
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_next_page"
           (click)="emitPage(meta().current_page + 1)"
@@ -17469,7 +17603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_previous_page"
           (click)="emitPage(meta().current_page - 1)"
@@ -17479,7 +17613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         @for (item of pageItems(); track trackPageItem(item, $index)) {
           @if (item === 'ellipsis') {
             <span
-              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-500 dark:text-neutral-400"
+              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-600 dark:text-neutral-400"
               aria-hidden="true"
             >
               …
@@ -17490,7 +17624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               type="button"
               size="sm"
               class="min-w-8"
-              [variant]="item === meta().current_page ? 'primary' : 'secondary'"
+              [variant]="item === meta().current_page ? 'primary' : 'flat'"
               [disabled]="controlsDisabled()"
               [attr.aria-label]="'Page ' + item"
               [attr.aria-current]="
@@ -17505,7 +17639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_next_page"
           (click)="emitPage(meta().current_page + 1)"
@@ -17529,11 +17663,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Hidden while the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
  * spins (do not swap to a blocking loader). Use {@link loading} when the page
- * of data is changing (pagination / size): rows stay on screen and the built-in
- * pager shows a circular spinner beside the page controls; the body loader
- * appears only when there are no rows yet (first load) or the host cleared
- * rows for a shipping-mode switch (STN ↔ SFN). Toolbar and column headers stay
- * mounted.
+ * of data is changing (pagination / size): rows stay on screen, a keep-rows
+ * overlay covers the grid, and the built-in pager shows a circular spinner
+ * beside the page controls; the body loader appears only when there are no
+ * rows yet (first load) or the host cleared rows for a shipping-mode switch
+ * (STN ↔ SFN). Toolbar and column headers stay mounted.
  * top-right **Filters** then **Export** (`showFilter` / `showExport`). The table
  * does not own fetch, filter, or export logic — the host handles those events.
  *
@@ -17590,9 +17724,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * **Sticky columns:** a column with `key: 'actions'` stays pinned to the
  * right while the grid scrolls horizontally. The expand trigger column pins
  * to the left when rows are expandable. Override with
- * {@link TableColumn.sticky}.
+ * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
+ * border (and opaque fill) so dividers stay visible while scrolling.
+ *
+ * **Sticky header (desktop):** when {@link stickyHeader} is true (default),
+ * large screens scroll the grid inside a capped viewport and keep `th` pinned
+ * to the top of that scrollport. Mobile keeps horizontal-only overflow so
+ * page scroll is unchanged.
  */
 class TableComponent {
+    modeColor = inject(ModeColorService);
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -17608,6 +17749,12 @@ class TableComponent {
     /** Column definitions (header chrome + keys). */
     columns = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /**
+     * When true (default), pin column headers while scrolling the grid on
+     * large screens (`lg+`). Uses a capped scrollport so sticky works with
+     * horizontal overflow. Set false to keep the previous unconstrained layout.
+     */
+    stickyHeader = input(true, { ...(ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Row records to render. Empty arrays show {@link EmptyStateComponent} in
      * the body unless {@link loading} or {@link error} is set. Missing `data`
@@ -17638,9 +17785,9 @@ class TableComponent {
     refreshing = input(false, { ...(ngDevMode ? { debugName: "refreshing" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Page of data is loading (first load, shipping-mode switch, pagination,
-     * page size). When rows are already on screen, the pager shows a spinner
-     * and rows stay visible; when there are no rows (first load or the host
-     * dropped STN/SFN rows after a mode switch), the body shows
+     * page size). When rows are already on screen, a keep-rows overlay covers
+     * the grid and the pager shows a spinner; when there are no rows (first
+     * load or the host dropped STN/SFN rows after a mode switch), the body shows
      * {@link LoadingStateComponent}. Distinct from {@link refreshing}.
      */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -17802,6 +17949,21 @@ class TableComponent {
     cellContext(row) {
         return { $implicit: row };
     }
+    /**
+     * Header row chrome. Soft fill lives on each `th` ({@link headerSoftClass})
+     * so sticky columns do not double-tint and paint over neighbor labels.
+     * @returns Header row class list.
+     */
+    headerRowClass() {
+        return 'border-b border-border dark:border-white/10';
+    }
+    /**
+     * Opaque mode soft fill for header cells (sticky-safe in dark mode).
+     * @returns Soft solid background utilities.
+     */
+    headerSoftClass() {
+        return this.modeColor.classes().softSolid;
+    }
     /**
      * Body row classes — row marker for hover styles, plus hide cell borders on
      * the last / expanded row.
@@ -17812,7 +17974,7 @@ class TableComponent {
     bodyRowClass(row, index) {
         if (this.isExpandable() && this.isRowExpanded(row, index)) {
             // Only the bottom edge — keep the top divider so the row still
-            // separates from the row above.
+            // separates from the row above. Detail panel owns the separator.
             return 'africanies-table-row group [&>td]:border-b-0';
         }
         return 'africanies-table-row group last:[&>td]:border-b-0';
@@ -17838,21 +18000,27 @@ class TableComponent {
      * @returns Header class list.
      */
     expandHeaderClass() {
-        return ('w-10 border-b border-border px-2 py-3.5 dark:border-white/10 ' +
+        return ('w-10 border-b-[1.5px] border-border px-2 py-4 dark:border-white/10 ' +
+            this.headerSoftClass() +
+            ' ' +
             this.stickyPinClass('left', 'head'));
     }
     /**
      * Body classes for the expand/collapse trigger column (pinned left).
-     * Omits `border-b` like other sticky cells so the opaque fill does not
-     * double-paint the row divider.
+     * Uses a slightly thicker bottom border than scrolling cells so the
+     * sticky fill still reads a clear divider (no top-shadow fallback).
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
      */
     expandBodyClass(index) {
-        const prev = index > 0 ? this.rowList()[index - 1] : undefined;
-        const afterExpanded = prev !== undefined && this.isRowExpanded(prev, index - 1);
-        return ('w-10 px-2 py-3.5 align-middle ' +
-            this.stickyPinClass('left', 'body', index, afterExpanded));
+        const row = this.rowList()[index];
+        const expanded = row !== undefined && this.isRowExpanded(row, index);
+        const border = expanded
+            ? ''
+            : 'border-b-[1.5px] border-border dark:border-white/10 ';
+        return ('w-10 px-2 py-4 align-middle ' +
+            border +
+            this.stickyPinClass('left', 'body'));
     }
     /**
      * Header cell classes, including sticky pin when set.
@@ -17860,69 +18028,86 @@ class TableComponent {
      * @returns Header class list.
      */
     headerCellClass(col) {
-        return ('border-b border-border whitespace-normal wrap-break-word px-3 py-3.5 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
-            this.stickySurfaceClass(col, 'head'));
+        const sticky = this.stickyEdge(col);
+        const border = sticky
+            ? 'border-b-[1.5px] '
+            : 'border-b ';
+        return (border +
+            'border-border whitespace-normal wrap-break-word px-[1.125rem] py-4 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
+            this.headerSoftClass() +
+            ' ' +
+            this.stickySurfaceClass(col, 'head') +
+            (sticky ? '' : this.headerStickClass()));
+    }
+    /**
+     * Vertical pin for scrolling header cells on desktop. Pinned left/right
+     * headers get `lg:top-0` from {@link stickyPinClass} instead.
+     */
+    headerStickClass() {
+        if (!this.stickyHeader()) {
+            return '';
+        }
+        return ' lg:sticky lg:top-0 lg:z-[3] print:static';
     }
     /**
      * Body cell classes, including sticky pin when set.
-     * Sticky cells omit `border-b`: their opaque fill sits in a higher stacking
-     * context, so a bottom border plus the next row's top shadow paint on the
-     * same pixel and read brighter (especially in dark mode).
+     * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
+     * stay at 1px. Expanded rows drop the bottom border (see {@link bodyRowClass}).
      * @param col - Column definition.
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
      */
     bodyCellClass(col, index) {
-        const rowLine = this.stickyEdge(col)
+        const row = this.rowList()[index];
+        const expanded = row !== undefined && this.isRowExpanded(row, index);
+        const sticky = this.stickyEdge(col);
+        const rowLine = expanded
             ? ''
-            : 'border-b border-border dark:border-white/10 ';
-        const prev = index > 0 ? this.rowList()[index - 1] : undefined;
-        const afterExpanded = prev !== undefined && this.isRowExpanded(prev, index - 1);
+            : sticky
+                ? 'border-b-[1.5px] border-border dark:border-white/10 '
+                : 'border-b border-border dark:border-white/10 ';
         const wrap = col.key === 'actions'
             ? 'whitespace-nowrap '
             : 'whitespace-normal wrap-break-word ';
         return (rowLine +
-            'px-3 py-3.5 align-middle ' +
+            'px-[1.125rem] py-4 align-middle ' +
             wrap +
-            this.stickySurfaceClass(col, 'body', index, afterExpanded));
+            this.stickySurfaceClass(col, 'body'));
     }
     /**
      * Sticky pin utilities for a known edge (expand column or data column).
      * @param edge - Left or right pin.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow
-     *   divider so the sticky column stays flush under the detail panel.
      * @returns Sticky utilities.
      */
-    stickyPinClass(edge, surface, index = 0, afterExpanded = false) {
+    stickyPinClass(edge, surface) {
         // Expand (left) sits above scrolling cells; actions (right) match.
         // Header needs a higher z so it stays above sticky body cells.
         const side = edge === 'right' ? 'sticky right-0 z-[1]' : 'sticky left-0 z-[1]';
         if (surface === 'head') {
-            return `${side} z-[2] bg-background-welcome dark:bg-ink-950`;
+            // Fill comes from {@link headerSoftClass} on the cell — do not re-tint.
+            // Corner pins also stick vertically on desktop when stickyHeader is on.
+            const vertical = this.stickyHeader()
+                ? ' z-[2] lg:top-0 lg:z-[4] print:static'
+                : ' z-[2]';
+            return `${side}${vertical}`;
         }
-        const rowDivider = !afterExpanded && index > 0
-            ? 'shadow-[0_-1px_0_0_#c9d5e1] dark:shadow-[0_-1px_0_0_rgba(255,255,255,0.1)]'
-            : '';
-        const fill = 'bg-white dark:bg-ink';
-        return `${side} ${fill} ${rowDivider}`;
+        const fill = 'bg-surface dark:bg-ink-surface';
+        return `${side} ${fill}`;
     }
     /**
      * Sticky pin plus an opaque fill matching the table surface, so scrolled
      * cells do not show through.
      * @param col - Column definition.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow.
      * @returns Sticky utilities, or empty when the column scrolls.
      */
-    stickySurfaceClass(col, surface, index = 0, afterExpanded = false) {
+    stickySurfaceClass(col, surface) {
         const edge = this.stickyEdge(col);
         if (!edge) {
             return '';
         }
-        return this.stickyPinClass(edge, surface, index, afterExpanded);
+        return this.stickyPinClass(edge, surface);
     }
     /**
      * Stable id for a row — used for expand/collapse state.
@@ -18013,7 +18198,7 @@ class TableComponent {
         this.sortChange.emit({ key, direction });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableComponent, isStandalone: true, selector: "africanies-table", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowTrackBy: { classPropertyName: "rowTrackBy", publicName: "rowTrackBy", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, refreshLabel: { classPropertyName: "refreshLabel", publicName: "refreshLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshing: { classPropertyName: "refreshing", publicName: "refreshing", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterCount: { classPropertyName: "filterCount", publicName: "filterCount", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, exportLabel: { classPropertyName: "exportLabel", publicName: "exportLabel", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowExpandChange: "rowExpandChange", sortChange: "sortChange", refreshClick: "refreshClick", filterClick: "filterClick", exportClick: "exportClick", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block w-full min-w-0" }, queries: [{ propertyName: "cellDefs", predicate: CellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: HeaderCellDefDirective, isSignal: true }, { propertyName: "rowDetailDefs", predicate: RowDetailDefDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableComponent, isStandalone: true, selector: "africanies-table", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowTrackBy: { classPropertyName: "rowTrackBy", publicName: "rowTrackBy", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, refreshLabel: { classPropertyName: "refreshLabel", publicName: "refreshLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshing: { classPropertyName: "refreshing", publicName: "refreshing", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterCount: { classPropertyName: "filterCount", publicName: "filterCount", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, exportLabel: { classPropertyName: "exportLabel", publicName: "exportLabel", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowExpandChange: "rowExpandChange", sortChange: "sortChange", refreshClick: "refreshClick", filterClick: "filterClick", exportClick: "exportClick", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block w-full min-w-0" }, queries: [{ propertyName: "cellDefs", predicate: CellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: HeaderCellDefDirective, isSignal: true }, { propertyName: "rowDetailDefs", predicate: RowDetailDefDirective, isSignal: true }], ngImport: i0, template: `
     <div
       class="flex w-full min-w-0 flex-col gap-3"
       [attr.aria-busy]="loading() || refreshing() || null"
@@ -18025,7 +18210,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -18045,7 +18230,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -18065,7 +18250,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -18079,26 +18264,24 @@ class TableComponent {
       }
 
       @if (staleError(); as staleMessage) {
-        <div class="flex justify-end">
-          <africanies-error-indicator
-            class="max-w-[min(100%,20rem)]"
-            [error]="staleMessage"
-            retryText="Refresh"
-            [refreshing]="refreshing()"
-            (retry)="refreshClick.emit()"
-          />
-        </div>
+        <africanies-error-indicator
+          class="w-full"
+          [error]="staleMessage"
+          retryText="Refresh"
+          [refreshing]="refreshing()"
+          (retry)="refreshClick.emit()"
+        />
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink"
+        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
+        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+        [class.lg:overflow-auto]="stickyHeader()"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
         >
-          <thead
-            class="border-b border-border bg-background-welcome dark:border-white/10 dark:bg-ink-950"
-          >
+          <thead [class]="headerRowClass()">
             <tr>
               @if (isExpandable()) {
                 <th
@@ -18108,7 +18291,7 @@ class TableComponent {
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white 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 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface 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"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -18117,7 +18300,7 @@ class TableComponent {
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -18131,7 +18314,8 @@ class TableComponent {
                 <th
                   scope="col"
                   [class]="headerCellClass(col)"
-                  [style.width]="col.width ?? null"
+                  [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                 >
                   @if (headerTemplateFor(col.key); as headerTpl) {
                     <ng-container
@@ -18140,7 +18324,7 @@ class TableComponent {
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 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:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 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:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -18162,14 +18346,14 @@ class TableComponent {
             @switch (bodyKind()) {
               @case ('loading') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-loading-state [message]="loadingLabel()" />
                   </td>
                 </tr>
               }
               @case ('error') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-error-state
                       [message]="errorMessage()"
                       [refreshing]="refreshing()"
@@ -18180,7 +18364,7 @@ class TableComponent {
               }
               @case ('empty') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-empty-state
                       [message]="emptyMessage()"
                       [refreshing]="refreshing()"
@@ -18196,7 +18380,7 @@ class TableComponent {
                   <td [class]="expandBodyClass(i)">
                     <button
                       type="button"
-                      class="inline-flex size-8 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 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"
                       [attr.aria-label]="
                         isRowExpanded(row, i)
                           ? 'Collapse row details'
@@ -18215,7 +18399,8 @@ class TableComponent {
                 @for (col of columns(); track col.key) {
                   <td
                     [class]="bodyCellClass(col, i)"
-                    [style.width]="col.width ?? null"
+                    [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                   >
                     @if (templateFor(col.key); as tpl) {
                       <ng-container
@@ -18245,17 +18430,17 @@ class TableComponent {
                       [class.pointer-events-none]="!isRowExpanded(row, i)"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05]"
+                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
                       >
                         <dl
-                          class="m-0 grid gap-x-6 gap-y-3 px-3 py-3 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
+                          class="m-0 grid gap-x-6 gap-y-3 px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
                           [class.opacity-0]="!isRowExpanded(row, i)"
                           [class.opacity-100]="isRowExpanded(row, i)"
                         >
                           @for (detail of rowDetailDefs(); track detail.label()) {
                             <div class="min-w-0">
                               <dt
-                                class="m-0 text-caption font-medium text-neutral-500 dark:text-neutral-400"
+                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
                               >
                                 {{ detail.label() }}
                               </dt>
@@ -18280,6 +18465,18 @@ class TableComponent {
             }
           </tbody>
         </table>
+        @if (paginationLoading()) {
+          <div
+            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            data-testid="africanies-table-keep-rows-loading"
+            aria-hidden="true"
+          >
+            <africanies-loading-state
+              mode="inline"
+              [message]="loadingLabel()"
+            />
+          </div>
+        }
       </div>
 
       @if (meta(); as pager) {
@@ -18292,7 +18489,7 @@ class TableComponent {
         />
       }
     </div>
-  `, isInline: true, styles: [":host tr.africanies-table-row:hover>td{background-color:#eef2f6}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: EmptyStateComponent, selector: "africanies-empty-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: ErrorIndicatorComponent, selector: "africanies-error-indicator", inputs: ["error", "retryText", "refreshing", "refreshingText", "disabled"], outputs: ["retry"] }, { kind: "component", type: ErrorStateComponent, selector: "africanies-error-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: LoadingStateComponent, selector: "africanies-loading-state", inputs: ["message", "mode"] }, { kind: "component", type: PaginationComponent, selector: "africanies-pagination", inputs: ["meta", "disabled", "loading", "pageSizes"], outputs: ["pageChange", "sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: EmptyStateComponent, selector: "africanies-empty-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: ErrorIndicatorComponent, selector: "africanies-error-indicator", inputs: ["error", "retryText", "refreshing", "refreshingText", "disabled"], outputs: ["retry"] }, { kind: "component", type: ErrorStateComponent, selector: "africanies-error-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: LoadingStateComponent, selector: "africanies-loading-state", inputs: ["message", "mode"] }, { kind: "component", type: PaginationComponent, selector: "africanies-pagination", inputs: ["meta", "disabled", "loading", "pageSizes"], outputs: ["pageChange", "sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -18319,7 +18516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -18339,7 +18536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -18359,7 +18556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -18373,26 +18570,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       }
 
       @if (staleError(); as staleMessage) {
-        <div class="flex justify-end">
-          <africanies-error-indicator
-            class="max-w-[min(100%,20rem)]"
-            [error]="staleMessage"
-            retryText="Refresh"
-            [refreshing]="refreshing()"
-            (retry)="refreshClick.emit()"
-          />
-        </div>
+        <africanies-error-indicator
+          class="w-full"
+          [error]="staleMessage"
+          retryText="Refresh"
+          [refreshing]="refreshing()"
+          (retry)="refreshClick.emit()"
+        />
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink"
+        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
+        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+        [class.lg:overflow-auto]="stickyHeader()"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
         >
-          <thead
-            class="border-b border-border bg-background-welcome dark:border-white/10 dark:bg-ink-950"
-          >
+          <thead [class]="headerRowClass()">
             <tr>
               @if (isExpandable()) {
                 <th
@@ -18402,7 +18597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white 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 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface 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"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -18411,7 +18606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -18425,7 +18620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <th
                   scope="col"
                   [class]="headerCellClass(col)"
-                  [style.width]="col.width ?? null"
+                  [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                 >
                   @if (headerTemplateFor(col.key); as headerTpl) {
                     <ng-container
@@ -18434,7 +18630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 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:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 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:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -18456,14 +18652,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             @switch (bodyKind()) {
               @case ('loading') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-loading-state [message]="loadingLabel()" />
                   </td>
                 </tr>
               }
               @case ('error') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-error-state
                       [message]="errorMessage()"
                       [refreshing]="refreshing()"
@@ -18474,7 +18670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               }
               @case ('empty') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-empty-state
                       [message]="emptyMessage()"
                       [refreshing]="refreshing()"
@@ -18490,7 +18686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   <td [class]="expandBodyClass(i)">
                     <button
                       type="button"
-                      class="inline-flex size-8 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 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"
                       [attr.aria-label]="
                         isRowExpanded(row, i)
                           ? 'Collapse row details'
@@ -18509,7 +18705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 @for (col of columns(); track col.key) {
                   <td
                     [class]="bodyCellClass(col, i)"
-                    [style.width]="col.width ?? null"
+                    [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                   >
                     @if (templateFor(col.key); as tpl) {
                       <ng-container
@@ -18539,17 +18736,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                       [class.pointer-events-none]="!isRowExpanded(row, i)"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05]"
+                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
                       >
                         <dl
-                          class="m-0 grid gap-x-6 gap-y-3 px-3 py-3 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
+                          class="m-0 grid gap-x-6 gap-y-3 px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
                           [class.opacity-0]="!isRowExpanded(row, i)"
                           [class.opacity-100]="isRowExpanded(row, i)"
                         >
                           @for (detail of rowDetailDefs(); track detail.label()) {
                             <div class="min-w-0">
                               <dt
-                                class="m-0 text-caption font-medium text-neutral-500 dark:text-neutral-400"
+                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
                               >
                                 {{ detail.label() }}
                               </dt>
@@ -18574,6 +18771,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }
           </tbody>
         </table>
+        @if (paginationLoading()) {
+          <div
+            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            data-testid="africanies-table-keep-rows-loading"
+            aria-hidden="true"
+          >
+            <africanies-loading-state
+              mode="inline"
+              [message]="loadingLabel()"
+            />
+          </div>
+        }
       </div>
 
       @if (meta(); as pager) {
@@ -18586,8 +18795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         />
       }
     </div>
-  `, styles: [":host tr.africanies-table-row:hover>td{background-color:#eef2f6}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"] }]
-        }], propDecorators: { expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTrackBy", required: false }] }], rowExpandChange: [{ type: i0.Output, args: ["rowExpandChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], refreshLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshLabel", required: false }] }], refreshing: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshing", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCount", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exportLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportLabel", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], refreshClick: [{ type: i0.Output, args: ["refreshClick"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HeaderCellDefDirective), { isSignal: true }] }], rowDetailDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RowDetailDefDirective), { isSignal: true }] }] } });
+  `, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"] }]
+        }], propDecorators: { expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTrackBy", required: false }] }], rowExpandChange: [{ type: i0.Output, args: ["rowExpandChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], refreshLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshLabel", required: false }] }], refreshing: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshing", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCount", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exportLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportLabel", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], refreshClick: [{ type: i0.Output, args: ["refreshClick"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HeaderCellDefDirective), { isSignal: true }] }], rowDetailDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RowDetailDefDirective), { isSignal: true }] }] } });
 
 /**
  * Presentational table with template-based cells.
@@ -18733,7 +18942,7 @@ class StepperComponent {
         if (past) {
             return 'cursor-pointer text-ink hover:bg-background-welcome dark:text-white dark:hover:bg-white/10';
         }
-        return 'opacity-40 text-neutral-500 dark:text-neutral-400';
+        return 'opacity-40 text-neutral-600 dark:text-neutral-400';
     }
     stepBadgeClass(index) {
         const base = 'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-body-sm font-medium';
@@ -18741,7 +18950,7 @@ class StepperComponent {
             const c = this.modeColor.classes();
             return `${base} ${c.border} ${c.bg} text-white`;
         }
-        return `${base} border-border bg-white text-neutral-500 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
+        return `${base} border-control bg-surface text-neutral-600 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
     }
     canActivate(index) {
         if (index === this.activeIndex()) {
@@ -18766,7 +18975,7 @@ class StepperComponent {
     <div class="flex flex-col gap-5 text-ink dark:text-white">
       <div class="flex flex-col gap-2">
         <p
-          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400"
+          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
           Step {{ activeIndex() + 1 }} of {{ steps().length }}
           <span
@@ -18795,7 +19004,7 @@ class StepperComponent {
             <li class="flex min-w-0 shrink-0 items-center gap-1">
               <button
                 type="button"
-                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed"
+                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink disabled:cursor-not-allowed"
                 [class]="headerButtonClass(i)"
                 [attr.aria-current]="i === activeIndex() ? 'step' : null"
                 [disabled]="!canActivate(i)"
@@ -18834,7 +19043,7 @@ class StepperComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".africanies-step-rail{scrollbar-width:thin}.africanies-step-body{min-width:0;overflow-x:clip;padding-inline:2px;margin-inline:-2px}.africanies-step-pane{min-width:0;will-change:opacity,transform}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".africanies-step-rail{scrollbar-width:thin}.africanies-step-body{min-width:0;overflow-x:clip;padding-inline:4px;margin-inline:-4px}.africanies-step-pane{min-width:0;will-change:opacity,transform}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -18842,7 +19051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     <div class="flex flex-col gap-5 text-ink dark:text-white">
       <div class="flex flex-col gap-2">
         <p
-          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400"
+          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
           Step {{ activeIndex() + 1 }} of {{ steps().length }}
           <span
@@ -18871,7 +19080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             <li class="flex min-w-0 shrink-0 items-center gap-1">
               <button
                 type="button"
-                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed"
+                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink disabled:cursor-not-allowed"
                 [class]="headerButtonClass(i)"
                 [attr.aria-current]="i === activeIndex() ? 'step' : null"
                 [disabled]="!canActivate(i)"
@@ -18910,7 +19119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }
       </div>
     </div>
-  `, styles: [".africanies-step-rail{scrollbar-width:thin}.africanies-step-body{min-width:0;overflow-x:clip;padding-inline:2px;margin-inline:-2px}.africanies-step-pane{min-width:0;will-change:opacity,transform}\n"] }]
+  `, styles: [".africanies-step-rail{scrollbar-width:thin}.africanies-step-body{min-width:0;overflow-x:clip;padding-inline:4px;margin-inline:-4px}.africanies-step-pane{min-width:0;will-change:opacity,transform}\n"] }]
         }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: true }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], animateSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateSteps", required: false }] }], activeIndexChange: [{ type: i0.Output, args: ["activeIndexChange"] }], stepDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StepDefDirective), { isSignal: true }] }], stepPane: [{ type: i0.ViewChild, args: ['stepPane', { isSignal: true }] }] } });
 
 /**