@vio-live/web-sdk 0.26.1 → 0.28.0

package/CHANGELOG.md

@@ -0,0 +1,289 @@
+# Changelog — `@vio-live/web-sdk`
+
+What changed in each version, and **what a host has to know before upgrading**.
+Every version has up to four parts:
+
+- **Added** — new things you can use.
+- **Changed** — the same feature behaves differently (screens, events, data on the wire).
+- **Fixed** — bugs that are gone.
+- **⚠️ Upgrade notes** — what a host (Vev, Replit, a custom page) must do, check or
+  watch for. Read these before bumping, even for a patch.
+
+Newest first. `Unreleased` is merged on `main` but **not published to npm** yet.
+How to keep this file: see [CONTRIBUTING → Changelog](CONTRIBUTING.md#changelog).
+The details of each feature live in the [README](README.md); this file says *what*
+and *when*, and links there.
+
+## Unreleased
+
+Nothing yet.
+
+## 0.28.0 — 2026-10-22
+
+### Added
+- **The detail's layout is public**: 31 new `applyVioTheme` keys, each a `--vio-*` property
+  (logo height and zoom, image fit / aspect / max height / zoom / side margin, thumbnail size and gap, option
+  height and gap, button height and radius, a sticky buy zone, cart / checkout widths,
+  confirmation logo and title, the redirect overlay), plus `::part` names on every piece of
+  the detail and the confirmation. The same keys serve our demo, Replit and Vev's Config block.
+  See [README → Layout](README.md#layout-of-the-detail-cart-checkout-and-confirmation-028).
+- **The hand-over to Vipps**: a full-screen «Åpner Vipps …» with a soft fade from the tap to
+  the Vipps page (detail, cart, checkout), which also stops a second tap; events
+  `vio:payment-redirect-start` (cancelable — draw your own loader), `vio:payment-redirect-error`
+  and `vio:payment-redirect-cancel`. See [README → The hand-over to Vipps](README.md#the-hand-over-to-vipps-028).
+- `commerce.checkout_id` on every `purchase` the SDK can tie to a checkout, and
+  `props.order_id_kind` (`'order'` | `'checkout'`).
+- `vio:payment-success` may carry `orderNumber` when the checkout already knows it.
+- `purchaseIdsOf(detail)` → `{ orderId, checkoutId, orderIdKind }` (from `/core`) for
+  hosts with their own analytics sink.
+
+### Changed
+- **Product detail** (asked by Mote & Livsstil): the selling brand's logo (its name without
+  one; a square logo with the name beside it) sits **top left beside ✕**, no longer above the
+  image; every main image shows in **one 4:5 box it fills** (`cover`) — no white bars, no jump
+  between photos of different shapes; thumbnails are **one row** (swipe, arrows with a mouse,
+  the selected one kept in view) instead of wrapping; sizes are **compact** (36px); **Vipps
+  comes first**, above quantity and «Legg i handlekurv»; the **description folds** («Beskrivelse»
+  opens on a tap); under the buy buttons, **«Du handler direkte hos {brand}.»**, with links to the
+  brand's «Kjøpsvilkår» and «Angrerett og retur» when its sponsor block carries `termsUrl` /
+  `refundPolicyUrl` (https only; `Vio.sponsorIdentity()` returns them too). On desktop the
+  description comes before the buy zone, which stays pinned at the bottom of the panel; phones
+  keep buy zone, then description.
+- The confirmation's brand logo is 40px tall (was max 32px).
+
+### Fixed
+- **Phones: the detail, the cart and the checkout close by pulling them down**, from the grab bar
+  or the top bar (logo / title and ✕): the sheet follows the finger, and closes when let go far
+  enough or with a flick, or springs back. Before, the grab bar only answered a tap — pulling it
+  scrolled the sheet. The checkout never closes this way mid-payment.
+- **Phones: the page behind stays put while a sheet is open.** A swipe past the end of the
+  detail, cart or checkout used to scroll the article underneath. The page is locked while any
+  sheet is open and comes back to the same place when the last one closes. Desktop drawers are
+  unchanged.
+- **The `purchase` event's `commerce.order_id` is Vio's order number** (`4415`), not the
+  checkout's uuid. Before, every purchase paid through a redirect (Vipps, Klarna, hosted
+  Stripe) or whose order a webhook creates carried the uuid, so Commerce could never net
+  a cancellation or refund (`order_cancelled` / `order_refunded`, ADR-0036) against it.
+  ([#88](https://github.com/vio-live/vio-web-sdk/pull/88))
+
+### ⚠️ Upgrade notes
+- **The product detail looks different** after upgrading (see *Changed*). A host that styled
+  `.sponsor-header` / `.topbar-brand` from outside: they are gone — use `::part(sponsor)`.
+  Hosts that want the old look back: `detailImageAspect: '1 / 1'`, `detailImageFit: 'contain'`,
+  `detailOptionHeight: '42px'`, `detailBuyPosition: 'static'`. The `4 / 5` box crops photos of
+  other shapes: pick the proportion that fits the catalog, or `contain`.
+- A host with its own «loading Vipps» screen: call `preventDefault()` on
+  `vio:payment-redirect-start`, or the SDK's overlay shows on top of yours.
+- **The `purchase` may leave up to 10 s after `vio:payment-success`**: the SDK asks the
+  checkout for the order number at once and then after 0.5, 1, 2, 3 and 3 s. The confirmation screen, the
+  cart and the payment never wait — only the analytics event. If the page hides first,
+  the event leaves at once with the checkout id (`order_id_kind: 'checkout'`).
+- **Hosts with their own sink (Vev):** read the ids with `purchaseIdsOf(detail)` and wait
+  for the number the same way (`Vio.checkout.getOrderReference(checkoutId)`), or your
+  purchases keep the uuid.
+- **Dashboards / queries** that joined purchases by checkout uuid: use `checkout_id`.
+- **Hosts that lock the page themselves when a Vio sheet opens** (phones): the SDK does it now —
+  `position: fixed` on `<body>` at the current offset, its own inline styles restored and the
+  scroll put back on close. Drop yours, or make sure it does not undo the body's styles while a
+  sheet is still open.
+- One `purchase` per checkout per page load: a second `vio:payment-success` for the same
+  checkout adds nothing.
+- **«Kjøpsvilkår · Angrerett og retur» need the backend**: the links show only when the
+  sponsor block carries `termsUrl` / `refundPolicyUrl`, which the campaigns service sends
+  once the brand fills them in (Settings → Brand → Shopper policies). Until then the
+  sentence «Du handler direkte hos {brand}.» shows alone. Nothing to do on the host.
+
+## 0.27.0 — 2026-10-21
+
+### Added
+- **The brand that sells is named** — name and logo — in the product detail (top),
+  the checkout header («Du handler hos …») and the confirmation («Du har handlet hos
+  …»), also after a Vipps return and a reload. ([#91](https://github.com/vio-live/vio-web-sdk/pull/91))
+- `Vio.sponsorIdentity(sponsorId, { checkoutId? })` → `{ id, name, logoUrl, avatarUrl } | null`.
+- `vio:checkout-open` and `vio:payment-success` carry `sponsor: { id, name, logoUrl }`.
+- `Vio.checkout.getOrderReference(checkoutId, sponsorId?)` also answers `sponsor`.
+- `sponsorIdentityFrom(bootstrap, sponsorId)` exported from `/core`.
+
+### Changed
+- The detail's top line names the seller only once (no repeated seller name).
+- The checkout remembers, per tab, which sponsor each checkout belongs to
+  (`sessionStorage` `vio.checkoutSponsor.v1`, last 20 checkouts).
+
+### ⚠️ Upgrade notes
+- The sponsor in the checkout and its confirmation is **the checkout's** (the cart's
+  brand), never the article's: an article of one brand can sell another brand's product.
+- A host confirmation page that must survive a reload keeps `checkoutId` and `sponsorId`
+  in its own URL and asks `getOrderReference` again: the SDK cleans its return
+  parameters after using them. Recipe in [README → Sponsor identity](README.md#sponsor-identity--name-and-logo).
+- New marks are styled with `--vio-*` tokens and exposed as `part="sponsor"`.
+
+## 0.26.1 — 2026-10-21
+
+### Fixed
+- A surface with **no active campaign** still names its channel sponsor in the
+  attribution (before, the sponsor came out empty). ([#89](https://github.com/vio-live/vio-web-sdk/pull/89))
+
+## 0.26.0 — 2026-10-20
+
+### Added
+- **The order is born attributed** (ADR-0035 B): every `AddItem` / quantity increase
+  carries the line's `origin` (`campaign_id`, slot, `component_kind`, `content_url`,
+  `content_title`), and `CreateCheckout` / the last `UpdateCheckout` carry the checkout's
+  `attribution`. See [README → Attribution on the order](README.md#attribution-on-the-order--what-commerce-receives-026).
+
+### Changed
+- `content_url` is sent **without query string or fragment**.
+- Privacy mode `minimal` sends neither the page nor the slot.
+- The surface's privacy mode is preloaded, so the first events already respect it.
+- `vio:payment-success` never waits longer than the page stays open; one reference
+  request per checkout.
+- The landing `referrer` has no query and is dropped when it is a self-referral;
+  `buyer_id` only with consent.
+
+### ⚠️ Upgrade notes
+- **Against a gateway without the new fields** (`origin` on `LineItemInput` / `UpdateItem`,
+  `attribution` on the checkout) the SDK resends the operation without them once per page
+  load and says so in the console: the cart works as in 0.25, **but the order is not
+  attributed**. Deploy the backend for the attribution to reach Commerce.
+- Hosts that add to the cart with their own button should pass
+  `origin: Vio.attribution(slot)` (or `e.detail.origin`) to `Vio.cart.addProduct`.
+
+## 0.25.0 — 2026-10-19
+
+### Added
+- The checkout asks the gateway for **`buyer_ref`** (a keyed hash of the buyer's email)
+  and puts it on `vio:payment-success` → analytics `buyer_id`.
+- Every event carries a **`client`** block: language, the landing's referrer and utm
+  parameters, screen size and time zone (see [README → The visit and the buyer](README.md#the-visit-and-the-buyer--client-and-buyer_id-025)).
+- Slot manifests carry `kind`; every element carries `component_template_id`.
+
+### Changed
+- A slot assigned `page` counts as the page's campaign when its sponsor is known.
+
+### ⚠️ Upgrade notes
+- Never store an email from the events: `buyerRef` is the reference to keep.
+- With `requireConsent`, nothing is written (landing memory, ids) until `setConsent(true)`,
+  and `buyer_id` is not sent.
+
+## 0.24.0 — 2026-10-16
+
+### Added
+- **The page says which campaign it belongs to** (ADR-0034, amendment 3):
+  `Vio.init({ campaignId })`, `<body data-vio-campaign="…">`, or `vio-campaign` on one
+  element. See [README → Page campaign](README.md#page-campaign--an-editorial-page-that-belongs-to-one-campaign).
+
+### Fixed
+- The cart's reconcile skips the mutation that is answering; card context per product;
+  title and URL capped to the collector's limits.
+
+### ⚠️ Upgrade notes
+- The attributes are read **when an element mounts**: in an SPA, update `data-vio-campaign`
+  (or call `Vio.init` again) before mounting the next article's blocks.
+- A paused, unknown or non-numeric campaign falls through to the next level.
+
+## 0.23.1 — 2026-10-16
+
+### Added
+- **Automatic slot identity**: with `data-vio-scope` (and `data-vio-scope-name`) on an
+  ancestor, every element registers itself (`article-123-carousel-1`); `Vio.attribution()`.
+- The cart remembers the origin of each unit; a purchase is split per campaign.
+
+### Fixed
+- Collector limits respected; a one-campaign purchase is one slice; stable origins.
+
+## 0.23.0 — 2026-10-16
+
+### Added
+- **Slots**: the page declares its slots and each one resolves its campaign from the
+  dashboard (ADR-0027 / 0034). See [README → Slots](README.md#slots--where-things-happen-on-a-page).
+
+### Fixed
+- The checkout waits for pending cart mutations before creating a checkout or a payment link.
+- GraphQL cart calls time out after 15 s.
+
+### ⚠️ Upgrade notes
+- `Vio.init({ platform: 'web' | 'custom-web' | 'vev' })` — default `'web'`. Only that
+  platform's assignments come back.
+
+## 0.22.0 — 2026-10-16
+Version bump only; same code as 0.21.1.
+
+## 0.21.1 — 2026-10-16
+
+### Fixed
+- Quantity changes are serialized and coalesced per cart line: quick taps on + / − end on
+  the quantity the shopper sees, with one request in flight at a time.
+
+## 0.21.0 — 2026-10-15
+
+### Fixed
+- Analytics: `order_id` only with Vio ids, the cart's `value`, and `checkout_id` on
+  payment returns.
+
+## 0.20.5 — 2026-10-15
+
+### Fixed
+- Analytics: the real `campaign_id`, a consistent `order_id` on `purchase`, and
+  `X-Api-Key` on the events request.
+
+## 0.20.4 — 2026-10-14
+
+### Fixed
+- A bootstrap request started before a re-init no longer lands in the new configuration.
+
+## 0.20.3 — 2026-10-12
+
+### Changed
+- A cart already paid in another tab reads «already paid», not «failed».
+
+## 0.20.1 / 0.20.2 — 2026-10-12
+
+### Fixed
+- The dialogs' focus trap keeps keyboard focus inside in Safari, and pulls it back when the
+  browser walks out of the dialog.
+
+## 0.20.0 — 2026-10-09
+
+### Added
+- Keyboard and focus in the detail, cart and checkout: focus moves in on open, Tab stays
+  inside, Esc closes, focus returns on close.
+
+### Changed
+- The detail and the cart read the corner radius from the theme (`--vio-radius-*`).
+- When a payment cannot start, the shopper is told what to do (empty cart, cart changed in
+  another tab, already paid) instead of a raw error.
+
+## 0.19.0 — 2026-10-08
+
+### Changed
+- The product detail's header shows the seller's **Company name** (Vio Commerce →
+  Settings → Company), the brand when there is none. *(Superseded in 0.27.0 by the
+  sponsor's name and logo.)*
+
+### ⚠️ Upgrade notes
+- The name is read with its own query outside the product cache (`useCache: false`): a
+  narrow query written to the gateway's product cache would hand the next product query a
+  product without price or images.
+
+## 0.18.0 — 2026-10-08
+
+### Added
+- Vipps' **official button** in the detail, the cart and the checkout; **Vipps Express**
+  from the product and the cart (the app collects address and delivery).
+- Stripe Connect in the embedded payment and Apple Pay (ADR-0022).
+
+### Changed
+- Back from a payment page the drawer shows **only** «Bekrefter betalingen…» until it
+  knows the outcome — never the checkout behind it.
+- The receipt's «Ordrenummer» is **Vio's order number** (`#4497`), never the checkout's uuid.
+
+### ⚠️ Upgrade notes
+- Payment returns come back to **the same URL** with `vio_payment`, `vio_method`,
+  `vio_sponsor`, `checkout_id`: keep `<vio-checkout>` mounted on every route and do not
+  strip the query string on load.
+- The Vipps button loads `cdn.vippsmobilepay.com`: allow it in a CSP.
+
+## 0.17.0 and earlier
+Not recorded here — see the git history and the [releases](https://github.com/vio-live/vio-web-sdk/commits/main).
+Highlights: Stripe on our own page (0.16), payment method first (0.15), Kustom (0.14),
+Adyen (0.13), Nexi (0.12), analytics with consent (0.6 → 0.11).

package/README.md

@@ -453,6 +453,113 @@ confirmation screen never waits. A host with its own checkout passes `buyerRef`
 (`requireConsent` until `setConsent(true)`) `buyer_id` is not sent at all: a visit
 measured with ephemeral ids carries no stable identifier of a person.
 
+### The purchase — `order_id` is Vio's order number, `checkout_id` beside it
+
+A `purchase`'s **`commerce.order_id` is Vio's order number** — `4415`, the number
+on the receipt, in the dashboard and in Commerce. Commerce's cancellations and
+refunds (`order_cancelled` / `order_refunded`, ADR-0036) name the purchase they
+compensate by that number: a purchase that carried the checkout's uuid instead
+could never be netted.
+
+- **Where the number comes from.** The `vio:payment-success` detail's
+  `orderNumber` (the SDK's checkout adds it when its ask for the buyer reference
+  already found the order), Apple Pay's backend confirmation
+  (`result.confirmation.orderId`), or an `orderId` that is a whole number (a host
+  passing the number; a checkout id is a uuid, never one). A redirect return
+  (Vipps, Klarna, hosted Stripe…) or an order a webhook creates usually fires the
+  event before the order exists: the SDK then **asks the checkout** —
+  `Vio.checkout.getOrderReference(checkoutId)`, the receipt's own path — at once
+  and after 0.5 / 1 / 2 / 3 / 3 s, for at most 10 s. Only the event waits: the
+  confirmation screen, the cart and the payment flow never do. Apple Pay and the
+  embedded Stripe Element (the drawer waits for the webhook's order before it
+  confirms) have the number at once.
+- **`commerce.checkout_id`** — Vio's checkout id (uuid) — is always there when the
+  SDK knows the checkout (every SDK path, Apple Pay from the cart included): the
+  second key the collector can match a purchase by. It is new and additive; a
+  collector that predates it drops the key (its schema strips unknown fields) and
+  keeps the event.
+- **`props.order_id_kind`** says what `order_id` is: `'order'` (the number) or
+  `'checkout'` — the number did not come within the 10 s, the page was hidden or
+  closed while waiting (the event leaves at once, by beacon), or the page has no
+  checkout manager to ask; then `order_id` is the checkout id, as before.
+- **Once per checkout.** One `purchase` per checkout (or order) per page load: a
+  second `vio:payment-success` for the same one adds nothing, and a number that
+  arrives after the event left with the checkout id adds no second event. `ts`
+  and `event_id` are fixed at the payment, whenever the event leaves; a purchase
+  split per campaign waits once and every slice carries the same number.
+- **A host with its own sink** (Vev) reads the same ids from the detail with
+  `purchaseIdsOf(detail)` → `{ orderId, checkoutId, orderIdKind }` (or
+  `purchaseFromPaymentSuccess(detail)`, exported from `/core`), and waits for the
+  number the same way through `Vio.checkout.getOrderReference(checkoutId)`.
+
+## Sponsor identity — name and logo
+
+The elements say **who sells**: the sponsor's (brand's) display name and logo.
+
+| Where | What it shows |
+|---|---|
+| `<vio-product-detail>` | a small brand header at the top of the detail — the logo (the name as its `alt`), or the name — for the sponsor the product was fetched with |
+| `<vio-checkout>` header | «Du handler hos ‹logo \| name›» — the checkout's sponsor («Du har handlet hos …» over a provider's own receipt) |
+| `<vio-checkout>` confirmation | «Takk for bestillingen! Du har handlet hos Careless.» next to the order number, with the logo above when there is one |
+| `<vio-cart>` / carousel | the sponsor label over a sponsor's lines, the `retailer` line of a carousel's cards (by name) |
+
+No logo → the name. A logo that fails to load → the name. Nothing known → nothing
+(the product detail shows no header; the confirmation keeps «Takk for bestillingen!»
+without the sentence). The marks are styled with the `--vio-*` tokens and exposed as
+`part="sponsor"` (`vio-checkout::part(sponsor)`).
+
+**One rule.** `Vio.sponsorIdentity(sponsorId, { checkoutId? })` answers
+`{ id, name, logoUrl, avatarUrl } | null` — and every element uses it:
+
+1. the live bootstrap's sponsor blocks: the config's `primarySponsor` and
+   `secondarySponsors`, then every `campaigns[]` entry's primary and secondaries,
+   first match (a surface with no active campaign still names its channel brands);
+2. when the bootstrap does not know the id (not loaded yet, a redirect return): what
+   this tab remembered of the checkout — when the SDK creates a checkout it keeps
+   `checkoutId → { sponsorId, name, logoUrl }` in `sessionStorage`
+   (`vio.checkoutSponsor.v1`, the last 20 checkouts; it works, for that page,
+   without storage) — then the latest remembered checkout of that sponsor;
+3. the cart's `sponsorName`;
+4. `null`.
+
+With only `{ checkoutId }` the sponsor is the one remembered for that checkout. URLs
+are kept as given; an empty `logoUrl` is `null`. `sponsorIdentityFrom(bootstrap,
+sponsorId)` is the pure step 1, exported from `/core`.
+
+**From the checkout, never from the page.** In the checkout and on its confirmation
+the sponsor is the **checkout's** — the cart's sponsor, the one the order is with —
+from the checkout state or the return URL (`vio_sponsor`, `checkout_id`), never
+`Vio.attribution()`: an article of one brand may sell another brand's product. Back
+from Vipps the confirmation names the brand from the memory at once, or from the
+bootstrap as soon as it lands (the thanks is shown first, the name follows).
+
+**For hosts.** `vio:checkout-open` and `vio:payment-success` carry
+`sponsor: { id, name, logoUrl }` in their detail when it can be named (the key is
+absent otherwise), and `Vio.checkout.getOrderReference(checkoutId, sponsorId?)`
+answers `{ orderNumber, buyerRef, sponsor? }` by the same rule. The SDK cleans its
+return parameters from the URL once it has used them, so its own confirmation does
+not come back on a reload — a host that wants a confirmation page that survives one
+keeps the two ids in its own URL and asks again:
+
+```ts
+// On the purchase: keep what the confirmation needs in YOUR url.
+document.addEventListener('vio:payment-success', (e) => {
+  const d = (e as CustomEvent).detail
+  const checkoutId = String(d.checkoutId ?? d.orderId ?? '')
+  history.replaceState(null, '', `/takk?checkout=${checkoutId}&sponsor=${d.sponsorId ?? ''}`)
+  render(d.sponsor)
+})
+
+// On /takk (also after a reload, or in another browser):
+const params = new URLSearchParams(location.search)
+const ref = await Vio.checkout.getOrderReference(params.get('checkout') ?? '', Number(params.get('sponsor')) || undefined)
+render(ref.sponsor, ref.orderNumber) // waits for Vio.init (up to 2 s) and the bootstrap; never throws
+
+function render(sponsor?: { name: string; logoUrl: string | null }, orderNumber?: number | null) {
+  // «Takk for bestillingen! Du har handlet hos {sponsor.name}.» — the logo when sponsor.logoUrl
+}
+```
+
 ## Theming
 
 Every component reads its colors and fonts from `--vio-*` CSS custom properties
@@ -490,6 +597,83 @@ useful if you show multiple differently-branded sponsors on the same page:
 applyVioTheme({ colorAccent: '#ff6600' }, document.getElementById('sponsor-2'))
 ```
 
+### Layout of the detail, cart, checkout and confirmation (0.28)
+
+Beyond colors and fonts, the layout a host needs to fit its design is public too —
+**one key in `applyVioTheme`, one `--vio-*` property behind it**. Our demo, Replit and
+Vev's Config block set the same keys, so a page looks the same in the editor, the
+preview and published. Set them with `applyVioTheme` (preferred) or as CSS on `:root`
+or on the element (`vio-product-detail { --vio-detail-logo-height: 48px; }`).
+
+| `applyVioTheme` key | Property | Default | What it does |
+|---|---|---|---|
+| `detailWidth` | `--vio-detail-width` | `440px` | Detail panel width (desktop) |
+| `detailPaddingX` | `--vio-detail-padding-x` | `24px` | Side padding of the detail |
+| `detailLogoHeight` | `--vio-detail-logo-height` | `44px` | Selling brand's logo, top left beside ✕ (width keeps its proportions; the name when there is no logo; a square logo — a mark — gets the name beside it) |
+| `detailLogoZoom` | `--vio-detail-logo-zoom` | `1` | Zoom inside the logo's box: `1.8` crops the white around a mark in a square file |
+| `detailTitleSize` / `detailPriceSize` | `--vio-detail-title-size` / `--vio-detail-price-size` | `26px` / `24px` | Name and price |
+| `detailImageFit` | `--vio-detail-image-fit` | `cover` | `cover` = fills the box, crops the overflow; `contain` = whole image, bars where shapes differ |
+| `detailImageAspect` | `--vio-detail-image-aspect` | `4 / 5` | One proportion for every image, so the panel never jumps: `1 / 1`, `3 / 4`… or `auto` (each image its own) |
+| `detailImageMaxHeight` | `--vio-detail-image-max-height` | `85vh` | Cap on the main image's height |
+| `detailImageZoom` | `--vio-detail-image-zoom` | `1` | Zoom; e.g. `1.15` crops a white margin baked into the file |
+| `detailImageInset` | `--vio-detail-image-inset` | the padding | Side margin of the image; `0` = edge to edge |
+| `detailImageBg` | `--vio-detail-image-bg` | muted surface | Behind the image |
+| `detailThumbSize` / `detailThumbGap` | `--vio-detail-thumb-size` / `--vio-detail-thumb-gap` | `64px` / `8px` | Thumbnails — always one row: swipe on touch, arrows with a mouse, the selected one kept in view |
+| `detailThumbRadius` / `detailThumbActiveColor` | `--vio-detail-thumb-radius` / `--vio-detail-thumb-active-color` | `0` / text color | Thumbnail corners, selected border |
+| `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 |
+| `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 |
+
+Also settable as CSS only: `--vio-detail-logo-max-width` (`220px`), `--vio-detail-image-position`,
+`--vio-detail-image-radius`, `--vio-detail-thumb-fit` (`cover`), `--vio-detail-thumb-border-width`,
+`--vio-detail-option-padding-x` (`12px`), `--vio-detail-option-font-size`, `--vio-detail-buy-gap`,
+`--vio-detail-buy-padding`, `--vio-detail-buy-bg`, `--vio-detail-info-gap`, `--vio-detail-gallery-gap`,
+`--vio-detail-title-weight`, `--vio-detail-price-weight`, `--vio-confirm-logo-max-width`,
+`--vio-confirm-title-weight`, `--vio-confirm-text-size`, `--vio-redirect-color`, `--vio-redirect-font`,
+`--vio-detail-seller-note-size` (`12px`), `--vio-detail-seller-note-align` (`center`).
+
+**`::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`.
+- `<vio-checkout>`: `sponsor`, `confirmation`, `confirm-title`, `confirm-sponsor`, `confirm-details`.
+
+```css
+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 hand-over to Vipps (0.28)
+
+Between the tap on Vipps (detail, cart or checkout) and the Vipps page, the SDK shows
+a full-screen «Åpner Vipps …» with a soft fade — no empty moment, and it takes every
+tap, so a second payment cannot start. Events on `document`:
+
+| Event | Detail | When |
+|---|---|---|
+| `vio:payment-redirect-start` | `{ method, sponsorId, source }` | At the tap. **Cancelable**: `preventDefault()` and the SDK draws no overlay — draw your own |
+| `vio:payment-redirect-error` | `… , reason` | It could not start. The overlay goes; the checkout opens with Vipps preselected |
+| `vio:payment-redirect-cancel` | `… , reason` | `'express-off'` / `'not-started'`: the checkout opens instead (no error). `'back'`: the shopper came back with the browser's back button. `'cancelled'`: back through Vipps' own cancel (with `checkoutId`) |
+
+`source` is `'detail'`, `'cart'` or `'checkout'`. The overlay is `.vio-redirect-overlay`
+in the light DOM.
+
 ## 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-67QESEV2.js

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

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

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