@shopify/ui-extensions 2025.10.5 → 2025.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.5",
+  "version": "2025.10.7",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",

package/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html

@@ -11,7 +11,7 @@
     id="analytics-picker"
     value="2025-01-01--2025-01-31"
     view="2025-01"
-    onchange="console.log('Date range changed:', event.target.value)"
+    onchange="console.log('Date range changed:', event.currentTarget.value)"
   ></s-date-picker>
   <s-text id="selected-range">
     Selected range: 2025-01-01--2025-01-31
@@ -24,7 +24,7 @@
 
   // Handle picker changes
   picker.addEventListener('change', (event) => {
-    display.textContent = `Selected range: ${event.target.value}`;
+    display.textContent = `Selected range: ${event.currentTarget.value}`;
   });
 
   // Quick selection buttons

package/src/surfaces/checkout/api/address-autocomplete/standard.ts

@@ -178,7 +178,7 @@ interface Extension<
   /**
    * The API version that was set in the extension config file.
    *
-   * @example '2023-10', '2024-01', '2024-04', '2025-07', '2025-10', 'unstable'
+   * @example '2023-10', '2024-01', '2024-04', '2025-07', '2025-10'
    */
   apiVersion: ApiVersion;
 
@@ -232,7 +232,7 @@ interface Extension<
    * extension’s configuration file.
    *
    * @example 'purchase.checkout.block.render'
-   * @see https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview
+   * @see https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview
    * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets
    */
   target: Target;

package/src/surfaces/checkout/api/standard/standard.ts

@@ -62,7 +62,7 @@ export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * The API version that was set in the extension config file.
    *
-   * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10', 'unstable'
+   * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10'
    */
   apiVersion: ApiVersion;
 
@@ -115,7 +115,7 @@ export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
    * extension’s configuration file.
    *
    * @example 'purchase.checkout.block.render'
-   * @see https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview
+   * @see https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview
    * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets
    */
   target: Target;
@@ -597,7 +597,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    * extension’s configuration file.
    *
    * @example 'purchase.checkout.block.render'
-   * @see https://shopify.dev/docs/api/checkout-ui-extensions/unstable/extension-targets-overview
+   * @see https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview
    * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets
    *
    * @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
@@ -726,7 +726,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * The renderer version being used for the extension.
    *
-   * @example 'unstable'
+   * @example '2025-10'
    */
   version: Version;
 
@@ -738,7 +738,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * Allows setting and updating customer privacy consent settings and tracking consent metafields.
    *
