@primer-io/primer-js 0.2.0 → 0.3.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@primer-io/primer-js",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12,11 +12,11 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "customStyles",
+              "name": "custom-styles",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "clientToken",
+              "name": "client-token",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -24,7 +24,11 @@
               "value": { "type": "PrimerCheckoutOptions", "default": "{}" }
             },
             {
-              "name": "_jsInitialized",
+              "name": "loader-disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "js-initialized",
               "description": "Whether the component has completed initialization and loading\nThis is used to control the CSS-only loader visibility",
               "value": { "type": "boolean", "default": "false" }
             }
@@ -36,6 +40,7 @@
               { "name": "customStyles", "type": "string" },
               { "name": "clientToken", "type": "string" },
               { "name": "options", "type": "PrimerCheckoutOptions" },
+              { "name": "disableLoader", "type": "boolean" },
               { "name": "defaultSlot", "type": "HTMLSlotElement" },
               { "name": "locale", "type": "LocaleCode | undefined" },
               {
@@ -69,7 +74,7 @@
         },
         {
           "name": "primer-button",
-          "description": "\n---\n\n\n### **Events:**\n - **selection-change**",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -107,9 +112,14 @@
               "name": "selectable",
               "description": "Indicates if this button is selectable/checkable",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "flex",
+              "description": "Indicates if wraps the slot in a flex container",
+              "value": { "type": "boolean", "default": "true" }
             }
           ],
-          "events": [{ "name": "selection-change", "type": "CustomEvent" }],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -135,9 +145,14 @@
                 "name": "selectable",
                 "description": "Indicates if this button is selectable/checkable",
                 "type": "boolean"
+              },
+              {
+                "name": "flex",
+                "description": "Indicates if wraps the slot in a flex container",
+                "type": "boolean"
               }
             ],
-            "events": [{ "name": "selection-change", "type": "CustomEvent" }]
+            "events": []
           }
         },
         {
@@ -238,14 +253,11 @@
         },
         {
           "name": "primer-dialog",
-          "description": "\n---\n\n\n### **Events:**\n - **primer-dialog-close**",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [],
-          "events": [{ "name": "primer-dialog-close", "type": "CustomEvent" }],
-          "js": {
-            "properties": [],
-            "events": [{ "name": "primer-dialog-close", "type": "CustomEvent" }]
-          }
+          "events": [],
+          "js": { "properties": [], "events": [] }
         },
         {
           "name": "primer-error-message",
@@ -264,8 +276,8 @@
             },
             {
               "name": "role",
-              "description": "Accessibility role for the error message\nDefaults to \"alert\" for proper screen reader announcements",
-              "value": { "type": "string", "default": "'alert'" }
+              "description": "Accessibility role (defaults to \"alert\")",
+              "value": { "type": "string" }
             }
           ],
           "events": [],
@@ -281,11 +293,7 @@
                 "description": "Whether the error message is visible",
                 "type": "boolean"
               },
-              {
-                "name": "role",
-                "description": "Accessibility role for the error message\nDefaults to \"alert\" for proper screen reader announcements",
-                "type": "string"
-              }
+              { "name": "role", "type": "string" }
             ],
             "events": []
           }
