@primer-io/primer-js 0.1.3 → 0.1.5

package/dist/jsx/index.d.ts

@@ -62,14 +62,14 @@ type BaseEvents = {};
 
 export type PrimerCheckoutComponentProps = {
   /**  */
-  "custom-styles"?: string;
+  customStyles?: string;
   /**  */
-  "client-token"?: string;
+  clientToken?: string;
   /**  */
   options?: PrimerCheckoutOptions;
   /** Whether the component has completed initialization and loading
 This is used to control the CSS-only loader visibility */
-  "js-initialized"?: boolean;
+  _jsInitialized?: boolean;
   /**  */
   jsInitialized?: boolean;
   /**  */
@@ -88,6 +88,8 @@ This is used to control the CSS-only loader visibility */
   vaultManagerController?: VaultManagerController;
   /**  */
   cardNetworkController?: CardNetworkController;
+  /**  */
+  achPaymentEventsController?: AchPaymentEventsController;
 };
 
 export type ButtonComponentProps = {
@@ -136,6 +138,11 @@ export type CollapsableComponentProps = {
   "onexpanded-changed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type DialogComponentProps = {
+  /**  */
+  "onprimer-dialog-close"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type ErrorMessageComponentProps = {
   /** The error message text to display */
   message?: string;
@@ -226,6 +233,13 @@ export type InputWrapperComponentProps = {
   "onwrapper-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type PortalComponentProps = {
+  /**  */
+  id?: string;
+  /**  */
+  oneventName?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type SpinnerComponentProps = {
   /** Color of the spinner
 Defaults to the design system loader color */
@@ -238,11 +252,45 @@ Useful when embedding in inputs */
   compact?: boolean;
 };
 
+export type AchPaymentComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  sdkState?: SdkStateContext | undefined;
+  /**  */
+  clientOptions?: ClientOptionsContext | undefined;
+  /**  */
+  screen?: "form" | "mandate";
+  /**  */
+  "onprimer-ach-error"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-bank-details-collected"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-mandate-confirmed"?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  "onprimer-ach-mandate-declined"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type CardFormComponentProps = {
   /** Payment managers injected from context */
   paymentManagers?: InitializedManagersMap;
 };
 
+export type DynamicPaymentComponentProps = {
+  /**  */
+  paymentMethod?: InitializedPaymentMethod | undefined;
+  /**  */
+  paymentManagers?: InitializedManagersMap;
+  /**  */
+  sdkState?: SdkStateContext;
+  /**  */
+  headlessUtils?: HeadlessUnitilsContext;
+  /**  */
+  open?: boolean;
+};
+
 export type ErrorMessageContainerComponentProps = {
   /**  */
   "show-processing-errors"?: boolean;
@@ -306,7 +354,9 @@ export type ShowOtherPaymentsComponentProps = {
 };
 
 export type VaultManagerComponentProps = {
-  /** Strongly typed event declarations */
+  /** Animation duration override */
+  animationDuration?: number;
+  /**  */
   addEventListener?: <K extends keyof VaultManagerEventMap>(
     type: K,
     listener: (ev: VaultManagerEventMap[K]) => void,
@@ -318,8 +368,7 @@ export type VaultManagerComponentProps = {
     listener: (ev: VaultManagerEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions,
   ) => void;
-  /** The vault manager core context from the SDK
-Contains vault-related functionality and state */
+  /**  */
   vaultManagerContext?: VaultManagerContext;
 };
 
@@ -592,6 +641,16 @@ export type CustomElements = {
    */
   "primer-collapsable": Partial<CollapsableComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **primer-dialog-close**
+   */
+  "primer-dialog": Partial<DialogComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A reusable atomic error message component that displays error information
    * with appropriate styling and accessibility attributes.
@@ -680,6 +739,16 @@ export type CustomElements = {
    */
   "primer-input-wrapper": Partial<InputWrapperComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **eventName**
+   */
+  "primer-portal": Partial<PortalComponentProps & BaseProps & BaseEvents>;
+
   /**
    * Spinner component with configurable size and color
    * Adapted to work both standalone and within input components
@@ -688,6 +757,19 @@ export type CustomElements = {
    */
   "primer-spinner": Partial<SpinnerComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **primer-ach-error**
+   * - **primer-ach-bank-details-collected**
+   * - **primer-ach-mandate-confirmed**
+   * - **primer-ach-mandate-declined**
+   */
+  "primer-ach-payment": Partial<AchPaymentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * CardFormComponent serves as a container for card input components.
    * It handles form submission, validation, and provides context to child components.
@@ -696,6 +778,13 @@ export type CustomElements = {
    */
   "primer-card-form": Partial<CardFormComponentProps & BaseProps & BaseEvents>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "primer-dynamic-payment": Partial<DynamicPaymentComponentProps & BaseProps & BaseEvents>;
+
   /**
    * A container component that connects to the SDK state context
    * and displays appropriate error messages based on error state.
@@ -913,6 +1002,7 @@ export type CustomElements = {
    * Uses the VaultManagerController for display formatting
    * Now supports selection via the simplified button checked state
    * Enhanced with smooth transitions between edit and payment modes
+   * Always renders the primer-button for consistent UI and improved accessibility
    * ---
    *
    *

package/dist/primer-loader.d.ts

@@ -1727,6 +1727,7 @@ export type ResumeToken = {
 	paymentId?: string;
 };
 export interface InputValidationError {
+	field?: string;
 	name: string;
 	error: string;
 	message: string;
@@ -2096,6 +2097,7 @@ export interface IKlarnaPaymentMethodManager {
 }
 export interface IAchPaymentMethodManager {
 	start(paymentDetails: StripeAchCustomerDetails): Promise<Validation | void>;
+	setAndValidate(paymentDetails: StripeAchCustomerDetails): Promise<Validation>;
 	collectBankAccountDetails(): Promise<void>;
 	confirmMandate(): Promise<void>;
 	declineMandate(): Promise<void>;
@@ -2243,6 +2245,7 @@ export type PrimerCheckoutOptions = JSONSafe<HeadlessUniversalCheckoutOptions> &
 	submitButton?: {
 		amountVisible?: boolean;
 	};
+	stripe?: UniversalCheckoutOptions["stripe"];
 };
 declare global {
 	interface Window {
@@ -2272,6 +2275,7 @@ export interface InitializedManagersMap extends Map<PaymentMethodType, Initializ
 	get<T extends PaymentMethodType>(key: T): ManagerByType<T> | undefined;
 }
 export type RedirectPaymentMethodTypes = Exclude<PaymentMethodType, typeof PaymentMethodType.STRIPE_ACH | typeof PaymentMethodType.PAYMENT_CARD | typeof PaymentMethodType.KLARNA | typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY>;
+export type DynamicPaymentMethodTypes = typeof PaymentMethodType.STRIPE_ACH;
 export type NativePaymentMethodTypes = typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY;
 export type RedirectPaymentMethod = {
 	type: RedirectPaymentMethodTypes;
@@ -2302,6 +2306,11 @@ export type PaymentMethodByType<T extends PaymentMethodType> = Extract<Initializ
 export interface InitializedPaymentMethodMap extends Map<PaymentMethodType, InitializedPaymentMethod> {
 	get<T extends PaymentMethodType>(key: T): PaymentMethodByType<T> | undefined;
 }
+export interface AssetsConfig {
+	backgroundColor: string;
+	name: string;
+	iconUrl: string;
+}
 export declare class InitializedPayments {
 	private readonly _methods;
 	constructor(map: InitializedPaymentMethodMap);
@@ -2316,6 +2325,9 @@ export interface CardSubmitSuccessPayload {
 export interface CardSubmitErrorsPayload {
 	errors: unknown | InputValidationError[];
 }
+export interface PrimeAchErrorPayload {
+	error: Error;
+}
 export interface PrimerEvents {
 	"primer-state-changed": CustomEvent<SdkStateContext>;
 	"primer-payment-methods-updated": CustomEvent<InitializedPayments>;
@@ -2323,6 +2335,10 @@ export interface PrimerEvents {
 	"primer-card-network-change": CustomEvent<CardNetworksContext>;
 	"primer-card-submit-success": CustomEvent<CardSubmitSuccessPayload>;
 	"primer-card-submit-errors": CustomEvent<CardSubmitErrorsPayload>;
+	"primer-ach-error": CustomEvent<PrimeAchErrorPayload>;
+	"primer-ach-bank-details-collected": CustomEvent;
+	"primer-ach-mandate-confirmed": CustomEvent;
+	"primer-ach-mandate-declined": CustomEvent;
 }
 declare class PrimerEventsController implements ReactiveController {
 	host: ReactiveControllerHost & LitElement;
@@ -2348,6 +2364,37 @@ export type KlarnaCategoriesContext = {
 	categories: KlarnaPaymentMethodCategory[];
 	isLoading: boolean;
 };
+export type ReducerCallbacks<State, _Action extends {
+	type: string;
+}> = {
+	[K in keyof State]?: State[K] extends (...args: unknown[]) => unknown ? State[K] : never;
+};
+export type TypedReducer<State, Action extends {
+	type: string;
+}, Callbacks> = (state: State, action: Action, callbacks: Callbacks) => State;
+declare abstract class ReactiveStateController<Host extends ReactiveControllerHost, State, Action extends {
+	type: string;
+}, Callbacks = ReducerCallbacks<State, Action> | null> implements ReactiveController {
+	protected host: Host;
+	protected stateHandler: (state: State) => void;
+	private _dispatcher;
+	constructor(host: Host, initialState: State, reducer: TypedReducer<State, Action, Callbacks>, initialCallbacks: Callbacks, stateHandler?: (state: State) => void);
+	get currentState(): Readonly<State>;
+	protected dispatch(action: Action): void;
+	protected setCallbacks(callbacks: Partial<Callbacks>): void;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
+declare class CompositeStateController<Host extends ReactiveControllerHost> implements ReactiveController {
+	protected host: Host;
+	private _controllers;
+	constructor(host: Host);
+	addController<State, Action extends {
+		type: string;
+	}, Callbacks = ReducerCallbacks<State, Action> | null>(controller: ReactiveStateController<Host, State, Action, Callbacks>): void;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
 /**
  * Options for initializing the Vault Manager
  */
@@ -2362,9 +2409,10 @@ export interface VaultManagerInitOptions {
 export interface VaultManagerState {
 	enabled: boolean;
 	isLoading: boolean;
+	isUpdating: boolean;
 	vaultedPaymentMethods: VaultedPaymentMethod[];
 	cvvRecapture: boolean;
-	createCvvInput?: (options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>;
+	createCvvInput: ((options: CardSecurityCodeInputOptions) => Promise<CvvInput | null>) | null;
 	deleteVaultedPaymentMethod: (paymentMethodId: string) => Promise<void>;
 	startVaultedPaymentFlow: (options?: {
 		cvv?: string;
@@ -2381,10 +2429,9 @@ export interface VaultManagerItemState {
 	selectedVaultedPaymentMethod: VaultedPaymentMethod | null;
 	setSelectedVaultedPaymentMethod: (paymentMethod: VaultedPaymentMethod | null) => void;
 }
-declare class VaultManagerController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private _vaultManagerState;
-	private _vaultItemState;
+declare class VaultManagerController extends CompositeStateController<PrimerCheckoutType> {
+	private coreController;
+	private itemController;
 	private _vaultManager;
 	private _options;
 	constructor(host: PrimerCheckoutType);
@@ -2398,23 +2445,17 @@ declare class VaultManagerController implements ReactiveController {
 	set vaultManager(vaultManager: HeadlessVaultManager | null);
 	get options(): VaultManagerInitOptions | null;
 	set options(options: VaultManagerInitOptions | null);
+	get vaultManagerState(): Readonly<VaultManagerState>;
+	get vaultItemState(): Readonly<VaultManagerItemState>;
 	/**
 	 * Lifecycle method called when the host disconnects
 	 */
 	hostDisconnected(): void;
-	/**
-	 * Dispatches an action to update the core vault state
-	 */
-	private dispatchVaultManager;
-	/**
-	 * Dispatches an action to update the CVV state
-	 * Separate dispatch method to handle CVV state independently
-	 */
-	private dispatchVaultItem;
 	/**
 	 * Fetch vaulted payment methods from the server
 	 */
-	fetchVaultedPaymentMethods(): Promise<VaultedPaymentMethod[]>;
+	fetchVaultedPaymentMethods(initialLoad?: boolean): Promise<VaultedPaymentMethod[]>;
+	createCvvInput(options: CardSecurityCodeInputOptions): Promise<CvvInput | null>;
 	/**
 	 * Delete a vaulted payment method by ID
 	 */
@@ -2482,13 +2523,33 @@ declare class SDKContextController implements ReactiveController {
 	setComputedStyles(value: CSSStyleDeclaration): void;
 	setVaultManagerCvv(value: VaultItemContext): void;
 }
-declare class SdkStateController implements ReactiveController {
-	host: PrimerCheckoutType;
-	private _state;
+export type SdkStateAction = {
+	type: "START_PROCESSING";
+} | {
+	type: "START_LOADING";
+} | {
+	type: "COMPLETE_PROCESSING";
+} | {
+	type: "STOP_PROCESSING";
+} | {
+	type: "SET_ERROR";
+	payload: Error;
+} | {
+	type: "SET_FAILURE";
+	payload: {
+		code: string;
+		message: string;
+		details?: Record<string, unknown>;
+	};
+} | {
+	type: "COMPLETE_LOADING";
+} | {
+	type: "RESET";
+} | {
+	type: "RESET_ERROR";
+};
+declare class SdkStateController extends ReactiveStateController<PrimerCheckoutType, SdkState, SdkStateAction, null> {
 	constructor(host: PrimerCheckoutType);
-	hostConnected(): void;
-	private reducer;
-	private dispatch;
 	startLoading(): void;
 	startProcessing(): void;
 	stopProcessing(): void;
@@ -2497,8 +2558,8 @@ declare class SdkStateController implements ReactiveController {
 	setError(error: Error): void;
 	setFailure(code: string, message: string, details?: Record<string, unknown>): void;
 	reset(): void;
+	resetError(): void;
 	forceCompleteLoading(): void;
-	get state(): SdkState;
 }
 export interface PrimerCheckoutType extends ReactiveControllerHost, LitElement {
 	requestUpdate: ReactiveControllerHost["requestUpdate"];
@@ -2637,6 +2698,15 @@ declare const targetLocales = [
 	`zh-TW`,
 ] as const;
 export type LocaleCode = typeof sourceLocale | (typeof targetLocales)[number];
+declare class AchPaymentEventsController implements ReactiveController {
+	host: PrimerCheckoutComponent;
+	constructor(host: PrimerCheckoutComponent);
+	private _error;
+	private _mandateConfirmed;
+	private _mandateDeclined;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
 /**
  * PrimerCheckoutComponent implements the main checkout experience.
  * This component includes a CSS-only loader that displays before the JavaScript
@@ -2671,6 +2741,7 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	styleProcessingController: StyleProcessingController;
 	vaultManagerController: VaultManagerController;
 	cardNetworkController: CardNetworkController;
+	achPaymentEventsController: AchPaymentEventsController;
 	constructor();
 	attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void;
 	disconnectedCallback(): void;
@@ -2686,6 +2757,10 @@ export declare class PrimerCheckoutComponent extends LitElement implements Prime
 	addEventListener<K extends keyof ShadowRootEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: ShadowRootEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	addEventListener<K extends keyof PrimerEvents>(type: K, listener: (this: PrimerCheckoutComponent, ev: PrimerEvents[K]) => void, options?: boolean | AddEventListenerOptions): void;
+	removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof ShadowRootEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: ShadowRootEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: PrimerCheckoutComponent, ev: DocumentEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+	removeEventListener<K extends keyof PrimerEvents>(type: K, listener: (this: PrimerCheckoutComponent, ev: PrimerEvents[K]) => void, options?: boolean | EventListenerOptions): void;
 }
 /**
  * Injects the CSS loader styles into the page
@@ -3136,6 +3211,37 @@ declare global {
 		"primer-error-message": ErrorMessageComponent;
 	}
 }
+declare class PortalComponent extends LitElement {
+	static styles: CSSResult[];
+	id: string;
+	getContainer(): HTMLDivElement;
+	/**
+	 * Proxies the events sent from the portalled content and
+	 * re-dispatches them.
+	 *
+	 * TODO: find a better way to scale to new events instead
+	 * of hardcoding them one by one here.
+	 */
+	private _setupEventListeners;
+	disconnectedCallback(): void;
+	private _handleSlotChange;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-portal": PortalComponent;
+	}
+}
+declare class DialogComponent extends LitElement {
+	static styles: CSSResult[];
+	private _handleCloseClick;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-dialog": DialogComponent;
+	}
+}
 /**
  * This component renders Klarna payment method in a card-like (accordion) container with
  * payment categories options to choose from.
@@ -3161,7 +3267,7 @@ declare class PrimerKlarnaComponent extends LitElement {
 	renderSelectedCategory(): Promise<void>;
 	selectCategory(category: string): void;
 	updated(changedProperties: Map<string, unknown>): void;
-	renderCategorySelection(): typeof nothing | TemplateResult<1>;
+	renderCategorySelection(): TemplateResult<1>;
 	renderExpandedContent(): TemplateResult<1>;
 	render(): typeof nothing | TemplateResult<1> | undefined;
 }
@@ -3182,6 +3288,88 @@ declare global {
 		"primer-payment-method": PaymentMethodComponent;
 	}
 }
+export type ClientOptionsContext = PrimerCheckoutOptions | null;
+export type AchField = "firstName" | "lastName" | "emailAddress";
+export interface AchFormState {
+	value: string;
+	error: string;
+	pristine: boolean;
+	touched: boolean;
+	dirty: boolean;
+	valid: boolean;
+}
+export type AchFormStateMap = Record<AchField, AchFormState>;
+export type ValidationFunction = (data: StripeAchCustomerDetails) => Promise<Validation>;
+declare class AchPaymentFormControler implements ReactiveController {
+	host: AchPaymentComponent;
+	validate: ValidationFunction;
+	formState: AchFormStateMap;
+	get hasError(): {
+		firstName: boolean;
+		lastName: boolean;
+		emailAddress: boolean;
+	};
+	get formData(): StripeAchCustomerDetails;
+	constructor(host: AchPaymentComponent, validate: ValidationFunction);
+	setFieldValue(field: AchField, value: string): Promise<void>;
+	setValidation(validation: Validation, submit?: boolean): void;
+	setFieldTouched(field: AchField): void;
+	resetForm(): void;
+	private isValidFieldName;
+	hostConnected(): void;
+	hostDisconnected(): void;
+}
+declare class AchPaymentComponent extends LitElement {
+	static styles: CSSResult[];
+	protected readonly formController: AchPaymentFormControler;
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	sdkState: SdkStateContext | undefined;
+	clientOptions: ClientOptionsContext | undefined;
+	screen: "form" | "mandate";
+	private isSubmitting;
+	private _paymentMethodManagerTask;
+	private _handleInput;
+	private _handleBlur;
+	private _handleError;
+	private _handleSubmitButtonClick;
+	private _handleCollectBankAccountDetails;
+	private _handleConfirmMandate;
+	private _handleDeclineMandate;
+	private renderForm;
+	private renderMandate;
+	render(): TemplateResult | typeof nothing | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-ach-payment": AchPaymentComponent;
+	}
+}
+declare class DynamicPaymentComponent extends LitElement {
+	static styles: CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	sdkState: SdkStateContext;
+	headlessUtils: HeadlessUnitilsContext;
+	open: boolean;
+	private _paymentMethodManagerTask;
+	private _getAssetsTask;
+	/**
+	 * Based on packages/primer-sdk-web/src/payment-methods/Button.tsx
+	 * Should be replaced once we align on a better solution across all platforms.
+	 * TODO: get label from payment config
+	 */
+	private _legacyGetButtonLabel;
+	private _setupTasks;
+	start(): void;
+	renderDialog(): typeof nothing | TemplateResult<1>;
+	render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-dynamic-payment": DynamicPaymentComponent;
+	}
+}
 declare class RedirectPaymentComponent extends LitElement {
 	static styles: CSSResult[];
 	paymentMethod: InitializedPaymentMethod | undefined;
@@ -3189,6 +3377,11 @@ declare class RedirectPaymentComponent extends LitElement {
 	sdkState: SdkStateContext;
 	headlessUtils: HeadlessUnitilsContext;
 	private _paymentMethodManagerTask;
+	/**
+	 * Based on packages/primer-sdk-web/src/payment-methods/Button.tsx
+	 * Should be replaced once we align on a better solution across all platforms.
+	 */
+	private _legacyGetButtonLabel;
 	private _getAssetsTask;
 	private _setupTasks;
 	startRedirectPayment(): void;
@@ -3704,7 +3897,6 @@ declare global {
 		"primer-input-card-holder-name": InputCardHolderNameComponent;
 	}
 }
-export type ClientOptionsContext = PrimerCheckoutOptions | null;
 /**
  * A form submit button component for card forms.
  * Provides a consistent submit button with translation support.
@@ -3874,15 +4066,9 @@ export interface VaultManagerEventMap {
  */
 declare class VaultManagerComponent extends LitElement {
 	static styles: CSSResult[];
-	/**
-	 * Strongly typed event declarations
-	 */
+	constructor();
 	addEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
 	removeEventListener: <K extends keyof VaultManagerEventMap>(type: K, listener: (ev: VaultManagerEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void;
-	/**
-	 * The vault manager core context from the SDK
-	 * Contains vault-related functionality and state
-	 */
 	vaultManagerContext: VaultManagerContext;
 	/**
 	 * Whether we're in edit mode
@@ -3900,6 +4086,14 @@ declare class VaultManagerComponent extends LitElement {
 	 * Error message if something goes wrong
 	 */
 	private errorMessage;
+	/**
+	 * Animation duration override
+	 */
+	animationDuration: number;
+	/**
+	 * Get base animation configuration with current settings
+	 */
+	private getAnimationConfig;
 	/**
 	 * Toggle edit mode handler
 	 */
@@ -3929,13 +4123,24 @@ declare class VaultManagerComponent extends LitElement {
 	 */
 	private getPaymentMethodName;
 	/**
-	 * Render the delete confirmation for the current payment method
+	 * Render loading overlay with spinner when isUpdating is true
+	 */
+	private renderLoadingOverlay;
+	/**
+	 * Render delete confirmation content
 	 */
 	private renderDeleteConfirmation;
 	/**
-	 * Render a payment method item
+	 * Render a payment method item with appropriate animations
 	 */
 	private renderPaymentMethodItem;
+	/**
+	 * Render the payment method list with submit button
+	 */
+	private renderPaymentMethodList;
+	/**
+	 * Main render method
+	 */
 	render(): typeof nothing | TemplateResult<1>;
 }
 /**
@@ -3943,6 +4148,7 @@ declare class VaultManagerComponent extends LitElement {
  * Uses the VaultManagerController for display formatting
  * Now supports selection via the simplified button checked state
  * Enhanced with smooth transitions between edit and payment modes
+ * Always renders the primer-button for consistent UI and improved accessibility
  */
 declare class VaultPaymentMethodItemComponent extends LitElement {
 	static styles: CSSResult[];
@@ -4215,16 +4421,10 @@ declare global {
  */
 declare class ShowOtherPaymentsComponent extends LitElement {
 	static styles: CSSResult[];
-	private isShowingOtherPayments;
 	/**
 	 * Consume the vault manager context to interact with vault state
 	 */
 	vaultManager: VaultManagerContext;
-	/**
-	 * Handle expanded state change events from the collapsable component
-	 * Syncs the collapsable UI state with the vault manager state
-	 */
-	private handleExpandedChanged;
 	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
@@ -4291,11 +4491,14 @@ declare global {
 }
 
 export {
+	AchPaymentComponent as AchPayment,
 	ButtonComponent as Button,
 	CardFormComponent as CardForm,
 	CardFormSubmitComponent as CardFormSubmit,
 	CardNetworkSelectorComponent as CardFormCardNetworkSelector,
 	CollapsableComponent as Collapsable,
+	DialogComponent as Dialog,
+	DynamicPaymentComponent as DynamicPayment,
 	ErrorMessageComponent as ErrorMessage,
 	ErrorMessageContainerComponent as ErrorMessageContainer,
 	InputCardExpiryComponent as CardFormExpiry,
@@ -4308,6 +4511,7 @@ export {
 	InputWrapperComponent as InputWrapper,
 	NativePaymentComponent as NativePayment,
 	PaymentMethodComponent as PaymentMethod,
+	PortalComponent as Portal,
 	PrimerCheckoutCompleteComponent as PrimerCheckoutComplete,
 	PrimerCheckoutErrorComponent as PrimerCheckoutFailure,
 	PrimerCheckoutStateComponent as PrimerCheckoutState,