@vio-live/web-sdk 0.19.0 → 0.23.0

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import '../chunk-PZUOMOLF.js';
-export { ADD_ITEM_MUTATION, AnalyticsManager, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, addItem, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, primaryImageUrl, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from '../chunk-CMNTHF66.js';
+import '../chunk-25QECQDS.js';
+export { ADD_ITEM_MUTATION, AnalyticsManager, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, addItem, autoSlotDisplayName, autoSlotId, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, lineOrigins, normalizeOrigin, normalizeScope, primaryImageUrl, purchaseFromPaymentSuccess, resolveCampaignId, resolveContent, resolveSlotCampaign, sameOrigin, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from '../chunk-AMDI7KH3.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { ADD_ITEM_MUTATION, AddManualOptions, AddProductOptions, AnalyticsCommerce, AnalyticsContext, AnalyticsEventName, AnalyticsItemInput, AnalyticsManager, AnalyticsStartOptions, ApplePayConfig, ApplePayResult, BootstrapResponse, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartChangeDetail, CartLineItem, CartManager, CartQueryOptions, CheckoutAddress, CheckoutChangeDetail, CheckoutManager, CheckoutState, CommerceClient, Configuration, CreatePaymentVippsResponse, CreatePaymentVippsVariables, DELETE_ITEM_MUTATION, Environment, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GetVippsStatusVariables, ImageSize, PaymentCompleteDetail, PaymentMethod, PaymentSelectDetail, PlacementComponent, Product, ProductCategory, ProductImage, ProductOption, ProductPrice, ProductVariant, ResolvedConfig, SDK_VERSION, Sponsor, SponsorCartState, SponsorCommerceBlock, TrackOptions, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, VioConfig, VippsPaymentState, VippsStatusResult, addItem, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, primaryImageUrl, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from './core/index.js';
+export { ADD_ITEM_MUTATION, AddManualOptions, AddProductOptions, AnalyticsCommerce, AnalyticsContext, AnalyticsEventName, AnalyticsItemInput, AnalyticsManager, AnalyticsStartOptions, ApplePayConfig, ApplePayResult, Attribution, BootstrapCampaign, BootstrapCampaignEntry, BootstrapCampaignStatus, BootstrapResponse, BootstrapSlot, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartChangeDetail, CartLineItem, CartLineOrigin, CartManager, CartOrigin, CartQueryOptions, CheckoutAddress, CheckoutChangeDetail, CheckoutManager, CheckoutState, CommerceClient, Configuration, ContentRef, CreatePaymentVippsResponse, CreatePaymentVippsVariables, DELETE_ITEM_MUTATION, Environment, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, GetVippsStatusVariables, ImageSize, ManifestLocation, ManifestRequest, ManifestResult, PaymentCompleteDetail, PaymentMethod, PaymentSelectDetail, PaymentSuccessDetail, PaymentSuccessResult, PlacementComponent, Product, ProductCategory, ProductImage, ProductOption, ProductPrice, ProductVariant, ResolvedConfig, SDK_VERSION, SlotInput, SlotKind, Sponsor, SponsorCartState, SponsorCommerceBlock, TrackOptions, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, VioConfig, VioPlatform, VippsPaymentState, VippsStatusResult, addItem, autoSlotDisplayName, autoSlotId, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, lineOrigins, normalizeOrigin, normalizeScope, primaryImageUrl, purchaseFromPaymentSuccess, resolveCampaignId, resolveContent, resolveSlotCampaign, sameOrigin, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from './core/index.js';
 import 'graphql-request';

package/dist/index.js

@@ -1,4 +1,4 @@
-import './chunk-PZUOMOLF.js';
-export { ADD_ITEM_MUTATION, AnalyticsManager, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, addItem, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, primaryImageUrl, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from './chunk-CMNTHF66.js';
+import './chunk-25QECQDS.js';
+export { ADD_ITEM_MUTATION, AnalyticsManager, CREATE_CART_MUTATION, CREATE_CHECKOUT_MUTATION, CREATE_PAYMENT_STRIPE_MUTATION, CREATE_PAYMENT_VIPPS_MUTATION, CartManager, CheckoutManager, CommerceClient, Configuration, DELETE_ITEM_MUTATION, GET_AVAILABLE_PAYMENT_METHODS_QUERY, GET_CART_QUERY, GET_CHECKOUT_QUERY, GET_LINE_ITEMS_BY_SUPPLIER_QUERY, GET_VIPPS_STATUS_QUERY, SDK_VERSION, UPDATE_CHECKOUT_MUTATION, UPDATE_ITEM_MUTATION, UPDATE_SHIPPINGS_BY_SUPPLIER_MUTATION, VIPPS_BUTTON_SCRIPT, VIPPS_BUTTON_TAG, Vio, VioApi, VioApiError, addItem, autoSlotDisplayName, autoSlotId, checkApplePayAvailability, createCart, createCheckout, createCommerceClient, createPaymentStripe, createPaymentVipps, createVioApi, deleteItem, displayPrice, ensureVippsButton, executeCartGraphQL, formatPrice, getAvailablePaymentMethods, getCart, getCartGraphQLOptions, getCheckout, getCustomerSessionId, getGlobalCurrency, getLineItemsBySupplier, getVippsStatus, lineOrigins, normalizeOrigin, normalizeScope, primaryImageUrl, purchaseFromPaymentSuccess, resolveCampaignId, resolveContent, resolveSlotCampaign, sameOrigin, showApplePaySheet, updateCheckout, updateItem, updateShippingsBySupplier, vippsButtonAttributes } from './chunk-AMDI7KH3.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 import * as _lit_react from '@lit/react';
-import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-IrVSMVcA.js';
-export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-IrVSMVcA.js';
+import { V as VioCart$1, a as VioCheckout$1, b as VioProduct$1, c as VioProductCarousel$1, d as VioProductDetail$1 } from '../tokens-DSYvrBsB.js';
+export { e as VioThemeOverrides, f as VioTokens, g as applyVioTheme } from '../tokens-DSYvrBsB.js';
 import 'lit-html';
 import 'lit';
 

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-NUNGU6LL.js';
-export { VioTokens, applyVioTheme } from '../chunk-NUNGU6LL.js';
-import '../chunk-CMNTHF66.js';
+import { registerVioElements, VioProduct, VioProductCarousel, VioProductDetail, VioCart, VioCheckout } from '../chunk-COCHGJ2K.js';
+export { VioTokens, applyVioTheme } from '../chunk-COCHGJ2K.js';
+import '../chunk-AMDI7KH3.js';
 import * as React from 'react';
 
 // node_modules/@lit/react/node/create-component.js

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n  ? K extends keyof T\n    ? Omit<T, K>\n    : T\n  : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n *   namespace JSX {\n *     interface IntrinsicElements {\n *       'x-foo': WebComponentProps<XFoo>;\n *     }\n *   }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n  React.HTMLAttributes<I>,\n  I\n> &\n  ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n  // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n  // https://github.com/preactjs/preact/issues/4124 is fixed.\n  PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n *   ...\n *   events: {\n *     onfoo: 'foo' as EventName<FooEvent>,\n *   }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName\n    ? (e: R[K]['__eventType']) => void\n    : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n  react: typeof React;\n  tagName: string;\n  elementClass: Constructor<I>;\n  events?: E;\n  displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  // Dirty check event value.\n  if (event !== undefined) {\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n    return;\n  }\n  // But don't dirty check properties; elements are assumed to do this.\n  node[name as keyof E] = value as E[keyof E];\n\n  // This block is to replicate React's behavior for attributes of native\n  // elements where `undefined` or `null` values result in attributes being\n  // removed.\n  // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n  //\n  // It's only needed here for native HTMLElement properties that reflect\n  // attributes of the same name but don't have that behavior like \"id\" or\n  // \"draggable\".\n  if (\n    (value === undefined || value === null) &&\n    name in HTMLElement.prototype\n  ) {\n    node.removeAttribute(name);\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {},\n>({\n  react: React,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  if (DEV_MODE && !NODE_MODE) {\n    for (const p of reservedReactProperties) {\n      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React reserved ` +\n            `property. It will be used by React and not set on the element.`\n        );\n      }\n    }\n  }\n\n  type Props = ComponentProps<I, E>;\n\n  const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n    const prevElemPropsRef = React.useRef(new Map());\n    const elementRef = React.useRef<I | null>(null);\n\n    // Props to be passed to React.createElement\n    const reactProps: Record<string, unknown> = {};\n    // Props to be set on element with setProperty\n    const elementProps: Record<string, unknown> = {};\n\n    for (const [k, v] of Object.entries(props)) {\n      if (reservedReactProperties.has(k)) {\n        // React does *not* handle `className` for custom elements so\n        // coerce it to `class` so it's handled correctly.\n        reactProps[k === 'className' ? 'class' : k] = v;\n        continue;\n      }\n\n      if (eventProps.has(k) || k in elementClass.prototype) {\n        elementProps[k] = v;\n        continue;\n      }\n\n      reactProps[k] = v;\n    }\n\n    // useLayoutEffect produces warnings during server rendering.\n    if (!NODE_MODE) {\n      // This one has no dependency array so it'll run on every re-render.\n      React.useLayoutEffect(() => {\n        if (elementRef.current === null) {\n          return;\n        }\n        const newElemProps = new Map();\n        for (const key in elementProps) {\n          setProperty(\n            elementRef.current,\n            key,\n            props[key],\n            prevElemPropsRef.current.get(key),\n            events\n          );\n          prevElemPropsRef.current.delete(key);\n          newElemProps.set(key, props[key]);\n        }\n        // \"Unset\" any props from previous render that no longer exist.\n        // Setting to `undefined` seems like the correct thing to \"unset\"\n        // but currently React will set it as `null`.\n        // See https://github.com/facebook/react/issues/28203\n        for (const [key, value] of prevElemPropsRef.current) {\n          setProperty(elementRef.current, key, undefined, value, events);\n        }\n        prevElemPropsRef.current = newElemProps;\n      });\n\n      // Empty dependency array so this will only run once after first render.\n      React.useLayoutEffect(() => {\n        elementRef.current?.removeAttribute('defer-hydration');\n      }, []);\n    }\n\n    if (NODE_MODE) {\n      // If component is to be server rendered with `@lit/ssr-react`, pass\n      // element properties in a special bag to be set by the server-side\n      // element renderer.\n      if (\n        (React.createElement.name === 'litPatchedCreateElement' ||\n          globalThis.litSsrReactEnabled) &&\n        Object.keys(elementProps).length\n      ) {\n        // This property needs to remain unminified.\n        reactProps['_$litProps$'] = elementProps;\n      }\n    } else {\n      // Suppress hydration warning for server-rendered attributes.\n      // This property needs to remain unminified.\n      reactProps['suppressHydrationWarning'] = true;\n    }\n\n    return React.createElement(tagName, {\n      ...reactProps,\n      ref: React.useCallback(\n        (node: I) => {\n          elementRef.current = node;\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref !== null) {\n            ref.current = node;\n          }\n        },\n        [ref]\n      ),\n    });\n  });\n\n  ReactComponent.displayName = displayName ?? elementClass.name;\n\n  return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n *   - typed props derived from the element's reactive properties, and\n *   - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n *   import { Vio } from '@vio-live/web-sdk'\n *   import { VioProductCarousel } from '@vio-live/web-sdk/react'\n *   Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n *   <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n  registerVioElements,\n  VioProduct as VioProductEl,\n  VioProductCarousel as VioProductCarouselEl,\n  VioProductDetail as VioProductDetailEl,\n  VioCart as VioCartEl,\n  VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n  react: React,\n  tagName: 'vio-product',\n  elementClass: VioProductEl,\n  events: {\n    onProductClick: 'vio:product-click',\n    onProductAdd: 'vio:product-add',\n  },\n})\n\nexport const VioProductCarousel = createComponent({\n  react: React,\n  tagName: 'vio-product-carousel',\n  elementClass: VioProductCarouselEl,\n  events: {},\n})\n\nexport const VioProductDetail = createComponent({\n  react: React,\n  tagName: 'vio-product-detail',\n  elementClass: VioProductDetailEl,\n  events: {\n    onAddedToCart: 'vio:added-to-cart',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCart = createComponent({\n  react: React,\n  tagName: 'vio-cart',\n  elementClass: VioCartEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCheckout = createComponent({\n  react: React,\n  tagName: 'vio-checkout',\n  elementClass: VioCheckoutEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n  },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}
+{"version":3,"sources":["../../node_modules/@lit/react/src/create-component.ts","../../src/react/index.ts"],"names":["reservedReactProperties","Set","createComponent","react","React","tagName","elementClass","events","displayName","eventProps","Object","keys","ReactComponent","forwardRef","props","ref","useRef","Map","elementRef","reactProps","elementProps","k","v","entries","has","prototype","createElement","name","globalThis","litSsrReactEnabled","length","useCallback","node","current","VioProduct","VioProductCarousel","VioProductDetail","VioCart","VioCheckout"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport type React from 'react';\n\nconst NODE_MODE = false;\nconst DEV_MODE = true;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DistributiveOmit<T, K extends string | number | symbol> = T extends any\n  ? K extends keyof T\n    ? Omit<T, K>\n    : T\n  : T;\ntype PropsWithoutRef<T> = DistributiveOmit<T, 'ref'>;\n\n/**\n * Creates a type to be used for the props of a web component used directly in\n * React JSX.\n *\n * Example:\n *\n * ```ts\n * declare module \"react\" {\n *   namespace JSX {\n *     interface IntrinsicElements {\n *       'x-foo': WebComponentProps<XFoo>;\n *     }\n *   }\n * }\n * ```\n */\nexport type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<\n  React.HTMLAttributes<I>,\n  I\n> &\n  ElementProps<I>;\n\n/**\n * Type of the React component wrapping the web component. This is the return\n * type of `createComponent`.\n */\nexport type ReactWebComponent<\n  I extends HTMLElement,\n  E extends EventNames = {},\n> = React.ForwardRefExoticComponent<\n  // TODO(augustjk): Remove and use `React.PropsWithoutRef` when\n  // https://github.com/preactjs/preact/issues/4124 is fixed.\n  PropsWithoutRef<ComponentProps<I, E>> & React.RefAttributes<I>\n>;\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO(augustjk) Consider omitting keyof LitElement to remove \"internal\"\n// lifecycle methods or allow user to explicitly provide props.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\n/**\n * Type used to cast an event name with an event type when providing the\n * `events` option to `createComponent` for better typing of the event handler\n * prop.\n *\n * Example:\n *\n * ```ts\n * const FooComponent = createComponent({\n *   ...\n *   events: {\n *     onfoo: 'foo' as EventName<FooEvent>,\n *   }\n * });\n * ```\n *\n * `onfoo` prop will have the type `(e: FooEvent) => void`.\n */\nexport type EventName<T extends Event = Event> = string & {\n  __eventType: T;\n};\n\n// A key value map matching React prop names to event names.\ntype EventNames = Record<string, EventName | string>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName\n    ? (e: R[K]['__eventType']) => void\n    : (e: Event) => void;\n};\n\nexport interface Options<I extends HTMLElement, E extends EventNames = {}> {\n  react: typeof React;\n  tagName: string;\n  elementClass: Constructor<I>;\n  events?: E;\n  displayName?: string;\n}\n\ntype Constructor<T> = {new (): T};\n\nconst reservedReactProperties = new Set([\n  'children',\n  'localName',\n  'ref',\n  'style',\n  'className',\n]);\n\nconst listenedEvents = new WeakMap<Element, Map<string, EventListenerObject>>();\n\n/**\n * Adds an event listener for the specified event to the given node. In the\n * React setup, there should only ever be one event listener. Thus, for\n * efficiency only one listener is added and the handler for that listener is\n * updated to point to the given listener function.\n */\nconst addOrUpdateEventListener = (\n  node: Element,\n  event: string,\n  listener: (event?: Event) => void\n) => {\n  let events = listenedEvents.get(node);\n  if (events === undefined) {\n    listenedEvents.set(node, (events = new Map()));\n  }\n  let handler = events.get(event);\n  if (listener !== undefined) {\n    // If necessary, add listener and track handler\n    if (handler === undefined) {\n      events.set(event, (handler = {handleEvent: listener}));\n      node.addEventListener(event, handler);\n      // Otherwise just update the listener with new value\n    } else {\n      handler.handleEvent = listener;\n    }\n    // Remove listener if one exists and value is undefined\n  } else if (handler !== undefined) {\n    events.delete(event);\n    node.removeEventListener(event, handler);\n  }\n};\n\n/**\n * Sets properties and events on custom elements. These properties and events\n * have been pre-filtered so we know they should apply to the custom element.\n */\nconst setProperty = <E extends Element>(\n  node: E,\n  name: string,\n  value: unknown,\n  old: unknown,\n  events?: EventNames\n) => {\n  const event = events?.[name];\n  // Dirty check event value.\n  if (event !== undefined) {\n    if (value !== old) {\n      addOrUpdateEventListener(node, event, value as (e?: Event) => void);\n    }\n    return;\n  }\n  // But don't dirty check properties; elements are assumed to do this.\n  node[name as keyof E] = value as E[keyof E];\n\n  // This block is to replicate React's behavior for attributes of native\n  // elements where `undefined` or `null` values result in attributes being\n  // removed.\n  // https://github.com/facebook/react/blob/899cb95f52cc83ab5ca1eb1e268c909d3f0961e7/packages/react-dom-bindings/src/client/DOMPropertyOperations.js#L107-L141\n  //\n  // It's only needed here for native HTMLElement properties that reflect\n  // attributes of the same name but don't have that behavior like \"id\" or\n  // \"draggable\".\n  if (\n    (value === undefined || value === null) &&\n    name in HTMLElement.prototype\n  ) {\n    node.removeAttribute(name);\n  }\n};\n\n/**\n * Creates a React component for a custom element. Properties are distinguished\n * from attributes automatically, and events can be configured so they are added\n * to the custom element as event listeners.\n *\n * @param options An options bag containing the parameters needed to generate a\n * wrapped web component.\n *\n * @param options.react The React module, typically imported from the `react`\n * npm package.\n * @param options.tagName The custom element tag name registered via\n * `customElements.define`.\n * @param options.elementClass The custom element class registered via\n * `customElements.define`.\n * @param options.events An object listing events to which the component can\n * listen. The object keys are the event property names passed in via React\n * props and the object values are the names of the corresponding events\n * generated by the custom element. For example, given `{onactivate:\n * 'activate'}` an event function may be passed via the component's `onactivate`\n * prop and will be called when the custom element fires its `activate` event.\n * @param options.displayName A React component display name, used in debugging\n * messages. Default value is inferred from the name of custom element class\n * registered via `customElements.define`.\n */\nexport const createComponent = <\n  I extends HTMLElement,\n  E extends EventNames = {},\n>({\n  react: React,\n  tagName,\n  elementClass,\n  events,\n  displayName,\n}: Options<I, E>): ReactWebComponent<I, E> => {\n  const eventProps = new Set(Object.keys(events ?? {}));\n\n  if (DEV_MODE && !NODE_MODE) {\n    for (const p of reservedReactProperties) {\n      if (p in elementClass.prototype && !(p in HTMLElement.prototype)) {\n        // Note, this effectively warns only for `ref` since the other\n        // reserved props are on HTMLElement.prototype. To address this\n        // would require crawling down the prototype, which doesn't feel worth\n        // it since implementing these properties on an element is extremely\n        // rare.\n        console.warn(\n          `${tagName} contains property ${p} which is a React reserved ` +\n            `property. It will be used by React and not set on the element.`\n        );\n      }\n    }\n  }\n\n  type Props = ComponentProps<I, E>;\n\n  const ReactComponent = React.forwardRef<I, Props>((props, ref) => {\n    const prevElemPropsRef = React.useRef(new Map());\n    const elementRef = React.useRef<I | null>(null);\n\n    // Props to be passed to React.createElement\n    const reactProps: Record<string, unknown> = {};\n    // Props to be set on element with setProperty\n    const elementProps: Record<string, unknown> = {};\n\n    for (const [k, v] of Object.entries(props)) {\n      if (reservedReactProperties.has(k)) {\n        // React does *not* handle `className` for custom elements so\n        // coerce it to `class` so it's handled correctly.\n        reactProps[k === 'className' ? 'class' : k] = v;\n        continue;\n      }\n\n      if (eventProps.has(k) || k in elementClass.prototype) {\n        elementProps[k] = v;\n        continue;\n      }\n\n      reactProps[k] = v;\n    }\n\n    // useLayoutEffect produces warnings during server rendering.\n    if (!NODE_MODE) {\n      // This one has no dependency array so it'll run on every re-render.\n      React.useLayoutEffect(() => {\n        if (elementRef.current === null) {\n          return;\n        }\n        const newElemProps = new Map();\n        for (const key in elementProps) {\n          setProperty(\n            elementRef.current,\n            key,\n            props[key],\n            prevElemPropsRef.current.get(key),\n            events\n          );\n          prevElemPropsRef.current.delete(key);\n          newElemProps.set(key, props[key]);\n        }\n        // \"Unset\" any props from previous render that no longer exist.\n        // Setting to `undefined` seems like the correct thing to \"unset\"\n        // but currently React will set it as `null`.\n        // See https://github.com/facebook/react/issues/28203\n        for (const [key, value] of prevElemPropsRef.current) {\n          setProperty(elementRef.current, key, undefined, value, events);\n        }\n        prevElemPropsRef.current = newElemProps;\n      });\n\n      // Empty dependency array so this will only run once after first render.\n      React.useLayoutEffect(() => {\n        elementRef.current?.removeAttribute('defer-hydration');\n      }, []);\n    }\n\n    if (NODE_MODE) {\n      // If component is to be server rendered with `@lit/ssr-react`, pass\n      // element properties in a special bag to be set by the server-side\n      // element renderer.\n      if (\n        (React.createElement.name === 'litPatchedCreateElement' ||\n          globalThis.litSsrReactEnabled) &&\n        Object.keys(elementProps).length\n      ) {\n        // This property needs to remain unminified.\n        reactProps['_$litProps$'] = elementProps;\n      }\n    } else {\n      // Suppress hydration warning for server-rendered attributes.\n      // This property needs to remain unminified.\n      reactProps['suppressHydrationWarning'] = true;\n    }\n\n    return React.createElement(tagName, {\n      ...reactProps,\n      ref: React.useCallback(\n        (node: I) => {\n          elementRef.current = node;\n          if (typeof ref === 'function') {\n            ref(node);\n          } else if (ref !== null) {\n            ref.current = node;\n          }\n        },\n        [ref]\n      ),\n    });\n  });\n\n  ReactComponent.displayName = displayName ?? elementClass.name;\n\n  return ReactComponent;\n};\n","/**\n * Vio React adapter — typed React wrappers for the `<vio-*>` web components.\n *\n * Built on `@lit/react`'s `createComponent`, which gives each wrapper:\n *   - typed props derived from the element's reactive properties, and\n *   - typed event props (the `vio:*` CustomEvents below) as `onX` callbacks.\n *\n * Importing this entry also REGISTERS the custom elements (via the\n * `registerVioElements()` call below), so you do NOT need a separate\n * `import '@vio-live/web-sdk/ui'` when you use these.\n *\n * React 18+ is an (optional) peer dependency — only required if you import this\n * entry. `@lit/react` is bundled in, so consumers install nothing extra.\n *\n *   import { Vio } from '@vio-live/web-sdk'\n *   import { VioProductCarousel } from '@vio-live/web-sdk/react'\n *   Vio.init({ apiKey, apiBase, graphqlBase, stripePublishableKey })\n *   <VioProductCarousel onProductAdd={(e) => console.log(e.detail)} />\n *\n * Slots (ADR-0027): the element property is `vioSlot` (attribute `vio-slot`),\n * so in React it is `<VioProductCarousel vioSlot=\"hero\" />`. `@lit/react`\n * passes every reactive property of the element class through as a prop and\n * sets it on the element after mount — the elements re-register the slot from\n * `updated()`, so the late set is fine. `slot` itself is React's/HTML's own\n * attribute (shadow DOM slotting) — do not use it for this.\n * Typed in `index.props.test.ts` (compile-time, checked by `npm run typecheck`).\n */\n\nimport * as React from 'react'\nimport { createComponent } from '@lit/react'\nimport {\n  registerVioElements,\n  VioProduct as VioProductEl,\n  VioProductCarousel as VioProductCarouselEl,\n  VioProductDetail as VioProductDetailEl,\n  VioCart as VioCartEl,\n  VioCheckout as VioCheckoutEl,\n} from '../ui/elements.js'\n// Not just for the re-export below — the import itself injects the default\n// design tokens as CSS custom properties on `:root` (see tokens.ts). Without\n// it, `elements.js` alone never pulls tokens.ts in, so this entry (the one\n// the Vev bundle actually goes through) never ran that injection.\nimport '../ui/tokens.js'\n\n// Register the underlying custom elements when this entry is imported.\nregisterVioElements()\n\nexport const VioProduct = createComponent({\n  react: React,\n  tagName: 'vio-product',\n  elementClass: VioProductEl,\n  events: {\n    onProductClick: 'vio:product-click',\n    onProductAdd: 'vio:product-add',\n  },\n})\n\nexport const VioProductCarousel = createComponent({\n  react: React,\n  tagName: 'vio-product-carousel',\n  elementClass: VioProductCarouselEl,\n  events: {},\n})\n\nexport const VioProductDetail = createComponent({\n  react: React,\n  tagName: 'vio-product-detail',\n  elementClass: VioProductDetailEl,\n  events: {\n    onAddedToCart: 'vio:added-to-cart',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCart = createComponent({\n  react: React,\n  tagName: 'vio-cart',\n  elementClass: VioCartEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n    onCheckoutOpen: 'vio:checkout-open',\n  },\n})\n\nexport const VioCheckout = createComponent({\n  react: React,\n  tagName: 'vio-checkout',\n  elementClass: VioCheckoutEl,\n  events: {\n    onPaymentSuccess: 'vio:payment-success',\n  },\n})\n\nexport { VioTokens, applyVioTheme, type VioThemeOverrides } from '../ui/tokens.js'\n"]}

package/dist/{tokens-IrVSMVcA.d.ts → tokens-DSYvrBsB.d.ts}

@@ -17,6 +17,41 @@ declare class VioProduct extends LitElement {
     productId: string;
     /** Vio sponsor id, propagated to click event. */
     sponsorId: string;
+    /**
+     * Slot this card sits in (ADR-0027). Optional: without it the card registers
+     * itself as `card-N` (its position among the cards on the page). Set it to
+     * name the place yourself or to make several elements share one slot. It is
+     * carried by every event the card emits, so attribution goes to the campaign
+     * assigned to the slot. The attribute is `vio-slot`, not `slot` — that one
+     * is HTML's own (shadow DOM slotting).
+     */
+    vioSlot: string;
+    /** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
+    vioSlotName: string;
+    /**
+     * Scope of the auto id (`article-123-card-1`). Inherited: this attribute,
+     * else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
+     * `<body>` and every block gets a per-page slot). Optional.
+     */
+    vioScope: string;
+    /** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
+    vioScopeName: string;
+    /** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
+    vioContentId: string;
+    /** Per-element override of the content title. */
+    vioContentTitle: string;
+    private readonly slotRegistration;
+    /** The slot id in effect: `vio-slot`, else the auto id (`card-N`). Read-only. */
+    get effectiveSlot(): string;
+    /** The slot campaign's sponsor as the string the attributes use ('' when unknown). */
+    private sponsorFromAttribution;
+    private slotAttributes;
+    /**
+     * What every event carries for attribution (`Vio.attribution`): the place,
+     * its campaign and sponsor, and the content — overridden here when the host
+     * set `vio-content-id` / `vio-content-title` on this card.
+     */
+    private attribution;
     /** Whether the product has selectable variants — the quick-add button then
      * opens the detail to pick one instead of adding directly. */
     hasVariants: boolean;
@@ -84,6 +119,36 @@ declare class VioProductCarousel extends LitElement {
     productRefs: string;
     /** Currency for product prices. */
     currency: string;
+    /**
+     * Slot this carousel sits in (ADR-0027). Optional: without it the carousel
+     * registers itself as `carousel-N` (its position among the carousels on the
+     * page). Set it to name the place yourself or to share one slot between
+     * elements. Passed to every card it renders, carried by its analytics, and
+     * — without a `sponsor-id` — the source of the sponsor (the primary of the
+     * campaign assigned to the slot). The attribute is `vio-slot`, not `slot`
+     * (that one is HTML's own, shadow DOM slotting).
+     */
+    vioSlot: string;
+    /** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
+    vioSlotName: string;
+    /**
+     * Scope of the auto id (`article-123-carousel-1`). Inherited: this attribute,
+     * else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
+     * `<body>` and every block gets a per-page slot). Optional.
+     */
+    vioScope: string;
+    /** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
+    vioScopeName: string;
+    /** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
+    vioContentId: string;
+    /** Per-element override of the content title. */
+    vioContentTitle: string;
+    private readonly slotRegistration;
+    /** The slot id in effect: `vio-slot`, else the auto id (`carousel-N`). Read-only. */
+    get effectiveSlot(): string;
+    private slotAttributes;
+    /** Attribution every analytics event of this carousel carries (`Vio.attribution` + the content overrides). */
+    private attribution;
     private scroller;
     private fetched;
     private isLoading;
@@ -92,6 +157,12 @@ declare class VioProductCarousel extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    /**
+     * The sponsor of this carousel: the host's `sponsor-id`, else the primary
+     * sponsor of the campaign the slot shows (ADR-0034 — "the campaign of the
+     * block is its sponsor"), else 0 (unknown).
+     */
+    private effectiveSponsorId;
     private autoFetch;
     private unobserveImpression;
     private impressed;
@@ -118,6 +189,40 @@ declare class VioProductDetail extends LitElement {
     /** Subscribe to `vio:product-click` on the document and auto-open. */
     autoOpen: boolean;
     currency: string;
+    /**
+     * Slot this detail belongs to (ADR-0027). Optional: without it the detail
+     * registers itself as `detail-N`. Carried by every event it emits. A
+     * `vio:product-click` that names a slot (every card does — its own or the
+     * carousel's) takes precedence while that product is open. The attribute is
+     * `vio-slot`, not `slot` (HTML's own).
+     */
+    vioSlot: string;
+    /** Human name of the slot for the dashboard (`vio-slot-name`). Optional. */
+    vioSlotName: string;
+    /**
+     * Scope of the auto id (`article-123-detail-1`). Inherited: this attribute,
+     * else the nearest ancestor's `data-vio-scope` (a page sets it ONCE on
+     * `<body>` and every block gets a per-page slot). Optional.
+     */
+    vioScope: string;
+    /** Human label of the scope (` · Title` in the slot name); inherited from `data-vio-scope-name`. */
+    vioScopeName: string;
+    /** Per-element override of the content (article) id the events carry; see `Vio.content()`. */
+    vioContentId: string;
+    /** Per-element override of the content title. */
+    vioContentTitle: string;
+    private readonly slotRegistration;
+    /** What the click that opened the detail carried ('' when nothing). */
+    private eventSlot;
+    private eventContentId;
+    private eventContentTitle;
+    /** The slot id in effect for this element: `vio-slot`, else the auto id (`detail-N`). Read-only. */
+    get effectiveSlot(): string;
+    /** The slot the open product is attributed to: the opening card's, else this element's. */
+    private get activeSlot();
+    private slotAttributes;
+    /** Attribution every event of the open product carries (`Vio.attribution` of the opening card's slot, else this element's). */
+    private attribution;
     private product;
     /**
      * The header: the seller's Company name (Settings → Company), not the
@@ -146,10 +251,13 @@ declare class VioProductDetail extends LitElement {
     private optMapCache;
     /** Pre-prepared Apple Pay handle — show() fires synchronously on tap. */
     private applePayHandle;
+    /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
+    private readonly dialogFocus;
     private boundProductClick;
     static styles: lit.CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
     show(): void;
     close(): void;
     private fetchProduct;
@@ -279,6 +387,8 @@ declare class VioCart extends LitElement {
     private preparedTotal;
     /** In-flight guard for loadAvailablePaymentMethods. */
     private loadingPaymentMethods;
+    /** Keyboard and focus while open: Escape closes, Tab stays inside, focus returns to the opener. */
+    private readonly dialogFocus;
     private boundOnCartChange;
     static styles: lit.CSSResult;
     connectedCallback(): void;
@@ -490,6 +600,13 @@ declare class VioCheckout extends LitElement {
     private form;
     /** In-flight guard for loadAvailablePaymentMethods. */
     private loadingPaymentMethods;
+    /**
+     * Keyboard and focus while open: Escape closes — not while a payment is
+     * in flight — Tab stays inside, focus returns to the opener.
+     */
+    private readonly dialogFocus;
+    /** A payment is being started or confirmed right now: the overlay must not close under it. */
+    private get paymentInFlight();
     /**
      * Whether a load has COMPLETED, either way. `availableMethods === null`
      * cannot tell "not asked yet" from "asked and failed", and rendering every

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-IrVSMVcA.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-DSYvrBsB.js';
 import 'lit-html';
 import 'lit';
 

package/dist/ui/index.js

@@ -1,6 +1,6 @@
-import { registerVioElements } from '../chunk-NUNGU6LL.js';
-export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-NUNGU6LL.js';
-import '../chunk-CMNTHF66.js';
+import { registerVioElements } from '../chunk-COCHGJ2K.js';
+export { VioCart, VioCheckout, VioProduct, VioProductCarousel, VioProductDetail, VioTokens, applyVioTheme, registerVioElements } from '../chunk-COCHGJ2K.js';
+import '../chunk-AMDI7KH3.js';
 
 // src/ui/index.ts
 registerVioElements();

package/package.json

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