@primer-io/primer-js 0.14.0 → 0.14.1

package/dist/custom-elements.json

@@ -10908,21 +10908,42 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/blik/blik.component.ts",
+      "path": "src/containers/card-form/card-form-context.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "cardFormContext"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cardFormContext",
+          "declaration": {
+            "name": "cardFormContext",
+            "module": "src/containers/card-form/card-form-context.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/containers/card-form/card-form.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "BLIK Payment Component\n\nConsolidated component handling BLIK payment flow from button click through\npayment completion. Uses a 4-state machine for managing the user experience.",
-          "name": "BlikComponent",
+          "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.",
+          "name": "CardFormComponent",
           "members": [
             {
               "kind": "field",
-              "name": "paymentMethod",
+              "name": "hideLabels",
               "type": {
-                "text": "InitializedPaymentMethod"
+                "text": "boolean"
               },
-              "description": "Payment method configuration",
-              "attribute": "paymentMethod"
+              "default": "false",
+              "attribute": "hide-labels",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -10931,200 +10952,296 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables component interaction when true",
               "attribute": "disabled"
             },
             {
               "kind": "field",
-              "name": "paymentManagers",
+              "name": "hasAssignedContent",
               "type": {
-                "text": "InitializedManagersMap"
+                "text": "boolean"
               },
-              "default": "new Map()"
+              "privacy": "private",
+              "default": "false",
+              "description": "Tracks whether custom content has been provided via slot"
             },
             {
               "kind": "field",
-              "name": "currentState",
+              "name": "selectedCardNetwork",
               "type": {
-                "text": "BlikState"
+                "text": "string | null"
               },
               "privacy": "private",
-              "default": "'collapsed'"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "blikCode",
+              "name": "formErrorMessage",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
               "privacy": "private",
-              "default": "''"
+              "default": "null",
+              "description": "Form-level error message to display"
             },
             {
               "kind": "field",
-              "name": "errorMessage",
+              "name": "paymentMethodSelectionSent",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "''"
+              "default": "false",
+              "description": "Flag to track if PAYMENT_METHOD_SELECTION event has been sent"
             },
             {
               "kind": "field",
-              "name": "pollingDuration",
+              "name": "paymentManagers",
               "type": {
-                "text": "number"
+                "text": "InitializedManagersMap"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "new Map()",
+              "description": "Payment managers injected from context",
+              "attribute": "paymentManagers"
             },
             {
               "kind": "field",
-              "name": "pollingTimer",
+              "name": "clientOptions",
               "type": {
-                "text": "number | null"
+                "text": "ClientOptionsContextType"
+              },
+              "default": "null",
+              "description": "Client options for configuration"
+            },
+            {
+              "kind": "field",
+              "name": "headlessUtils",
+              "type": {
+                "text": "HeadlessUtilsContextType"
+              },
+              "default": "null",
+              "description": "Headless utils for accessing server configuration"
+            },
+            {
+              "kind": "field",
+              "name": "analyticsUtils",
+              "type": {
+                "text": "AnalyticsContextType"
               },
+              "default": "null",
+              "description": "Analytics utils for sending analytics events"
+            },
+            {
+              "kind": "field",
+              "name": "contextEventsController",
+              "type": {
+                "text": "EventsContextType"
+              },
+              "default": "null",
+              "description": "Events controller from context for receiving forwarded events"
+            },
+            {
+              "kind": "field",
+              "name": "cardFormProvider",
               "privacy": "private",
-              "default": "null"
+              "readonly": true,
+              "default": "new ContextProvider(this, { context: cardFormContext, initialValue: null, })",
+              "description": "Context provider for card form data"
             },
             {
               "kind": "field",
-              "name": "loadManagerTask",
+              "name": "shouldShowCardholderName",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether to show the cardholder name field\nUses client configuration with fallback to default (true)",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "shouldRequireCardholderName",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the cardholder name field is required\nUses client configuration with fallback to default (false)",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "eventsController",
               "privacy": "private",
-              "default": "new Task(this, { args: () => [this.paymentMethod?.type], task: ([type]) => { if (!type) { return initialState; } const managerEntry = this.paymentManagers.get(type); if (!managerEntry) { throw new Error('BLIK payment method manager not initialized'); } // TypeScript narrows the union type based on the payment method type check if (managerEntry.type !== 'ADYEN_BLIK') { throw new Error('Invalid payment method type for BLIK component'); } return managerEntry.manager; }, })",
-              "description": "Manager loading task\nValidates BLIK manager exists before allowing payment flow\n\nThis Task provides reactive validation of manager availability:\n- Automatically re-runs when paymentMethod or paymentManagers change\n- Provides type-safe access to the BLIK manager\n- Enables early error detection before user interaction\n\nUnlike native payment methods (Apple Pay, Google Pay, PayPal) which use a\ntwo-task pattern (manager loading + button rendering), BLIK only needs the\nmanager loading task because it renders its own UI via Lit templates."
+              "readonly": true,
+              "default": "new PrimerEventsController(this)",
+              "description": "Events controller for dispatching form events"
             },
             {
               "kind": "field",
-              "name": "handleButtonClick",
+              "name": "_contextCardSubmitListener",
+              "type": {
+                "text": "((event: CustomEvent) => void) | null"
+              },
               "privacy": "private",
-              "description": "Handles button click to toggle between collapsed and expanded states"
+              "default": "null",
+              "description": "External event listener reference for cleanup"
             },
             {
               "kind": "field",
-              "name": "handleCollapse",
+              "name": "_isHandlingContextEvent",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "description": "Handles collapsing the form back to button-only view\nResets form state when user clicks button to collapse"
+              "default": "false",
+              "description": "Flag to prevent circular event loop when handling events"
             },
             {
               "kind": "field",
-              "name": "handleInput",
+              "name": "inputControllers",
               "privacy": "private",
-              "description": "Handles input changes, validates numeric input, and auto-submits on 6 digits"
+              "readonly": true,
+              "default": "new Map< HostedInputType, IHostedInputController >()",
+              "description": "Registry for input controllers to enable context-driven meta state management"
             },
             {
               "kind": "field",
-              "name": "handleRetry",
+              "name": "setupCardFormTask",
               "privacy": "private",
-              "description": "Handles retry button click"
+              "readonly": true,
+              "default": "new Task(this, { task: ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const hostedInputs = manager.createHostedInputs(); const { cardNumberInput, expiryInput, cvvInput } = hostedInputs; this.cardFormProvider.setValue({ // Temporarily set any so we can toggle between sdk v2 and new sdk core cardholderNameInput: ( hostedInputs as { cardholderNameInput?: IHeadlessHostedInput } ).cardholderNameInput, cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => { manager.setCardholderName(val); if (this.shouldRequireCardholderName) { manager.validate?.().then((validationResult) => { const errors = validationResult?.validationErrors; const cardholderNameError = errors?.find( (error) => error.name === fieldToInputType.cardholderName, ); const controller = this.inputControllers.get( HostedInputType.CARD_HOLDER_NAME, ); if (controller) { controller.updateMetaFromValidation({ valid: false, error: cardholderNameError?.message || cardholderNameError?.error || null, errorCode: cardholderNameError?.message || cardholderNameError?.error || null, }); } }); } }, setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), hideLabels: this.hideLabels, disabled: this.disabled, // New meta state management methods setSubmissionState: (submitted: boolean) => { this.inputControllers.forEach((controller) => { controller.setSubmitted(submitted); }); }, propagateValidationErrors: (errors: InputValidationError[]) => { if (!errors) return; errors.forEach((error) => { const fieldName = error.field || error.name; const errorMessage = error.message || error.error; const inputType = fieldToInputType[fieldName]; if (inputType) { const controller = this.inputControllers.get(inputType); if (controller) { const updateData = { valid: false, error: errorMessage, errorCode: errorMessage, // Use error message (localization key) instead of field name }; controller.updateMetaFromValidation(updateData); } } }); }, registerInputController: ( inputType: HostedInputType, controller: IHostedInputController, ) => { this.inputControllers.set(inputType, controller); }, unregisterInputController: (inputType: HostedInputType) => { this.inputControllers.delete(inputType); }, onUserInteraction: () => { this.sendPaymentMethodSelectionEvent(); this.checkAndSendPaymentDetailsEnteredEvent(); }, }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
+              "description": "Task to set up the card form with hosted inputs"
             },
             {
               "kind": "method",
-              "name": "startPollingTimer",
+              "name": "sendPaymentMethodSelectionEvent",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Starts polling timer to track payment duration"
+              "description": "Sends PAYMENT_METHOD_SELECTION analytics event when user first interacts with card form"
             },
             {
               "kind": "method",
-              "name": "stopPollingTimer",
+              "name": "checkAndSendPaymentDetailsEnteredEvent",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Stops and resets polling timer"
+              "description": "Checks if all required fields are filled and sends PAYMENT_DETAILS_ENTERED event"
             },
             {
-              "kind": "method",
-              "name": "submitBlikCode",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "paymentDetailsEnteredSent",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Validates and submits the BLIK code"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "renderCollapsed",
+              "name": "sendPaymentDetailsEnteredEvent",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "void"
                 }
               },
-              "description": "Renders the collapsed button state"
+              "description": "Sends PAYMENT_DETAILS_ENTERED analytics event when all payment details are complete and valid"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotButtonClick",
+              "privacy": "private",
+              "description": "Handles click events from slotted content.\nSupports both native <button> and custom <primer-button> elements."
+            },
+            {
+              "kind": "field",
+              "name": "handleDirectSubmit",
+              "privacy": "private",
+              "description": "Handles direct submit events from child components\nThis is a backup method to catch all possible submission events"
             },
             {
               "kind": "method",
-              "name": "renderExpandedInput",
+              "name": "setupContextEventListeners",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "void"
                 }
               },
