@africanies/angular-web-sdk 0.1.8 → 0.1.10

package/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts

@@ -7,7 +7,7 @@ import { AsyncQueryStateModel, ModuleFilterConfigModel, FilterStateModel, Filter
 export { AsyncQueryStateModel, DEFAULT_FILTER_TRANSPORT, DEFAULT_PAGE_SIZE, FILTER_CONFIGS, FilterConfigId, FilterFieldModel, FilterFieldType, FilterOptionModel, FilterOptionsSource, FilterParamsModel, FilterQueryBag, FilterStateModel, FilterTransport, ModuleFilterConfigModel, NOTIFICATION_PAGE_SIZE, PAGINATION_PAGE_SIZES, PaginationMetaModel, PaginationPageSize, clearFilterField, cloneFilterState, emptyFilterState, filterQueryKeys, fromFilterParams, hasFilterParams, resetFilterState, resolveFilterTransport, shipmentTrackingItemFilterConfig, toFilterParams, trackShipmentsFilterConfig, updateShipmentsFilterConfig, usersFilterConfig } from '@africanies/africanies-models';
 import * as _africanies_africanies_theme from '@africanies/africanies-theme';
 import { ModeColorService } from '@africanies/africanies-theme';
-import { AfricaniesHttpToastHandler, OverlayHandle, OverlayOpener } from '@africanies/africanies-core';
+import { AfricaniesHttpToastHandler, OverlayHandle, OverlayOpener, ShippingModeService } from '@africanies/africanies-core';
 import { Observable } from 'rxjs';
 import { ControlValueAccessor } from '@angular/forms';
 import * as _africanies_africanies_ui from '@africanies/africanies-ui';
@@ -654,14 +654,19 @@ declare class AlertComponent {
 /**
  * Semantic tone for {@link ChipComponent}.
  *
+ * Prefer these for common statuses. For one-off accents, pass {@link ChipComponent.color}
+ * instead — any CSS color with a faded background.
+ *
  * - `neutral` — generic label / count
  * - `success` — positive outcome (same green family as export)
  * - `warning` — caution / pending
  * - `danger` — error / exception
+ * - `info` — informational (theme blue)
+ * - `violet` / `teal` / `rose` / `cyan` — extra categorical tones
  * - `export` — SFN / outbound accent
  * - `import` — STN / inbound accent
  */
-type ChipVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'export' | 'import';
+type ChipVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'violet' | 'teal' | 'rose' | 'cyan' | 'export' | 'import';
 /**
  * Control size for {@link ChipComponent}.
  */
@@ -670,18 +675,25 @@ type ChipSize = 'sm' | 'md';
  * Compact status / category label.
  *
  * Soft fills stay readable in dark mode (translucent accent tints, not
- * light-only subtle backgrounds).
+ * light-only subtle backgrounds). Pass {@link color} for a custom accent —
+ * text uses that color and the background is a faded mix of the same.
  *
  * @example
  * ```html
  * <africanies-chip variant="success">Delivered</africanies-chip>
- * <africanies-chip variant="import" icon="truck">In transit</africanies-chip>
+ * <africanies-chip variant="violet">Priority</africanies-chip>
+ * <africanies-chip color="#0f766e">Pay Later</africanies-chip>
  * <africanies-chip variant="warning" [removable]="true" (removed)="clear()">Pending</africanies-chip>
  * ```
  */
 declare class ChipComponent {
-    /** Semantic tone. Defaults to `neutral`. */
+    /** Semantic tone. Defaults to `neutral`. Ignored when {@link color} is set. */
     readonly variant: _angular_core.InputSignal<ChipVariant>;
+    /**
+     * Optional CSS color (`#7c3aed`, `rgb(…)`, `oklch(…)`, …). When set, overrides
+     * {@link variant}: label uses the color and the fill is a faded mix of it.
+     */
+    readonly color: _angular_core.InputSignal<string | null>;
     /** Padding / type scale. Defaults to `sm` (table / dense UI). */
     readonly size: _angular_core.InputSignal<ChipSize>;
     /** Optional leading icon. */
@@ -696,11 +708,14 @@ declare class ChipComponent {
     /** Emitted when the remove control is activated. */
     readonly removed: _angular_core.OutputEmitterRef<void>;
     protected readonly iconSize: _angular_core.Signal<14 | 12>;
+    /** Trimmed custom accent, or `null` when using a named {@link variant}. */
+    protected readonly customAccent: _angular_core.Signal<string | null>;
     protected readonly hostClass: _angular_core.Signal<string>;
     /**
-     * Soft background + text per variant. Dark mode uses translucent accents so
-     * chips never wash out as near-white blobs.
-     * @returns Tailwind class string for the active variant.
+     * Soft background + text per variant, or the custom-color host class.
+     * Dark mode uses translucent accents so chips never wash out as near-white
+     * blobs.
+     * @returns Tailwind / host class string for the active tone.
      */
     private toneClass;
     /**
@@ -708,7 +723,7 @@ declare class ChipComponent {
      */
     protected onRemove(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "africanies-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "africanies-chip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
 }
 
 /** Known inbound / last-mile carrier slugs with bundled SVG marks. */
@@ -3603,7 +3618,9 @@ interface AfricaniesSideNavItem {
  * **Expanded rail:** branches start open by default (`expandBranchesByDefault`).
  * Clicking a parent only opens/closes the branch (no route change). When any
  * branch is open, a sticky collapse-all control sits above the list (top right).
- * The rail expand/collapse control stays pinned in the logo header.
+ * The rail expand/collapse control stays pinned in the logo header. Project
+ * chrome above the scrollable list with `pre-nav` (e.g. shipping modes) or
+ * below with `footer`.
  * **Collapsed rail:** clicking a parent expands the rail, opens the
  * branch, and activates the first enabled child (router or `activeId`).
  *
@@ -3718,7 +3735,7 @@ declare class SideNavComponent {
     private ensureAncestorsOpen;
     private findPath;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SideNavComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SideNavComponent, "africanies-side-nav", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "expandParents": { "alias": "expandParents"; "required": false; "isSignal": true; }; "expandBranchesByDefault": { "alias": "expandBranchesByDefault"; "required": false; "isSignal": true; }; "linkActiveOptions": { "alias": "linkActiveOptions"; "required": false; "isSignal": true; }; "showLogo": { "alias": "showLogo"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoMiniSrc": { "alias": "logoMiniSrc"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "activeId": "activeIdChange"; }, never, ["[brand]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SideNavComponent, "africanies-side-nav", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "expandParents": { "alias": "expandParents"; "required": false; "isSignal": true; }; "expandBranchesByDefault": { "alias": "expandBranchesByDefault"; "required": false; "isSignal": true; }; "linkActiveOptions": { "alias": "linkActiveOptions"; "required": false; "isSignal": true; }; "showLogo": { "alias": "showLogo"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoMiniSrc": { "alias": "logoMiniSrc"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "activeId": "activeIdChange"; }, never, ["[brand]", "[pre-nav]", "[footer]"], true, never>;
 }
 
 /** Router target for the app-shell header back control. */
@@ -3834,6 +3851,10 @@ declare function isNavItemActive(router: Router, item: NavRouteTarget, options:
 /**
  * Compact segmented control for view modes and filters.
  *
+ * Selected option uses a **solid brand pill** (white label) on a neutral track —
+ * same pattern as the portal shipping-mode toggle. With exactly two options the
+ * pill slides; with more options each selected chip fills in place.
+ *
  * ## Router mode (URL is source of truth)
  *
  * Set `routerLink` (and optional `queryParams`) on items. The selected pill
@@ -3879,12 +3900,37 @@ declare class SegmentComponent {
      */
     readonly keepScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly url;
-    protected readonly segmentChrome: _angular_core.Signal<string>;
-    protected readonly selectedClass: _angular_core.Signal<string>;
-    protected readonly idleClass: _angular_core.Signal<string>;
+    /** Two equal options → portal-style sliding brand pill. */
+    protected readonly useSlidingThumb: _angular_core.Signal<boolean>;
+    /** Index of the active option (0 / 1 for the sliding thumb). */
+    protected readonly activeIndex: _angular_core.Signal<number>;
     constructor();
     protected hrefFor(item: AfricaniesNavItem): string | null;
     protected isItemActive(item: AfricaniesNavItem): boolean;
+    /**
+     * Sliding thumb fill. STN / SFN options keep their own brand color so the
+     * pill matches mode identity; other pairs follow the active theme primary.
+     */
+    protected thumbFillClass(): string;
+    /**
+     * Option chrome: sliding mode keeps labels transparent over the thumb;
+     * multi-option mode paints a solid selected chip in place.
+     *
+     * @param item - Option being rendered.
+     * @returns Class string for the control.
+     */
+    protected optionChrome(item: AfricaniesNavItem): string;
+    /**
+     * Solid brand fill for a selected option / sliding thumb.
+     *
+     * Light + dark use the same SFN green / STN orange primaries so the control
+     * stays mode-identifiable on both surfaces (portal primary, not soft tint).
+     * Class strings are full literals so Tailwind keeps them.
+     *
+     * @param id - Option id (`stn` / `sfn` get fixed brands; else theme primary).
+     * @returns Background utility classes.
+     */
+    protected brandFillFor(id: string | null): string;
     protected selectLocal(item: AfricaniesNavItem): void;
     /**
      * Primary click navigates in-app without scrolling to top. Modified clicks
@@ -3904,12 +3950,13 @@ declare class SegmentComponent {
  * import orange; **from Nigeria** uses export green. Both tiles keep equal
  * chrome so unselected does not look like floating text.
  *
- * Project into `<africanies-side-nav>` with the `footer` attribute.
+ * Project into `<africanies-side-nav>` with the `pre-nav` attribute (above the
+ * nav list). `footer` still works for legacy placement under the list.
  *
  * @example
  * ```html
  * <africanies-side-nav [items]="nav" [(collapsed)]="collapsed">
- *   <africanies-shipping-mode-switch footer [collapsed]="collapsed()" />
+ *   <africanies-shipping-mode-switch pre-nav [collapsed]="collapsed()" />
  * </africanies-side-nav>
  * ```
  */
@@ -3928,10 +3975,20 @@ declare class ShippingModeSwitchComponent {
      * Icon-only stacked tiles when the side nav rail is collapsed.
      */
     readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * When true, the mode tiles are visible. Persisted in `localStorage`.
+     * Two-way bindable for hosts that need to force-open (e.g. onboarding).
+     */
+    readonly panelOpen: _angular_core.ModelSignal<boolean>;
     /** Active mode from {@link ShippingModeService}. */
     protected readonly mode: _angular_core.Signal<ShippingMode>;
-    /** Host padding / divider — tighter when the rail is collapsed. */
-    protected readonly hostClass: _angular_core.Signal<"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">;
+    protected readonly modeChipLabel: _angular_core.Signal<"STN" | "SFN">;
+    protected readonly modeChipVariant: _angular_core.Signal<ChipVariant>;
+    /** Host padding / divider — sits above the nav list (`border-b`). */
+    protected readonly hostClass: _angular_core.Signal<"block shrink-0 border-b border-border px-1.5 py-2 dark:border-white/10" | "block shrink-0 border-b border-border px-2 py-2.5 dark:border-white/10">;
+    constructor();
+    /** Show or hide the mode tiles. */
+    protected togglePanel(): void;
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
      * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -3950,7 +4007,7 @@ declare class ShippingModeSwitchComponent {
      */
     protected cardClass(option: ShippingMode): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShippingModeSwitchComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShippingModeSwitchComponent, "africanies-shipping-mode-switch", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShippingModeSwitchComponent, "africanies-shipping-mode-switch", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "panelOpen": { "alias": "panelOpen"; "required": false; "isSignal": true; }; }, { "panelOpen": "panelOpenChange"; }, never, never, true, never>;
 }
 
 /**
@@ -4349,7 +4406,7 @@ interface HeaderWeather {
     kind: HeaderWeatherKind;
     /** Celsius, when the forecast includes it. */
     temperatureC?: number;
-    /** City from IP geolocation, when known. */
+    /** City from reverse-geocode / IP geolocation, when known. */
     city?: string;
 }
 /**
@@ -4456,7 +4513,8 @@ declare class AppShellHeaderComponent {
     protected readonly greeting: _angular_core.Signal<_africanies_africanies_ui.HeaderGreeting | null>;
     protected readonly weatherIcon: _angular_core.Signal<"underline" | "info" | "warning" | "abacus" | "absolute-position" | "academy-cap" | "accessibility" | "accordion-menu" | "add-dock" | "adjust" | "adobe-flash" | "airplane" | "alarm" | "align-center" | "align-justify" | "align-left" | "align-right" | "alt-a" | "alt" | "ambulance" | "anchor" | "angle-double-down" | "angle-double-left" | "angle-double-right" | "angle-double-up" | "angle-down" | "angle-left" | "angle-right" | "angle-up" | "archive" | "archives" | "area-select" | "arrow-backward" | "arrow-circle-down-o" | "arrow-circle-down" | "arrow-circle-left-o" | "arrow-circle-left" | "arrow-circle-right-o" | "arrow-circle-right" | "arrow-circle-up-o" | "arrow-circle-up" | "arrow-down" | "arrow-forward" | "arrow-left" | "arrow-long-down" | "arrow-long-left" | "arrow-right" | "arrow-up" | "arrows-cross" | "arrows-long-h" | "arrows-long-right" | "arrows-long-up" | "arrows-long-v" | "arrows" | "asterisk" | "at" | "automation" | "backspace-a" | "backspace" | "backwards" | "ban" | "bar-chart-h" | "bar-chart-v" | "bar-chart" | "barcode" | "bed" | "bell-o" | "bell-slash-o" | "bell-slash" | "bell" | "boat" | "bold" | "bolt" | "bomb" | "book-dollar" | "book-percent" | "book" | "bookmark-o" | "bookmark" | "briefcase" | "browser" | "bug-o" | "bug" | "building-o" | "building" | "bullets" | "bullseye" | "bus" | "button" | "calc-book" | "calc" | "calendar-briefcase" | "calendar-clock" | "calendar-envelope" | "calendar-o" | "calendar-user" | "calendar" | "camera" | "car" | "caret-down" | "caret-left" | "caret-right" | "caret-square-down-o" | "caret-square-left-o" | "caret-square-right-o" | "caret-square-up-o" | "caret-up" | "cart-o" | "cart" | "cash" | "chart-3d" | "chart-grid" | "chart-line" | "chart-timeline" | "chart" | "chat" | "check-circle-o" | "check-circle" | "check-square-o" | "check-square" | "check" | "chevron-circle-down-o" | "chevron-circle-down" | "chevron-circle-left-o" | "chevron-circle-left" | "chevron-circle-right-o" | "chevron-circle-right" | "chevron-circle-up-o" | "chevron-circle-up" | "chevron-down-small" | "chevron-down" | "chevron-left-small" | "chevron-left" | "chevron-right-small" | "chevron-right" | "chevron-up-small" | "chevron-up" | "child" | "circle-thin" | "circle" | "clipboard-check" | "clipboard-cross" | "clipboard-heart" | "clipboard-pulse" | "clipboard-text" | "clipboard-user" | "clipboard" | "clock" | "close-big" | "close-circle-o" | "close-circle" | "close-small" | "close" | "cloud-download-o" | "cloud-download" | "cloud-o" | "cloud-upload-o" | "cloud-upload" | "cloud" | "cluster" | "code" | "coffee" | "cog-o" | "cog" | "cogs" | "coin-piles" | "coins" | "combobox" | "comment-ellipsis-o" | "comment-ellipsis" | "comment-o" | "comment" | "comments-o" | "comments" | "compile" | "compress-square" | "compress" | "connect-o" | "connect" | "controller" | "copy-o" | "copy" | "copyright" | "corner-lower-left" | "corner-lower-right" | "corner-upper-left" | "corner-upper-right" | "credit-card" | "crop" | "cross-cutlery" | "crosshairs" | "css" | "ctrl-a" | "ctrl" | "cube" | "cubes" | "curly-brackets" | "cursor-o" | "cursor" | "cutlery" | "dashboard" | "database" | "date-input" | "deindent" | "del-a" | "del" | "dental-chair" | "desktop" | "diamond-o" | "diamond" | "diasporan-partner" | "diploma-scroll" | "diploma" | "disc" | "doctor-briefcase" | "doctor" | "dollar" | "dot-circle" | "download-alt" | "download" | "drop" | "edit" | "eject" | "elastic" | "ellipsis-circle-o" | "ellipsis-circle" | "ellipsis-dots-h" | "ellipsis-dots-v" | "ellipsis-h" | "ellipsis-v" | "enter-arrow" | "enter" | "envelope-o" | "envelope-open-o" | "envelope-open" | "envelope" | "envelopes-o" | "envelopes" | "eraser" | "esc-a" | "esc" | "euro" | "exchange" | "exclamation-circle-o" | "exclamation-circle" | "exclamation" | "exit-o" | "exit" | "expand-full" | "expand-square" | "expand" | "external-browser" | "external-link" | "eye-slash" | "eye" | "eyedropper" | "facebook-square" | "facebook" | "factory" | "family" | "fast-backward" | "fast-forward" | "female" | "file-add" | "file-code" | "file-font" | "file-movie" | "file-o" | "file-picture" | "file-presentation" | "file-process" | "file-refresh" | "file-remove" | "file-search" | "file-sound" | "file-start" | "file-table" | "file-text-o" | "file-text" | "file-tree-small" | "file-tree-sub" | "file-tree" | "file-zip" | "file" | "fill" | "film" | "filter" | "fire" | "flag-checkered" | "flag-o" | "flag" | "flash" | "flask" | "flight-landing" | "flight-takeoff" | "flip-h" | "flip-v" | "folder-add" | "folder-o" | "folder-open-o" | "folder-open" | "folder-remove" | "folder-search" | "folder" | "font" | "form" | "forward" | "frown-o" | "funcion" | "funnel" | "gamepad" | "gavel" | "gift" | "glass" | "glasses" | "globe-wire" | "globe" | "golf" | "google-plus-square" | "google-plus" | "grab" | "grid-bevel" | "grid-big-o" | "grid-big" | "grid-h" | "grid-small-o" | "grid-small" | "grid-v" | "grid" | "group" | "hammer" | "hand-coins" | "hand" | "handle-corner" | "hands-up" | "handshake" | "harddrive-o" | "harddrive" | "hash" | "header" | "headphones" | "headset" | "health-card" | "heart-o" | "heart" | "home-o" | "home" | "hospital" | "hourglass-empty" | "hourglass-end" | "hourglass-start" | "hourglass" | "inbox" | "indent" | "info-circle-o" | "info-circle" | "input" | "insert" | "institution" | "invoice" | "italic" | "key-o" | "key" | "keyboard-o" | "keyboard" | "laptop" | "layout" | "level-down-bold" | "level-down" | "level-left-bold" | "level-left" | "level-right-bold" | "level-right" | "level-up-bold" | "level-up" | "lifebuoy" | "lightbulb" | "line-bar-chart" | "line-chart" | "line-h" | "line-v" | "lines-list" | "lines" | "link" | "list-ol" | "list-select" | "list-ul" | "list" | "location-arrow-circle-o" | "location-arrow-circle" | "location-arrow" | "lock" | "magic" | "magnet" | "mailbox" | "male" | "map-marker" | "margin-bottom" | "margin-left" | "margin-right" | "margin-top" | "margin" | "medal" | "megaphone" | "meh-o" | "menu" | "microphone" | "mini-partner" | "minus-circle-o" | "minus-circle" | "minus-square-o" | "minus" | "mobile-browser" | "mobile-retro" | "mobile" | "modal-list" | "modal" | "money-deposit" | "money-exchange" | "money-withdraw" | "money" | "moon-o" | "moon" | "morning" | "movie" | "music" | "mute" | "native-button" | "newspaper" | "notebook" | "number-count" | "nurse" | "office" | "open-book" | "option-a" | "option" | "options" | "orientation" | "out" | "outbox" | "package" | "padding-bottom" | "padding-left" | "padding-right" | "padding-top" | "padding" | "paint-roll" | "paintbrush" | "palette" | "panel" | "paperclip" | "paperplane-o" | "paperplane" | "paragraph" | "partner" | "password" | "paste" | "pause" | "pencil" | "phone-landline" | "phone" | "picture" | "pie-bar-chart" | "pie-chart" | "piggy-bank-coin" | "piggy-bank" | "pill" | "pills" | "pin-post" | "pin" | "play-circle-o" | "play-circle" | "play" | "plug" | "plus-circle-o" | "plus-circle" | "plus-minus" | "plus-square-o" | "plus" | "pointer" | "power-off" | "presentation" | "print" | "progressbar" | "puzzle-piece" | "pyramid-chart" | "qrcode" | "question-circle-o" | "question-circle" | "question" | "quote-left" | "quote-right" | "random" | "raster-lower-left" | "raster" | "records" | "recycle" | "refresh" | "reply-all" | "reply" | "resize-h" | "resize-v" | "retweet" | "rhombus" | "road-branch" | "road-branches" | "road-split" | "road" | "rocket" | "rotate-left" | "rotate-right" | "rss-square" | "rss" | "safe-lock" | "safe" | "scale-unbalance" | "scale" | "scatter-chart" | "scissors" | "screwdriver" | "search-minus" | "search-plus" | "search" | "select" | "server" | "share-square" | "share" | "shield" | "shift-arrow" | "shift" | "shop" | "sign-in-alt" | "sign-in" | "sign-out-alt" | "sign-out" | "signal" | "sitemap" | "slider" | "sliders" | "smiley-o" | "sort" | "sound-disable" | "spark-line" | "specialist" | "spinner-arc" | "spinner-third" | "spinner" | "spline-area-chart" | "spline-chart" | "split-h" | "split-v" | "split" | "spoon" | "square-shadow" | "star-half-left-o" | "star-half-left" | "star-half-right-o" | "star-half-right" | "star-o" | "star" | "start-cog" | "step-backward" | "step-forward" | "stethoscope" | "stock" | "stop-cog" | "stop" | "stopwatch" | "storage" | "strikethrough" | "subscript" | "suitcase" | "sun-down" | "sun-o" | "sun-rise" | "superscript" | "sword" | "tab-a" | "tab" | "table" | "tablet" | "tabs" | "tag" | "tags" | "tasks" | "taxi" | "teeth" | "terminal" | "text-height" | "text-input" | "text-label" | "text-width" | "thin-square" | "thumbs-down-o" | "thumbs-down" | "thumbs-up-o" | "thumbs-up" | "ticket" | "time-backward" | "time-forward" | "timer" | "toolbox" | "tools" | "tooth" | "touch" | "train" | "trash" | "tree-table" | "trending-down" | "trending-up" | "trophy" | "truck" | "twin-col-select" | "twitter-square" | "twitter" | "umbrella" | "unlink" | "unlock" | "upload-alt" | "upload" | "user-card" | "user-check" | "user-clock" | "user-heart" | "user-star" | "user" | "users" | "vaadin-h" | "vaadin-v" | "viewport" | "vimeo-square" | "vimeo" | "volume-down" | "volume-off" | "volume-up" | "volume" | "wallet" | "warehouse" | "workplace" | "wrench" | "youtube-square" | "youtube">;
     protected readonly weatherTemp: _angular_core.Signal<string | null>;
-    protected readonly weatherPlace: _angular_core.Signal<string>;
+    protected readonly weatherCondition: _angular_core.Signal<string>;
+    protected readonly weatherCity: _angular_core.Signal<string | null>;
     protected readonly weatherAriaLabel: _angular_core.Signal<string>;
     protected readonly unreadCount: _angular_core.Signal<number>;
     protected readonly unreadBadge: _angular_core.Signal<string>;
@@ -4805,8 +4863,10 @@ interface TableSortChange {
  * `<ng-template africaniesCellDef="key">` templates. Columns without a matching
  * template fall back to rendering `row[key]` as plain text.
  *
- * Optional toolbar: top-left **Refresh** (`showRefresh` → {@link refreshClick}).
- * Hidden while the body shows empty or error — those states expose Retry instead.
+ * Optional toolbar: top-left **shipping mode** segment (on by default;
+ * `[showShippingMode]="false"` to hide) and **Refresh** (`showRefresh` →
+ * {@link refreshClick}). Refresh is hidden while
+ * the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
  * spins (do not swap to a blocking loader). Use {@link loading} when the page
  * of data is changing (pagination / size): rows stay on screen, a keep-rows
@@ -4835,8 +4895,9 @@ interface TableSortChange {
  * and never reorder local rows.
  *
  * **Expandable rows:** project `<ng-template africaniesRowDetail="Label" let-row>`
- * templates. A leading chevron column appears; the expanded panel renders each
- * label with its template value in a responsive grid.
+ * templates. A leading chevron column appears; the expanded panel sticks to the
+ * scrollport width (so it does not scroll horizontally with the columns) and
+ * lays out label/value pairs in a wrapping auto-fill grid.
  *
  * @typeParam T - Row record shape.
  *
@@ -4879,7 +4940,24 @@ interface TableSortChange {
  * page scroll is unchanged.
  */
 declare class TableComponent<T = unknown> {
-    protected readonly modeColor: ModeColorService;
+    private readonly destroyRef;
+    protected readonly shipping: ShippingModeService;
+    /** Local STN / SFN segment options for {@link showShippingMode}. */
+    protected readonly shippingModeItems: AfricaniesNavItem[];
+    /**
+     * Segment selection mirror of {@link ShippingModeService.mode}. Kept local
+     * so a denied {@link ShippingModeService.requestModeChange} can snap the
+     * pills back when the service mode did not change.
+     */
+    protected readonly shippingModeActiveId: _angular_core.WritableSignal<string>;
+    /** Scrollport that owns horizontal overflow for the main grid. */
+    private readonly scrollport;
+    /**
+     * Visible width of {@link scrollport}. Applied to the expand panel so
+     * details stay within the viewport and do not scroll with the columns.
+     */
+    protected readonly scrollportWidthPx: _angular_core.WritableSignal<number>;
+    constructor();
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -4913,6 +4991,13 @@ declare class TableComponent<T = unknown> {
      * server-side `order` param. Omitted / null means no column is active.
      */
     readonly sort: _angular_core.InputSignal<TableSortChange | null>;
+    /**
+     * Show the Shipping to / from Nigeria segment above the table (top-left).
+     * On by default; set `[showShippingMode]="false"` to hide (e.g. modals).
+     * Writes through {@link ShippingModeService.requestModeChange} so feature
+     * guards still run.
+     */
+    readonly showShippingMode: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Show a Refresh button above the table (top-left) once rows are on screen.
      * Hidden during in-grid empty/error — those use Retry in the body. Host refetches
@@ -5004,10 +5089,17 @@ declare class TableComponent<T = unknown> {
     protected readonly colSpan: _angular_core.Signal<number>;
     protected readonly errorMessage: _angular_core.Signal<string>;
     protected readonly staleError: _angular_core.Signal<string | null>;
-    protected readonly bodyKind: _angular_core.Signal<"error" | "rows" | "loading" | "empty">;
+    protected readonly bodyKind: _angular_core.Signal<"loading" | "error" | "empty" | "rows">;
     protected readonly paginationLoading: _angular_core.Signal<boolean>;
     /** Top-left Refresh — only when rows are on screen (empty/error use in-body Retry). */
     protected readonly showToolbarRefresh: _angular_core.Signal<boolean>;
+    /**
+     * Applies a shipping-mode segment selection through
+     * {@link ShippingModeService.requestModeChange}.
+     *
+     * @param id - Segment id (`stn` / `sfn`) or null.
+     */
+    protected onShippingModeChange(id: string | null): void;
     protected readonly visibleRowIds: _angular_core.Signal<string[]>;
     protected readonly someRowsExpanded: _angular_core.Signal<boolean>;
     /** Lookup map rebuilt when projected cell defs change. */
@@ -5042,8 +5134,9 @@ declare class TableComponent<T = unknown> {
      */
     protected headerRowClass(): string;
     /**
-     * Opaque mode soft fill for header cells (sticky-safe in dark mode).
-     * @returns Soft solid background utilities.
+     * Opaque header fill (sticky-safe). Neutral chrome — not mode-accented.
+     * Light `#f0f2f5` / dark elevated ink surface.
+     * @returns Background utility classes.
      */
     protected headerSoftClass(): string;
     /**
@@ -5161,7 +5254,7 @@ declare class TableComponent<T = unknown> {
      */
     protected onSortHeaderClick(key: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "africanies-table", never, { "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "rowTrackBy": { "alias": "rowTrackBy"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "refreshLabel": { "alias": "refreshLabel"; "required": false; "isSignal": true; }; "refreshing": { "alias": "refreshing"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterCount": { "alias": "filterCount"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; "exportLabel": { "alias": "exportLabel"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, { "rowExpandChange": "rowExpandChange"; "sortChange": "sortChange"; "refreshClick": "refreshClick"; "filterClick": "filterClick"; "exportClick": "exportClick"; "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, ["cellDefs", "headerCellDefs", "rowDetailDefs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent<any>, "africanies-table", never, { "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "rowTrackBy": { "alias": "rowTrackBy"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "showShippingMode": { "alias": "showShippingMode"; "required": false; "isSignal": true; }; "showRefresh": { "alias": "showRefresh"; "required": false; "isSignal": true; }; "refreshLabel": { "alias": "refreshLabel"; "required": false; "isSignal": true; }; "refreshing": { "alias": "refreshing"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "showFilter": { "alias": "showFilter"; "required": false; "isSignal": true; }; "filterLabel": { "alias": "filterLabel"; "required": false; "isSignal": true; }; "filterCount": { "alias": "filterCount"; "required": false; "isSignal": true; }; "showExport": { "alias": "showExport"; "required": false; "isSignal": true; }; "exportLabel": { "alias": "exportLabel"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, { "rowExpandChange": "rowExpandChange"; "sortChange": "sortChange"; "refreshClick": "refreshClick"; "filterClick": "filterClick"; "exportClick": "exportClick"; "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, ["cellDefs", "headerCellDefs", "rowDetailDefs"], never, true, never>;
 }
 
 /** Page number or a gap marker for windowed pagination. */

package/libs/africanies-core/src/index.ts

@@ -210,9 +210,9 @@ export {
 
 // User notifications (auth required)
 export {
+  isNotificationExternalLink,
   mapNotification,
   mapNotificationInboxItem,
-  isNotificationExternalLink,
   mapNotificationList,
   mapNotificationPayload,
   NOTIFICATION_READ_PATH,

package/libs/africanies-core/src/lib/notification/notification-link.ts

@@ -12,7 +12,10 @@ const QUERY_SHIPMENT_APP = 'shipment_app';
 const LEGACY_PORTAL_HOST =
   /^(?:test-)?(?:admin|customer)-(?:export|import)\.africaniestest\.com$/i;
 
-/** Signed export downloads and other hosts that must not be rewritten in-app. */
+/**
+ * Signed export downloads and other hosts that must not be rewritten in-app.
+ * @param link
+ */
 export function isNotificationExternalLink(link: string): boolean {
   const trimmed = decodeNotificationLink(link).trim();
   if (!trimmed) {
@@ -39,6 +42,8 @@ export function isNotificationExternalLink(link: string): boolean {
  * - Legacy portal hosts become relative `/portal/...` paths with query preserved.
  * - When the notification already includes `shipment_app`, it is kept as-is.
  * - Otherwise classic host / `shipment_app` rewriting applies for portal URLs.
+ * @param link
+ * @param mode
  */
 export function resolveNotificationLinkForMode(
   link: string | null | undefined,

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -12,7 +12,7 @@
  * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
- * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
+ * dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
  *
  * STN (import / orange):
  * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong
@@ -35,7 +35,7 @@ export const MODE_COLOR_SAFELIST = [
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
   'dark:hover:bg-export-light',
-  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
+  'dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
   'dark:bg-export',
   'dark:text-export',
   'dark:border-export',

package/libs/africanies-theme/src/lib/mode-color.service.spec.ts

@@ -26,14 +26,16 @@ describe('ModeColorService', () => {
     service = TestBed.inject(ModeColorService);
   });
 
-  it('uses accessible export-strong fills and text in SFN light mode', () => {
+  it('uses export brand fills and text for SFN in light and dark', () => {
     const classes = service.classes();
-    expect(classes.text).toContain('text-export-strong');
-    expect(classes.primary).toContain('bg-export-strong');
-    expect(classes.ghostPrimary).toContain('text-export-strong');
-    expect(classes.activeFill).toContain('bg-export-strong');
-    expect(classes.stroked).toContain('text-export-strong');
-    expect(classes.stroked).toContain('border-export-strong');
+    const primaryTokens = classes.primary.split(/\s+/);
+    expect(classes.text.split(/\s+/)).toContain('text-export');
+    expect(primaryTokens).toContain('bg-export');
+    expect(primaryTokens).not.toContain('bg-export-strong');
+    expect(classes.ghostPrimary.split(/\s+/)).toContain('text-export');
+    expect(classes.activeFill.split(/\s+/)).toContain('bg-export');
+    expect(classes.stroked.split(/\s+/)).toContain('text-export');
+    expect(classes.stroked.split(/\s+/)).toContain('border-export');
   });
 
   it('keeps bright export accents for dark-mode companions in SFN', () => {

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -9,7 +9,9 @@ import { ShippingModeService } from '@africanies/africanies-core';
  * and accent text. Semantic colors (danger / warning) stay mode-independent.
  */
 export interface ModeColorClasses {
-  /** Accessible accent text — `text-export-strong` in light, `text-export` in dark. */
+  /**
+   * Accessible accent text — mode brand color in light and dark.
+   */
   text: string;
   /** Solid background utility, e.g. `bg-export`. */
   bg: string;
@@ -80,22 +82,22 @@ export class ModeColorService {
     // Literal strings required for Tailwind content detection — do not interpolate.
     if (this.shippingMode.mode() === 'sfn') {
       return {
-        text: 'text-export-strong dark:text-export',
+        text: 'text-export dark:text-export',
         bg: 'bg-export',
         bgSubtle: 'bg-export-subtle',
         border: 'border-export',
         primary:
-          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:hover:bg-export-light',
+          'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:hover:bg-export-light',
         ghostPrimary:
-          'bg-transparent text-export-strong border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
+          'bg-transparent text-export border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
         softSolid:
-          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
+          'bg-export-subtle dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
         activeFill:
-          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:text-white dark:hover:bg-export-light',
+          'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:text-white dark:hover:bg-export-light',
         stroked:
-          'bg-surface text-export-strong border-export-strong hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
+          'bg-surface text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
       };
     }
     return {

package/libs/africanies-theme/tailwind-preset.cjs

@@ -270,7 +270,7 @@ module.exports = {
           hover: '#e9eef5',
         },
         export: {
-          DEFAULT: '#1cbd5d',
+          DEFAULT: '#26bd5d',
           light: '#24dc6d',
           subtle: '#e4fff3',
           tint: '#f2fff8',
@@ -282,8 +282,8 @@ module.exports = {
           DEFAULT: '#f08829',
           light: '#ffa95b',
           subtle: '#fffcef',
-          // Accessible normal-text / white-text-control foreground (6.20:1).
-          strong: '#9a4b0b',
+          // Brand orange (same as DEFAULT) — portal STN primary.
+          strong: '#f08829',
           hover: '#7f3e09',
         },
         danger: {

package/libs/africanies-ui/src/lib/avatar/avatar-menu.component.ts

@@ -37,28 +37,32 @@ import { AvatarComponent, type AvatarSize } from './avatar.component';
     AfricaniesIconComponent,
   ],
   template: `
-    <africanies-action-menu
-      [items]="menuItems()"
-      [ariaLabel]="ariaLabel()"
-      [disabled]="disabled()"
-    >
-      <button
-        type="button"
-        africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
-        [attr.aria-label]="ariaLabel()"
+    @if (menuItems().length > 0) {
+      <africanies-action-menu
+        [items]="menuItems()"
+        [ariaLabel]="ariaLabel()"
+        [disabled]="disabled()"
       >
-        <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
-        @if (showCaret()) {
-          <africanies-icon
-            name="chevron-down"
-            [size]="14"
-            class="shrink-0 text-neutral-600 dark:text-neutral-400"
-            aria-hidden="true"
-          />
-        }
-      </button>
-    </africanies-action-menu>
+        <button
+          type="button"
+          africaniesActionMenuTrigger
+          class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+          [attr.aria-label]="ariaLabel()"
+        >
+          <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+          @if (showCaret()) {
+            <africanies-icon
+              name="chevron-down"
+              [size]="14"
+              class="shrink-0 text-neutral-600 dark:text-neutral-400"
+              aria-hidden="true"
+            />
+          }
+        </button>
+      </africanies-action-menu>
+    } @else {
+      <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+    }
   `,
 })
 export class AvatarMenuComponent {

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

@@ -65,29 +65,34 @@ describe('ButtonComponent', () => {
   });
 
   it('should apply primary variant classes by default (SFN / export)', () => {
-    expect(button.className).toContain('bg-export-strong');
-    expect(button.className).toContain('text-white');
+    const tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('bg-export');
+    expect(tokens).toContain('text-white');
+    expect(tokens).not.toContain('bg-export-strong');
   });
 
   it('should switch primary to import orange when mode is STN', () => {
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('bg-import-strong');
-    expect(button.className).not.toContain('bg-export-strong');
+    const tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('bg-import-strong');
+    expect(tokens).not.toContain('bg-export');
   });
 
   it('should switch ghost-primary text accent with shipping mode', () => {
     host.variant.set('ghost-primary');
     fixture.detectChanges();
-    expect(button.className).toContain('text-export-strong');
-    expect(button.className).toContain('bg-transparent');
+    let tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('text-export');
+    expect(tokens).toContain('bg-transparent');
 
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('text-import-strong');
-    expect(button.className).not.toContain('text-export-strong');
+    tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('text-import-strong');
+    expect(tokens).not.toContain('text-export');
   });
 
   it('should switch variant and size classes', () => {