@africanies/angular-web-sdk 0.1.5 → 0.1.7

package/.nx/cache/{18132311043100376919 → 14995846848874973576}/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, output, signal, Injector, DestroyRef, Injectable, numberAttribute, Directive, viewChild, contentChild, makeEnvironmentProviders, provideAppInitializer, model, forwardRef, InjectionToken, effect, afterNextRender, viewChildren, TemplateRef, contentChildren, untracked, runInInjectionContext, afterRenderEffect, NgModule } from '@angular/core';
+import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, output, signal, Injector, DestroyRef, Injectable, numberAttribute, Directive, viewChild, contentChild, model, makeEnvironmentProviders, provideAppInitializer, forwardRef, InjectionToken, effect, afterNextRender, viewChildren, TemplateRef, contentChildren, untracked, runInInjectionContext, afterRenderEffect, NgModule } from '@angular/core';
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 import { ModeColorService, ThemeService } from '@africanies/africanies-theme';
 import { copyToClipboard, AFRICANIES_HTTP_TOAST, FilterOptionsResolver, MODAL_SERVICE, DRAWER_SERVICE, ShippingModeService, resolveNotificationLinkForMode } from '@africanies/africanies-core';
 import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { Router, ActivatedRoute, RouterLink, NavigationEnd } from '@angular/router';
 import { EXPORT_DELIVERY_VENDORS, DELIVERY_VENDORS, normalizeDeliveryVendorForForm, isKnownDeliveryVendor, hasFilterParams, fromFilterParams, filterQueryKeys, toFilterParams, cloneFilterState, resetFilterState, PAGINATION_PAGE_SIZES, DEFAULT_PAGE_SIZE } from '@africanies/africanies-models';
 export { DEFAULT_FILTER_TRANSPORT, DEFAULT_PAGE_SIZE, FILTER_CONFIGS, FilterTransport, NOTIFICATION_PAGE_SIZE, PAGINATION_PAGE_SIZES, clearFilterField, cloneFilterState, emptyFilterState, filterQueryKeys, fromFilterParams, hasFilterParams, resetFilterState, resolveFilterTransport, shipmentTrackingItemFilterConfig, toFilterParams, trackShipmentsFilterConfig, updateShipmentsFilterConfig, usersFilterConfig } from '@africanies/africanies-models';
 import { HttpErrorResponse } from '@angular/common/http';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { Subject, take, isObservable, defer, throwError, of, from, map, timer, filter, startWith } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ActivatedRoute, Router, RouterLink, NavigationEnd } from '@angular/router';
 import { debounce, switchMap, distinctUntilChanged, tap, catchError } from 'rxjs/operators';
 import { NgTemplateOutlet, NgClass, DatePipe } from '@angular/common';
 
@@ -108,6 +108,9 @@ 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';
         }
