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

package/src/surfaces/admin/docs-types.ts

@@ -1,8 +1,12 @@
+import type {CSSProperties} from 'react';
 import {
   ReferenceEntityTemplateSchema,
   CodeTabType,
 } from '@shopify/generate-docs';
 
+// Don't allow all CSS properties to be used in the customStyles property
+type AllowedCSSProperties = Pick<CSSProperties, 'minHeight' | 'minBlockSize'>;
+
 export interface AdminReferenceEntityTemplateSchema
   extends Omit<ReferenceEntityTemplateSchema, 'defaultExample'> {
   defaultExample?: Omit<
@@ -11,7 +15,10 @@ export interface AdminReferenceEntityTemplateSchema
   > & {
     codeblock?: {
       title: string;
-      tabs: (CodeTabType & {layout?: string})[];
+      tabs: (CodeTabType & {
+        layout?: string;
+        customStyles?: AllowedCSSProperties;
+      })[];
     };
   };
 }

package/src/surfaces/checkout/api/cart-line/cart-line-item.ts

@@ -1,5 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 import type {CartLine} from '../standard/standard';
 
 export interface CartLineItemApi {

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

@@ -183,6 +183,11 @@ export interface CartLineAddChange {
    * with.
    */
   sellingPlanId?: SellingPlan['id'];
+
+  /**
+   * The identifier for the associated parent cart line.
+   */
+  parent?: {lineId: string} | {merchandiseId: string};
 }
 
 export interface CartLineRemoveChange {
@@ -236,6 +241,11 @@ export interface CartLineUpdateChange {
    * with or `null` to remove the the product from the selling plan.
    */
   sellingPlanId?: SellingPlan['id'] | null;
+
+  /**
+   * The identifier for the associated parent cart line.
+   */
+  parent?: {lineId: string} | {merchandiseId: string};
 }
 
 export type DiscountCodeChange =
@@ -375,7 +385,7 @@ export interface MetafieldRemoveCartChange {
   /**
    * The namespace of the metafield to remove.
    */
-  namespace: string;
+  namespace?: string;
 }
 
 /**
@@ -418,7 +428,7 @@ export interface MetafieldUpdateCartChange {
     key: string;
 
     /** The namespace of the metafield to add. */
-    namespace: string;
+    namespace?: string;
 
     /** The new information to store in the metafield. */
     value: string;

package/src/surfaces/checkout/api/order-confirmation/order-confirmation.ts

@@ -1,4 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 
 export interface OrderConfirmation {
   order: {

package/src/surfaces/checkout/api/payment/payment-option-item.ts

@@ -1,4 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 
 export type PaymentMethodAttributesResult =
   | PaymentMethodAttributesResultSuccess

package/src/surfaces/checkout/api/pickup/pickup-location-item.ts

@@ -1,5 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 import type {PickupLocationOption} from '../standard/standard';
 
 export interface PickupLocationItemApi {

package/src/surfaces/checkout/api/pickup/pickup-location-list.ts

@@ -1,4 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 
 export interface PickupLocationListApi {
   /**

package/src/surfaces/checkout/api/pickup/pickup-point-list.ts

@@ -1,4 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 
 export interface PickupPointListApi {
   /**

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

@@ -22,6 +22,11 @@ export interface SellingPlan {
    * @example 'gid://shopify/SellingPlan/1'
    */
   id: string;
+
+  /**
+   * Whether purchasing the selling plan will result in multiple deliveries.
+   */
+  recurringDeliveries: boolean;
 }
 
 export interface Attribute {

package/src/surfaces/checkout/api/shipping/shipping-option-item.ts

@@ -1,5 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 import type {ShippingOption} from '../standard/standard';
 
 export interface ShippingOptionItemApi {

package/src/surfaces/checkout/api/shipping/shipping-option-list.ts

@@ -1,5 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {StatefulRemoteSubscribable} from '../../../../shared';
 import type {
   DeliveryGroup,
   DeliveryGroupType,

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

@@ -1,5 +1,3 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
 import type {
   ValidationError,
   SellingPlan,
@@ -18,6 +16,7 @@ import type {
   GraphQLError,
   StorefrontApiVersion,
   LocalizedFieldKey,
+  StatefulRemoteSubscribable,
 } from '../../../../shared';
 
 export type {ApiVersion, Capability} from '../../../../shared';
@@ -528,7 +527,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * The custom attributes left by the customer to the merchant, either in their cart or during checkout.
    */
-  attributes: StatefulRemoteSubscribable<Attribute[] | undefined>;
+  attributes: StatefulRemoteSubscribable<Attribute[]>;
 
   /**
    * All available payment options.
@@ -977,6 +976,27 @@ export interface CartLine {
    * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
    */
   lineComponents: CartLineComponentType[];
+
+  /**
+   * The relationship details between cart lines.
+   */
+  parentRelationship: CartLineParentRelationship | null;
+}
+
+export interface CartLineParentRelationship {
+  /**
+   * The parent cart line that a cart line is associated with.
+   */
+  parent: {
+    /**
+     * These line item IDs are not stable at the moment, they might change after
+     * any operations on the line items. You should always look up for an updated
+     * ID before any call to `applyCartLinesChange` because you'll need the ID to
+     * create a `CartLineChange` object.
+     * @example 'gid://shopify/CartLine/123'
+     */
+    id: string;
+  };
 }
 
 type CartLineComponentType = CartBundleLineComponent;

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

@@ -1,32 +1,44 @@
 /** VERSION: 0.0.0 **/
-/* eslint-disable import/extensions */
+/* 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/namespace */
+/* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {AbbreviationProps$1} from './components-shared.d.ts';
 
-export interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title'> {
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+declare const tagName = "s-abbreviation";
+export interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title' | 'id'> {
 }
 export interface AbbreviationElement extends AbbreviationProps, Omit<HTMLElement, 'id' | 'title'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        's-abbreviation': AbbreviationElement;
+        [tagName]: AbbreviationElement;
     }
 }
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-abbreviation': AbbreviationProps & BaseProps;
+            [tagName]: AbbreviationProps & BaseElementPropsWithChildren<AbbreviationElement>;
         }
     }
 }

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

@@ -0,0 +1,56 @@
+/** 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" />
+import type {BadgeProps$1,IconType} from './components-shared.d.ts';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+/**
+ * The list of available icon types.
+ *
+ * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ */
+export type ReducedIconTypes = Extract<IconType, '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'>;
+
+declare const tagName = "s-badge";
+export interface BadgeProps extends Pick<BadgeProps$1, 'id' | 'tone' | 'iconPosition'> {
+    size?: Extract<BadgeProps$1['size'], 'small' | 'small-100' | 'base'>;
+    tone?: Extract<BadgeProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
+    color?: Extract<BadgeProps$1['color'], 'base' | 'subdued'>;
+    icon?: '' | ReducedIconTypes;
+}
+export interface BadgeElement extends BadgeProps, Omit<HTMLElement, 'id'> {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: BadgeElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: BadgeProps & BaseElementPropsWithChildren<BadgeElement>;
+        }
+    }
+}
+
+export type { BadgeElement, BadgeProps };

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

@@ -1,37 +1,79 @@
 /** VERSION: 0.0.0 **/
-/* eslint-disable import/extensions */
+/* 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/namespace */
+/* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {BannerProps$1} from './components-shared.d.ts';
 
-export interface BannerProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'onAfterHide' | 'onDismiss' | 'tone'> {
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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;
+}) | null;
+
+declare const tagName = "s-banner";
+export interface BannerElementProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'tone'> {
     tone?: Extract<BannerProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical'>;
 }
-export interface BannerElement extends Omit<BannerProps, 'onAfterHide' | 'onDismiss'>, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
-    onafterhide: BannerProps['onAfterHide'];
-    ondismiss: BannerProps['onDismiss'];
+export interface BannerEvents extends Pick<BannerProps$1, 'onAfterHide' | 'onDismiss'> {
+}
+export interface BannerElementEvents {
+    /**
+     * Event handler when the banner has fully hidden.
+     *
+     * The `hidden` property will be `true` when this event fires.
+     *
+     * @implementation If implementations animate the hiding of the banner,
+     * 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;
+    /**
+     * Event handler when the banner is dismissed by the user.
+     *
+     * This does not fire when setting `hidden` manually.
+     *
+     * The `hidden` property will be `false` when this event fires.
+     */
+    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface BannerElement extends BannerElementProps, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
+    onafterhide: BannerEvents['onAfterHide'];
+    ondismiss: BannerEvents['onDismiss'];
+}
+export interface BannerProps extends BannerElementProps, BannerEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        's-banner': BannerElement;
+        [tagName]: BannerElement;
     }
 }
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-banner': BannerProps & BaseProps;
+            [tagName]: BannerProps & BaseElementPropsWithChildren<BannerElement>;
         }
     }
 }
 