@@ -328,7 +336,7 @@
         },
         {
           "name": "primer-input",
-          "description": "A fully type-safe input component that wraps the native HTML input element\nwhile providing additional functionality and styling.\n---\n\n\n### **Events:**\n - **focus** - Fired when the input receives focus\n- **blur** - Fired when the input loses focus\n- **invalid** - Fired when the input fails validation\n- **input** - Fired when the input value changes\n- **change** - Fired when the input value is committed\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focus the input element\n- **blur(): _void_** - Remove focus from the input element\n- **select(): _void_** - Select all text in the input element\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _void_** - Set the selection range of the input element\n- **checkValidity(): _boolean_** - Check if the input element is valid\n- **reportValidity(): _boolean_** - Report the validity of the input element\n- **addEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | AddEventListenerOptions_): _void_** - Type safe event dispatcher - allows consumers to use proper types\nwhen listening to events from this component\n- **removeEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | EventListenerOptions_): _void_** - Type safe event dispatcher removal\n\n### **CSS Parts:**\n - **input** - The native input element",
+          "description": "A fully type-safe input component that wraps the native HTML input element\nwhile providing additional functionality and styling.\n---\n\n\n### **Events:**\n - **input** - Fired when the input value changes\n- **change** - Fired when the input value is committed\n- **focus** - Fired when the input receives focus\n- **blur** - Fired when the input loses focus\n- **invalid** - Fired when the input fails validation\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Focus the input element\n- **blur(): _void_** - Remove focus from the input element\n- **select(): _void_** - Select all text in the input element\n- **setSelectionRange(start: _number_, end: _number_, direction: _'forward' | 'backward' | 'none'_): _void_** - Set the selection range of the input element\n- **checkValidity(): _boolean_** - Check if the input element is valid\n- **reportValidity(): _boolean_** - Report the validity of the input element\n- **addEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | AddEventListenerOptions_): _void_** - Type safe event dispatcher - allows consumers to use proper types\nwhen listening to events from this component\n- **removeEventListener(type: _K_, listener: _(ev: InputEventMap[K]) => void_, options: _boolean | EventListenerOptions_): _void_** - Type safe event dispatcher removal\n\n### **CSS Parts:**\n - **input** - The native input element",
           "doc-url": "",
           "attributes": [
             { "name": "value", "value": { "type": "string", "default": "''" } },
@@ -365,32 +373,28 @@
             {
               "name": "autocomplete",
               "value": { "type": "string", "default": "''" }
-            },
-            { "name": "id", "value": { "type": "string", "default": "''" } }
+            }
           ],
           "events": [
+            {
+              "name": "input",
+              "description": "Fired when the input value changes"
+            },
+            {
+              "name": "change",
+              "description": "Fired when the input value is committed"
+            },
             {
               "name": "focus",
-              "type": "FocusEvent",
               "description": "Fired when the input receives focus"
             },
             {
               "name": "blur",
-              "type": "FocusEvent",
               "description": "Fired when the input loses focus"
             },
             {
               "name": "invalid",
-              "type": "Event",
               "description": "Fired when the input fails validation"
-            },
-            {
-              "name": "input",
-              "description": "Fired when the input value changes"
-            },
-            {
-              "name": "change",
-              "description": "Fired when the input value is committed"
             }
           ],
           "js": {
@@ -422,28 +426,25 @@
               }
             ],
             "events": [
+              {
+                "name": "input",
+                "description": "Fired when the input value changes"
+              },
+              {
+                "name": "change",
+                "description": "Fired when the input value is committed"
+              },
               {
                 "name": "focus",
-                "type": "FocusEvent",
                 "description": "Fired when the input receives focus"
               },
               {
                 "name": "blur",
-                "type": "FocusEvent",
                 "description": "Fired when the input loses focus"
               },
               {
                 "name": "invalid",
-                "type": "Event",
                 "description": "Fired when the input fails validation"
-              },
-              {
-                "name": "input",
-                "description": "Fired when the input value changes"
-              },
-              {
-                "name": "change",
-                "description": "Fired when the input value is committed"
               }
             ]
           }
