@africanies/angular-web-sdk 0.1.5 → 0.1.7

package/.nx/cache/{18132311043100376919 → 14995846848874973576}/dist/libs/africanies-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/africanies-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
@@ -8,10 +8,10 @@
     "@angular/forms": "^22.0.0",
     "@angular/router": "^22.0.0",
     "rxjs": "^7.8.0",
-    "@africanies/africanies-models": "^0.0.2",
-    "@africanies/africanies-icons": "^0.0.1",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-theme": "^0.0.1"
+    "@africanies/africanies-models": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-icons": ">=0.0.1 <0.1.0",
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-theme": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/.nx/cache/{5741611231803799383 → 14995846848874973576}/dist/libs/africanies-ui/types/africanies-africanies-ui.d.ts

@@ -17,13 +17,14 @@ import { IsActiveMatchOptions, ActivatedRouteSnapshot, Router, UrlTree } from '@
  * Visual emphasis for {@link ButtonComponent}.
  *
  * - `primary` — filled mode accent (SFN green / STN orange) for the main action
- * - `secondary` — outlined chrome for secondary actions
+ * - `secondary` — stroked mode accent (white + mode border/text; portal `.btn-stroked`)
+ * - `flat` — neutral chrome (white + ink + soft border; portal `.btn-flat`)
  * - `ghost` — neutral text-only for low-emphasis actions (Cancel, tertiary)
  * - `ghost-primary` — text-only mode accent (SFN green / STN orange)
  * - `ghost-danger` — text-only destructive actions (Clear, Remove)
  * - `danger` — destructive confirmations and deletes
  */
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'ghost-primary' | 'ghost-danger' | 'underline' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'flat' | 'ghost' | 'ghost-primary' | 'ghost-danger' | 'underline' | 'danger';
 /**
  * Control size for {@link ButtonComponent}.
  */
