@forgeroute/ui 0.4.46 → 0.4.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.4.46",
+  "version": "0.4.48",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",

package/types/forgeroute-ui-stripe.d.ts

@@ -1266,6 +1266,8 @@ export declare function stripeConnectNotice(outcome: StripeConnectOutcome): {
  */
 export declare class StripeConnectComponent {
   private readonly destroyRef;
+  private readonly injector;
+  private readonly host;
   /** The call that creates the organization's Stripe account (or resumes it) and answers its id and the onboarding address. Needed for `start()`. */
   readonly createAccount: import("@angular/core").InputSignal<(() => Observable<StripeConnectAccount>) | null>;
   /** The call that reads the account's state. Needed for `check()`, `resume()` and `refreshOnReturn`. */
@@ -1297,6 +1299,13 @@ export declare class StripeConnectComponent {
   /** How the current tab is sent to Stripe when the browser refused the new tab (default: `window.location.href = url`); a host can route it through its own method. */
   readonly navigateTab: import("@angular/core").InputSignal<((url: string) => void) | null>;
   protected readonly visible: import("@angular/core").Signal<boolean>;
+  /** Which screen the card shows. */
+  protected readonly state: import("@angular/core").Signal<"none" | "complete" | "verifying" | "incomplete">;
+  /** What the persistent status region says: the current state, plus "Loading." while a request runs. Empty while nothing is shown. */
+  protected readonly liveText: import("@angular/core").Signal<string>;
+  /** The user pressed a button that started a request: when the screen then changes, focus moves to the new screen (the pressed button is gone). */
+  private acted;
+  private lastState;
   private readonly flow;
   constructor();
   /** Creates (or resumes) the account and opens Stripe's onboarding page in a new tab. */
@@ -1305,6 +1314,8 @@ export declare class StripeConnectComponent {
   check(): void;
   /** "Complete Setup": reads the state and opens the onboarding address of an unfinished account in a new tab. */
   resume(): void;
+  /** The flow will really send a request (the host gave the call, nothing is running, the card is not read-only). */
+  private canRun;
   /** Opens the Stripe dashboard in a new tab. */
   openDashboard(): void;
   /** The browser refused the new tab: Stripe opens in this one (through the host's `navigateTab` when it gave one). */

package/types/forgeroute-ui.d.ts

@@ -1088,7 +1088,7 @@ export declare class SelectComponent implements ControlValueAccessor, Validator,
   readonly error: import("@angular/core").InputSignal<string>;
   /** Reveal the built-in error messages now (e.g. after a failed Save click), without waiting for blur. */
   readonly showErrors: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"default" | "sm">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "default">;
   readonly _disabledInput: import("@angular/core").InputSignal<boolean>;
   private readonly _cvaDisabled;
   protected readonly disabled: import("@angular/core").Signal<boolean>;
@@ -1264,6 +1264,12 @@ export declare class ImportExportComponent {
   readonly finished: import("@angular/core").OutputEmitterRef<ImportSubmitResult>;
   readonly imported: import("@angular/core").OutputEmitterRef<void>;
   config: ImportExportConfig;
+  private static nextUid;
+  /** Unique prefix for the ids this window links with aria-describedby / aria-labelledby. */
+  readonly uid: string;
+  private readonly resultBox;
+  /** The container of the step on screen (Source / Upload / Map Columns / Preview): focused when the step changes, because the control the user pressed is gone. */
+  private readonly stepBox;
   private readonly http;
   /** API root from FORGEROUTE_CONFIG (e.g. a cross-origin prod API); falls back to same-origin `/api`. */
   private readonly apiBase;
@@ -1293,6 +1299,16 @@ export declare class ImportExportComponent {
     warnings: ImportError[];
   } | null;
   get stepIndex(): number;
+  /** The progress list: one entry per step with its number, label and whether it is the current / a finished step. */
+  get stepItems(): {
+    key: ImportStep;
+    num: number;
+    label: string;
+    current: boolean;
+    done: boolean;
+  }[];
+  /** What the persistent status region says once the import has finished (empty before). */
+  get resultAnnouncement(): string;
   get modalTitle(): string;
   openImport(): void;
   onSourceSelected(value: string): void;
@@ -1312,6 +1328,10 @@ export declare class ImportExportComponent {
   goToPreview(): void;
   get mappedFields(): ImportFieldDef[];
   get previewRows(): Record<string, string>[];
+  /** Shows another step and moves focus to its container (the pressed button / focused file input was removed from the page). */
+  goTo(step: ImportStep): void;
+  /** Moves focus to the result summary (the button that had it is gone), so keyboard and screen reader users land on the outcome. */
+  private focusResult;
   private stopImportTimer;
   submitImport(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<ImportExportComponent, never>;
@@ -2206,7 +2226,7 @@ export declare class ModalComponent implements OnInit, OnDestroy {
   readonly title: import("@angular/core").InputSignal<string>;
   readonly description: import("@angular/core").InputSignal<string>;
   readonly maxWidth: import("@angular/core").InputSignal<string>;
-  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "auto" | "visible">;
+  readonly bodyOverflow: import("@angular/core").InputSignal<"hidden" | "visible" | "auto">;
   /** `data-testid` of the dialog element itself (the host `<ui-modal>` is always in the page, the dialog only while open). None when empty. */
   readonly dialogTestId: import("@angular/core").InputSignal<string>;
   /** Hides the header X button (e.g. while a request is running). Escape and a backdrop click still close unless `closable` is false. */
@@ -2590,7 +2610,7 @@ export declare class AudioPlayerComponent {
   /** Accessible name of the player. */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** How much to load before play: 'metadata' (default), 'auto' or 'none'. */
-  readonly preload: import("@angular/core").InputSignal<"none" | "auto" | "metadata">;
+  readonly preload: import("@angular/core").InputSignal<"none" | "metadata" | "auto">;
   /** Fires when the browser can't load or decode the source. */
   readonly playbackError: import("@angular/core").OutputEmitterRef<void>;
   protected readonly failed: import("@angular/core").WritableSignal<boolean>;
@@ -2844,7 +2864,7 @@ export declare class CheckboxComponent implements ControlValueAccessor, Validato
    * clicking it still toggles the box - e.g. a product name that is both the heading of its card and the label of its checkbox.
    * Default null: plain label text, exactly as before. Single mode only.
    */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 5 | 6 | 4 | null>;
   readonly indeterminate: import("@angular/core").InputSignal<boolean>;
   readonly checked: import("@angular/core").ModelSignal<boolean>;
   /**
@@ -3869,7 +3889,7 @@ export declare class ButtonComponent {
    * `ghost-start`: a ghost button for list / section toggles - a full-width row with its content aligned to the start, transparent
    * background, hover tint and the normal focus ring. Pair it with `ariaExpanded` / `ariaPressed`; the label may contain a heading element.
    */
-  readonly variant: import("@angular/core").InputSignal<"primary" | "secondary" | "danger" | "warning" | "link" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
+  readonly variant: import("@angular/core").InputSignal<"link" | "primary" | "secondary" | "danger" | "warning" | "ghost" | "ghost-start" | "tab" | "icon" | "icon-danger">;
   /** Renders an anchor to this route instead of a button (use with `variant="link"` for an inline text link). `['/settings']` or `'/settings'`. While `disabled` or `loading` it renders a non-clickable `<span role="link" aria-disabled>` with no href (like `href`). */
   readonly routerLink: import("@angular/core").InputSignal<string | readonly unknown[] | null>;
   /** Query params of the `routerLink` (e.g. `{ section: 'deal-defaults' }`). */
@@ -3914,7 +3934,7 @@ export declare class ButtonComponent {
   private readonly _narrow;
   readonly color: import("@angular/core").InputSignal<string | undefined>;
   readonly active: import("@angular/core").InputSignal<boolean>;
-  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xs">;
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "xs" | "lg">;
   readonly type: import("@angular/core").InputSignal<"reset" | "submit" | "button">;
   readonly disabled: import("@angular/core").InputSignal<boolean>;
   readonly loading: import("@angular/core").InputSignal<boolean>;
@@ -4060,6 +4080,10 @@ export interface ToggleBadgeAction {
  * Pill that toggles on / off. Optional `actions` put small icon buttons INSIDE the pill, after the label and a divider, each with its own
  * tooltip; the label button and the icon buttons are separate buttons (never nested). Clicking an icon button emits `(action)` with its id and
  * never `(toggle)`. Content projected into the component (an icon) goes before the label, as before.
+ *
+ * Accessibility: the label button is a toggle button, so it carries `aria-pressed` (true while `active`); on touch devices
+ * (`pointer: coarse`) its hit area, and each icon button's, is 44px (an invisible overlay; it can reach into a neighbouring badge when the
+ * host's gap between badges is smaller than the overlay, see docs/ui-timeline-and-small-additions.md).
  */
 export declare class ToggleBadgeComponent {
   readonly label: import("@angular/core").InputSignal<string>;
@@ -4125,6 +4149,8 @@ export declare class PillTabsComponent {
   /** Accessible name for the tab list (e.g. 'Reporting period'). Omit to leave it unnamed. */
   readonly ariaLabel: import("@angular/core").InputSignal<string | null>;
   readonly name: import("@angular/core").InputSignal<string>;
+  /** Keep every pill at its own width on one line (default false: pills may shrink and wrap their text). On a phone the row scrolls sideways, as it always does. */
+  readonly noWrap: import("@angular/core").InputSignal<boolean>;
   readonly tabChange: import("@angular/core").OutputEmitterRef<string>;
   /** True while pills are hidden past the start / end edge of the scroll area (drives the fade hints). */
   protected readonly canScrollStart: import("@angular/core").WritableSignal<boolean>;
@@ -4157,6 +4183,11 @@ export declare class PillTabsComponent {
       "required": false;
       "isSignal": true;
     };
+    "noWrap": {
+      "alias": "noWrap";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "tabChange": "tabChange";
   }, never, never, true, never>;
@@ -4720,7 +4751,7 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
    * `search`, `text`, `none`). Empty (default) = the browser's default for the field, except `type="tel"`, which keeps `tel`.
    * It only picks the keyboard; it does not restrict what can be typed or pasted.
    */
-  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "text" | "search" | "none" | "email" | "numeric" | "tel" | "url" | "decimal">;
   readonly readonly: import("@angular/core").InputSignal<boolean>;
   readonly hint: import("@angular/core").InputSignal<string>;
   readonly error: import("@angular/core").InputSignal<string>;
@@ -4816,6 +4847,12 @@ export declare class TextInputComponent implements ControlValueAccessor, Validat
   registerOnTouched(fn: () => void): void;
   setDisabledState(d: boolean): void;
   protected onInput(event: Event): void;
+  /**
+   * Position in `formatted` for a caret that was at `caret` in `raw`: right after the same number of digits (the leading country-code 1 of an
+   * 11-digit number is dropped by the formatting). When the character before the caret was a separator, the caret also moves over the separators
+   * that follow that digit, so deleting the first digit of a group does not throw the caret back in front of ") ".
+   */
+  private static _caretAfterDigits;
   /** Typed text -> number, or null when blank / not a finite number. */
   private static _parse;
   protected onFocus(): void;
@@ -6138,6 +6175,11 @@ export declare class DropdownComponent {
   readonly activeValue: import("@angular/core").InputSignal<string>;
   readonly variant: import("@angular/core").InputSignal<"badge" | "button">;
   readonly menuWidth: import("@angular/core").InputSignal<string>;
+  /**
+   * Fixed width of the trigger as a CSS length (e.g. `'280px'`). Empty (default) = the trigger is as wide as its label. When set, the trigger keeps that
+   * width whatever label is selected (never wider than its container) and its label and chevron sit at the two ends.
+   */
+  readonly width: import("@angular/core").InputSignal<string>;
   /**
    * Accessible name. Set it when the trigger has no meaningful visible text. Applied as `aria-label` on the
    * trigger and on the menu; when empty (default) no `aria-label` is rendered, the trigger is named by its
@@ -6236,6 +6278,11 @@ export declare class DropdownComponent {
       "required": false;
       "isSignal": true;
     };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
     "ariaLabel": {
       "alias": "ariaLabel";
       "required": false;
@@ -6352,7 +6399,7 @@ export declare class FormRowComponent {
  * child simply takes the full width. Keep a numeric span within the row's `cols` (use `all` for the whole row).
  */
 export declare class FormColSpanDirective {
-  readonly uiColSpan: import("@angular/core").InputSignal<"" | "2" | "3" | 2 | 3 | "all">;
+  readonly uiColSpan: import("@angular/core").InputSignal<"" | 2 | 3 | "2" | "3" | "all">;
   protected readonly _class: import("@angular/core").Signal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<FormColSpanDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<FormColSpanDirective, "[uiColSpan]", never, {
@@ -7379,7 +7426,7 @@ export declare class ChipGroupComponent {
   readonly spaceAbove: import("@angular/core").InputSignal<"none" | "sm" | "md">;
   /** Space below the chip group. */
   readonly spaceBelow: import("@angular/core").InputSignal<"none" | "sm" | "md">;
-  protected readonly _gap: import("@angular/core").Signal<"6px" | "12px" | "8px">;
+  protected readonly _gap: import("@angular/core").Signal<"8px" | "6px" | "12px">;
   protected readonly _spaceAbove: import("@angular/core").Signal<"0" | "6px" | "12px">;
   protected readonly _spaceBelow: import("@angular/core").Signal<"0" | "6px" | "12px">;
   static ɵfac: i0.ɵɵFactoryDeclaration<ChipGroupComponent, never>;
@@ -9293,7 +9340,7 @@ export declare class DetailCardComponent {
   /** true (default) = the title is displayed in capitals (CSS only); false = shown as written. The text, aria-label and heading name are never changed. */
   readonly uppercaseTitle: import("@angular/core").InputSignal<boolean>;
   /** 1-6 makes the title a real heading for screen readers (role=heading, aria-level); null keeps it plain text. */
-  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6 | null>;
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 5 | 6 | 4 | null>;
   /** Optional id for the title text; the card is then labelled by it. Without it the title is the card's aria-label. */
   readonly titleId: import("@angular/core").InputSignal<string>;
   /** Accessible name of the card when the header gives none (no header, or no title). A visible title wins; blank = no name. */
@@ -10210,6 +10257,12 @@ export type ColumnsAlign = 'start' | 'center' | 'stretch';
  *  - `collapseAt`: sm (480px) | md (768px) | lg (1024px) | never. Below that viewport width the columns become one.
  *    Plain media queries are used (not container queries) because they behave the same in every supported browser.
  *  - `align`: start | center | stretch (default start) - how cells of different heights line up.
+ *  - `spanLastOdd` (default false): in a 2-column grid, a last cell that would sit alone in its row spans the whole row instead of
+ *    leaving an empty half (3 cells -> 2 + 1 full-width; 1 cell -> full width). Only for a grid that has 1 or 2 columns at EVERY width:
+ *    `count` 2 and every `countBelow*` tier (after its fallback to the next wider tier) 1 or 2, collapsing included. With a 3 or 4 column tier
+ *    at any width, or in `countFrom*` mode, the span is not applied at all (an inline span would break that width's grid). It is applied to the
+ *    last VISIBLE element child (a `hidden` / `display: none` cell is skipped), and a last cell that already has its own inline `grid-column`
+ *    is left alone. It is re-applied when cells come and go and when a direct child's `hidden`, `style` or `class` attribute changes.
  *  - Responsive tiers (optional): `countBelowLg` (viewport <= 1024px), `countBelowMd` (<= 768px) and `countBelowSm` (<= 480px)
  *    give a different column count (1-4) at narrower widths. Each tier falls back to the next wider one, then to `count`, so
  *    a grid that sets none of them is unchanged. `collapseAt` is applied last: a width at or below it is one column.
@@ -10228,6 +10281,8 @@ export declare class ColumnsComponent {
   readonly gap: import("@angular/core").InputSignal<string>;
   readonly collapseAt: import("@angular/core").InputSignal<ColumnsCollapse>;
   readonly align: import("@angular/core").InputSignal<ColumnsAlign>;
+  /** 2-column grids: an odd last cell spans the full row instead of leaving an empty half. Default false. */
+  readonly spanLastOdd: import("@angular/core").InputSignal<boolean>;
   /** Column count at viewport widths <= 1024px (falls back to `count`). */
   readonly countBelowLg: import("@angular/core").InputSignal<ColumnsCount | null>;
   /** Column count at <= 768px (falls back to `countBelowLg`, then `count`). */
@@ -10254,8 +10309,21 @@ export declare class ColumnsComponent {
   protected readonly fromSm: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly fromMd: import("@angular/core").Signal<ColumnsCount | null>;
   protected readonly fromLg: import("@angular/core").Signal<ColumnsCount | null>;
+  /** The column count at each width after the tier fallbacks: base (> 1024px), <= 1024, <= 768, <= 480. */
+  private readonly effectiveCols;
+  /** spanLastOdd only when the grid has 2 columns on wide screens and never more than 2 at any width (and is not in countFrom* mode). */
+  protected readonly spanFits: import("@angular/core").Signal<boolean>;
   protected readonly gapCss: import("@angular/core").Signal<string>;
   protected readonly collapseClass: import("@angular/core").Signal<string>;
+  private readonly grid;
+  private readonly destroyRef;
+  private static readonly SPAN_MARK;
+  constructor();
+  /**
+   * Marks the last VISIBLE element child (when it would be alone in its row) with `grid-column: 1 / -1`, and clears a mark left on any other child.
+   * A cell the consumer gave its own inline `grid-column` is never marked or cleared.
+   */
+  private applySpan;
   static ɵfac: i0.ɵɵFactoryDeclaration<ColumnsComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<ColumnsComponent, "ui-columns", never, {
     "count": {
@@ -10278,6 +10346,11 @@ export declare class ColumnsComponent {
       "required": false;
       "isSignal": true;
     };
+    "spanLastOdd": {
+      "alias": "spanLastOdd";
+      "required": false;
+      "isSignal": true;
+    };
     "countBelowLg": {
       "alias": "countBelowLg";
       "required": false;
@@ -11449,6 +11522,8 @@ export interface SetupIntegration {
 export interface SetupWizardTexts {
   brand: string;
   stepperLabel: string;
+  /** Accessible name of the sidebar landmark (default "Setup steps"). Separate from `brand`, which may be empty or a logo-only heading. */
+  asideLabel: string;
   progress: (done: number, total: number) => string;
   back: string;
   skip: string;
@@ -11480,6 +11555,8 @@ export interface SetupWizardTexts {
   summarySkipped: string;
   summaryPending: string;
   areaCode: string;
+  /** Helper text under the area-code field; also what a disabled Connect button there is described by. */
+  areaCodeHint: string;
   connectIntegrationFailed: (title: string) => string;
 }
 /** An import step: the library import window (CSV / pasted data / competitor sources) with the step's own words around it. */
@@ -11519,6 +11596,17 @@ export interface SetupStep {
   save?: () => Observable<unknown> | Promise<unknown> | void;
   /** `custom` and `integrations`: false disables "Save & Continue" (read on every render, so it can follow signals). */
   canContinue?: () => boolean;
+  /**
+   * `custom`: id of an element in the app's own step content that explains why "Save & Continue" is off. While `canContinue` is false the button
+   * carries `aria-describedby="<id>"`, so a screen reader announces the reason with the disabled button (the attribute is absent otherwise).
+   */
+  continueHintId?: string;
+  /**
+   * `custom` and `integrations`: read AFTER the step's hook succeeded. When it returns true, "Save & Continue" still runs the hook and moves on, but the step is NOT
+   * marked complete: the progress count leaves it out, the side nav keeps it `upcoming` and the summary shows it as pending (not Done, not Skipped). Use it when the
+   * user has done their part but the result is not usable yet (e.g. a bank account that still has to be verified). Absent / false: the step is marked complete as usual.
+   */
+  continueWithoutComplete?: () => boolean;
   /** `custom`: text of the continue button (default "Save & Continue"). */
   saveLabel?: string;
   /**
@@ -11635,6 +11723,8 @@ export declare const SETUP_DONE_KEY = "done";
  *  - `kind: 'integrations'` steps list integrations with Connect / Reconnect — QuickBooks, Twilio, Slack, email and calendar come ready made
  *    (`SETUP_INTEGRATIONS` / `setupIntegrations(...)`); an app can add its own;
  *  - `kind: 'custom'` steps show the app's own content (`<ng-template uiSetupStep="key">`) with the step's `save` / `canContinue` hooks.
+ *    `continueHintId` points the disabled Save & Continue at the app's own hint element (`aria-describedby`); `continueWithoutComplete` lets a step continue
+ *    without being marked complete (progress and side nav leave it out, the summary shows it as Pending).
  *
  *   <ui-setup-wizard [steps]="steps()" [texts]="{ brand: 'My App Setup' }" (finished)="goToDashboard()" (exited)="goToDashboard()">
  *     <ng-template uiSetupStep="profile"> … </ng-template>
@@ -11652,6 +11742,8 @@ export declare class SetupWizardComponent {
   /** An import step with `requireImport` keeps Continue off until something came in (a CSV import or `markCompleted`, e.g. a live sync). */
   /** An integrations step with `requireConnection` keeps Save & Continue off until at least one of its integrations is connected (Skip stays the way past). */
   protected readonly connectBlocked: import("@angular/core").Signal<boolean>;
+  /** A custom step whose Save & Continue is off (`canContinue` false) and that names its hint element (`continueHintId`): the button is described by it. */
+  protected customHintId(): string;
   protected readonly importBlocked: import("@angular/core").Signal<boolean>;
   /** The step's own two parts (`splitLayout`) show as two tabs, one card at a time; this is the open one (it starts on the app's part on every visit). */
   protected readonly splitTab: import("@angular/core").WritableSignal<"main" | "extra">;
@@ -11675,6 +11767,7 @@ export declare class SetupWizardComponent {
   protected readonly stepTemplates: import("@angular/core").Signal<readonly SetupWizardStepDirective[]>;
   protected readonly headerTemplates: import("@angular/core").Signal<readonly SetupWizardStepHeaderDirective[]>;
   private readonly injector;
+  private readonly host;
   private readonly stepTitle;
   protected readonly importers: import("@angular/core").Signal<readonly ImportExportComponent[]>;
   protected readonly t: import("@angular/core").Signal<SetupWizardTexts>;
@@ -11733,6 +11826,8 @@ export declare class SetupWizardComponent {
   private markCompleted;
   /** "Save & Continue" of a custom or integrations step: runs the step's hook, then moves on. */
   saveAndContinue(): Promise<void>;
+  /** `continueWithoutComplete` of a step whose hook just succeeded. A hook that throws counts as false (the save already ran: it is not reported as a failed save). */
+  private withholdsMark;
   private run;
   /** The message to show for a failure: the server's own `{ message }` (or a thrown error's message); never the HTTP client's technical text. */
   private messageOf;