@primer-io/primer-js 0.1.8 → 0.2.0

package/dist/primer-loader.d.ts

@@ -198,6 +198,24 @@ export interface PropertyDeclaration<Type = unknown, TypeHint = unknown> {
 	 * the property changes.
 	 */
 	readonly noAccessor?: boolean;
+	/**
+	 * When `true`, uses the initial value of the property as the default value,
+	 * which changes how attributes are handled:
+	 *  - The initial value does *not* reflect, even if the `reflect` option is `true`.
+	 *    Subsequent changes to the property will reflect, even if they are equal to the
+	 *     default value.
+	 *  - When the attribute is removed, the property is set to the default value
+	 *  - The initial value will not trigger an old value in the `changedProperties` map
+	 *    argument to update lifecycle methods.
+	 *
+	 * When set, properties must be initialized, either with a field initializer, or an
+	 * assignment in the constructor. Not initializing the property may lead to
+	 * improper handling of subsequent property assignments.
+	 *
+	 * While this behavior is opt-in, most properties that reflect to attributes should
+	 * use `useDefault: true` so that their initial values do not reflect.
+	 */
+	useDefault?: boolean;
 }
 /**
  * Map of properties to PropertyDeclaration options. For each property an
@@ -556,6 +574,11 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
 	 * @category updates
 	 */
 	hasUpdated: boolean;
+	/**
+	 * Records property default values when the
+	 * `useDefault` option is used.
+	 */
+	private __defaultValues?;
 	/**
 	 * Properties that should be reflected when updated.
 	 */
@@ -593,13 +616,7 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
 	 * Fixes any properties set on the instance before upgrade time.
 	 * Otherwise these would shadow the accessor and break these properties.
 	 * The properties are stored in a Map which is played back after the
-	 * constructor runs. Note, on very old versions of Safari (<=9) or Chrome
-	 * (<=41), properties created for native platform properties like (`id` or
-	 * `name`) may not have default values set in the element constructor. On
-	 * these browsers native properties appear on instances and therefore their
-	 * default value will overwrite any element default (e.g. if the element sets
-	 * this.id = 'id' in the constructor, the 'id' will become '' since this is
-	 * the native platform default).
+	 * constructor runs.
 	 */
 	private __saveInstanceProperties;
 	/**
@@ -640,7 +657,7 @@ declare abstract class ReactiveElement extends HTMLElement implements ReactiveCo
 	 * overridden, `super.attributeChangedCallback(name, _old, value)` must be
 	 * called.
 	 *
-	 * See [using the lifecycle callbacks](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks)
+	 * See [responding to attribute changes](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes)
 	 * on MDN for more information about the `attributeChangedCallback`.
 	 * @category attributes
 	 */
@@ -2252,59 +2269,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,16 +2406,69 @@ 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;
 }
