@primer-io/primer-js 0.0.2 → 0.1.0

package/dist/primer-loader.js

@@ -1 +1,165 @@
-var n="https://sdk.primer.io/web/v2-latest/Primer.min.js",i="https://sdk.primer.io/web/primer-js/v0-latest/primer-components.js";var s=typeof window<"u"&&typeof window.document<"u";function m(e){return document.querySelector(`script[src^="${e}"]`)}function a(e,t){let r=document.createElement("script");return r.setAttribute("src",e),r.setAttribute("async",""),r.setAttribute("crossorigin","anonymous"),t&&r.setAttribute("type","module"),r}function o(e,t=!1){if(!s)throw new Error("Cannot load script in server environment");let r=m(e)??a(e,t);return new Promise((p,c)=>{r.onload=()=>{p()},r.onerror=()=>{c()},r.parentNode||document.head.appendChild(r)})}async function d(e=n){await o(e),await window.Primer.preloadPrimer()}async function l(e=i){await o(e,!0)}async function L(){await d(),await l()}export{L as loadPrimer};
+var c="https://sdk.primer.io/web/v2-latest/Primer.min.js",d="https://sdk.primer.io/web/primer-js/v0-latest/primer-components.js";var p=typeof window<"u"&&typeof window.document<"u";function h(r){return document.querySelector(`script[src^="${r}"]`)}function v(r,o){let e=document.createElement("script");return e.setAttribute("src",r),e.setAttribute("async",""),e.setAttribute("crossorigin","anonymous"),o&&e.setAttribute("type","module"),e}function a(r,o=!1){if(!p)throw new Error("Cannot load script in server environment");let e=h(r)??v(r,o);return new Promise((m,t)=>{e.onload=()=>{m()},e.onerror=()=>{t()},e.parentNode||document.head.appendChild(e)})}function x(r){return document.querySelector(`#${r}`)}function S(r,o){let e=document.createElement("style");return e.textContent=r,e.id=o,e}function i(r,o,e=!0){if(!p||x(o))return;let t=S(r,o);e&&document.head.firstChild?document.head.insertBefore(t,document.head.firstChild):document.head.appendChild(t)}var s=`
+@keyframes primer-css-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+primer-checkout:has(:not(:defined)) > * {
+  visibility: hidden;
+}
+
+primer-checkout:not([js-initialized]) {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 64px; 
+}
+
+primer-checkout:not([js-initialized]):not([loader-disabled])::after {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width:  var(--primer-size-xlarge);
+  height:  var(--primer-size-xlarge);
+  border-radius: 50%;
+  border: 3px solid #f5f5f5;
+  border-top-color: var(--primer-color-loader);
+  animation: primer-css-spinner-rotate 1.2s linear infinite;
+  z-index: 9999;
+}
+`;var g=`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+primer-checkout {
+  --primer-color-background-transparent-default: rgba(255, 255, 255, 0);
+  --primer-color-border-transparent-default: rgba(255, 255, 255, 0);
+  --primer-color-gray-100: #f5f5f5;
+  --primer-color-gray-200: #eeeeee;
+  --primer-color-gray-300: #e0e0e0;
+  --primer-color-gray-400: #bdbdbd;
+  --primer-color-gray-500: #9e9e9e;
+  --primer-color-gray-600: #757575;
+  --primer-color-gray-900: #212121;
+  --primer-color-gray-000: #ffffff;
+  --primer-color-brand: #2f98ff;
+  --primer-color-red-100: #ffecec;
+  --primer-color-red-500: #ff7279;
+  --primer-color-red-900: #b4324b;
+  --primer-color-blue-500: #399dff;
+  --primer-color-blue-900: #2270f4;
+  --primer-radius-base: 4px;
+  --primer-typography-brand: Inter;
+  --primer-typography-title-xlarge-letter-spacing: -0.6px;
+  --primer-typography-title-xlarge-weight: 550;
+  --primer-typography-title-xlarge-size: 24px;
+  --primer-typography-title-xlarge-line-height: 32px;
+  --primer-typography-title-large-letter-spacing: -0.2px;
+  --primer-typography-title-large-weight: 550;
+  --primer-typography-title-large-size: 16px;
+  --primer-typography-title-large-line-height: 20px;
+  --primer-typography-body-large-letter-spacing: -0.2px;
+  --primer-typography-body-large-weight: 400;
+  --primer-typography-body-large-size: 16px;
+  --primer-typography-body-large-line-height: 20px;
+  --primer-typography-body-medium-letter-spacing: 0px;
+  --primer-typography-body-medium-weight: 400;
+  --primer-typography-body-medium-size: 14px;
+  --primer-typography-body-medium-line-height: 20px;
+  --primer-typography-body-small-letter-spacing: 0px;
+  --primer-typography-body-small-weight: 400;
+  --primer-typography-body-small-size: 12px;
+  --primer-typography-body-small-line-height: 16px;
+  --primer-space-base: 4px;
+  --primer-size-base: 4px;
+  --primer-animation-duration: 200ms;
+  --primer-animation-easing: cubic-bezier(0.44, 0, 0.4, 1);
+  --primer-color-background-outlined-default: var(--primer-color-gray-000);
+  --primer-color-background-outlined-disabled: var(--primer-color-gray-100);
+  --primer-color-background-transparent-hover: var(--primer-color-gray-100);
+  --primer-color-background-transparent-active: var(--primer-color-gray-200);
+  --primer-color-background-transparent-loading: var(--primer-color-gray-100);
+  --primer-color-background-transparent-focus: var(--primer-color-background-transparent-default);
+  --primer-color-background-transparent-disabled: var(--primer-color-gray-100);
+  --primer-color-background-transparent-selected: var(--primer-color-gray-100);
+  --primer-color-text-primary: var(--primer-color-gray-900);
+  --primer-color-text-placeholder: var(--primer-color-gray-500);
+  --primer-color-text-disabled: var(--primer-color-gray-400);
+  --primer-color-text-negative: var(--primer-color-red-900);
+  --primer-color-text-link: var(--primer-color-blue-900);
+  --primer-color-text-secondary: var(--primer-color-gray-600);
+  --primer-color-border-outlined-default: var(--primer-color-gray-300);
+  --primer-color-border-outlined-hover: var(--primer-color-gray-400);
+  --primer-color-border-outlined-active: var(--primer-color-gray-500);
+  --primer-color-border-outlined-disabled: var(--primer-color-gray-200);
+  --primer-color-border-outlined-loading: var(--primer-color-gray-200);
+  --primer-color-border-outlined-selected: var(--primer-color-brand);
+  --primer-color-border-outlined-error: var(--primer-color-red-500);
+  --primer-color-border-transparent-hover: var(--primer-color-border-transparent-default);
+  --primer-color-border-transparent-active: var(--primer-color-border-transparent-default);
+  --primer-color-border-transparent-disabled: var(--primer-color-border-transparent-default);
+  --primer-color-border-transparent-selected: var(--primer-color-border-transparent-default);
+  --primer-color-icon-primary: var(--primer-color-gray-900);
+  --primer-color-icon-disabled: var(--primer-color-gray-400);
+  --primer-color-icon-negative: var(--primer-color-red-500);
+  --primer-color-focus: var(--primer-color-brand);
+  --primer-color-loader: var(--primer-color-brand);
+  --primer-radius-medium: 8px;
+  --primer-radius-small: 4px;
+  --primer-radius-large: 12px;
+  --primer-radius-xsmall: 2px;
+  --primer-typography-title-xlarge-font: var(--primer-typography-brand);
+  --primer-typography-title-large-font: var(--primer-typography-brand);
+  --primer-typography-body-large-font: var(--primer-typography-brand);
+  --primer-typography-body-medium-font: var(--primer-typography-brand);
+  --primer-typography-body-small-font: var(--primer-typography-brand);
+  --primer-space-xxsmall: 2px;
+  --primer-space-xsmall: 4px;
+  --primer-space-small: 8px;
+  --primer-space-medium: 12px;
+  --primer-space-large: 16px;
+  --primer-space-xlarge: 20px;
+  --primer-size-small: 16px;
+  --primer-size-medium: 20px;
+  --primer-size-large: 24px;
+  --primer-size-xlarge: 32px;
+  --primer-size-xxlarge: 40px;
+  --primer-size-xxxlarge: 56px;
+  --primer-color-background-outlined-focus: var(--primer-color-background-outlined-default);
+  --primer-color-background-outlined-loading: var(--primer-color-background-outlined-disabled);
+  --primer-color-background-outlined-active: var(--primer-color-background-outlined-default);
+  --primer-color-background-outlined-hover: var(--primer-color-background-outlined-default);
+  --primer-color-background-outlined-selected: var(--primer-color-background-outlined-default);
+  --primer-color-background-outlined-error: var(--primer-color-background-outlined-default);
+  --primer-color-border-outlined-focus: var(--primer-color-focus);
+  --primer-color-border-transparent-focus: var(--primer-color-focus);
+  --primer-color-border-transparent-loading: var(--primer-color-border-transparent-disabled);
+}
+`,y=`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+primer-checkout.primer-dark-theme {
+  --primer-color-gray-100: #292929;
+  --primer-color-gray-200: #424242;
+  --primer-color-gray-300: #575757;
+  --primer-color-gray-400: #858585;
+  --primer-color-gray-500: #767577;
+  --primer-color-gray-600: #c7c7c7;
+  --primer-color-gray-900: #efefef;
+  --primer-color-gray-000: #171619;
+  --primer-color-brand: #2f98ff;
+  --primer-color-red-100: #321c20;
+  --primer-color-red-500: #e46d70;
+  --primer-color-red-900: #f6bfbf;
+  --primer-color-blue-500: #3f93e4;
+  --primer-color-blue-900: #4aaeff;
+}
+`;var k="primer-light-theme-css",E="primer-dark-theme-css";function l(){i(g,k,!0)}function n(){i(y,E,!0)}function u(){l(),n()}function b(){i(s,"primer-css-loader-styles",!1)}function f(){u()}function B(){l()}function Q(){n()}async function w(r=c){await a(r),await window.Primer.preloadPrimer()}async function T(r=d){b(),f(),await a(r,!0)}async function $(){b(),f(),await w(),await T()}export{Q as injectDarkTheme,B as injectLightTheme,b as injectLoaderStyles,f as injectThemeStyles,$ as loadPrimer};

