@vio-live/web-sdk 0.33.0 → 0.36.0

package/dist/{tokens-B7GVA_qB.d.ts → tokens-BGzSC3vK.d.ts}

@@ -1,6 +1,7 @@
 import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement } from 'lit';
+import { D as DetailLayout, A as AppliedDetailLayout } from './detail-layout-BI556w8p.js';
 
 declare class VioProduct extends LitElement {
     /** Brand label shown at the top (uppercase, gray, small). */
@@ -302,6 +303,15 @@ declare class VioProductDetail extends LitElement {
      * say). Off by default: the toast shows.
      */
     noAddedToast: boolean;
+    /**
+     * «Kjøp nå med Vipps» when the brand's cart already has lines: `express`
+     * (default) adds the product and pays the WHOLE cart with Vipps Express —
+     * the line under the button says how many items and what total — or
+     * `checkout`: adds it and opens our checkout with Vipps preselected (as in
+     * 0.31–0.34). An empty cart is Express either way. Unset = the theme's
+     * `vippsCartPayment` (`--vio-vipps-cart-payment`).
+     */
+    vippsCartPayment: string;
     /**
      * How the images show: `thumbs` (one image, thumbnails under it — the
      * default) or `carousel` (every image in one swipeable row, no thumbnails:
@@ -315,6 +325,11 @@ declare class VioProductDetail extends LitElement {
      * Unset = the theme's `detailDescriptionMode` (`--vio-detail-description-mode`).
      */
     descriptionMode: string;
+    /**
+     * Heading of the description fold (default «Beskrivelse»), e.g.
+     * «Produktbeskrivelse». Unset = the page's `Vio.configureDetail({ descriptionLabel })`.
+     */
+    descriptionLabel: string;
     /**
      * The brand's promises, shown in a row under the buy zone. By default the
      * brand's own (dashboard Settings → Brand, in the bootstrap); this list
@@ -336,6 +351,26 @@ declare class VioProductDetail extends LitElement {
      * Commerce (which wins). A carrier with neither gets the line icon.
      */
     carrierLogos: Record<string, string>;
+    /**
+     * The order of the sections below the gallery (0.34): `{ id, revision,
+     * sections, experimentId?, variantId? }` (attribute: the same as JSON). Wins
+     * over `Vio.configureDetail({ layout })`; unset = the page's, else the
+     * default. Section ids: `brand`, `title`, `stock`, `price`, `options`,
+     * `purchase`, `highlights`, `description`, `shippingReturns`. See README
+     * «Section order and layout tracking».
+     */
+    layout: DetailLayout | null;
+    /** The layout the detail renders with now (resolved before each render). */
+    private layoutNow;
+    /** The product and layout `vio:detail-layout-applied` was last said for. */
+    private appliedFor;
+    private unsubscribeLayout;
+    /**
+     * The layout this detail applies (0.34): `{ id, revision, experimentId?,
+     * variantId?, sections, adjusted, source }` — `source` is `element` (its own
+     * `layout`), `global` (`Vio.configureDetail`) or `default`. A copy.
+     */
+    get appliedLayout(): AppliedDetailLayout;
     private readonly slotRegistration;
     /** What the click that opened the detail carried ('' when nothing), and for which product. */
     private eventSlot;
@@ -448,11 +483,19 @@ declare class VioProductDetail extends LitElement {
     /** 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;
+    static styles: lit.CSSResult[];
+    /** The cart changed (another tab, the drawer): the line under Vipps counts it again. */
+    private boundCartChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
     willUpdate(changed: Map<string, unknown>): void;
+    /**
+     * `vio:detail-layout-applied` (bubbles, composed), with the applied layout,
+     * each time a product renders with a layout it has not been shown with yet:
+     * every open of a product, and every change of layout while it is open.
+     */
+    private announceLayout;
     /** An option as the element says it, else as the theme's custom property says it (lower case, unquoted). */
     private themeChoice;
     /** The attribute wins; else the theme's `--vio-detail-gallery`; else thumbnails. */
@@ -592,11 +635,24 @@ declare class VioProductDetail extends LitElement {
     private loadVippsButton;
     private buyWithVipps;
     /**
-     * The Vipps button will open the app with Express (see buyWithVipps): the
-     * brand has Express on, and this brand's cart is empty — with lines in it
-     * the checkout opens first.
+     * The Vipps button will open the app with Express for this product alone
+     * (see buyWithVipps): the brand has Express on, and this brand's cart is
+     * empty.
      */
     private vippsGoesStraightToApp;
+    /** This brand's cart already has lines. */
+    private cartHasLines;
+    /** `vipps-cart-payment`, else the theme's, else `express`. */
+    private vippsCartMode;
+    /**
+     * What the Vipps button will pay when the brand's cart already has lines
+     * (`express` mode): every unit in the cart plus this product at the chosen
+     * quantity, and their total, as the cart sums it (shipping is chosen in
+     * Vipps). null with an empty cart, or in `checkout` mode.
+     */
+    private wholeCartToPay;
+    /** The line under the Vipps button: what is paid (a cart with lines) or what happens in the app (Express, empty cart). */
+    private renderVippsNote;
     private startVippsExpressOrCheckout;
     /** The ordinary way in, Vipps preselected: the host opens the checkout on `vio:checkout-open`. */
     private openCheckoutWithVipps;
@@ -616,8 +672,8 @@ declare class VioProductDetail extends LitElement {
      * 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 —
+     * product × quantity. Otherwise — lines already in the cart, 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.
@@ -640,6 +696,8 @@ declare class VioProductDetail extends LitElement {
      * the heading, the text or «Les mer» opens the rest (Angelo, 2026-10-28).
      * A description that fits in the preview has nothing to open.
      */
+    /** The description fold's heading: this element's, else the page's, else «Beskrivelse». */
+    private descriptionHeading;
     private renderDescription;
     /** Is the preview hiding part of the text? Measured with the preview applied. */
     private measureDescription;
@@ -674,6 +732,31 @@ declare class VioProductDetail extends LitElement {
     private measureLogo;
     render(): lit_html.TemplateResult<1>;
     private renderBody;
+    /**
+     * The info column in the applied layout's order (0.34) — the real DOM in
+     * that order, never CSS `order`, the same on every screen. The default
+     * order renders exactly the column before 0.34: brand, `.headline` (the
+     * title row with the stock, the price row), then `.purchase` — `.buy` with
+     * the options first — and highlights, description, «Frakt & retur» in it.
+     *
+     * A run of `title` / `stock` / `price` is one `.headline`; `title`
+     * right before `stock` share the title row. `options` right before
+     * `purchase` live in `.buy` (a pinned buy zone keeps them); elsewhere they
+     * are a block of their own. Everything after `purchase` goes in
+     * `.purchase`, as the description does by default: a pinned buy zone may
+     * slide over it, never over what comes before.
+     */
+    private renderSections;
+    /** A run of title / stock / price: one `.headline`. */
+    private renderHeadline;
+    /** One section that is not the headline nor the purchase group. */
+    private renderSection;
+    /**
+     * The SDK-managed buy group, never split: «Frakt fra…», Vipps / Apple Pay /
+     * the other ways to pay, quantity + «Legg i handlekurv», «Du handler direkte
+     * hos …». The options when they come right before it; then what follows it.
+     */
+    private renderPurchase;
     private renderOptionPickers;
     /** Best-effort HTML strip for description. */
     private stripHtml;
@@ -690,6 +773,13 @@ declare class VioCart extends LitElement {
     heading: string;
     emptyLabel: string;
     subtotalLabel: string;
+    /**
+     * What the Vipps button does: `express` (default) — Vipps Express for the
+     * sponsor's whole cart, straight to the app — or `checkout` — our checkout
+     * with Vipps preselected (`vio:checkout-open`, as in 0.31–0.34). Unset =
+     * the theme's `vippsCartPayment` (`--vio-vipps-cart-payment`).
+     */
+    vippsCartPayment: string;
     private carts;
     private itemCount;
     /** True when Apple Pay is usable (Safari + device + Stripe configured). */
@@ -700,6 +790,8 @@ declare class VioCart extends LitElement {
     /** Asking for the brand's methods: a neutral placeholder instead of every method's button (see methodEnabled). */
     private methodsLoading;
     private vippsOfficial;
+    /** A Vipps payment is being started from here: one at a time. */
+    private vippsStarting;
     /** Whether the method lookup has been attempted — see boundOnCartChange. */
     private paymentMethodsAttempted;
     /** Set after an Apple Pay express purchase — switches the drawer to the
@@ -716,7 +808,7 @@ declare class VioCart extends LitElement {
     /** 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;
+    static styles: lit.CSSResult[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     close(): void;
@@ -744,7 +836,6 @@ declare class VioCart extends LitElement {
      * (betalingsmetode). The host's checkout-open handler closes this cart and
      * opens <vio-checkout> in express mode with Klarna preselected. */
     private onKlarnaExpress;
-    /** Vipps — opens the checkout with Vipps preselected. */
     /**
      * Open the checkout without preselecting a method.
      *
@@ -755,13 +846,27 @@ declare class VioCart extends LitElement {
      */
     private onCheckout;
     /**
-     * Vipps from the cart: the checkout opens with Vipps preselected — the
-     * standard path, where our form collects name, address, mobile and the
-     * delivery (with its price) before paying (Mote & Livsstil, 2026-10-28).
-     * It no longer starts Express from here: Express is the product detail's
-     * «Kjøp nå med Vipps» only.
+     * Vipps from the cart (2026-10-29: «el botón negro va con el nuestro y el
+     * botón de Vipps paga el carrito entero»): Vipps Express for the sponsor's
+     * WHOLE cart — the same Express as the detail's «Kjøp nå med Vipps»: the
+     * hand-over overlay, `vio:payment-redirect-*` with source `'cart'`, the
+     * return and its confirmation. «Til kassen» is the way into our checkout.
+     * When the brand has Express off, or this cart cannot have it (several
+     * suppliers, no rate), the checkout opens with Vipps preselected.
+     *
+     * `vipps-cart-payment="checkout"` keeps the 0.31–0.34 behaviour: the
+     * checkout opens with Vipps preselected, the standard payment.
      */
     private onVipps;
+    /**
+     * The one sponsor whose cart the Vipps button pays: the first with
+     * something to pay for. Express is built on THAT sponsor's backend cart
+     * only — another sponsor's lines are never in it.
+     */
+    private vippsSponsorId;
+    private startVippsExpressOrCheckout;
+    /** Our checkout with Vipps preselected: the host opens it on `vio:checkout-open`. */
+    private openCheckoutWithVipps;
     /** Vipps' own button when its script answers; our orange one otherwise. */
     private loadVippsButton;
     /** Stripe — opens the checkout with Stripe preselected. */
@@ -783,6 +888,12 @@ declare class VioCart extends LitElement {
     private onDecrement;
     private onRemove;
     render(): lit_html.TemplateResult<1>;
+    /**
+     * The selling brand's promises under the ways to pay, as in the product
+     * detail (one article = one brand: the cart's brand). Hidden with the theme's
+     * `cartHighlightsDisplay: 'none'`; nothing when the brand has none.
+     */
+    private renderBrandHighlights;
     /** «Frakt» (the chosen or cheapest rate) and «Totalt» with it; «Beregnes i kassen» when unknown. */
     private renderShippingRows;
     private renderConfirmation;
@@ -1595,6 +1706,8 @@ interface VioThemeOverrides {
     detailHighlightsDisplay?: string;
     /** «Frakt & retur» in the detail: `block` (default) or `none` (hidden). */
     detailShippingReturnsDisplay?: string;
+    /** The brand's promises in the cart, under the ways to pay: `grid` (default, shown when the brand has some) or `none`. */
+    cartHighlightsDisplay?: string;
     /** `<vio-product-carousel>`: `carousel` (default, one row) or `list` (cards one under the other). Its `layout` attribute wins. */
     carouselLayout?: string;
     /** Thumbnail size (default `64px`). One row, scrolls sideways. */
@@ -1659,6 +1772,13 @@ interface VioThemeOverrides {
     redirectBg?: string;
     /** Spinner colour of that overlay (default Vipps orange). */
     redirectSpinner?: string;
+    /**
+     * What the Vipps button pays when the cart has lines: `express` (default —
+     * Vipps Express for the sponsor's whole cart, from `<vio-cart>` and from
+     * `<vio-product-detail>`) or `checkout` (opens our checkout with Vipps
+     * preselected, as in 0.31–0.34). An element's `vipps-cart-payment` wins.
+     */
+    vippsCartPayment?: 'express' | 'checkout' | string;
 }
 /**
  * Apply (or clear) theme overrides. Pass `null`/`undefined` for a key to

package/dist/ui/index.d.ts

@@ -1,6 +1,7 @@
-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-B7GVA_qB.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-BGzSC3vK.js';
 import 'lit-html';
 import 'lit';
+import '../detail-layout-BI556w8p.js';
 
 /**
  * Vio elements — owns the `<vio-*>` custom-element classes and their registration.

package/dist/ui/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements } from '../chunk-T5B74YBQ.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-T5B74YBQ.js';
-import '../chunk-ZORYG4W3.js';
+import { registerVioElements } from '../chunk-DEREQRCM.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-DEREQRCM.js';
+import '../chunk-6PQFXUOW.js';
 
 // src/ui/index.ts
 registerVioElements();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vio-live/web-sdk",
-  "version": "0.33.0",
+  "version": "0.36.0",
   "description": "Vio Web SDK — in-site shoppable + native checkout, designed for editorial commerce sites",
   "type": "module",
   "main": "./dist/index.js",

package/dist/chunk-QGJUBVH3.js

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=chunk-QGJUBVH3.js.map
-//# sourceMappingURL=chunk-QGJUBVH3.js.map