@@ -270,7 +273,7 @@ class ToastItemComponent {
     ...(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 */
+        '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 */ []));
@@ -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()"
@@ -1303,6 +1306,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Clipboard copy control (`africanies-copy`).
  */
 
+/**
+ * Builds a {@link UrlTree} for an item’s `routerLink` / query / fragment.
+ *
+ * @param router - Consumer app router.
+ * @param item - Nav item with a `routerLink`.
+ * @returns UrlTree, or `null` when the item is not routed.
+ */
+function navItemUrlTree(router, item) {
+    if (item.routerLink == null) {
+        return null;
+    }
+    const commands = Array.isArray(item.routerLink)
+        ? [...item.routerLink]
+        : [item.routerLink];
+    return router.createUrlTree(commands, {
+        queryParams: item.queryParams,
+        fragment: item.fragment,
+    });
+}
+/**
+ * Whether the current router URL matches this item (cold load + navigations).
+ *
+ * @param router - Consumer app router.
+ * @param item - Nav item with a `routerLink`.
+ * @param options - Same shape as `RouterLinkActive` options.
+ * @returns True when the current URL matches the item.
+ */
+function isNavItemActive(router, item, options) {
+    const tree = navItemUrlTree(router, item);
+    if (!tree) {
+        return false;
+    }
+    return router.isActive(tree, options);
+}
+
+/**
+ * Whether a click should leave navigation to the browser (new tab, etc.).
+ * @param event - Mouse click from a routed nav control.
+ * @returns True when the host should not call `preventDefault` / navigate.
+ */
+function isModifiedClick(event) {
+    return (event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey);
+}
+/**
+ * Serialized href for a routed nav item (for `<a href>` without RouterLink).
+ * @param router - App router.
+ * @param item - Nav item with `routerLink`.
+ * @returns Path string, or `null` when the item is not routed.
+ */
+function navItemHref(router, item) {
+    const tree = navItemUrlTree(router, item);
+    return tree ? router.serializeUrl(tree) : null;
+}
+/**
+ * Navigate to a nav item without jumping the viewport to the top.
+ *
+ * Apps that enable `withInMemoryScrolling({ scrollPositionRestoration:
+ * 'enabled' })` scroll to `[0, 0]` on every forward navigation. That is wrong
+ * for in-page tabs/segments. Passing `{ scroll: 'manual' }` tells Angular's
+ * RouterScroller to skip scrolling for this navigation.
+ *
+ * @param router - App router.
+ * @param item - Nav item with `routerLink`.
+ * @param keepScroll - When true (default for tabs/segments), skip router scroll.
+ * @returns Navigation promise, or `null` when the item is not routed.
+ */
+function navigateNavItem(router, item, keepScroll = true) {
+    const tree = navItemUrlTree(router, item);
+    if (!tree) {
+        return null;
+    }
+    return router.navigateByUrl(tree, keepScroll ? { scroll: 'manual' } : undefined);
+}
+
 /**
  * Marks projected content as the custom trigger for {@link ActionMenuComponent}.
  *
@@ -1358,6 +1439,9 @@ const MENU_PANEL_POSITIONS = [
  * clipped by table `overflow`. Default trigger is a ghost ellipsis button;
  * project a custom control with {@link ActionMenuTriggerDirective}.
  *
+ * Items with {@link AfricaniesMenuItem.routerLink} render as anchors so users
+ * can right-click / modified-click to open in a new tab.
+ *
  * @example
  * ```html
  * <!-- Default icon trigger (table row) -->
@@ -1373,7 +1457,12 @@ const MENU_PANEL_POSITIONS = [
  * ```ts
  * rowActions(row: Shipment): AfricaniesMenuItem[] {
  *   return [
- *     { label: 'Open', icon: 'eye', onClick: () => this.open(row) },
+ *     {
+ *       label: 'Open',
+ *       icon: 'eye',
+ *       routerLink: ['/shipments', row.id],
+ *       onClick: () => this.open(row),
+ *     },
  *     { label: 'Edit', icon: 'edit', onClick: () => this.edit(row) },
  *     {
  *       label: 'Delete',
@@ -1387,6 +1476,7 @@ const MENU_PANEL_POSITIONS = [
  * ```
  */
 class ActionMenuComponent {
+    router = inject(Router);
     panelPositions = MENU_PANEL_POSITIONS;
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
@@ -1412,7 +1502,7 @@ class ActionMenuComponent {
     }
     itemClass(item, index) {
         const active = this.activeIndex() === index;
-        const base = 'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-body-sm transition-colors ' +
+        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';
         if (item.danger) {
@@ -1426,6 +1516,9 @@ class ActionMenuComponent {
                 ? 'bg-background-welcome dark:bg-white/10'
                 : 'hover:bg-background-welcome dark:hover:bg-white/10'));
     }
+    hrefFor(item) {
+        return navItemHref(this.router, item);
+    }
     onTriggerClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -1500,11 +1593,35 @@ class ActionMenuComponent {
     onOverlayDetach() {
         this.open.set(false);
     }
+    /**
+     * Primary click on a routed item: in-app activate via {@link onClick} or
+     * router. Modified clicks keep native link behaviour (new tab).
+     */
+    onRoutedItemClick(event, item) {
+        if (item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (isModifiedClick(event)) {
+            this.close();
+            return;
+        }
+        event.preventDefault();
+        this.activateItem(item);
+    }
     selectItem(item) {
         if (item.disabled) {
             return;
         }
-        item.onClick();
+        this.activateItem(item);
+    }
+    activateItem(item) {
+        if (item.onClick) {
+            item.onClick();
+        }
+        else if (item.routerLink != null) {
+            void navigateNavItem(this.router, item, false);
+        }
         this.close();
     }
     toggle() {
@@ -1606,20 +1723,41 @@ class ActionMenuComponent {
               role="separator"
             ></div>
           }
-          <button
-            type="button"
-            role="menuitem"
-            [id]="itemDomId(i)"
-            [class]="itemClass(item, i)"
-            [disabled]="!!item.disabled"
-            (click)="selectItem(item)"
-            (mouseenter)="activeIndex.set(i)"
-          >
-            @if (item.icon; as icon) {
-              <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
-            }
-            <span class="min-w-0 flex-1 truncate text-left">{{ item.label }}</span>
-          </button>
+          @if (item.routerLink !== null && item.routerLink !== undefined) {
+            <a
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [attr.href]="item.disabled ? null : hrefFor(item)"
+              [attr.aria-disabled]="item.disabled ? true : null"
+              (click)="onRoutedItemClick($event, item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </a>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [disabled]="!!item.disabled"
+              (click)="selectItem(item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </button>
+          }
         }
       </div>
     </ng-template>
@@ -1702,20 +1840,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               role="separator"
             ></div>
           }
-          <button
-            type="button"
-            role="menuitem"
-            [id]="itemDomId(i)"
-            [class]="itemClass(item, i)"
-            [disabled]="!!item.disabled"
-            (click)="selectItem(item)"
-            (mouseenter)="activeIndex.set(i)"
-          >
-            @if (item.icon; as icon) {
-              <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
-            }
-            <span class="min-w-0 flex-1 truncate text-left">{{ item.label }}</span>
-          </button>
+          @if (item.routerLink !== null && item.routerLink !== undefined) {
+            <a
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [attr.href]="item.disabled ? null : hrefFor(item)"
+              [attr.aria-disabled]="item.disabled ? true : null"
+              (click)="onRoutedItemClick($event, item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </a>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              [id]="itemDomId(i)"
+              [class]="itemClass(item, i)"
+              [disabled]="!!item.disabled"
+              (click)="selectItem(item)"
+              (mouseenter)="activeIndex.set(i)"
+            >
+              @if (item.icon; as icon) {
+                <africanies-icon [name]="icon" [size]="16" class="shrink-0" />
+              }
+              <span class="min-w-0 flex-1 truncate text-left">{{
+                item.label
+              }}</span>
+            </button>
+          }
         }
       </div>
     </ng-template>
@@ -1771,7 +1930,7 @@ class EmptyStateComponent {
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -1802,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()"
       >
@@ -2016,7 +2175,7 @@ class ErrorStateComponent {
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2047,7 +2206,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()"
       >
@@ -2384,6 +2543,128 @@ function isEmptyData(data) {
  * {@link AsyncStateComponent}) around tables and resource views.
  */
 
+/**
+ * Bordered expandable panel with animated fold — the pattern used on
+ * Manifest detail and Make Payment review.
+ *
+ * Parent owns open state via {@link open} (`model()` / `[(open)]`).
+ *
+ * @example
+ * ```html
+ * <africanies-accordion
+ *   title="Customer Information"
+ *   [open]="isOpen('customer')"
+ *   (openChange)="onOpenChange('customer', $event)"
+ * >
+ *   <dl>…</dl>
+ * </africanies-accordion>
+ * ```
+ */
+class AccordionComponent {
+    /** Plain-text header. Prefer projected `[africaniesAccordionTitle]` for rich titles. */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Whether the panel body is expanded. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Padding / chevron density. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    chevronSize = computed(() => this.size() === 'sm' ? 14 : 16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chevronSize" }] : /* istanbul ignore next */ []));
+    shellClass = computed(() => this.size() === 'sm'
+        ? 'rounded-lg border border-border dark:border-white/10'
+        : 'rounded-xl border border-border dark:border-white/10', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
+    triggerClass = computed(() => this.size() === 'sm'
+        ? 'flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-ink dark:text-white'
+        : 'flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-ink dark:text-white', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClass" }] : /* istanbul ignore next */ []));
+    bodyClass = computed(() => this.size() === 'sm'
+        ? 'border-t border-border px-3 py-2 dark:border-white/10'
+        : 'border-t border-border px-4 py-3 dark:border-white/10', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyClass" }] : /* istanbul ignore next */ []));
+    toggle() {
+        this.open.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AccordionComponent, isStandalone: true, selector: "africanies-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div [class]="shellClass()">
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [attr.aria-expanded]="open()"
+        (click)="toggle()"
+      >
+        <span class="min-w-0 flex-1 font-medium">
+          <ng-content select="[africaniesAccordionTitle]" />
+          @if (title()) {
+            {{ title() }}
+          }
+        </span>
+        <africanies-icon
+          name="chevron-down"
+          class="shrink-0 transition-transform duration-200"
+          [class.rotate-180]="open()"
+          [size]="chevronSize()"
+        />
+      </button>
+      <div
+        class="africanies-accordion-fold"
+        [class.africanies-accordion-fold-open]="open()"
+      >
+        <div class="africanies-accordion-fold-body">
+          <div [class]="bodyClass()">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [".africanies-accordion-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}.africanies-accordion-fold-open{grid-template-rows:1fr}.africanies-accordion-fold-body{min-height:0;overflow:hidden}@media(prefers-reduced-motion:reduce){.africanies-accordion-fold{transition:none}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'africanies-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent], host: {
+                        class: 'block',
+                    }, template: `
+    <div [class]="shellClass()">
+      <button
+        type="button"
+        [class]="triggerClass()"
+        [attr.aria-expanded]="open()"
+        (click)="toggle()"
+      >
+        <span class="min-w-0 flex-1 font-medium">
+          <ng-content select="[africaniesAccordionTitle]" />
+          @if (title()) {
+            {{ title() }}
+          }
+        </span>
+        <africanies-icon
+          name="chevron-down"
+          class="shrink-0 transition-transform duration-200"
+          [class.rotate-180]="open()"
+          [size]="chevronSize()"
+        />
+      </button>
+      <div
+        class="africanies-accordion-fold"
+        [class.africanies-accordion-fold-open]="open()"
+      >
+        <div class="africanies-accordion-fold-body">
+          <div [class]="bodyClass()">
+            <ng-content />
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: [".africanies-accordion-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}.africanies-accordion-fold-open{grid-template-rows:1fr}.africanies-accordion-fold-body{min-height:0;overflow:hidden}@media(prefers-reduced-motion:reduce){.africanies-accordion-fold{transition:none}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Expandable bordered panels (`africanies-accordion`).
+ */
+
 const DEFAULT_ICONS = {
     info: 'info-circle',
     success: 'check-circle',
@@ -3805,10 +4086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 /** 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 ' +
+const FORM_FIELD_CLASS = 'flex items-center w-full h-10 box-border rounded-md border border-border bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
     'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ink';
 /**
- * Error border — `!` so it wins over shell `border-neutral-300` /
+ * Error border — `!` so it wins over shell `border-border` /
  * `dark:border-white/25` (same specificity; those utilities sort later in the
  * generated CSS and otherwise paint over `border-danger`).
  *
@@ -4595,7 +4876,7 @@ class ModalService {
                 'africanies-overlay-backdrop',
                 'bg-ink/45',
                 'backdrop-blur-sm',
-                'dark:bg-ink/60',
+                'dark:bg-ink-950/60',
             ],
             panelClass: [
                 'africanies-modal-panel',
@@ -5409,7 +5690,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" />
@@ -5737,7 +6018,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" />
@@ -7332,7 +7613,7 @@ class DrawerService {
                 'africanies-overlay-backdrop',
                 'bg-ink/45',
                 'backdrop-blur-sm',
-                'dark:bg-ink/60',
+                'dark:bg-ink-950/60',
             ],
             panelClass: [
                 'africanies-drawer-panel',
@@ -9444,7 +9725,7 @@ 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
@@ -9514,7 +9795,7 @@ 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
@@ -9997,7 +10278,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10010,7 +10291,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -10065,7 +10346,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10134,7 +10415,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"
@@ -10297,7 +10578,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()"
@@ -10310,7 +10591,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()"
@@ -10365,7 +10646,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()"
@@ -10434,7 +10715,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()"
@@ -12925,84 +13206,6 @@ function finalizeLeaf(crumbs, path) {
     return crumbs;
 }
 
-/**
- * Builds a {@link UrlTree} for an item’s `routerLink` / query / fragment.
- *
- * @param router - Consumer app router.
- * @param item - Nav item with a `routerLink`.
- * @returns UrlTree, or `null` when the item is not routed.
- */
-function navItemUrlTree(router, item) {
-    if (item.routerLink == null) {
-        return null;
-    }
-    const commands = Array.isArray(item.routerLink)
-        ? [...item.routerLink]
-        : [item.routerLink];
-    return router.createUrlTree(commands, {
-        queryParams: item.queryParams,
-        fragment: item.fragment,
-    });
-}
-/**
- * Whether the current router URL matches this item (cold load + navigations).
- *
- * @param router - Consumer app router.
- * @param item - Nav item with a `routerLink`.
- * @param options - Same shape as `RouterLinkActive` options.
- * @returns True when the current URL matches the item.
- */
-function isNavItemActive(router, item, options) {
-    const tree = navItemUrlTree(router, item);
-    if (!tree) {
-        return false;
-    }
-    return router.isActive(tree, options);
-}
-
-/**
- * Whether a click should leave navigation to the browser (new tab, etc.).
- * @param event - Mouse click from a routed nav control.
- * @returns True when the host should not call `preventDefault` / navigate.
- */
-function isModifiedClick(event) {
-    return (event.button !== 0 ||
-        event.metaKey ||
-        event.ctrlKey ||
-        event.shiftKey ||
-        event.altKey);
-}
-/**
- * Serialized href for a routed nav item (for `<a href>` without RouterLink).
- * @param router - App router.
- * @param item - Nav item with `routerLink`.
- * @returns Path string, or `null` when the item is not routed.
- */
-function navItemHref(router, item) {
-    const tree = navItemUrlTree(router, item);
-    return tree ? router.serializeUrl(tree) : null;
-}
-/**
- * Navigate to a nav item without jumping the viewport to the top.
- *
- * Apps that enable `withInMemoryScrolling({ scrollPositionRestoration:
- * 'enabled' })` scroll to `[0, 0]` on every forward navigation. That is wrong
- * for in-page tabs/segments. Passing `{ scroll: 'manual' }` tells Angular's
- * RouterScroller to skip scrolling for this navigation.
- *
- * @param router - App router.
- * @param item - Nav item with `routerLink`.
- * @param keepScroll - When true (default for tabs/segments), skip router scroll.
- * @returns Navigation promise, or `null` when the item is not routed.
- */
-function navigateNavItem(router, item, keepScroll = true) {
-    const tree = navItemUrlTree(router, item);
-    if (!tree) {
-        return null;
-    }
-    return router.navigateByUrl(tree, keepScroll ? { scroll: 'manual' } : undefined);
-}
-
 const DEFAULT_LINK_ACTIVE$2 = {
     paths: 'exact',
     queryParams: 'exact',
@@ -13273,8 +13476,8 @@ class ShippingModeSwitchComponent {
     mode = this.shipping.mode;
     /** Host padding / divider — tighter when the rail is collapsed. */
     hostClass = computed(() => this.collapsed()
-        ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
-        : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10', /* @ts-ignore */
+        ? 'block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10'
+        : 'block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
@@ -13586,9 +13789,10 @@ 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`).
@@ -13743,11 +13947,14 @@ class SideNavComponent {
             (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 ` +
             'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white');
@@ -13757,7 +13964,7 @@ class SideNavComponent {
             'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
             (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 ` +
             'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white');
@@ -13902,13 +14109,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" }, 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-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=\"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-950 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 });
 }
 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"] }]
+                    }, 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-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=\"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-950 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"] }]
         }], 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 }] }] } });
 
 /**
@@ -14741,7 +14948,8 @@ class NotificationDrawerPanel {
     ...(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 */ []));
