@primer-io/primer-js 0.3.11 → 0.4.0

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

@@ -231,6 +231,43 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "primer-select",
+      "description": "A native select dropdown component\n---\n\n\n### **Events:**\n - **change** - Fired when selection changes\n- **input** - Fired when input value changes\n- **focus** - Fired when select receives focus\n- **blur** - Fired when select loses focus",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name attribute for the select element",
+          "values": []
+        },
+        {
+          "name": "id",
+          "description": "The id attribute for the select element",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the select",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the select is disabled",
+          "values": []
+        },
+        {
+          "name": "has-error",
+          "description": "Whether the select is in an error state",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text for the select",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "primer-spinner",
       "description": "Spinner component with configurable size and color\nAdapted to work both standalone and within input components\n---\n",
@@ -264,6 +301,12 @@
       ],
       "references": []
     },
+    {
+      "name": "primer-billing-address",
+      "description": "BillingAddressComponent provides a form for collecting billing address information.\n\nConfiguration is exclusively server-side via SDK Core's checkoutModules. Field visibility\nis determined by the BILLING_ADDRESS module in the client session configuration.\n---\n\n\n### **Events:**\n - **primer-billing-address-change** - Fired when form data changes\n- **primer-billing-address-submit** - Fired when form is submitted\n\n### **Methods:**\n - **validateForSubmission(): _Promise<boolean>_** - Public method to validate billing address fields\nCalled by the parent form (card-form) when submitting\nReturns true if billing address is valid\nNote: Does NOT call setBillingAddress API - that happens after card validation\n- **submitToSDK(): _Promise<boolean>_** - Public method to submit billing address to SDK Core\nCalled by parent form ONLY after both card and billing address validation pass\n\nNote: headlessUtils is guaranteed to be available when this method is called,\nas the component only renders (and becomes interactive) after initialization task completes.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "primer-card-form",
       "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.\n---\n",
@@ -316,26 +359,6 @@
       ],
       "references": []
     },
-    {
-      "name": "primer-native-payment",
-      "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",
-          "values": [{ "name": "InitializedPaymentMethod" }]
-        },
-        {
-          "name": "paymentManagers",
-          "values": [{ "name": "InitializedManagersMap" }]
-        },
-        {
-          "name": "computedStyles",
-          "values": [{ "name": "CSSStyleDeclaration" }]
-        },
-        { "name": "disabled", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "primer-payment-method",
       "description": "\n---\n",
@@ -452,7 +475,7 @@
           "values": []
         },
         {
-          "name": "headlessInstance",
+          "name": "headlessUtils",
           "values": [{ "name": "HeadlessUtilsContextType" }]
         },
         {
@@ -587,6 +610,54 @@
       ],
       "references": []
     },
