@shopify/ui-extensions 2025.10.0-rc.40 → 2025.10.0-rc.41

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

@@ -14,6 +14,10 @@ import {CheckoutUIExtensionError} from './errors';
  * which contains a basic set of properties about the checkout.
  *
  * For a full list of the API available to each extension target, see the [ExtensionTargets type](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets).
+ *
+ * > Note:
+ * > As of version 2025-10, you no longer need this hook. The full API object is accessible via
+ * > the global `shopify` object.
  */
 export function useApi<
   Target extends RenderExtensionTarget = RenderExtensionTarget,

package/src/surfaces/checkout/preact/subscription.ts

@@ -1,8 +1,8 @@
 import {useEffect, useState} from 'preact/hooks';
 
-import type {StatefulRemoteSubscribable} from '../../../shared';
+import type {SubscribableSignalLike} from '../shared';
 
-type Subscriber<T> = Parameters<StatefulRemoteSubscribable<T>['subscribe']>[0];
+type Subscriber<T> = Parameters<SubscribableSignalLike<T>['subscribe']>[0];
 
 /**
  * Subscribes to the special wrapper type that all "changeable" values in the
@@ -10,13 +10,14 @@ type Subscriber<T> = Parameters<StatefulRemoteSubscribable<T>['subscribe']>[0];
  * and subscribes to update the value when changes occur in the checkout.
  *
  * > Note:
- * > You generally shouldn't need to use this directly, as there are dedicated hooks
- * > for accessing the current value of each individual resource in the checkout.
+ * > As of version 2025-10, you no longer need this hook. When you access `.value`
+ * > (instead of `.current`) on subscribable properties, Preact will automatically
+ * > re-render as `.value` changes.
  */
 export function useSubscription<Value>(
-  subscription: StatefulRemoteSubscribable<Value>,
+  subscription: SubscribableSignalLike<Value>,
 ): Value {
-  const [, setValue] = useState(subscription.current);
+  const [, setValue] = useState(subscription.value);
 
   useEffect(() => {
     let didUnsubscribe = false;
@@ -34,7 +35,7 @@ export function useSubscription<Value>(
     // Because we're subscribing in a passive effect,
     // it's possible for an update to occur between render and the effect handler.
     // Check for this and schedule an update if work has occurred.
-    checkForUpdates(subscription.current);
+    checkForUpdates(subscription.value);
 
     return () => {
       didUnsubscribe = true;
@@ -42,5 +43,5 @@ export function useSubscription<Value>(
     };
   }, [subscription]);
 
-  return subscription.current;
+  return subscription.value;
 }

package/src/surfaces/checkout/preact/tests/buyer-identity.test.tsx

@@ -1,11 +1,10 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {SubscribableSignalLike} from '../../shared';
 import {faker} from '@faker-js/faker';
 
 import {ScopeNotGrantedError} from '../../errors';
 import {useCustomer, useEmail, usePhone} from '../buyer-identity';
 
 import {mount} from './mount';
-
 function createMockCustomer(customer = {}) {
   const firstName = faker.person.firstName();
   const lastName = faker.person.lastName();
@@ -41,7 +40,7 @@ function createUsePhoneContext(phone?: string) {
   return createMockHookContext(undefined, phone, undefined);
 }
 
-function createMockSuscribable<T>(data: T): StatefulRemoteSubscribable<T> {
+function createMockSuscribable<T>(data: T): SubscribableSignalLike<T> {
   return {
     current: data,
     value: data,

package/src/surfaces/checkout/preact/tests/mount.tsx

@@ -1,5 +1,5 @@
 import {createRender} from '@quilted/react-testing';
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {SubscribableSignalLike} from '../../shared';
 
 import type {
   ApiForExtension,
@@ -39,8 +39,8 @@ interface Options {
 
 export function createMockStatefulRemoteSubscribable<T>(
   value: T,
-): StatefulRemoteSubscribable<T> {
-  const subscribable: StatefulRemoteSubscribable<T> = {
+): SubscribableSignalLike<T> {
+  const subscribable: SubscribableSignalLike<T> = {
     get current() {
       return value;
     },

package/src/surfaces/checkout/shared.ts

@@ -1,6 +1,8 @@
+import type {ReadonlySignalLike} from '../../shared';
+
 /**
  * The list of supported components.
- * As of April 15th, 2025, this is a subset of the components that will be available in the 2025-10 stable release.
+ * As of October 1st, 2025, this is a subset of the components that will be available in the 2025-10 stable release.
  */
 export const SUPPORTED_COMPONENTS = [
   'Abbreviation',
@@ -9,8 +11,12 @@ export const SUPPORTED_COMPONENTS = [
   'Box',
   'Button',
   'Checkbox',
+  'Choice',
+  'ChoiceList',
   'Clickable',
   'ClipboardItem',
+  'DateField',
+  'DatePicker',
   'Details',
   'Divider',
   'DropZone',
@@ -26,15 +32,19 @@ export const SUPPORTED_COMPONENTS = [
   'Map',
   'MapMarker',
   'Modal',
+  'MoneyField',
   'NumberField',
   'Option',
   'OrderedList',
   'Paragraph',
+  'PasswordField',
   'PaymentIcon',
   'PhoneField',
   'Popover',
   'ProductThumbnail',
+  'PressButton',
   'Progress',
+  'QueryContainer',
   'QRCode',
   'ScrollBox',
   'Section',
@@ -49,12 +59,13 @@ export const SUPPORTED_COMPONENTS = [
   'TextArea',
   'TextField',
   'Time',
+  'Tooltip',
   'UnorderedList',
   'UrlField',
 ] as const;
 
 /**
- * Note: Chat is not supported in the 2025-07 release candidate, but it is tied to a target, and we don't want to remove the target documentation.
+ * Note: Chat is not supported in the 2025-10 release candidate, but it is tied to a target, and we don't want to remove the target documentation.
  * Once Chat is supported, you can remove this note.
  * @private
  */
@@ -62,7 +73,7 @@ export type PrivateComponent = 'Chat';
 
 /**
  * The list of supported components.
- * As of April 15th, 2025, this is a subset of the components that will be available in the 2025-10 stable release.
+ * As of October 1st, 2025, this is a subset of the components that will be available in the 2025-10 stable release.
  */
 export type AnyComponent =
   | (typeof SUPPORTED_COMPONENTS)[number]
@@ -73,3 +84,26 @@ export type AnyComponentExcept<Except extends AnyComponent> = Exclude<
   AnyComponent,
   Except
 >;
+
+/**
+ * Represents a read-only value managed on the main thread that an extension can subscribe to.
+ *
+ * Example: Checkout uses this to manage the state of an object and
+ * communicate state changes to extensions running in a sandboxed web worker.
+ *
+ * This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709).
+ *
+ * Some fields are deprecated but still supported for backwards compatibility.
+ * In version 2025-10, [`StatefulRemoteSubscribable`](https://github.com/Shopify/remote-dom/blob/03929aa8418a89d41d294005f219837582718df8/packages/async-subscription/src/types.ts#L17) was replaced with `ReadonlySignalLike`. Checkout will remove the old fields some time in the future.
+ *
+ */
+export interface SubscribableSignalLike<T> extends ReadonlySignalLike<T> {
+  /**
+   * @deprecated Use `.value` instead.
+   */
+  readonly current: T;
+  /**
+   * @deprecated No longer needed. Use Preact Signal management instead.
+   */
+  destroy(): Promise<void>;
+}

package/src/surfaces/checkout.ts

@@ -86,6 +86,8 @@ export type {
   ShippingAddress,
 } from './checkout/api/shared';
 
+export type {SubscribableSignalLike} from './checkout/shared';
+
 export type {
   RedeemableAttribute,
   RedeemableChange,
@@ -183,8 +185,8 @@ export type {
 } from './checkout/api/payment/payment-option-item';
 
 export * from './checkout/extension-targets';
-
 export * from './checkout/shared';
+
 export {
   Style,
   isConditionalStyle,

package/src/surfaces/customer-account/api/shared.ts

@@ -9,9 +9,10 @@ import type {
   CountryCode,
   GraphQLError,
   StorefrontApiVersion,
-  SubscribableSignalLike,
 } from '../../../shared';
 
+import type {SubscribableSignalLike} from '../../checkout/shared';
+
 export {
   ApiVersion,
   Capability,

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

@@ -33,12 +33,21 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
 }
 
 declare const tagName = 's-banner';
-export interface BannerJSXProps
-  extends Pick<BannerProps, 'heading' | 'hidden' | 'tone' | 'id'> {
+export interface BannerJSXProps extends Pick<BannerProps, 'heading' | 'id'> {
+  /**
+   * Determines whether the banner is hidden.
+   */
+  hidden?: BannerProps['hidden'];
+  /**
+   * Sets the tone of the Banner, based on the intention of the information being conveyed.
+   */
   tone?: Extract<
     BannerProps['tone'],
     'success' | 'info' | 'warning' | 'critical'
   >;
+  /**
+   * The action taken when the Banner is pressed.
+   */
   primaryAction?: ComponentChild;
   children?: ComponentChildren;
 }

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

@@ -38,14 +38,39 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-button';
 export interface ButtonJSXProps
-  extends Pick<
-    ButtonProps,
-    'disabled' | 'command' | 'commandFor' | 'loading' | 'tone' | 'variant'
-  > {
+  extends Pick<ButtonProps, 'disabled' | 'command' | 'commandFor' | 'loading'> {
+  /**
+   * Sets the action the `commandFor` should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command
+   */
+  command?: Extract<
+    ButtonProps['command'],
+    '--auto' | '--show' | '--hide' | '--toggle'
+  >;
+  /**
+   * Sets the tone of the Button, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
   tone?: Extract<
     ButtonProps['tone'],
     'auto' | 'critical' | 'neutral' | 'warning' | 'caution'
   >;
+  /**
+   * Changes the visual appearance of the Button.
+   *
+   * @default 'auto' - the variant is automatically determined by the Button's context
+   */
   variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary'>;
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
   children?: ComponentChildren;

package/{build/ts/surfaces/point-of-sale/components/Navigator.d.ts → src/surfaces/point-of-sale/components/Divider.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 {Key, Ref} from './components-shared.d.ts';
+import type {DividerProps, Key, Ref} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -27,24 +27,21 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   children?: ComponentChildren;
 }
 
-declare const tagName = 's-navigator';
-export interface NavigatorJSXProps {
-  initialScreenName?: string;
-  children?: React.ReactNode;
-}
+declare const tagName = 's-divider';
+export interface DividerJSXProps extends Pick<DividerProps, 'direction'> {}
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: NavigatorJSXProps;
+    [tagName]: DividerJSXProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: NavigatorJSXProps &
-        BaseElementPropsWithChildren<NavigatorJSXProps>;
+      [tagName]: DividerJSXProps &
+        BaseElementPropsWithChildren<DividerJSXProps>;
     }
   }
 }
 
 export {tagName};
-export type {NavigatorJSXProps};
+export type {DividerJSXProps};

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

@@ -35,12 +35,12 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
 declare const tagName = 's-page';
 export type PickedProps = Pick<
   PageProps,
-  'heading' | 'subheading' | 'secondaryActions'
+  'heading' | 'subheading' | 'secondaryActions' | 'aside'
 >;
 export interface PageJSXProps extends PickedProps {
   children?: ComponentChildren;
   secondaryActions?: ComponentChild;
-  primaryAction?: ComponentChild;
+  aside?: ComponentChild;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -50,9 +50,9 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<PageJSXProps, 'primaryAction' | 'secondaryActions'> &
+      [tagName]: Omit<PageJSXProps, 'secondaryActions' | 'aside'> &
         BaseElementPropsWithChildren<
-          Omit<PageJSXProps, 'primaryAction' | 'secondaryActions'>
+          Omit<PageJSXProps, 'secondaryActions' | 'aside'>
         >;
     }
   }

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

@@ -0,0 +1,43 @@
+/** VERSION: undefined **/
+/* 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" />
+import type {Key, Ref} from './components-shared.d.ts';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+  key?: Key;
+  ref?: Ref<TClass>;
+  slot?: Lowercase<string>;
+}
+
+declare const tagName = 's-qr-code';
+export interface QrCodeJSXProps {
+  /**
+   * The value to encode in the QR code
+   */
+  content: string;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: QrCodeJSXProps;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: QrCodeJSXProps & BaseElementProps<QrCodeJSXProps>;
+    }
+  }
+}
+
+export {tagName};
+export type {QrCodeJSXProps};

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

@@ -8,7 +8,14 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {ScrollBoxProps, Key, Ref} from './components-shared.d.ts';
+import type {
+  ScrollBoxProps,
+  MaybeAllValuesShorthandProperty,
+  MaybeTwoValuesShorthandProperty,
+  SizeKeyword,
+  Key,
+  Ref,
+} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -27,8 +34,92 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   children?: ComponentChildren;
 }
 
+export type PaddingKeyword = SizeKeyword | 'none';
 declare const tagName = 's-scroll-box';
-export interface ScrollBoxJSXProps extends Pick<ScrollBoxProps, 'id'> {
+export interface ScrollBoxJSXProps
+  extends Pick<
+    ScrollBoxProps,
+    | 'id'
+    | 'blockSize'
+    | 'minBlockSize'
+    | 'maxBlockSize'
+    | 'inlineSize'
+    | 'minInlineSize'
+    | 'maxInlineSize'
+  > {
+  /**
+   * Adjust the padding of all edges.
+   *
+   * [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 the CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `block-start inline-end block-end inline-start`
+   * - 3 values: `block-start inline block-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
+   * - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
+   * - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
+   * - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
+   *
+   * A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
+   *
+   * @default 'none'
+   */
+  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+  /**
+   * Adjust the block-padding.
+   *
+   * - `large none` means block-start padding is `large`, block-end padding is `none`.
+   *
+   * This overrides the block value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  /**
+   * Adjust the block-start padding.
+   *
+   * This overrides the block-start value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockStart?: PaddingKeyword | '';
+  /**
+   * Adjust the block-end padding.
+   *
+   * This overrides the block-end value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockEnd?: PaddingKeyword | '';
+  /**
+   * Adjust the inline padding.
+   *
+   * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
+   *
+   * This overrides the inline value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  /**
+   * Adjust the inline-start padding.
+   *
+   * This overrides the inline-start value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineStart?: PaddingKeyword | '';
+  /**
+   * Adjust the inline-end padding.
+   *
+   * This overrides the inline-end value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineEnd?: PaddingKeyword | '';
   children?: ComponentChildren;
 }
 declare global {

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

@@ -2143,6 +2143,20 @@ export interface DateSpinnerProps
    */
   onChange?: (event: Event) => void;
 }
+export interface DividerProps extends GlobalProps {
+  /**
+   * Specify the direction of the divider. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
+   *
+   * @default 'inline'
+   */
+  direction?: 'inline' | 'block';
+  /**
+   * Modify the color to be more or less intense.
+   *
+   * @default 'base'
+   */
+  color?: ColorKeyword;
+}
 export interface EmailFieldProps
   extends GlobalProps,
     BaseTextFieldProps,

package/src/surfaces/point-of-sale/components/targets/ReceiptComponents.ts

@@ -1 +1 @@
-export type ReceiptComponents = 'POSReceiptBlock' | 'Text' | 'QRCode';
+export type ReceiptComponents = 'PosBlock' | 'Text' | 'QrCode';