-   * > Note: Requires the [`customer_privacy` capability](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) to be set to `true`.
+   * > Note: Requires the [`customer_privacy` capability](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be set to `true`.
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
@@ -755,7 +755,7 @@ export interface Ui {
   /**
    * Allows the extension to close an overlay programmatically.
    *
-   * Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/unstable/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/unstable/components/overlays/popover).
+   * Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/latest/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/latest/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/latest/components/overlays/popover).
    */
   overlay: Overlay;
 }

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

@@ -27,9 +27,14 @@ 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;
+export type ToggleState = 'open' | 'closed';
+export interface ToggleArgumentsEvent {
+    oldState?: ToggleState;
+    newState?: ToggleState;
+}
 
 declare const tagName = "s-announcement";
 export interface AnnouncementEvents extends Pick<AnnouncementProps$1, 'onAfterToggle' | 'onDismiss' | 'onToggle'> {
@@ -46,12 +51,12 @@ export interface AnnouncementElementEvents {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
      */
-    aftertoggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    aftertoggle?: CallbackEventListener<typeof tagName, ToggleArgumentsEvent>;
     /**
      * Callback fired when the announcement is dismissed by the user
      * (either via the built-in dismiss button or programmatically).
      */
-    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    dismiss?: CallbackEventListener<typeof tagName>;
     /**
      * Callback straight after the element state changes.
      *
@@ -64,7 +69,7 @@ export interface AnnouncementElementEvents {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
      */
-    toggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    toggle?: CallbackEventListener<typeof tagName, ToggleArgumentsEvent>;
 }
 export interface AnnouncementElement extends AnnouncementMethods, Omit<HTMLElement, 'id' | 'ontoggle'> {
     onaftertoggle?: AnnouncementEvents['onAfterToggle'];

package/src/surfaces/checkout/components/Banner.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-banner";
@@ -47,7 +47,7 @@ export interface BannerElementEvents {
      * this event must fire after the banner has fully hidden.
      * We can add an `onHide` event in future if we want to provide a hook for the start of the animation.
      */
-    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    afterhide?: CallbackEventListener<typeof tagName>;
     /**
      * Event handler when the banner is dismissed by the user.
      *
@@ -55,7 +55,7 @@ export interface BannerElementEvents {
      *
      * The `hidden` property will be `false` when this event fires.
      */
-    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    dismiss?: CallbackEventListener<typeof tagName>;
 }
 export interface BannerElement extends BannerElementProps, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
     onafterhide: BannerEvents['onAfterHide'];

package/src/surfaces/checkout/components/Button.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-button";
@@ -47,7 +47,7 @@ export interface ButtonElementEvents {
      *
      * @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 ButtonElement extends ButtonElementProps, Omit<HTMLElement, 'id' | 'onclick'> {
     onclick: ButtonEvents['onClick'];

package/src/surfaces/checkout/components/Checkbox.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-checkbox";
@@ -37,7 +37,7 @@ export interface CheckboxElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
 }
 export interface CheckboxElement extends CheckboxElementProps, Omit<HTMLElement, 'id' | 'onchange'> {
     onchange: CheckboxEvents['onChange'];

package/src/surfaces/checkout/components/ChoiceList/examples/basic-choice-list.example.html

@@ -1,7 +1,7 @@
 <s-choice-list>
-  <s-choice defaultSelected value="location-1">
-    Yonge-Dundas Square locations
-  </s-choice>
+  <s-choice defaultSelected value="location-1"
+    >Yonge-Dundas Square locations</s-choice
+  >
   <s-choice value="location-2">Distillery District location</s-choice>
   <s-choice value="location-3">Yorkville location</s-choice>
 </s-choice-list>

package/src/surfaces/checkout/components/ChoiceList/examples/block-choice-variant.example.html

@@ -0,0 +1,47 @@
+<s-choice-list variant="block">
+  <s-choice defaultSelected value="yonge-dundas">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yonge-Dundas Square</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >1 Dundas St E, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">1.2 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="distillery">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Distillery District</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Mill St, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">4 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="yorkville">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yorkville</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Avenue Rd, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">6 km</s-text>
+    </s-stack>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/checkout/components/ChoiceList/examples/grid-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list variant="grid">
+  <s-choice defaultSelected value="standard">Standard</s-choice>
+  <s-choice value="deluxe">Deluxe</s-choice>
+  <s-choice value="personalized">Personalized</s-choice>
+</s-choice-list>

package/src/surfaces/checkout/components/ChoiceList/examples/inline-choice-variant.example.html

@@ -0,0 +1,6 @@
+<s-choice-list variant="inline">
+  <s-choice defaultSelected value="3.50">$3.50</s-choice>
+  <s-choice value="4.50">$4.50</s-choice>
+  <s-choice value="5.50">$5.50</s-choice>
+  <s-choice value="other">Other</s-choice>
+</s-choice-list>

package/src/surfaces/checkout/components/ChoiceList/examples/list-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list>
+  <s-choice defaultSelected value="location-1">Yonge-Dundas Square</s-choice>
+  <s-choice value="location-2">Distillery District</s-choice>
+  <s-choice value="location-3">Yorkville</s-choice>
+</s-choice-list>

package/src/surfaces/checkout/components/ChoiceList.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-choice-list";
@@ -42,7 +42,7 @@ export interface ChoiceListElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
 }
 export interface ChoiceListElement extends ChoiceListElementProps, Omit<HTMLElement, 'id' | 'onchange'> {
     onchange: ChoiceListEvents['onChange'];

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

@@ -30,8 +30,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-clickable";
@@ -51,20 +51,20 @@ export interface ClickableElementEvents {
      *
      * @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 is activated.
      * This will be called before the action indicated by `type`.
      *
      * @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 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 ClickableElement extends ClickableElementProps, Omit<HTMLElement, 'id' | 'lang' | 'onblur' | 'onclick' | 'onfocus'> {
     onblur: ClickableEvents['onBlur'];

package/src/surfaces/checkout/components/ClickableChip.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-clickable-chip";
@@ -42,15 +42,15 @@ export interface ClickableChipElementEvents {
      *
      * The `hidden` property will be `true` when this event fires.
      */
-    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    afterhide?: CallbackEventListener<typeof tagName>;
     /**
      * Event handler when the chip is clicked.
      */
-    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: CallbackEventListener<typeof tagName>;
     /**
      * Event handler when the chip is removed.
      */
-    remove?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    remove?: CallbackEventListener<typeof tagName>;
 }
 export interface ClickableChipElementSlots {
     /**

package/src/surfaces/checkout/components/ClipboardItem.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-clipboard-item";
@@ -34,11 +34,11 @@ export interface ClipboardItemElementEvents {
     /**
      * Callback run when the copy to clipboard succeeds.
      */
-    copy?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    copy?: CallbackEventListener<typeof tagName>;
     /**
      * Callback run when the copy to clipboard fails.
      */
-    copyerror?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    copyerror?: CallbackEventListener<typeof tagName>;
 }
 export interface ClipboardItemElement extends ClipboardItemElementProps, Omit<HTMLElement, 'id' | 'oncopy'> {
     oncopy: ClipboardItemEvents['onCopy'];

package/src/surfaces/checkout/components/ConsentCheckbox.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$1 = "s-checkbox";
@@ -61,7 +61,7 @@ export interface ConsentCheckboxElementEvents {
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
 }
 export interface ConsentCheckboxElement extends ConsentCheckboxElementProps, Omit<HTMLElement, 'id' | 'onchange'> {
     onchange: ConsentCheckboxEvents['onChange'];

package/src/surfaces/checkout/components/ConsentPhoneField.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$1 = "s-phone-field";
@@ -78,25 +78,25 @@ export interface ConsentPhoneFieldElementEvents {
      *
      * @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 ConsentPhoneFieldElement extends ConsentPhoneFieldElementProps, Omit<ConsentPhoneFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
     onblur: ConsentPhoneFieldEvents['onBlur'];
@@ -121,7 +121,7 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: ConsentPhoneFieldProps & BaseElementProps<ConsentPhoneFieldElement>;
+            [tagName]: ConsentPhoneFieldProps & BaseElementPropsWithChildren<ConsentPhoneFieldElement>;
         }
     }
 }

package/src/surfaces/checkout/components/DateField.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-date-field";
@@ -39,27 +39,27 @@ export interface DateFieldElementEvents {
     /**
      * Callback when the element loses focus.
      */
-    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.
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user enters an invalid date.
      */
-    invalid?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    invalid?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the view changes.
      */
-    viewChange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    viewChange?: CallbackEventListener<typeof tagName>;
 }
 export interface DateFieldElement extends DateFieldElementProps, Omit<DateFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onInvalid' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'oninvalid' | 'prefix'> {
     onblur: DateFieldEvents['onBlur'];

package/src/surfaces/checkout/components/DatePicker.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-date-picker";
@@ -34,23 +34,23 @@ export interface DatePickerElementEvents {
     /**
      * Callback when the element loses focus.
      */
-    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.
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the element receives focus.
      */
-    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    focus?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the view changes.
      */
-    viewChange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    viewChange?: CallbackEventListener<typeof tagName>;
 }
 export interface DatePickerElement extends DatePickerElementProps, Omit<DatePickerEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput'> {
     onblur: DatePickerEvents['onBlur'];

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

@@ -27,9 +27,14 @@ 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;
+export type ToggleState = 'open' | 'closed';
+export interface ToggleArgumentsEvent {
+    oldState?: ToggleState;
+    newState?: ToggleState;
+}
 
 declare const tagName = "s-details";
 export interface DetailsElementProps extends Pick<DetailsProps$1, 'defaultOpen' | 'id' | 'open' | 'toggleTransition'> {
@@ -49,7 +54,7 @@ export interface DetailsElementEvents {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
      */
-    toggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    toggle?: CallbackEventListener<typeof tagName, ToggleArgumentsEvent>;
     /**
      * Callback fired when the element state changes **after** any animations have finished.
      *
@@ -61,7 +66,7 @@ export interface DetailsElementEvents {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
      */
-    aftertoggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    aftertoggle?: CallbackEventListener<typeof tagName, ToggleArgumentsEvent>;
 }
 export interface DetailsElement extends Omit<HTMLElement, 'ontoggle' | 'id'> {
     ontoggle: DetailsEvents['onToggle'];

package/src/surfaces/checkout/components/DropZone.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-drop-zone";
@@ -34,15 +34,15 @@ export interface DropZoneElementEvents {
     /**
      * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
      */
-    droprejected?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    droprejected?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user makes any changes in the field.
      */
-    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    input?: CallbackEventListener<typeof tagName>;
     /**
      * Callback when the user has finished selecting a file or files.
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    change?: CallbackEventListener<typeof tagName>;
 }
 export interface DropZoneElement extends DropZoneElementProps, Omit<HTMLElement, 'id' | 'oninput' | 'onchange'> {
     ondroprejected: DropZoneEvents['onDropRejected'];