-export type { BannerElement, BannerProps };
+export type { BannerElement, BannerElementEvents, BannerElementProps, BannerEvents, BannerProps };

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

@@ -1,11 +1,11 @@
 /** VERSION: 0.0.0 **/
-/* eslint-disable import/extensions */
+/* 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/namespace */
+/* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {BoxProps$1,MaybeAllValuesShorthandProperty,BorderSizeKeyword, BorderStyleKeyword,ColorKeyword} from './components-shared.d.ts';
@@ -13,8 +13,23 @@ import type {BoxProps$1,MaybeAllValuesShorthandProperty,BorderSizeKeyword, Borde
 export type ReducedBorderSizeKeyword = Extract<BorderSizeKeyword, 'none' | 'base' | 'large' | 'large-100' | 'large-200'>;
 export type ReducedColorKeyword = Extract<ColorKeyword, 'base'>;
 export type BorderShorthand = ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}`;
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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 interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
+declare const tagName = "s-box";
+export interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<BoxProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
@@ -24,17 +39,13 @@ export interface BoxElement extends BoxProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        's-box': BoxElement;
+        [tagName]: BoxElement;
     }
 }
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-box': BoxProps & BaseProps;
+            [tagName]: BoxProps & BaseElementPropsWithChildren<BoxElement>;
         }
     }
 }

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

@@ -1,39 +1,70 @@
 /** VERSION: 0.0.0 **/
