@vio-live/web-sdk 0.4.0 → 0.4.2

package/README.md

@@ -97,6 +97,43 @@ function Shop() {
 
 Wrappers: `VioProduct`, `VioProductCarousel`, `VioProductDetail`, `VioCart`, `VioCheckout`.
 
+## Theming
+
+Every component reads its colors and fonts from `--vio-*` CSS custom properties
+(shadow DOM inherits these from the light DOM, so this reaches every component,
+including the Apple Pay/Klarna/Vipps panels). `applyVioTheme` is the one
+supported way to override them — don't set `--vio-*` properties by hand, and
+don't rely on the internal variable names staying stable across versions:
+
+```ts
+import { applyVioTheme } from '@vio-live/web-sdk/ui' // or '/react'
+
+applyVioTheme({
+  colorAccent: '#0044ff',
+  colorText: '#111111',
+  fontSerif: '"Playfair Display", Georgia, serif',
+  fontSans: '"Inter", sans-serif',
+})
+```
+
+A curated set on purpose — colors + fonts, not the full internal token list
+(spacing/radius/sizes stay implementation detail). Call it again any time
+(e.g. after a user picks a different brand color in a settings UI) — pass
+`null`/`undefined` for a key to revert it to the SDK default instead of
+leaving a stale override behind:
+
+```ts
+applyVioTheme({ colorAccent: null }) // back to the default #c14a3b
+```
+
+By default it sets the override on `document.documentElement` (`:root`, the
+whole page). Pass a second argument to scope it to one element instead —
+useful if you show multiple differently-branded sponsors on the same page:
+
+```ts
+applyVioTheme({ colorAccent: '#ff6600' }, document.getElementById('sponsor-2'))
+```
+
 ## Headless / SSR
 
 The root and `/core` entries export the framework-agnostic core with **no DOM side-effects** — SSR-safe and **tree-shakeable** (importing one helper pulls only that helper, ~0.5 kB):

package/dist/{chunk-V5ZQG2H5.js → chunk-D6IA4ZWL.js}

@@ -1,4 +1,4 @@
-import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice, KLARNA_SHIPPING_OPTIONS } from './chunk-NP2KCM7X.js';
+import { Vio, __decorateClass, primaryImageUrl, displayPrice, getGlobalCurrency, formatPrice } from './chunk-KMIARP6X.js';
 import { LitElement, css, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 
@@ -2730,7 +2730,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.klarnaCategories = [];
     this.klarnaSelectedCat = "";
     this.klarnaAuthorizing = false;
-    this.selectedShipping = KLARNA_SHIPPING_OPTIONS.find((o) => o.preselected)?.id ?? KLARNA_SHIPPING_OPTIONS[0]?.id ?? "";
+    this.selectedShipping = "";
     this.availableShippingsList = [];
     this.availableMethods = null;
     this.stripeLoading = false;
@@ -3080,10 +3080,13 @@ var _VioCheckout = class _VioCheckout extends LitElement {
       gap: 12px;
       margin-top: 4px;
     }
+    /* Klarna remembers the customer's preferred payment_method_category
+     * server-side across sessions/browsers — exposing a category-switcher
+     * chip UI on top of that just confuses users. Hidden per Alan's
+     * 2026-08-18 cross-browser investigation; the switching logic (onKlarnaCategory)
+     * stays wired for when/if this becomes configurable again. */
     .klarna-cats {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      display: none !important;
     }
     .klarna-cat {
       flex: 1 1 auto;
@@ -3496,7 +3499,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     super.disconnectedCallback();
   }
   updated(changed) {
-    if (changed.has("open") && this.open && this.availableShippingsList.length === 0) {
+    if (changed.has("open") && this.open && this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
     void this.mountKlarnaIfNeeded();
@@ -3508,7 +3511,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   show() {
     this.open = true;
-    if (this.availableShippingsList.length === 0) {
+    if (this.items.length > 0 && this.availableShippingsList.length === 0) {
       void this.loadAvailableShippings();
     }
   }
@@ -3516,6 +3519,7 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   async loadAvailableShippings() {
     const spId = this.checkoutState?.sponsorId;
     if (!spId) return;
+    if (this.items.length === 0) return;
     if (this.loadingShippings) return;
     this.loadingShippings = true;
     this.shippingsAttempted = true;
@@ -3602,6 +3606,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     if (!this.klarnaAvailable || !this.open || !this.checkoutState) return;
     if (this.checkoutState.paymentMethod !== "klarna" && !this.express) return;
     if (this.klarnaMounting) return;
+    if (this.items.length > 0 && this.availableShippingsList.length === 0 && !this.shippingsAttempted) {
+      await this.loadAvailableShippings();
+    }
     const amount = this.checkoutState.subtotal;
     if (this.klarnaHandle && this.klarnaMountedAmount === amount && this.klarnaMountedShipping === this.selectedShipping) {
       return;
@@ -3649,9 +3656,9 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.klarnaSelectedCat = "";
     this.klarnaAuthorizing = false;
   }
-  /** Shippings in effect: backend per-supplier when loaded, static otherwise. */
+  /** Shippings in effect: backend per-supplier when loaded. */
   get shippingList() {
-    return this.availableShippingsList.length > 0 ? this.availableShippingsList : KLARNA_SHIPPING_OPTIONS;
+    return this.availableShippingsList;
   }
   /** Selected shipping option (express flow). */
   get shippingOption() {
@@ -3679,8 +3686,11 @@ var _VioCheckout = class _VioCheckout extends LitElement {
   }
   /** Switch the Klarna widget to a different payment_method_category. */
   async onKlarnaCategory(identifier) {
-    if (!this.klarnaHandle || this.klarnaSelectedCat === identifier) return;
+    if (!this.klarnaHandle) return;
     this.klarnaSelectedCat = identifier;
+    if (typeof console !== "undefined") {
+      console.log("[VioCheckout] User selected payment_method_category:", identifier);
+    }
     try {
       await this.klarnaHandle.load(identifier);
     } catch (err) {
@@ -3695,8 +3705,12 @@ var _VioCheckout = class _VioCheckout extends LitElement {
     this.paymentError = null;
     this.paymentNotice = null;
     this.klarnaAuthorizing = true;
+    const cat = this.klarnaSelectedCat || this.klarnaHandle.selected || "pay_now";
+    if (typeof console !== "undefined") {
+      console.log("[VioCheckout] Authorizing Klarna with payment_method_category:", cat);
+    }
     try {
-      await this.klarnaHandle.authorize();
+      await this.klarnaHandle.authorize(cat);
     } finally {
       this.klarnaAuthorizing = false;
     }
@@ -4370,5 +4384,5 @@ function registerVioElements() {
 }
 
 export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements };
-//# sourceMappingURL=chunk-V5ZQG2H5.js.map
-//# sourceMappingURL=chunk-V5ZQG2H5.js.map
+//# sourceMappingURL=chunk-D6IA4ZWL.js.map
+//# sourceMappingURL=chunk-D6IA4ZWL.js.map