@@ -525,7 +526,7 @@
         },
         {
           "name": "primer-input-wrapper",
-          "description": "A wrapper component for input elements that handles focus styling and interactions.\nProvides an improved user experience by making the entire wrapper clickable to focus the inner input.\n\nFeatures:\n- Automatically focuses primer-input elements when wrapper is clicked\n- Dispatches wrapper-click events for iframe-based hosted inputs\n- Sets proper cursor styling to indicate text input functionality\n---\n\n\n### **Events:**\n - **wrapper-click**",
+          "description": "A wrapper component for input elements that handles focus styling and interactions.\nProvides an improved user experience by making the entire wrapper clickable to focus the inner input.\n\nFeatures:\n- Automatically focuses primer-input elements when wrapper is clicked\n- Dispatches wrapper-click events for iframe-based hosted inputs\n- Sets proper cursor styling to indicate text input functionality\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -537,13 +538,13 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [{ "name": "wrapper-click", "type": "CustomEvent" }],
+          "events": [],
           "js": {
             "properties": [
               { "name": "focusWithin", "type": "boolean" },
               { "name": "hasError", "type": "boolean" }
             ],
-            "events": [{ "name": "wrapper-click", "type": "CustomEvent" }]
+            "events": []
           }
         },
         {
@@ -573,7 +574,7 @@
             {
               "name": "size",
               "description": "Size of the spinner\nAvailable values: 'small', 'medium', 'large' or a custom number as string",
-              "value": { "type": "SpinnerSize | string", "default": "'medium'" }
+              "value": { "type": "SpinnerSize", "default": "'medium'" }
             },
             {
               "name": "compact",
@@ -592,7 +593,7 @@
               {
                 "name": "size",
                 "description": "Size of the spinner\nAvailable values: 'small', 'medium', 'large' or a custom number as string",
-                "type": "SpinnerSize | string"
+                "type": "SpinnerSize"
               },
               {
                 "name": "compact",
@@ -629,10 +630,10 @@
                 "type": "InitializedPaymentMethod | undefined"
               },
               { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              { "name": "sdkState", "type": "SdkStateContext | undefined" },
+              { "name": "sdkState", "type": "SdkStateContextType | undefined" },
               {
                 "name": "clientOptions",
-                "type": "ClientOptionsContext | undefined"
+                "type": "ClientOptionsContextType | undefined"
               },
               { "name": "screen", "type": "'form' | 'mandate'" }
             ],
@@ -656,6 +657,10 @@
               "name": "hide-labels",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "paymentManagers",
               "description": "Payment managers injected from context",
@@ -669,6 +674,7 @@
           "js": {
             "properties": [
               { "name": "hideLabels", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" },
               {
                 "name": "paymentManagers",
                 "description": "Payment managers injected from context",
@@ -696,8 +702,8 @@
                 "type": "InitializedPaymentMethod | undefined"
               },
               { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              { "name": "sdkState", "type": "SdkStateContext" },
-              { "name": "headlessUtils", "type": "HeadlessUnitilsContext" },
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" },
               { "name": "open", "type": "boolean" }
             ],
             "events": []
@@ -735,30 +741,39 @@
             },
             {
               "name": "sdkState",
-              "value": { "type": "SdkStateContext", "default": "null" }
+              "value": { "type": "SdkStateContextType", "default": "null" }
             },
             {
               "name": "headlessUtils",
-              "value": { "type": "HeadlessUnitilsContext", "default": "null" }
+              "value": {
+                "type": "HeadlessUnitilsContextType",
+                "default": "null"
+              }
             },
             {
               "name": "klarnaCategories",
               "value": {
-                "type": "KlarnaCategoriesContext | null",
+                "type": "KlarnaCategoriesContextType | null",
                 "default": "null"
               }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              { "name": "sdkState", "type": "SdkStateContext" },
-              { "name": "headlessUtils", "type": "HeadlessUnitilsContext" },
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" },
               {
                 "name": "klarnaCategories",
-                "type": "KlarnaCategoriesContext | null"
-              }
+                "type": "KlarnaCategoriesContextType | null"
+              },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "toggleExpand" }
             ],
             "events": []
           }
@@ -785,6 +800,10 @@
                 "type": "CSSStyleDeclaration | null",
                 "default": "null"
               }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
@@ -795,7 +814,11 @@
                 "type": "InitializedPaymentMethod | undefined"
               },
               { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              { "name": "computedStyles", "type": "CSSStyleDeclaration | null" }
+              {
+                "name": "computedStyles",
+                "type": "CSSStyleDeclaration | null"
+              },
+              { "name": "disabled", "type": "boolean" }
             ],
             "events": []
           }
