@africanies/angular-web-sdk 0.1.5 → 0.1.7

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

@@ -108,6 +108,9 @@ class ButtonComponent {
             variantClass = this.modeColor.classes().ghostPrimary;
         }
         else if (variant === 'secondary') {
+            variantClass = this.modeColor.classes().stroked;
+        }
+        else if (variant === 'flat') {
             variantClass =
                 'bg-white dark:bg-ink-950 text-ink dark:text-white border-border dark:border-white/15 hover:bg-background-welcome dark:hover:bg-white/10';
         }
@@ -270,7 +273,7 @@ class ToastItemComponent {
     ...(ngDevMode ? [{ debugName: "a11yLive" }] : /* istanbul ignore next */ []));
     shellClass = computed(() => 'africanies-toast-enter relative flex w-full overflow-hidden rounded-lg border border-border ' +
         'bg-white/95 text-ink shadow-lg backdrop-blur-md ' +
-        'dark:border-white/15 dark:bg-ink/95 dark:text-white', /* @ts-ignore */
+        'dark:border-white/15 dark:bg-ink-950/95 dark:text-white', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
     accentClass = computed(() => `w-1 shrink-0 self-stretch ${accentFill(this.item().variant)}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "accentClass" }] : /* istanbul ignore next */ []));
@@ -681,14 +684,14 @@ class ToastHostComponent {
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.collapseAll()"
@@ -699,7 +702,7 @@ class ToastHostComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.expandAll()"
@@ -711,7 +714,7 @@ class ToastHostComponent {
           <button
             africanies-button
             type="button"
-            variant="secondary"
+            variant="flat"
             size="sm"
             class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
             (click)="toastService.clear()"
@@ -750,14 +753,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     <div class="flex w-full flex-col gap-2">
       @if (toastService.showHostActions()) {
         <div
-          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink/80"
+          class="sticky top-0 z-10 flex flex-wrap justify-end gap-2 bg-white/80 pb-1 backdrop-blur-sm dark:bg-ink-surface/80"
         >
           @if (toastService.hasStacks()) {
             @if (toastService.allStacksExpanded()) {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.collapseAll()"
@@ -768,7 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
                 (click)="toastService.expandAll()"
@@ -780,7 +783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <button
             africanies-button
             type="button"
-            variant="secondary"
+            variant="flat"
             size="sm"
             class="!min-h-0 !rounded-full !bg-white !px-2.5 !py-1 !text-caption dark:!bg-ink"
             (click)="toastService.clear()"
@@ -1927,7 +1930,7 @@ class EmptyStateComponent {
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -1958,7 +1961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2172,7 +2175,7 @@ class ErrorStateComponent {
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -2203,7 +2206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       <button
         africanies-button
         type="button"
-        variant="secondary"
+        variant="flat"
         [disabled]="refreshing()"
         (click)="retry.emit()"
       >
@@ -4083,10 +4086,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 /** Label above the control. Hidden when empty so callers can omit a label. */
 const FORM_LABEL_CLASS = 'block text-body-sm font-medium text-ink dark:text-white mb-1.5 empty:hidden';
 /** Default control shell — `h-10` matches md `africanies-button`. */
-const FORM_FIELD_CLASS = 'flex items-center w-full h-10 box-border rounded-md border border-neutral-300 bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
+const FORM_FIELD_CLASS = 'flex items-center w-full h-10 box-border rounded-md border border-border bg-white dark:bg-ink-950 text-ink dark:text-white dark:border-white/25 ' +
     'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ink';
 /**
- * Error border — `!` so it wins over shell `border-neutral-300` /
+ * Error border — `!` so it wins over shell `border-border` /
  * `dark:border-white/25` (same specificity; those utilities sort later in the
  * generated CSS and otherwise paint over `border-danger`).
  *
@@ -4873,7 +4876,7 @@ class ModalService {
                 'africanies-overlay-backdrop',
                 'bg-ink/45',
                 'backdrop-blur-sm',
-                'dark:bg-ink/60',
+                'dark:bg-ink-950/60',
             ],
             panelClass: [
                 'africanies-modal-panel',
@@ -5687,7 +5690,7 @@ class SelectComponent {
         @if (multiple() && selectedList().length) {
           @for (chip of selectedList(); track trackOption(chip)) {
             <span
-              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink text-body-sm text-ink dark:text-white px-2 py-0.5"
+              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink-950 text-body-sm text-ink dark:text-white px-2 py-0.5"
             >
               @if (chip.prefix; as prefixIcon) {
                 <africanies-icon [name]="prefixIcon" [size]="14" class="shrink-0" />
@@ -6015,7 +6018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         @if (multiple() && selectedList().length) {
           @for (chip of selectedList(); track trackOption(chip)) {
             <span
-              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink text-body-sm text-ink dark:text-white px-2 py-0.5"
+              class="inline-flex items-center gap-1 rounded-md border border-neutral-300 bg-background-welcome dark:border-white/20 dark:bg-ink-950 text-body-sm text-ink dark:text-white px-2 py-0.5"
             >
               @if (chip.prefix; as prefixIcon) {
                 <africanies-icon [name]="prefixIcon" [size]="14" class="shrink-0" />
@@ -7610,7 +7613,7 @@ class DrawerService {
                 'africanies-overlay-backdrop',
                 'bg-ink/45',
                 'backdrop-blur-sm',
-                'dark:bg-ink/60',
+                'dark:bg-ink-950/60',
             ],
             panelClass: [
                 'africanies-drawer-panel',
@@ -9722,7 +9725,7 @@ class FilePreviewDialogComponent {
           <img
             [src]="src()"
             [alt]="data.file.name"
-            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink dark:ring-white/15"
+            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink-950 dark:ring-white/15"
           />
         } @else {
           <div
@@ -9792,7 +9795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           <img
             [src]="src()"
             [alt]="data.file.name"
-            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink dark:ring-white/15"
+            class="max-h-[min(70vh,40rem)] w-full rounded-md object-contain bg-background-welcome ring-1 ring-border dark:bg-ink-950 dark:ring-white/15"
           />
         } @else {
           <div
@@ -10275,7 +10278,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10288,7 +10291,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -10343,7 +10346,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10412,7 +10415,7 @@ class FileUploadComponent {
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"
@@ -10575,7 +10578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10588,7 +10591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openCamera()"
@@ -10643,7 +10646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker()"
@@ -10712,7 +10715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 <button
                   africanies-button
                   type="button"
-                  variant="secondary"
+                  variant="flat"
                   size="sm"
                   [disabled]="disabled()"
                   (click)="openFilePicker(); $event.stopPropagation()"
@@ -13473,8 +13476,8 @@ class ShippingModeSwitchComponent {
     mode = this.shipping.mode;
     /** Host padding / divider — tighter when the rail is collapsed. */
     hostClass = computed(() => this.collapsed()
-        ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
-        : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10', /* @ts-ignore */
+        ? 'block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10'
+        : 'block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
@@ -13786,9 +13789,10 @@ const DEFAULT_LINK_ACTIVE$1 = {
 /**
  * App shell side navigation with icons, nested items, and a collapsible rail.
  *
- * **Design - ink spine:** a continuous mode-accent edge with soft active
- * highlights. Collapsed mode keeps icons; hover opens a floating label blade
- * (name + children) instead of a plain tooltip.
+ * **Design - ink spine:** a continuous mode-accent edge; active leaves use
+ * primary fill + white text (portal parity); expanded parents of an active
+ * child use primary text on white. Collapsed mode keeps icons; hover opens a
+ * floating label blade (name + children) instead of a plain tooltip.
  *
  * ## Parent items with children
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
@@ -13943,11 +13947,14 @@ class SideNavComponent {
             (item.disabled ? ' cursor-not-allowed opacity-50' : ' cursor-pointer');
         const leaf = this.isLeafActive(item);
         const ancestor = !leaf && this.isItemActive(item);
+        const colors = this.modeColor.classes();
+        // Portal: active leaf / collapsed rail = primary fill + white text.
         if (leaf) {
-            return `${base} ${this.modeColor.classes().soft} ${this.modeColor.classes().text} font-semibold`;
+            return `${base} ${colors.activeFill} font-semibold`;
         }
+        // Portal: expanded parent of active child = primary text on white.
         if (ancestor) {
-            return `${base} ${this.modeColor.classes().soft} ${this.modeColor.classes().text} font-semibold`;
+            return `${base} bg-transparent ${colors.text} font-semibold`;
         }
         return (`${base} font-medium text-neutral-600 hover:bg-background-welcome hover:text-ink ` +
             'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white');
@@ -13957,7 +13964,7 @@ class SideNavComponent {
             'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink ' +
             (item.disabled ? 'cursor-not-allowed opacity-50 ' : 'cursor-pointer ');
         if (this.isLeafActive(item)) {
-            return `${base} ${this.modeColor.classes().soft} ${this.modeColor.classes().text} font-semibold`;
+            return `${base} ${this.modeColor.classes().activeFill} font-semibold`;
         }
         return (`${base} font-medium text-neutral-600 hover:bg-background-welcome hover:text-ink ` +
             'dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white');
@@ -14102,13 +14109,13 @@ class SideNavComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SideNavComponent, isStandalone: true, selector: "africanies-side-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandParents: { classPropertyName: "expandParents", publicName: "expandParents", isSignal: true, isRequired: false, transformFunction: null }, expandBranchesByDefault: { classPropertyName: "expandBranchesByDefault", publicName: "expandBranchesByDefault", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoMiniSrc: { classPropertyName: "logoMiniSrc", publicName: "logoMiniSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", activeId: "activeIdChange" }, host: { classAttribute: "relative z-20 block h-full" }, ngImport: i0, template: "    <aside\n      class=\"relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            class=\"absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SideNavComponent, isStandalone: true, selector: "africanies-side-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, expandParents: { classPropertyName: "expandParents", publicName: "expandParents", isSignal: true, isRequired: false, transformFunction: null }, expandBranchesByDefault: { classPropertyName: "expandBranchesByDefault", publicName: "expandBranchesByDefault", isSignal: true, isRequired: false, transformFunction: null }, linkActiveOptions: { classPropertyName: "linkActiveOptions", publicName: "linkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoMiniSrc: { classPropertyName: "logoMiniSrc", publicName: "logoMiniSrc", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", activeId: "activeIdChange" }, host: { classAttribute: "relative z-20 block h-full" }, ngImport: i0, template: "    <aside\n      class=\"relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            class=\"absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"], dependencies: [{ kind: "component", type: AfricaniesIconComponent, selector: "africanies-icon", inputs: ["name", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'africanies-side-nav', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AfricaniesIconComponent, RouterLink, NgTemplateOutlet], host: {
                         class: 'relative z-20 block h-full',
-                    }, template: "    <aside\n      class=\"relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            class=\"absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
+                    }, template: "    <aside\n      class=\"relative flex h-full flex-col overflow-visible border-r border-border bg-white transition-[width] duration-200 ease-out dark:border-white/10 dark:bg-ink-950\"\n      [style.width]=\"collapsed() ? '3.75rem' : '15rem'\"\n      [attr.aria-label]=\"ariaLabel()\"\n    >\n      <div\n        class=\"pointer-events-none absolute inset-y-0 left-0 w-[3px] transition-colors\"\n        [class]=\"modeColor.classes().bg\"\n        aria-hidden=\"true\"\n      ></div>\n\n      <div\n        class=\"flex shrink-0 items-center gap-2 border-b border-border py-3 dark:border-white/10\"\n        [class.flex-col]=\"collapsed()\"\n        [class.px-3]=\"collapsed()\"\n        [class.pl-4]=\"!collapsed()\"\n        [class.pr-2]=\"!collapsed()\"\n      >\n        @if (collapsed()) {\n          @if (showLogo()) {\n            <img\n              [src]=\"resolvedMiniLogo()\"\n              alt=\"African Import Export Solutions\"\n              class=\"size-8 shrink-0 object-contain\"\n            />\n          }\n        } @else {\n          @if (showLogo()) {\n            <div class=\"min-w-0 flex-1\">\n              <img\n                [src]=\"resolvedFullLogo()\"\n                alt=\"African Import Export Solutions\"\n                class=\"h-9 max-w-full object-contain object-left\"\n              />\n            </div>\n          } @else {\n            <div\n              class=\"min-w-0 flex-1 truncate text-body-sm font-semibold text-ink dark:text-white\"\n            >\n              <ng-content select=\"[brand]\" />\n            </div>\n          }\n        }\n        <button\n          type=\"button\"\n          class=\"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white\"\n          [attr.aria-label]=\"\n            collapsed() ? 'Expand navigation' : 'Collapse navigation'\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapsed()\"\n        >\n          <africanies-icon\n            [name]=\"collapsed() ? 'angle-double-right' : 'angle-double-left'\"\n            [size]=\"16\"\n          />\n        </button>\n      </div>\n\n      <nav class=\"africanies-overlay-scroll relative flex-1 overflow-y-auto overflow-x-visible px-3 py-3\">\n        @if (!collapsed() && expandParents() && hasOpenBranches()) {\n          <button\n            type=\"button\"\n            class=\"absolute right-1.5 top-1.5 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-white text-neutral-500 shadow-sm ring-1 ring-border/80 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:bg-ink-950 dark:text-neutral-400 dark:ring-white/15 dark:hover:bg-white/10 dark:hover:text-white\"\n            aria-label=\"Collapse all\"\n            (click)=\"collapseAllBranches()\"\n          >\n            <africanies-icon name=\"compress\" [size]=\"14\" />\n          </button>\n        }\n        <ul class=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n          @for (item of items(); track item.id) {\n            <li\n              class=\"relative overflow-visible\"\n              (mouseenter)=\"onItemEnter(item.id)\"\n              (mouseleave)=\"onItemLeave(item.id)\"\n            >\n              @if (item.routerLink !== null && item.routerLink !== undefined) {\n                <a\n                  [routerLink]=\"item.disabled ? null : item.routerLink\"\n                  [queryParams]=\"item.queryParams\"\n                  [fragment]=\"item.fragment\"\n                  [class]=\"rowClass(item)\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  [attr.aria-disabled]=\"item.disabled ? true : null\"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </a>\n              } @else {\n                <button\n                  type=\"button\"\n                  [class]=\"rowClass(item)\"\n                  [disabled]=\"!!item.disabled\"\n                  [attr.aria-current]=\"isLeafActive(item) ? 'page' : null\"\n                  [attr.aria-expanded]=\"\n                    item.children?.length ? isBranchOpen(item.id) : null\n                  \"\n                  (click)=\"onActivate(item, $event)\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowInner\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                  />\n                </button>\n              }\n\n              @if (!collapsed() && item.children?.length) {\n                <div\n                  class=\"grid transition-[grid-template-rows] duration-200 ease-out\"\n                  [style.grid-template-rows]=\"\n                    isBranchOpen(item.id) ? '1fr' : '0fr'\n                  \"\n                  [attr.aria-hidden]=\"!isBranchOpen(item.id)\"\n                  [class.pointer-events-none]=\"!isBranchOpen(item.id)\"\n                >\n                  <ul\n                    class=\"relative m-0 mt-0.5 min-h-0 list-none space-y-0.5 overflow-hidden py-1 pl-4 before:absolute before:bottom-1 before:left-[1.35rem] before:top-0 before:w-px before:bg-border dark:before:bg-white/15\"\n                  >\n                    @for (child of item.children; track child.id) {\n                      <li\n                        class=\"transition-opacity duration-200 ease-out\"\n                        [class.opacity-0]=\"!isBranchOpen(item.id)\"\n                        [class.opacity-100]=\"isBranchOpen(item.id)\"\n                      >\n                      @if (\n                        child.routerLink !== null &&\n                        child.routerLink !== undefined\n                      ) {\n                        <a\n                          [routerLink]=\"child.disabled ? null : child.routerLink\"\n                          [queryParams]=\"child.queryParams\"\n                          [fragment]=\"child.fragment\"\n                          [class]=\"childRowClass(child)\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </a>\n                      } @else {\n                        <button\n                          type=\"button\"\n                          [class]=\"childRowClass(child)\"\n                          [disabled]=\"!!child.disabled\"\n                          [attr.aria-current]=\"\n                            isLeafActive(child) ? 'page' : null\n                          \"\n                          (click)=\"onActivate(child, $event)\"\n                        >\n                          @if (child.icon; as icon) {\n                            <africanies-icon\n                              [name]=\"icon\"\n                              [size]=\"14\"\n                              class=\"shrink-0 opacity-80\"\n                            />\n                          }\n                          <span class=\"truncate\">{{ child.label }}</span>\n                          <ng-container\n                            [ngTemplateOutlet]=\"navBadge\"\n                            [ngTemplateOutletContext]=\"{\n                              visible: child.badge,\n                              compact: false,\n                            }\"\n                          />\n                        </button>\n                      }\n                    </li>\n                  }\n                  </ul>\n                </div>\n              }\n\n              @if (collapsed() && hoverId() === item.id) {\n                <div\n                  class=\"absolute left-full top-0 z-50 ml-2 min-w-[11rem] overflow-hidden rounded-md border border-border bg-ink text-white shadow-lg dark:border-white/15\"\n                  role=\"tooltip\"\n                >\n                  <div\n                    class=\"absolute inset-y-0 left-0 w-1\"\n                    [class]=\"modeColor.classes().bg\"\n                    aria-hidden=\"true\"\n                  ></div>\n                  <div class=\"border-b border-white/10 px-3 py-2 pl-4\">\n                    <p class=\"m-0 text-body-sm font-semibold\">{{ item.label }}</p>\n                  </div>\n                  @if (item.children?.length) {\n                    <ul class=\"m-0 list-none space-y-0.5 p-1.5\">\n                      @for (child of item.children; track child.id) {\n                        <li>\n                          @if (\n                            child.routerLink !== null &&\n                            child.routerLink !== undefined\n                          ) {\n                            <a\n                              [routerLink]=\"\n                                child.disabled ? null : child.routerLink\n                              \"\n                              [queryParams]=\"child.queryParams\"\n                              [fragment]=\"child.fragment\"\n                              class=\"relative flex items-center gap-2 rounded px-2.5 py-1.5 text-body-sm text-white/85 no-underline transition-colors hover:bg-white/10 hover:text-white\"\n                              [class.opacity-50]=\"child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </a>\n                          } @else {\n                            <button\n                              type=\"button\"\n                              class=\"relative flex w-full items-center gap-2 rounded px-2.5 py-1.5 text-left text-body-sm text-white/85 transition-colors hover:bg-white/10 hover:text-white\"\n                              [disabled]=\"!!child.disabled\"\n                              (click)=\"onActivate(child, $event)\"\n                            >\n                              @if (child.icon; as icon) {\n                                <africanies-icon [name]=\"icon\" [size]=\"14\" />\n                              }\n                              {{ child.label }}\n                              <ng-container\n                                [ngTemplateOutlet]=\"navBadge\"\n                                [ngTemplateOutletContext]=\"{\n                                  visible: child.badge,\n                                  compact: true,\n                                }\"\n                              />\n                            </button>\n                          }\n                        </li>\n                      }\n                    </ul>\n                  }\n                </div>\n              }\n            </li>\n          }\n        </ul>\n      </nav>\n\n      <ng-content select=\"[footer]\" />\n    </aside>\n\n    <ng-template #rowInner let-item>\n      <span class=\"inline-flex size-5 shrink-0 items-center justify-center\">\n        @if (item.icon; as icon) {\n          <africanies-icon [name]=\"icon\" [size]=\"16\" />\n        } @else {\n          <span\n            class=\"size-1.5 rounded-full bg-current opacity-70\"\n            aria-hidden=\"true\"\n          ></span>\n        }\n      </span>\n      @if (!collapsed()) {\n        <span class=\"min-w-0 flex-1 truncate text-left\">{{ item.label }}</span>\n        @if (item.children?.length) {\n          <africanies-icon\n            name=\"chevron-down\"\n            [size]=\"14\"\n            class=\"shrink-0 opacity-70 transition-transform duration-200 ease-out\"\n            [class.rotate-180]=\"isBranchOpen(item.id)\"\n          />\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"navBadge\"\n        [ngTemplateOutletContext]=\"{\n          visible: item.badge,\n          compact: collapsed(),\n        }\"\n      />\n    </ng-template>\n\n    <ng-template #navBadge let-visible=\"visible\" let-compact=\"compact\">\n      @if (visible) {\n        <span\n          class=\"pointer-events-none absolute z-10 overflow-visible\"\n          [class]=\"compact ? 'right-0.5 top-0.5 h-2 w-2' : 'right-1.5 top-1 h-2 w-2'\"\n          aria-hidden=\"true\"\n        >\n          <span\n            class=\"africanies-side-nav-badge-ping absolute left-1/2 top-1/2 size-2 rounded-full bg-danger\"\n          ></span>\n          <span\n            class=\"absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-danger ring-2 ring-white dark:ring-ink\"\n          ></span>\n        </span>\n      }\n    </ng-template>", styles: ["@keyframes africanies-side-nav-badge-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}70%{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(2.4);opacity:0}}.africanies-side-nav-badge-ping{animation:africanies-side-nav-badge-pulse 1.4s cubic-bezier(0,0,.2,1) infinite}@media(prefers-reduced-motion:reduce){.africanies-side-nav-badge-ping{animation:none;opacity:.5}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], expandParents: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandParents", required: false }] }], expandBranchesByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandBranchesByDefault", required: false }] }], linkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkActiveOptions", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoMiniSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoMiniSrc", required: false }] }] } });
 
 /**
@@ -14941,7 +14948,8 @@ class NotificationDrawerPanel {
     ...(ngDevMode ? [{ debugName: "viewLinkClass" }] : /* istanbul ignore next */ []));
     title = computed(() => this.data.title ?? 'Notifications', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    items = signal(this.data.onLoadPage ? [] : (this.data.notifications ?? []), /* @ts-ignore */
+    seededItems = this.data.notifications ?? [];
+    items = signal(this.seededItems, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     markingId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "markingId" }] : /* istanbul ignore next */ []));
@@ -14949,7 +14957,7 @@ class NotificationDrawerPanel {
     ...(ngDevMode ? [{ debugName: "markingAll" }] : /* istanbul ignore next */ []));
     confirmingMarkAll = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "confirmingMarkAll" }] : /* istanbul ignore next */ []));
-    loadingInitial = signal(!!this.data.onLoadPage, /* @ts-ignore */
+    loadingInitial = signal(!!this.data.onLoadPage && this.seededItems.length === 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadingInitial" }] : /* istanbul ignore next */ []));
     loadingMore = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []));
@@ -14983,7 +14991,13 @@ class NotificationDrawerPanel {
     markAllConfirmTimer = null;
     constructor() {
         if (this.data.onLoadPage) {
-            this.fetchPage(1, 'replace');
+            if (this.seededItems.length > 0) {
+                this.currentPage.set(1);
+                this.fetchPage(1, 'refresh');
+            }
+            else {
+                this.fetchPage(1, 'replace');
+            }
         }
         effect(() => {
             if (this.loadingInitial() ||
@@ -15177,11 +15191,14 @@ class NotificationDrawerPanel {
             this.loadingInitial.set(true);
             this.loadError.set(null);
         }
+        else if (mode === 'refresh') {
+            this.loadError.set(null);
+        }
         else {
             this.loadingMore.set(true);
         }
         this.runPageLoad(() => loadPage(page), (result) => {
-            if (mode === 'replace') {
+            if (mode === 'replace' || mode === 'refresh') {
                 this.items.set(result.items ?? []);
             }
             else {
@@ -15196,6 +15213,9 @@ class NotificationDrawerPanel {
                 this.loadError.set('Could not load notifications. Try again.');
                 this.loadingInitial.set(false);
             }
+            else if (mode === 'refresh' && this.items().length === 0) {
+                this.loadError.set('Could not load notifications. Try again.');
+            }
             this.loadingMore.set(false);
         });
     }
@@ -15330,7 +15350,7 @@ class NotificationDrawerPanel {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -15561,7 +15581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -16429,7 +16449,7 @@ class AppShellHeaderComponent {
         this.notificationsDrawer
             .open({
             title: this.notificationsTitle(),
-            notifications: onLoadPage ? undefined : this.notifications(),
+            notifications: this.notifications(),
             onLoadPage,
             onMarkRead,
             onMarkAllRead,
@@ -16826,8 +16846,8 @@ class AppShellComponent {
     hostClass = computed(() => this.layoutPreview() ? 'block h-full' : 'block min-h-full', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     shellRootClass = computed(() => this.layoutPreview()
-        ? 'relative flex h-full min-h-0'
-        : 'relative flex min-h-full', /* @ts-ignore */
+        ? 'relative flex h-full min-h-0 bg-background-chrome dark:bg-ink-950'
+        : 'relative flex min-h-full bg-background-chrome dark:bg-ink-950', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellRootClass" }] : /* istanbul ignore next */ []));
     headerDensity = computed(() => {
         const preview = this.layoutPreview();
@@ -17431,7 +17451,7 @@ class PaginationComponent {
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_previous_page"
           (click)="emitPage(meta().current_page - 1)"
@@ -17452,7 +17472,7 @@ class PaginationComponent {
               type="button"
               size="sm"
               class="min-w-8"
-              [variant]="item === meta().current_page ? 'primary' : 'secondary'"
+              [variant]="item === meta().current_page ? 'primary' : 'flat'"
               [disabled]="controlsDisabled()"
               [attr.aria-label]="'Page ' + item"
               [attr.aria-current]="
@@ -17467,7 +17487,7 @@ class PaginationComponent {
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_next_page"
           (click)="emitPage(meta().current_page + 1)"
@@ -17532,7 +17552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_previous_page"
           (click)="emitPage(meta().current_page - 1)"
@@ -17553,7 +17573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               type="button"
               size="sm"
               class="min-w-8"
-              [variant]="item === meta().current_page ? 'primary' : 'secondary'"
+              [variant]="item === meta().current_page ? 'primary' : 'flat'"
               [disabled]="controlsDisabled()"
               [attr.aria-label]="'Page ' + item"
               [attr.aria-current]="
@@ -17568,7 +17588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_next_page"
           (click)="emitPage(meta().current_page + 1)"
@@ -17995,7 +18015,7 @@ class TableComponent {
             // Fill comes from {@link headerSoftClass} on the cell — do not re-tint.
             return `${side} z-[2]`;
         }
-        const fill = 'bg-white dark:bg-ink';
+        const fill = 'bg-white dark:bg-ink-surface';
         return `${side} ${fill}`;
     }
     /**
@@ -18113,7 +18133,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -18133,7 +18153,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -18153,7 +18173,7 @@ class TableComponent {
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -18179,7 +18199,7 @@ class TableComponent {
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink"
+        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink-surface"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
@@ -18405,7 +18425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -18425,7 +18445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -18445,7 +18465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -18471,7 +18491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink"
+        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink-surface"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"