@@ -163,14 +164,31 @@ declare class CopyButtonComponent {
 
 /**
  * Option row for {@link ActionMenuComponent}.
+ *
+ * Set optional {@link routerLink} (and `queryParams` / `fragment`) so the row
+ * renders as an `<a href>` — right-click / ⌘-click can open in a new tab.
+ * Primary click still runs {@link onClick} when provided; otherwise the menu
+ * navigates via the router (same pattern as tabs / segment).
  */
 interface AfricaniesMenuItem {
     /** Visible label. */
     label: string;
-    /** Invoked when the user activates this row (then the menu closes). */
-    onClick: () => void;
+    /**
+     * Invoked on primary activation (then the menu closes).
+     * Optional when {@link routerLink} is set — the menu navigates instead.
+     */
+    onClick?: () => void;
     /** Optional leading icon from `@africanies/africanies-icons`. */
     icon?: IconName;
+    /**
+     * Optional Angular router link (`string` or commands array).
+     * When set, the row is an `<a>` with a real `href` for open-in-new-tab.
+     */
+    routerLink?: string | readonly unknown[];
+    /** Optional query params passed with {@link routerLink}. */
+    queryParams?: Record<string, unknown>;
+    /** Optional URL fragment with {@link routerLink}. */
+    fragment?: string;
     /** When true, the item cannot be activated. */
     disabled?: boolean;
     /** Destructive styling (e.g. Delete). */
@@ -186,6 +204,9 @@ interface AfricaniesMenuItem {
  * clipped by table `overflow`. Default trigger is a ghost ellipsis button;
  * project a custom control with {@link ActionMenuTriggerDirective}.
  *
+ * Items with {@link AfricaniesMenuItem.routerLink} render as anchors so users
+ * can right-click / modified-click to open in a new tab.
+ *
  * @example
  * ```html
  * <!-- Default icon trigger (table row) -->
@@ -201,7 +222,12 @@ interface AfricaniesMenuItem {
  * ```ts
  * rowActions(row: Shipment): AfricaniesMenuItem[] {
  *   return [
- *     { label: 'Open', icon: 'eye', onClick: () => this.open(row) },
+ *     {
+ *       label: 'Open',
+ *       icon: 'eye',
+ *       routerLink: ['/shipments', row.id],
+ *       onClick: () => this.open(row),
+ *     },
  *     { label: 'Edit', icon: 'edit', onClick: () => this.edit(row) },
  *     {
  *       label: 'Delete',
@@ -215,6 +241,7 @@ interface AfricaniesMenuItem {
  * ```
  */
 declare class ActionMenuComponent {
+    private readonly router;
     protected readonly panelPositions: ConnectedPosition[];
     private readonly panelRef;
     private readonly projectedTrigger;
@@ -230,12 +257,19 @@ declare class ActionMenuComponent {
     protected readonly hasCustomTrigger: _angular_core.Signal<boolean>;
     protected itemDomId(index: number): string;
     protected itemClass(item: AfricaniesMenuItem, index: number): string;
+    protected hrefFor(item: AfricaniesMenuItem): string | null;
     protected onTriggerClick(event: MouseEvent): void;
     protected onTriggerKeydown(event: KeyboardEvent): void;
     protected onPanelKeydown(event: KeyboardEvent): void;
     protected onOutsideClick(event: MouseEvent): void;
     protected onOverlayDetach(): void;
+    /**
+     * Primary click on a routed item: in-app activate via {@link onClick} or
+     * router. Modified clicks keep native link behaviour (new tab).
+     */
+    protected onRoutedItemClick(event: MouseEvent, item: AfricaniesMenuItem): void;
     protected selectItem(item: AfricaniesMenuItem): void;
+    private activateItem;
     protected toggle(): void;
     protected openMenu(): void;
     protected close(): void;
@@ -522,6 +556,46 @@ declare class LoadingStateComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingStateComponent, "africanies-loading-state", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Visual density for {@link AccordionComponent}.
+ *
+ * - `md` — page sections (pay review, top-level cards)
+ * - `sm` — nested panels (e.g. export boxes inside a manifest box)
+ */
+type AccordionSize = 'md' | 'sm';
+/**
+ * Bordered expandable panel with animated fold — the pattern used on
+ * Manifest detail and Make Payment review.
+ *
+ * Parent owns open state via {@link open} (`model()` / `[(open)]`).
+ *
+ * @example
+ * ```html
+ * <africanies-accordion
+ *   title="Customer Information"
+ *   [open]="isOpen('customer')"
+ *   (openChange)="onOpenChange('customer', $event)"
+ * >
+ *   <dl>…</dl>
+ * </africanies-accordion>
+ * ```
+ */
+declare class AccordionComponent {
+    /** Plain-text header. Prefer projected `[africaniesAccordionTitle]` for rich titles. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Whether the panel body is expanded. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Padding / chevron density. */
+    readonly size: _angular_core.InputSignal<AccordionSize>;
+    protected readonly chevronSize: _angular_core.Signal<14 | 16>;
+    protected readonly shellClass: _angular_core.Signal<"rounded-lg border border-border dark:border-white/10" | "rounded-xl border border-border dark:border-white/10">;
+    protected readonly triggerClass: _angular_core.Signal<"flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-ink dark:text-white" | "flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-ink dark:text-white">;
+    protected readonly bodyClass: _angular_core.Signal<"border-t border-border px-3 py-2 dark:border-white/10" | "border-t border-border px-4 py-3 dark:border-white/10">;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "africanies-accordion", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[africaniesAccordionTitle]", "*"], true, never>;
+}
+
 /**
  * Visual tone for {@link AlertComponent}.
  *
@@ -3517,9 +3591,10 @@ interface AfricaniesSideNavItem {
 /**
  * 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`).
@@ -3850,7 +3925,7 @@ declare class ShippingModeSwitchComponent {
     /** 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 hostClass: _angular_core.Signal<"block shrink-0 border-t border-strong px-1.5 py-3 dark:border-white/10" | "block shrink-0 border-t border-strong px-2 py-3 dark:border-white/10">;
     /**
      * Requests a mode change through {@link ShippingModeService.requestModeChange}
      * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -4049,6 +4124,7 @@ declare class NotificationDrawerPanel {
     private observer;
     protected readonly viewLinkClass: _angular_core.Signal<"inline-flex cursor-pointer items-center gap-1 self-start text-caption font-semibold underline underline-offset-[3px] transition-colors text-import decoration-import/35 hover:decoration-import dark:text-import-light dark:decoration-import-light/40 dark:hover:decoration-import-light" | "inline-flex cursor-pointer items-center gap-1 self-start text-caption font-semibold underline underline-offset-[3px] transition-colors text-export decoration-export/35 hover:decoration-export dark:text-export-light dark:decoration-export-light/40 dark:hover:decoration-export-light">;
     protected readonly title: _angular_core.Signal<string>;
+    private readonly seededItems;
     protected readonly items: _angular_core.WritableSignal<AfricaniesNotification[]>;
     protected readonly markingId: _angular_core.WritableSignal<string | null>;
     protected readonly markingAll: _angular_core.WritableSignal<boolean>;
@@ -4218,7 +4294,7 @@ declare class AppShellComponent {
     protected readonly showContentChrome: _angular_core.Signal<boolean>;
     /** Full height in preview embeds so absolute drawers stay inside the frame. */
     protected readonly hostClass: _angular_core.Signal<"block h-full" | "block min-h-full">;
-    protected readonly shellRootClass: _angular_core.Signal<"relative flex h-full min-h-0" | "relative flex min-h-full">;
+    protected readonly shellRootClass: _angular_core.Signal<"relative flex h-full min-h-0 bg-background-chrome dark:bg-ink-950" | "relative flex min-h-full bg-background-chrome dark:bg-ink-950">;
     protected readonly headerDensity: _angular_core.Signal<"desktop" | "mobile" | "tablet">;
     protected readonly showMobileBar: _angular_core.Signal<boolean>;
     protected readonly sidenavHostClass: _angular_core.Signal<"z-50 shrink-0 self-start sticky top-0 block h-full" | "z-50 shrink-0 self-start absolute inset-y-0 left-0 h-full shadow-xl" | "hidden" | "z-50 shrink-0 self-start h-dvh fixed inset-y-0 left-0 shadow-xl lg:sticky lg:top-0 lg:block" | "z-50 shrink-0 self-start h-dvh hidden lg:sticky lg:top-0 lg:block">;
@@ -4780,9 +4856,11 @@ interface TableSortChange {
  * **Sticky columns:** a column with `key: 'actions'` stays pinned to the
  * right while the grid scrolls horizontally. The expand trigger column pins
  * to the left when rows are expandable. Override with
- * {@link TableColumn.sticky}.
+ * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
+ * border (and opaque fill) so dividers stay visible while scrolling.
  */
 declare class TableComponent<T = unknown> {
+    protected readonly modeColor: ModeColorService;
     /**
      * When false, hides row expansion even if {@link RowDetailDefDirective}
      * templates are projected. Defaults to true.
@@ -4901,7 +4979,7 @@ 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<"loading" | "error" | "empty" | "rows">;
+    protected readonly bodyKind: _angular_core.Signal<"error" | "loading" | "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>;
@@ -4932,6 +5010,17 @@ declare class TableComponent<T = unknown> {
     protected cellContext(row: T): {
         $implicit: T;
     };
+    /**
+     * Header row chrome. Soft fill lives on each `th` ({@link headerSoftClass})
+     * so sticky columns do not double-tint and paint over neighbor labels.
+     * @returns Header row class list.
+     */
+    protected headerRowClass(): string;
+    /**
+     * Opaque mode soft fill for header cells (sticky-safe in dark mode).
+     * @returns Soft solid background utilities.
+     */
+    protected headerSoftClass(): string;
     /**
      * Body row classes — row marker for hover styles, plus hide cell borders on
      * the last / expanded row.
@@ -4955,8 +5044,8 @@ declare class TableComponent<T = unknown> {
     protected expandHeaderClass(): string;
     /**
      * Body classes for the expand/collapse trigger column (pinned left).
-     * Omits `border-b` like other sticky cells so the opaque fill does not
-     * double-paint the row divider.
+     * Uses a slightly thicker bottom border than scrolling cells so the
+     * sticky fill still reads a clear divider (no top-shadow fallback).
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
      */
@@ -4969,9 +5058,8 @@ declare class TableComponent<T = unknown> {
     protected headerCellClass(col: TableColumn<T>): string;
     /**
      * Body cell classes, including sticky pin when set.
-     * Sticky cells omit `border-b`: their opaque fill sits in a higher stacking
-     * context, so a bottom border plus the next row's top shadow paint on the
-     * same pixel and read brighter (especially in dark mode).
+     * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
+     * stay at 1px. Expanded rows drop the bottom border (see {@link bodyRowClass}).
      * @param col - Column definition.
      * @param index - Index within {@link rows}.
      * @returns Body cell class list.
@@ -4981,22 +5069,17 @@ declare class TableComponent<T = unknown> {
      * Sticky pin utilities for a known edge (expand column or data column).
      * @param edge - Left or right pin.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow
-     *   divider so the sticky column stays flush under the detail panel.
      * @returns Sticky utilities.
      */
-    protected stickyPinClass(edge: 'left' | 'right', surface: 'head' | 'body', index?: number, afterExpanded?: boolean): string;
+    protected stickyPinClass(edge: 'left' | 'right', surface: 'head' | 'body'): string;
     /**
      * Sticky pin plus an opaque fill matching the table surface, so scrolled
      * cells do not show through.
      * @param col - Column definition.
      * @param surface - Header vs body fill tokens.
-     * @param index - Body row index; unused for the header.
-     * @param afterExpanded - Previous row is expanded — skip the top shadow.
      * @returns Sticky utilities, or empty when the column scrolls.
      */
-    protected stickySurfaceClass(col: TableColumn<T>, surface: 'head' | 'body', index?: number, afterExpanded?: boolean): string;
+    protected stickySurfaceClass(col: TableColumn<T>, surface: 'head' | 'body'): string;
     /**
      * Stable id for a row — used for expand/collapse state.
      *
@@ -5286,7 +5369,7 @@ declare class AfricaniesActionsModule {
 }
 
 /**
- * Async feedback states, inline alert, and status chips.
+ * Async feedback states, accordion panels, inline alert, and status chips.
  *
  * Toast stays out of this module — register {@link provideAfricaniesToasts} instead.
  *
@@ -5300,7 +5383,7 @@ declare class AfricaniesActionsModule {
  */
 declare class AfricaniesFeedbackModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AfricaniesFeedbackModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AfricaniesFeedbackModule, never, [typeof LoadingStateComponent, typeof ErrorStateComponent, typeof ErrorIndicatorComponent, typeof EmptyStateComponent, typeof AsyncStateComponent, typeof AlertComponent, typeof ChipComponent], [typeof LoadingStateComponent, typeof ErrorStateComponent, typeof ErrorIndicatorComponent, typeof EmptyStateComponent, typeof AsyncStateComponent, typeof AlertComponent, typeof ChipComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AfricaniesFeedbackModule, never, [typeof AccordionComponent, typeof LoadingStateComponent, typeof ErrorStateComponent, typeof ErrorIndicatorComponent, typeof EmptyStateComponent, typeof AsyncStateComponent, typeof AlertComponent, typeof ChipComponent], [typeof AccordionComponent, typeof LoadingStateComponent, typeof ErrorStateComponent, typeof ErrorIndicatorComponent, typeof EmptyStateComponent, typeof AsyncStateComponent, typeof AlertComponent, typeof ChipComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AfricaniesFeedbackModule>;
 }
 
@@ -5406,5 +5489,5 @@ declare class AfricaniesTooltipModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AfricaniesTooltipModule>;
 }
 
-export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PageHeaderComponent, PaginationComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, fileExtensionLabel, fileMatchesAccept, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
-export type { AddressComponent, AddressPlace, AddressPrediction, AfricaniesMenuItem, AfricaniesNavItem, AfricaniesNotification, AfricaniesSideNavItem, AlertVariant, AppShellContentWidth, AppShellHeaderDensity, AppShellLayoutPreview, AvatarSize, BrandLogoSize, ButtonSize, ButtonVariant, CarrierLogoSize, CarrierLogoSlug, CellDefContext, ChipSize, ChipVariant, ConfirmOptions, ConfirmWork, ContentBackTarget, FileUploadResult, FileUploadVariant, FilterDrawerData, FilterDrawerResult, GooglePlacesConfig, HeaderBackTarget, HeaderGreeting, HeaderGreetingPeriod, HeaderWeather, HeaderWeatherKind, ImageFit, ImageShape, InfoPopoverPlacement, LoadingStateMode, ModalOpenConfig, ModalSize, NotificationDrawerData, NotificationDrawerResult, NotificationPageResult, OtpInputVariant, OverlayOpenConfig, RadioOption, RowDetailDefContext, SearchComboboxBadge, SearchComboboxBadgeFn, SearchComboboxLabelFn, SearchComboboxMarkFn, SearchComboboxSearchFn, SearchComboboxSubtitleFn, SearchComboboxTrackFn, SelectCreateConfig, SelectOption, SelectSize, StepDefContext, StepDefinition, TabDefContext, TableColumn, TableSortChange, TextInputType, ToastItem, ToastShowOptions, ToastVariant, TooltipPlacement };
+export { AFRICANIES_BRAND_LOGO_MINI_URL, AFRICANIES_BRAND_LOGO_URL, AccordionComponent, ActionMenuComponent, ActionMenuTriggerDirective, AddressInputComponent, AfricaniesActionsModule, AfricaniesFeedbackModule, AfricaniesFormsModule, AfricaniesInfoPopoverModule, AfricaniesNavigationModule, AfricaniesOverlayRef, AfricaniesStepperModule, AfricaniesTableModule, AfricaniesTooltipModule, AlertComponent, AppShellComponent, AppShellContentHeaderComponent, AppShellHeaderComponent, AppShellHeaderEndDirective, AppShellHeaderSlotDirective, AppShellHeaderStartDirective, AsyncStateComponent, AvatarComponent, AvatarMenuComponent, BrandLogoComponent, BreadcrumbComponent, ButtonComponent, CarrierLogoComponent, CellDefDirective, CheckboxComponent, ChipComponent, ConfirmDialogComponent, ConfirmService, ContentStackComponent, CopyButtonComponent, DatePickerComponent, DrawerService, EmptyStateComponent, ErrorIndicatorComponent, ErrorStateComponent, FileUploadComponent, FilterDrawerPanel, FilterDrawerService, FilterQueryService, GOOGLE_PLACES_CONFIG, GooglePlacesService, HeaderCellDefDirective, ImageComponent, InfoPopoverComponent, InfoPopoverContentDirective, InfoPopoverTriggerDirective, LoadingStateComponent, MODAL_SIZE_PANEL_CLASS, ModalService, NotificationDrawerPanel, NotificationDrawerService, NumberInputComponent, OVERLAY_DATA, OtpInputComponent, OverlayFooterDirective, OverlayFrameComponent, OverlayHeaderDirective, PageHeaderComponent, PaginationComponent, RadioComponent, RowDetailDefDirective, SearchComboboxComponent, SegmentComponent, SelectComponent, ShippingModeSwitchComponent, SideNavComponent, StepDefDirective, StepperComponent, TOAST_DURATION_MS, TOAST_ICONS, TabDefDirective, TableComponent, TabsComponent, TextInputComponent, TextareaComponent, ToastService, ToggleComponent, TooltipComponent, TooltipTriggerDirective, acceptLabels, buildBreadcrumbsFromSideNav, deliveryVendorOptionsForStoredValue, deliveryVendorSelectOptions, deliveryVendorSelected, fileExtensionLabel, fileMatchesAccept, headerGreetingFirstName, headerGreetingPeriod, isCatalogRootRoute, isNavItemActive, isNestedChildRoute, navItemUrlTree, normalizeCarrierLogoSlug, normalizeNavPath, pickHeaderGreeting, provideAfricaniesToasts, provideAfricaniesUiOverlays, provideGooglePlaces, resolveCatalogRootLink, resolveContentBackTarget, resolveHeaderBackTarget, resolveParentPathFromRootSnapshot, toastFingerprint };
+export type { AccordionSize, AddressComponent, AddressPlace, AddressPrediction, AfricaniesMenuItem, AfricaniesNavItem, AfricaniesNotification, AfricaniesSideNavItem, AlertVariant, AppShellContentWidth, AppShellHeaderDensity, AppShellLayoutPreview, AvatarSize, BrandLogoSize, ButtonSize, ButtonVariant, CarrierLogoSize, CarrierLogoSlug, CellDefContext, ChipSize, ChipVariant, ConfirmOptions, ConfirmWork, ContentBackTarget, FileUploadResult, FileUploadVariant, FilterDrawerData, FilterDrawerResult, GooglePlacesConfig, HeaderBackTarget, HeaderGreeting, HeaderGreetingPeriod, HeaderWeather, HeaderWeatherKind, ImageFit, ImageShape, InfoPopoverPlacement, LoadingStateMode, ModalOpenConfig, ModalSize, NotificationDrawerData, NotificationDrawerResult, NotificationPageResult, OtpInputVariant, OverlayOpenConfig, RadioOption, RowDetailDefContext, SearchComboboxBadge, SearchComboboxBadgeFn, SearchComboboxLabelFn, SearchComboboxMarkFn, SearchComboboxSearchFn, SearchComboboxSubtitleFn, SearchComboboxTrackFn, SelectCreateConfig, SelectOption, SelectSize, StepDefContext, StepDefinition, TabDefContext, TableColumn, TableSortChange, TextInputType, ToastItem, ToastShowOptions, ToastVariant, TooltipPlacement };

package/.nx/cache/{1275815545780424169 → 6673686859704879504}/dist/libs/africanies-theme/fesm2022/africanies-africanies-theme.mjs

@@ -17,10 +17,12 @@ import { STORAGE_TOKEN, AFRICANIES_THEME_KEY } from '@africanies/africanies-stor
  * SFN (export / green):
  * 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
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import
  */
 const MODE_COLOR_SAFELIST = [
     'text-export',
@@ -32,6 +34,10 @@ const MODE_COLOR_SAFELIST = [
     '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',
     'text-import',
     'bg-import',
     'bg-import-subtle',
@@ -41,6 +47,10 @@ const MODE_COLOR_SAFELIST = [
     'hover:bg-import-subtle',
     'dark:bg-import/15',
     'dark:hover:bg-import/15',
+    'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
+    'dark:bg-import',
+    'dark:text-import',
+    'dark:border-import',
 ];
 
 /**
@@ -76,7 +86,10 @@ class ModeColorService {
                 primary: 'bg-export text-white border-transparent hover:bg-export-light',
                 ghostPrimary: 'bg-transparent text-export border-transparent hover:bg-export-subtle 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)]',
                 softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
+                activeFill: 'bg-export text-white border-transparent dark:bg-export dark:text-white',
+                stroked: 'bg-white text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
             };
         }
         return {
@@ -87,7 +100,10 @@ class ModeColorService {
             primary: 'bg-import text-white border-transparent hover:bg-import-light',
             ghostPrimary: 'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
             soft: 'bg-import-subtle dark:bg-import/15',
+            softSolid: 'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
             softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
+            activeFill: 'bg-import text-white border-transparent dark:bg-import dark:text-white',
+            stroked: 'bg-white text-import border-import hover:bg-import-subtle dark:bg-ink-950 dark:text-import dark:border-import dark:hover:bg-import/15',
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));

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

@@ -0,0 +1 @@
+{"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 * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export\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 * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import\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  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',\n  'dark:bg-export',\n  'dark:text-export',\n  'dark:border-export',\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  'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',\n  'dark:bg-import',\n  'dark:text-import',\n  'dark:border-import',\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   * Dark uses a translucent tint — fine over solid surfaces, not for\n   * sticky overlays (see {@link softSolid}).\n   */\n  soft: string;\n  /**\n   * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into\n   * ink so scrolled content cannot show through (sticky table headers/cells).\n   */\n  softSolid: string;\n  /**\n   * Soft hover highlight for menus and lists.\n   */\n  softHover: string;\n  /**\n   * Active nav leaf / collapsed rail — solid mode fill + white text.\n   */\n  activeFill: string;\n  /**\n   * Stroked secondary CTA — white fill, mode border + text (portal `.btn-stroked`).\n   */\n  stroked: 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        softSolid:\n          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',\n        softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',\n        activeFill:\n          'bg-export text-white border-transparent dark:bg-export dark:text-white',\n        stroked:\n          'bg-white text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export 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      softSolid:\n        'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',\n      softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',\n      activeFill:\n        'bg-import text-white border-transparent dark:bg-import dark:text-white',\n      stroked:\n        'bg-white text-import border-import hover:bg-import-subtle dark:bg-ink-950 dark:text-import dark:border-import 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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"}

package/.nx/cache/{14153928176747262656 → 6673686859704879504}/dist/libs/africanies-theme/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@africanies/africanies-theme",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@africanies/africanies-core": "^0.0.2",
-    "@africanies/africanies-storage": "^0.0.1"
+    "@africanies/africanies-core": ">=0.0.2 <0.1.0",
+    "@africanies/africanies-storage": ">=0.0.1 <0.1.0"
   },
   "sideEffects": false,
   "publishConfig": {

package/.nx/cache/{1275815545780424169 → 6673686859704879504}/dist/libs/africanies-theme/tailwind-preset.cjs

@@ -69,6 +69,11 @@ function africaniesInteractiveCursorPlugin({ addBase }) {
  * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
  * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
  *
+ * WHY one selector per `addBase` key: joining autofill selectors with commas
+ * under a single `.dark ${list}` key only scopes the first selector — the rest
+ * leak into light mode. WHY no `color` in the long transition: delaying color
+ * freezes text when the user toggles light/dark.
+ *
  * @param {import('tailwindcss/types/config').PluginAPI} api
  */
 function africaniesAutofillPlugin({ addBase }) {
@@ -81,21 +86,24 @@ function africaniesAutofillPlugin({ addBase }) {
     'textarea:-webkit-autofill:hover',
     'textarea:-webkit-autofill:focus',
     'textarea:-webkit-autofill:active',
-  ].join(', ');
+  ];
 
-  addBase({
-    [autofillSelectors]: {
-      WebkitTextFillColor: '#212529',
-      caretColor: '#212529',
+  /** @type {Record<string, Record<string, string>>} */
+  const rules = {};
+  for (const selector of autofillSelectors) {
+    rules[selector] = {
+      WebkitTextFillColor: '#1c2b3f',
+      caretColor: '#1c2b3f',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
-    },
-    [`.dark ${autofillSelectors}`]: {
+    };
+    rules[`.dark ${selector}`] = {
       WebkitTextFillColor: '#ffffff',
       caretColor: '#ffffff',
       boxShadow: '0 0 0 1000px #272729 inset',
-    },
-  });
+    };
+  }
+  addBase(rules);
 }
 
 /**
@@ -186,9 +194,12 @@ module.exports = {
         black: '#000000',
         white: '#ffffff',
         ink: {
-          DEFAULT: '#212529',
+          // Portal `.txt-primary` navy — primary body / heading text (light).
+          DEFAULT: '#1c2b3f',
           blue: '#192a3e',
           brand: '#1c2b3f',
+          // Previous ink DEFAULT — dark elevated cards / panels (`dark:bg-ink-surface`).
+          surface: '#212529',
           950: '#272729',
         },
         neutral: {
@@ -197,11 +208,17 @@ module.exports = {
           600: '#667185',
         },
         border: {
-          // Light chrome on white — match form field borders (`neutral-300`).
-          // Previous `#f0f2f5` was too close to white and washed out.
-          DEFAULT: '#c9d5e1',
+          // Soft hairline on white (portal `$border-bottom-gray`).
+          DEFAULT: '#f0f2f5',
+          // Nav pins / stronger chrome dividers.
+          strong: '#e0e6f0',
         },
         background: {
+          // Portal page shell (`container-wrap`).
+          chrome: '#f6f7f9',
+          // Nested wells inside white cards.
+          well: '#f3f3f3',
+          // Auth / welcome / soft hover.
           welcome: '#f9fafb',
         },
         export: {
@@ -228,7 +245,7 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['Arial', 'sans-serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
       },
       fontSize: {
         // PROVISIONAL — see THEME.md; sizes may tighten after design QA.

package/.nx/cache/{14153928176747262656 → 6673686859704879504}/dist/libs/africanies-theme/types/africanies-africanies-theme.d.ts

@@ -13,12 +13,14 @@ import * as i0 from '@angular/core';
  * SFN (export / green):
  * 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
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)] dark:bg-import dark:text-import dark:border-import
  */
-declare const MODE_COLOR_SAFELIST: readonly ["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", "text-import", "bg-import", "bg-import-subtle", "bg-import-light", "border-import", "hover:bg-import-light", "hover:bg-import-subtle", "dark:bg-import/15", "dark:hover:bg-import/15"];
+declare const MODE_COLOR_SAFELIST: readonly ["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", "text-import", "bg-import", "bg-import-subtle", "bg-import-light", "border-import", "hover:bg-import-light", "hover:bg-import-subtle", "dark:bg-import/15", "dark:hover:bg-import/15", "dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]", "dark:bg-import", "dark:text-import", "dark:border-import"];
 
 /**
  * Tailwind class bundle for the active shipping mode (SFN export / STN import).
@@ -47,12 +49,27 @@ interface ModeColorClasses {
     ghostPrimary: string;
     /**
      * Soft highlight for selected / active rows (works in dark mode).
+     * Dark uses a translucent tint — fine over solid surfaces, not for
+     * sticky overlays (see {@link softSolid}).
      */
     soft: string;
+    /**
+     * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into
+     * ink so scrolled content cannot show through (sticky table headers/cells).
+     */
+    softSolid: string;
     /**
      * Soft hover highlight for menus and lists.
      */
     softHover: string;
+    /**
+     * Active nav leaf / collapsed rail — solid mode fill + white text.
+     */
+    activeFill: string;
+    /**
+     * Stroked secondary CTA — white fill, mode border + text (portal `.btn-stroked`).
+     */
+    stroked: string;
 }
 /**
  * Maps {@link ShippingModeService} to mode-accent Tailwind classes.