@shopify/ui-extensions 2026.7.1 → 2026.7.3

package/build/ts/surfaces/customer-account/components/LoginWithShop.d.ts

@@ -0,0 +1,164 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* eslint-disable import-x/namespace */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+
+/**
+ * The base properties for elements that don't have children, providing essential attributes like keys and refs for component management.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    /**
+     * A unique identifier for this element within its parent. Used by the rendering engine for efficient reconciliation when lists change.
+     */
+    key?: preact.Key;
+    /**
+     * A reference to the underlying DOM element, typically created using `useRef()`. This allows you to access and manipulate the DOM element directly in your component logic.
+     */
+    ref?: preact.Ref<TClass>;
+    /**
+     * Assigns this element to a named slot in a parent component that uses slot-based composition patterns.
+     */
+    slot?: Lowercase<string>;
+}
+/**
+ * An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.
+ */
+export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
+    currentTarget: HTMLElementTagNameMap[TTagName];
+};
+/**
+ * A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.
+ */
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TData = object> = (EventListener & {
+    (event: CallbackEvent<TTagName, Event> & TData): void;
+}) | null;
+
+declare const tagName = "s-login-with-shop";
+/** @private */
+export interface LoginWithShopStatusChangeEvent {
+    /**
+     * The buyer's Shop Pay state in this checkout.
+     *
+     * - `shop_pay`: The buyer is signed in to Shop Pay.
+     * - `shop_pay_guest`: The buyer is in Shop Pay but isn't signed in.
+     * - `guest`: The buyer isn't using Shop Pay, so the modal can be shown.
+     * - `shop_pay_skipped`: The Shop Pay modal is suppressed for this checkout and isn't shown.
+     */
+    status?: 'shop_pay' | 'guest' | 'shop_pay_skipped' | 'shop_pay_guest';
+}
+/** @private */
+export interface LoginWithShopElementProps {
+    /**
+     * Whether the modal is visible to the buyer.
+     *
+     * The modal doesn't hide itself when the buyer dismisses it. Update this to `false` when the `closed` event fires to keep it in sync.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Whether to send the buyer to Shop Pay immediately, without showing the modal.
+     *
+     * @default false
+     */
+    doRedirect?: boolean;
+    /**
+     * The heading shown at the top of the modal.
+     *
+     * This is also the modal's accessible name and the alternative text for `modalLogoSrc`.
+     *
+     * @default ''
+     */
+    modalTitle?: string;
+    /**
+     * The text shown below the heading, explaining what the buyer gets by continuing to Shop Pay.
+     *
+     * @default ''
+     */
+    modalDescription?: string;
+    /**
+     * The URL of the image shown above the heading. The image is scaled to a maximum height of 64px.
+     *
+     * @default ''
+     */
+    modalLogoSrc?: string;
+    /**
+     * The label of the primary button that continues to Shop Pay.
+     *
+     * @default 'Continue'
+     */
+    modalContinueText?: string;
+    /**
+     * The label of the secondary button that dismisses the modal.
+     *
+     * @default ''
+     */
+    modalCancelText?: string;
+}
+/** @private */
+export interface LoginWithShopEvents {
+    /**
+     * A callback that's fired when the buyer presses the continue button.
+     *
+     * Return a promise to do work before the buyer leaves. Checkout keeps the button in its loading state and waits for the promise to settle before redirecting to Shop Pay.
+     */
+    onComplete?(event: CallbackEvent<typeof tagName>): void | Promise<void>;
+    /**
+     * A callback that's fired when the buyer dismisses the modal, either with the cancel button or by closing it.
+     */
+    onClosed?(event: CallbackEvent<typeof tagName>): void;
+    /**
+     * A callback that's fired when the buyer's Shop Pay state in checkout is determined or changes.
+     *
+     * Read `event.status` for the new state.
+     */
+    onStatusChange?(event: CallbackEvent<typeof tagName> & LoginWithShopStatusChangeEvent): void;
+}
+/** @private */
+export interface LoginWithShopElementEvents {
+    /**
+     * A callback that's fired when the buyer presses the continue button.
+     *
+     * Checkout redirects to Shop Pay once this event has been handled.
+     */
+    complete?: CallbackEventListener<typeof tagName>;
+    /**
+     * A callback that's fired when the buyer dismisses the modal, either with the cancel button or by closing it.
+     */
+    closed?: CallbackEventListener<typeof tagName>;
+    /**
+     * A callback that's fired when the buyer's Shop Pay state in checkout is determined or changes.
+     *
+     * Read `event.status` for the new state.
+     */
+    statuschange?: CallbackEventListener<typeof tagName, LoginWithShopStatusChangeEvent>;
+}
+/** @private */
+export interface LoginWithShopElement extends LoginWithShopElementProps, HTMLElement {
+    oncomplete: LoginWithShopElementEvents['complete'];
+    onclosed: LoginWithShopElementEvents['closed'];
+    onstatuschange: LoginWithShopElementEvents['statuschange'];
+}
+/** @private */
+export interface LoginWithShopProps extends LoginWithShopElementProps, LoginWithShopEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: LoginWithShopElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: LoginWithShopProps & BaseElementProps<LoginWithShopElement>;
+        }
+    }
+}
+
+export type { LoginWithShopElement, LoginWithShopElementEvents, LoginWithShopElementProps, LoginWithShopEvents, LoginWithShopProps, LoginWithShopStatusChangeEvent };