-/* eslint-disable import/extensions */
+/* 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/namespace */
+/* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {ButtonProps$1} from './components-shared.d.ts';
 
-export interface ButtonProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'loading' | 'onClick' | 'target' | 'tone' | 'type' | 'variant'> {
-    target?: Extract<ButtonProps$1['target'], 'auto' | '_self' | '_blank'>;
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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;
+}) | null;
+
+declare const tagName = "s-button";
+export interface ButtonElementProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'loading' | 'target' | 'tone' | 'type' | 'variant'> {
+    target?: Extract<ButtonProps$1['target'], 'auto' | '_blank'>;
     tone?: Extract<ButtonProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
     type?: Extract<ButtonProps$1['type'], 'submit' | 'button'>;
     variant?: Extract<ButtonProps$1['variant'], 'auto' | 'primary' | 'secondary'>;
 }
-export interface ButtonElement extends Omit<ButtonProps, 'onClick'>, Omit<HTMLElement, 'id' | 'onclick'> {
-    onclick: ButtonProps['onClick'];
+export interface ButtonEvents extends Pick<ButtonProps$1, 'onClick'> {
+}
+export interface ButtonElementEvents {
+    /**
+     * 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;
+}
+export interface ButtonElement extends ButtonElementProps, Omit<HTMLElement, 'id' | 'onclick'> {
+    onclick: ButtonEvents['onClick'];
+}
+export interface ButtonProps extends ButtonElementProps, ButtonEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        's-button': ButtonElement;
+        [tagName]: ButtonElement;
     }
 }
 declare module 'preact' {
-    interface BaseProps {
-        children?: preact.ComponentChildren;
-        slot?: Lowercase<string>;
-    }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            's-button': ButtonProps & BaseProps;
+            [tagName]: ButtonProps & BaseElementPropsWithChildren<ButtonElement>;
         }
     }
 }
 
-export type { ButtonElement, ButtonProps };
+export type { ButtonElement, ButtonElementEvents, ButtonElementProps, ButtonEvents, ButtonProps };

package/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.tsx

@@ -0,0 +1,58 @@
+import {
+  reactExtension,
+  useShippingAddress,
+  Chat,
+} from '@shopify/ui-extensions-react/checkout';
+import {retain} from '@remote-ui/rpc';
+import type {ReadyEvent} from '@shopify/ui-extensions-react/checkout';
+
+export default reactExtension('purchase.checkout.chat.render', () => (
+  <Extension />
+));
+
+function Extension() {
+  /**
+   * Use the `useShippingAddress` hook to access the first name of the buyer.
+   */
+  const {firstName} = useShippingAddress();
+
+  /**
+   * Define a variable to store the `postMessage` function
+   * so we can re-use outside of the onReady callback later if needed.
+   */
+  let postMessage;
+
+  return (
+    <Chat
+      inlineSize={150}
+      blockSize={50}
+      onReady={({postMessage: postMessageParam}: ReadyEvent) => {
+        /**
+         * Save the `postMessage` function to the variable defined earlier.
+         */
+        postMessage = postMessageParam;
+        retain(postMessage);
+
+        /**
+         * When the communication channel is ready, send a message to the hosted application
+         * using the `postMessage` provided as parameter.
+         */
+        postMessage({
+          action: 'ping',
+          buyer: {
+            firstName,
+          },
+        });
+      }}
+      onMessage={(event: Event) => {
+        /**
+         * Listen for messages from the hosted application.
+         * If the action is `pong`, the communication channel is successful.
+         */
+        if (event.data.action === 'pong') {
+          console.log('Messaging channel successful');
+        }
+      }}
+    />
+  );
+}

package/src/surfaces/checkout/components/Chat/examples/app-bridge-css.example.css

@@ -0,0 +1,16 @@
+:root {
+  --shopify-checkout-chat-minimized-max-inline-size: 224px;
+  --shopify-checkout-chat-minimized-max-block-size: 72px;
+  --shopify-checkout-chat-maximized-max-inline-size: 415px;
+  --shopify-checkout-chat-maximized-max-block-size: 700px;
+
+  @media screen and (max-width: 579px) {
+    --shopify-checkout-chat-maximized-max-inline-size: 100dvi;
+    --shopify-checkout-chat-maximized-max-block-size: 93dvb;
+
+    @supports not (inline-size: 100dvi) {
+      --shopify-checkout-chat-maximized-max-inline-size: 100vi;
+      --shopify-checkout-chat-maximized-max-block-size: 93vb;
+    }
+  }
+}