+    {
+      "name": "primer-apple-pay",
+      "description": "Apple Pay component with standard button container rendering.\n\nApple Pay uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options\n- Uses updateOverlayForContainer for disabled state\n- Simpler than Google Pay's shadow root approach\n---\n",
+      "attributes": [
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-google-pay",
+      "description": "Google Pay component with shadow root rendering for full-width button support.\n\nGoogle Pay requires special rendering logic:\n- Renders directly to shadow root (not button container)\n- Does NOT render .native-button-container div\n- Passes shadowRoot: true in render options\n- Requires retry logic for async button rendering\n---\n",
+      "attributes": [
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
+    {
+      "name": "primer-paypal",
+      "description": "PayPal component with standard button container rendering.\n\nPayPal uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options with PayPal SDK constraints (25-55px)\n- Uses updateOverlayForContainer for disabled state\n- Warns if height exceeds maximum allowed by PayPal SDK\n---\n",
+      "attributes": [
+        {
+          "name": "paymentMethod",
+          "values": [{ "name": "InitializedPaymentMethod" }]
+        },
+        {
+          "name": "paymentManagers",
+          "values": [{ "name": "InitializedManagersMap" }]
+        },
+        { "name": "disabled", "values": [] }
+      ],
+      "references": []
+    },
     {
       "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",

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.3.11",
+  "version": "0.4.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -573,6 +573,126 @@
             "events": [{ "name": "eventName", "type": "CustomEvent" }]
           }
         },
+        {
+          "name": "primer-select",
+          "description": "A native select dropdown component\n---\n\n\n### **Events:**\n - **change** - Fired when selection changes\n- **input** - Fired when input value changes\n- **focus** - Fired when select receives focus\n- **blur** - Fired when select loses focus",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name attribute for the select element",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "id",
+              "description": "The id attribute for the select element",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the select",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the select is disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "has-error",
+              "description": "Whether the select is in an error state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text for the select",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": "CustomEvent",
+              "description": "Fired when selection changes"
+            },
+            {
+              "name": "input",
+              "type": "CustomEvent",
+              "description": "Fired when input value changes"
+            },
+            {
+              "name": "focus",
+              "type": "CustomEvent",
+              "description": "Fired when select receives focus"
+            },
+            {
+              "name": "blur",
+              "type": "CustomEvent",
+              "description": "Fired when select loses focus"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name attribute for the select element",
+                "type": "string"
+              },
+              {
+                "name": "id",
+                "description": "The id attribute for the select element",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the select",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the select is disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "hasError",
+                "description": "Whether the select is in an error state",
+                "type": "boolean"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text for the select",
+                "type": "string"
+              },
+              {
+                "name": "options",
+                "description": "Array of options for the select",
+                "type": "SelectOption[]"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "type": "CustomEvent",
+                "description": "Fired when selection changes"
+              },
+              {
+                "name": "input",
+                "type": "CustomEvent",
+                "description": "Fired when input value changes"
+              },
+              {
+                "name": "focus",
+                "type": "CustomEvent",
+                "description": "Fired when select receives focus"
+              },
+              {
+                "name": "blur",
+                "type": "CustomEvent",
+                "description": "Fired when select loses focus"
+              }
+            ]
+          }
+        },
         {
           "name": "primer-spinner",
           "description": "Spinner component with configurable size and color\nAdapted to work both standalone and within input components\n---\n",
@@ -663,6 +783,50 @@
             ]
           }
         },
+        {
+          "name": "primer-billing-address",
+          "description": "BillingAddressComponent provides a form for collecting billing address information.\n\nConfiguration is exclusively server-side via SDK Core's checkoutModules. Field visibility\nis determined by the BILLING_ADDRESS module in the client session configuration.\n---\n\n\n### **Events:**\n - **primer-billing-address-change** - Fired when form data changes\n- **primer-billing-address-submit** - Fired when form is submitted\n\n### **Methods:**\n - **validateForSubmission(): _Promise<boolean>_** - Public method to validate billing address fields\nCalled by the parent form (card-form) when submitting\nReturns true if billing address is valid\nNote: Does NOT call setBillingAddress API - that happens after card validation\n- **submitToSDK(): _Promise<boolean>_** - Public method to submit billing address to SDK Core\nCalled by parent form ONLY after both card and billing address validation pass\n\nNote: headlessUtils is guaranteed to be available when this method is called,\nas the component only renders (and becomes interactive) after initialization task completes.",
+          "doc-url": "",
+          "attributes": [],
+          "events": [
+            {
+              "name": "primer-billing-address-change",
+              "type": "CustomEvent",
+              "description": "Fired when form data changes"
+            },
+            {
+              "name": "primer-billing-address-submit",
+              "type": "CustomEvent",
+              "description": "Fired when form is submitted"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "configuration",
+                "description": "Configuration from SDK Core containing checkoutModules configuration",
+                "type": "ConfigurationContextType"
+              },
+              {
+                "name": "headlessUtils",
+                "description": "Headless SDK utilities for API methods like setBillingAddress",
+                "type": "HeadlessUtilsContextType"
+              }
+            ],
+            "events": [
+              {
+                "name": "primer-billing-address-change",
+                "type": "CustomEvent",
+                "description": "Fired when form data changes"
+              },
+              {
+                "name": "primer-billing-address-submit",
+                "type": "CustomEvent",
+                "description": "Fired when form is submitted"
+              }
+            ]
+          }
+        },
         {
           "name": "primer-card-form",
           "description": "CardFormComponent serves as a container for card input components.\nIt handles form submission, validation, and provides context to child components.\n---\n",
@@ -820,51 +984,6 @@
             "events": []
           }
         },
