@shopify/ui-extensions 2025.10.5 → 2025.10.7

package/src/surfaces/checkout/components/EmailField.d.ts

@@ -18,11 +18,17 @@ export interface BaseElementProps<TClass = HTMLElement> {
     ref?: preact.Ref<TClass>;
     slot?: Lowercase<string>;
 }
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-email-field";
@@ -41,25 +47,25 @@ export interface EmailFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface EmailFieldElementSlots {
     /**
@@ -84,7 +90,7 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: EmailFieldProps & BaseElementProps<EmailFieldElement>;
+            [tagName]: EmailFieldProps & BaseElementPropsWithChildren<EmailFieldElement>;
         }
     }
 }

package/src/surfaces/checkout/components/Form.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-form";
@@ -44,7 +44,7 @@ export interface FormElementEvents {
     /**
      * A callback that is run when the form is submitted.
      */
-    submit?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    submit?: CallbackEventListener<typeof tagName>;
 }
 export interface FormElement extends FormElementProps, Omit<HTMLElement, 'id' | 'onsubmit'> {
     onsubmit: FormEvents['onSubmit'];

package/src/surfaces/checkout/components/Icon/examples/basic-icon.example.html

@@ -1,4 +1,4 @@
-<s-icon type="store"></s-icon>
-<s-icon type="star"></s-icon>
-<s-icon type="settings"></s-icon>
-<s-icon type="image"></s-icon>
+<s-icon type="store" />
+<s-icon type="star" />
+<s-icon type="settings" />
+<s-icon type="image" />

package/src/surfaces/checkout/components/Link.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-link";
@@ -45,7 +45,7 @@ export interface LinkElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
      */
-    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: CallbackEventListener<typeof tagName>;
 }
 export interface LinkElement extends LinkElementProps, Omit<HTMLElement, 'id' | 'lang' | 'onclick'> {
     onclick: LinkEvents['onClick'];

package/src/surfaces/checkout/components/Map/examples/map-marker-graphic.example.html

@@ -0,0 +1,14 @@
+<s-map
+  apiKey="YOUR_API_KEY"
+  blockSize="400px"
+  inlineSize="400px"
+  latitude={37.7749}
+  longitude={-122.4194}
+>
+  <s-map-marker
+    latitude={37.7749}
+    longitude={-122.4194}
+  >
+    <s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" slot="graphic"></s-image>
+  </s-map-marker>
+</s-map>

package/src/surfaces/checkout/components/Map/examples/map-marker-popover.example.html

@@ -0,0 +1,14 @@
+<s-map
+  apiKey="YOUR_API_KEY"
+  blockSize="400px"
+  inlineSize="400px"
+  latitude={37.7749}
+  longitude={-122.4194}
+>
+  <s-map-marker
+    latitude={37.7749}
+    longitude={-122.4194}
+    commandFor="popover-san-francisco"
+  ></s-map-marker>
+  <s-popover id="popover-san-francisco">San Francisco</s-popover>
+</s-map>

package/src/surfaces/checkout/components/Map.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-map";
@@ -36,23 +36,39 @@ export interface MapElementProps extends Pick<MapProps$1, 'accessibilityLabel' |
 }
 export interface MapEvents extends Pick<MapProps$1, 'onBoundsChange' | 'onClick' | 'onDblClick' | 'onViewChange'> {
 }
+export interface MapLocation {
+    latitude?: number;
+    longitude?: number;
+}
+export interface MapLocationEvent {
+    location?: MapLocation;
+}
+export interface MapBoundsEvent {
+    bounds?: {
+        northEast?: MapLocation;
+        southWest?: MapLocation;
+    };
+}
+export interface MapViewChangeEvent extends MapLocationEvent {
+    zoom?: number;
+}
 export interface MapElementEvents {
     /**
      * Callback when the viewport bounds have changed or the map is resized.
      */
-    boundschange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    boundschange?: CallbackEventListener<typeof tagName, MapBoundsEvent>;
     /**
      * Callback when the user clicks on the map.
      */
-    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: CallbackEventListener<typeof tagName, MapLocationEvent>;
     /**
      * Callback when the user double-clicks on the map.
      */
-    dblclick?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    dblclick?: CallbackEventListener<typeof tagName, MapLocationEvent>;
     /**
      * Callback when the map view changes.
      */
-    viewchange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    viewchange?: CallbackEventListener<typeof tagName, MapViewChangeEvent>;
 }
 export interface MapElement extends MapElementProps, Omit<HTMLElement, 'id' | 'onclick' | 'ondblclick'> {
     onboundschange: MapEvents['onBoundsChange'];
@@ -75,4 +91,4 @@ declare module 'preact' {
     }
 }
 