-export interface OnCheckoutCompletePayload {
+export interface PaymentData {
+	paymentMethodType: string;
+}
+export interface PrepareHandler {
+	continuePaymentCreation: () => void;
+	abortPaymentCreation: () => void;
+}
+export interface PaymentCompleteData {
 	payment: Payment | null;
+	status: "success" | "pending" | "error";
+	error?: PrimerClientError;
 }
-export interface OnCheckoutFailurePayload {
-	error: PrimerClientError;
-	payment?: Payment;
+/**
+ * PrimerJS is a wrapper class that provides a stable API for interfacing with the Primer SDK
+ * while hiding direct access to the legacy headless instance.
+ */
+export declare class PrimerJS {
+	private headlessInstance;
+	private paymentMethods;
+	onPaymentStart?: () => void;
+	onPaymentPrepare?: (data: PaymentData, handler: PrepareHandler) => void;
+	onPaymentComplete?: (data: PaymentCompleteData) => void;
+	constructor(headlessInstance: PrimerHeadlessCheckout);
+	/**
+	 * Set the initialized payment methods
+	 * @internal - This is only used internally by the SDK
+	 */
+	setPaymentMethods(methods: InitializedPayments): void;
+	/**
+	 * Refetches a new client session from merchant backend.
+	 */
+	refreshSession(): Promise<void>;
+	/**
+	 * Returns the cached list of payment methods.
+	 */
+	getPaymentMethods(): PaymentMethodInfo[];
+	/**
+	 * Internal method to handle the onPaymentStart callback
+	 * @internal - This is only used internally by the SDK
+	 */
+	handlePaymentStart(): void;
+	/**
+	 * Internal method to handle the onBeforePaymentCreate callback and transform it to onPaymentPrepare
+	 * @internal - This is only used internally by the SDK
+	 */
+	handleBeforePaymentCreate(data: PaymentData, originalHandler: {
+		continuePaymentCreation: () => void;
+		abortPaymentCreation: () => void;
+	}): void;
+	/**
+	 * Internal method to handle payment completion (success)
+	 * @internal - This is only used internally by the SDK
+	 */
+	handlePaymentComplete(payment: Payment | null): void;
+	/**
+	 * Internal method to handle payment failure
+	 * @internal - This is only used internally by the SDK
+	 */
+	handlePaymentFailure(error: PrimerClientError, payment?: Payment): void;
 }
 export interface CardSubmitSuccessPayload {
 	result: unknown;
@@ -2336,14 +2480,12 @@ export interface PrimeAchErrorPayload {
 	error: Error;
 }
 export interface PrimerEvents {
-	"primer-state-changed": CustomEvent<SdkStateContext>;
-	"primer-oncheckout-complete": CustomEvent<OnCheckoutCompletePayload>;
-	"primer-oncheckout-failure": CustomEvent<OnCheckoutFailurePayload>;
-	"primer-payment-methods-updated": CustomEvent<InitializedPayments>;
-	"primer-checkout-initialized": CustomEvent<PrimerHeadlessCheckout>;
-	"primer-card-network-change": CustomEvent<CardNetworksContext>;
-	"primer-card-submit-success": CustomEvent<CardSubmitSuccessPayload>;
-	"primer-card-submit-errors": CustomEvent<CardSubmitErrorsPayload>;
+	"primer:state-change": CustomEvent<SdkStateContext>;
+	"primer:methods-update": CustomEvent<InitializedPayments>;
+	"primer:ready": CustomEvent<PrimerJS>;
+	"primer:card-network-change": CustomEvent<CardNetworksContext>;
+	"primer:card-success": CustomEvent<CardSubmitSuccessPayload>;
+	"primer:card-error": CustomEvent<CardSubmitErrorsPayload>;
 	"primer-ach-error": CustomEvent<PrimeAchErrorPayload>;
 	"primer-ach-bank-details-collected": CustomEvent;
 	"primer-ach-mandate-confirmed": CustomEvent;
@@ -2363,10 +2505,8 @@ declare class PrimerEventsController implements ReactiveController {
 	dispatchEvent<K extends keyof PrimerEvents>(type: K, detail: PrimerEvents[K]["detail"]): void;
 	dispatchSdkState(sdkState: SdkStateContext): void;
 	dispatchPaymentMethods(paymentMethods: InitializedPayments): void;
-	dispatchCheckoutInitialized(checkoutInstance: PrimerHeadlessCheckout): void;
+	dispatchCheckoutInitialized(checkoutInstance: PrimerJS): void;
 	dispatchCardNetworkChange(network: CardNetworksContext): void;
-	dispatchOnCheckoutComplete(payment: Payment | null): void;
-	dispatchOnCheckoutFailure(error: PrimerClientError, payment?: Payment): void;
 	dispatchFormSubmitSuccess(result: unknown): void;
 	dispatchFormSubmitErrors(errors: unknown): void;
 }
@@ -2659,6 +2799,146 @@ declare class StyleProcessingController implements ReactiveController {
 	 */
 	hostDisconnected(): void;
 }
+interface ReactiveControllerHost$1 {
+	/**
+	 * Adds a controller to the host, which sets up the controller's lifecycle
+	 * methods to be called with the host's lifecycle.
+	 */
+	addController(controller: ReactiveController$1): void;
+	/**
+	 * Removes a controller from the host.
+	 */
+	removeController(controller: ReactiveController$1): void;
+	/**
+	 * Requests a host update which is processed asynchronously. The update can
+	 * be waited on via the `updateComplete` property.
+	 */
+	requestUpdate(): void;
+	/**
+	 * Returns a Promise that resolves when the host has completed updating.
+	 * The Promise value is a boolean that is `true` if the element completed the
+	 * update without triggering another update. The Promise result is `false` if
+	 * a property was set inside `updated()`. If the Promise is rejected, an
+	 * exception was thrown during the update.
+	 *
+	 * @return A promise of a boolean that indicates if the update resolved
+	 *     without triggering another update.
+	 */
+	readonly updateComplete: Promise<boolean>;
+}
+interface ReactiveController$1 {
+	/**
+	 * Called when the host is connected to the component tree. For custom
+	 * element hosts, this corresponds to the `connectedCallback()` lifecycle,
+	 * which is only called when the component is connected to the document.
+	 */
+	hostConnected?(): void;
+	/**
+	 * Called when the host is disconnected from the component tree. For custom
+	 * element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
+	 * which is called the host or an ancestor component is disconnected from the
+	 * document.
+	 */
+	hostDisconnected?(): void;
+	/**
+	 * Called during the client-side host update, just before the host calls
+	 * its own update.
+	 *
+	 * Code in `update()` can depend on the DOM as it is not called in
+	 * server-side rendering.
+	 */
+	hostUpdate?(): void;
+	/**
+	 * Called after a host update, just before the host calls firstUpdated and
+	 * updated. It is not called in server-side rendering.
+	 *
+	 */
+	hostUpdated?(): void;
+}
+interface ComplexAttributeConverter$1<Type = unknown, TypeHint = unknown> {
+	/**
+	 * Called to convert an attribute value to a property
+	 * value.
+	 */
+	fromAttribute?(value: string | null, type?: TypeHint): Type;
+	/**
+	 * Called to convert a property value to an attribute
+	 * value.
+	 *
+	 * It returns unknown instead of string, to be compatible with
+	 * https://github.com/WICG/trusted-types (and similar efforts).
+	 */
+	toAttribute?(value: Type, type?: TypeHint): unknown;
+}
+type AttributeConverter$1<Type = unknown, TypeHint = unknown> = ComplexAttributeConverter$1<Type> | ((value: string | null, type?: TypeHint) => Type);
+interface PropertyDeclaration$1<Type = unknown, TypeHint = unknown> {
+	/**
+	 * When set to `true`, indicates the property is internal private state. The
+	 * property should not be set by users. When using TypeScript, this property
+	 * should be marked as `private` or `protected`, and it is also a common
+	 * practice to use a leading `_` in the name. The property is not added to
+	 * `observedAttributes`.
+	 */
+	readonly state?: boolean;
+	/**
+	 * Indicates how and whether the property becomes an observed attribute.
+	 * If the value is `false`, the property is not added to `observedAttributes`.
+	 * If true or absent, the lowercased property name is observed (e.g. `fooBar`
+	 * becomes `foobar`). If a string, the string value is observed (e.g
+	 * `attribute: 'foo-bar'`).
+	 */
+	readonly attribute?: boolean | string;
+	/**
+	 * Indicates the type of the property. This is used only as a hint for the
+	 * `converter` to determine how to convert the attribute
+	 * to/from a property.
+	 */
+	readonly type?: TypeHint;
+	/**
+	 * Indicates how to convert the attribute to/from a property. If this value
+	 * is a function, it is used to convert the attribute value a the property
+	 * value. If it's an object, it can have keys for `fromAttribute` and
+	 * `toAttribute`. If no `toAttribute` function is provided and
+	 * `reflect` is set to `true`, the property value is set directly to the
+	 * attribute. A default `converter` is used if none is provided; it supports
+	 * `Boolean`, `String`, `Number`, `Object`, and `Array`. Note,
+	 * when a property changes and the converter is used to update the attribute,
+	 * the property is never updated again as a result of the attribute changing,
+	 * and vice versa.
+	 */
+	readonly converter?: AttributeConverter$1<Type, TypeHint>;
+	/**
+	 * Indicates if the property should reflect to an attribute.
+	 * If `true`, when the property is set, the attribute is set using the
+	 * attribute name determined according to the rules for the `attribute`
+	 * property option and the value of the property converted using the rules
+	 * from the `converter` property option.
+	 */
+	readonly reflect?: boolean;
+	/**
+	 * A function that indicates if a property should be considered changed when
+	 * it is set. The function should take the `newValue` and `oldValue` and
+	 * return `true` if an update should be requested.
+	 */
+	hasChanged?(value: Type, oldValue: Type): boolean;
+	/**
+	 * Indicates whether an accessor will be created for this property. By
+	 * default, an accessor will be generated for this property that requests an
+	 * update when set. If this flag is `true`, no accessor will be created, and
+	 * it will be the user's responsibility to call
+	 * `this.requestUpdate(propertyName, oldValue)` to request an update when
+	 * the property changes.
+	 */
+	readonly noAccessor?: boolean;
+}
+declare global {
+	interface SymbolConstructor {
+		readonly metadata: unique symbol;
+	}
+}
+declare global {
+	var litPropertyMetadata: WeakMap<object, Map<PropertyKey, PropertyDeclaration$1>>;
+}
 declare const sourceLocale = `en`;
 declare const targetLocales = [
 	`ar`,
@@ -3290,7 +3570,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 +3683,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>;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-main": PrimerMainComponent;
-	}
-}
 /**
- * Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)
- * with proper height calculations based on design system variables.
+ * Events emitted by the vault manager components
  */
-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;
-	}
+export interface VaultManagerEvents {
+	deletePaymentMethod: CustomEvent<string>;
+	cancelDelete: CustomEvent<void>;
+	confirmDelete: CustomEvent<void>;
+	toggleEditMode: CustomEvent<boolean>;
+	closeError: CustomEvent<void>;
+	vaultPaymentError: CustomEvent<{
+		error: Error | unknown;
+	}>;
 }
 /**
- * CardFormComponent serves as a container for card input components.
- * It handles form submission, validation, and provides context to child components.
+ * Declare the event map for strict typing of events
  */
-declare class CardFormComponent extends LitElement {
-	static styles: CSSResult[];
-	hideLabels: boolean;
-	updated(changedProperties: Map<string, unknown>): void;
-	/**
-	 * Tracks whether custom content has been provided via slot
-	 */
-	private hasAssignedContent;
-	private selectedCardNetwork;
-	/**
-	 * Payment managers injected from context
-	 */
-	paymentManagers: InitializedManagersMap;
-	/**
-	 * Context provider for card form data
-	 */
-	private readonly cardFormProvider;
-	/**
-	 * Events controller for dispatching form events
-	 */
-	private readonly eventsController;
-	/**
-	 * Task to set up the card form with hosted inputs
-	 */
-	private readonly setupCardFormTask;
-	connectedCallback(): void;
-	disconnectedCallback(): void;
-	/**
-	 * Handles click events from slotted content.
-	 * Supports both native <button> and custom <primer-button> elements.
-	 */
-	private handleSlotButtonClick;
-	/**
-	 * Handles direct submit events from child components
-	 * This is a backup method to catch all possible submission events
-	 */
-	private handleDirectSubmit;
-	/**
-	 * Determines if a button is a submit button based on its attributes
-	 */
-	private isSubmitButton;
-	/**
-	 * Handles slot change events to detect custom content
-	 */
-	private onSlotChange;
-	/**
-	 * Handles the card form submission.
-	 * Validates the form and dispatches either a submit success or errors event.
-	 */
-	private submitCardPayment;
-	/**
-	 * Event handler for form submission
-	 * Handles both native form submissions and custom events
-	 */
-	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;
+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"];
 }
 /**
- * A shared type that ensures the host of a HostedInputController contains
- * the required properties for proper hosted input handling.
+ * VaultManagerComponent - displays and manages saved payment methods
  */
-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 VaultManagerComponent 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;
 	/**
-	 * 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.
+	 * Whether we're in edit mode
 	 */
-	argsEqual?: (oldArgs: T, newArgs: T) => boolean;
+	private isEditMode;
 	/**
-	 * 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.
+	 * Payment method being deleted
 	 */
-	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;
+	private deletePaymentMethodId;
 	/**
-	 * Determines if the task is run automatically when arguments change after a
-	 * host update. Default to `true`.
-	 *
-	 * @see {@link TaskConfig.autoRun} for more information.
+	 * Whether a delete operation is in progress
 	 */
-	autoRun: boolean | "afterUpdate";
+	private isDeleting;
 	/**
-	 * 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.
+	 * Error message if something goes wrong
 	 */
-	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;
+	private errorMessage;
 	/**
-	 * 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.
+	 * Animation duration override
 	 */
-	private _performTask;
+	animationDuration: number;
 	/**
-	 * 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.
+	 * Get base animation configuration with current settings
 	 */
-	run(args?: T): Promise<void>;
+	private getAnimationConfig;
 	/**
-	 * 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()`.
+	 * Toggle edit mode handler
 	 */
-	abort(reason?: unknown): void;
+	private handleToggleEditMode;
 	/**
-	 * 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.
+	 * Handle delete click from payment method item
 	 */
-	get value(): R | undefined;
+	private handleDeletePaymentMethod;
 	/**
-	 * 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.
+	 * Cancel delete operation
 	 */
-	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;
-/**
- * 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;
+	private handleCancelDelete;
 	/**
-	 * Optional callback for handling input events (e.g. for CardFormName).
+	 * Confirm and process payment method deletion
 	 */
-	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;
+	private handleConfirmDelete;
 	/**
-	 * Task to set up the hosted input.
+	 * Handle payment error events
 	 */
-	readonly setupTask: Task<[
-		InputSource
-	], boolean | typeof initialState>;
-	constructor(host: T, config: HostedInputConfig);
+	private handlePaymentError;
 	/**
-	 * Focuses the input, whether it's a hosted input or standard input
+	 * Handle closing error message
 	 */
-	focusInput(): void;
+	private handleCloseError;
 	/**
-	 * 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.
+	 * Get payment method display name for the given ID
 	 */
-	private getHostedInput;
+	private getPaymentMethodName;
 	/**
-	 * 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.
+	 * Render loading overlay with spinner when isUpdating is true
 	 */
-	private setupHostedInput;
+	private renderLoadingOverlay;
 	/**
-	 * Gets the target container element from the host's render root
+	 * Render delete confirmation content
 	 */
-	private getTargetContainer;
+	private renderDeleteConfirmation;
 	/**
-	 * Sets up a standard input element for non-hosted input types
+	 * Render a payment method item with appropriate animations
 	 */
-	private setupStandardInput;
+	private renderPaymentMethodItem;
 	/**
-	 * Sets up event listeners for standard input elements
+	 * Render the payment method list with submit button
 	 */
-	private setupInputEventListeners;
+	private renderPaymentMethodList;
 	/**
-	 * Sets up a hosted iframe input for iframe-based input types
+	 * Main render method
 	 */
-	private setupHostedIframeInput;
-	/** Exposes the current focus state. */
-	get isFocused(): boolean;
-	/** Exposes the current metadata state. */
-	get meta(): InputMetadata;
-	hostConnected(): void;
-	hostDisconnected(): void;
+	render(): typeof nothing | TemplateResult<1>;
 }
 /**
- * Translation configuration object
- */
-export type TranslationConfig = {
-	id: string;
-	defaultMessage: string;
-};
-/**
- * Configuration for abstract input component
+ * 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 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>;
+declare class VaultPaymentMethodItemComponent extends LitElement {
+	static styles: CSSResult[];
 	/**
-	 * Gets a translated or static string value from the translation config
+	 * Strongly typed event declarations
 	 */
-	private getTranslatedValue;
+	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 input label text.
-	 * Falls back to localized default if not explicitly set.
+	 * Consume the vault manager context
 	 */
-	get label(): string;
-	set label(value: string);
+	vaultManagerContext: VaultManagerContext;
+	vaultItemContext: VaultItemContext;
+	headlessUtils: HeadlessUnitilsContext;
 	/**
-	 * The input placeholder text.
-	 * Falls back to localized default if not explicitly set.
-	 * When explicitly set to empty string, no placeholder will be displayed.
+	 * The payment method to display
 	 */
-	get placeholder(): string;
-	set placeholder(value: string);
+	paymentMethod: VaultedPaymentMethod | null;
+	/**
+	 * Whether the component is in edit mode
+	 */
+	isEditMode: boolean;
+	private _getAssetsTask;
 	/**
-	 * The input aria-label attribute.
-	 * Falls back to localized default if not explicitly set.
+	 * Check if this payment method is currently selected in the context
 	 */
-	get ariaLabel(): string;
-	set ariaLabel(value: string);
-	constructor();
+	private isSelected;
 	/**
-	 * Initialize the controller after the component has been constructed
-	 * and the config is available
+	 * Handle when the button is clicked
+	 * This is used to select the payment method and deselect others
 	 */
-	protected childUpdated(): void;
+	private handleClick;
 	/**
-	 * Handler for wrapper-click event from InputWrapper component
-	 * This is still needed for hosted iframe inputs
+	 * Dispatch delete event
 	 */
-	private handleWrapperClick;
+	private handleDeleteClick;
 	/**
-	 * 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}
+	 * Builds the common content template shared between modes
 	 */
-	getError(): string | null;
+	private renderPaymentMethodContent;
 	/**
-	 * Common rendering logic for all card input components
+	 * Render method
 	 */
-	protected renderInput(): typeof nothing | TemplateResult<1>;
+	render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-payment-method-item": VaultPaymentMethodItemComponent;
+	}
 }
 /**
- * Card number input component with dynamic card network detection and selection
+ * VaultManagerHeaderComponent - displays the header for the vault manager
  */
