@africanies/angular-web-sdk 0.1.6 → 0.1.7

package/libs/africanies-ui/src/lib/navigation/side-nav/africanies-side-nav.component.ts

@@ -38,9 +38,10 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
 /**
  * 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`).
@@ -244,12 +245,15 @@ export class SideNavComponent {
 
     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 ` +
@@ -264,7 +268,7 @@ export class SideNavComponent {
       (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 ` +

package/libs/africanies-ui/src/lib/notifications/notification-drawer.panel.ts

@@ -127,7 +127,7 @@ const MARK_ALL_CONFIRM_MS = 4000;
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 (click)="retryInitialLoad()"
               >
@@ -296,13 +296,14 @@ export class NotificationDrawerPanel {
   });
 
   protected readonly title = computed(() => this.data.title ?? 'Notifications');
-  protected readonly items = signal<AfricaniesNotification[]>(
-    this.data.onLoadPage ? [] : (this.data.notifications ?? []),
-  );
+  private readonly seededItems = this.data.notifications ?? [];
+  protected readonly items = signal<AfricaniesNotification[]>(this.seededItems);
   protected readonly markingId = signal<string | null>(null);
   protected readonly markingAll = signal(false);
   protected readonly confirmingMarkAll = signal(false);
-  protected readonly loadingInitial = signal(!!this.data.onLoadPage);
+  protected readonly loadingInitial = signal(
+    !!this.data.onLoadPage && this.seededItems.length === 0,
+  );
   protected readonly loadingMore = signal(false);
   protected readonly loadError = signal<string | null>(null);
   protected readonly hasMore = signal(false);
@@ -334,7 +335,12 @@ export class NotificationDrawerPanel {
 
   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(() => {
@@ -578,7 +584,10 @@ export class NotificationDrawerPanel {
     this.fetchPage(this.currentPage() + 1, 'append');
   }
 
-  private fetchPage(page: number, mode: 'replace' | 'append'): void {
+  private fetchPage(
+    page: number,
+    mode: 'replace' | 'append' | 'refresh',
+  ): void {
     const loadPage = this.data.onLoadPage;
     if (!loadPage) {
       return;
@@ -587,6 +596,8 @@ export class NotificationDrawerPanel {
     if (mode === 'replace') {
       this.loadingInitial.set(true);
       this.loadError.set(null);
+    } else if (mode === 'refresh') {
+      this.loadError.set(null);
     } else {
       this.loadingMore.set(true);
     }
@@ -594,7 +605,7 @@ export class NotificationDrawerPanel {
     this.runPageLoad(
       () => loadPage(page),
       (result) => {
-        if (mode === 'replace') {
+        if (mode === 'replace' || mode === 'refresh') {
           this.items.set(result.items ?? []);
         } else {
           this.appendItems(result.items ?? []);
@@ -614,6 +625,8 @@ export class NotificationDrawerPanel {
         if (mode === 'replace') {
           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);
       },

package/libs/africanies-ui/src/lib/overlay/drawer.service.ts

@@ -59,7 +59,7 @@ export class DrawerService implements OverlayOpener {
           'africanies-overlay-backdrop',
           'bg-ink/45',
           'backdrop-blur-sm',
-          'dark:bg-ink/60',
+          'dark:bg-ink-950/60',
         ],
         panelClass: [
           'africanies-drawer-panel',

package/libs/africanies-ui/src/lib/overlay/modal.service.ts

@@ -147,7 +147,7 @@ export class ModalService implements OverlayOpener {
           'africanies-overlay-backdrop',
           'bg-ink/45',
           'backdrop-blur-sm',
-          'dark:bg-ink/60',
+          'dark:bg-ink-950/60',
         ],
         panelClass: [
           'africanies-modal-panel',

package/libs/africanies-ui/src/lib/pagination/pagination.component.ts

@@ -134,7 +134,7 @@ type PageItem = number | 'ellipsis';
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_previous_page"
           (click)="emitPage(meta().current_page - 1)"
@@ -155,7 +155,7 @@ type PageItem = number | 'ellipsis';
               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]="
@@ -170,7 +170,7 @@ type PageItem = number | 'ellipsis';
         <button
           africanies-button
           type="button"
-          variant="secondary"
+          variant="flat"
           size="sm"
           [disabled]="controlsDisabled() || !meta().has_next_page"
           (click)="emitPage(meta().current_page + 1)"

package/libs/africanies-ui/src/lib/table/table.component.ts

@@ -142,7 +142,7 @@ import { TableColumn, TableSortChange } from './table-column';
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [disabled]="loading() || refreshing()"
                 [attr.aria-label]="refreshLabel()"
@@ -162,7 +162,7 @@ import { TableColumn, TableSortChange } from './table-column';
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="filterLabel()"
                 (click)="filterClick.emit()"
@@ -182,7 +182,7 @@ import { TableColumn, TableSortChange } from './table-column';
               <button
                 africanies-button
                 type="button"
-                variant="secondary"
+                variant="flat"
                 size="sm"
                 [attr.aria-label]="exportLabel()"
                 (click)="exportClick.emit()"
@@ -208,7 +208,7 @@ import { TableColumn, TableSortChange } from './table-column';
       }
 
       <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"
@@ -806,7 +806,7 @@ export class TableComponent<T = unknown> {
       // 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}`;
   }
 

package/libs/africanies-ui/src/lib/toast/toast-host.component.ts

@@ -25,14 +25,14 @@ import { ToastItemComponent } from './toast-item.component';
     <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()"
@@ -43,7 +43,7 @@ import { ToastItemComponent } from './toast-item.component';
               <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()"
@@ -55,7 +55,7 @@ import { ToastItemComponent } from './toast-item.component';
           <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()"

package/libs/africanies-ui/src/lib/toast/toast-item.component.ts

@@ -262,7 +262,7 @@ export class ToastItemComponent {
     () =>
       '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',
+      'dark:border-white/15 dark:bg-ink-950/95 dark:text-white',
   );
 
   protected readonly accentClass = computed(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/angular-web-sdk",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "packageManager": "pnpm@11.24.0",
   "license": "MIT",
   "contributors": [