@@ -812,16 +835,24 @@
                 "default": "undefined"
               }
             },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "paymentMethods",
-              "value": { "type": "PaymentMethodsContext", "default": "null" }
+              "value": {
+                "type": "PaymentMethodsContextType",
+                "default": "null"
+              }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               { "name": "type", "type": "PaymentMethodType | undefined" },
-              { "name": "paymentMethods", "type": "PaymentMethodsContext" }
+              { "name": "disabled", "type": "boolean" },
+              { "name": "paymentMethods", "type": "PaymentMethodsContextType" }
             ],
             "events": []
           }
@@ -841,12 +872,14 @@
           "attributes": [
             {
               "name": "sdkState",
-              "value": { "type": "SdkStateContext", "default": "null" }
+              "value": { "type": "SdkStateContextType", "default": "null" }
             }
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "sdkState", "type": "SdkStateContext" }],
+            "properties": [
+              { "name": "sdkState", "type": "SdkStateContextType" }
+            ],
             "events": []
           }
         },
@@ -857,18 +890,26 @@
           "attributes": [
             {
               "name": "paymentMethods",
-              "value": { "type": "PaymentMethodsContext", "default": "null" }
+              "value": {
+                "type": "PaymentMethodsContextType",
+                "default": "null"
+              }
             },
             {
               "name": "sdkState",
-              "value": { "type": "SdkStateContext", "default": "null" }
+              "value": { "type": "SdkStateContextType", "default": "null" }
+            },
+            {
+              "name": "clientOptions",
+              "value": { "type": "ClientOptionsContextType", "default": "null" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "paymentMethods", "type": "PaymentMethodsContext" },
-              { "name": "sdkState", "type": "SdkStateContext" }
+              { "name": "paymentMethods", "type": "PaymentMethodsContextType" },
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "clientOptions", "type": "ClientOptionsContextType" }
             ],
             "events": []
           }
@@ -881,6 +922,10 @@
             {
               "name": "paymentMethod",
               "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
@@ -890,9 +935,10 @@
                 "name": "paymentMethod",
                 "type": "InitializedPaymentMethod | undefined"
               },
+              { "name": "disabled", "type": "boolean" },
               { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              { "name": "sdkState", "type": "SdkStateContext" },
-              { "name": "headlessUtils", "type": "HeadlessUnitilsContext" }
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" }
             ],
             "events": []
           }
@@ -908,7 +954,7 @@
               {
                 "name": "vaultManager",
                 "description": "Consume the vault manager context to interact with vault state",
-                "type": "VaultManagerContext"
+                "type": "VaultManagerContextType"
               }
             ],
             "events": []
@@ -936,7 +982,12 @@
                 "name": "removeEventListener",
                 "type": "<K extends keyof VaultManagerEventMap>(\n    type: K,\n    listener: (ev: VaultManagerEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void"
               },
-              { "name": "vaultManagerContext", "type": "VaultManagerContext" },
+              {
+                "name": "vaultManagerContext",
+                "type": "VaultManagerContextType"
+              },
+              { "name": "vaultItemContext", "type": "VaultItemContextType" },
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" },
               {
                 "name": "animationDuration",
                 "description": "Animation duration override",
@@ -958,15 +1009,22 @@
             },
             {
               "name": "headlessInstance",
-              "value": { "type": "HeadlessUnitilsContext", "default": "null" }
+              "value": {
+                "type": "HeadlessUnitilsContextType",
+                "default": "null"
+              }
             },
             {
               "name": "clientOptions",
-              "value": { "type": "ClientOptionsContext", "default": "null" }
+              "value": { "type": "ClientOptionsContextType", "default": "null" }
             },
             {
               "name": "sdkState",
-              "value": { "type": "SdkStateContext", "default": "null" }
+              "value": { "type": "SdkStateContextType", "default": "null" }
+            },
+            {
+              "name": "cardFormContext",
+              "value": { "type": "CardFormContext | null", "default": "null" }
             },
             {
               "name": "variant",
@@ -987,9 +1045,13 @@
                 "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
                 "type": "string"
               },