-declare class InputCardNumberComponent extends AbstractCardInputComponent {
+declare class VaultManagerHeaderComponent extends LitElement {
 	static styles: CSSResult[];
 	/**
-	 * Configuration for this input component
+	 * Strongly typed event declarations
 	 */
-	protected readonly config: InputComponentConfig;
-	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;
 	/**
-	 * Handle network selection from the network selector component
+	 * Whether we're in edit mode
 	 */
-	private handleNetworkSelected;
+	isEditMode: boolean;
 	/**
-	 * Override the renderInput method to include the network selector
+	 * Whether we have payment methods to edit
 	 */
-	protected renderInput(): typeof nothing | TemplateResult<1>;
-	render(): typeof nothing | TemplateResult<1>;
+	hasPaymentMethods: boolean;
+	/**
+	 * Toggle edit mode
+	 */
+	private toggleEditMode;
+	/**
+	 * Render method
+	 */
+	protected render(): TemplateResult<1>;
 }
 declare global {
 	interface HTMLElementTagNameMap {
-		"primer-input-card-number": InputCardNumberComponent;
+		"primer-vault-manager-header": VaultManagerHeaderComponent;
 	}
 }
-declare class InputCvvComponent extends AbstractCardInputComponent {
+/**
+ * VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method
+ */
+declare class VaultDeleteConfirmationComponent extends LitElement {
 	static styles: CSSResult[];
-	protected readonly config: InputComponentConfig;
-	constructor();
-	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;
+	/**
+	 * Whether a delete operation is in progress
+	 */
+	isDeleting: boolean;
+	/**
+	 * The ID of the payment method being deleted
+	 */
+	paymentMethodId: string;
+	/**
+	 * Payment method name to display in confirmation
+	 */
+	paymentMethodName: string;
+	/**
+	 * Consume the vault manager context to access payment method info
+	 */
+	vaultManager: VaultManagerContext;
+	/**
+	 * Handle confirm click
+	 */
+	private handleConfirmClick;
+	/**
+	 * Handle cancel click
+	 */
+	private handleCancelClick;
+	/**
+	 * Render method
+	 */
+	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 +3980,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 +3991,599 @@ 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;
+	/**
+	 * 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-card-form-submit": CardFormSubmitComponent;
+		"primer-vault-payment-submit": VaultPaymentSubmitComponent;
 	}
 }
 /**
- * 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
+ * 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 CardNetworkSelectorComponent extends LitElement {
+declare class VaultCvvInputComponent 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
+	 * Form context for checking form dirty state
 	 */
-	private buttonRef;
+	vaultManagerFormContext: VaultManagerContext;
 	/**
-	 * Reference to the dropdown container
+	 * CVV-specific context for dedicated CVV handling
+	 * Separated to minimize re-renders on frequent CVV input changes
 	 */
-	private dropdownRef;
+	vaultManagerCvvContext: VaultItemContext;
+	computedStyles: CSSStyleDeclaration | null;
+	paymentMethod: PaymentCardVaultedMethod | null;
+	private cvvError;
+	private cvvInputIsDirty;
+	private cvvInputIsBlurred;
+	private cvvInput;
 	/**
-	 * Reference to network option elements
+	 * Unique ID for the CVV input container
 	 */
-	private networkOptionRefs;
+	private readonly cvvContainerId;
+	private _setupCVVIframe;
+	constructor();
+	disconnectedCallback(): void;
 	/**
-	 * Toggle the dropdown state
+	 * Update CVV metadata in the context when input changes
 	 */
-	private toggleDropdown;
-	private getNetworkIconUrl;
+	onCvvInputChange(): void;
+	onBlur(): void;
 	/**
-	 * Get selectable networks from context
+	 * Main render method
 	 */
-	private getSelectableNetworks;
+	protected render(): symbol | TemplateResult<1> | undefined;
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-cvv-input": VaultCvvInputComponent;
+	}
+}
+declare global {
+	interface HTMLElementTagNameMap {
+		"primer-vault-manager": VaultManagerComponent;
+	}
+}
+/**
+ * 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;
 	/**
-	 * Get detected network from context
+	 * Tracks whether custom content has been provided via slot
 	 */
-	private getDetectedNetwork;
+	private hasAssignedContent;
+	private selectedCardNetwork;
 	/**
-	 * Get the index of the currently selected network
+	 * Payment managers injected from context
 	 */
-	private getSelectedNetworkIndex;
+	paymentManagers: InitializedManagersMap;
 	/**
-	 * Handle network selection
+	 * Context provider for card form data
 	 */
-	private selectNetwork;
+	private readonly cardFormProvider;
 	/**
-	 * Handle click outside to close dropdown
+	 * Events controller for dispatching form events
 	 */
-	private handleClickOutside;
+	private readonly eventsController;
 	/**
-	 * Handle mouse movement to disable keyboard navigation mode
+	 * Task to set up the card form with hosted inputs
 	 */
-	private handleMouseMove;
+	private readonly setupCardFormTask;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
 	/**
-	 * Handle keydown events for keyboard navigation
+	 * Handles click events from slotted content.
+	 * Supports both native <button> and custom <primer-button> elements.
 	 */
-	private handleKeyDown;
+	private handleSlotButtonClick;
 	/**
-	 * Focus the current network option
+	 * Handles direct submit events from child components
+	 * This is a backup method to catch all possible submission events
 	 */
-	private focusNetworkOption;
+	private handleDirectSubmit;
 	/**
-	 * Save reference to network option element
+	 * Determines if a button is a submit button based on its attributes
 	 */
-	private setNetworkOptionRef;
+	private isSubmitButton;
 	/**
-	 * Attach event listener to the component for keydown events
-	 * and to document for click outside and mousemove
+	 * Handles slot change events to detect custom content
 	 */
-	connectedCallback(): void;
+	private onSlotChange;
 	/**
-	 * Handle document-level keydown events, but only when dropdown is open
-	 * This allows keyboard navigation to continue working
+	 * Handles the card form submission.
+	 * Validates the form and dispatches either a submit success or errors event.
 	 */
-	private handleDocumentKeyDown;
+	private submitCardPayment;
 	/**
-	 * Lifecycle: Remove all event listeners when disconnected
+	 * Event handler for form submission
+	 * Handles both native form submissions and custom events
 	 */
-	disconnectedCallback(): void;
-	render(): TemplateResult<1>;
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-card-network-selector": CardNetworkSelectorComponent;
-	}
-}
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-card-form": CardFormComponent;
-	}
+	private handleFormSubmit;
+	render(): typeof nothing | 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;
-	}>;
+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;
 }
 /**
- * Declare the event map for strict typing of events
+ * A shared type that ensures the host of a HostedInputController contains
+ * the required properties for proper hosted input handling.
  */
