@shopify/ui-extensions 2026.7.1 → 2026.7.3

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2026.7.1",
+  "version": "2026.7.3",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
+    "package:publint": "publint --pack npm",
+    "package:attw": "attw --pack . --ignore-rules false-cjs",
     "docs:point-of-sale": "node ./docs/surfaces/point-of-sale/build-docs.mjs",
     "docs:customer-account": "node ./docs/surfaces/customer-account/build-docs.mjs"
   },
@@ -45,6 +47,9 @@
       ],
       "pos.*": [
         "./build/ts/surfaces/point-of-sale/targets/pos.*.d.ts"
+      ],
+      "preact": [
+        "./build/ts/preact.d.ts"
       ]
     }
   },
@@ -106,12 +111,6 @@
     "./pos.*": {
       "default": "./build/ts/surfaces/point-of-sale/targets/pos.*.d.ts"
     },
-    "./point-of-sale/preact": {
-      "types": "./build/ts/surfaces/point-of-sale/preact.d.ts",
-      "esnext": "./build/esnext/surfaces/point-of-sale/preact.esnext",
-      "import": "./build/esm/surfaces/point-of-sale/preact.mjs",
-      "require": "./build/cjs/surfaces/point-of-sale/preact.js"
-    },
     "./preact": {
       "types": "./build/ts/preact.d.ts",
       "esnext": "./build/esnext/preact.esnext",
@@ -126,17 +125,19 @@
     "./build/cjs/preact.js"
   ],
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@faker-js/faker": "^8.4.1",
+    "@preact/signals": "^2.3.x",
+    "@quilted/react-testing": "^0.6.11",
     "@remote-ui/async-subscription": "^2.1.16",
     "@shopify/generate-docs": "1.2.2",
-    "@quilted/react-testing": "^0.6.11",
-    "typescript": "^4.9.0",
-    "@faker-js/faker": "^8.4.1",
     "preact": "^10.10.x",
-    "@preact/signals": "^2.3.x"
+    "publint": "^0.3.23",
+    "typescript": "^4.9.0"
   },
   "peerDependencies": {
-    "preact": "*",
-    "@preact/signals": "*"
+    "@preact/signals": "*",
+    "preact": "*"
   },
   "peerDependenciesMeta": {
     "preact": {

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

@@ -53,6 +53,15 @@ export interface ButtonElementProps extends Pick<ButtonProps$1, 'accessibilityLa
      * @default 'button'
      */
     type?: Extract<ButtonProps$1['type'], 'submit' | 'button'>;
+    /**
+     * The visual style variant of the button component, which controls its prominence and emphasis.
+     *
+     * - `'auto'`: Automatically determined by the button's context.
+     * - `'primary'`: High-emphasis style for the main action.
+     * - `'secondary'`: Medium-emphasis style for supporting actions.
+     *
+     * @default 'auto'
+     */
     variant?: Extract<ButtonProps$1['variant'], 'auto' | 'primary' | 'secondary'>;
 }
 export interface ButtonEvents extends Pick<ButtonProps$1, 'onClick'> {

package/src/surfaces/checkout/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/src/surfaces/checkout/shared.ts

@@ -70,10 +70,15 @@ export const SUPPORTED_COMPONENTS = [
   'UrlField',
 ] as const;
 
+/** @private */
+export type PrivateComponent = 'LoginWithShop';
+
 export type ThankYouComponent = 'Announcement';
 
 /** @publicDocs */
-export type AnyComponent = (typeof SUPPORTED_COMPONENTS)[number];
+export type AnyComponent =
+  | (typeof SUPPORTED_COMPONENTS)[number]
+  | PrivateComponent;
 
 /**
  * The list of supported components.

package/src/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/src/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/src/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';
   /**

package/src/surfaces/point-of-sale/components.d.ts

@@ -1413,7 +1413,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';
   /**
@@ -3738,9 +3738,9 @@ interface ButtonJSXProps
   /**
    * Changes the visual appearance of the button.
    *
-   * @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'>;
   /**
    * Called when the button is activated.
    */
@@ -4195,6 +4195,25 @@ interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit' | 'alt'> {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
    */
   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 {
@@ -5906,9 +5925,9 @@ interface Button {
   tone?: 'auto' | 'neutral' | 'caution' | 'warning' | 'critical';
   /**
    * Changes the visual appearance of the button.
-   * @default 'auto' - the variant is automatically determined by the button's context
+   * @default 'auto'
    */
-  variant?: 'primary' | 'secondary';
+  variant?: 'auto' | 'primary' | 'secondary';
   /** A unique identifier for the element. */
   id?: string;
   /**
@@ -7116,6 +7135,25 @@ interface Image {
    * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
    */
   alt?: string;
+  /**
+   * 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>;
 }
 
 /**