@primer-io/primer-js 0.1.8 → 0.1.9

package/dist/primer-loader.d.ts

@@ -2252,59 +2252,133 @@ declare global {
 		Primer: typeof Primer;
 	}
 }
+declare const PaymentMethodType$1: {
+	readonly WORLDPAY_IDEAL: "WORLDPAY_IDEAL";
+	readonly STRIPE_ACH: "STRIPE_ACH";
+	readonly STRIPE_IDEAL: "STRIPE_IDEAL";
+	readonly ADYEN_KLARNA: "ADYEN_KLARNA";
+	readonly ADYEN_BANCONTACT_CARD: "ADYEN_BANCONTACT_CARD";
+	readonly PAY_NL_KAARTDIRECT: "PAY_NL_KAARTDIRECT";
+	readonly ADYEN_EPS: "ADYEN_EPS";
+	readonly ADYEN_BANCONTACT_PAYCONIQ: "ADYEN_BANCONTACT_PAYCONIQ";
+	readonly OMISE_PROMPTPAY: "OMISE_PROMPTPAY";
+	readonly OMISE_TRUEMONEY: "OMISE_TRUEMONEY";
+	readonly ADYEN_MULTIBANCO: "ADYEN_MULTIBANCO";
+	readonly PACYPAY_WECHAT: "PACYPAY_WECHAT";
+	readonly PACYPAY_ALIPAY: "PACYPAY_ALIPAY";
+	readonly ADYEN_MBWAY: "ADYEN_MBWAY";
+	readonly XENDIT_DANA: "XENDIT_DANA";
+	readonly XENDIT_SHOPEEPAY: "XENDIT_SHOPEEPAY";
+	readonly ADYEN_PAYSHOP: "ADYEN_PAYSHOP";
+	readonly ADYEN_PAYTRAIL: "ADYEN_PAYTRAIL";
+	readonly CLEARPAY: "CLEARPAY";
+	readonly RAPYD_FAST: "RAPYD_FAST";
+	readonly RAPYD_PROMPTPAY: "RAPYD_PROMPTPAY";
+	readonly RAPYD_GCASH: "RAPYD_GCASH";
+	readonly RAPYD_POLI: "RAPYD_POLI";
+	readonly RAPYD_GRABPAY: "RAPYD_GRABPAY";
+	readonly PRIMER_PAYPAL: "PRIMER_PAYPAL";
+	readonly TWOC2P: "TWOC2P";
+	readonly NETS: "NETS";
+	readonly STRIPE_GIROPAY: "STRIPE_GIROPAY";
+	readonly MOLLIE_GIROPAY: "MOLLIE_GIROPAY";
+	readonly MOLLIE_EPS: "MOLLIE_EPS";
+	readonly PAY_NL_EPS: "PAY_NL_EPS";
+	readonly PAY_NL_P24: "PAY_NL_P24";
+	readonly MOLLIE_P24: "MOLLIE_P24";
+	readonly MOLLIE_SOFORT: "MOLLIE_SOFORT";
+	readonly COINBASE: "COINBASE";
+	readonly OPENNODE: "OPENNODE";
+	readonly MOLLIE_GIFT_CARD: "MOLLIE_GIFTCARD";
+	readonly XFERS_PAYNOW: "XFERS_PAYNOW";
+	readonly PAYMENT_CARD: "PAYMENT_CARD";
+	readonly APPLE_PAY: "APPLE_PAY";
+	readonly GOOGLE_PAY: "GOOGLE_PAY";
+	readonly PAYPAL: "PAYPAL";
+	readonly GO_CARDLESS: "GOCARDLESS";
+	readonly KLARNA: "KLARNA";
+	readonly PAY_NL_IDEAL: "PAY_NL_IDEAL";
+	readonly PAY_NL_SOFORT_BANKING: "PAY_NL_SOFORT_BANKING";
+	readonly PAY_NL_BANCONTACT: "PAY_NL_BANCONTACT";
+	readonly PAY_NL_PAYPAL: "PAY_NL_PAYPAL";
+	readonly PAY_NL_CREDIT_TRANSFER: "PAY_NL_CREDIT_TRANSFER";
+	readonly PAY_NL_DIRECT_DEBIT: "PAY_NL_DIRECT_DEBIT";
+	readonly PAY_NL_GIROPAY: "PAY_NL_GIROPAY";
+	readonly PAY_NL_PAYCONIQ: "PAY_NL_PAYCONIQ";
+	readonly HOOLAH: "HOOLAH";
+	readonly ADYEN_BLIK: "ADYEN_BLIK";
+	readonly ADYEN_MOBILEPAY: "ADYEN_MOBILEPAY";
+	readonly ADYEN_VIPPS: "ADYEN_VIPPS";
+	readonly ADYEN_GIROPAY: "ADYEN_GIROPAY";
+	readonly ADYEN_SOFORT: "ADYEN_SOFORT";
+	readonly ADYEN_IDEAL: "ADYEN_IDEAL";
+	readonly ADYEN_TRUSTLY: "ADYEN_TRUSTLY";
+	readonly ADYEN_ALIPAY: "ADYEN_ALIPAY";
+	readonly ADYEN_TWINT: "ADYEN_TWINT";
+	readonly ADYEN_BANK_TRANSFER: "ADYEN_BANK_TRANSFER";
+	readonly MOLLIE_BANCONTACT: "MOLLIE_BANCONTACT";
+	readonly MOLLIE_IDEAL: "MOLLIE_IDEAL";
+	readonly BUCKAROO_GIROPAY: "BUCKAROO_GIROPAY";
+	readonly BUCKAROO_EPS: "BUCKAROO_EPS";
+	readonly BUCKAROO_SOFORT: "BUCKAROO_SOFORT";
+	readonly BUCKAROO_BANCONTACT: "BUCKAROO_BANCONTACT";
+	readonly BUCKAROO_IDEAL: "BUCKAROO_IDEAL";
+	readonly ATOME: "ATOME";
+};
+type PaymentMethodType$1 = (typeof PaymentMethodType$1)[keyof typeof PaymentMethodType$1];
 export type InitializedManager = {
-	type: typeof PaymentMethodType.STRIPE_ACH;
+	type: typeof PaymentMethodType$1.STRIPE_ACH;
 	manager: IAchPaymentMethodManager;
 } | {
-	type: typeof PaymentMethodType.PAYMENT_CARD;
+	type: typeof PaymentMethodType$1.PAYMENT_CARD;
 	manager: ICardPaymentMethodManager;
 } | {
-	type: typeof PaymentMethodType.KLARNA;
+	type: typeof PaymentMethodType$1.KLARNA;
 	manager: IKlarnaPaymentMethodManager;
 } | {
 	type: RedirectPaymentMethodTypes;
 	manager: IRedirectPaymentMethodManager;
 } | {
-	type: typeof PaymentMethodType.PAYPAL | typeof PaymentMethodType.GOOGLE_PAY | typeof PaymentMethodType.APPLE_PAY;
+	type: typeof PaymentMethodType$1.PAYPAL | typeof PaymentMethodType$1.GOOGLE_PAY | typeof PaymentMethodType$1.APPLE_PAY;
 	manager: INativePaymentMethodManager;
 };
