@vio-live/web-sdk 0.26.1 → 0.28.0

package/dist/{tokens-Bn7fK9ta.d.ts → tokens-y0KzN7bP.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;
@@ -293,11 +299,21 @@ declare class VioProductDetail extends LitElement {
     private applePayHandle;
     /** 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;
@@ -390,6 +406,23 @@ declare class VioProductDetail extends LitElement {
     /** The seller's Company name; the brand when there is none; nothing while asking. */
     private headerName;
     private loadSeller;
+    /**
+     * 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 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;
@@ -429,6 +462,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;
@@ -474,6 +509,8 @@ declare class VioCart extends LitElement {
     private startVippsExpressOrCheckout;
     /** Stripe — opens the checkout with Stripe preselected. */
     private onStripe;
+    /** The name over a sponsor's lines: the brand's display name by the one rule, else what the cart kept. */
+    private sponsorLabel;
     private get totalAcrossSponsors();
     private get primaryCurrency();
     private onIncrement;
@@ -520,6 +557,16 @@ declare class VioCheckout extends LitElement {
     private verifyingReturn;
     /** The checkout whose confirmation is on screen — see fillOrderNumber. */
     private confirmedCheckoutId;
+    /**
+     * Whose order is being confirmed (or verified, back from a payment page):
+     * the CHECKOUT's sponsor — from the return URL (`vio_sponsor`,
+     * `checkout_id`) or the state it was paid in — and how it was named before
+     * the cart was cleared. The header and the confirmation name it; never the
+     * page's attribution. See checkoutSponsorIdentity.
+     */
+    private orderSponsor;
+    /** The bootstrap that names the checkout's sponsor was asked for (once per checkout) — see watchSponsorBootstrap. */
+    private sponsorBootstrapAsked;
     /** Snapshot of the placed order, for the confirmation screen. */
     private confirmedOrder;
     /** Active Klarna Payments widget handle + the subtotal it was mounted for. */
@@ -645,6 +692,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();
     /**
@@ -834,7 +883,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. */
@@ -844,8 +895,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
@@ -871,6 +923,42 @@ declare class VioCheckout extends LitElement {
     /** Total to charge — items + shipping (express). */
     private payTotalLabel;
     render(): lit_html.TemplateResult<1>;
+    /**
+     * Remember whose order this is and how it is named right now, before the
+     * cart that names it is cleared. Whose: the sponsor this tab remembered for
+     * the checkout when it was created (exact for that checkout id), else the
+     * one given (the return URL's `vio_sponsor`, the state it was paid in),
+     * else the open state's — a return without `vio_sponsor` (Qliro, Walley)
+     * re-opens the state with whichever cart comes first, which is a guess.
+     */
+    private setOrderSponsor;
+    /**
+     * Who this checkout is with, as a shopper sees it: the order being
+     * confirmed / verified (`orderSponsor`), else the open checkout's own
+     * sponsor (`checkoutState.sponsorId`) — named by `Vio.sponsorIdentity`,
+     * which falls back to this tab's memory of the checkout and the cart; the
+     * name taken before the cart was cleared last. Never the page's
+     * attribution. `null` when nothing names it.
+     */
+    private checkoutSponsorIdentity;
+    /**
+     * `{ sponsor }` for the payment event — the same sponsor the screen names
+     * (`orderSponsor`, set by every path right before it emits): named now, else
+     * as named before the cart was cleared; `{}` when nothing names it.
+     */
+    private sponsorOfOrder;
+    /**
+     * Ask once per checkout for the bootstrap when it is not there yet and a
+     * sponsor has to be named (a redirect return renders before it), then
+     * render again — the name and the logo appear when it lands.
+     */
+    private watchSponsorBootstrap;
+    /**
+     * The checkout's sponsor in the header — «Du handler hos <logo|name>»
+     * («Du har handlet hos» on a provider's receipt). Not on our own
+     * confirmation, which says it in its body.
+     */
+    private renderTopbarSponsor;
     /**
      * The provider's receipt on its own. It must not depend on the cart: the
      * payment step is rendered from the cart, and clearing the cart after a
@@ -1177,6 +1265,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-Bn7fK9ta.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-y0KzN7bP.js';
 import 'lit-html';
 import 'lit';
 

package/dist/ui/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements } from '../chunk-6Q2M3MIK.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-6Q2M3MIK.js';
-import '../chunk-NXIYIY2D.js';
+import { registerVioElements } from '../chunk-Q2NALS7P.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-Q2NALS7P.js';
+import '../chunk-AFJ5M53F.js';
 
 // src/ui/index.ts
 registerVioElements();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.26.1",
+  "version": "0.28.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",