-              { "name": "headlessInstance", "type": "HeadlessUnitilsContext" },
-              { "name": "clientOptions", "type": "ClientOptionsContext" },
-              { "name": "sdkState", "type": "SdkStateContext" },
+              {
+                "name": "headlessInstance",
+                "type": "HeadlessUnitilsContextType"
+              },
+              { "name": "clientOptions", "type": "ClientOptionsContextType" },
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "cardFormContext", "type": "CardFormContext | null" },
               {
                 "name": "variant",
                 "description": "The button variant to use.",
@@ -1021,9 +1083,9 @@
               {
                 "name": "cardNetworks",
                 "description": "Card networks context from provider",
-                "type": "CardNetworksContext"
+                "type": "CardNetworksContextType"
               },
-              { "name": "headlessUtils", "type": "HeadlessUnitilsContext" }
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" }
             ],
             "events": [
               {
@@ -1254,6 +1316,23 @@
             "events": []
           }
         },
+        {
+          "name": "primer-payment-method-content",
+          "description": "PaymentMethodContentComponent - renders payment method information with icon and details\nThis component encapsulates the display logic and styles for payment method content\nso it can be reused across different containers without style conflicts\n---\n",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "assetConfig",
+                "description": "The asset configuration containing icon and display data",
+                "type": "AssetConfig | null"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "primer-vault-cvv-input",
           "description": "CVV Input component for vault payment methods\nRenders a secure iframe for CVV input when required by the selected payment method\nUses dedicated CVV context to minimize re-renders\n---\n\n\n### **Methods:**\n - **onCvvInputChange()** - Update CVV metadata in the context when input changes",
@@ -1280,12 +1359,12 @@
               {
                 "name": "vaultManagerFormContext",
                 "description": "Form context for checking form dirty state",
-                "type": "VaultManagerContext"
+                "type": "VaultManagerContextType"
               },
               {
                 "name": "vaultManagerCvvContext",
                 "description": "CVV-specific context for dedicated CVV handling\nSeparated to minimize re-renders on frequent CVV input changes",
-                "type": "VaultItemContext"
+                "type": "VaultItemContextType"
               },
               {
                 "name": "computedStyles",
@@ -1301,7 +1380,7 @@
         },
         {
           "name": "primer-vault-delete-confirmation",
-          "description": "VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method\n---\n\n\n### **Events:**\n - **confirm-delete**\n- **cancel-delete**",
+          "description": "VaultDeleteConfirmationComponent - displays confirmation UI for deleting a payment method\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1320,10 +1399,7 @@
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "events": [
-            { "name": "confirm-delete", "type": "CustomEvent" },
-            { "name": "cancel-delete", "type": "CustomEvent" }
-          ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -1353,13 +1429,10 @@
               {
                 "name": "vaultManager",
                 "description": "Consume the vault manager context to access payment method info",
-                "type": "VaultManagerContext"
+                "type": "VaultManagerContextType"
               }
             ],
-            "events": [
-              { "name": "confirm-delete", "type": "CustomEvent" },
-              { "name": "cancel-delete", "type": "CustomEvent" }
-            ]
+            "events": []
           }
         },
         {
@@ -1372,7 +1445,7 @@
         },
         {
           "name": "primer-vault-error-message",
-          "description": "VaultErrorMessageComponent - displays error messages with improved visuals\n---\n\n\n### **Events:**\n - **close-error**",
+          "description": "VaultErrorMessageComponent - displays error messages with improved visuals\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1381,7 +1454,7 @@
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "events": [{ "name": "close-error", "type": "CustomEvent" }],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -1399,12 +1472,12 @@
                 "type": "string"
               }
             ],