-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"];
+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"];
 }
-/**
- * VaultManagerComponent - displays and manages saved payment methods
- */
-declare class VaultManagerComponent 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;
+interface ReactiveControllerHost$1 {
 	/**
-	 * Whether we're in edit mode
+	 * Adds a controller to the host, which sets up the controller's lifecycle
+	 * methods to be called with the host's lifecycle.
 	 */
-	private isEditMode;
+	addController(controller: ReactiveController$1): void;
 	/**
-	 * Payment method being deleted
+	 * Removes a controller from the host.
 	 */
-	private deletePaymentMethodId;
+	removeController(controller: ReactiveController$1): void;
 	/**
-	 * Whether a delete operation is in progress
+	 * Requests a host update which is processed asynchronously. The update can
+	 * be waited on via the `updateComplete` property.
 	 */
-	private isDeleting;
+	requestUpdate(): void;
 	/**
-	 * Error message if something goes wrong
+	 * Returns a Promise that resolves when the host has completed updating.
+	 * The Promise value is a boolean that is `true` if the element completed the
+	 * update without triggering another update. The Promise result is `false` if
+	 * a property was set inside `updated()`. If the Promise is rejected, an
+	 * exception was thrown during the update.
+	 *
+	 * @return A promise of a boolean that indicates if the update resolved
+	 *     without triggering another update.
 	 */
-	private errorMessage;
+	readonly updateComplete: Promise<boolean>;
+}
+interface ReactiveController$1 {
 	/**
-	 * Animation duration override
+	 * Called when the host is connected to the component tree. For custom
+	 * element hosts, this corresponds to the `connectedCallback()` lifecycle,
+	 * which is only called when the component is connected to the document.
 	 */
-	animationDuration: number;
+	hostConnected?(): void;
 	/**
-	 * Get base animation configuration with current settings
+	 * Called when the host is disconnected from the component tree. For custom
+	 * element hosts, this corresponds to the `disconnectedCallback()` lifecycle,
+	 * which is called the host or an ancestor component is disconnected from the
+	 * document.
 	 */
-	private getAnimationConfig;
+	hostDisconnected?(): void;
 	/**
-	 * Toggle edit mode handler
+	 * Called during the client-side host update, just before the host calls
+	 * its own update.
+	 *
+	 * Code in `update()` can depend on the DOM as it is not called in
+	 * server-side rendering.
 	 */
-	private handleToggleEditMode;
+	hostUpdate?(): void;
 	/**
-	 * Handle delete click from payment method item
+	 * Called after a host update, just before the host calls firstUpdated and
+	 * updated. It is not called in server-side rendering.
+	 *
 	 */
-	private handleDeletePaymentMethod;
+	hostUpdated?(): void;
+}
+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>;
 	/**
-	 * Cancel delete operation
+	 * 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 handleCancelDelete;
+	autoRun?: boolean | "afterUpdate";
 	/**
-	 * Confirm and process payment method deletion
+	 * 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 handleConfirmDelete;
+	argsEqual?: (oldArgs: T, newArgs: T) => boolean;
 	/**
-	 * Handle payment error events
+	 * 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.
 	 */
-	private handlePaymentError;
+	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;
 	/**
-	 * Handle closing error message
+	 * Determines if the task is run automatically when arguments change after a
+	 * host update. Default to `true`.
+	 *
+	 * @see {@link TaskConfig.autoRun} for more information.
 	 */
-	private handleCloseError;
+	autoRun: boolean | "afterUpdate";
 	/**
-	 * Get payment method display name for the given ID
+	 * 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.
 	 */
-	private getPaymentMethodName;
+	get taskComplete(): Promise<R>;
+	private _resolveTaskComplete?;
+	private _rejectTaskComplete?;
+	private _taskComplete?;
+	constructor(host: ReactiveControllerHost$1, task: TaskConfig<T, R>);
+	constructor(host: ReactiveControllerHost$1, 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 +4594,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 +4603,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 +4736,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,16 +4812,28 @@ 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
  */
 export declare function loadPrimer(): Promise<void>;
-declare global {
-	interface HTMLElementTagNameMap {
-		"primer-checkout": PrimerCheckoutComponent;
-	}
-}
 
 export {
 	AchPaymentComponent as AchPayment,