-        {
-          "name": "primer-native-payment",
-          "description": "Component for rendering native payment buttons (Apple Pay, Google Pay, PayPal)\nwith proper height calculations based on design system variables.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "paymentMethod",
-              "value": { "type": "InitializedPaymentMethod | undefined" }
-            },
-            {
-              "name": "paymentManagers",
-              "value": {
-                "type": "InitializedManagersMap",
-                "default": "new Map()"
-              }
-            },
-            {
-              "name": "computedStyles",
-              "value": {
-                "type": "CSSStyleDeclaration | null",
-                "default": "null"
-              }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "paymentMethod",
-                "type": "InitializedPaymentMethod | undefined"
-              },
-              { "name": "paymentManagers", "type": "InitializedManagersMap" },
-              {
-                "name": "computedStyles",
-                "type": "CSSStyleDeclaration | null"
-              },
-              { "name": "disabled", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "primer-payment-method",
           "description": "\n---\n",
@@ -1129,7 +1248,7 @@
               "value": { "type": "string" }
             },
             {
-              "name": "headlessInstance",
+              "name": "headlessUtils",
               "value": { "type": "HeadlessUtilsContextType", "default": "null" }
             },
             {
@@ -1163,10 +1282,7 @@
                 "description": "The button text to display.\nFalls back to localized default if not explicitly set.",
                 "type": "string"
               },
-              {
-                "name": "headlessInstance",
-                "type": "HeadlessUtilsContextType"
-              },
+              { "name": "headlessUtils", "type": "HeadlessUtilsContextType" },
               { "name": "clientOptions", "type": "ClientOptionsContextType" },
               { "name": "sdkState", "type": "SdkStateContextType" },
               { "name": "cardFormContext", "type": "CardFormContext | null" },
@@ -1439,6 +1555,108 @@
             "events": []
           }
         },
+        {
+          "name": "primer-apple-pay",
+          "description": "Apple Pay component with standard button container rendering.\n\nApple Pay uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options\n- Uses updateOverlayForContainer for disabled state\n- Simpler than Google Pay's shadow root approach\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "primer-google-pay",
+          "description": "Google Pay component with shadow root rendering for full-width button support.\n\nGoogle Pay requires special rendering logic:\n- Renders directly to shadow root (not button container)\n- Does NOT render .native-button-container div\n- Passes shadowRoot: true in render options\n- Requires retry logic for async button rendering\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "primer-paypal",
+          "description": "PayPal component with standard button container rendering.\n\nPayPal uses the standard button container approach:\n- Renders to a button container div (not shadow root)\n- Passes buttonHeight in render options with PayPal SDK constraints (25-55px)\n- Uses updateOverlayForContainer for disabled state\n- Warns if height exceeds maximum allowed by PayPal SDK\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "paymentMethod",
+              "value": { "type": "InitializedPaymentMethod | undefined" }
+            },
+            {
+              "name": "paymentManagers",
+              "value": {
+                "type": "InitializedManagersMap",
+                "default": "new Map()"
+              }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "paymentMethod",
+                "type": "InitializedPaymentMethod | undefined"
+              },
+              { "name": "paymentManagers", "type": "InitializedManagersMap" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "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",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@primer-io/primer-js",
   "description": "Primer Composable Checkout is a web component-based SDK for building secure, customizable, and PCI-compliant checkout experiences. Designed with a modular architecture, it integrates seamlessly with any JavaScript framework and supports multiple payment methods.",
   "license": "BSD-3-Clause",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/primer-loader.js",
   "types": "./dist/primer-loader.d.ts",
@@ -11,7 +11,10 @@
     "src/primer-checkout.ts",
     "**/*.styles.ts",
     "src/atoms/**/*.component.ts",
-    "src/containers/**/*.component.ts"
+    "src/atoms/**/*.ts",
+    "src/containers/native-payment/components/**/*.ts",
+    "src/containers/**/*.component.ts",
+    "src/containers/**/*.ts"
   ],
   "publishConfig": {
     "access": "public"