-export type { MapElement, MapElementEvents, MapElementProps, MapEvents, MapProps };
+export type { MapBoundsEvent, MapElement, MapElementEvents, MapElementProps, MapEvents, MapLocation, MapLocationEvent, MapProps, MapViewChangeEvent };

package/src/surfaces/checkout/components/MapMarker.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-map-marker";
@@ -43,7 +43,7 @@ export interface MapMarkerElementEvents {
      *
      * It does not trigger a click event on the map itself.
      */
-    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: CallbackEventListener<typeof tagName>;
 }
 export interface MapMarkerElementSlots {
     /**

package/src/surfaces/checkout/components/Modal.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-modal";
@@ -53,19 +53,19 @@ export interface ModalElementEvents {
     /**
      * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
      */
-    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    afterhide?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
      */
-    aftershow?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    aftershow?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired after the overlay is hidden.
      */
-    hide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    hide?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired after the overlay is shown.
      */
-    show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    show?: CallbackEventListener<typeof tagName>;
 }
 export interface ModalElement extends ModalElementProps, ModalElementMethods, Omit<HTMLElement, 'id'> {
     onafterhide: ModalEvents['onAfterHide'];

package/src/surfaces/checkout/components/MoneyField.d.ts

@@ -21,8 +21,8 @@ export interface BaseElementProps<TClass = HTMLElement> {
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-money-field";
@@ -36,25 +36,25 @@ export interface MoneyFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface MoneyFieldElement extends MoneyFieldElementProps {
     onblur: MoneyFieldEvents['onBlur'];

package/src/surfaces/checkout/components/NumberField.d.ts

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {NumberFieldProps$1} from './components-shared.d.ts';
+import type {IconProps$1, NumberFieldProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -24,15 +24,44 @@ export interface BaseElementProps<TClass = HTMLElement> {
 export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
     children?: preact.ComponentChildren;
 }
+/**
+ * Used as the single source of truth for checkout icon types.
+ *
+ * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ */
+declare const CHECKOUT_AVAILABLE_ICONS: readonly ["alert-circle", "alert-triangle-filled", "alert-triangle", "arrow-down", "arrow-left", "arrow-right", "arrow-up-right", "arrow-up", "bag", "bullet", "calendar", "camera", "caret-down", "cart", "cash-dollar", "categories", "check-circle", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clipboard", "clock", "credit-card", "delete", "delivered", "delivery", "disabled", "discount", "edit", "email", "empty", "external", "filter", "geolocation", "gift-card", "globe", "grid", "image", "info-filled", "info", "list-bulleted", "location", "lock", "map", "menu-horizontal", "menu-vertical", "menu", "minus", "mobile", "note", "order", "organization", "plus", "profile", "question-circle-filled", "question-circle", "reorder", "reset", "return", "savings", "search", "settings", "star-filled", "star-half", "star", "store", "truck", "upload", "x-circle-filled", "x-circle", "x"];
+export type ReducedIconTypes = (typeof CHECKOUT_AVAILABLE_ICONS)[number];
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
+declare const tagName$1 = "s-icon";
+export interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {
+    tone?: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
+    size?: Extract<IconProps$1['size'], 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
+    type?: '' | ReducedIconTypes;
+}
+export interface IconElement extends IconProps, Omit<HTMLElement, 'id'> {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$1]: IconElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$1]: IconProps & BaseElementProps<IconElement>;
+        }
+    }
+}
+
 declare const tagName = "s-number-field";
-export interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'autocomplete' | 'controls' | 'defaultValue' | 'details' | 'disabled' | 'error' | 'icon' | 'id' | 'inputMode' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
+export interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'autocomplete' | 'controls' | 'defaultValue' | 'disabled' | 'error' | 'icon' | 'inputMode' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
+    icon?: IconProps['type'];
     /**
      * @deprecated Use `label` instead.
      * @private
@@ -47,31 +76,25 @@ export interface NumberFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
-}
-export interface NumberFieldElement extends NumberFieldElementProps, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
-    onblur: NumberFieldEvents['onBlur'];
-    onchange: NumberFieldEvents['onChange'];
-    onfocus: NumberFieldEvents['onFocus'];
-    oninput: NumberFieldEvents['onInput'];
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface NumberFieldElementSlots {
     /**
@@ -80,6 +103,12 @@ export interface NumberFieldElementSlots {
      */
     accessory?: HTMLElement;
 }