-export type ManagerByType<T extends PaymentMethodType> = Extract<InitializedManager, {
+export type ManagerByType<T extends PaymentMethodType$1> = Extract<InitializedManager, {
 	type: T;
 }>;
-export interface InitializedManagersMap extends Map<PaymentMethodType, InitializedManager> {
-	get<T extends PaymentMethodType>(key: T): ManagerByType<T> | undefined;
+export interface InitializedManagersMap extends Map<PaymentMethodType$1, InitializedManager> {
+	get<T extends PaymentMethodType$1>(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 RedirectPaymentMethodTypes = Exclude<PaymentMethodType$1, typeof PaymentMethodType$1.STRIPE_ACH | typeof PaymentMethodType$1.PAYMENT_CARD | typeof PaymentMethodType$1.KLARNA | typeof PaymentMethodType$1.PAYPAL | typeof PaymentMethodType$1.GOOGLE_PAY | typeof PaymentMethodType$1.APPLE_PAY>;
+export type DynamicPaymentMethodTypes = typeof PaymentMethodType$1.STRIPE_ACH;
+export type NativePaymentMethodTypes = typeof PaymentMethodType$1.PAYPAL | typeof PaymentMethodType$1.GOOGLE_PAY | typeof PaymentMethodType$1.APPLE_PAY;
 export type RedirectPaymentMethod = {
 	type: RedirectPaymentMethodTypes;
 	managerType: HeadlessManagerType.REDIRECT;
 };
 export type InitializedPaymentMethod = {
-	type: typeof PaymentMethodType.STRIPE_ACH;
+	type: typeof PaymentMethodType$1.STRIPE_ACH;
 	managerType: HeadlessManagerType.ACH;
 } | {
-	type: typeof PaymentMethodType.PAYMENT_CARD;
+	type: typeof PaymentMethodType$1.PAYMENT_CARD;
 	managerType: HeadlessManagerType.CARD;
 } | {
-	type: typeof PaymentMethodType.KLARNA;
+	type: typeof PaymentMethodType$1.KLARNA;
 	managerType: HeadlessManagerType.KLARNA;
 } | {
-	type: typeof PaymentMethodType.PAYPAL;
+	type: typeof PaymentMethodType$1.PAYPAL;
 	managerType: HeadlessManagerType.NATIVE;
 } | {
-	type: typeof PaymentMethodType.GOOGLE_PAY;
+	type: typeof PaymentMethodType$1.GOOGLE_PAY;
 	managerType: HeadlessManagerType.NATIVE;
 } | {
-	type: typeof PaymentMethodType.APPLE_PAY;
+	type: typeof PaymentMethodType$1.APPLE_PAY;
 	managerType: HeadlessManagerType.NATIVE;
 } | RedirectPaymentMethod;
-export type PaymentMethodByType<T extends PaymentMethodType> = Extract<InitializedPaymentMethod, {
+export type PaymentMethodByType<T extends PaymentMethodType$1> = Extract<InitializedPaymentMethod, {
 	type: T;
 }>;
-export interface InitializedPaymentMethodMap extends Map<PaymentMethodType, InitializedPaymentMethod> {
-	get<T extends PaymentMethodType>(key: T): PaymentMethodByType<T> | undefined;
+export interface InitializedPaymentMethodMap extends Map<PaymentMethodType$1, InitializedPaymentMethod> {
+	get<T extends PaymentMethodType$1>(key: T): PaymentMethodByType<T> | undefined;
 }
 export interface AssetsConfig {
 	backgroundColor: string;
@@ -2315,7 +2389,7 @@ export declare class InitializedPayments {
 	private readonly _methods;
 	constructor(map: InitializedPaymentMethodMap);
 	get<T extends RedirectPaymentMethodTypes>(type: T): RedirectPaymentMethod | undefined;
-	get<T extends (typeof PaymentMethodType)[keyof typeof PaymentMethodType]>(type: T): PaymentMethodByType<T> | undefined;
+	get<T extends (typeof PaymentMethodType$1)[keyof typeof PaymentMethodType$1]>(type: T): PaymentMethodByType<T> | undefined;
 	toArray(): InitializedPaymentMethod[];
 	size(): number;
 }
@@ -3290,7 +3364,7 @@ declare global {
 export type PaymentMethodsContext = InitializedPayments | null;
 declare class PaymentMethodComponent extends LitElement {
 	static styles: CSSResult[];
-	type: PaymentMethodType | undefined;
+	type: PaymentMethodType$1 | undefined;
 	paymentMethods: PaymentMethodsContext;
 	render(): typeof nothing | TemplateResult<1>;
 }
@@ -3403,519 +3477,293 @@ declare global {
 		"primer-redirect-payment": RedirectPaymentComponent;
 	}
 }
-declare class PrimerMainComponent extends LitElement {
-	static styles: CSSResult[];
-	private hasAssignedContent;
-	/**
-	 * Inline slotchange event listener.
-	 * Uses assignedNodes with flatten to detect if the slot has any nodes.
-	 */
-	private onSlotChange;
-	paymentMethods: PaymentMethodsContext;
-	sdkState: SdkStateContext;
-	render(): TemplateResult<1>;
+/**
+ * Events emitted by the vault manager components
+ */
+export interface VaultManagerEvents {
+	deletePaymentMethod: CustomEvent<string>;
+	cancelDelete: CustomEvent<void>;
+	confirmDelete: CustomEvent<void>;
+	toggleEditMode: CustomEvent<boolean>;
+	closeError: CustomEvent<void>;
+	vaultPaymentError: CustomEvent<{
+		error: Error | unknown;
+	}>;
 }
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-main": PrimerMainComponent;
-	}
+/**
+ * Declare the event map for strict typing of events
+ */
+export interface VaultManagerEventMap {
+	"delete-payment-method": VaultManagerEvents["deletePaymentMethod"];
+	"cancel-delete": VaultManagerEvents["cancelDelete"];
+	"confirm-delete": VaultManagerEvents["confirmDelete"];
+	"toggle-edit-mode": VaultManagerEvents["toggleEditMode"];
+	"close-error": VaultManagerEvents["closeError"];
+	"primer-vault-payment-error": VaultManagerEvents["vaultPaymentError"];
 }
 /**
- * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
- * with proper height calculations based on design system variables.
+ * VaultManagerComponent - displays and manages saved payment methods
  */
-declare class NativePaymentComponent extends LitElement {
+declare class VaultManagerComponent extends LitElement {
 	static styles: CSSResult[];
-	paymentMethod: InitializedPaymentMethod | undefined;
-	paymentManagers: InitializedManagersMap;
-	computedStyles: CSSStyleDeclaration | null;
-	private _buttonId;
-	private loadManagerTask;
 	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;
+	vaultManagerContext: VaultManagerContext;
 	/**
-	 * Calculates the button height based on CSS variables
-	 * Mirrors the calculation used in the host styles
+	 * Whether we're in edit mode
 	 */
-	private calculateButtonHeight;
+	private isEditMode;
 	/**
-	 * Creates render options with appropriate styles based on payment method type
+	 * Payment method being deleted
 	 */
-	private createRenderOptions;
-	protected updated(changedProperties: PropertyValues): void;
-	render(): symbol | TemplateResult<1> | undefined;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-native-payment": NativePaymentComponent;
-	}
-}
-/**
- * CardFormComponent serves as a container for card input components.
- * It handles form submission, validation, and provides context to child components.
- */
-declare class CardFormComponent extends LitElement {
-	static styles: CSSResult[];
-	hideLabels: boolean;
-	updated(changedProperties: Map<string, unknown>): void;
+	private deletePaymentMethodId;
 	/**
-	 * Tracks whether custom content has been provided via slot
+	 * Whether a delete operation is in progress
 	 */
-	private hasAssignedContent;
-	private selectedCardNetwork;
+	private isDeleting;
 	/**
-	 * Payment managers injected from context
+	 * Error message if something goes wrong
 	 */
-	paymentManagers: InitializedManagersMap;
+	private errorMessage;
 	/**
-	 * Context provider for card form data
+	 * Animation duration override
 	 */
-	private readonly cardFormProvider;
+	animationDuration: number;
 	/**
-	 * Events controller for dispatching form events
+	 * Get base animation configuration with current settings
 	 */
-	private readonly eventsController;
+	private getAnimationConfig;
 	/**
-	 * Task to set up the card form with hosted inputs
+	 * Toggle edit mode handler
 	 */
-	private readonly setupCardFormTask;
-	connectedCallback(): void;
-	disconnectedCallback(): void;
+	private handleToggleEditMode;
 	/**
-	 * Handles click events from slotted content.
-	 * Supports both native <button> and custom <primer-button> elements.
+	 * Handle delete click from payment method item
 	 */
-	private handleSlotButtonClick;
+	private handleDeletePaymentMethod;
 	/**
-	 * Handles direct submit events from child components
-	 * This is a backup method to catch all possible submission events
+	 * Cancel delete operation
 	 */
-	private handleDirectSubmit;
+	private handleCancelDelete;
 	/**
-	 * Determines if a button is a submit button based on its attributes
+	 * Confirm and process payment method deletion
 	 */
-	private isSubmitButton;
+	private handleConfirmDelete;
 	/**
-	 * Handles slot change events to detect custom content
+	 * Handle payment error events
 	 */
-	private onSlotChange;
+	private handlePaymentError;
 	/**
-	 * Handles the card form submission.
-	 * Validates the form and dispatches either a submit success or errors event.
+	 * Handle closing error message
 	 */
-	private submitCardPayment;
+	private handleCloseError;
 	/**
-	 * Event handler for form submission
-	 * Handles both native form submissions and custom events
+	 * Get payment method display name for the given ID
+	 */
+	private getPaymentMethodName;
+	/**
+	 * Render loading overlay with spinner when isUpdating is true
+	 */
+	private renderLoadingOverlay;
+	/**
+	 * Render delete confirmation content
+	 */
+	private renderDeleteConfirmation;
+	/**
+	 * Render a payment method item with appropriate animations
+	 */
+	private renderPaymentMethodItem;
+	/**
+	 * Render the payment method list with submit button
+	 */
+	private renderPaymentMethodList;
+	/**
+	 * Main render method
 	 */
-	private handleFormSubmit;
 	render(): typeof nothing | TemplateResult<1>;
 }
-export interface CardFormContext {
-	cardNumberInput: IHeadlessHostedInput;
-	expiryInput: IHeadlessHostedInput;
-	cvvInput: IHeadlessHostedInput;
-	setCardholderName: (val: string) => void;
-	setCardNetwork: (val: string) => void;
-	validate: () => Promise<Validation>;
-	submit: (values?: CardPaymentMethodSubmitValues) => Promise<void>;
-	errors?: Validation["validationErrors"];
-	hideLabels?: boolean;
-}
 /**
- * A shared type that ensures the host of a HostedInputController contains
- * the required properties for proper hosted input handling.
+ * VaultPaymentMethodItemComponent - displays a single payment method
+ * 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
  */
-export interface HostedInputHost extends ReactiveControllerHost, LitElement {
-	cardFormContext: CardFormContext | null;
-	computedStyles: CSSStyleDeclaration | null;
-	/** A string for the input placeholder. */
-	placeholder: string;
-	/** An accessible label for the input. */
-	ariaLabel: string;
-	/** The label for the input. */
-	label: string;
-	requestUpdate: ReactiveControllerHost["requestUpdate"];
-}
-export interface TaskFunctionOptions {
-	signal: AbortSignal;
-}
-export type TaskFunction<D extends ReadonlyArray<unknown>, R = unknown> = (args: D, options: TaskFunctionOptions) => R | typeof initialState | Promise<R | typeof initialState>;
-export type ArgsFunction<D extends ReadonlyArray<unknown>> = () => D;
-declare const TaskStatus: {
-	readonly INITIAL: 0;
-	readonly PENDING: 1;
-	readonly COMPLETE: 2;
-	readonly ERROR: 3;
-};
-declare const initialState: unique symbol;
-export type TaskStatus = (typeof TaskStatus)[keyof typeof TaskStatus];
-export type StatusRenderer<R> = {
-	initial?: () => unknown;
-	pending?: () => unknown;
-	complete?: (value: R) => unknown;
-	error?: (error: unknown) => unknown;
-};
-export interface TaskConfig<T extends ReadonlyArray<unknown>, R> {
-	task: TaskFunction<T, R>;
-	args?: ArgsFunction<T>;
-	/**
-	 * Determines if the task is run automatically when arguments change after a
-	 * host update. Default to `true`.
-	 *
-	 * If `true`, the task checks arguments during the host update (after
-	 * `willUpdate()` and before `update()` in Lit) and runs if they change. For
-	 * a task to see argument changes they must be done in `willUpdate()` or
-	 * earlier. The host element can see task status changes caused by its own
-	 * current update.
-	 *
-	 * If `'afterUpdate'`, the task checks arguments and runs _after_ the host
-	 * update. This means that the task can see host changes done in update, such
-	 * as rendered DOM. The host element can not see task status changes caused
-	 * by its own update, so the task must trigger a second host update to make
-	 * those changes renderable.
-	 *
-	 * Note: `'afterUpdate'` is unlikely to be SSR compatible in the future.
-	 *
-	 * If `false`, the task is not run automatically, and must be run with the
-	 * {@linkcode run} method.
-	 */
-	autoRun?: boolean | "afterUpdate";
+declare class VaultPaymentMethodItemComponent extends LitElement {
+	static styles: CSSResult[];
 	/**
-	 * A function that determines if the current arg and previous args arrays are
-	 * equal. If the argsEqual function returns true, the task will not auto-run.
-	 *
-	 * The default is {@linkcode shallowArrayEquals}. {@linkcode deepArrayEquals}
-	 * is also available.
+	 * Strongly typed event declarations
 	 */
-	argsEqual?: (oldArgs: T, newArgs: T) => boolean;
+	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;
 	/**
-	 * If initialValue is provided, the task is initialized to the COMPLETE
-	 * status and the value is set to initialData.
-	 *
-	 * Initial args should be coherent with the initialValue, since they are
-	 * assumed to be the args that would produce that value. When autoRun is
-	 * `true` the task will not auto-run again until the args change.
+	 * Consume the vault manager context
 	 */
-	initialValue?: R;
-	onComplete?: (value: R) => unknown;
-	onError?: (error: unknown) => unknown;
-}
-declare class Task<const T extends ReadonlyArray<unknown> = ReadonlyArray<unknown>, const R = unknown> {
-	private _previousArgs?;
-	private _task;
-	private _argsFn?;
-	private _argsEqual;
-	private _callId;
-	private _host;
-	private _value?;
-	private _error?;
-	private _abortController?;
-	private _onComplete?;
-	private _onError?;
-	private _status;
+	vaultManagerContext: VaultManagerContext;
+	vaultItemContext: VaultItemContext;
+	headlessUtils: HeadlessUnitilsContext;
 	/**
-	 * Determines if the task is run automatically when arguments change after a
-	 * host update. Default to `true`.
-	 *
-	 * @see {@link TaskConfig.autoRun} for more information.
+	 * The payment method to display
 	 */
-	autoRun: boolean | "afterUpdate";
+	paymentMethod: VaultedPaymentMethod | null;
 	/**
-	 * A Promise that resolve when the current task run is complete.
-	 *
-	 * If a new task run is started while a previous run is pending, the Promise
-	 * is kept and only resolved when the new run is completed.
+	 * Whether the component is in edit mode
 	 */
-	get taskComplete(): Promise<R>;
-	private _resolveTaskComplete?;
-	private _rejectTaskComplete?;
-	private _taskComplete?;
-	constructor(host: ReactiveControllerHost, task: TaskConfig<T, R>);
-	constructor(host: ReactiveControllerHost, task: TaskFunction<T, R>, args?: ArgsFunction<T>);
-	hostUpdate(): void;
-	hostUpdated(): void;
-	private _getArgs;
+	isEditMode: boolean;
+	private _getAssetsTask;
 	/**
-	 * Determines if the task should run when it's triggered because of a
-	 * host update, and runs the task if it should.
-	 *
-	 * A task should run when its arguments change from the previous run, based on
-	 * the args equality function.
-	 *
-	 * This method is side-effectful: it stores the new args as the previous args.
+	 * Check if this payment method is currently selected in the context
 	 */
-	private _performTask;
+	private isSelected;
 	/**
-	 * Runs a task manually.
-	 *
-	 * This can be useful for running tasks in response to events as opposed to
-	 * automatically running when host element state changes.
-	 *
-	 * @param args an optional set of arguments to use for this task run. If args
-	 *     is not given, the args function is called to get the arguments for
-	 *     this run.
+	 * Handle when the button is clicked
+	 * This is used to select the payment method and deselect others
 	 */
-	run(args?: T): Promise<void>;
+	private handleClick;
 	/**
-	 * Aborts the currently pending task run by aborting the AbortSignal
-	 * passed to the task function.
-	 *
-	 * Aborting a task does nothing if the task is not running: ie, in the
-	 * complete, error, or initial states.
-	 *
-	 * Aborting a task does not automatically cancel the task function. The task
-	 * function must be written to accept the AbortSignal and either forward it
-	 * to other APIs like `fetch()`, or handle cancellation manually by using
-	 * [`signal.throwIfAborted()`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted}
-	 * or the
-	 * [`abort`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort_event}
-	 * event.
-	 *
-	 * @param reason The reason for aborting. Passed to
-	 *     `AbortController.abort()`.
+	 * Dispatch delete event
 	 */
-	abort(reason?: unknown): void;
+	private handleDeleteClick;
 	/**
-	 * The result of the previous task run, if it resolved.
-	 *
-	 * Is `undefined` if the task has not run yet, or if the previous run errored.
+	 * Builds the common content template shared between modes
 	 */
-	get value(): R | undefined;
+	private renderPaymentMethodContent;
 	/**
-	 * The error from the previous task run, if it rejected.
-	 *
-	 * Is `undefined` if the task has not run yet, or if the previous run
-	 * completed successfully.
+	 * Render method
 	 */
-	get error(): unknown;
-	get status(): TaskStatus;
-	render<T extends StatusRenderer<R>>(renderer: T): MaybeReturnType<T["initial"]> | MaybeReturnType<T["pending"]> | MaybeReturnType<T["complete"]> | MaybeReturnType<T["error"]>;
+	render(): symbol | TemplateResult<1> | undefined;
 }
-export type MaybeReturnType<F> = F extends (...args: never[]) => infer R ? R : undefined;
-/**
- * Available input types for hosted inputs.
- */
-export type HostedInputType = "cardNumber" | "cvv" | "expire" | "cardholderName";
-/**
- * Configuration for the hosted input controller.
- */
-export interface HostedInputConfig {
-	/** Differentiates the input type. */
-	type: HostedInputType;
-	/** Selector for the container element where the input should be rendered. */
-	containerSelector: string;
-	/**
-	 * Optional callback for handling input events (e.g. for CardFormName).
-	 */
-	onInput?: (value: string) => void;
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-payment-method-item": VaultPaymentMethodItemComponent;
+	}
 }
 /**
- * Possible input source types that can be returned by getHostedInput
+ * VaultManagerHeaderComponent - displays the header for the vault manager
  */
-export type InputSource = IHeadlessHostedInput | "cardholderName" | undefined;
-declare class HostedInputController<T extends HostedInputHost> implements ReactiveController {
-	private _isFocused;
-	private _meta;
-	private _hostedInput;
-	private _standardInput;
-	private readonly host;
-	private readonly config;
-	/**
-	 * Task to set up the hosted input.
-	 */
-	readonly setupTask: Task<[
-		InputSource
-	], boolean | typeof initialState>;
-	constructor(host: T, config: HostedInputConfig);
-	/**
-	 * Focuses the input, whether it's a hosted input or standard input
-	 */
-	focusInput(): void;
-	/**
-	 * Returns the hosted input from the card form context based on the type.
-	 * For 'cardholderName', no hosted input is provided so we return a fallback indicator.
-	 */
-	private getHostedInput;
+declare class VaultManagerHeaderComponent extends LitElement {
+	static styles: CSSResult[];
 	/**
-	 * Sets up the hosted input.
-	 * If a hosted input is provided, it renders it into the target container.
-	 * Otherwise (e.g. for cardholderName), it creates a standard input element.
+	 * Strongly typed event declarations
 	 */
-	private setupHostedInput;
+	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;
 	/**
-	 * Gets the target container element from the host's render root
+	 * Whether we're in edit mode
 	 */
-	private getTargetContainer;
+	isEditMode: boolean;
 	/**
-	 * Sets up a standard input element for non-hosted input types
+	 * Whether we have payment methods to edit
 	 */
-	private setupStandardInput;
+	hasPaymentMethods: boolean;
 	/**
-	 * Sets up event listeners for standard input elements
+	 * Toggle edit mode
 	 */
-	private setupInputEventListeners;
+	private toggleEditMode;
 	/**
-	 * Sets up a hosted iframe input for iframe-based input types
+	 * Render method
 	 */
-	private setupHostedIframeInput;
-	/** Exposes the current focus state. */
-	get isFocused(): boolean;
-	/** Exposes the current metadata state. */
-	get meta(): InputMetadata;
-	hostConnected(): void;
-	hostDisconnected(): void;
+	protected render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-manager-header": VaultManagerHeaderComponent;
+	}
 }
 /**
- * Translation configuration object
- */
-export type TranslationConfig = {
-	id: string;
-	defaultMessage: string;
-};
-/**
- * Configuration for abstract input component
+ * VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method
  */
-export interface InputComponentConfig {
-	/** The component's hosted input type */
-	inputType: HostedInputType;
-	/** ID selector for the container where the input will be rendered */
-	containerSelector: string;
-	/** Error name to match in the card form context */
-	errorName: string;
-	/** Translation keys for default values */
-	translations: {
-		label: TranslationConfig | string;
-		placeholder?: TranslationConfig | string;
-		ariaLabel?: TranslationConfig | string;
-	};
-	/** Optional input handler for non-hosted inputs */
-	onInput?: (value: string) => void;
-}
-declare abstract class AbstractCardInputComponent extends LitElement implements HostedInputHost {
-	cardFormContext: CardFormContext | null;
-	computedStyles: CSSStyleDeclaration | null;
-	/** Tracks which properties were explicitly set by the user */
-	protected readonly _userAssignedProps: Set<string>;
-	/** Internal storage for property values */
-	protected _internalLabel: string;
-	protected _internalPlaceholder: string;
-	protected _internalAriaLabel: string;
-	/** Configuration for this input component */
-	protected abstract readonly config: InputComponentConfig;
-	/** Hosted input controller */
-	protected readonly hostedInputController: HostedInputController<HostedInputHost>;
-	/**
-	 * Gets a translated or static string value from the translation config
-	 */
-	private getTranslatedValue;
-	/**
-	 * The input label text.
-	 * Falls back to localized default if not explicitly set.
-	 */
-	get label(): string;
-	set label(value: string);
-	/**
-	 * The input placeholder text.
-	 * Falls back to localized default if not explicitly set.
-	 * When explicitly set to empty string, no placeholder will be displayed.
-	 */
-	get placeholder(): string;
-	set placeholder(value: string);
+declare class VaultDeleteConfirmationComponent extends LitElement {
+	static styles: CSSResult[];
 	/**
-	 * The input aria-label attribute.
-	 * Falls back to localized default if not explicitly set.
+	 * Strongly typed event declarations
 	 */
-	get ariaLabel(): string;
-	set ariaLabel(value: string);
-	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;
 	/**
-	 * Initialize the controller after the component has been constructed
-	 * and the config is available
+	 * Whether a delete operation is in progress
 	 */
-	protected childUpdated(): void;
+	isDeleting: boolean;
 	/**
-	 * Handler for wrapper-click event from InputWrapper component
-	 * This is still needed for hosted iframe inputs
+	 * The ID of the payment method being deleted
 	 */
-	private handleWrapperClick;
+	paymentMethodId: string;
 	/**
-	 * Get the error code from the hosted input controller when the input is submitted or touched
-	 *
-	 * Can be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`
-	 * uses the same logic to compute the error code
-	 *
-	 * @returns {string|null}
+	 * Payment method name to display in confirmation
 	 */
-	getError(): string | null;
+	paymentMethodName: string;
 	/**
-	 * Common rendering logic for all card input components
+	 * Consume the vault manager context to access payment method info
 	 */
-	protected renderInput(): typeof nothing | TemplateResult<1>;
-}
-/**
- * Card number input component with dynamic card network detection and selection
- */
-declare class InputCardNumberComponent extends AbstractCardInputComponent {
-	static styles: CSSResult[];
+	vaultManager: VaultManagerContext;
 	/**
-	 * Configuration for this input component
+	 * Handle confirm click
 	 */
-	protected readonly config: InputComponentConfig;
-	constructor();
+	private handleConfirmClick;
 	/**
-	 * Handle network selection from the network selector component
+	 * Handle cancel click
 	 */
-	private handleNetworkSelected;
+	private handleCancelClick;
 	/**
-	 * Override the renderInput method to include the network selector
+	 * Render method
 	 */
-	protected renderInput(): typeof nothing | TemplateResult<1>;
-	render(): typeof nothing | TemplateResult<1>;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-input-card-number": InputCardNumberComponent;
-	}
-}
-declare class InputCvvComponent extends AbstractCardInputComponent {
-	static styles: CSSResult[];
-	protected readonly config: InputComponentConfig;
-	constructor();
-	render(): typeof nothing | TemplateResult<1>;
+	protected render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-input-cvv": InputCvvComponent;
+		"primer-vault-delete-confirmation": VaultDeleteConfirmationComponent;
 	}
 }
-declare class InputCardExpiryComponent extends AbstractCardInputComponent {
+/**
+ * VaultEmptyStateComponent - displays when no payment methods are available
+ */
+declare class VaultEmptyStateComponent extends LitElement {
 	static styles: CSSResult[];
-	protected readonly config: InputComponentConfig;
-	constructor();
-	render(): typeof nothing | TemplateResult<1>;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-input-card-expiry": InputCardExpiryComponent;
+		"primer-vault-empty-state": VaultEmptyStateComponent;
 	}
 }
-declare class InputCardHolderNameComponent extends AbstractCardInputComponent {
+/**
+ * VaultErrorMessageComponent - displays error messages with improved visuals
+ */
+declare class VaultErrorMessageComponent extends LitElement {
 	static styles: CSSResult[];
-	protected readonly config: InputComponentConfig;
-	constructor();
-	private handleInput;
-	render(): typeof nothing | TemplateResult<1>;
+	/**
+	 * Strongly typed event declarations
+	 */
+	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 error message to display
+	 */
+	errorMessage: string;
+	/**
+	 * Handle dismiss click
+	 */
+	private handleDismiss;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-input-card-holder-name": InputCardHolderNameComponent;
+		"primer-vault-error-message": VaultErrorMessageComponent;
 	}
 }
 /**
- * A form submit button component for card forms.
+ * A submit button component for vault payment flows.
  * Provides a consistent submit button with translation support.
+ * Integrates with the vault manager context to handle payment submission.
  */
-declare class CardFormSubmitComponent extends LitElement {
+declare class VaultPaymentSubmitComponent extends LitElement {
 	static styles: CSSResult[];
 	private readonly _userAssignedProps;
 	private _internalButtonText;
@@ -3926,8 +3774,10 @@ declare class CardFormSubmitComponent extends LitElement {
 	get buttonText(): string;
 	set buttonText(value: string);
 	headlessInstance: HeadlessUnitilsContext;
-	clientOptions: ClientOptionsContext;
 	sdkState: SdkStateContext;
+	vaultItemContext: VaultItemContext;
+	vaultManager: VaultManagerContext;
+	clientOptions: PrimerCheckoutOptions | null;
 	/**
 	 * The button variant to use.
 	 * @default "primary"
@@ -3935,409 +3785,543 @@ declare class CardFormSubmitComponent extends LitElement {
 	variant: string;
 	/**
 	 * Whether the button is disabled.
+	 * This property allows external disabling of the button
+	 * regardless of the context state.
 	 * @default false
 	 */
 	disabled: boolean;
-	private handleClick;
-	render(): TemplateResult<1>;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-card-form-submit": CardFormSubmitComponent;
-	}
-}
-/**
- * Component for displaying and selecting card networks
- * Uses context directly rather than properties
- *
- * @fires network-selected - Dispatched when a network is selected with the network name as detail
- */
-declare class CardNetworkSelectorComponent extends LitElement {
-	static styles: CSSResult[];
-	/**
-	 * Card networks context from provider
-	 */
-	cardNetworks: CardNetworksContext;
-	headlessUtils: HeadlessUnitilsContext;
-	private selectedCardNetwork;
-	/**
-	 * Internal state to track if dropdown is open
-	 */
-	private isDropdownOpen;
-	/**
-	 * Index of the currently focused network in the dropdown
-	 */
-	private focusedNetworkIndex;
-	/**
-	 * Tracks if keyboard navigation is being used
-	 */
-	private isKeyboardNavigation;
 	/**
-	 * Reference to the dropdown button
-	 */
-	private buttonRef;
-	/**
-	 * Reference to the dropdown container
-	 */
-	private dropdownRef;
-	/**
-	 * Reference to network option elements
-	 */
-	private networkOptionRefs;
-	/**
-	 * Toggle the dropdown state
-	 */
-	private toggleDropdown;
-	private getNetworkIconUrl;
-	/**
-	 * Get selectable networks from context
-	 */
-	private getSelectableNetworks;
-	/**
-	 * Get detected network from context
-	 */
-	private getDetectedNetwork;
-	/**
-	 * Get the index of the currently selected network
-	 */
-	private getSelectedNetworkIndex;
-	/**
-	 * Handle network selection
-	 */
-	private selectNetwork;
-	/**
-	 * Handle click outside to close dropdown
-	 */
-	private handleClickOutside;
-	/**
-	 * Handle mouse movement to disable keyboard navigation mode
+	 * Handle button click event.
+	 * Prevents default form submission and triggers the vault payment flow.
 	 */
-	private handleMouseMove;
+	private handleClick;
 	/**
-	 * Handle keydown events for keyboard navigation
+	 * Computed property to determine if the button should be disabled
 	 */
-	private handleKeyDown;
+	private get isButtonDisabled();
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-payment-submit": VaultPaymentSubmitComponent;
+	}
+}
+/**
+ * CVV Input component for vault payment methods
+ * Renders a secure iframe for CVV input when required by the selected payment method
+ * Uses dedicated CVV context to minimize re-renders
+ */
+declare class VaultCvvInputComponent extends LitElement {
+	static styles: CSSResult[];
 	/**
-	 * Focus the current network option
+	 * Form context for checking form dirty state
 	 */
-	private focusNetworkOption;
+	vaultManagerFormContext: VaultManagerContext;
 	/**
-	 * Save reference to network option element
+	 * CVV-specific context for dedicated CVV handling
+	 * Separated to minimize re-renders on frequent CVV input changes
 	 */
-	private setNetworkOptionRef;
+	vaultManagerCvvContext: VaultItemContext;
+	computedStyles: CSSStyleDeclaration | null;
+	paymentMethod: PaymentCardVaultedMethod | null;
+	private cvvError;
+	private cvvInputIsDirty;
+	private cvvInputIsBlurred;
+	private cvvInput;
 	/**
-	 * Attach event listener to the component for keydown events
-	 * and to document for click outside and mousemove
+	 * Unique ID for the CVV input container
 	 */
-	connectedCallback(): void;
+	private readonly cvvContainerId;
+	private _setupCVVIframe;
+	constructor();
+	disconnectedCallback(): void;
 	/**
-	 * Handle document-level keydown events, but only when dropdown is open
-	 * This allows keyboard navigation to continue working
+	 * Update CVV metadata in the context when input changes
 	 */
-	private handleDocumentKeyDown;
+	onCvvInputChange(): void;
+	onBlur(): void;
 	/**
-	 * Lifecycle: Remove all event listeners when disconnected
+	 * Main render method
 	 */
-	disconnectedCallback(): void;
-	render(): TemplateResult<1>;
+	protected render(): symbol | TemplateResult<1> | undefined;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-card-network-selector": CardNetworkSelectorComponent;
+		"primer-vault-cvv-input": VaultCvvInputComponent;
 	}
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-card-form": CardFormComponent;
+		"primer-vault-manager": VaultManagerComponent;
 	}
 }
 /**
- * Events emitted by the vault manager components
- */
-export interface VaultManagerEvents {
-	deletePaymentMethod: CustomEvent<string>;
-	cancelDelete: CustomEvent<void>;
-	confirmDelete: CustomEvent<void>;
-	toggleEditMode: CustomEvent<boolean>;
-	closeError: CustomEvent<void>;
-	vaultPaymentError: CustomEvent<{
-		error: Error | unknown;
-	}>;
-}
-/**
- * Declare the event map for strict typing of events
- */
-export interface VaultManagerEventMap {
-	"delete-payment-method": VaultManagerEvents["deletePaymentMethod"];
-	"cancel-delete": VaultManagerEvents["cancelDelete"];
-	"confirm-delete": VaultManagerEvents["confirmDelete"];
-	"toggle-edit-mode": VaultManagerEvents["toggleEditMode"];
-	"close-error": VaultManagerEvents["closeError"];
-	"primer-vault-payment-error": VaultManagerEvents["vaultPaymentError"];
-}
-/**
- * VaultManagerComponent - displays and manages saved payment methods
+ * CardFormComponent serves as a container for card input components.
+ * It handles form submission, validation, and provides context to child components.
  */
-declare class VaultManagerComponent extends LitElement {
+declare class CardFormComponent extends LitElement {
 	static styles: CSSResult[];
-	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;
-	vaultManagerContext: VaultManagerContext;
+	hideLabels: boolean;
+	updated(changedProperties: Map<string, unknown>): void;
 	/**
-	 * Whether we're in edit mode
+	 * Tracks whether custom content has been provided via slot
 	 */
-	private isEditMode;
+	private hasAssignedContent;
+	private selectedCardNetwork;
 	/**
-	 * Payment method being deleted
+	 * Payment managers injected from context
 	 */
-	private deletePaymentMethodId;
+	paymentManagers: InitializedManagersMap;
 	/**
-	 * Whether a delete operation is in progress
+	 * Context provider for card form data
 	 */
-	private isDeleting;
+	private readonly cardFormProvider;
 	/**
-	 * Error message if something goes wrong
+	 * Events controller for dispatching form events
 	 */
-	private errorMessage;
+	private readonly eventsController;
 	/**
-	 * Animation duration override
+	 * Task to set up the card form with hosted inputs
 	 */
-	animationDuration: number;
+	private readonly setupCardFormTask;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
 	/**
-	 * Get base animation configuration with current settings
+	 * Handles click events from slotted content.
+	 * Supports both native <button> and custom <primer-button> elements.
 	 */
-	private getAnimationConfig;
+	private handleSlotButtonClick;
 	/**
-	 * Toggle edit mode handler
+	 * Handles direct submit events from child components
+	 * This is a backup method to catch all possible submission events
 	 */
-	private handleToggleEditMode;
+	private handleDirectSubmit;
 	/**
-	 * Handle delete click from payment method item
+	 * Determines if a button is a submit button based on its attributes
 	 */
-	private handleDeletePaymentMethod;
+	private isSubmitButton;
 	/**
-	 * Cancel delete operation
+	 * Handles slot change events to detect custom content
 	 */
-	private handleCancelDelete;
+	private onSlotChange;
 	/**
-	 * Confirm and process payment method deletion
+	 * Handles the card form submission.
+	 * Validates the form and dispatches either a submit success or errors event.
 	 */
-	private handleConfirmDelete;
+	private submitCardPayment;
 	/**
-	 * Handle payment error events
+	 * Event handler for form submission
+	 * Handles both native form submissions and custom events
 	 */
-	private handlePaymentError;
+	private handleFormSubmit;
+	render(): typeof nothing | TemplateResult<1>;
+}
+export interface CardFormContext {
+	cardNumberInput: IHeadlessHostedInput;
+	expiryInput: IHeadlessHostedInput;
+	cvvInput: IHeadlessHostedInput;
+	setCardholderName: (val: string) => void;
+	setCardNetwork: (val: string) => void;
+	validate: () => Promise<Validation>;
+	submit: (values?: CardPaymentMethodSubmitValues) => Promise<void>;
+	errors?: Validation["validationErrors"];
+	hideLabels?: boolean;
+}
+/**
+ * A shared type that ensures the host of a HostedInputController contains
+ * the required properties for proper hosted input handling.
+ */
+export interface HostedInputHost extends ReactiveControllerHost, LitElement {
+	cardFormContext: CardFormContext | null;
+	computedStyles: CSSStyleDeclaration | null;
+	/** A string for the input placeholder. */
+	placeholder: string;
+	/** An accessible label for the input. */
+	ariaLabel: string;
+	/** The label for the input. */
+	label: string;
+	requestUpdate: ReactiveControllerHost["requestUpdate"];
+}
+export interface TaskFunctionOptions {
+	signal: AbortSignal;
+}
+export type TaskFunction<D extends ReadonlyArray<unknown>, R = unknown> = (args: D, options: TaskFunctionOptions) => R | typeof initialState | Promise<R | typeof initialState>;
+export type ArgsFunction<D extends ReadonlyArray<unknown>> = () => D;
+declare const TaskStatus: {
+	readonly INITIAL: 0;
+	readonly PENDING: 1;
+	readonly COMPLETE: 2;
+	readonly ERROR: 3;
+};
+declare const initialState: unique symbol;
+export type TaskStatus = (typeof TaskStatus)[keyof typeof TaskStatus];
+export type StatusRenderer<R> = {
+	initial?: () => unknown;
+	pending?: () => unknown;
+	complete?: (value: R) => unknown;
+	error?: (error: unknown) => unknown;
+};
+export interface TaskConfig<T extends ReadonlyArray<unknown>, R> {
+	task: TaskFunction<T, R>;
+	args?: ArgsFunction<T>;
 	/**
-	 * Handle closing error message
+	 * Determines if the task is run automatically when arguments change after a
+	 * host update. Default to `true`.
+	 *
+	 * If `true`, the task checks arguments during the host update (after
+	 * `willUpdate()` and before `update()` in Lit) and runs if they change. For
+	 * a task to see argument changes they must be done in `willUpdate()` or
+	 * earlier. The host element can see task status changes caused by its own
+	 * current update.
+	 *
+	 * If `'afterUpdate'`, the task checks arguments and runs _after_ the host
+	 * update. This means that the task can see host changes done in update, such
+	 * as rendered DOM. The host element can not see task status changes caused
+	 * by its own update, so the task must trigger a second host update to make
+	 * those changes renderable.
+	 *
+	 * Note: `'afterUpdate'` is unlikely to be SSR compatible in the future.
+	 *
+	 * If `false`, the task is not run automatically, and must be run with the
+	 * {@linkcode run} method.
 	 */
-	private handleCloseError;
+	autoRun?: boolean | "afterUpdate";
 	/**
-	 * Get payment method display name for the given ID
+	 * A function that determines if the current arg and previous args arrays are
+	 * equal. If the argsEqual function returns true, the task will not auto-run.
+	 *
+	 * The default is {@linkcode shallowArrayEquals}. {@linkcode deepArrayEquals}
+	 * is also available.
 	 */
-	private getPaymentMethodName;
+	argsEqual?: (oldArgs: T, newArgs: T) => boolean;
+	/**
+	 * If initialValue is provided, the task is initialized to the COMPLETE
+	 * status and the value is set to initialData.
+	 *
+	 * Initial args should be coherent with the initialValue, since they are
+	 * assumed to be the args that would produce that value. When autoRun is
+	 * `true` the task will not auto-run again until the args change.
+	 */
+	initialValue?: R;
+	onComplete?: (value: R) => unknown;
+	onError?: (error: unknown) => unknown;
+}
+declare class Task<const T extends ReadonlyArray<unknown> = ReadonlyArray<unknown>, const R = unknown> {
+	private _previousArgs?;
+	private _task;
+	private _argsFn?;
+	private _argsEqual;
+	private _callId;
+	private _host;
+	private _value?;
+	private _error?;
+	private _abortController?;
+	private _onComplete?;
+	private _onError?;
+	private _status;
+	/**
+	 * Determines if the task is run automatically when arguments change after a
+	 * host update. Default to `true`.
+	 *
+	 * @see {@link TaskConfig.autoRun} for more information.
+	 */
+	autoRun: boolean | "afterUpdate";
+	/**
+	 * A Promise that resolve when the current task run is complete.
+	 *
+	 * If a new task run is started while a previous run is pending, the Promise
+	 * is kept and only resolved when the new run is completed.
+	 */
+	get taskComplete(): Promise<R>;
+	private _resolveTaskComplete?;
+	private _rejectTaskComplete?;
+	private _taskComplete?;
+	constructor(host: ReactiveControllerHost, task: TaskConfig<T, R>);
+	constructor(host: ReactiveControllerHost, task: TaskFunction<T, R>, args?: ArgsFunction<T>);
+	hostUpdate(): void;
+	hostUpdated(): void;
+	private _getArgs;
 	/**
-	 * Render loading overlay with spinner when isUpdating is true
+	 * Determines if the task should run when it's triggered because of a
+	 * host update, and runs the task if it should.
+	 *
+	 * A task should run when its arguments change from the previous run, based on
+	 * the args equality function.
+	 *
+	 * This method is side-effectful: it stores the new args as the previous args.
 	 */
-	private renderLoadingOverlay;
+	private _performTask;
 	/**
-	 * Render delete confirmation content
+	 * Runs a task manually.
+	 *
+	 * This can be useful for running tasks in response to events as opposed to
+	 * automatically running when host element state changes.
+	 *
+	 * @param args an optional set of arguments to use for this task run. If args
+	 *     is not given, the args function is called to get the arguments for
+	 *     this run.
 	 */
-	private renderDeleteConfirmation;
+	run(args?: T): Promise<void>;
 	/**
-	 * Render a payment method item with appropriate animations
+	 * Aborts the currently pending task run by aborting the AbortSignal
+	 * passed to the task function.
+	 *
+	 * Aborting a task does nothing if the task is not running: ie, in the
+	 * complete, error, or initial states.
+	 *
+	 * Aborting a task does not automatically cancel the task function. The task
+	 * function must be written to accept the AbortSignal and either forward it
+	 * to other APIs like `fetch()`, or handle cancellation manually by using
+	 * [`signal.throwIfAborted()`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/throwIfAborted}
+	 * or the
+	 * [`abort`]{@link https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort_event}
+	 * event.
+	 *
+	 * @param reason The reason for aborting. Passed to
+	 *     `AbortController.abort()`.
 	 */
-	private renderPaymentMethodItem;
+	abort(reason?: unknown): void;
 	/**
-	 * Render the payment method list with submit button
+	 * The result of the previous task run, if it resolved.
+	 *
+	 * Is `undefined` if the task has not run yet, or if the previous run errored.
 	 */
-	private renderPaymentMethodList;
+	get value(): R | undefined;
 	/**
-	 * Main render method
+	 * The error from the previous task run, if it rejected.
+	 *
+	 * Is `undefined` if the task has not run yet, or if the previous run
+	 * completed successfully.
 	 */
-	render(): typeof nothing | TemplateResult<1>;
+	get error(): unknown;
+	get status(): TaskStatus;
+	render<T extends StatusRenderer<R>>(renderer: T): MaybeReturnType<T["initial"]> | MaybeReturnType<T["pending"]> | MaybeReturnType<T["complete"]> | MaybeReturnType<T["error"]>;
 }
+export type MaybeReturnType<F> = F extends (...args: never[]) => infer R ? R : undefined;
 /**
- * VaultPaymentMethodItemComponent - displays a single payment method
- * 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
+ * Available input types for hosted inputs.
  */
-declare class VaultPaymentMethodItemComponent extends LitElement {
-	static styles: CSSResult[];
+export type HostedInputType = "cardNumber" | "cvv" | "expire" | "cardholderName";
+/**
+ * Configuration for the hosted input controller.
+ */
+export interface HostedInputConfig {
+	/** Differentiates the input type. */
+	type: HostedInputType;
+	/** Selector for the container element where the input should be rendered. */
+	containerSelector: string;
 	/**
-	 * Strongly typed event declarations
+	 * Optional callback for handling input events (e.g. for CardFormName).
 	 */
-	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;
+	onInput?: (value: string) => void;
+}
+/**
+ * Possible input source types that can be returned by getHostedInput
+ */
+export type InputSource = IHeadlessHostedInput | "cardholderName" | undefined;
+declare class HostedInputController<T extends HostedInputHost> implements ReactiveController {
+	private _isFocused;
+	private _meta;
+	private _hostedInput;
+	private _standardInput;
+	private readonly host;
+	private readonly config;
 	/**
-	 * Consume the vault manager context
+	 * Task to set up the hosted input.
 	 */
-	vaultManagerContext: VaultManagerContext;
-	vaultItemContext: VaultItemContext;
-	headlessUtils: HeadlessUnitilsContext;
+	readonly setupTask: Task<[
+		InputSource
+	], boolean | typeof initialState>;
+	constructor(host: T, config: HostedInputConfig);
 	/**
-	 * The payment method to display
+	 * Focuses the input, whether it's a hosted input or standard input
 	 */
-	paymentMethod: VaultedPaymentMethod | null;
+	focusInput(): void;
 	/**
-	 * Whether the component is in edit mode
+	 * Returns the hosted input from the card form context based on the type.
+	 * For 'cardholderName', no hosted input is provided so we return a fallback indicator.
 	 */
-	isEditMode: boolean;
-	private _getAssetsTask;
+	private getHostedInput;
 	/**
-	 * Check if this payment method is currently selected in the context
+	 * Sets up the hosted input.
+	 * If a hosted input is provided, it renders it into the target container.
+	 * Otherwise (e.g. for cardholderName), it creates a standard input element.
 	 */
-	private isSelected;
+	private setupHostedInput;
 	/**
-	 * Handle when the button is clicked
-	 * This is used to select the payment method and deselect others
+	 * Gets the target container element from the host's render root
 	 */
-	private handleClick;
+	private getTargetContainer;
 	/**
-	 * Dispatch delete event
+	 * Sets up a standard input element for non-hosted input types
 	 */
-	private handleDeleteClick;
+	private setupStandardInput;
 	/**
-	 * Builds the common content template shared between modes
+	 * Sets up event listeners for standard input elements
 	 */
-	private renderPaymentMethodContent;
+	private setupInputEventListeners;
 	/**
-	 * Render method
+	 * Sets up a hosted iframe input for iframe-based input types
 	 */
-	render(): symbol | TemplateResult<1> | undefined;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-vault-payment-method-item": VaultPaymentMethodItemComponent;
-	}
+	private setupHostedIframeInput;
+	/** Exposes the current focus state. */
+	get isFocused(): boolean;
+	/** Exposes the current metadata state. */
+	get meta(): InputMetadata;
+	hostConnected(): void;
+	hostDisconnected(): void;
 }
 /**
- * VaultManagerHeaderComponent - displays the header for the vault manager
+ * Translation configuration object
  */
-declare class VaultManagerHeaderComponent extends LitElement {
-	static styles: CSSResult[];
-	/**
-	 * Strongly typed event declarations
-	 */
-	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;
-	/**
-	 * Whether we're in edit mode
-	 */
-	isEditMode: boolean;
+export type TranslationConfig = {
+	id: string;
+	defaultMessage: string;
+};
+/**
+ * Configuration for abstract input component
+ */
+export interface InputComponentConfig {
+	/** The component's hosted input type */
+	inputType: HostedInputType;
+	/** ID selector for the container where the input will be rendered */
+	containerSelector: string;
+	/** Error name to match in the card form context */
+	errorName: string;
+	/** Translation keys for default values */
+	translations: {
+		label: TranslationConfig | string;
+		placeholder?: TranslationConfig | string;
+		ariaLabel?: TranslationConfig | string;
+	};
+	/** Optional input handler for non-hosted inputs */
+	onInput?: (value: string) => void;
+}
+declare abstract class AbstractCardInputComponent extends LitElement implements HostedInputHost {
+	cardFormContext: CardFormContext | null;
+	computedStyles: CSSStyleDeclaration | null;
+	/** Tracks which properties were explicitly set by the user */
+	protected readonly _userAssignedProps: Set<string>;
+	/** Internal storage for property values */
+	protected _internalLabel: string;
+	protected _internalPlaceholder: string;
+	protected _internalAriaLabel: string;
+	/** Configuration for this input component */
+	protected abstract readonly config: InputComponentConfig;
+	/** Hosted input controller */
+	protected readonly hostedInputController: HostedInputController<HostedInputHost>;
 	/**
-	 * Whether we have payment methods to edit
+	 * Gets a translated or static string value from the translation config
 	 */
-	hasPaymentMethods: boolean;
+	private getTranslatedValue;
 	/**
-	 * Toggle edit mode
+	 * The input label text.
+	 * Falls back to localized default if not explicitly set.
 	 */
-	private toggleEditMode;
+	get label(): string;
+	set label(value: string);
 	/**
-	 * Render method
+	 * The input placeholder text.
+	 * Falls back to localized default if not explicitly set.
+	 * When explicitly set to empty string, no placeholder will be displayed.
 	 */
-	protected render(): TemplateResult<1>;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-vault-manager-header": VaultManagerHeaderComponent;
-	}
-}
-/**
- * VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method
- */
-declare class VaultDeleteConfirmationComponent extends LitElement {
-	static styles: CSSResult[];
+	get placeholder(): string;
+	set placeholder(value: string);
 	/**
-	 * Strongly typed event declarations
+	 * The input aria-label attribute.
+	 * Falls back to localized default if not explicitly set.
 	 */
-	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;
+	get ariaLabel(): string;
+	set ariaLabel(value: string);
+	constructor();
 	/**
-	 * Whether a delete operation is in progress
+	 * Initialize the controller after the component has been constructed
+	 * and the config is available
 	 */
-	isDeleting: boolean;
+	protected childUpdated(): void;
 	/**
-	 * The ID of the payment method being deleted
+	 * Handler for wrapper-click event from InputWrapper component
+	 * This is still needed for hosted iframe inputs
 	 */
-	paymentMethodId: string;
+	private handleWrapperClick;
 	/**
-	 * Payment method name to display in confirmation
+	 * Get the error code from the hosted input controller when the input is submitted or touched
+	 *
+	 * Can be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`
+	 * uses the same logic to compute the error code
+	 *
+	 * @returns {string|null}
 	 */
-	paymentMethodName: string;
+	getError(): string | null;
 	/**
-	 * Consume the vault manager context to access payment method info
+	 * Common rendering logic for all card input components
 	 */
-	vaultManager: VaultManagerContext;
+	protected renderInput(): typeof nothing | TemplateResult<1>;
+}
+/**
+ * Card number input component with dynamic card network detection and selection
+ */
+declare class InputCardNumberComponent extends AbstractCardInputComponent {
+	static styles: CSSResult[];
 	/**
-	 * Handle confirm click
+	 * Configuration for this input component
 	 */
-	private handleConfirmClick;
+	protected readonly config: InputComponentConfig;
+	constructor();
 	/**
-	 * Handle cancel click
+	 * Handle network selection from the network selector component
 	 */
-	private handleCancelClick;
+	private handleNetworkSelected;
 	/**
-	 * Render method
+	 * Override the renderInput method to include the network selector
 	 */
-	protected render(): TemplateResult<1>;
+	protected renderInput(): typeof nothing | TemplateResult<1>;
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-delete-confirmation": VaultDeleteConfirmationComponent;
+		"primer-input-card-number": InputCardNumberComponent;
 	}
 }
-/**
- * VaultEmptyStateComponent - displays when no payment methods are available
- */
-declare class VaultEmptyStateComponent extends LitElement {
+declare class InputCvvComponent extends AbstractCardInputComponent {
 	static styles: CSSResult[];
-	/**
-	 * Render method
-	 */
-	protected render(): TemplateResult<1>;
+	protected readonly config: InputComponentConfig;
+	constructor();
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-empty-state": VaultEmptyStateComponent;
+		"primer-input-cvv": InputCvvComponent;
 	}
 }
-/**
- * VaultErrorMessageComponent - displays error messages with improved visuals
- */
-declare class VaultErrorMessageComponent extends LitElement {
+declare class InputCardExpiryComponent extends AbstractCardInputComponent {
 	static styles: CSSResult[];
-	/**
-	 * Strongly typed event declarations
-	 */
-	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 error message to display
-	 */
-	errorMessage: string;
-	/**
-	 * Handle dismiss click
-	 */
-	private handleDismiss;
-	/**
-	 * Render method
-	 */
-	protected render(): TemplateResult<1>;
+	protected readonly config: InputComponentConfig;
+	constructor();
+	render(): typeof nothing | TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-error-message": VaultErrorMessageComponent;
+		"primer-input-card-expiry": InputCardExpiryComponent;
+	}
+}
+declare class InputCardHolderNameComponent extends AbstractCardInputComponent {
+	static styles: CSSResult[];
+	protected readonly config: InputComponentConfig;
+	constructor();
+	private handleInput;
+	render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-input-card-holder-name": InputCardHolderNameComponent;
 	}
 }
 /**
- * A submit button component for vault payment flows.
+ * A form submit button component for card forms.
  * Provides a consistent submit button with translation support.
- * Integrates with the vault manager context to handle payment submission.
  */
-declare class VaultPaymentSubmitComponent extends LitElement {
+declare class CardFormSubmitComponent extends LitElement {
 	static styles: CSSResult[];
 	private readonly _userAssignedProps;
 	private _internalButtonText;
@@ -4348,10 +4332,8 @@ declare class VaultPaymentSubmitComponent extends LitElement {
 	get buttonText(): string;
 	set buttonText(value: string);
 	headlessInstance: HeadlessUnitilsContext;
+	clientOptions: ClientOptionsContext;
 	sdkState: SdkStateContext;
-	vaultItemContext: VaultItemContext;
-	vaultManager: VaultManagerContext;
-	clientOptions: PrimerCheckoutOptions | null;
 	/**
 	 * The button variant to use.
 	 * @default "primary"
@@ -4359,74 +4341,120 @@ declare class VaultPaymentSubmitComponent extends LitElement {
 	variant: string;
 	/**
 	 * Whether the button is disabled.
-	 * This property allows external disabling of the button
-	 * regardless of the context state.
 	 * @default false
 	 */
 	disabled: boolean;
-	/**
-	 * Handle button click event.
-	 * Prevents default form submission and triggers the vault payment flow.
-	 */
 	private handleClick;
-	/**
-	 * Computed property to determine if the button should be disabled
-	 */
-	private get isButtonDisabled();
 	render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-payment-submit": VaultPaymentSubmitComponent;
+		"primer-card-form-submit": CardFormSubmitComponent;
 	}
 }
 /**
- * CVV Input component for vault payment methods
- * Renders a secure iframe for CVV input when required by the selected payment method
- * Uses dedicated CVV context to minimize re-renders
+ * Component for displaying and selecting card networks
+ * Uses context directly rather than properties
+ *
+ * @fires network-selected - Dispatched when a network is selected with the network name as detail
  */
-declare class VaultCvvInputComponent extends LitElement {
+declare class CardNetworkSelectorComponent extends LitElement {
 	static styles: CSSResult[];
 	/**
-	 * Form context for checking form dirty state
+	 * Card networks context from provider
 	 */
-	vaultManagerFormContext: VaultManagerContext;
+	cardNetworks: CardNetworksContext;
+	headlessUtils: HeadlessUnitilsContext;
+	private selectedCardNetwork;
 	/**
-	 * CVV-specific context for dedicated CVV handling
-	 * Separated to minimize re-renders on frequent CVV input changes
+	 * Internal state to track if dropdown is open
 	 */
-	vaultManagerCvvContext: VaultItemContext;
-	computedStyles: CSSStyleDeclaration | null;
-	paymentMethod: PaymentCardVaultedMethod | null;
-	private cvvError;
-	private cvvInputIsDirty;
-	private cvvInputIsBlurred;
-	private cvvInput;
+	private isDropdownOpen;
 	/**
-	 * Unique ID for the CVV input container
+	 * Index of the currently focused network in the dropdown
 	 */
-	private readonly cvvContainerId;
-	private _setupCVVIframe;
-	constructor();
-	disconnectedCallback(): void;
+	private focusedNetworkIndex;
 	/**
-	 * Update CVV metadata in the context when input changes
+	 * Tracks if keyboard navigation is being used
 	 */
-	onCvvInputChange(): void;
-	onBlur(): void;
+	private isKeyboardNavigation;
 	/**
-	 * Main render method
+	 * Reference to the dropdown button
 	 */
-	protected render(): symbol | TemplateResult<1> | undefined;
+	private buttonRef;
+	/**
+	 * Reference to the dropdown container
+	 */
+	private dropdownRef;
+	/**
+	 * Reference to network option elements
+	 */
+	private networkOptionRefs;
+	/**
+	 * Toggle the dropdown state
+	 */
+	private toggleDropdown;
+	private getNetworkIconUrl;
+	/**
+	 * Get selectable networks from context
+	 */
+	private getSelectableNetworks;
+	/**
+	 * Get detected network from context
+	 */
+	private getDetectedNetwork;
+	/**
+	 * Get the index of the currently selected network
+	 */
+	private getSelectedNetworkIndex;
+	/**
+	 * Handle network selection
+	 */
+	private selectNetwork;
+	/**
+	 * Handle click outside to close dropdown
+	 */
+	private handleClickOutside;
+	/**
+	 * Handle mouse movement to disable keyboard navigation mode
+	 */
+	private handleMouseMove;
+	/**
+	 * Handle keydown events for keyboard navigation
+	 */
+	private handleKeyDown;
+	/**
+	 * Focus the current network option
+	 */
+	private focusNetworkOption;
+	/**
+	 * Save reference to network option element
+	 */
+	private setNetworkOptionRef;
+	/**
+	 * Attach event listener to the component for keydown events
+	 * and to document for click outside and mousemove
+	 */
+	connectedCallback(): void;
+	/**
+	 * Handle document-level keydown events, but only when dropdown is open
+	 * This allows keyboard navigation to continue working
+	 */
+	private handleDocumentKeyDown;
+	/**
+	 * Lifecycle: Remove all event listeners when disconnected
+	 */
+	disconnectedCallback(): void;
+	render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-cvv-input": VaultCvvInputComponent;
+		"primer-card-network-selector": CardNetworkSelectorComponent;
 	}
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-vault-manager": VaultManagerComponent;
+		"primer-card-form": CardFormComponent;
 	}
 }
 /**
@@ -4446,6 +4474,35 @@ declare global {
 		"primer-show-other-payments": ShowOtherPaymentsComponent;
 	}
 }
+/**
+ * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
+ * with proper height calculations based on design system variables.
+ */
+declare class NativePaymentComponent extends LitElement {
+	static styles: CSSResult[];
+	paymentMethod: InitializedPaymentMethod | undefined;
+	paymentManagers: InitializedManagersMap;
+	computedStyles: CSSStyleDeclaration | null;
+	private _buttonId;
+	private loadManagerTask;
+	constructor();
+	/**
+	 * Calculates the button height based on CSS variables
+	 * Mirrors the calculation used in the host styles
+	 */
+	private calculateButtonHeight;
+	/**
+	 * Creates render options with appropriate styles based on payment method type
+	 */
+	private createRenderOptions;
+	protected updated(changedProperties: PropertyValues): void;
+	render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-native-payment": NativePaymentComponent;
+	}
+}
 declare class PrimerCheckoutCompleteComponent extends LitElement {
 	render(): TemplateResult<1>;
 }
@@ -4493,6 +4550,23 @@ declare global {
 		"primer-error-message-container": ErrorMessageContainerComponent;
 	}
 }
+declare class PrimerMainComponent extends LitElement {
+	static styles: CSSResult[];
+	private hasAssignedContent;
+	/**
+	 * Inline slotchange event listener.
+	 * Uses assignedNodes with flatten to detect if the slot has any nodes.
+	 */
+	private onSlotChange;
+	paymentMethods: PaymentMethodsContext;
+	sdkState: SdkStateContext;
+	render(): TemplateResult<1>;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-main": PrimerMainComponent;
+	}
+}
 /**
  * Main function to load the Primer SDK with all required dependencies and styles
  * @returns {Promise<void>} A promise that resolves when loading is complete