-            "events": [{ "name": "close-error", "type": "CustomEvent" }]
+            "events": []
           }
         },
         {
           "name": "primer-vault-manager-header",
-          "description": "VaultManagerHeaderComponent - displays the header for the vault manager\n---\n\n\n### **Events:**\n - **toggle-edit-mode**",
+          "description": "VaultManagerHeaderComponent - displays the header for the vault manager\n---\n",
           "doc-url": "",
           "attributes": [
             {
@@ -1418,7 +1491,7 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [{ "name": "toggle-edit-mode", "type": "CustomEvent" }],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -1441,17 +1514,20 @@
                 "type": "boolean"
               }
             ],
-            "events": [{ "name": "toggle-edit-mode", "type": "CustomEvent" }]
+            "events": []
           }
         },
         {
           "name": "primer-vault-payment-method-item",
-          "description": "VaultPaymentMethodItemComponent - displays a single payment method\nUses the VaultManagerController for display formatting\nNow supports selection via the simplified button checked state\nEnhanced with smooth transitions between edit and payment modes\nAlways renders the primer-button for consistent UI and improved accessibility\n---\n\n\n### **Events:**\n - **delete-payment-method**",
+          "description": "VaultPaymentMethodItemComponent - displays a single payment method\nUses the VaultManagerController for display formatting\nNow supports selection via the simplified button checked state\nEnhanced with smooth transitions between edit and payment modes\nAlways renders the primer-button for consistent UI and improved accessibility\n---\n",
           "doc-url": "",
           "attributes": [
             {
               "name": "headlessUtils",
-              "value": { "type": "HeadlessUnitilsContext", "default": "null" }
+              "value": {
+                "type": "HeadlessUnitilsContextType",
+                "default": "null"
+              }
             },
             {
               "name": "isEditMode",
@@ -1459,9 +1535,7 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [
-            { "name": "delete-payment-method", "type": "CustomEvent" }
-          ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -1476,10 +1550,10 @@
               {
                 "name": "vaultManagerContext",
                 "description": "Consume the vault manager context",
-                "type": "VaultManagerContext"
+                "type": "VaultManagerContextType"
               },
-              { "name": "vaultItemContext", "type": "VaultItemContext" },
-              { "name": "headlessUtils", "type": "HeadlessUnitilsContext" },
+              { "name": "vaultItemContext", "type": "VaultItemContextType" },
+              { "name": "headlessUtils", "type": "HeadlessUnitilsContextType" },
               {
                 "name": "paymentMethod",
                 "description": "The payment method to display",
@@ -1491,9 +1565,7 @@
                 "type": "boolean"
               }
             ],
-            "events": [
-              { "name": "delete-payment-method", "type": "CustomEvent" }
-            ]
+            "events": []
           }
         },
         {
@@ -1508,11 +1580,14 @@
             },
             {
               "name": "headlessInstance",
-              "value": { "type": "HeadlessUnitilsContext", "default": "null" }
+              "value": {
+                "type": "HeadlessUnitilsContextType",
+                "default": "null"
+              }
             },
             {
               "name": "sdkState",
-              "value": { "type": "SdkStateContext", "default": "null" }
+              "value": { "type": "SdkStateContextType", "default": "null" }
             },
             {
               "name": "variant",
@@ -1533,10 +1608,13 @@
                 "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
                 "type": "string"
               },
-              { "name": "headlessInstance", "type": "HeadlessUnitilsContext" },
-              { "name": "sdkState", "type": "SdkStateContext" },
-              { "name": "vaultItemContext", "type": "VaultItemContext" },
-              { "name": "vaultManager", "type": "VaultManagerContext" },
+              {
+                "name": "headlessInstance",
+                "type": "HeadlessUnitilsContextType"
+              },
+              { "name": "sdkState", "type": "SdkStateContextType" },
+              { "name": "vaultItemContext", "type": "VaultItemContextType" },
+              { "name": "vaultManager", "type": "VaultManagerContextType" },
               {
                 "name": "clientOptions",
                 "type": "PrimerCheckoutOptions | null"