+export interface NumberFieldElement extends NumberFieldElementProps, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+    onblur: NumberFieldEvents['onBlur'];
+    onchange: NumberFieldEvents['onChange'];
+    onfocus: NumberFieldEvents['onFocus'];
+    oninput: NumberFieldEvents['onInput'];
+}
 export interface NumberFieldProps extends NumberFieldElementProps, NumberFieldEvents {
 }
 declare global {

package/src/surfaces/checkout/components/PasswordField.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-password-field";
@@ -42,25 +42,25 @@ export interface PasswordFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface PasswordFieldElementSlots {
     /**

package/src/surfaces/checkout/components/PaymentIcon/examples/basic-payment-icon.example.html

@@ -1,7 +1,7 @@
-<s-payment-icon type="paypal"></s-payment-icon>
-<s-payment-icon type="apple-pay"></s-payment-icon>
-<s-payment-icon type="mastercard"></s-payment-icon>
-<s-payment-icon type="shop-pay"></s-payment-icon>
-<s-payment-icon type="visa"></s-payment-icon>
-<s-payment-icon type="amex"></s-payment-icon>
-<s-payment-icon type="klarna"></s-payment-icon>
+<s-payment-icon type="paypal" />
+<s-payment-icon type="apple-pay" />
+<s-payment-icon type="mastercard" />
+<s-payment-icon type="shop-pay" />
+<s-payment-icon type="visa" />
+<s-payment-icon type="amex" />
+<s-payment-icon type="klarna" />

package/src/surfaces/checkout/components/PhoneField.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-phone-field";
@@ -47,25 +47,25 @@ export interface PhoneFieldElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
 }
 export interface PhoneFieldElementSlots {
     /**

package/src/surfaces/checkout/components/Popover.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-popover";
@@ -88,11 +88,11 @@ export interface PopoverElementEvents {
     /**
      * Callback fired after the overlay is hidden.
      */
-    hide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    hide?: CallbackEventListener<typeof tagName>;
     /**
      * Callback fired after the overlay is shown.
      */
-    show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    show?: CallbackEventListener<typeof tagName>;
 }
 export interface PopoverElement extends Omit<PopoverProps, 'onHide' | 'onShow'>, Omit<HTMLElement, 'id'> {
     onhide: PopoverProps['onHide'];

package/src/surfaces/checkout/components/PressButton.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-press-button";
@@ -42,19 +42,19 @@ export interface PressButtonElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
      */
-    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the button has lost focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the button has received focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
 }
 export interface PressButtonElement extends PressButtonElementProps, Omit<HTMLElement, 'children' | 'lang' | 'id' | 'onblur' | 'onclick' | 'onfocus'> {
     onblur: PressButtonEvents['onBlur'];

package/src/surfaces/checkout/components/ProductThumbnail/examples/basic-product-thumbnail.example.html

@@ -1,4 +1,4 @@
 <s-product-thumbnail
   src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
-  totalItems={1}
+  totalItems={2}
 ></s-product-thumbnail>

package/src/surfaces/checkout/components/QRCode.d.ts

@@ -21,8 +21,8 @@ export interface BaseElementProps<TClass = HTMLElement> {
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-qr-code";
@@ -35,7 +35,7 @@ export interface QRCodeElementEvents {
      * Invoked when the conversion of `content` to a QR code fails.
      * If an error occurs, the QR code and its child elements will not be displayed.
      */
-    error?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    error?: CallbackEventListener<typeof tagName>;
 }
 export interface QRCodelement extends QRCodeElementProps, Omit<HTMLElement, 'id' | 'onerror'> {
     onerror: QRCodeEvents['onError'];

package/src/surfaces/checkout/components/Select.d.ts

@@ -27,8 +27,8 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
-export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
-    (event: CallbackEvent<TTagName, TEvent>): void;
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
 }) | null;
 
 declare const tagName = "s-select";
@@ -42,19 +42,19 @@ export interface SelectElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
 }
 export interface SelectElement extends SelectElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus'> {
     onblur: SelectEvents['onBlur'];