@vio-live/web-sdk 0.27.0 → 0.29.0

package/dist/{tokens-CihuCU2l.d.ts → tokens-Dok4d21V.d.ts}

@@ -277,6 +277,12 @@ declare class VioProductDetail extends LitElement {
     private selectedOptions;
     private quantity;
     private activeImageIndex;
+    /** The thumbnail row is wider than its box (arrows shown with a mouse). */
+    private thumbsOverflow;
+    private thumbsAtStart;
+    private thumbsAtEnd;
+    /** The top bar's logo file is square-ish: a mark, so its name goes beside it. */
+    private logoSquare;
     private adding;
     /** Apple Pay actually usable (real Stripe + registered domain) — set on load. */
     private applePayOk;
@@ -291,13 +297,27 @@ declare class VioProductDetail extends LitElement {
     private optMapCache;
     /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
     private applePayHandle;
+    /** The amount `applePayHandle`'s sheet shows (product × quantity when it was prepared). */
+    private applePayAmount;
+    /** The amount the latest preparation was asked for — a newer one supersedes it. */
+    private applePayAskedFor;
     /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
     private readonly dialogFocus;
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the top bar down. */
+    private readonly bottomSheet;
     private boundProductClick;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    private thumbRow;
+    /** Arrows only when the row overflows; each one off at its own end. */
+    private measureThumbs;
+    private onThumbsScroll;
+    /** One arrow press moves most of a visible row. */
+    private scrollThumbs;
+    /** The selected thumbnail is always visible: the row scrolls to it, the page never does. */
+    private revealActiveThumb;
     show(): void;
     close(): void;
     private fetchProduct;
@@ -378,26 +398,51 @@ declare class VioProductDetail extends LitElement {
     private loadVippsButton;
     private buyWithVipps;
     private startVippsExpressOrCheckout;
+    /** The ordinary way in, Vipps preselected: the host opens the checkout on `vio:checkout-open`. */
+    private openCheckoutWithVipps;
+    /** The ordinary way in with a method preselected: the host opens the checkout on `vio:checkout-open`. */
+    private openCheckoutWith;
     /** Buy with Stripe — opens the checkout with Stripe preselected. */
     private buyWithStripe;
+    /** Prepare the Apple Pay sheet for this product × quantity; the newest preparation wins. */
+    private prepareApplePaySheet;
     /**
      * Express buy with Apple Pay. Runs synchronously inside the click so the
      * Apple Pay sheet keeps the user gesture: add to cart → open checkout (sets
      * state) → launch the sheet. On authorize, `payment-complete` drives the
      * confirmation drawer (same path as the in-checkout Apple Pay button).
+     *
+     * The sheet's amount is fixed before the tap (Apple blocks a sheet opened
+     * after an await, so it cannot wait for the server's cart), while the
+     * charge is the sponsor's WHOLE cart. So the sheet opens only when it shows
+     * what will be charged: an empty cart, and a sheet prepared for this
+     * product × quantity. Otherwise — lines already in the cart (as with Vipps,
+     * see buyWithVipps), or a quantity whose sheet is still being prepared —
+     * the product is added and the checkout opens with Apple Pay preselected:
+     * every line and the total on screen, and its own Apple Pay button pays
+     * that total.
      */
     private buyWithApplePay;
     /** The seller's Company name; the brand when there is none; nothing while asking. */
     private headerName;
     private loadSeller;
     /**
-     * Who sells the product: the brand of the sponsor it was fetched with —
-     * its logo, with the name as `alt`. Without a logo that loads, the topbar
-     * already names the seller (its Company name, else the brand), so the name
-     * goes here only when the topbar names nobody once the seller is known —
-     * never the same name twice. Nothing at all when no identity is known.
+     * Who sells the product, top left beside the close (Mote & Livsstil,
+     * 2026-10-22): the logo of the sponsor the product was fetched with — the
+     * product's brand, never the article's — with its name as `alt`; without a
+     * logo that loads, its name; without an identity, the seller's Company name
+     * (or the product's brand) once known. Size: --vio-detail-logo-height.
+     */
+    private renderTopbarSponsor;
+    /**
+     * Under the buy buttons: «Du handler direkte hos {brand}.» — the brand the
+     * product was fetched with (the sponsor; its Company name or the product's
+     * brand when no identity is known), never the article's. Nothing when no
+     * name is known.
      */
-    private renderSponsorHeader;
+    private renderSellerNote;
+    /** Square-ish logo (4:5 to 5:4) → the top bar shows the name beside it. */
+    private measureLogo;
     render(): lit_html.TemplateResult<1>;
     private renderBody;
     private renderOptionPickers;
@@ -437,6 +482,8 @@ declare class VioCart extends LitElement {
     private loadingPaymentMethods;
     /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
     private readonly dialogFocus;
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the header down. */
+    private readonly bottomSheet;
     private boundOnCartChange;
     static styles: lit.CSSResult;
     connectedCallback(): void;
@@ -502,6 +549,12 @@ declare class VioCheckout extends LitElement {
     open: boolean;
     heading: string;
     shippingLabel: string;
+    /**
+     * Vipps Express: the shopper picks the delivery inside Vipps, so with Vipps
+     * selected our own shipping rate is not part of the total and the summary
+     * says the shipping is chosen in Vipps (Angelo, 2026-10-24).
+     */
+    private vippsShipsInApp;
     /** Express mode — render only the Klarna widget (no address form / method grid). */
     express: boolean;
     private checkoutState;
@@ -665,6 +718,8 @@ declare class VioCheckout extends LitElement {
      * in flight — Tab stays inside, focus returns to the opener.
      */
     private readonly dialogFocus;
+    /** Phones: the page behind is locked, and the sheet closes by pulling the bar or the top bar down — not mid-payment. */
+    private readonly bottomSheet;
     /** A payment is being started or confirmed right now: the overlay must not close under it. */
     private get paymentInFlight();
     /**
@@ -854,7 +909,9 @@ declare class VioCheckout extends LitElement {
      * `visibilitychange`) or the element leaves, the event goes out at once
      * without the reference. Exactly one event per call. `afterwards` runs
      * right after the event, so a path keeps the order it always had (the cart
-     * is cleared after the event).
+     * is cleared after the event). When that answer already has Vio's order
+     * number, the event carries it too (`orderNumber`): it is the purchase's
+     * `order_id`, and analytics need not ask again.
      */
     private emitPaymentSuccess;
     /** Whether asking the checkout for the buyer reference can still help. */
@@ -864,8 +921,9 @@ declare class VioCheckout extends LitElement {
      * failed or has neither the reference nor an order yet (the webhook has not
      * written the checkout), again at 1.2 s — all within 2.5 s. An order
      * without a reference is a settled answer: the backend has none, asking
-     * again cannot help. `undefined` when the time is up, when the answer
-     * stopped mattering (`stopped()`) or on failure.
+     * again cannot help. Whatever the answer said of the order number comes
+     * back with it. `{}` when the time is up, when the answer stopped mattering
+     * (`stopped()`) or on failure.
      */
     private askBuyerRef;
     /** Waits between asks for the Vio order number: the order is often born a
@@ -886,6 +944,8 @@ declare class VioCheckout extends LitElement {
      * express always has one; the normal flow has one once the backend
      * shippings loaded (the choice IS persisted on the cart and charged). */
     private shippingMajor;
+    /** Vipps is the method and it runs as Express: the delivery is chosen in Vipps. */
+    private vippsChoosesShipping;
     /** The rate the summary names — Qliro's own pick while Qliro is the method. */
     private summaryShippingName;
     /** Total to charge — items + shipping (express). */
@@ -1233,6 +1293,68 @@ interface VioThemeOverrides {
     spaceMd?: string;
     spaceLg?: string;
     spaceXl?: string;
+    /** Product detail panel width on desktop (default `440px`). */
+    detailWidth?: string;
+    /** Side padding of the detail (default the `lg` space, `24px`). */
+    detailPaddingX?: string;
+    /** Height of the selling brand's logo in the detail's top bar (default `44px`; width follows its proportions). A square logo gets the brand's name beside it. */
+    detailLogoHeight?: string;
+    /** Zoom on that logo inside its box (default `1`); e.g. `1.8` crops the white around a mark in a square file. */
+    detailLogoZoom?: string;
+    /** Product name size in the detail. */
+    detailTitleSize?: string;
+    /** Price size in the detail (default `24px`). */
+    detailPriceSize?: string;
+    /** How the main image fits its box: `cover` (fills it, crops the overflow — default) or `contain` (whole image, bars where the shapes differ). */
+    detailImageFit?: string;
+    /** Main image box proportion, the same for every image so the panel never jumps: `4 / 5` (default), `1 / 1`, `3 / 4`, or `auto` (each image its own). */
+    detailImageAspect?: string;
+    /** Cap on the main image's height (default `85vh`). */
+    detailImageMaxHeight?: string;
+    /** Zoom on the main image (default `1`); e.g. `1.15` to crop a white margin baked into the file. */
+    detailImageZoom?: string;
+    /** Side margin of the main image (default: the panel's padding, aligned with the text); `0` = edge to edge. */
+    detailImageInset?: string;
+    /** Background behind the main image (default the muted surface). */
+    detailImageBg?: string;
+    /** Thumbnail size (default `64px`). One row, scrolls sideways. */
+    detailThumbSize?: string;
+    /** Space between thumbnails (default `8px`). */
+    detailThumbGap?: string;
+    /** Thumbnail corners (default `0`). */
+    detailThumbRadius?: string;
+    /** Border of the selected thumbnail (default the text colour). */
+    detailThumbActiveColor?: string;
+    /** Height (and min width) of a size / option button (default `36px`). */
+    detailOptionHeight?: string;
+    /** Space between option buttons (default `6px`). */
+    detailOptionGap?: string;
+    /** Option button corners (default `0`). */
+    detailOptionRadius?: string;
+    /** `wrap` (default, several lines) or `nowrap` (one line that scrolls). */
+    detailOptionWrap?: string;
+    /** Height of the quantity stepper and «Legg i handlekurv» (default `52px`). */
+    detailButtonHeight?: string;
+    /** Corners of «Legg i handlekurv» (default `0`). */
+    detailButtonRadius?: string;
+    /** `sticky` or `static`: whether the buy zone (Vipps, quantity, add to cart) stays at the bottom of the panel while scrolling. Default: `static` on phones, `sticky` on desktop (with the description above it). */
+    detailBuyPosition?: string;
+    /** Shadow over a sticky buy zone, e.g. `0 -8px 16px rgba(0,0,0,.06)`. */
+    detailBuyShadow?: string;
+    /** Cart drawer width on desktop (default `440px`). */
+    cartWidth?: string;
+    /** Checkout panel width on desktop (default `440px`). */
+    checkoutWidth?: string;
+    /** Height of the brand's logo on the confirmation (default `40px`). */
+    confirmLogoHeight?: string;
+    /** «Takk for bestillingen!» size (default `24px`). */
+    confirmTitleSize?: string;
+    /** Background of the confirmation's check mark (default green). */
+    confirmCheckBg?: string;
+    /** Background of the «Åpner Vipps …» overlay (default translucent white). */
+    redirectBg?: string;
+    /** Spinner colour of that overlay (default Vipps orange). */
+    redirectSpinner?: string;
 }
 /**
  * Apply (or clear) theme overrides. Pass `null`/`undefined` for a key to

package/dist/ui/index.d.ts

@@ -1,4 +1,4 @@
-export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-CihuCU2l.js';
+export { V as VioCart, a as VioCheckout, b as VioProduct, c as VioProductCarousel, d as VioProductDetail, e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-Dok4d21V.js';
 import 'lit-html';
 import 'lit';
 

package/dist/ui/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements } from '../chunk-GLAKUYQA.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-GLAKUYQA.js';
-import '../chunk-HJRIPCWB.js';
+import { registerVioElements } from '../chunk-L6YYYKQK.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-L6YYYKQK.js';
+import '../chunk-AG4G2S2M.js';
 
 // src/ui/index.ts
 registerVioElements();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,8 @@
   "files": [
     "dist",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "tsup",