@vio-live/web-sdk 0.29.0 → 0.33.0

package/CHANGELOG.md

@@ -14,6 +14,225 @@ How to keep this file: see [CONTRIBUTING → Changelog](CONTRIBUTING.md#changelo
 The details of each feature live in the [README](README.md); this file says *what*
 and *when*, and links there.
 
+## 0.33.0 — 2026-10-28
+
+### Fixed
+- **One cart per connection.** Every connection of a site (environment + key) shared one stored
+  cart, and every tab adopted what the others wrote: two tabs on two connections (Staging and Prod
+  side by side) could take each other's cart for a moment. Each connection now keeps its own
+  (`vio.cart.v1:<environment>:<hash of the key>` — never the key itself), a tab only listens to
+  its own, and `Vio.init` with another key switches `Vio.cart` to that connection's carts (the
+  first one's come back if the page switches back). An answer that arrives for the connection the
+  page left lands in that connection's cart, silently — never in the new one.
+- **The commerce key is the channel of the article's campaign, not the sponsor's first block.**
+  With two campaigns of one sponsor on a surface (Careless: campaign 2 on channel 482, an internal
+  test campaign 1 on channel 480), products, carts and checkouts used the default campaign's
+  channel even for an article of the other. The key now follows the campaign in context (the
+  click's `campaignId`, `vio-campaign`, `data-vio-campaign`, `Vio.init`'s), among the sponsor's
+  blocks (a block with `commerce: null` is skipped instead of throwing). `Vio.commerceFor(sponsorId)`
+  still works and takes an optional `{ campaignId?, channelId? }`; commerce clients are kept per
+  sponsor and key. New: `Vio.sponsorCommerce(sponsorId, ctx?)`.
+- **A cart remembers its channel.** `SponsorCartState.channelId` is stored when the backend cart is
+  created, and every later cart and checkout call for it (also the return from Vipps / Stripe,
+  through the per-checkout memory) uses that channel's key. If the bootstrap no longer lists the
+  channel, the stale `cartId` is dropped and the cart is created again on the current channel with
+  its lines — never a call with another channel's key. Carts from before keep the sponsor's first
+  block, as when they were created.
+- **The order's campaign belongs to the cart's sponsor.** `attribution.campaign_id` on the checkout
+  and `campaignId` on `vio:checkout-created` (→ `add_payment_info`) took the page's campaign even
+  when it was another sponsor's. Now: the campaign the cart's lines were added from, else the
+  page's (`data-vio-campaign` / `vio-campaign` on the page, then `Vio.init`'s) only when the sponsor
+  takes part in it, else the slices' rule — only campaigns of that sponsor.
+- **The bootstrap no longer lives for the whole page.** When the tab becomes visible again and the
+  cached bootstrap is older than 5 minutes, it is fetched again (the old one stays until the new
+  one arrives, and if the refresh fails). Carts keep their lines; an open checkout keeps paying
+  with its channel's key.
+- **«Frakt & retur» no longer shows filler as the delivery time.** A rate's description equal to
+  its own name (dashboard-created rates copied it), `By Outshifter` or `Default Shipping Method`
+  (products' defaults) is no description in `getShippingRates`; the detail also drops one equal
+  to the product's title or the brand / seller name.
+
+### ⚠️ Upgrade notes
+- **Hosts with several articles (Replit, Vev):** pass `sponsorId` **and** `campaignId` on
+  `vio:product-click`, set `data-vio-campaign` on each article's wrapper, and do **not** set a
+  site-wide `Vio.init({ campaignId })` — the campaign in context decides which channel sells.
+- The carts kept in the old shared entry move, once, to the first connection that opens with none
+  of its own. Nothing to do.
+- `Vio.cart` is the same object for the whole page, so listeners added to it keep working across a
+  re-init. A host that archived and restored carts per connection itself (Replit's
+  `vioCartConnections`) can rely on this instead.
+
+## 0.32.0 — 2026-10-28
+
+> First version published to npm since 0.29.0: **0.30.0 and 0.31.0 were never published on their own** — their
+> changes (below) ship in this version too. A host on 0.29.0 should read the three sections.
+
+### Added
+- **Options for the product detail** (README → *Options of the detail and the product cards*):
+  `gallery="carousel"` (every photo in one swipeable row with dots, no thumbnails),
+  `description-mode` (`preview` · `folded` · `open`), `highlights`, `delivery-time`,
+  `carrier-logos`; theme keys `detailGallery`, `detailCarouselPeek`, `detailDescriptionMode`,
+  `detailDescriptionPreviewLines`, `detailHighlightsDisplay`, `detailShippingReturnsDisplay`.
+- **The brand's promises** under the buy zone (icon, title, line of text — up to three), from the
+  sponsor block's `highlights` (dashboard Settings → Brand) unless the host passes its own.
+- **«Frakt & retur»** fold after «Beskrivelse»: one row per carrier (its logo from Commerce's
+  `logo_url`, or `carrier-logos`, or a line icon by the kind of delivery), how it delivers, the
+  price; the delivery time the brand wrote on the rate («Leveringstid 1-5 dager»); the right of
+  withdrawal and the brand's pages.
+- **Product cards:** `<vio-product-carousel layout="list">` (one under the other),
+  `show-description` / `descriptions` (the catalogue's text or the editor's own per product),
+  `button-style` (`icon` · `bar` · `hidden`) and `button-label` (the Vev card's «Kjøp» bar); card
+  look through theme keys `card*` and `--vio-card-*`.
+- `commerce.channel.product.getShippingRates` returns each rate's `description` and `logoUrl`.
+
+### Changed
+- **The detail's order is the same on every screen**: sizes first in the buy zone, «Frakt fra …»
+  under them, stock on the name's line, «Beskrivelse» at the very bottom. The buy zone no longer
+  pins itself on desktop (`detailBuyPosition: 'sticky'` brings that back).
+- **«Beskrivelse» shows a preview** (the first three lines and «Les mer») instead of being folded
+  shut. `description-mode="folded"` keeps the old behaviour.
+- **The sheets close with a pull down from anywhere** while their content is at the top, not only
+  from the grab bar or the top bar (detail, cart, checkout).
+
+### ⚠️ Upgrade notes
+- Rates are asked with `logo_url`; a gateway without the field is asked again without it once
+  (and not again on that page), so the rates never go missing over a logo.
+- A host that styled `details.description-block` for «Beskrivelse» now gets
+  `.description-preview` (`part="description"` unchanged).
+
+## 0.31.0 — 2026-10-28
+
+### Added
+- **Delivery and returns under the price in the product detail.** It reads «Frakt fra X · 14
+  dagers angrerett», where X is the product's cheapest shipping rate for the page's market (the
+  same `product_shipping` rates the backend cart offers). A cheapest rate of 0 reads «Gratis frakt».
+  With no known rate, only «14 dagers angrerett» is shown (`part="delivery-note"`). The rates come
+  from a separate query (`commerce.channel.product.getShippingRates`), so a failure there only
+  loses this line.
+- **The cart drawer shows shipping and the total including it.** It uses the rate chosen on the
+  server cart, or the cheapest rate offered. Without a known rate it reads «Frakt: Beregnes i
+  kassen» and shows no total (`part="cart-shipping"`, `part="cart-total"`).
+- **«Lagt i handlekurven» after «Legg i handlekurv».** The detail closes and a small toast offers
+  **«Til kassen»** and **«Fortsett å handle»** (`part="added-toast"`). «Til kassen» dispatches
+  `vio:checkout-open` for that brand, the same event the cart's «Til kassen» sends. It does nothing
+  when the cart was emptied in the meantime. The toast closes by itself after 8 s.
+- **A line under «Kjøp nå med Vipps» in the product detail:** «Vipps fyller inn navn og adresse –
+  du godkjenner og betaler i appen» (`part="vipps-note"`). It is shown only when that button goes
+  straight to the app: Express is on for the brand and the brand's cart is empty. In other cases
+  the button opens the checkout first.
+### Changed
+- **The product detail no longer picks a size for the shopper.** Only an option with a single
+  value is preselected. The chosen value is shown beside the option's name («Størrelse: M») and
+  on its pill. Every buy button (Vipps, «Legg i handlekurv», «Kjøp nå», Stripe, Klarna, Apple Pay)
+  checks for a missing choice first: it shows «Velg størrelse» (or «Velg farge», etc.) and adds or
+  pays nothing. «Få igjen — N stk» now counts only the variant actually chosen. Before a size is
+  chosen it says «På lager» if any size is in stock.
+- **Two Vipps paths.** The product detail's «Kjøp nå med Vipps» stays **Express**. The
+  **cart's** Vipps button now opens the checkout with Vipps preselected. It no longer starts
+  Express or hands over to Vipps. **The checkout's Vipps is always the standard payment**, even
+  when the brand has Express on:
+  - the address form, the delivery and its price are required before paying, as for Stripe;
+  - the summary counts our shipping rate, so «Velges i Vipps» is gone;
+  - the payment is `startVippsPayment(sponsorId, form, { express: false })`, which now puts the
+    form's complete address on the checkout's shipping and billing address.
+
+  `COLLECTS_OWN_ADDRESS` no longer lists Vipps. See
+  [README → Two Vipps paths](README.md#the-hand-over-to-vipps-028).
+- **«Mobilnummer» in the checkout's address form.** It is required only for the standard Vipps
+  payment, and optional for every other method; it never blocks their buttons or widgets.
+  - It accepts any market's number. A `+`/`00` prefix sets the calling code; without one, the
+    shipping country does (NO 47, SE 46, DK 45, FI 358, DE 49, GB 44…), falling back to the
+    page's country. A trunk 0 is dropped.
+  - A number that cannot be read shows «Skriv et gyldig mobilnummer…».
+  - It is sent as `phone` (national digits) + `phone_code` (digits, no plus) on the shipping and
+    billing address of every method that takes our form. `CheckoutAddress.phone` is new.
+- **The checkout's Vipps refuses to start without the delivery saved.** If the chosen rate cannot
+  be saved on the cart, the Vipps or Stripe-link payment does not start and the checkout says
+  «Kunne ikke lagre fraktmetoden. Prøv igjen.». This covers a failed save and a rate without a
+  supplier. `startVippsPayment(…, { express: false })` also throws before creating anything when
+  the address is incomplete or has no usable mobile.
+
+### Fixed
+- **«Velg størrelse» no mueve las tallas.** El aviso sale en la misma línea que el nombre de la opción, así que tocar comprar sin talla ya no desplaza los botones bajo el dedo.
+- **No checkout and no payment for an empty cart or a total of 0 kr.** `Vio.checkout.open()`
+  throws for a cart that totals 0, as it already did for an empty one. Vipps (`startVippsPayment`,
+  `startVippsExpress`), the Stripe link, native Stripe and Adyen read the cart from the server and
+  refuse to create a checkout or a payment when it is empty or 0 kr. The buttons check the same
+  thing first: the cart's «Til kassen» is disabled, the checkout's pay buttons are disabled and
+  say «Handlekurven er tom.», and the detail shows no Vipps or Apple Pay button for a product at 0 kr.
+- **Desktop: the product detail's pinned buy bar no longer covers the size picker.** The option
+  pickers now sit at the top of the buy zone (`part="buy-options"`), so they move with the
+  buttons whether the zone is static or sticky.
+- **No buttons for payment methods the brand does not have while its methods load.** The
+  product detail and the cart drawer show a neutral placeholder (`part="buy-pending"` /
+  `.methods-pending`) until `getAvailablePaymentMethods` answers. They used to show every method,
+  so a Vipps-only brand flashed Stripe and Klarna. «Legg i handlekurv» and «Til kassen» are there
+  from the start. A failed lookup still shows every button, as before.
+- **Storage never blocks add to cart or checkout (in-app browsers, private modes).** Every read
+  and write of `localStorage`/`sessionStorage` goes through one guard, `src/core/safe-storage.ts`.
+  A storage property that throws on access, a `null` storage or a refused write now falls back to
+  the page's memory. This covers the cart, the customer session id, the market's
+  currency/country/locale and the Klarna return. Before, `typeof localStorage` outside a `try`
+  could throw while the SDK started. Without storage, every browser also sent the same customer
+  session id, `cs_session_default`. It is now one id per page.
+
+### ⚠️ Upgrade notes
+- The detail's buy buttons stay enabled before a size is chosen. Tapping one shows the prompt
+  instead of buying. A host that clicks `.add-to-cart` from a script needs a value in every option
+  first.
+- A host's `vio:checkout-open` handler that calls `Vio.checkout.open()` must still catch the throw
+  (it already threw for an empty cart). It now also throws for a cart of 0 kr.
+- Host CSS that placed `::part(option-group)` relative to `::part(buy)` should be checked: the
+  option groups are now inside `buy`.
+- A host that already answers `vio:added-to-cart` with its own UI (for example, opening its cart
+  drawer) can turn the new toast off with `<vio-product-detail no-added-toast>`. The toast's
+  «Til kassen» relies on the host's `vio:checkout-open` handler, like the cart's does.
+- **Backend (shopcart):** the checkout's Vipps payment is now `express: false` with the address
+  already on the checkout. shopcart must not request the Vipps profile on these standard
+  payments, and must carry the address `phone`/`phone_code` through to the order. Until that is
+  deployed, check a QA order to confirm the phone arrives.
+- Hosts that pre-fill the checkout form through `Vio.checkout.setAddress()` should include
+  `phone`, or the shopper has to type it when paying with Vipps. Other methods do not need it.
+- **The cart's Vipps button now opens the checkout through `vio:checkout-open`**, with
+  `paymentMethod: 'vipps'`. A host without a handler for that event loses direct Vipps from the
+  cart. The `vio:payment-redirect-*` events with `source: 'cart'` are gone; those with
+  `'detail'` and `'checkout'` remain.
+- **`startVippsPayment(sponsorId, form, { express: false })` writes the full address**, including
+  the mobile, to the checkout's shipping and billing address before it creates the payment.
+  Without the flag, or with `express: true`, nothing changes.
+- `Vio.checkout.open()` throws on a cart that totals 0, as well as on an empty one.
+- The «Lagt i handlekurven» toast is on by default. Use `<vio-product-detail no-added-toast>` to
+  turn it off.
+
+## 0.30.0 — 2026-10-27
+
+### Added
+- **Internal traffic** (ADR-0041): opening any page with **`?vio_internal=1`** marks the browser
+  (`localStorage`, `vio.internal.v1`) and `?vio_internal=0` clears it; read once at `Vio.init()`.
+  While marked, every analytics event carries **`client.internal: true`** and the collector's
+  reads leave it out. **`Vio.analytics.setInternal(boolean)`** / `Vio.analytics.isInternal` for
+  hosts; one `console.info` when marked. See
+  [README → Internal traffic](README.md#internal-traffic--mark-your-browser-as-a-tester-unreleased).
+
+### Changed
+- **Stripe.js (~300 KB) is downloaded only for a brand that uses Stripe.** It used to load on
+  every page as soon as the SDK started, to have Apple Pay ready. Now it loads when the brand's
+  payment methods come back with a Stripe key (or when the host passes `stripePublishableKey`
+  to `Vio.init`). A brand that only takes Vipps never downloads it. Apple Pay still has it before
+  the tap: its button waits for the same key.
+- **`component_impression` of `<vio-product-carousel>` carries `commerce.items`** — the products
+  shown, like its `view_item_list` — so the collector can count per-product impressions
+  (ADR-0041). The impression is observed once the products have loaded (the 1 s dwell starts
+  then); a failed fetch still counts it, without items. `Vio.analytics.observeImpression()` takes
+  a `commerce` getter, read when the impression fires. See
+  [README → Impressions carry the products shown](README.md#impressions-carry-the-products-shown-unreleased).
+- Events never carry more than 100 `commerce.items` (the collector rejects the whole event above
+  its cap).
+
+### ⚠️ Upgrade notes
+- `client.internal` needs the collector that knows the field; an older one strips it (the event is
+  kept, just not marked). Nothing to do on the host.
+
 ## 0.29.0 — 2026-10-24
 
 ### Added

package/README.md

@@ -226,7 +226,7 @@ a campaign to a slot. But an editorial page — a Vev article, a Replit article
 often *is* part of one campaign, and the page can say so:
 
 ```ts
-Vio.init({ apiKey: '…', campaignId: 12 })          // the whole page
+Vio.init({ apiKey: '…', campaignId: 12 })          // the whole page — only on a page of ONE campaign
 ```
 
 ```html
@@ -243,6 +243,19 @@ ancestors. On web/Replit a **per-article** campaign needs a per-article scope to
 same `carousel-1`, and the articles' campaigns would overwrite one another's
 assignment; Vev ids are per block, so it does not apply there. What it does:
 
+- **Which channel sells.** One article = one campaign = one channel = one
+  sponsor, and one sponsor may run several campaigns on a surface, each on its own
+  commerce channel. The SDK reads products, creates the cart and pays with the key
+  of the channel of the **campaign in context** — the click's `campaignId`, the
+  element's `vio-campaign`, an ancestor's `data-vio-campaign`, then `Vio.init`'s —
+  among the blocks of that sponsor (`Vio.sponsorCommerce(sponsorId, { campaignId })`,
+  `Vio.commerceFor(sponsorId, { campaignId })`); without one, the sponsor's first
+  block, as before. A cart remembers the channel it was created on (`channelId`)
+  and every later cart and checkout call uses that channel's key; if the bootstrap
+  no longer lists that channel, the cart is created again on the current one with
+  its lines. So on a site with several articles (Replit, Vev), **set
+  `data-vio-campaign` per article and pass `sponsorId` and `campaignId` on
+  `vio:product-click`; do not set a site-wide `Vio.init({ campaignId })`.**
 - **Declaration.** The manifest carries the page's campaign (top-level) and an
   element's own campaign per location when it differs. The campaigns service
   (campaigns micro PR #16) turns that into assignments of the page's slots
@@ -372,9 +385,11 @@ Since 0.26 the origins do not stay in the browser: **Commerce receives them**
 - **Per checkout.** `CreateCheckout` and the `UpdateCheckout` right before paying
   carry `attribution`: `surface_key` (the SDK key — the gateway sets it from
   `X-API-Key` anyway, and shopcart checks it against the cart's channel, so a page
-  cannot credit a sale to another surface), `campaign_id` (the page's campaign,
-  `Vio.pageCampaign()` — else the campaign that explains most units of the cart under
-  the same rule `purchase` is split by), `content_url` / `content_title` (the page at
+  cannot credit a sale to another surface), `campaign_id` (always a campaign the
+  cart's sponsor takes part in: the campaign the cart's lines were added from, else
+  the page's — `data-vio-campaign` / `vio-campaign` on the page, then `Vio.init`'s —
+  else the campaign that explains most units of the cart under the same rule
+  `purchase` is split by), `content_url` / `content_title` (the page at
   pay time) and `entry` (`{ referrer, utm_source, utm_medium, utm_campaign,
   landing_url }`: the landing the session **remembers** — the same memory the
   `client` block reads, which now keeps the landing page too — never the page the
@@ -519,6 +534,49 @@ redirect }` — which is what analytics listens to; a host with its own sink can
 listen to it too. With `dataLayer: true` it is pushed as GA4's `add_payment_info`
 with `payment_type`.
 
+### Impressions carry the products shown (unreleased)
+
+`<vio-product-carousel>`'s **`component_impression`** (≥50% visible for ≥1 s, once
+per session and carousel) carries the products it shows in **`commerce.items`**
+(`product_id`, `name`, `price`) and `commerce.currency` — the same lines as its
+`view_item_list`. The collector counts the per-product "saw" step of the funnel
+from them (ADR-0041). While the products load nothing is observed: the 1 s dwell
+starts once they are on screen. A carousel whose fetch failed (slotted fallback)
+still counts its impression, without items. A host calling
+`Vio.analytics.observeImpression(el, context, { commerce: () => ({ items, currency }) })`
+does the same for its own elements: the getter is read when the impression fires.
+
+### Internal traffic — mark your browser as a tester (unreleased)
+
+Our own visits (testers, the team, agents) must not count in the dashboard. Mark
+**each browser you test with** once:
+
+1. Open any page of the site that runs the SDK with **`?vio_internal=1`** added to
+   the URL — e.g. `https://example.com/article?vio_internal=1` (or
+   `…?utm_source=x&vio_internal=1` when the URL already has a query).
+2. Open the browser's console: the SDK says once
+   `[Vio.analytics] this browser is marked as internal traffic …`.
+3. That's it. The mark is remembered in this browser (`localStorage`,
+   `vio.internal.v1`, per site) for every page and every later visit, and every
+   analytics event it sends carries **`client.internal: true`**; the collector's
+   reads leave those events out.
+
+To **undo** it, open any page with **`?vio_internal=0`**. Things to know:
+
+- The mark is per browser and per site: Safari and Chrome on the same phone, a
+  private window, or another site are marked separately. Clearing the site's data
+  clears the mark.
+- In-app browsers (Instagram, Facebook) and private windows may not keep
+  `localStorage`: there, only the page opened with `?vio_internal=1` is marked.
+  Prefer a regular browser for testing.
+- The URL is read once per page load (at `Vio.init()`), not on client-side
+  navigation.
+- The mark is the tester's own choice, not a tracking id: it is written even
+  before consent (`requireConsent`).
+- A host can mark from code: **`Vio.analytics.setInternal(true | false)`**
+  (`Vio.analytics.isInternal` reads it). `resolveInternal()` / `INTERNAL_KEY` are
+  exported from `/core`.
+
 ## Sponsor identity — name and logo
 
 The elements say **who sells**: the sponsor's (brand's) display name and logo.
@@ -650,7 +708,7 @@ or on the element (`vio-product-detail { --vio-detail-logo-height: 48px; }`).
 | `detailOptionHeight` / `detailOptionGap` | `--vio-detail-option-height` / `--vio-detail-option-gap` | `36px` / `6px` | Size / option buttons (height is also their min width) |
 | `detailOptionRadius` / `detailOptionWrap` | `--vio-detail-option-radius` / `--vio-detail-option-wrap` | `0` / `wrap` | `nowrap` = one line that scrolls sideways |
 | `detailButtonHeight` / `detailButtonRadius` | `--vio-detail-button-height` / `--vio-detail-button-radius` | `52px` / `0` | Quantity stepper and «Legg i handlekurv» |
-| `detailBuyPosition` / `detailBuyShadow` | `--vio-detail-buy-position` / `--vio-detail-buy-shadow` | phones `static`, desktop `sticky` | Whether the buy zone (Vipps, quantity, add to cart) stays at the bottom of the panel while scrolling |
+| `detailBuyPosition` / `detailBuyShadow` | `--vio-detail-buy-position` / `--vio-detail-buy-shadow` | `static` | `sticky` pins the buy zone (Vipps, quantity, add to cart) to the bottom of the panel while scrolling |
 | `cartWidth` / `checkoutWidth` | `--vio-cart-width` / `--vio-checkout-width` | `440px` | Drawer widths (desktop) |
 | `confirmLogoHeight` / `confirmTitleSize` / `confirmCheckBg` | `--vio-confirm-logo-height` / `--vio-confirm-title-size` / `--vio-confirm-check-bg` | `40px` / `24px` / green | The confirmation |
 | `redirectBg` / `redirectSpinner` | `--vio-redirect-bg` / `--vio-redirect-spinner` | translucent white / Vipps orange | The «Åpner Vipps …» overlay |
@@ -666,10 +724,14 @@ Also settable as CSS only: `--vio-detail-logo-max-width` (`220px`), `--vio-detai
 **`::part` names**, for what the properties do not cover:
 
 - `<vio-product-detail>`: `topbar`, `sponsor`, `close`, `gallery`, `image`, `thumbs`, `thumb`
-  (+ `thumb-active`), `thumbs-arrow`, `info`, `brand`, `title`, `price`, `stock`,
-  `option-group`, `option-label`, `options`, `option` (+ `option-selected`), `buy`,
-  `buy-vipps`, `quantity-row`, `add-to-cart`, `seller-note`, `seller-terms`, `seller-refund`,
-  `description`.
+  (+ `thumb-active`), `thumbs-arrow`, `info`, `brand`, `title`, `price`, `delivery-note`
+  (`delivery-shipping`, `delivery-withdrawal`), `stock`, `buy`, `buy-options`, `option-group`,
+  `option-label`, `option-chosen`, `option-prompt`, `options`, `option` (+ `option-selected`),
+  `buy-pending`, `buy-vipps`, `vipps-note`, `quantity-row`, `add-to-cart`, `seller-note`,
+  `seller-terms`, `seller-refund`, `description`, `highlights`, `highlight`, `shipping-returns`,
+  `slide`, `image-dots`, `carousel-arrow`, `added-toast` (`added-toast-checkout`,
+  `added-toast-continue`).
+- `<vio-cart>`: `cart-shipping`, `cart-total`.
 - `<vio-checkout>`: `sponsor`, `confirmation`, `confirm-title`, `confirm-sponsor`, `confirm-details`.
 
 ```css
@@ -677,14 +739,51 @@ vio-product-detail::part(add-to-cart) { letter-spacing: 0; text-transform: none;
 vio-product-detail::part(option-selected) { background: #2b2b2b; }
 ```
 
-**The detail's order:** the selling brand top left; the main image; the thumbnails;
-name, price, stock, sizes; then, **on phones**, the buy zone — **Vipps first** (when the
-channel has it), quantity + «Legg i handlekurv», then the other ways to pay, and under them
-«Du handler direkte hos {brand}.» (the product's brand, never the article's) with links to
-the brand's «Kjøpsvilkår» and «Angrerett og retur» when it gave them (the sponsor block's
-`termsUrl` / `refundPolicyUrl`, https only, opened in a new tab) — and the
-description; **on desktop**, the description first and the buy zone pinned at the bottom
-of the panel. The description folds: «Beskrivelse» opens on a tap.
+**The detail's order:** the selling brand top left; the images (thumbnails, or a carousel);
+name and stock on one line, the price; the buy zone — the sizes (none preselected; every buy
+button asks «Velg størrelse» first), «Frakt fra X · 14 dagers angrerett», **Vipps first** (when
+the channel has it), quantity + «Legg i handlekurv», the other ways to pay, and under them «Du
+handler direkte hos {brand}.» (the product's brand, never the article's) with links to the
+brand's «Kjøpsvilkår» and «Angrerett og retur» when it gave them (the sponsor block's
+`termsUrl` / `refundPolicyUrl`, https only, new tab); the brand's promises; «Beskrivelse»; and
+«Frakt & retur». The same order on every screen.
+
+### Options of the detail and the product cards (0.32)
+
+Every one is off or as before unless the host sets it: per element (attribute), or for the
+whole page through `applyVioTheme` (theme key → custom property). The element wins.
+
+**`<vio-product-detail>`**
+
+| Attribute | Theme key | Values | What |
+|---|---|---|---|
+| `gallery` | `detailGallery` | `thumbs` (default) · `carousel` | `carousel`: every photo in one swipeable row with a dot per photo, no thumbnails — less height. `detailCarouselPeek` (`--vio-detail-carousel-peek`) shows the edge of the next one |
+| `description-mode` | `detailDescriptionMode` | `preview` (default) · `folded` · `open` | «Beskrivelse»: the first lines fading out + «Les mer» (`detailDescriptionPreviewLines`, `3`); only the heading until a tap; or all of it |
+| `highlights` | — | `[{ icon, title, text }]` (JSON) | The brand's promises under the buy zone. By default the brand's own (dashboard Settings → Brand, sponsor block `highlights`); this list replaces them on the page. Icons: `plane heart shirt truck return leaf star shield mailbox home pin clock`, or an image URL. `detailHighlightsDisplay: 'none'` hides the strip |
+| `delivery-time` | — | text, e.g. `2-5 virkedager` | «Leveringstid …» in «Frakt & retur» for a brand whose rates do not say it (each rate's own text in Commerce — «Leveringstid 1-5 dager» — wins) |
+| `carrier-logos` | — | `{ "Bring": "https://…" }` (JSON) | Carrier logos by the name the rate starts with («Bring - Pakke i postkasse»), for rates without their own logo in Commerce (`logo_url`, which wins); otherwise a line icon by the kind of delivery |
+| — | `detailShippingReturnsDisplay` | `block` (default) · `none` | «Frakt & retur»: one row per carrier (logo or icon, carrier, how it delivers, price), the delivery time, the right of withdrawal and the brand's pages |
+
+The sheet closes with a pull down from its top bar, or from anywhere while its content is at the top.
+
+**`<vio-product-carousel>`** (and its cards, `<vio-product>`)
+
+| Attribute | Theme key | Values | What |
+|---|---|---|---|
+| `layout` | `carouselLayout` | `carousel` (default) · `list` | `list`: one card under the other, as wide as the column (`--vio-carousel-list-max-width`, `480px`) |
+| `show-description` | — | boolean | Each card shows its product's description (`cardDescriptionLines`, `4`) |
+| `descriptions` | — | `{ "<productId>": "text" }` (JSON) | The editor's own text for a product, over the catalogue's — shown even without `show-description`; `""` hides that one |
+| `button-style` | — | `icon` (default) · `bar` · `hidden` | The buy button: the round bag on the image, a full-width «Kjøp» bar under the price (as the Vev card), or none. Both add to the cart, or open the product when it has sizes |
+| `button-label` | — | text, default `Kjøp` | The bar's text («Kjøp · 2» once two are in the cart) |
+
+Card look, by theme key (custom property): `cardFont`, `cardBorder`, `cardImageAspect`,
+`cardImageFit`, `cardImageBg`, `cardImagePadding`, `cardMetaPadding`, `cardPriceFont`,
+`cardAccent`, `cardBarRadius`, `cardDescriptionLines`, `cardRetailerOrder` (`-1` lifts the seller
+line above the name). CSS only: `--vio-card-border-hover-color`, `--vio-card-add-size`,
+`--vio-card-add-icon-size`, `--vio-card-brand-{size,tracking,weight,color,gap}`,
+`--vio-card-name-{font,size,weight,gap}`, `--vio-card-price-{size,weight,gap}`,
+`--vio-card-retailer-{display,size,tracking,weight,color,margin}`,
+`--vio-card-description-{size,color,gap}`, `--vio-card-accent-text`.
 
 ### The hand-over to Vipps (0.28)
 
@@ -706,8 +805,17 @@ detail adds the product to the sponsor's cart and the checkout is built on that
 every line in it. It goes straight to Vipps only when the cart was **empty**; with lines
 already in it, the product is added and the checkout opens first (`vio:checkout-open`
 with `paymentMethod: 'vipps'`, no hand-over events), every line and the total on screen,
-so what the Vipps page lists is what the shopper saw. The cart's own Vipps button always
-pays the whole cart — the lines are right there. **Apple Pay on the detail follows the same
+so what the Vipps page lists is what the shopper saw.
+
+**Two Vipps paths (2026-10-28).** The detail's «Kjøp nå med Vipps» is **Express**: the app
+fills in name and address. The **cart's** Vipps button opens the checkout with Vipps
+preselected, and the checkout's Vipps is always the **standard** payment, even when the
+brand has Express on. Our form collects name, e-mail, **Mobilnummer**, address and the
+delivery with its price before paying. The mobile is required for Vipps only and accepts any
+market's number: the `+` prefix or the shipping country sets the calling code. The delivery is
+saved on the cart first; if that fails, no payment starts. The payment goes out with
+`express: false`, and the address (with `phone` + `phone_code`) is on the checkout's shipping
+and billing address. **Apple Pay on the detail follows the same
 rule**: its sheet's amount is fixed before the tap, so it opens only on an empty cart, for the
 product × the chosen quantity; otherwise the checkout opens (`paymentMethod: 'apple-pay'`).
 

package/dist/chunk-QGJUBVH3.js

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

package/dist/{chunk-67QESEV2.js.map → chunk-QGJUBVH3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-67QESEV2.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-QGJUBVH3.js"}