@@ -14749,7 +14957,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 */ []));
@@ -14783,7 +14991,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() ||
@@ -14977,11 +15191,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 {
@@ -14996,6 +15213,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);
         });
     }
@@ -15130,7 +15350,7 @@ class NotificationDrawerPanel {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -15361,7 +15581,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()"
               >
@@ -15795,9 +16015,14 @@ function hashString(value) {
     return hash;
 }
 
-const CACHE_KEY = 'africanies-header-weather-v3';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v4';
 const FETCH_MS = 4_000;
+const BROWSER_GEO_MS = 3_500;
+/** IP fallback — city string is often wrong (e.g. NG IPs labelled Lagos). */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
+/** Client reverse-geocode so the label matches the forecast coordinates. */
+const REVERSE_GEO_URL = 'https://api.bigdatacloud.net/data/reverse-geocode-client';
 const WEATHER_LABELS = {
     clear: 'Clear',
     cloudy: 'Cloudy',
@@ -15863,7 +16088,12 @@ function headerWeatherIcon(kind, hour) {
     return 'cloud-o';
 }
 /**
- * City-level forecast via IP geolocation + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
+ *
+ * Coordinates prefer the browser Geolocation API (accurate for travellers;
+ * may prompt once). Otherwise IP geo is used. The city label is reverse-
+ * geocoded from those coordinates — IP `city` strings are often wrong for
+ * Nigeria (many networks resolve as Lagos).
  *
  * 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
@@ -15883,14 +16113,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);
@@ -15902,7 +16130,8 @@ async function loadHeaderWeather(fetchFn) {
             return null;
         }
         const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-        const city = asCity(geo?.city);
+        const city = (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+            coords.fallbackCity;
         const weather = { kind, temperatureC, city };
         writeCache({ hour, kind, temperatureC, city });
         return weather;
@@ -15945,6 +16174,60 @@ function writeCache(value) {
         // Private mode / quota — greeting still works without cache.
     }
 }
+/**
+ * Prefer device coordinates when available (may prompt once); otherwise fall
+ * back to IP geo. IP city labels for Nigeria are often wrong — reverse
+ * geocoding from these coordinates still depends on accurate lat/lon.
+ */
+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,
+        fallbackCity: asCity(geo?.city),
+    };
+}
+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,
+        });
+    });
+}
+async function reverseGeocodeCity(fetchFn, latitude, longitude) {
+    const url = `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
+        `&longitude=${encodeURIComponent(String(longitude))}` +
+        `&localityLanguage=en`;
+    const payload = (await fetchJson(fetchFn, url));
+    return (asCity(payload?.city) ??
+        asCity(payload?.locality) ??
+        asCity(payload?.principalSubdivision));
+}
 function asNumber(value) {
     if (typeof value === 'number' && Number.isFinite(value)) {
         return value;
@@ -16166,7 +16449,7 @@ class AppShellHeaderComponent {
         this.notificationsDrawer
             .open({
             title: this.notificationsTitle(),
-            notifications: onLoadPage ? undefined : this.notifications(),
+            notifications: this.notifications(),
             onLoadPage,
             onMarkRead,
             onMarkAllRead,
@@ -16563,8 +16846,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();
@@ -17168,7 +17451,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)"
@@ -17189,7 +17472,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]="
@@ -17204,7 +17487,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)"
@@ -17269,7 +17552,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)"
@@ -17290,7 +17573,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]="
@@ -17305,7 +17588,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)"
@@ -17390,9 +17673,11 @@ 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.
  */
 class TableComponent {
+    modeColor = inject(ModeColorService);
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -17602,6 +17887,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.
@@ -17612,7 +17912,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';
@@ -17638,21 +17938,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.
@@ -17660,69 +17966,71 @@ 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 ' +
+        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'));
     }
     /**
      * 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.
+            return `${side} z-[2]`;
         }
-        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-white 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.
@@ -17825,7 +18133,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -17845,7 +18153,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -17865,7 +18173,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -17891,14 +18199,12 @@ class TableComponent {
       }
 
       <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="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink-surface"
       >
         <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
@@ -17962,14 +18268,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()"
@@ -17980,7 +18286,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()"
@@ -18048,7 +18354,7 @@ class TableComponent {
                         class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 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)"
                         >
@@ -18119,7 +18425,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()"
@@ -18139,7 +18445,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()"
@@ -18159,7 +18465,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()"
@@ -18185,14 +18491,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       }
 
       <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="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink-surface"
       >
         <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
@@ -18256,14 +18560,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()"
@@ -18274,7 +18578,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()"
@@ -18342,7 +18646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 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)"
                         >
@@ -18763,6 +19067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 const FEEDBACK = [
+    AccordionComponent,
     LoadingStateComponent,
     ErrorStateComponent,
     ErrorIndicatorComponent,
@@ -18772,7 +19077,7 @@ const FEEDBACK = [
     ChipComponent,
 ];
 /**
- * Async feedback states, inline alert, and status chips.
+ * Async feedback states, accordion panels, inline alert, and status chips.
  *
  * Toast stays out of this module — register {@link provideAfricaniesToasts} instead.
  *
@@ -18786,13 +19091,15 @@ const FEEDBACK = [
  */
 class AfricaniesFeedbackModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFeedbackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFeedbackModule, imports: [LoadingStateComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesFeedbackModule, imports: [AccordionComponent,
+            LoadingStateComponent,
             ErrorStateComponent,
             ErrorIndicatorComponent,
             EmptyStateComponent,
             AsyncStateComponent,
             AlertComponent,
-            ChipComponent], exports: [LoadingStateComponent,
+            ChipComponent], exports: [AccordionComponent,
+            LoadingStateComponent,
             ErrorStateComponent,
             ErrorIndicatorComponent,
             EmptyStateComponent,
@@ -19084,5 +19391,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PageHeaderComponent, PaginationComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, fileExtensionLabel, fileMatchesAccept, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
+export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, AccordionComponent, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PageHeaderComponent, PaginationComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, fileExtensionLabel, fileMatchesAccept, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
 //# sourceMappingURL=africanies-africanies-ui.mjs.map