@africanies/angular-web-sdk 0.1.9 → 0.1.11

package/dist/libs/africanies-ui/fesm2022/africanies-africanies-ui.mjs

@@ -2860,19 +2860,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Compact status / category label.
  *
  * Soft fills stay readable in dark mode (translucent accent tints, not
- * light-only subtle backgrounds).
+ * light-only subtle backgrounds). Pass {@link color} for a custom accent —
+ * text uses that color and the background is a faded mix of the same.
  *
  * @example
  * ```html
  * <africanies-chip variant="success">Delivered</africanies-chip>
- * <africanies-chip variant="import" icon="truck">In transit</africanies-chip>
+ * <africanies-chip variant="violet">Priority</africanies-chip>
+ * <africanies-chip color="#0f766e">Pay Later</africanies-chip>
  * <africanies-chip variant="warning" [removable]="true" (removed)="clear()">Pending</africanies-chip>
  * ```
  */
 class ChipComponent {
-    /** Semantic tone. Defaults to `neutral`. */
+    /** Semantic tone. Defaults to `neutral`. Ignored when {@link color} is set. */
     variant = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional CSS color (`#7c3aed`, `rgb(…)`, `oklch(…)`, …). When set, overrides
+     * {@link variant}: label uses the color and the fill is a faded mix of it.
+     */
+    color = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Padding / type scale. Defaults to `sm` (table / dense UI). */
     size = input('sm', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -2891,6 +2899,12 @@ class ChipComponent {
     removed = output();
     iconSize = computed(() => (this.size() === 'md' ? 14 : 12), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Trimmed custom accent, or `null` when using a named {@link variant}. */
+    customAccent = computed(() => {
+        const value = this.color()?.trim() ?? '';
+        return value.length > 0 ? value : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customAccent" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => {
         const base = 'inline-flex max-w-full items-center gap-1 rounded-md font-sans font-medium ' +
             'border border-transparent';
@@ -2902,11 +2916,15 @@ class ChipComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     /**
-     * Soft background + text per variant. Dark mode uses translucent accents so
-     * chips never wash out as near-white blobs.
-     * @returns Tailwind class string for the active variant.
+     * Soft background + text per variant, or the custom-color host class.
+     * Dark mode uses translucent accents so chips never wash out as near-white
+     * blobs.
+     * @returns Tailwind / host class string for the active tone.
      */
     toneClass() {
+        if (this.customAccent()) {
+            return 'africanies-chip--custom';
+        }
         switch (this.variant()) {
             case 'success':
             case 'export':
@@ -2917,6 +2935,16 @@ class ChipComponent {
                 return 'bg-warning-subtle text-warning-dark dark:bg-warning/15 dark:text-warning';
             case 'danger':
                 return 'bg-danger-subtle text-danger-dark dark:bg-danger/15 dark:text-danger';
+            case 'info':
+                return 'bg-info-subtle text-info dark:bg-info/20 dark:text-[#93c5fd]';
+            case 'violet':
+                return 'bg-violet-100 text-violet-800 dark:bg-violet-400/15 dark:text-violet-300';
+            case 'teal':
+                return 'bg-teal-100 text-teal-800 dark:bg-teal-400/15 dark:text-teal-300';
+            case 'rose':
+                return 'bg-rose-100 text-rose-800 dark:bg-rose-400/15 dark:text-rose-300';
+            case 'cyan':
+                return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-400/15 dark:text-cyan-300';
             default:
                 return 'bg-border/60 text-ink dark:bg-white/10 dark:text-neutral-200';
         }
@@ -2929,7 +2957,7 @@ class ChipComponent {
         this.removed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChipComponent, isStandalone: true, selector: "africanies-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { attributes: { "role": "status" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChipComponent, isStandalone: true, selector: "africanies-chip", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { attributes: { "role": "status" }, properties: { "class": "hostClass()", "style.--africanies-chip-accent": "customAccent()" } }, ngImport: i0, template: `
     @if (icon(); as iconName) {
       <africanies-icon [name]="iconName" [size]="iconSize()" class="shrink-0" />
     }
@@ -2944,20 +2972,15 @@ class ChipComponent {
         <africanies-icon name="close" [size]="12" />
       </button>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host.africanies-chip--custom{color:var(--africanies-chip-accent);background-color:color-mix(in srgb,var(--africanies-chip-accent) 14%,transparent);border-color:color-mix(in srgb,var(--africanies-chip-accent) 28%,transparent)}:host-context(.dark):host.africanies-chip--custom{color:color-mix(in srgb,var(--africanies-chip-accent) 68%,white);background-color:color-mix(in srgb,var(--africanies-chip-accent) 22%,transparent);border-color:color-mix(in srgb,var(--africanies-chip-accent) 40%,transparent)}\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: ChipComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'africanies-chip',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AfricaniesIconComponent],
-                    host: {
+            args: [{ selector: 'africanies-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent], host: {
                         '[class]': 'hostClass()',
+                        '[style.--africanies-chip-accent]': 'customAccent()',
                         role: 'status',
-                    },
-                    template: `
+                    }, template: `
     @if (icon(); as iconName) {
       <africanies-icon [name]="iconName" [size]="iconSize()" class="shrink-0" />
     }
@@ -2972,9 +2995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <africanies-icon name="close" [size]="12" />
       </button>
     }
-  `,
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+  `, styles: [":host.africanies-chip--custom{color:var(--africanies-chip-accent);background-color:color-mix(in srgb,var(--africanies-chip-accent) 14%,transparent);border-color:color-mix(in srgb,var(--africanies-chip-accent) 28%,transparent)}:host-context(.dark):host.africanies-chip--custom{color:color-mix(in srgb,var(--africanies-chip-accent) 68%,white);background-color:color-mix(in srgb,var(--africanies-chip-accent) 22%,transparent);border-color:color-mix(in srgb,var(--africanies-chip-accent) 40%,transparent)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
 /**
  * Compact status / category labels (`africanies-chip`).
@@ -12162,7 +12184,7 @@ class SearchComboboxComponent {
     } @else if (hint(); as h) {
       <p [id]="hintId" [class]="hintClass">{{ h }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: ChipComponent, selector: "africanies-chip", inputs: ["variant", "size", "icon", "removable", "removeLabel"], outputs: ["removed"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: TooltipComponent, selector: "africanies-tooltip", inputs: ["text", "placement", "icon", "ariaLabel", "disabled"] }, { kind: "directive", type: TooltipTriggerDirective, selector: "[africaniesTooltipTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: ChipComponent, selector: "africanies-chip", inputs: ["variant", "color", "size", "icon", "removable", "removeLabel"], outputs: ["removed"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: TooltipComponent, selector: "africanies-tooltip", inputs: ["text", "placement", "icon", "ariaLabel", "disabled"] }, { kind: "directive", type: TooltipTriggerDirective, selector: "[africaniesTooltipTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchComboboxComponent, decorators: [{
             type: Component,
@@ -13286,6 +13308,10 @@ const DEFAULT_LINK_ACTIVE$2 = {
 /**
  * Compact segmented control for view modes and filters.
  *
+ * Selected option uses a **solid brand pill** (white label) on a neutral track —
+ * same pattern as the portal shipping-mode toggle. With exactly two options the
+ * pill slides; with more options each selected chip fills in place.
+ *
  * ## Router mode (URL is source of truth)
  *
  * Set `routerLink` (and optional `queryParams`) on items. The selected pill
@@ -13335,15 +13361,16 @@ class SegmentComponent {
      */
     keepScroll = input(true, { ...(ngDevMode ? { debugName: "keepScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     url = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.router.url), startWith(this.router.url)), { initialValue: this.router.url });
-    segmentChrome = computed(() => 'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-body-sm transition-colors duration-150 no-underline', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "segmentChrome" }] : /* istanbul ignore next */ []));
-    selectedClass = computed(() => {
-        const colors = this.modeColor.classes();
-        return `${colors.soft} ${colors.text} shadow-sm font-semibold`;
+    /** Two equal options → portal-style sliding brand pill. */
+    useSlidingThumb = computed(() => this.items().length === 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useSlidingThumb" }] : /* istanbul ignore next */ []));
+    /** Index of the active option (0 / 1 for the sliding thumb). */
+    activeIndex = computed(() => {
+        const list = this.items();
+        const idx = list.findIndex((item) => this.isItemActive(item));
+        return idx < 0 ? 0 : idx;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedClass" }] : /* istanbul ignore next */ []));
-    idleClass = computed(() => 'font-medium text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "idleClass" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             this.url();
@@ -13368,6 +13395,56 @@ class SegmentComponent {
         }
         return this.activeId() === item.id;
     }
+    /**
+     * Sliding thumb fill. STN / SFN options keep their own brand color so the
+     * pill matches mode identity; other pairs follow the active theme primary.
+     */
+    thumbFillClass() {
+        const active = this.items()[this.activeIndex()];
+        return this.brandFillFor(active?.id ?? null);
+    }
+    /**
+     * Option chrome: sliding mode keeps labels transparent over the thumb;
+     * multi-option mode paints a solid selected chip in place.
+     *
+     * @param item - Option being rendered.
+     * @returns Class string for the control.
+     */
+    optionChrome(item) {
+        const base = 'relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-center text-body-sm no-underline transition-colors duration-150';
+        const active = this.isItemActive(item);
+        if (this.useSlidingThumb()) {
+            return (base +
+                ' w-full ' +
+                (active
+                    ? 'font-semibold text-white'
+                    : 'font-medium text-ink hover:text-ink dark:text-neutral-300 dark:hover:text-white'));
+        }
+        if (active) {
+            return `${base} font-semibold text-white shadow-sm ${this.brandFillFor(item.id)}`;
+        }
+        return (base +
+            ' font-medium text-ink hover:bg-white/70 hover:text-ink dark:text-neutral-300 dark:hover:bg-white/10 dark:hover:text-white');
+    }
+    /**
+     * Solid brand fill for a selected option / sliding thumb.
+     *
+     * Light + dark use the same SFN green / STN orange primaries so the control
+     * stays mode-identifiable on both surfaces (portal primary, not soft tint).
+     * Class strings are full literals so Tailwind keeps them.
+     *
+     * @param id - Option id (`stn` / `sfn` get fixed brands; else theme primary).
+     * @returns Background utility classes.
+     */
+    brandFillFor(id) {
+        if (id === 'stn') {
+            return 'bg-import dark:bg-import';
+        }
+        if (id === 'sfn') {
+            return 'bg-export dark:bg-export';
+        }
+        return this.modeColor.classes().activeFill;
+    }
     selectLocal(item) {
         if (item.disabled || item.routerLink != null) {
             return;
@@ -13394,18 +13471,31 @@ class SegmentComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SegmentComponent, isStandalone: true, selector: "africanies-segment", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, keepScroll: { classPropertyName: "keepScroll", publicName: "keepScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange" }, ngImport: i0, template: `
     <div
-      class="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-background-welcome p-1 dark:bg-ink-950"
+      class="relative inline-grid max-w-full rounded-lg bg-[#f0f2f5] p-1 dark:bg-[#2a2c31]"
       role="group"
       [attr.aria-label]="ariaLabel()"
+      [class.grid-cols-2]="useSlidingThumb()"
+      [class.inline-flex]="!useSlidingThumb()"
+      [class.flex-wrap]="!useSlidingThumb()"
+      [class.gap-1]="!useSlidingThumb()"
     >
+      @if (useSlidingThumb()) {
+        <div
+          class="africanies-segment-thumb pointer-events-none absolute top-1 bottom-1 left-1 rounded-md shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none"
+          [class]="thumbFillClass()"
+          [style.transform]="
+            activeIndex() === 1
+              ? 'translateX(calc(100% + 0.25rem))'
+              : 'translateX(0)'
+          "
+          aria-hidden="true"
+        ></div>
+      }
+
       @for (item of items(); track item.id) {
         @if (item.routerLink !== null && item.routerLink !== undefined) {
           <a
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
             [class.opacity-50]="item.disabled"
@@ -13422,11 +13512,7 @@ class SegmentComponent {
         } @else {
           <button
             type="button"
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [disabled]="!!item.disabled"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
@@ -13441,29 +13527,37 @@ class SegmentComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host .africanies-segment-thumb{width:calc((100% - .5rem)/2)}\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: SegmentComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'africanies-segment',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AfricaniesIconComponent],
-                    template: `
+            args: [{ selector: 'africanies-segment', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent], template: `
     <div
-      class="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-background-welcome p-1 dark:bg-ink-950"
+      class="relative inline-grid max-w-full rounded-lg bg-[#f0f2f5] p-1 dark:bg-[#2a2c31]"
       role="group"
       [attr.aria-label]="ariaLabel()"
+      [class.grid-cols-2]="useSlidingThumb()"
+      [class.inline-flex]="!useSlidingThumb()"
+      [class.flex-wrap]="!useSlidingThumb()"
+      [class.gap-1]="!useSlidingThumb()"
     >
+      @if (useSlidingThumb()) {
+        <div
+          class="africanies-segment-thumb pointer-events-none absolute top-1 bottom-1 left-1 rounded-md shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none"
+          [class]="thumbFillClass()"
+          [style.transform]="
+            activeIndex() === 1
+              ? 'translateX(calc(100% + 0.25rem))'
+              : 'translateX(0)'
+          "
+          aria-hidden="true"
+        ></div>
+      }
+
       @for (item of items(); track item.id) {
         @if (item.routerLink !== null && item.routerLink !== undefined) {
           <a
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
             [class.opacity-50]="item.disabled"
@@ -13480,11 +13574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         } @else {
           <button
             type="button"
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [disabled]="!!item.disabled"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
@@ -13499,10 +13589,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }
       }
     </div>
-  `,
-                }]
+  `, styles: [":host .africanies-segment-thumb{width:calc((100% - .5rem)/2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], 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 }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], keepScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepScroll", required: false }] }] } });
 
+const PANEL_OPEN_STORAGE_KEY = 'africanies-shipping-mode-panel-open';
+function readStoredPanelOpen() {
+    if (typeof localStorage === 'undefined') {
+        return true;
+    }
+    try {
+        const raw = localStorage.getItem(PANEL_OPEN_STORAGE_KEY);
+        if (raw === null) {
+            return true;
+        }
+        return raw !== '0' && raw !== 'false';
+    }
+    catch {
+        return true;
+    }
+}
+function writeStoredPanelOpen(open) {
+    if (typeof localStorage === 'undefined') {
+        return;
+    }
+    try {
+        localStorage.setItem(PANEL_OPEN_STORAGE_KEY, open ? '1' : '0');
+    }
+    catch {
+        // Private mode / quota — panel still toggles in-session.
+    }
+}
 /**
  * Shared globe + plane glyph for STN / SFN. STN paints it rotated 180°.
  *
@@ -13517,12 +13633,13 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
  * import orange; **from Nigeria** uses export green. Both tiles keep equal
  * chrome so unselected does not look like floating text.
  *
- * Project into `<africanies-side-nav>` with the `footer` attribute.
+ * Project into `<africanies-side-nav>` with the `pre-nav` attribute (above the
+ * nav list). `footer` still works for legacy placement under the list.
  *
  * @example
  * ```html
  * <africanies-side-nav [items]="nav" [(collapsed)]="collapsed">
- *   <africanies-shipping-mode-switch footer [collapsed]="collapsed()" />
+ *   <africanies-shipping-mode-switch pre-nav [collapsed]="collapsed()" />
  * </africanies-side-nav>
  * ```
  */
@@ -13543,13 +13660,32 @@ class ShippingModeSwitchComponent {
      * Icon-only stacked tiles when the side nav rail is collapsed.
      */
     collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, the mode tiles are visible. Persisted in `localStorage`.
+     * Two-way bindable for hosts that need to force-open (e.g. onboarding).
+     */
+    panelOpen = model(readStoredPanelOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
     /** Active mode from {@link ShippingModeService}. */
     mode = this.shipping.mode;
-    /** Host padding / divider — tighter when the rail is collapsed. */
+    modeChipLabel = computed(() => this.mode() === 'stn' ? 'STN' : 'SFN', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modeChipLabel" }] : /* istanbul ignore next */ []));
+    modeChipVariant = computed(() => (this.mode() === 'stn' ? 'import' : 'export'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modeChipVariant" }] : /* istanbul ignore next */ []));
+    /** Host padding / divider — sits above the nav list (`border-b`). */
     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-b border-border px-1.5 py-2 dark:border-white/10'
+        : 'block shrink-0 border-b border-border px-2 py-2.5 dark:border-white/10', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            writeStoredPanelOpen(this.panelOpen());
+        });
+    }
+    /** Show or hide the mode tiles. */
+    togglePanel() {
+        this.panelOpen.update((open) => !open);
+    }
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
      * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -13573,7 +13709,7 @@ class ShippingModeSwitchComponent {
         const compact = this.collapsed();
         const base = 'flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border text-center text-caption font-medium transition-colors ' +
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
-            (compact ? 'min-h-9 px-1 py-1.5' : 'min-h-[4.5rem] px-1.5 py-2');
+            (compact ? 'size-9 min-h-0 px-0 py-0' : 'min-h-[4.5rem] px-1.5 py-2');
         const idle = 'border-control bg-surface text-ink hover:bg-background-hover dark:border-white/15 dark:bg-ink-950 dark:text-white dark:hover:bg-white/10';
         if (option === 'stn') {
             return selected
@@ -13581,73 +13717,144 @@ class ShippingModeSwitchComponent {
                 : `${base} ${idle}`;
         }
         return selected
-            ? `${base} border-export-strong bg-export-strong text-white dark:border-export dark:bg-export`
+            ? `${base} border-export bg-export text-white dark:border-export dark:bg-export`
             : `${base} ${idle}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ShippingModeSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ShippingModeSwitchComponent, isStandalone: true, selector: "africanies-shipping-mode-switch", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
-    @if (!collapsed()) {
-      <p
-        class="m-0 mb-2 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
-      >
-        Shipping mode
-      </p>
-    }
-    <div
-      class="grid gap-1.5"
-      [class.grid-cols-1]="collapsed()"
-      [class.grid-cols-2]="!collapsed()"
-      role="radiogroup"
-      aria-label="Shipping mode"
-    >
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'stn'"
-        aria-label="Shipping to Nigeria"
-        [class]="cardClass('stn')"
-        (click)="select('stn')"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ShippingModeSwitchComponent, isStandalone: true, selector: "africanies-shipping-mode-switch", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, panelOpen: { classPropertyName: "panelOpen", publicName: "panelOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelOpen: "panelOpenChange" }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
+    @if (collapsed()) {
+      <!-- Narrow rail: icon tiles only — chip + chevron reads as cramped. -->
+      <div
+        class="grid grid-cols-1 gap-1.5"
+        role="radiogroup"
+        aria-label="Shipping mode"
       >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0 rotate-180"
-          aria-hidden="true"
-          focusable="false"
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'stn'"
+          aria-label="Shipping to Nigeria"
+          title="Shipping to Nigeria"
+          [class]="cardClass('stn')"
+          (click)="select('stn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>to Nigeria</span>
-          </span>
-        }
-      </button>
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'sfn'"
-        aria-label="Shipping from Nigeria"
-        [class]="cardClass('sfn')"
-        (click)="select('sfn')"
-      >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0"
-          aria-hidden="true"
-          focusable="false"
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0 rotate-180"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'sfn'"
+          aria-label="Shipping from Nigeria"
+          title="Shipping from Nigeria"
+          [class]="cardClass('sfn')"
+          (click)="select('sfn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>from Nigeria</span>
-          </span>
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    } @else {
+      <div class="mb-2 flex items-center gap-1.5">
+        <p
+          class="m-0 shrink-0 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
+        >
+          Shipping mode
+        </p>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
         }
-      </button>
-    </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <span class="min-w-0 flex-1" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          [attr.aria-label]="
+            panelOpen() ? 'Hide shipping modes' : 'Show shipping modes'
+          "
+          [attr.aria-expanded]="panelOpen()"
+          (click)="togglePanel()"
+        >
+          <africanies-icon
+            [name]="panelOpen() ? 'chevron-up' : 'chevron-down'"
+            [size]="14"
+          />
+        </button>
+      </div>
+
+      <div
+        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+        [style.grid-template-rows]="panelOpen() ? '1fr' : '0fr'"
+        [attr.aria-hidden]="!panelOpen()"
+        [class.pointer-events-none]="!panelOpen()"
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div
+            class="grid grid-cols-2 gap-1.5"
+            role="radiogroup"
+            aria-label="Shipping mode"
+          >
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'stn'"
+              aria-label="Shipping to Nigeria"
+              [class]="cardClass('stn')"
+              (click)="select('stn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0 rotate-180"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>to Nigeria</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'sfn'"
+              aria-label="Shipping from Nigeria"
+              [class]="cardClass('sfn')"
+              (click)="select('sfn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>from Nigeria</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: ChipComponent, selector: "africanies-chip", inputs: ["variant", "color", "size", "icon", "removable", "removeLabel"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ShippingModeSwitchComponent, decorators: [{
             type: Component,
@@ -13655,74 +13862,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'africanies-shipping-mode-switch',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AfricaniesIconComponent, ChipComponent],
                     host: {
                         '[class]': 'hostClass()',
                     },
                     template: `
-    @if (!collapsed()) {
-      <p
-        class="m-0 mb-2 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
-      >
-        Shipping mode
-      </p>
-    }
-    <div
-      class="grid gap-1.5"
-      [class.grid-cols-1]="collapsed()"
-      [class.grid-cols-2]="!collapsed()"
-      role="radiogroup"
-      aria-label="Shipping mode"
-    >
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'stn'"
-        aria-label="Shipping to Nigeria"
-        [class]="cardClass('stn')"
-        (click)="select('stn')"
+    @if (collapsed()) {
+      <!-- Narrow rail: icon tiles only — chip + chevron reads as cramped. -->
+      <div
+        class="grid grid-cols-1 gap-1.5"
+        role="radiogroup"
+        aria-label="Shipping mode"
       >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0 rotate-180"
-          aria-hidden="true"
-          focusable="false"
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'stn'"
+          aria-label="Shipping to Nigeria"
+          title="Shipping to Nigeria"
+          [class]="cardClass('stn')"
+          (click)="select('stn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>to Nigeria</span>
-          </span>
-        }
-      </button>
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'sfn'"
-        aria-label="Shipping from Nigeria"
-        [class]="cardClass('sfn')"
-        (click)="select('sfn')"
-      >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0"
-          aria-hidden="true"
-          focusable="false"
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0 rotate-180"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'sfn'"
+          aria-label="Shipping from Nigeria"
+          title="Shipping from Nigeria"
+          [class]="cardClass('sfn')"
+          (click)="select('sfn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>from Nigeria</span>
-          </span>
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    } @else {
+      <div class="mb-2 flex items-center gap-1.5">
+        <p
+          class="m-0 shrink-0 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
+        >
+          Shipping mode
+        </p>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
         }
-      </button>
-    </div>
+        <span class="min-w-0 flex-1" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          [attr.aria-label]="
+            panelOpen() ? 'Hide shipping modes' : 'Show shipping modes'
+          "
+          [attr.aria-expanded]="panelOpen()"
+          (click)="togglePanel()"
+        >
+          <africanies-icon
+            [name]="panelOpen() ? 'chevron-up' : 'chevron-down'"
+            [size]="14"
+          />
+        </button>
+      </div>
+
+      <div
+        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+        [style.grid-template-rows]="panelOpen() ? '1fr' : '0fr'"
+        [attr.aria-hidden]="!panelOpen()"
+        [class.pointer-events-none]="!panelOpen()"
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div
+            class="grid grid-cols-2 gap-1.5"
+            role="radiogroup"
+            aria-label="Shipping mode"
+          >
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'stn'"
+              aria-label="Shipping to Nigeria"
+              [class]="cardClass('stn')"
+              (click)="select('stn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0 rotate-180"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>to Nigeria</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'sfn'"
+              aria-label="Shipping from Nigeria"
+              [class]="cardClass('sfn')"
+              (click)="select('sfn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>from Nigeria</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], panelOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelOpen", required: false }] }, { type: i0.Output, args: ["panelOpenChange"] }] } });
 
 /**
  * Side-nav shipping mode switcher (`africanies-shipping-mode-switch`).
@@ -13869,7 +14148,9 @@ const DEFAULT_LINK_ACTIVE$1 = {
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
  * Clicking a parent only opens/closes the branch (no route change). When any
  * branch is open, a sticky collapse-all control sits above the list (top right).
- * The rail expand/collapse control stays pinned in the logo header.
+ * The rail expand/collapse control stays pinned in the logo header. Project
+ * chrome above the scrollable list with `pre-nav` (e.g. shipping modes) or
+ * below with `footer`.
  * **Collapsed rail:** clicking a parent expands the rail, opens the
  * branch, and activates the first enabled child (router or `activeId`).
  *
@@ -14185,13 +14466,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 min-h-0" }, ngImport: i0, template: "    <aside\n      class=\"relative flex h-full min-h-0 flex-col overflow-visible border-r border-border bg-surface transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b border-border bg-surface py-3 dark:border-white/10 dark:bg-ink-950\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-10 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              class=\"absolute right-0 top-0 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SideNavComponent, isStandalone: true, selector: "africanies-side-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandParents: { classPropertyName: "expandParents", publicName: "expandParents", isSignal: true, isRequired: false, transformFunction: null }, expandBranchesByDefault: { classPropertyName: "expandBranchesByDefault", publicName: "expandBranchesByDefault", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoMiniSrc: { classPropertyName: "logoMiniSrc", publicName: "logoMiniSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", activeId: "activeIdChange" }, host: { classAttribute: "relative z-20 block h-full min-h-0" }, ngImport: i0, template: "    <aside\n      class=\"relative flex h-full min-h-0 flex-col overflow-visible border-r border-border bg-surface transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b border-border bg-surface py-3 dark:border-white/10 dark:bg-ink-950\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <ng-content select=\"[pre-nav]\" />\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-20 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              class=\"absolute -right-2 -top-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-ink-surface dark:hover:text-white\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'africanies-side-nav', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent, RouterLink, NgTemplateOutlet], host: {
                         class: 'relative z-20 block h-full min-h-0',
-                    }, template: "    <aside\n      class=\"relative flex h-full min-h-0 flex-col overflow-visible border-r border-border bg-surface transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b border-border bg-surface py-3 dark:border-white/10 dark:bg-ink-950\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-10 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              class=\"absolute right-0 top-0 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
+                    }, template: "    <aside\n      class=\"relative flex h-full min-h-0 flex-col overflow-visible border-r border-border bg-surface transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"sticky top-0 z-20 flex shrink-0 items-center gap-2 border-b border-border bg-surface py-3 dark:border-white/10 dark:bg-ink-950\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          data-onboarding=\"nav-collapse\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <ng-content select=\"[pre-nav]\" />\n\n      <nav\n        class=\"africanies-overlay-scroll relative min-h-0 flex-1 overflow-y-auto overflow-x-visible px-3 py-3\"\n      >\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <!-- Zero-height sticky host: keeps the control pinned without reserving a row. -->\n          <div class=\"sticky top-0 z-20 h-0 overflow-visible\">\n            <button\n              type=\"button\"\n              class=\"absolute -right-2 -top-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-surface text-neutral-600 shadow-sm ring-1 ring-border-strong transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-ink-surface dark:hover:text-white\"\n              data-onboarding=\"nav-branches-collapse\"\n              aria-label=\"Collapse all\"\n              (click)=\"collapseAllBranches()\"\n            >\n              <africanies-icon name=\"compress\" [size]=\"14\" />\n            </button>\n          </div>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible last:mb-0\"\n              [class.mb-3]=\"!collapsed() && !item.children?.length\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], expandParents: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandParents", required: false }] }], expandBranchesByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBranchesByDefault", required: false }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoMiniSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoMiniSrc", required: false }] }] } });
 
 /**
@@ -14931,28 +15212,32 @@ class AvatarMenuComponent {
     showCaret = input(true, { ...(ngDevMode ? { debugName: "showCaret" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AvatarMenuComponent, isStandalone: true, selector: "africanies-avatar-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCaret: { classPropertyName: "showCaret", publicName: "showCaret", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <africanies-action-menu
-      [items]="menuItems()"
-      [ariaLabel]="ariaLabel()"
-      [disabled]="disabled()"
-    >
-      <button
-        type="button"
-        africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
-        [attr.aria-label]="ariaLabel()"
+    @if (menuItems().length > 0) {
+      <africanies-action-menu
+        [items]="menuItems()"
+        [ariaLabel]="ariaLabel()"
+        [disabled]="disabled()"
       >
-        <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
-        @if (showCaret()) {
-          <africanies-icon
-            name="chevron-down"
-            [size]="14"
-            class="shrink-0 text-neutral-600 dark:text-neutral-400"
-            aria-hidden="true"
-          />
-        }
-      </button>
-    </africanies-action-menu>
+        <button
+          type="button"
+          africaniesActionMenuTrigger
+          class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+          [attr.aria-label]="ariaLabel()"
+        >
+          <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+          @if (showCaret()) {
+            <africanies-icon
+              name="chevron-down"
+              [size]="14"
+              class="shrink-0 text-neutral-600 dark:text-neutral-400"
+              aria-hidden="true"
+            />
+          }
+        </button>
+      </africanies-action-menu>
+    } @else {
+      <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+    }
   `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "africanies-avatar", inputs: ["name", "src", "alt", "size"] }, { kind: "component", type: ActionMenuComponent, selector: "africanies-action-menu", inputs: ["items", "ariaLabel", "disabled"] }, { kind: "directive", type: ActionMenuTriggerDirective, selector: "[africaniesActionMenuTrigger]" }, { 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: AvatarMenuComponent, decorators: [{
@@ -14968,28 +15253,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AfricaniesIconComponent,
                     ],
                     template: `
-    <africanies-action-menu
-      [items]="menuItems()"
-      [ariaLabel]="ariaLabel()"
-      [disabled]="disabled()"
-    >
-      <button
-        type="button"
-        africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
-        [attr.aria-label]="ariaLabel()"
+    @if (menuItems().length > 0) {
+      <africanies-action-menu
+        [items]="menuItems()"
+        [ariaLabel]="ariaLabel()"
+        [disabled]="disabled()"
       >
-        <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
-        @if (showCaret()) {
-          <africanies-icon
-            name="chevron-down"
-            [size]="14"
-            class="shrink-0 text-neutral-600 dark:text-neutral-400"
-            aria-hidden="true"
-          />
-        }
-      </button>
-    </africanies-action-menu>
+        <button
+          type="button"
+          africaniesActionMenuTrigger
+          class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+          [attr.aria-label]="ariaLabel()"
+        >
+          <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+          @if (showCaret()) {
+            <africanies-icon
+              name="chevron-down"
+              [size]="14"
+              class="shrink-0 text-neutral-600 dark:text-neutral-400"
+              aria-hidden="true"
+            />
+          }
+        </button>
+      </africanies-action-menu>
+    } @else {
+      <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+    }
   `,
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCaret: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaret", required: false }] }] } });
@@ -16091,12 +16380,14 @@ function hashString(value) {
     return hash;
 }
 
-/** Bump when cache shape or lookup strategy changes. */
-const CACHE_KEY = 'africanies-header-weather-v5';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v7';
 const FETCH_MS = 4_000;
 const BROWSER_GEO_MS = 3_500;
-/** IP fallback for coordinates only — city strings are often wrong. */
+/** IP fallback — city string is used only when reverse-geocode is empty. */
 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',
@@ -16166,12 +16457,11 @@ function headerWeatherIcon(kind, hour) {
     return 'cloud-o';
 }
 /**
- * Local forecast via browser / IP coordinates + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
  *
- * Coordinates prefer the browser Geolocation API (may prompt once).
- * Otherwise IP geo is used for lat/lon only — city labels are not shown
- * because IP and reverse-geocode cities are often wrong (e.g. NG IPs
- * labelled Lagos).
+ * 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, with the IP city as a fallback.
  *
  * 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
@@ -16208,8 +16498,10 @@ async function loadHeaderWeather(fetchFn) {
             return null;
         }
         const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-        const weather = { kind, temperatureC };
-        writeCache({ hour, kind, temperatureC });
+        const city = (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+            coords.fallbackCity;
+        const weather = { kind, temperatureC, city };
+        writeCache({ hour, kind, temperatureC, city });
         return weather;
     }
     catch {
@@ -16232,9 +16524,16 @@ function readCache(hour) {
         if (parsed.hour !== hour || !parsed.kind) {
             return null;
         }
+        // City-less entries (e.g. browser geo + failed reverse) used to stick for
+        // the hour — treat them as a miss so we can recover the location label.
+        const city = asCity(parsed.city);
+        if (!city) {
+            return null;
+        }
         return {
             kind: parsed.kind,
             temperatureC: parsed.temperatureC,
+            city,
         };
     }
     catch {
@@ -16251,20 +16550,31 @@ function writeCache(value) {
 }
 /**
  * Prefer device coordinates when available (may prompt once); otherwise fall
- * back to IP lat/lon for the forecast only.
+ * back to IP geo. IP is always fetched in parallel so its city can backfill
+ * the label when reverse-geocode is empty (browser geo has no city string).
  */
 async function resolveCoordinates(fetchFn) {
-    const browser = await tryBrowserGeolocation();
+    const [browser, ipGeo] = await Promise.all([
+        tryBrowserGeolocation(),
+        fetchIpGeo(fetchFn),
+    ]);
+    const ipCity = asCity(ipGeo?.city);
     if (browser) {
-        return browser;
+        return { ...browser, fallbackCity: ipCity };
     }
-    const geo = (await fetchJson(fetchFn, GEO_URL));
-    const latitude = asNumber(geo?.latitude);
-    const longitude = asNumber(geo?.longitude);
+    const latitude = asNumber(ipGeo?.latitude);
+    const longitude = asNumber(ipGeo?.longitude);
     if (latitude === null || longitude === null) {
         return null;
     }
-    return { latitude, longitude };
+    return {
+        latitude,
+        longitude,
+        fallbackCity: ipCity,
+    };
+}
+async function fetchIpGeo(fetchFn) {
+    return (await fetchJson(fetchFn, GEO_URL));
 }
 async function tryBrowserGeolocation() {
     if (typeof navigator === 'undefined' ||
@@ -16289,6 +16599,15 @@ async function tryBrowserGeolocation() {
         });
     });
 }
+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;
@@ -16299,6 +16618,16 @@ function asNumber(value) {
     }
     return null;
 }
+function asCity(value) {
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed || trimmed.toLowerCase() === 'n/a') {
+        return undefined;
+    }
+    return trimmed;
+}
 async function fetchJson(fetchFn, url) {
     const controller = new AbortController();
     const timer = setTimeout(() => controller.abort(), FETCH_MS);
@@ -16442,6 +16771,11 @@ class AppShellHeaderComponent {
         return headerWeatherLabel(forecast.kind, this.now().getHours());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weatherCondition" }] : /* istanbul ignore next */ []));
+    weatherCity = computed(() => {
+        const city = this.weather()?.city?.trim();
+        return city || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weatherCity" }] : /* istanbul ignore next */ []));
     weatherAriaLabel = computed(() => {
         const forecast = this.weather();
         if (!forecast) {
@@ -16449,9 +16783,11 @@ class AppShellHeaderComponent {
         }
         const condition = this.weatherCondition().toLowerCase();
         const temp = this.weatherTemp();
-        return temp === null
-            ? `Weather: ${condition}`
-            : `Weather: ${temp} degrees Celsius, ${condition}`;
+        const city = this.weatherCity();
+        const degrees = temp === null
+            ? condition
+            : `${temp} degrees Celsius, ${condition}`;
+        return city ? `Weather in ${city}: ${degrees}` : `Weather: ${degrees}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weatherAriaLabel" }] : /* istanbul ignore next */ []));
     unreadCount = computed(() => (this.notifications() ?? []).filter((n) => !n.read).length, /* @ts-ignore */
@@ -16558,7 +16894,9 @@ class AppShellHeaderComponent {
                 <span
                   class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                 >
-                  {{ weatherCondition() }}
+                  {{ weatherCondition() }}@if (weatherCity(); as city) {
+                    · {{ city }}
+                  }
                 </span>
               </div>
             }
@@ -16617,18 +16955,26 @@ class AppShellHeaderComponent {
             }
 
             @if (userName()) {
-              <africanies-avatar-menu
-                [name]="userName()!"
-                [src]="userAvatarSrc()"
-                [menuItems]="userMenuItems()"
-                [size]="'md'"
-              />
+              @if (userMenuItems().length > 0) {
+                <africanies-avatar-menu
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  [menuItems]="userMenuItems()"
+                  [size]="'md'"
+                />
+              } @else {
+                <africanies-avatar
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  size="md"
+                />
+              }
             }
           </div>
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: AvatarMenuComponent, selector: "africanies-avatar-menu", inputs: ["name", "src", "menuItems", "size", "ariaLabel", "disabled", "showCaret"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: AvatarComponent, selector: "africanies-avatar", inputs: ["name", "src", "alt", "size"] }, { kind: "component", type: AvatarMenuComponent, selector: "africanies-avatar-menu", inputs: ["name", "src", "menuItems", "size", "ariaLabel", "disabled", "showCaret"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AppShellHeaderComponent, decorators: [{
             type: Component,
@@ -16636,7 +16982,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'africanies-app-shell-header',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AfricaniesIconComponent, AvatarMenuComponent, DatePipe],
+                    imports: [
+                        AfricaniesIconComponent,
+                        AvatarComponent,
+                        AvatarMenuComponent,
+                        DatePipe,
+                    ],
                     template: `
     <div
       class="flex min-w-0 items-center gap-2 px-3 py-2.5 sm:gap-4 sm:px-6 sm:py-3"
@@ -16685,7 +17036,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <span
                   class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                 >
-                  {{ weatherCondition() }}
+                  {{ weatherCondition() }}@if (weatherCity(); as city) {
+                    · {{ city }}
+                  }
                 </span>
               </div>
             }
@@ -16744,12 +17097,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }
 
             @if (userName()) {
-              <africanies-avatar-menu
-                [name]="userName()!"
-                [src]="userAvatarSrc()"
-                [menuItems]="userMenuItems()"
-                [size]="'md'"
-              />
+              @if (userMenuItems().length > 0) {
+                <africanies-avatar-menu
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  [menuItems]="userMenuItems()"
+                  [size]="'md'"
+                />
+              } @else {
+                <africanies-avatar
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  size="md"
+                />
+              }
             }
           </div>
         }
@@ -17659,8 +18020,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * `<ng-template africaniesCellDef="key">` templates. Columns without a matching
  * template fall back to rendering `row[key]` as plain text.
  *
- * Optional toolbar: top-left **Refresh** (`showRefresh` → {@link refreshClick}).
- * Hidden while the body shows empty or error — those states expose Retry instead.
+ * Optional toolbar: top-left **shipping mode** segment on its own row above
+ * Refresh / Filter / Export (on by default; `[showShippingMode]="false"` to
+ * hide) and **Refresh** (`showRefresh` →
+ * {@link refreshClick}). Refresh is hidden while
+ * the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
  * spins (do not swap to a blocking loader). Use {@link loading} when the page
  * of data is changing (pagination / size): rows stay on screen, a keep-rows
@@ -17689,8 +18053,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * and never reorder local rows.
  *
  * **Expandable rows:** project `<ng-template africaniesRowDetail="Label" let-row>`
- * templates. A leading chevron column appears; the expanded panel renders each
- * label with its template value in a responsive grid.
+ * templates. A leading chevron column appears; the expanded panel sticks to the
+ * scrollport width (so it does not scroll horizontally with the columns) and
+ * lays out label/value pairs in a wrapping auto-fill grid.
  *
  * @typeParam T - Row record shape.
  *
@@ -17733,7 +18098,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * page scroll is unchanged.
  */
 class TableComponent {
-    modeColor = inject(ModeColorService);
+    destroyRef = inject(DestroyRef);
+    shipping = inject(ShippingModeService);
+    /** Local STN / SFN segment options for {@link showShippingMode}. */
+    shippingModeItems = [
+        { id: 'stn', label: 'Shipping to Nigeria' },
+        { id: 'sfn', label: 'Shipping from Nigeria' },
+    ];
+    /**
+     * Segment selection mirror of {@link ShippingModeService.mode}. Kept local
+     * so a denied {@link ShippingModeService.requestModeChange} can snap the
+     * pills back when the service mode did not change.
+     */
+    shippingModeActiveId = signal('sfn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shippingModeActiveId" }] : /* istanbul ignore next */ []));
+    /** Scrollport that owns horizontal overflow for the main grid. */
+    scrollport = viewChild('scrollport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollport" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible width of {@link scrollport}. Applied to the expand panel so
+     * details stay within the viewport and do not scroll with the columns.
+     */
+    scrollportWidthPx = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollportWidthPx" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.shippingModeActiveId.set(this.shipping.mode());
+        });
+        afterNextRender(() => {
+            const el = this.scrollport()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            const sync = () => {
+                this.scrollportWidthPx.set(el.clientWidth);
+            };
+            sync();
+            const observer = new ResizeObserver(sync);
+            observer.observe(el);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -17768,6 +18173,13 @@ class TableComponent {
      */
     sort = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    /**
+     * Show the Shipping to / from Nigeria segment above the table (top-left).
+     * On by default; set `[showShippingMode]="false"` to hide (e.g. modals).
+     * Writes through {@link ShippingModeService.requestModeChange} so feature
+     * guards still run.
+     */
+    showShippingMode = input(true, { ...(ngDevMode ? { debugName: "showShippingMode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Show a Refresh button above the table (top-left) once rows are on screen.
      * Hidden during in-grid empty/error — those use Retry in the body. Host refetches
@@ -17899,6 +18311,26 @@ class TableComponent {
     /** Top-left Refresh — only when rows are on screen (empty/error use in-body Retry). */
     showToolbarRefresh = computed(() => this.showRefresh() && this.bodyKind() === 'rows', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showToolbarRefresh" }] : /* istanbul ignore next */ []));
+    /**
+     * Applies a shipping-mode segment selection through
+     * {@link ShippingModeService.requestModeChange}.
+     *
+     * @param id - Segment id (`stn` / `sfn`) or null.
+     */
+    onShippingModeChange(id) {
+        if (id !== 'stn' && id !== 'sfn') {
+            return;
+        }
+        this.shippingModeActiveId.set(id);
+        if (id === this.shipping.mode()) {
+            return;
+        }
+        this.shipping.requestModeChange(id).subscribe((ok) => {
+            if (!ok) {
+                this.shippingModeActiveId.set(this.shipping.mode());
+            }
+        });
+    }
     visibleRowIds = computed(() => this.rowList().map((row, index) => this.rowId(row, index)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleRowIds" }] : /* istanbul ignore next */ []));
     someRowsExpanded = computed(() => {
@@ -17958,11 +18390,12 @@ class TableComponent {
         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.
+     * Opaque header fill (sticky-safe). Neutral chrome — not mode-accented.
+     * Light `#f0f2f5` / dark elevated ink surface.
+     * @returns Background utility classes.
      */
     headerSoftClass() {
-        return this.modeColor.classes().softSolid;
+        return 'bg-[#f0f2f5] dark:bg-[#2a2c31]';
     }
     /**
      * Body row classes — row marker for hover styles, plus hide cell borders on
@@ -18033,7 +18466,7 @@ class TableComponent {
             ? '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 ' +
+            'border-border whitespace-normal wrap-break-word px-[1.125rem] py-4 font-medium text-neutral-500 dark:border-white/10 dark:text-neutral-400 ' +
             this.headerSoftClass() +
             ' ' +
             this.stickySurfaceClass(col, 'head') +
@@ -18198,68 +18631,86 @@ class TableComponent {
         this.sortChange.emit({ key, direction });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableComponent, isStandalone: true, selector: "africanies-table", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowTrackBy: { classPropertyName: "rowTrackBy", publicName: "rowTrackBy", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, refreshLabel: { classPropertyName: "refreshLabel", publicName: "refreshLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshing: { classPropertyName: "refreshing", publicName: "refreshing", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterCount: { classPropertyName: "filterCount", publicName: "filterCount", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, exportLabel: { classPropertyName: "exportLabel", publicName: "exportLabel", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowExpandChange: "rowExpandChange", sortChange: "sortChange", refreshClick: "refreshClick", filterClick: "filterClick", exportClick: "exportClick", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block w-full min-w-0" }, queries: [{ propertyName: "cellDefs", predicate: CellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: HeaderCellDefDirective, isSignal: true }, { propertyName: "rowDetailDefs", predicate: RowDetailDefDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: TableComponent, isStandalone: true, selector: "africanies-table", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowTrackBy: { classPropertyName: "rowTrackBy", publicName: "rowTrackBy", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, showShippingMode: { classPropertyName: "showShippingMode", publicName: "showShippingMode", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, refreshLabel: { classPropertyName: "refreshLabel", publicName: "refreshLabel", isSignal: true, isRequired: false, transformFunction: null }, refreshing: { classPropertyName: "refreshing", publicName: "refreshing", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterCount: { classPropertyName: "filterCount", publicName: "filterCount", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, exportLabel: { classPropertyName: "exportLabel", publicName: "exportLabel", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowExpandChange: "rowExpandChange", sortChange: "sortChange", refreshClick: "refreshClick", filterClick: "filterClick", exportClick: "exportClick", pageChange: "pageChange", sizeChange: "sizeChange" }, host: { classAttribute: "block w-full min-w-0" }, queries: [{ propertyName: "cellDefs", predicate: CellDefDirective, isSignal: true }, { propertyName: "headerCellDefs", predicate: HeaderCellDefDirective, isSignal: true }, { propertyName: "rowDetailDefs", predicate: RowDetailDefDirective, isSignal: true }], viewQueries: [{ propertyName: "scrollport", first: true, predicate: ["scrollport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       class="flex w-full min-w-0 flex-col gap-3"
       [attr.aria-busy]="loading() || refreshing() || null"
     >
-      @if (showRefresh() || showFilter() || showExport()) {
-        <div class="flex items-center justify-between gap-2">
-          <div class="flex items-center gap-2">
-            @if (showToolbarRefresh()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [disabled]="loading() || refreshing()"
-                [attr.aria-label]="refreshLabel()"
-                (click)="refreshClick.emit()"
-              >
-                <africanies-icon
-                  name="refresh"
-                  [size]="16"
-                  [class]="refreshing() ? 'animate-spin' : ''"
-                />
-                {{ refreshLabel() }}
-              </button>
-            }
-          </div>
-          <div class="flex items-center gap-2">
-            @if (showFilter()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="filterLabel()"
-                (click)="filterClick.emit()"
-              >
-                <africanies-icon name="filter" [size]="16" />
-                {{ filterLabel() }}
-                @if (filterCount() > 0) {
-                  <span
-                    class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+      @if (
+        showShippingMode() ||
+        showRefresh() ||
+        showFilter() ||
+        showExport()
+      ) {
+        <div class="flex w-full min-w-0 flex-col gap-3">
+          @if (showShippingMode()) {
+            <africanies-segment
+              class="min-w-0 self-start"
+              [items]="shippingModeItems"
+              [activeId]="shippingModeActiveId()"
+              ariaLabel="Shipping mode"
+              (activeIdChange)="onShippingModeChange($event)"
+            />
+          }
+          @if (showToolbarRefresh() || showFilter() || showExport()) {
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="flex min-w-0 flex-wrap items-center gap-2">
+                @if (showToolbarRefresh()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [disabled]="loading() || refreshing()"
+                    [attr.aria-label]="refreshLabel()"
+                    (click)="refreshClick.emit()"
                   >
-                    {{ filterCount() }}
-                  </span>
+                    <africanies-icon
+                      name="refresh"
+                      [size]="16"
+                      [class]="refreshing() ? 'animate-spin' : ''"
+                    />
+                    {{ refreshLabel() }}
+                  </button>
                 }
-              </button>
-            }
-            @if (showExport()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="exportLabel()"
-                (click)="exportClick.emit()"
-              >
-                <africanies-icon name="download" [size]="16" />
-                {{ exportLabel() }}
-              </button>
-            }
-          </div>
+              </div>
+              <div class="flex items-center gap-2">
+                @if (showFilter()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="filterLabel()"
+                    (click)="filterClick.emit()"
+                  >
+                    <africanies-icon name="filter" [size]="16" />
+                    {{ filterLabel() }}
+                    @if (filterCount() > 0) {
+                      <span
+                        class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+                      >
+                        {{ filterCount() }}
+                      </span>
+                    }
+                  </button>
+                }
+                @if (showExport()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="exportLabel()"
+                    (click)="exportClick.emit()"
+                  >
+                    <africanies-icon name="download" [size]="16" />
+                    {{ exportLabel() }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
       }
 
@@ -18274,13 +18725,18 @@ class TableComponent {
       }
 
       <div
-        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
-        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
-        [class.lg:overflow-auto]="stickyHeader()"
+        class="relative min-w-0 w-full overflow-hidden rounded-panel border border-border bg-surface 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"
+        <div
+          #scrollport
+          class="africanies-table-scrollport min-w-0 w-full overflow-x-auto"
+          [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+          [class.lg:overflow-auto]="stickyHeader() && !paginationLoading()"
+          [class.pointer-events-none]="paginationLoading()"
         >
+          <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]="headerRowClass()">
             <tr>
               @if (isExpandable()) {
@@ -18291,7 +18747,7 @@ class TableComponent {
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -18300,7 +18756,7 @@ class TableComponent {
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -18324,7 +18780,7 @@ class TableComponent {
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-500 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -18420,41 +18876,52 @@ class TableComponent {
                   [class.border-border]="isRowExpanded(row, i)"
                   [class.dark:border-white/10]="isRowExpanded(row, i)"
                 >
-                  <td class="p-0 align-top" [attr.colspan]="columns().length + 1">
+                  <td class="p-0 align-top" [attr.colspan]="colSpan()">
+                    <!-- Sticky must sit outside overflow-hidden or it pins
+                         to the full table width and scrolls with the row. -->
                     <div
-                      class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                      [style.grid-template-rows]="
-                        isRowExpanded(row, i) ? '1fr' : '0fr'
-                      "
-                      [attr.aria-hidden]="!isRowExpanded(row, i)"
-                      [class.pointer-events-none]="!isRowExpanded(row, i)"
+                      class="africanies-table-expand-panel bg-surface-sunken dark:bg-white/[0.05]"
+                      [style.width.px]="scrollportWidthPx() || null"
+                      [style.maxWidth.px]="scrollportWidthPx() || null"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
+                        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                        [style.grid-template-rows]="
+                          isRowExpanded(row, i) ? '1fr' : '0fr'
+                        "
+                        [attr.aria-hidden]="!isRowExpanded(row, i)"
+                        [class.pointer-events-none]="!isRowExpanded(row, i)"
                       >
-                        <dl
-                          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)"
+                        <div
+                          class="min-h-0 overflow-x-hidden overflow-y-hidden border-t border-border-strong dark:border-white/10"
                         >
-                          @for (detail of rowDetailDefs(); track detail.label()) {
-                            <div class="min-w-0">
-                              <dt
-                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
-                              >
-                                {{ detail.label() }}
-                              </dt>
-                              <dd
-                                class="m-0 mt-0.5 text-body-sm text-ink dark:text-white"
-                              >
-                                <ng-container
-                                  [ngTemplateOutlet]="detail.template"
-                                  [ngTemplateOutletContext]="cellContext(row)"
-                                />
-                              </dd>
-                            </div>
-                          }
-                        </dl>
+                          <dl
+                            class="m-0 grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3 overflow-x-hidden px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none"
+                            [class.opacity-0]="!isRowExpanded(row, i)"
+                            [class.opacity-100]="isRowExpanded(row, i)"
+                          >
+                            @for (
+                              detail of rowDetailDefs();
+                              track detail.label()
+                            ) {
+                              <div class="min-w-0">
+                                <dt
+                                  class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
+                                >
+                                  {{ detail.label() }}
+                                </dt>
+                                <dd
+                                  class="m-0 mt-0.5 break-words text-body-sm text-ink dark:text-white"
+                                >
+                                  <ng-container
+                                    [ngTemplateOutlet]="detail.template"
+                                    [ngTemplateOutletContext]="cellContext(row)"
+                                  />
+                                </dd>
+                              </div>
+                            }
+                          </dl>
+                        </div>
                       </div>
                     </div>
                   </td>
@@ -18465,16 +18932,21 @@ class TableComponent {
             }
           </tbody>
         </table>
+        </div>
         @if (paginationLoading()) {
           <div
-            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            class="absolute inset-0 z-[5] bg-surface/70 dark:bg-ink-950/70"
             data-testid="africanies-table-keep-rows-loading"
             aria-hidden="true"
           >
-            <africanies-loading-state
-              mode="inline"
-              [message]="loadingLabel()"
-            />
+            <div
+              class="sticky top-0 flex h-[min(70dvh,100%)] items-center justify-center px-4"
+            >
+              <africanies-loading-state
+                mode="inline"
+                [message]="loadingLabel()"
+              />
+            </div>
           </div>
         }
       </div>
@@ -18489,7 +18961,7 @@ class TableComponent {
         />
       }
     </div>
-  `, isInline: true, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: EmptyStateComponent, selector: "africanies-empty-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: ErrorIndicatorComponent, selector: "africanies-error-indicator", inputs: ["error", "retryText", "refreshing", "refreshingText", "disabled"], outputs: ["retry"] }, { kind: "component", type: ErrorStateComponent, selector: "africanies-error-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: LoadingStateComponent, selector: "africanies-loading-state", inputs: ["message", "mode"] }, { kind: "component", type: PaginationComponent, selector: "africanies-pagination", inputs: ["meta", "disabled", "loading", "pageSizes"], outputs: ["pageChange", "sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}:host .africanies-table-scrollport{container-type:inline-size;container-name:africanies-table}:host .africanies-table-expand-panel{position:sticky;left:0;z-index:1;box-sizing:border-box;width:100cqi;max-width:100cqi;overflow-x:hidden}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[africanies-button], a[africanies-button]", inputs: ["variant", "size", "disabled", "loading"] }, { kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "component", type: EmptyStateComponent, selector: "africanies-empty-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: ErrorIndicatorComponent, selector: "africanies-error-indicator", inputs: ["error", "retryText", "refreshing", "refreshingText", "disabled"], outputs: ["retry"] }, { kind: "component", type: ErrorStateComponent, selector: "africanies-error-state", inputs: ["message", "refreshing"], outputs: ["retry"] }, { kind: "component", type: LoadingStateComponent, selector: "africanies-loading-state", inputs: ["message", "mode"] }, { kind: "component", type: PaginationComponent, selector: "africanies-pagination", inputs: ["meta", "disabled", "loading", "pageSizes"], outputs: ["pageChange", "sizeChange"] }, { kind: "component", type: SegmentComponent, selector: "africanies-segment", inputs: ["items", "activeId", "ariaLabel", "linkActiveOptions", "keepScroll"], outputs: ["activeIdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -18502,6 +18974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         ErrorStateComponent,
                         LoadingStateComponent,
                         PaginationComponent,
+                        SegmentComponent,
                     ], host: {
                         class: 'block w-full min-w-0',
                     }, template: `
@@ -18509,63 +18982,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       class="flex w-full min-w-0 flex-col gap-3"
       [attr.aria-busy]="loading() || refreshing() || null"
     >
-      @if (showRefresh() || showFilter() || showExport()) {
-        <div class="flex items-center justify-between gap-2">
-          <div class="flex items-center gap-2">
-            @if (showToolbarRefresh()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [disabled]="loading() || refreshing()"
-                [attr.aria-label]="refreshLabel()"
-                (click)="refreshClick.emit()"
-              >
-                <africanies-icon
-                  name="refresh"
-                  [size]="16"
-                  [class]="refreshing() ? 'animate-spin' : ''"
-                />
-                {{ refreshLabel() }}
-              </button>
-            }
-          </div>
-          <div class="flex items-center gap-2">
-            @if (showFilter()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="filterLabel()"
-                (click)="filterClick.emit()"
-              >
-                <africanies-icon name="filter" [size]="16" />
-                {{ filterLabel() }}
-                @if (filterCount() > 0) {
-                  <span
-                    class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+      @if (
+        showShippingMode() ||
+        showRefresh() ||
+        showFilter() ||
+        showExport()
+      ) {
+        <div class="flex w-full min-w-0 flex-col gap-3">
+          @if (showShippingMode()) {
+            <africanies-segment
+              class="min-w-0 self-start"
+              [items]="shippingModeItems"
+              [activeId]="shippingModeActiveId()"
+              ariaLabel="Shipping mode"
+              (activeIdChange)="onShippingModeChange($event)"
+            />
+          }
+          @if (showToolbarRefresh() || showFilter() || showExport()) {
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="flex min-w-0 flex-wrap items-center gap-2">
+                @if (showToolbarRefresh()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [disabled]="loading() || refreshing()"
+                    [attr.aria-label]="refreshLabel()"
+                    (click)="refreshClick.emit()"
                   >
-                    {{ filterCount() }}
-                  </span>
+                    <africanies-icon
+                      name="refresh"
+                      [size]="16"
+                      [class]="refreshing() ? 'animate-spin' : ''"
+                    />
+                    {{ refreshLabel() }}
+                  </button>
                 }
-              </button>
-            }
-            @if (showExport()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="exportLabel()"
-                (click)="exportClick.emit()"
-              >
-                <africanies-icon name="download" [size]="16" />
-                {{ exportLabel() }}
-              </button>
-            }
-          </div>
+              </div>
+              <div class="flex items-center gap-2">
+                @if (showFilter()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="filterLabel()"
+                    (click)="filterClick.emit()"
+                  >
+                    <africanies-icon name="filter" [size]="16" />
+                    {{ filterLabel() }}
+                    @if (filterCount() > 0) {
+                      <span
+                        class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+                      >
+                        {{ filterCount() }}
+                      </span>
+                    }
+                  </button>
+                }
+                @if (showExport()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="exportLabel()"
+                    (click)="exportClick.emit()"
+                  >
+                    <africanies-icon name="download" [size]="16" />
+                    {{ exportLabel() }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
       }
 
@@ -18580,13 +19071,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       }
 
       <div
-        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
-        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
-        [class.lg:overflow-auto]="stickyHeader()"
+        class="relative min-w-0 w-full overflow-hidden rounded-panel border border-border bg-surface 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"
+        <div
+          #scrollport
+          class="africanies-table-scrollport min-w-0 w-full overflow-x-auto"
+          [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+          [class.lg:overflow-auto]="stickyHeader() && !paginationLoading()"
+          [class.pointer-events-none]="paginationLoading()"
         >
+          <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]="headerRowClass()">
             <tr>
               @if (isExpandable()) {
@@ -18597,7 +19093,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -18606,7 +19102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -18630,7 +19126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-500 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -18726,41 +19222,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                   [class.border-border]="isRowExpanded(row, i)"
                   [class.dark:border-white/10]="isRowExpanded(row, i)"
                 >
-                  <td class="p-0 align-top" [attr.colspan]="columns().length + 1">
+                  <td class="p-0 align-top" [attr.colspan]="colSpan()">
+                    <!-- Sticky must sit outside overflow-hidden or it pins
+                         to the full table width and scrolls with the row. -->
                     <div
-                      class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
-                      [style.grid-template-rows]="
-                        isRowExpanded(row, i) ? '1fr' : '0fr'
-                      "
-                      [attr.aria-hidden]="!isRowExpanded(row, i)"
-                      [class.pointer-events-none]="!isRowExpanded(row, i)"
+                      class="africanies-table-expand-panel bg-surface-sunken dark:bg-white/[0.05]"
+                      [style.width.px]="scrollportWidthPx() || null"
+                      [style.maxWidth.px]="scrollportWidthPx() || null"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
+                        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+                        [style.grid-template-rows]="
+                          isRowExpanded(row, i) ? '1fr' : '0fr'
+                        "
+                        [attr.aria-hidden]="!isRowExpanded(row, i)"
+                        [class.pointer-events-none]="!isRowExpanded(row, i)"
                       >
-                        <dl
-                          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)"
+                        <div
+                          class="min-h-0 overflow-x-hidden overflow-y-hidden border-t border-border-strong dark:border-white/10"
                         >
-                          @for (detail of rowDetailDefs(); track detail.label()) {
-                            <div class="min-w-0">
-                              <dt
-                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
-                              >
-                                {{ detail.label() }}
-                              </dt>
-                              <dd
-                                class="m-0 mt-0.5 text-body-sm text-ink dark:text-white"
-                              >
-                                <ng-container
-                                  [ngTemplateOutlet]="detail.template"
-                                  [ngTemplateOutletContext]="cellContext(row)"
-                                />
-                              </dd>
-                            </div>
-                          }
-                        </dl>
+                          <dl
+                            class="m-0 grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-x-6 gap-y-3 overflow-x-hidden px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none"
+                            [class.opacity-0]="!isRowExpanded(row, i)"
+                            [class.opacity-100]="isRowExpanded(row, i)"
+                          >
+                            @for (
+                              detail of rowDetailDefs();
+                              track detail.label()
+                            ) {
+                              <div class="min-w-0">
+                                <dt
+                                  class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
+                                >
+                                  {{ detail.label() }}
+                                </dt>
+                                <dd
+                                  class="m-0 mt-0.5 break-words text-body-sm text-ink dark:text-white"
+                                >
+                                  <ng-container
+                                    [ngTemplateOutlet]="detail.template"
+                                    [ngTemplateOutletContext]="cellContext(row)"
+                                  />
+                                </dd>
+                              </div>
+                            }
+                          </dl>
+                        </div>
                       </div>
                     </div>
                   </td>
@@ -18771,16 +19278,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }
           </tbody>
         </table>
+        </div>
         @if (paginationLoading()) {
           <div
-            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            class="absolute inset-0 z-[5] bg-surface/70 dark:bg-ink-950/70"
             data-testid="africanies-table-keep-rows-loading"
             aria-hidden="true"
           >
-            <africanies-loading-state
-              mode="inline"
-              [message]="loadingLabel()"
-            />
+            <div
+              class="sticky top-0 flex h-[min(70dvh,100%)] items-center justify-center px-4"
+            >
+              <africanies-loading-state
+                mode="inline"
+                [message]="loadingLabel()"
+              />
+            </div>
           </div>
         }
       </div>
@@ -18795,8 +19307,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         />
       }
     </div>
-  `, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}\n"] }]
-        }], propDecorators: { expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTrackBy", required: false }] }], rowExpandChange: [{ type: i0.Output, args: ["rowExpandChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], refreshLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshLabel", required: false }] }], refreshing: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshing", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCount", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exportLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportLabel", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], refreshClick: [{ type: i0.Output, args: ["refreshClick"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HeaderCellDefDirective), { isSignal: true }] }], rowDetailDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RowDetailDefDirective), { isSignal: true }] }] } });
+  `, styles: [":host tr.africanies-table-row:hover>td{background-color:#e9eef5}:host-context(.dark) tr.africanies-table-row:hover>td{background-color:#272729}:host .africanies-table-scrollport{container-type:inline-size;container-name:africanies-table}:host .africanies-table-expand-panel{position:sticky;left:0;z-index:1;box-sizing:border-box;width:100cqi;max-width:100cqi;overflow-x:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollport: [{ type: i0.ViewChild, args: ['scrollport', { isSignal: true }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTrackBy", required: false }] }], rowExpandChange: [{ type: i0.Output, args: ["rowExpandChange"] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], showShippingMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showShippingMode", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], refreshLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshLabel", required: false }] }], refreshing: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshing", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCount", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], exportLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportLabel", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], refreshClick: [{ type: i0.Output, args: ["refreshClick"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], exportClick: [{ type: i0.Output, args: ["exportClick"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], cellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellDefDirective), { isSignal: true }] }], headerCellDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HeaderCellDefDirective), { isSignal: true }] }], rowDetailDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RowDetailDefDirective), { isSignal: true }] }] } });
 
 /**
  * Presentational table with template-based cells.
@@ -19380,6 +19892,7 @@ class AfricaniesNavigationModule {
             BreadcrumbComponent,
             TabsComponent,
             SegmentComponent,
+            ShippingModeSwitchComponent,
             SideNavComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AfricaniesNavigationModule, decorators: [{