package/build/ts/surfaces/customer-account/targets/customer-account.footer.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-index.announcement.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-index.block.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.announcement.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.block.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.cart-line-item.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.cart-line-list.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.customer-information.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.fulfillment-details.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.payment-details.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.return-details.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order-status.unfulfilled-items.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order.action.menu-item.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order.action.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.order.page.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.page.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.addresses.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.announcement.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.block.render.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.company-details.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.company-location-addresses.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.company-location-payment.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.company-location-staff.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/customer-account/targets/customer-account.profile.payment.render-after.d.ts

@@ -32,6 +32,7 @@ import "../components/Image.d.ts";
 import "../components/ImageGroup.d.ts";
 import "../components/Link.d.ts";
 import "../components/ListItem.d.ts";
+import "../components/LoginWithShop.d.ts";
 import "../components/Map.d.ts";
 import "../components/MapMarker.d.ts";
 import "../components/Menu.d.ts";

package/build/ts/surfaces/point-of-sale/components/Button.d.ts

@@ -116,12 +116,13 @@ export interface ButtonJSXProps
   >;
   /**
    * Changes the visual appearance of the button.
+   * - `auto`: Automatically determines the button variant based on its context.
    * - `primary`: Creates a prominent call-to-action button with high visual emphasis for the most important action on a screen.
    * - `secondary`: Provides a less prominent button appearance for supporting actions and secondary interactions.
    *
-   * @default 'auto' - the variant is automatically determined by the button's context
+   * @default 'auto'
    */
-  variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary'>;
+  variant?: Extract<ButtonProps['variant'], 'auto' | 'primary' | 'secondary'>;
   /**
    * An event that's called when the button is activated.
    */

package/build/ts/surfaces/point-of-sale/components/Image.d.ts

@@ -8,7 +8,13 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {ImageProps, Key, Ref} from './components-shared.d.ts';
+import type {
+  BorderRadiusKeyword,
+  ImageProps,
+  Key,
+  MaybeAllValuesShorthandProperty,
+  Ref,
+} from './components-shared.d.ts';
 
 /** @publicDocs */
 export type ComponentChildren = any;
@@ -60,6 +66,25 @@ export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
    * The image source URL (remote URL or local file resource). When loading or no src is provided, a placeholder is rendered. Ensure URLs are properly formatted and properly formatted.
    */
   src?: ImageProps['src'];
+  /**
+   * Border radius for the image corners.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `start-start start-end end-end end-start`
+   * - 3 values: `start-start (start-end & end-start) end-end`
+   * - 2 values: `(start-start & end-end) (start-end & end-start)`
+   *
+   * For example:
+   * - `base` means all corners have `base` radius
+   * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`
+   * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/build/ts/surfaces/point-of-sale/components/components-shared.d.ts

@@ -1438,7 +1438,7 @@ export interface ButtonProps extends GlobalProps, BaseClickableProps {
   /**
    * Changes the visual appearance of the button.
    *
-   * @default 'auto' - the variant is automatically determined by the button's context
+   * @default 'auto'
    */
   variant?: 'auto' | 'primary' | 'secondary' | 'tertiary';
   /**