-              "description": "Renders the expanded input state"
+              "description": "Sets up event listeners for context-forwarded events"
             },
             {
               "kind": "method",
-              "name": "renderLoading",
+              "name": "cleanupContextEventListeners",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "void"
                 }
               },
-              "description": "Renders the loading state"
+              "description": "Cleans up context event listeners"
+            },
+            {
+              "kind": "field",
+              "name": "handleContextCardSubmit",
+              "privacy": "private",
+              "description": "Handles primer:card-submit events received from the events context\nThis allows the card form to respond to external submit triggers"
             },
             {
               "kind": "method",
-              "name": "renderError",
+              "name": "isSubmitButton",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "boolean"
                 }
               },
-              "description": "Renders the error state"
+              "parameters": [
+                {
+                  "name": "button",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Determines if a button is a submit button based on its attributes"
+            },
+            {
+              "kind": "field",
+              "name": "onSlotChange",
+              "privacy": "private",
+              "description": "Handles slot change events to detect custom content"
             },
             {
               "kind": "method",
-              "name": "renderExpandedState",
+              "name": "submitCardPayment",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult | typeof nothing"
+                  "text": "Promise<void>"
                 }
               },
-              "description": "Renders the appropriate expanded state based on current state"
-            }
-          ],
-          "events": [
-            {
-              "description": "Dispatched on successful payment",
-              "name": "primer-payment-success"
+              "description": "Handles the card form submission.\nValidates the form and dispatches either a submit success or errors event."
             },
             {
-              "description": "Dispatched on payment error",
-              "name": "primer-payment-error"
+              "kind": "field",
+              "name": "handleFormSubmit",
+              "privacy": "private",
+              "description": "Event handler for form submission\nHandles both native form submissions and custom events"
             }
           ],
           "attributes": [
             {
-              "name": "paymentMethod",
+              "name": "hide-labels",
               "type": {
-                "text": "InitializedPaymentMethod"
+                "text": "boolean"
               },
-              "description": "Payment method configuration",
-              "fieldName": "paymentMethod"
+              "default": "false",
+              "fieldName": "hideLabels"
             },
             {
               "name": "disabled",
@@ -11132,111 +11249,145 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables component interaction when true",
               "fieldName": "disabled"
+            },
+            {
+              "name": "paymentManagers",
+              "type": {
+                "text": "InitializedManagersMap"
+              },
+              "default": "new Map()",
+              "description": "Payment managers injected from context",
+              "fieldName": "paymentManagers"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "primer-blik",
+          "tagName": "primer-card-form",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BlikComponent",
+          "name": "CardFormComponent",
           "declaration": {
-            "name": "BlikComponent",
-            "module": "src/containers/blik/blik.component.ts"
+            "name": "CardFormComponent",
+            "module": "src/containers/card-form/card-form.component.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "primer-blik",
+          "name": "primer-card-form",
           "declaration": {
-            "name": "BlikComponent",
-            "module": "src/containers/blik/blik.component.ts"
+            "name": "CardFormComponent",
+            "module": "src/containers/card-form/card-form.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/blik/blik.styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css` :host { display: flex; width: 100%; } .blik-container { width: 100%; display: flex; flex-direction: column; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .blik-container.expanded { border-radius: var(--primer-radius-medium); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); padding: var(--primer-space-large); } /* Button styles (collapsed state) */ primer-button.blik-button { width: 100%; } /* Override primer-button part styles for BLIK branding */ primer-button.blik-button::part(button) { /* BLIK brand requirement: Black background (#000000) with white logo */ background-color: #000000; border: none; color: var(--primer-color-text-primary); padding: 2px; display: flex; align-items: center; justify-content: center; gap: var(--primer-space-small); /* Fixed height for button - matches redirect payment method calculation */ height: calc( ${unsafeCSS(PAYMENT_METHOD_LINE_HEIGHT)} + calc(2 * var(--primer-space-medium)) ); flex-shrink: 0; /* Prevent button from shrinking when form appears */ } /* Image container for button logo */ .image-container { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 100%; flex-shrink: 0; flex-grow: 1; } /* Button logo */ img { max-width: 100px; width: 100%; height: auto; object-fit: cover; max-height: 98%; } /* Expanded content (form, loading, error states) */ .blik-expanded-content { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; margin-top: var(--primer-space-medium); } .blik-container.expanded .blik-expanded-content { grid-template-rows: 1fr; } .blik-content-wrapper { overflow: hidden; } /* Input wrapper */ .blik-input-wrapper { display: flex; flex-direction: column; gap: var(--primer-space-small); } /* Input label */ .blik-label { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); } /* Input field */ .blik-input { width: 100%; padding: var(--primer-space-medium); font-family: var(--primer-typography-body-large-font); font-size: var(--primer-typography-body-large-size); font-weight: var(--primer-typography-body-large-weight); line-height: var(--primer-typography-body-large-line-height); /* Increase spacing between digits for better 6-digit code readability */ letter-spacing: 0.25em; text-align: center; color: var(--primer-color-text-primary); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); border-radius: var(--primer-radius-medium); outline: none; transition: border-color var(--primer-animation-duration) var(--primer-animation-easing); } .blik-input::placeholder { color: var(--primer-color-text-secondary); /* Reduce placeholder visibility to emphasize user input */ opacity: 0.5; } .blik-input:focus { border-color: var(--primer-color-border-outlined-focus); } .blik-input:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state */ .blik-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primer-space-large); padding: var(--primer-space-xlarge) var(--primer-space-medium); } /* Timeout warning */ .blik-timeout-warning { margin-top: var(--primer-space-medium); padding: var(--primer-space-small); font-size: var(--primer-typography-body-small-size); color: var(--primer-color-text-warning); text-align: center; border-radius: var(--primer-radius-small); background-color: var(--primer-color-surface-warning); } /* Error state */ .blik-error { display: flex; flex-direction: column; align-items: center; gap: var(--primer-space-medium); } .blik-error-message { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); text-align: center; } /* Retry button */ .blik-retry-button { padding: var(--primer-space-medium) var(--primer-space-large); font-family: var(--primer-typography-title-large-font); font-size: var(--primer-typography-title-large-size); font-weight: var(--primer-typography-title-large-weight); line-height: var(--primer-typography-title-large-line-height); color: var(--primer-color-background-outlined-default); background-color: var(--primer-color-brand); border: none; border-radius: var(--primer-radius-medium); cursor: pointer; outline: none; transition: filter var(--primer-animation-duration) var(--primer-animation-easing); } .blik-retry-button:hover:not(:disabled) { filter: brightness(105%); } .blik-retry-button:active:not(:disabled) { filter: brightness(98%); } .blik-retry-button:focus-visible { outline: 2px solid var(--primer-color-brand); outline-offset: 2px; } .blik-retry-button:disabled { background-color: var(--primer-color-background-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Disabled state styling */ :host([disabled]) { opacity: 0.6; cursor: not-allowed; } :host([disabled]) primer-button::part(button) { pointer-events: none; cursor: not-allowed; } :host([disabled]) img { filter: grayscale(100%); } /* Responsive typography for larger screens */ @media (min-width: 768px) { .blik-input { font-size: var(--primer-typography-title-large-size); } } `"
-        }
-      ],
+      "path": "src/containers/card-form/card-form.styles.ts",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "styles",
+          "name": "default",
           "declaration": {
-            "name": "styles",
-            "module": "src/containers/blik/blik.styles.ts"
+            "module": "src/containers/card-form/card-form.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/blik/blik.ts",
+      "path": "src/containers/card-form/card-form.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "Blik",
+          "name": "CardFormCardNumber",
           "declaration": {
-            "name": "BlikComponent",
-            "module": "src/containers/blik/blik.ts"
+            "name": "CardFormCardNumber",
+            "module": "./components"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/containers/card-form/card-form-context.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "cardFormContext"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "CardFormCVV",
+          "declaration": {
+            "name": "CardFormCVV",
+            "module": "./components"
+          }
+        },
         {
           "kind": "js",
-          "name": "cardFormContext",
+          "name": "CardFormExpiry",
           "declaration": {
-            "name": "cardFormContext",
-            "module": "src/containers/card-form/card-form-context.ts"
+            "name": "CardFormExpiry",
+            "module": "./components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardFormName",
+          "declaration": {
+            "name": "CardFormName",
+            "module": "./components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardFormSubmit",
+          "declaration": {
+            "name": "CardFormSubmit",
+            "module": "./components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardFormCardNetworkSelector",
+          "declaration": {
+            "name": "CardFormCardNetworkSelector",
+            "module": "./components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardForm",
+          "declaration": {
+            "name": "CardFormComponent",
+            "module": "src/containers/card-form/card-form.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/card-form/card-form.component.ts",
+      "path": "src/containers/card-form/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/containers/blik/blik.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.",
-          "name": "CardFormComponent",
+          "description": "BLIK Payment Component\n\nConsolidated component handling BLIK payment flow from button click through\npayment completion. Uses a 4-state machine for managing the user experience.",
+          "name": "BlikComponent",
           "members": [
             {
               "kind": "field",
-              "name": "hideLabels",
+              "name": "paymentMethod",
               "type": {
-                "text": "boolean"
+                "text": "InitializedPaymentMethod"
               },
-              "default": "false",
-              "attribute": "hide-labels",
-              "reflects": true
+              "description": "Payment method configuration",
+              "attribute": "paymentMethod"
             },
             {
               "kind": "field",
@@ -11245,296 +11396,200 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Disables component interaction when true",
               "attribute": "disabled"
             },
-            {
-              "kind": "field",
-              "name": "hasAssignedContent",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "description": "Tracks whether custom content has been provided via slot"
-            },
-            {
-              "kind": "field",
-              "name": "selectedCardNetwork",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "formErrorMessage",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null",
-              "description": "Form-level error message to display"
-            },
-            {
-              "kind": "field",
-              "name": "paymentMethodSelectionSent",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false",
-              "description": "Flag to track if PAYMENT_METHOD_SELECTION event has been sent"
-            },
             {
               "kind": "field",
               "name": "paymentManagers",
               "type": {
                 "text": "InitializedManagersMap"
               },
-              "default": "new Map()",
-              "description": "Payment managers injected from context",
-              "attribute": "paymentManagers"
-            },
-            {
-              "kind": "field",
-              "name": "clientOptions",
-              "type": {
-                "text": "ClientOptionsContextType"
-              },
-              "default": "null",
-              "description": "Client options for configuration"
+              "default": "new Map()"
             },
             {
               "kind": "field",
-              "name": "headlessUtils",
+              "name": "currentState",
               "type": {
-                "text": "HeadlessUtilsContextType"
+                "text": "BlikState"
               },
-              "default": "null",
-              "description": "Headless utils for accessing server configuration"
+              "privacy": "private",
+              "default": "'collapsed'"
             },
             {
               "kind": "field",
-              "name": "analyticsUtils",
+              "name": "blikCode",
               "type": {
-                "text": "AnalyticsContextType"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Analytics utils for sending analytics events"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "contextEventsController",
+              "name": "errorMessage",
               "type": {
-                "text": "EventsContextType"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Events controller from context for receiving forwarded events"
-            },
-            {
-              "kind": "field",
-              "name": "cardFormProvider",
               "privacy": "private",
-              "readonly": true,
-              "default": "new ContextProvider(this, { context: cardFormContext, initialValue: null, })",
-              "description": "Context provider for card form data"
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "shouldShowCardholderName",
+              "name": "pollingDuration",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "Determines whether to show the cardholder name field\nUses client configuration with fallback to default (true)",
-              "readonly": true
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "shouldRequireCardholderName",
+              "name": "pollingTimer",
               "type": {
-                "text": "boolean"
+                "text": "number | null"
               },
-              "description": "Determines whether the cardholder name field is required\nUses client configuration with fallback to default (false)",
-              "readonly": true
+              "privacy": "private",
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "eventsController",
+              "name": "loadManagerTask",
               "privacy": "private",
-              "readonly": true,
-              "default": "new PrimerEventsController(this)",
-              "description": "Events controller for dispatching form events"
+              "default": "new Task(this, { args: () => [this.paymentMethod?.type], task: ([type]) => { if (!type) { return initialState; } const managerEntry = this.paymentManagers.get(type); if (!managerEntry) { throw new Error('BLIK payment method manager not initialized'); } // TypeScript narrows the union type based on the payment method type check if (managerEntry.type !== 'ADYEN_BLIK') { throw new Error('Invalid payment method type for BLIK component'); } return managerEntry.manager; }, })",
+              "description": "Manager loading task\nValidates BLIK manager exists before allowing payment flow\n\nThis Task provides reactive validation of manager availability:\n- Automatically re-runs when paymentMethod or paymentManagers change\n- Provides type-safe access to the BLIK manager\n- Enables early error detection before user interaction\n\nUnlike native payment methods (Apple Pay, Google Pay, PayPal) which use a\ntwo-task pattern (manager loading + button rendering), BLIK only needs the\nmanager loading task because it renders its own UI via Lit templates."
             },
             {
               "kind": "field",
-              "name": "_contextCardSubmitListener",
-              "type": {
-                "text": "((event: CustomEvent) => void) | null"
-              },
+              "name": "handleButtonClick",
               "privacy": "private",
-              "default": "null",
-              "description": "External event listener reference for cleanup"
+              "description": "Handles button click to toggle between collapsed and expanded states"
             },
             {
               "kind": "field",
-              "name": "_isHandlingContextEvent",
-              "type": {
-                "text": "boolean"
-              },
+              "name": "handleCollapse",
               "privacy": "private",
-              "default": "false",
-              "description": "Flag to prevent circular event loop when handling events"
+              "description": "Handles collapsing the form back to button-only view\nResets form state when user clicks button to collapse"
             },
             {
               "kind": "field",
-              "name": "inputControllers",
+              "name": "handleInput",
               "privacy": "private",
-              "readonly": true,
-              "default": "new Map< HostedInputType, IHostedInputController >()",
-              "description": "Registry for input controllers to enable context-driven meta state management"
+              "description": "Handles input changes, validates numeric input, and auto-submits on 6 digits"
             },
             {
               "kind": "field",
-              "name": "setupCardFormTask",
+              "name": "handleRetry",
               "privacy": "private",
-              "readonly": true,
-              "default": "new Task(this, { task: ([cardManager]) => { if (!cardManager?.manager) return initialState; const { manager } = cardManager; const hostedInputs = manager.createHostedInputs(); const { cardNumberInput, expiryInput, cvvInput } = hostedInputs; this.cardFormProvider.setValue({ // Temporarily set any so we can toggle between sdk v2 and new sdk core cardholderNameInput: ( hostedInputs as { cardholderNameInput?: IHeadlessHostedInput } ).cardholderNameInput, cardNumberInput, expiryInput, cvvInput, setCardholderName: (val: string) => { manager.setCardholderName(val); if (this.shouldRequireCardholderName) { manager.validate?.().then((validationResult) => { const errors = validationResult?.validationErrors; const cardholderNameError = errors?.find( (error) => error.name === fieldToInputType.cardholderName, ); const controller = this.inputControllers.get( HostedInputType.CARD_HOLDER_NAME, ); if (controller) { controller.updateMetaFromValidation({ valid: false, error: cardholderNameError?.message || cardholderNameError?.error || null, errorCode: cardholderNameError?.message || cardholderNameError?.error || null, }); } }); } }, setCardNetwork: (val: string) => { this.selectedCardNetwork = val; }, validate: () => manager.validate(), submit: (args) => manager.submit(args), hideLabels: this.hideLabels, disabled: this.disabled, // New meta state management methods setSubmissionState: (submitted: boolean) => { this.inputControllers.forEach((controller) => { controller.setSubmitted(submitted); }); }, propagateValidationErrors: (errors: InputValidationError[]) => { if (!errors) return; errors.forEach((error) => { const fieldName = error.field || error.name; const errorMessage = error.message || error.error; const inputType = fieldToInputType[fieldName]; if (inputType) { const controller = this.inputControllers.get(inputType); if (controller) { const updateData = { valid: false, error: errorMessage, errorCode: errorMessage, // Use error message (localization key) instead of field name }; controller.updateMetaFromValidation(updateData); } } }); }, registerInputController: ( inputType: HostedInputType, controller: IHostedInputController, ) => { this.inputControllers.set(inputType, controller); }, unregisterInputController: (inputType: HostedInputType) => { this.inputControllers.delete(inputType); }, onUserInteraction: () => { this.sendPaymentMethodSelectionEvent(); this.checkAndSendPaymentDetailsEnteredEvent(); }, }); return true; }, args: () => [this.paymentManagers.get('PAYMENT_CARD')], })",
-              "description": "Task to set up the card form with hosted inputs"
+              "description": "Handles retry button click"
             },
             {
               "kind": "method",
-              "name": "sendPaymentMethodSelectionEvent",
+              "name": "startPollingTimer",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Sends PAYMENT_METHOD_SELECTION analytics event when user first interacts with card form"
+              "description": "Starts polling timer to track payment duration"
             },
             {
               "kind": "method",
-              "name": "checkAndSendPaymentDetailsEnteredEvent",
+              "name": "stopPollingTimer",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Checks if all required fields are filled and sends PAYMENT_DETAILS_ENTERED event"
-            },
-            {
-              "kind": "field",
-              "name": "paymentDetailsEnteredSent",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "Stops and resets polling timer"
             },
             {
               "kind": "method",
-              "name": "sendPaymentDetailsEnteredEvent",
+              "name": "submitBlikCode",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               },
-              "description": "Sends PAYMENT_DETAILS_ENTERED analytics event when all payment details are complete and valid"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotButtonClick",
-              "privacy": "private",
-              "description": "Handles click events from slotted content.\nSupports both native <button> and custom <primer-button> elements."
-            },
-            {
-              "kind": "field",
-              "name": "handleDirectSubmit",
-              "privacy": "private",
-              "description": "Handles direct submit events from child components\nThis is a backup method to catch all possible submission events"
+              "description": "Validates and submits the BLIK code"
             },
             {
               "kind": "method",
-              "name": "setupContextEventListeners",
+              "name": "renderCollapsed",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "TemplateResult"
                 }
               },
-              "description": "Sets up event listeners for context-forwarded events"
+              "description": "Renders the collapsed button state"
             },
             {
               "kind": "method",
-              "name": "cleanupContextEventListeners",
+              "name": "renderExpandedInput",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "TemplateResult"
                 }
               },
-              "description": "Cleans up context event listeners"
-            },
-            {
-              "kind": "field",
-              "name": "handleContextCardSubmit",
-              "privacy": "private",
-              "description": "Handles primer:card-submit events received from the events context\nThis allows the card form to respond to external submit triggers"
+              "description": "Renders the expanded input state"
             },
             {
               "kind": "method",
-              "name": "isSubmitButton",
+              "name": "renderLoading",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "TemplateResult"
                 }
               },
-              "parameters": [
-                {
-                  "name": "button",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "Determines if a button is a submit button based on its attributes"
+              "description": "Renders the loading state"
             },
             {
-              "kind": "field",
-              "name": "onSlotChange",
+              "kind": "method",
+              "name": "renderError",
               "privacy": "private",
-              "description": "Handles slot change events to detect custom content"
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Renders the error state"
             },
             {
               "kind": "method",
-              "name": "submitCardPayment",
+              "name": "renderExpandedState",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Handles the card form submission.\nValidates the form and dispatches either a submit success or errors event."
+              "description": "Renders the appropriate expanded state based on current state"
+            }
+          ],
+          "events": [
+            {
+              "description": "Dispatched on successful payment",
+              "name": "primer-payment-success"
             },
             {
-              "kind": "field",
-              "name": "handleFormSubmit",
-              "privacy": "private",
-              "description": "Event handler for form submission\nHandles both native form submissions and custom events"
+              "description": "Dispatched on payment error",
+              "name": "primer-payment-error"
             }
           ],
           "attributes": [
             {
-              "name": "hide-labels",
+              "name": "paymentMethod",
               "type": {
-                "text": "boolean"
+                "text": "InitializedPaymentMethod"
               },
-              "default": "false",
-              "fieldName": "hideLabels"
+              "description": "Payment method configuration",
+              "fieldName": "paymentMethod"
             },
             {
               "name": "disabled",
@@ -11542,128 +11597,73 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Disables component interaction when true",
               "fieldName": "disabled"
-            },
-            {
-              "name": "paymentManagers",
-              "type": {
-                "text": "InitializedManagersMap"
-              },
-              "default": "new Map()",
-              "description": "Payment managers injected from context",
-              "fieldName": "paymentManagers"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "primer-card-form",
+          "tagName": "primer-blik",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CardFormComponent",
+          "name": "BlikComponent",
           "declaration": {
-            "name": "CardFormComponent",
-            "module": "src/containers/card-form/card-form.component.ts"
+            "name": "BlikComponent",
+            "module": "src/containers/blik/blik.component.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "primer-card-form",
+          "name": "primer-blik",
           "declaration": {
-            "name": "CardFormComponent",
-            "module": "src/containers/card-form/card-form.component.ts"
+            "name": "BlikComponent",
+            "module": "src/containers/blik/blik.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/card-form/card-form.styles.ts",
-      "declarations": [],
+      "path": "src/containers/blik/blik.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: flex; width: 100%; } .blik-container { width: 100%; display: flex; flex-direction: column; transition: all var(--primer-animation-duration) var(--primer-animation-easing); } .blik-container.expanded { border-radius: var(--primer-radius-medium); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); padding: var(--primer-space-large); } /* Button styles (collapsed state) */ primer-button.blik-button { width: 100%; } /* Override primer-button part styles for BLIK branding */ primer-button.blik-button::part(button) { /* BLIK brand requirement: Black background (#000000) with white logo */ background-color: #000000; border: none; color: var(--primer-color-text-primary); padding: 2px; display: flex; align-items: center; justify-content: center; gap: var(--primer-space-small); /* Fixed height for button - matches redirect payment method calculation */ height: calc( ${unsafeCSS(PAYMENT_METHOD_LINE_HEIGHT)} + calc(2 * var(--primer-space-medium)) ); flex-shrink: 0; /* Prevent button from shrinking when form appears */ } /* Image container for button logo */ .image-container { display: flex; justify-content: center; align-items: center; min-width: 100px; height: 100%; flex-shrink: 0; flex-grow: 1; } /* Button logo */ img { max-width: 100px; width: 100%; height: auto; object-fit: cover; max-height: 98%; } /* Expanded content (form, loading, error states) */ .blik-expanded-content { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--primer-animation-duration) var(--primer-animation-easing); overflow: hidden; margin-top: var(--primer-space-medium); } .blik-container.expanded .blik-expanded-content { grid-template-rows: 1fr; } .blik-content-wrapper { overflow: hidden; } /* Input wrapper */ .blik-input-wrapper { display: flex; flex-direction: column; gap: var(--primer-space-small); } /* Input label */ .blik-label { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); } /* Input field */ .blik-input { width: 100%; padding: var(--primer-space-medium); font-family: var(--primer-typography-body-large-font); font-size: var(--primer-typography-body-large-size); font-weight: var(--primer-typography-body-large-weight); line-height: var(--primer-typography-body-large-line-height); /* Increase spacing between digits for better 6-digit code readability */ letter-spacing: 0.25em; text-align: center; color: var(--primer-color-text-primary); background-color: var(--primer-color-background-outlined-default); border: 1px solid var(--primer-color-border-outlined-default); border-radius: var(--primer-radius-medium); outline: none; transition: border-color var(--primer-animation-duration) var(--primer-animation-easing); } .blik-input::placeholder { color: var(--primer-color-text-secondary); /* Reduce placeholder visibility to emphasize user input */ opacity: 0.5; } .blik-input:focus { border-color: var(--primer-color-border-outlined-focus); } .blik-input:disabled { background-color: var(--primer-color-background-outlined-disabled); border-color: var(--primer-color-border-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Loading state */ .blik-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--primer-space-large); padding: var(--primer-space-xlarge) var(--primer-space-medium); } /* Timeout warning */ .blik-timeout-warning { margin-top: var(--primer-space-medium); padding: var(--primer-space-small); font-size: var(--primer-typography-body-small-size); color: var(--primer-color-text-warning); text-align: center; border-radius: var(--primer-radius-small); background-color: var(--primer-color-surface-warning); } /* Error state */ .blik-error { display: flex; flex-direction: column; align-items: center; gap: var(--primer-space-medium); } .blik-error-message { font-family: var(--primer-typography-body-medium-font); font-size: var(--primer-typography-body-medium-size); font-weight: var(--primer-typography-body-medium-weight); line-height: var(--primer-typography-body-medium-line-height); color: var(--primer-color-text-primary); text-align: center; } /* Retry button */ .blik-retry-button { padding: var(--primer-space-medium) var(--primer-space-large); font-family: var(--primer-typography-title-large-font); font-size: var(--primer-typography-title-large-size); font-weight: var(--primer-typography-title-large-weight); line-height: var(--primer-typography-title-large-line-height); color: var(--primer-color-background-outlined-default); background-color: var(--primer-color-brand); border: none; border-radius: var(--primer-radius-medium); cursor: pointer; outline: none; transition: filter var(--primer-animation-duration) var(--primer-animation-easing); } .blik-retry-button:hover:not(:disabled) { filter: brightness(105%); } .blik-retry-button:active:not(:disabled) { filter: brightness(98%); } .blik-retry-button:focus-visible { outline: 2px solid var(--primer-color-brand); outline-offset: 2px; } .blik-retry-button:disabled { background-color: var(--primer-color-background-outlined-disabled); color: var(--primer-color-text-disabled); cursor: not-allowed; } /* Disabled state styling */ :host([disabled]) { opacity: 0.6; cursor: not-allowed; } :host([disabled]) primer-button::part(button) { pointer-events: none; cursor: not-allowed; } :host([disabled]) img { filter: grayscale(100%); } /* Responsive typography for larger screens */ @media (min-width: 768px) { .blik-input { font-size: var(--primer-typography-title-large-size); } } `"
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "default",
+          "name": "styles",
           "declaration": {
-            "module": "src/containers/card-form/card-form.styles.ts"
+            "name": "styles",
+            "module": "src/containers/blik/blik.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/containers/card-form/card-form.ts",
+      "path": "src/containers/blik/blik.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "CardFormCardNumber",
-          "declaration": {
-            "name": "CardFormCardNumber",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardFormCVV",
-          "declaration": {
-            "name": "CardFormCVV",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardFormExpiry",
-          "declaration": {
-            "name": "CardFormExpiry",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardFormName",
-          "declaration": {
-            "name": "CardFormName",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardFormSubmit",
-          "declaration": {
-            "name": "CardFormSubmit",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardFormCardNetworkSelector",
-          "declaration": {
-            "name": "CardFormCardNetworkSelector",
-            "module": "./components"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CardForm",
+          "name": "Blik",
           "declaration": {
-            "name": "CardFormComponent",
-            "module": "src/containers/card-form/card-form.ts"
+            "name": "BlikComponent",
+            "module": "src/containers/blik/blik.ts"
           }
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/containers/card-form/types.ts",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "src/containers/dynamic-payment/dynamic-payment.component.ts",