package/dist/vscode.html-custom-data.json

@@ -4,18 +4,22 @@
   "tags": [
     {
       "name": "primer-checkout",
-      "description": "\n---\n",
+      "description": "PrimerCheckoutComponent implements the main checkout experience.\nThis component includes a CSS-only loader that displays before the JavaScript\nis fully loaded, ensuring users see a loading indicator immediately.\n\nThe loader can be disabled by:\n1. Adding the 'loader-disabled' attribute to the component\n2. Setting the CSS custom property --primer-loader-disabled: 1\n---\n",
       "attributes": [
         { "name": "custom-styles", "values": [] },
         { "name": "client-token", "values": [] },
         { "name": "options", "values": [{ "name": "PrimerCheckoutOptions" }] },
-        { "name": "disable-loader", "values": [] }
+        {
+          "name": "js-initialized",
+          "description": "Whether the component has completed initialization and loading\nThis is used to control the CSS-only loader visibility",
+          "values": []
+        }
       ],
       "references": []
     },
     {
       "name": "primer-button",
-      "description": "\n---\n",
+      "description": "\n---\n\n\n### **Events:**\n - **selection-change**",
       "attributes": [
         {
           "name": "variant",
@@ -26,6 +30,11 @@
           ]
         },
         { "name": "disabled", "values": [] },
+        {
+          "name": "loading",
+          "description": "Loading state of the button\nWhen true, the button will display a spinner and be disabled",
+          "values": []
+        },
         {
           "name": "buttonType",
           "values": [
@@ -33,6 +42,16 @@
             { "name": "submit" },
             { "name": "reset" }
           ]
+        },
+        {
+          "name": "selectionState",
+          "description": "Selection state of the button\n- default: Not checked\n- checked: Button is checked",
+          "values": [{ "name": "ButtonSelectionState" }]
+        },
+        {
+          "name": "selectable",
+          "description": "Indicates if this button is selectable/checkable",
+          "values": []
         }
       ],
       "references": []
@@ -49,12 +68,74 @@
       ],
       "references": []
     },
