@africanies/angular-web-sdk 0.1.6 → 0.1.8

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

@@ -147,16 +147,16 @@ 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',
-          'bg-white',
+          'bg-surface',
           'dark:bg-ink-950',
           'text-ink',
           'dark:text-white',
-          'rounded-lg',
-          'shadow-xl',
+          'rounded-panel',
+          'shadow-floating',
           'border',
           'border-border',
           'dark:border-white/15',

package/libs/africanies-ui/src/lib/overlay/overlay-frame.component.ts

@@ -83,7 +83,7 @@ export class OverlayFooterDirective {}
       <ng-content select="[africaniesOverlayHeader]" />
     </div>
     <div
-      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-[2px] -mx-[2px]"
+      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-1 -mx-1"
     >
       <ng-content />
     </div>

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)"
@@ -144,7 +144,7 @@ type PageItem = number | 'ellipsis';
         @for (item of pageItems(); track trackPageItem(item, $index)) {
           @if (item === 'ellipsis') {
             <span
-              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-500 dark:text-neutral-400"
+              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-600 dark:text-neutral-400"
               aria-hidden="true"
             >
               …
@@ -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/stepper/stepper.component.ts

@@ -53,9 +53,9 @@ function prefersReducedMotion(): boolean {
     .africanies-step-body {
       min-width: 0;
       overflow-x: clip;
-      /* 2 px breathing room so focus-outline rings on edge fields are not clipped */
-      padding-inline: 2px;
-      margin-inline: -2px;
+      /* 4 px breathing room so any remaining external focus rings are not clipped */
+      padding-inline: 4px;
+      margin-inline: -4px;
     }
     .africanies-step-pane {
       min-width: 0;
@@ -66,7 +66,7 @@ function prefersReducedMotion(): boolean {
     <div class="flex flex-col gap-5 text-ink dark:text-white">
       <div class="flex flex-col gap-2">
         <p
-          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400"
+          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
           Step {{ activeIndex() + 1 }} of {{ steps().length }}
           <span
@@ -95,7 +95,7 @@ function prefersReducedMotion(): boolean {
             <li class="flex min-w-0 shrink-0 items-center gap-1">
               <button
                 type="button"
-                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed"
+                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink disabled:cursor-not-allowed"
                 [class]="headerButtonClass(i)"
                 [attr.aria-current]="i === activeIndex() ? 'step' : null"
                 [disabled]="!canActivate(i)"
@@ -223,7 +223,7 @@ export class StepperComponent {
     if (past) {
       return 'cursor-pointer text-ink hover:bg-background-welcome dark:text-white dark:hover:bg-white/10';
     }
-    return 'opacity-40 text-neutral-500 dark:text-neutral-400';
+    return 'opacity-40 text-neutral-600 dark:text-neutral-400';
   }
 
   protected stepBadgeClass(index: number): string {
@@ -233,7 +233,7 @@ export class StepperComponent {
       const c = this.modeColor.classes();
       return `${base} ${c.border} ${c.bg} text-white`;
     }
-    return `${base} border-border bg-white text-neutral-500 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
+    return `${base} border-control bg-surface text-neutral-600 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
   }
 
   protected canActivate(index: number): boolean {

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

@@ -34,6 +34,15 @@ export interface TableColumn<T = unknown> {
    */
   width?: string;
 
+  /**
+   * Optional CSS max-width (e.g. `'14rem'`).
+   *
+   * Caps growth for text-heavy columns without forcing a large minimum the
+   * way {@link width} can. Prefer this for Name / Description / Message when
+   * other columns should stay compact.
+   */
+  maxWidth?: string;
+
   /**
    * Pin the column while the table scrolls horizontally.
    *

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

@@ -0,0 +1,99 @@
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShippingModeService } from '@africanies/africanies-core';
+import type { ShippingMode } from '@africanies/africanies-models';
+
+import { TableComponent } from './table.component';
+import type { TableColumn } from './table-column';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [TableComponent],
+  template: `
+    <africanies-table
+      [columns]="columns"
+      [rows]="rows()"
+      [loading]="loading()"
+      [error]="error()"
+      loadingLabel="Loading page…"
+    />
+  `,
+})
+class TableHostComponent {
+  readonly columns: TableColumn<Row>[] = [{ key: 'name', header: 'Name' }];
+  readonly rows = signal<Row[]>([]);
+  readonly loading = signal(false);
+  readonly error = signal<string | null>(null);
+}
+
+describe('TableComponent keep-rows loading', () => {
+  let fixture: ComponentFixture<TableHostComponent>;
+  let host: TableHostComponent;
+
+  beforeEach(async () => {
+    const mode = signal<ShippingMode>('sfn');
+    await TestBed.configureTestingModule({
+      imports: [TableHostComponent],
+      providers: [
+        {
+          provide: ShippingModeService,
+          useValue: {
+            mode: mode.asReadonly(),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TableHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('shows a keep-rows overlay when loading with rows on screen', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).not.toBeNull();
+    expect(root.textContent).toContain('Ada');
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('uses the in-grid body loader on first load with no rows', () => {
+    host.rows.set([]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).toBeNull();
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('shows a full-width stale error when rows remain after a failed fetch', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.error.set('Could not load page.');
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const indicator = root.querySelector('africanies-error-indicator');
+    expect(indicator).not.toBeNull();
+    expect(indicator?.className).toContain('w-full');
+    expect(root.textContent).toContain('Could not load page.');
+    expect(root.textContent).toContain('Ada');
+  });
+});

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

@@ -39,11 +39,11 @@ import { TableColumn, TableSortChange } from './table-column';
  * Hidden while the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
  * spins (do not swap to a blocking loader). Use {@link loading} when the page
- * of data is changing (pagination / size): rows stay on screen and the built-in
- * pager shows a circular spinner beside the page controls; the body loader
- * appears only when there are no rows yet (first load) or the host cleared
- * rows for a shipping-mode switch (STN ↔ SFN). Toolbar and column headers stay
- * mounted.
+ * of data is changing (pagination / size): rows stay on screen, a keep-rows
+ * overlay covers the grid, and the built-in pager shows a circular spinner
+ * beside the page controls; the body loader appears only when there are no
+ * rows yet (first load) or the host cleared rows for a shipping-mode switch
+ * (STN ↔ SFN). Toolbar and column headers stay mounted.
  * top-right **Filters** then **Export** (`showFilter` / `showExport`). The table
  * does not own fetch, filter, or export logic — the host handles those events.
  *
@@ -102,6 +102,11 @@ import { TableColumn, TableSortChange } from './table-column';
  * to the left when rows are expandable. Override with
  * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
  * border (and opaque fill) so dividers stay visible while scrolling.
+ *
+ * **Sticky header (desktop):** when {@link stickyHeader} is true (default),
+ * large screens scroll the grid inside a capped viewport and keep `th` pinned
+ * to the top of that scrollport. Mobile keeps horizontal-only overflow so
+ * page scroll is unchanged.
  */
 @Component({
   selector: 'africanies-table',
@@ -124,7 +129,7 @@ import { TableColumn, TableSortChange } from './table-column';
     /* Full-row hover: sticky action cells use an opaque fill that would
        otherwise mask a <tr> background. Paint every cell the same way. */
     :host tr.africanies-table-row:hover > td {
-      background-color: #eef2f6;
+      background-color: #e9eef5;
     }
     :host-context(.dark) tr.africanies-table-row:hover > td {
       background-color: #272729;
@@ -142,7 +147,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 +167,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 +187,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()"
@@ -196,19 +201,19 @@ import { TableColumn, TableSortChange } from './table-column';
       }
 
       @if (staleError(); as staleMessage) {
-        <div class="flex justify-end">
-          <africanies-error-indicator
-            class="max-w-[min(100%,20rem)]"
-            [error]="staleMessage"
-            retryText="Refresh"
-            [refreshing]="refreshing()"
-            (retry)="refreshClick.emit()"
-          />
-        </div>
+        <africanies-error-indicator
+          class="w-full"
+          [error]="staleMessage"
+          retryText="Refresh"
+          [refreshing]="refreshing()"
+          (retry)="refreshClick.emit()"
+        />
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink"
+        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
+        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+        [class.lg:overflow-auto]="stickyHeader()"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
@@ -223,7 +228,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -232,7 +237,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -246,7 +251,8 @@ import { TableColumn, TableSortChange } from './table-column';
                 <th
                   scope="col"
                   [class]="headerCellClass(col)"
-                  [style.width]="col.width ?? null"
+                  [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                 >
                   @if (headerTemplateFor(col.key); as headerTpl) {
                     <ng-container
@@ -255,7 +261,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -311,7 +317,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   <td [class]="expandBodyClass(i)">
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       [attr.aria-label]="
                         isRowExpanded(row, i)
                           ? 'Collapse row details'
@@ -330,7 +336,8 @@ import { TableColumn, TableSortChange } from './table-column';
                 @for (col of columns(); track col.key) {
                   <td
                     [class]="bodyCellClass(col, i)"
-                    [style.width]="col.width ?? null"
+                    [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                   >
                     @if (templateFor(col.key); as tpl) {
                       <ng-container
@@ -360,7 +367,7 @@ import { TableColumn, TableSortChange } from './table-column';
                       [class.pointer-events-none]="!isRowExpanded(row, i)"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05]"
+                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
                       >
                         <dl
                           class="m-0 grid gap-x-6 gap-y-3 px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
@@ -370,7 +377,7 @@ import { TableColumn, TableSortChange } from './table-column';
                           @for (detail of rowDetailDefs(); track detail.label()) {
                             <div class="min-w-0">
                               <dt
-                                class="m-0 text-caption font-medium text-neutral-500 dark:text-neutral-400"
+                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
                               >
                                 {{ detail.label() }}
                               </dt>
@@ -395,6 +402,18 @@ import { TableColumn, TableSortChange } from './table-column';
             }
           </tbody>
         </table>
+        @if (paginationLoading()) {
+          <div
+            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            data-testid="africanies-table-keep-rows-loading"
+            aria-hidden="true"
+          >
+            <africanies-loading-state
+              mode="inline"
+              [message]="loadingLabel()"
+            />
+          </div>
+        }
       </div>
 
       @if (meta(); as pager) {
@@ -431,6 +450,13 @@ export class TableComponent<T = unknown> {
   /** Column definitions (header chrome + keys). */
   readonly columns = input.required<TableColumn<T>[]>();
 
+  /**
+   * When true (default), pin column headers while scrolling the grid on
+   * large screens (`lg+`). Uses a capped scrollport so sticky works with
+   * horizontal overflow. Set false to keep the previous unconstrained layout.
+   */
+  readonly stickyHeader = input(true, { transform: booleanAttribute });
+
   /**
    * Row records to render. Empty arrays show {@link EmptyStateComponent} in
    * the body unless {@link loading} or {@link error} is set. Missing `data`
@@ -463,9 +489,9 @@ export class TableComponent<T = unknown> {
 
   /**
    * Page of data is loading (first load, shipping-mode switch, pagination,
-   * page size). When rows are already on screen, the pager shows a spinner
-   * and rows stay visible; when there are no rows (first load or the host
-   * dropped STN/SFN rows after a mode switch), the body shows
+   * page size). When rows are already on screen, a keep-rows overlay covers
+   * the grid and the pager shows a spinner; when there are no rows (first
+   * load or the host dropped STN/SFN rows after a mode switch), the body shows
    * {@link LoadingStateComponent}. Distinct from {@link refreshing}.
    */
   readonly loading = input(false, { transform: booleanAttribute });
@@ -754,10 +780,22 @@ export class TableComponent<T = unknown> {
       'border-border whitespace-normal wrap-break-word px-[1.125rem] py-4 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
       this.headerSoftClass() +
       ' ' +
-      this.stickySurfaceClass(col, 'head')
+      this.stickySurfaceClass(col, 'head') +
+      (sticky ? '' : this.headerStickClass())
     );
   }
 
+  /**
+   * Vertical pin for scrolling header cells on desktop. Pinned left/right
+   * headers get `lg:top-0` from {@link stickyPinClass} instead.
+   */
+  protected headerStickClass(): string {
+    if (!this.stickyHeader()) {
+      return '';
+    }
+    return ' lg:sticky lg:top-0 lg:z-[3] print:static';
+  }
+
   /**
    * Body cell classes, including sticky pin when set.
    * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
@@ -804,9 +842,13 @@ export class TableComponent<T = unknown> {
       edge === 'right' ? 'sticky right-0 z-[1]' : 'sticky left-0 z-[1]';
     if (surface === 'head') {
       // Fill comes from {@link headerSoftClass} on the cell — do not re-tint.
-      return `${side} z-[2]`;
+      // Corner pins also stick vertically on desktop when stickyHeader is on.
+      const vertical = this.stickyHeader()
+        ? ' z-[2] lg:top-0 lg:z-[4] print:static'
+        : ' z-[2]';
+      return `${side}${vertical}`;
     }
-    const fill = 'bg-white dark:bg-ink';
+    const fill = 'bg-surface 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

@@ -260,9 +260,9 @@ export class ToastItemComponent {
 
   protected readonly 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',
+      'africanies-toast-enter relative flex w-full overflow-hidden rounded-panel border border-border ' +
+      'bg-surface/95 text-ink shadow-floating backdrop-blur-md ' +
+      'dark:border-white/15 dark:bg-ink-950/95 dark:text-white',
   );
 
   protected readonly accentClass = computed(
@@ -272,11 +272,11 @@ export class ToastItemComponent {
   protected readonly iconClass = computed(() => {
     switch (this.item().variant) {
       case 'success':
-        return 'text-export dark:text-export-light';
+        return 'text-export-strong dark:text-export-light';
       case 'warning':
         return 'text-warning-dark dark:text-warning';
       case 'danger':
-        return 'text-danger';
+        return 'text-danger-dark dark:text-danger';
       default:
         return 'text-ink-blue dark:text-neutral-300';
     }
@@ -286,11 +286,11 @@ export class ToastItemComponent {
     const base = 'm-0 break-words text-body-sm font-semibold';
     switch (this.item().variant) {
       case 'success':
-        return `${base} text-export dark:text-export-light`;
+        return `${base} text-export-strong dark:text-export-light`;
       case 'warning':
         return `${base} text-warning-dark dark:text-warning`;
       case 'danger':
-        return `${base} text-danger`;
+        return `${base} text-danger-dark dark:text-danger`;
       default:
         return `${base} text-ink dark:text-white`;
     }

package/package.json

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

package/svg/hand-coins.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.142433 5.8125C0.142433 6.8115 0.394433 7.74975 0.836933 8.5695C0.62996 8.65739 0.447722 8.79474 0.30621 8.96949C0.164697 9.14424 0.0682364 9.35105 0.0252912 9.57178C-0.0176541 9.7925 -0.00577094 10.0204 0.0598977 10.2354C0.125566 10.4505 0.243013 10.6462 0.401933 10.8053L3.64643 14.049C3.95198 14.3546 4.32385 14.5858 4.73318 14.7244C5.14251 14.8631 5.57829 14.9055 6.00668 14.8485L10.4924 14.25H12.8924V15H15.5174V13.875H14.0174V8.25H15.5174V7.125H12.8924V7.875H11.3909C11.7249 6.99496 11.8402 6.04697 11.7269 5.11253C11.6135 4.17809 11.2749 3.28516 10.7402 2.51051C10.2054 1.73585 9.49058 1.10266 8.65704 0.665352C7.8235 0.228047 6.89622 -0.00028052 5.95493 2.58646e-07C4.41336 2.58646e-07 2.93493 0.612387 1.84488 1.70244C0.75482 2.7925 0.142433 4.27093 0.142433 5.8125ZM5.95493 1.125C5.0719 1.12517 4.20686 1.37472 3.45942 1.84492C2.71198 2.31512 2.11253 2.98685 1.73009 3.78277C1.34765 4.57869 1.19776 5.46644 1.29769 6.3438C1.39762 7.22116 1.7433 8.05247 2.29493 8.742L4.64768 9.7995C4.6685 9.54613 4.74629 9.30073 4.87525 9.08164C5.00421 8.86255 5.18101 8.67542 5.39243 8.53425V8.25H4.64243V7.125H6.14243C6.24189 7.125 6.33727 7.08549 6.4076 7.01517C6.47792 6.94484 6.51743 6.84946 6.51743 6.75C6.51743 6.65054 6.47792 6.55516 6.4076 6.48483C6.33727 6.41451 6.24189 6.375 6.14243 6.375H5.76743C5.40208 6.37536 5.04916 6.24237 4.77491 6.00099C4.50066 5.7596 4.32393 5.42642 4.2779 5.06398C4.23187 4.70155 4.3197 4.33477 4.52491 4.03249C4.73012 3.73022 5.03859 3.51323 5.39243 3.42225V2.625H6.51743V3.375H7.26743V4.5H5.76743C5.66798 4.5 5.57259 4.53951 5.50227 4.60984C5.43194 4.68016 5.39243 4.77554 5.39243 4.875C5.39243 4.97446 5.43194 5.06984 5.50227 5.14017C5.57259 5.21049 5.66798 5.25 5.76743 5.25H6.14243C6.50778 5.24964 6.8607 5.38263 7.13496 5.62402C7.40921 5.8654 7.58593 6.19858 7.63196 6.56102C7.67799 6.92345 7.59016 7.29023 7.38495 7.59251C7.17975 7.89478 6.87127 8.11177 6.51743 8.20275V8.25H9.23843L10.1249 7.9545C10.4921 7.23989 10.6693 6.44291 10.6398 5.64006C10.6102 4.8372 10.3748 4.05542 9.95615 3.36973C9.53748 2.68405 8.94961 2.11748 8.24894 1.72439C7.54827 1.33131 6.75833 1.12491 5.95493 1.125ZM5.62343 11.4705L1.47593 9.60675C1.42279 9.58303 1.36303 9.57868 1.30701 9.59444C1.25099 9.6102 1.20227 9.64509 1.16929 9.69304C1.13632 9.74098 1.12118 9.79897 1.1265 9.85691C1.13182 9.91486 1.15727 9.96911 1.19843 10.0103L4.44143 13.2533C4.6248 13.4368 4.84801 13.5756 5.09372 13.6588C5.33943 13.7421 5.60103 13.7675 5.85818 13.7333L10.4182 13.125H12.8924V9H10.5464L9.42143 9.375H6.32993C6.18075 9.375 6.03767 9.43426 5.93219 9.53975C5.8267 9.64524 5.76743 9.78832 5.76743 9.9375C5.76743 10.0867 5.8267 10.2298 5.93219 10.3352C6.03767 10.4407 6.18075 10.5 6.32993 10.5H9.56243L10.4774 11.415L9.68243 12.21L9.09743 11.625H6.32993C6.07793 11.625 5.83793 11.5695 5.62343 11.4705Z"
+    fill="#1C2E45"
+    fill-opacity="0.6"
+  />
+</svg>

package/.nx/cache/12276756491762927325/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"africanies-africanies-theme.mjs","sources":["../../../../libs/africanies-theme/src/lib/mode-color.safelist.ts","../../../../libs/africanies-theme/src/lib/mode-color.service.ts","../../../../libs/africanies-theme/src/lib/theme.service.ts","../../../../libs/africanies-theme/src/africanies-africanies-theme.ts"],"sourcesContent":["/**\n * Tailwind safelist side-effect for shipping-mode color utilities.\n *\n * WHY this file exists: JIT/content scanning only keeps class names that appear\n * as *literal strings* in scanned sources. {@link ModeColorService} already\n * returns these literals, but keeping a dedicated comment list makes the\n * contract obvious for consumers who configure `safelist` or purge plugins.\n *\n * Do not rename these strings without updating ModeColorService and THEME.md.\n *\n * SFN (export / green):\n * text-export bg-export bg-export-subtle bg-export-light border-export\n * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15\n *\n * STN (import / orange):\n * text-import bg-import bg-import-subtle bg-import-light border-import\n * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15\n */\nexport const MODE_COLOR_SAFELIST = [\n  'text-export',\n  'bg-export',\n  'bg-export-subtle',\n  'bg-export-light',\n  'border-export',\n  'hover:bg-export-light',\n  'hover:bg-export-subtle',\n  'dark:bg-export/15',\n  'dark:hover:bg-export/15',\n  'text-import',\n  'bg-import',\n  'bg-import-subtle',\n  'bg-import-light',\n  'border-import',\n  'hover:bg-import-light',\n  'hover:bg-import-subtle',\n  'dark:bg-import/15',\n  'dark:hover:bg-import/15',\n] as const;\n","import { computed, inject, Injectable } from '@angular/core';\n\nimport { ShippingModeService } from '@africanies/africanies-core';\n\n/**\n * Tailwind class bundle for the active shipping mode (SFN export / STN import).\n *\n * Use these for **primary** product chrome: CTAs, selected controls, progress,\n * and accent text. Semantic colors (danger / warning) stay mode-independent.\n */\nexport interface ModeColorClasses {\n  /** Text color utility, e.g. `text-export`. */\n  text: string;\n  /** Solid background utility, e.g. `bg-export`. */\n  bg: string;\n  /** Soft background utility, e.g. `bg-export-subtle`. */\n  bgSubtle: string;\n  /** Border matching the mode accent, e.g. `border-export`. */\n  border: string;\n  /**\n   * Filled primary CTA — `variant=\"primary\"` on buttons.\n   * Includes hover utility as a literal so Tailwind keeps it.\n   */\n  primary: string;\n  /**\n   * Transparent / text-only CTA — `variant=\"ghost-primary\"` on buttons.\n   * Mode accent text + soft hover fill.\n   */\n  ghostPrimary: string;\n  /**\n   * Soft highlight for selected / active rows (works in dark mode).\n   */\n  soft: string;\n  /**\n   * Soft hover highlight for menus and lists.\n   */\n  softHover: string;\n}\n\n/**\n * Maps {@link ShippingModeService} to mode-accent Tailwind classes.\n *\n * - **SFN** → export green is primary\n * - **STN** → import orange is primary\n *\n * WHY literal class strings: Tailwind's scanner cannot see dynamically built\n * names like `` `text-${token}` ``. Returning full literals (`text-export`, …)\n * keeps utilities in the compiled CSS. See {@link MODE_COLOR_SAFELIST}.\n *\n * @example\n * ```html\n * @let colors = modeColor.classes();\n * <button type=\"button\" [class]=\"colors.primary\">Save</button>\n * <span [class]=\"colors.text\">Mode accent</span>\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ModeColorService {\n  private readonly shippingMode = inject(ShippingModeService);\n\n  /**\n   * Mode-dependent utility classes. Recomputes when shipping mode changes.\n   */\n  readonly classes = computed<ModeColorClasses>(() => {\n    // Literal strings required for Tailwind content detection — do not interpolate.\n    if (this.shippingMode.mode() === 'sfn') {\n      return {\n        text: 'text-export',\n        bg: 'bg-export',\n        bgSubtle: 'bg-export-subtle',\n        border: 'border-export',\n        primary:\n          'bg-export text-white border-transparent hover:bg-export-light',\n        ghostPrimary:\n          'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',\n        soft: 'bg-export-subtle dark:bg-export/15',\n        softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',\n      };\n    }\n    return {\n      text: 'text-import',\n      bg: 'bg-import',\n      bgSubtle: 'bg-import-subtle',\n      border: 'border-import',\n      primary:\n        'bg-import text-white border-transparent hover:bg-import-light',\n      ghostPrimary:\n        'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',\n      soft: 'bg-import-subtle dark:bg-import/15',\n      softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',\n    };\n  });\n}\n","import { DOCUMENT } from '@angular/common';\nimport { inject, Injectable, signal } from '@angular/core';\n\nimport { AFRICANIES_THEME_KEY, STORAGE_TOKEN } from '@africanies/africanies-storage';\n\nimport type { Theme } from './theme.types';\n\n/**\n * Application light/dark theme preference.\n *\n * WHY signals (not BehaviorSubject): theme is synchronous UI state read from\n * templates and other services; a signal avoids RxJS subscription boilerplate\n * and matches Angular 22 change detection. Persistence goes through\n * {@link STORAGE_TOKEN} so tests can swap storage without touching `localStorage`.\n *\n * Applies the Tailwind `darkMode: 'class'` contract by toggling `dark` on\n * `document.documentElement`, and sets `color-scheme` so native UI (date\n * pickers, scrollbars, form controls) matches the app theme — class-based\n * dark mode alone does not restyle browser chrome.\n *\n * @example\n * ```ts\n * // app.config.ts\n * import { inject, provideAppInitializer } from '@angular/core';\n * import { ThemeService } from '@africanies/africanies-theme';\n *\n * export const appConfig = {\n *   providers: [\n *     provideAppInitializer(() => {\n *       inject(ThemeService); // applies stored / system theme once\n *     }),\n *   ],\n * };\n *\n * // In a component\n * const theme = inject(ThemeService);\n * theme.toggle();\n * theme.setTheme('dark');\n * const current = theme.theme(); // 'light' | 'dark'\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class ThemeService {\n  private readonly storage = inject(STORAGE_TOKEN);\n  private readonly document = inject(DOCUMENT);\n\n  /**\n   * Current theme. Prefer reading via `theme()` in templates / computed values\n   * rather than caching the string, so dark-class consumers stay in sync.\n   */\n  readonly theme = signal<Theme>(this.resolveInitialTheme());\n\n  constructor() {\n    this.applyToDocument(this.theme());\n  }\n\n  /**\n   * Sets and persists the theme, updating the `dark` class and `color-scheme`\n   * on `<html>`.\n   *\n   * @param theme - Absolute preference to store.\n   */\n  setTheme(theme: Theme): void {\n    this.theme.set(theme);\n    this.applyToDocument(theme);\n    try {\n      this.storage.set(AFRICANIES_THEME_KEY, theme);\n    } catch {\n      // Persistence failure must not block the in-session visual toggle —\n      // private browsing / quota issues are transient for theme preference.\n    }\n  }\n\n  /**\n   * Flips between light and dark.\n   *\n   * @returns The theme after the toggle.\n   */\n  toggle(): Theme {\n    const next: Theme = this.theme() === 'light' ? 'dark' : 'light';\n    this.setTheme(next);\n    return next;\n  }\n\n  private resolveInitialTheme(): Theme {\n    try {\n      const stored = this.storage.get<Theme>(AFRICANIES_THEME_KEY);\n      if (stored === 'light' || stored === 'dark') {\n        return stored;\n      }\n    } catch {\n      // Fall through to system preference when storage is unavailable.\n    }\n    return this.prefersDark() ? 'dark' : 'light';\n  }\n\n  private prefersDark(): boolean {\n    const win = this.document.defaultView;\n    return !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;\n  }\n\n  private applyToDocument(theme: Theme): void {\n    const root = this.document.documentElement;\n    if (theme === 'dark') {\n      root.classList.add('dark');\n    } else {\n      root.classList.remove('dark');\n    }\n    // Native date/time pickers follow `color-scheme`, not Tailwind's `dark` class.\n    root.style.colorScheme = theme;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}