+    {
+      "name": "primer-collapsable",
+      "description": "A collapsable component that smoothly expands and collapses content.\nUses CSS Grid for smooth animation and incorporates the primary button.\n---\n\n\n### **Events:**\n - **expanded-changed**\n\n### **Methods:**\n - **expand(): _void_** - Expand the collapsable programmatically\n- **collapse(): _void_** - Collapse the collapsable programmatically",
+      "attributes": [
+        {
+          "name": "header",
+          "description": "The header text for the collapsable",
+          "values": []
+        },
+        {
+          "name": "expanded",
+          "description": "Whether the collapsable is expanded by default",
+          "values": []
+        },
+        {
+          "name": "expandText",
+          "description": "Text for expand button (for accessibility)",
+          "values": []
+        },
+        {
+          "name": "collapseText",
+          "description": "Text for collapse button (for accessibility)",
+          "values": []
+        },
+        {
+          "name": "ariaLabel",
+          "description": "ARIA label for the collapsable header",
+          "values": []
+        },
+        {
+          "name": "buttonVariant",
+          "description": "The button variant to use",
+          "values": [{ "name": "ButtonVariant" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-error-message",
+      "description": "A reusable atomic error message component that displays error information\nwith appropriate styling and accessibility attributes.\n\nThis component is fully accessible and designed to work with screen readers.\nIt includes animations for visibility transitions.\n---\n\n\n### **CSS Parts:**\n - **error-message** - The main error message container\n- **error-icon** - The error icon container\n- **error-content** - The error text content",
+      "attributes": [
+        {
+          "name": "message",
+          "description": "The error message text to display",
+          "values": []
+        },
+        {
+          "name": "visible",
+          "description": "Whether the error message is visible",
+          "values": []
+        },
+        {
+          "name": "role",
+          "description": "Accessibility role for the error message\nDefaults to \"alert\" for proper screen reader announcements",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "primer-icon",
       "description": "\n---\n",
       "attributes": [
         { "name": "color", "values": [] },
-        { "name": "size", "values": [{ "name": "lg" }, { "name": "sm" }] },
+        {
+          "name": "size",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+        },
         {
           "name": "name",
           "description": "The name of the icon to draw - available names can be found under library.ts file",
@@ -162,9 +243,35 @@
       ],
       "references": []
     },
+    {
+      "name": "primer-error-message-container",
+      "description": "A container component that connects to the SDK state context\nand displays appropriate error messages based on error state.\n\nThis component handles both process errors (typically from backend)\nand validation errors (typically from client-side), managing when\nand how they are displayed based on the current SDK state.\n---\n",
+      "attributes": [{ "name": "show-processing-errors", "values": [] }],
+      "references": []
+    },
+    {
+      "name": "primer-klarna",
+      "description": "This component renders Klarna payment method in a card-like (accordion) container with\npayment categories options to choose from.\n\n[ Pay with Klarna    v ] --> accordion header\n\n[ Pay Now ] [ Buy now, pay later ] --> payment categories options from Klarna\n[ Continue with Klarna ] --> opens a Klarna popup\n---\n",
+      "attributes": [
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] },
+        {
+          "name": "headlessUtils",
+          "values": [{ "name": "HeadlessUnitilsContext" }]
+        },
+        {
+          "name": "klarnaCategories",
+          "values": [{ "name": "KlarnaCategoriesContext" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "primer-native-payment",
-      "description": "\n---\n",
+      "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
       "attributes": [
         {
           "name": "paymentMethod",
@@ -173,6 +280,10 @@
         {
           "name": "paymentManagers",
           "values": [{ "name": "InitializedManagersMap" }]
+        },
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
         }
       ],
       "references": []
@@ -182,7 +293,10 @@
       "description": "\n---\n",
       "attributes": [
         { "name": "type", "values": [{ "name": "PaymentMethodType" }] },
-        { "name": "paymentMethods", "values": [{ "name": "PaymentsObject" }] }
+        {
+          "name": "paymentMethods",
+          "values": [{ "name": "PaymentMethodsContext" }]
+        }
       ],
       "references": []
     },
@@ -193,16 +307,21 @@
       "references": []
     },
     {
-      "name": "primer-checkout-failure",
+      "name": "primer-checkout-error",
       "description": "\n---\n",
-      "attributes": [],
+      "attributes": [
+        { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] }
+      ],
       "references": []
     },
     {
       "name": "primer-main",
       "description": "\n---\n",
       "attributes": [
-        { "name": "paymentMethods", "values": [{ "name": "PaymentsObject" }] },
+        {
+          "name": "paymentMethods",
+          "values": [{ "name": "PaymentMethodsContext" }]
+        },
         { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] }
       ],
       "references": []
@@ -214,15 +333,22 @@
         {
           "name": "paymentMethod",
           "values": [{ "name": "InitializedPaymentMethod" }]
-        },
-        {
-          "name": "paymentManagers",
-          "values": [{ "name": "InitializedManagersMap" }]
-        },
-        { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] }
+        }
       ],
       "references": []
     },
+    {
+      "name": "primer-show-other-payments",
+      "description": "Component for showing/hiding other payment methods when vault is present\nUtilizes the collapsable component for smooth transitions\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "primer-vault-manager",
+      "description": "VaultManagerComponent - displays and manages saved payment methods\n---\n",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "primer-card-form-submit",
       "description": "A form submit button component for card forms.\nProvides a consistent submit button with translation support.\n---\n",
@@ -232,6 +358,15 @@
           "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
           "values": []
         },
+        {
+          "name": "headlessInstance",
+          "values": [{ "name": "HeadlessUnitilsContext" }]
+        },
+        {
+          "name": "clientOptions",
+          "values": [{ "name": "ClientOptionsContext" }]
+        },
+        { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] },
         {
           "name": "variant",
           "description": "The button variant to use.",
@@ -253,8 +388,12 @@
     },
     {
       "name": "primer-input-card-expiry",
-      "description": "\n---\n\n\n### **Methods:**\n \n",
+      "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
       "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
         {
           "name": "label",
           "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -275,8 +414,12 @@
     },
     {
       "name": "primer-input-card-holder-name",
-      "description": "\n---\n\n\n### **Methods:**\n \n",
+      "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
       "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
         {
           "name": "label",
           "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -297,8 +440,12 @@
     },
     {
       "name": "primer-input-card-number",
-      "description": "Card number input component with dynamic card network detection and selection\n---\n\n\n### **Methods:**\n \n",
+      "description": "Card number input component with dynamic card network detection and selection\n---\n\n\n### **Methods:**\n \n\n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code",
       "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
         {
           "name": "label",
           "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -319,8 +466,12 @@
     },
     {
       "name": "primer-input-cvv",
-      "description": "\n---\n\n\n### **Methods:**\n \n",
+      "description": "\n---\n\n\n### **Methods:**\n \n- **getError(): _string|null_** - Get the error code from the hosted input controller when the input is submitted or touched\n\nCan be used instead of the error returned by the `validate()` method since internally `primer-sdk-web`\nuses the same logic to compute the error code\n",
       "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
         {
           "name": "label",
           "description": "The input label text.\nFalls back to localized default if not explicitly set.",
@@ -338,6 +489,121 @@
         }
       ],
       "references": []
+    },
+    {
+      "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",
+      "attributes": [
+        {
+          "name": "computedStyles",
+          "values": [{ "name": "CSSStyleDeclaration" }]
+        },
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "PaymentCardVaultedMethod" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "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**",
+      "attributes": [
+        {
+          "name": "isDeleting",
+          "description": "Whether a delete operation is in progress",
+          "values": []
+        },
+        {
+          "name": "paymentMethodId",
+          "description": "The ID of the payment method being deleted",
+          "values": []
+        },
+        {
+          "name": "paymentMethodName",
+          "description": "Payment method name to display in confirmation",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-vault-empty-state",
+      "description": "VaultEmptyStateComponent - displays when no payment methods are available\n---\n",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "primer-vault-error-message",
+      "description": "VaultErrorMessageComponent - displays error messages with improved visuals\n---\n\n\n### **Events:**\n - **close-error**",
+      "attributes": [
+        {
+          "name": "errorMessage",
+          "description": "The error message to display",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-vault-manager-header",
+      "description": "VaultManagerHeaderComponent - displays the header for the vault manager\n---\n\n\n### **Events:**\n - **toggle-edit-mode**",
+      "attributes": [
+        {
+          "name": "isEditMode",
+          "description": "Whether we're in edit mode",
+          "values": []
+        },
+        {
+          "name": "hasPaymentMethods",
+          "description": "Whether we have payment methods to edit",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "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\n---\n\n\n### **Events:**\n - **delete-payment-method**",
+      "attributes": [
+        {
+          "name": "headlessUtils",
+          "values": [{ "name": "HeadlessUnitilsContext" }]
+        },
+        {
+          "name": "isEditMode",
+          "description": "Whether the component is in edit mode",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-vault-payment-submit",
+      "description": "A submit button component for vault payment flows.\nProvides a consistent submit button with translation support.\nIntegrates with the vault manager context to handle payment submission.\n---\n",
+      "attributes": [
+        {
+          "name": "buttonText",
+          "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
+          "values": []
+        },
+        {
+          "name": "headlessInstance",
+          "values": [{ "name": "HeadlessUnitilsContext" }]
+        },
+        { "name": "sdkState", "values": [{ "name": "SdkStateContext" }] },
+        {
+          "name": "variant",
+          "description": "The button variant to use.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the button is disabled.\nThis property allows external disabling of the button\nregardless of the context state.",
+          "values": []
+        }
+      ],
+      "references": []
     }
   ]
 }