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

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

@@ -16,8 +16,8 @@ import type {
   GraphQLError,
   StorefrontApiVersion,
   LocalizedFieldKey,
-  StatefulRemoteSubscribable,
 } from '../../../../shared';
+import type {SubscribableSignalLike} from '../../shared';
 
 export type {ApiVersion, Capability} from '../../../../shared';
 
@@ -82,7 +82,7 @@ export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
    *
    * * [`iframe.sources`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe.
    */
-  capabilities: StatefulRemoteSubscribable<Capability[]>;
+  capabilities: SubscribableSignalLike<Capability[]>;
 
   /**
    * Information about the editor where the extension is being rendered.
@@ -102,7 +102,7 @@ export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
    * from where it was rendered. The extension continues running so that
    * your extension is immediately available to render if the customer navigates back.
    */
-  rendered: StatefulRemoteSubscribable<boolean>;
+  rendered: SubscribableSignalLike<boolean>;
 
   /**
    * The URL to the script that started the extension target.
@@ -350,17 +350,17 @@ export interface Localization {
   /**
    * The currency that the customer sees for money amounts in the checkout.
    */
-  currency: StatefulRemoteSubscribable<Currency>;
+  currency: SubscribableSignalLike<Currency>;
 
   /**
    * The buyer’s time zone.
    */
-  timezone: StatefulRemoteSubscribable<Timezone>;
+  timezone: SubscribableSignalLike<Timezone>;
 
   /**
    * The language the customer sees in the checkout.
    */
-  language: StatefulRemoteSubscribable<Language>;
+  language: SubscribableSignalLike<Language>;
 
   /**
    * This is the customer's language, as supported by the extension.
@@ -373,7 +373,7 @@ export interface Localization {
    * translations at all, then this value is the default locale for your
    * extension (that is, the one matching your .default.json file).
    */
-  extensionLanguage: StatefulRemoteSubscribable<Language>;
+  extensionLanguage: SubscribableSignalLike<Language>;
 
   /**
    * The country context of the checkout. This value carries over from the
@@ -381,7 +381,7 @@ export interface Localization {
    * experience. It will update if the buyer changes the country of their
    * shipping address. If the country is unknown, then the value is undefined.
    */
-  country: StatefulRemoteSubscribable<Country | undefined>;
+  country: SubscribableSignalLike<Country | undefined>;
 
   /**
    * The [market](https://shopify.dev/docs/apps/markets) context of the
@@ -389,8 +389,12 @@ export interface Localization {
    * was used to contextualize the storefront experience. It will update if the
    * buyer changes the country of their shipping address.  If the market is unknown,
    * then the value is undefined.
+   *
+   * > Caution: This field is deprecated and will be removed in a future version.
+   *
+   * @deprecated Deprecated as of version `2025-04`
    */
-  market: StatefulRemoteSubscribable<Market | undefined>;
+  market: SubscribableSignalLike<Market | undefined>;
 }
 
 export interface LocalizedField {
@@ -422,15 +426,15 @@ export interface BuyerJourney {
    *
    * For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.
    */
-  completed: StatefulRemoteSubscribable<boolean>;
+  completed: SubscribableSignalLike<boolean>;
   /**
    * All possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration.
    */
-  steps: StatefulRemoteSubscribable<BuyerJourneyStep[]>;
+  steps: SubscribableSignalLike<BuyerJourneyStep[]>;
   /**
    * What step of checkout the buyer is currently on.
    */
-  activeStep: StatefulRemoteSubscribable<BuyerJourneyStepReference | undefined>;
+  activeStep: SubscribableSignalLike<BuyerJourneyStepReference | undefined>;
 }
 
 /**
@@ -496,7 +500,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * Gift Cards that have been applied to the checkout.
    */
-  appliedGiftCards: StatefulRemoteSubscribable<AppliedGiftCard[]>;
+  appliedGiftCards: SubscribableSignalLike<AppliedGiftCard[]>;
 
   /**
    * The cart instructions used to create the checkout and possibly limit extension capabilities.
@@ -510,7 +514,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    *  See the [update guide](/docs/api/checkout-ui-extensions/apis/cart-instructions#examples) for more information.
    *
    */
-  instructions: StatefulRemoteSubscribable<CartInstructions>;
+  instructions: SubscribableSignalLike<CartInstructions>;
 
   /**
    * The metafields requested in the
@@ -522,17 +526,17 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  appMetafields: StatefulRemoteSubscribable<AppMetafieldEntry[]>;
+  appMetafields: SubscribableSignalLike<AppMetafieldEntry[]>;
 
   /**
    * The custom attributes left by the customer to the merchant, either in their cart or during checkout.
    */
-  attributes: StatefulRemoteSubscribable<Attribute[]>;
+  attributes: SubscribableSignalLike<Attribute[]>;
 
   /**
    * All available payment options.
    */
-  availablePaymentOptions: StatefulRemoteSubscribable<PaymentOption[]>;
+  availablePaymentOptions: SubscribableSignalLike<PaymentOption[]>;
 
   /**
    * Information about the buyer that is interacting with the checkout.
@@ -552,15 +556,15 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * Settings applied to the buyer's checkout.
    */
-  checkoutSettings: StatefulRemoteSubscribable<CheckoutSettings>;
+  checkoutSettings: SubscribableSignalLike<CheckoutSettings>;
 
   /**
    * A stable ID that represents the current checkout.
    *
-   * Matches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout)
+   * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)
    * and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).
    */
-  checkoutToken: StatefulRemoteSubscribable<CheckoutToken | undefined>;
+  checkoutToken: SubscribableSignalLike<CheckoutToken | undefined>;
 
   /**
    * Details on the costs the buyer will pay for this checkout.
@@ -570,17 +574,17 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * A list of delivery groups containing information about the delivery of the items the customer intends to purchase.
    */
-  deliveryGroups: StatefulRemoteSubscribable<DeliveryGroup[]>;
+  deliveryGroups: SubscribableSignalLike<DeliveryGroup[]>;
 
   /**
    * A list of discount codes currently applied to the checkout.
    */
-  discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
+  discountCodes: SubscribableSignalLike<CartDiscountCode[]>;
 
   /**
    * Discounts that have been applied to the entire cart.
    */
-  discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;
+  discountAllocations: SubscribableSignalLike<CartDiscountAllocation[]>;
 
   /**
    * The meta information about the extension.
@@ -613,7 +617,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * A list of lines containing information about the items the customer intends to purchase.
    */
-  lines: StatefulRemoteSubscribable<CartLine[]>;
+  lines: SubscribableSignalLike<CartLine[]>;
 
   /**
    * The details about the location, language, and currency of the customer. For utilities to easily
@@ -637,12 +641,12 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    * > Tip:
    * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.
    */
-  metafields: StatefulRemoteSubscribable<Metafield[]>;
+  metafields: SubscribableSignalLike<Metafield[]>;
 
   /**
    * A note left by the customer to the merchant, either in their cart or during checkout.
    */
-  note: StatefulRemoteSubscribable<string | undefined>;
+  note: SubscribableSignalLike<string | undefined>;
 
   /**
    * The method used to query the Storefront GraphQL API with a prefetched token.
@@ -657,7 +661,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * Payment options selected by the buyer.
    */
-  selectedPaymentOptions: StatefulRemoteSubscribable<SelectedPaymentOption[]>;
+  selectedPaymentOptions: SubscribableSignalLike<SelectedPaymentOption[]>;
 
   /**
    * The session token providing a set of claims as a signed JSON Web Token (JWT).
@@ -679,7 +683,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    * > Note: When an extension is being installed in the editor, the settings will be empty until
    * a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
    */
-  settings: StatefulRemoteSubscribable<ExtensionSettings>;
+  settings: SubscribableSignalLike<ExtensionSettings>;
 
   /**
    * The proposed customer shipping address. During the information step, the address
@@ -689,7 +693,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  shippingAddress?: StatefulRemoteSubscribable<ShippingAddress | undefined>;
+  shippingAddress?: SubscribableSignalLike<ShippingAddress | undefined>;
 
   /**
    * The proposed customer billing address. The address updates when the field is
@@ -697,7 +701,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  billingAddress?: StatefulRemoteSubscribable<MailingAddress | undefined>;
+  billingAddress?: SubscribableSignalLike<MailingAddress | undefined>;
 
   /** The shop where the checkout is taking place. */
   shop: Shop;
@@ -729,7 +733,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * Customer privacy consent settings and a flag denoting if consent has previously been collected.
    */
-  customerPrivacy: StatefulRemoteSubscribable<CustomerPrivacy>;
+  customerPrivacy: SubscribableSignalLike<CustomerPrivacy>;
 
   /**
    * Allows setting and updating customer privacy consent settings and tracking consent metafields.
@@ -744,7 +748,7 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
    * The API for reading additional fields that are required in checkout under certain circumstances.
    * For example, some countries require additional fields for customs information or tax identification numbers.
    */
-  localizedFields?: StatefulRemoteSubscribable<LocalizedField[]>;
+  localizedFields?: SubscribableSignalLike<LocalizedField[]>;
 }
 
 export interface Ui {
@@ -780,7 +784,7 @@ export interface BuyerIdentity {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  customer: StatefulRemoteSubscribable<Customer | undefined>;
+  customer: SubscribableSignalLike<Customer | undefined>;
 
   /**
    * The email address of the buyer that is interacting with the cart.
@@ -788,7 +792,7 @@ export interface BuyerIdentity {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  email: StatefulRemoteSubscribable<string | undefined>;
+  email: SubscribableSignalLike<string | undefined>;
 
   /**
    * The phone number of the buyer that is interacting with the cart.
@@ -796,7 +800,7 @@ export interface BuyerIdentity {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  phone: StatefulRemoteSubscribable<string | undefined>;
+  phone: SubscribableSignalLike<string | undefined>;
 
   /**
    * Provides details of the company and the company location that the business customer is purchasing on behalf of.
@@ -805,7 +809,7 @@ export interface BuyerIdentity {
    *
    * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
-  purchasingCompany: StatefulRemoteSubscribable<PurchasingCompany | undefined>;
+  purchasingCompany: SubscribableSignalLike<PurchasingCompany | undefined>;
 }
 
 /**
@@ -913,28 +917,28 @@ export interface CartCost {
    * A `Money` value representing the subtotal value of the items in the cart at the current
    * step of checkout.
    */
-  subtotalAmount: StatefulRemoteSubscribable<Money>;
+  subtotalAmount: SubscribableSignalLike<Money>;
 
   /**
    * A `Money` value representing the total shipping a buyer can expect to pay at the current
    * step of checkout. This value includes shipping discounts. Returns undefined if shipping
    * has not been negotiated yet, such as on the information step.
    */
-  totalShippingAmount: StatefulRemoteSubscribable<Money | undefined>;
+  totalShippingAmount: SubscribableSignalLike<Money | undefined>;
 
   /**
    * A `Money` value representing the total tax a buyer can expect to pay at the current
    * step of checkout or the total tax included in product and shipping prices. Returns
    * undefined if taxes are unavailable.
    */
-  totalTaxAmount: StatefulRemoteSubscribable<Money | undefined>;
+  totalTaxAmount: SubscribableSignalLike<Money | undefined>;
 
   /**
    * A `Money` value representing the minimum a buyer can expect to pay at the current
    * step of checkout. This value excludes amounts yet to be negotiated. For example,
    * the information step might not have delivery costs calculated.
    */
-  totalAmount: StatefulRemoteSubscribable<Money>;
+  totalAmount: SubscribableSignalLike<Money>;
 }
 
 export interface CartLine {

package/src/surfaces/checkout/components/Badge/examples/basic-badge.example.html

@@ -0,0 +1,3 @@
+<s-badge>Default</s-badge>
+<s-badge tone="critical">Expired</s-badge>
+<s-badge color="subdued">Free</s-badge>

package/src/surfaces/checkout/components/Badge.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 {BadgeProps$1,IconType} from './components-shared.d.ts';
+import type {BadgeProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -24,15 +24,10 @@ export interface BaseElementProps<TClass = HTMLElement> {
 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'>;
+export type ReducedIconTypes = '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'> {
+export interface BadgeProps extends Pick<BadgeProps$1, 'color' | 'icon' | 'iconPosition' | 'id' | 'size' | 'tone'> {
     size?: Extract<BadgeProps$1['size'], 'small' | 'small-100' | 'base'>;
     tone?: Extract<BadgeProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
     color?: Extract<BadgeProps$1['color'], 'base' | 'subdued'>;

package/src/surfaces/checkout/components/Banner/examples/basic-banner.example.html

@@ -1,2 +1 @@
-<s-banner heading="Free shipping on all orders." tone="info">
-</s-banner>
+<s-banner heading="Free shipping on all orders." tone="info"></s-banner>

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

@@ -32,7 +32,7 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | 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'> {
+export interface ButtonElementProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'interestFor' | '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'>;

package/src/surfaces/checkout/components/Clickable/examples/basic-clickable.example.html

@@ -0,0 +1,3 @@
+<s-clickable>
+  <s-product-thumbnail src="https://cdn.shopify.com/YOUR_IMAGE_HERE"></s-product-thumbnail>
+</s-clickable>

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

@@ -35,7 +35,7 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | null;
 
 declare const tagName = "s-clickable";
-export interface ClickableElementProps extends Pick<ClickableProps$1, 'accessibilityLabel' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'command' | 'commandFor' | 'disabled' | 'display' | 'href' | 'id' | 'inlineSize' | 'lang' | 'loading' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'target' | 'type'> {
+export interface ClickableElementProps extends Pick<ClickableProps$1, 'accessibilityLabel' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'command' | 'commandFor' | 'disabled' | 'display' | 'href' | 'id' | 'inlineSize' | 'interestFor' | 'lang' | 'loading' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'target' | 'type'> {
     background?: Extract<ClickableProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';

package/src/surfaces/checkout/components/Details/examples/basic-details.example.html

@@ -0,0 +1,6 @@
+<s-details defaultOpen>
+  <s-summary>Pickup instructions</s-summary>
+  <s-text>
+    Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs.
+  </s-text>
+</s-details>

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

@@ -32,9 +32,9 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | null;
 
 declare const tagName = "s-details";
-export interface DetailsElementProps extends Pick<DetailsProps$1, 'defaultOpen' | 'open' | 'id' | 'toggleTransition'> {
+export interface DetailsElementProps extends Pick<DetailsProps$1, 'defaultOpen' | 'id' | 'open' | 'toggleTransition'> {
 }
-export interface DetailsEvents extends Pick<DetailsProps$1, 'onToggle'> {
+export interface DetailsEvents extends Pick<DetailsProps$1, 'onToggle' | 'onAfterToggle'> {
 }
 export interface DetailsElementEvents {
     /**
@@ -50,9 +50,22 @@ export interface DetailsElementEvents {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
      */
     toggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback fired when the element state changes **after** any animations have finished.
+     *
+     * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the
+     *   `newState` property will be set to `open`.
+     * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the
+     *   `newState` will be `closed`.
+     *
+     * @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;
 }
 export interface DetailsElement extends Omit<HTMLElement, 'ontoggle' | 'id'> {
     ontoggle: DetailsEvents['onToggle'];
+    onaftertoggle: DetailsEvents['onAfterToggle'];
 }
 export interface DetailsProps extends DetailsElementProps, DetailsEvents {
 }

package/src/surfaces/checkout/components/Divider/examples/basic-divider.example.html

@@ -0,0 +1 @@
+<s-divider></s-divider>

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

@@ -10,8 +10,23 @@
 /// <reference lib="DOM" />
 import type {DividerProps$1} 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;
+}
+
 declare const tagName = "s-divider";
-export interface DividerProps extends DividerProps$1 {
+export interface DividerProps extends Pick<DividerProps$1, 'direction' | 'id'> {
 }
 export interface DividerElement extends DividerProps, Omit<HTMLElement, 'id'> {
 }
@@ -23,7 +38,7 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: DividerProps$1;
+            [tagName]: DividerProps & BaseElementPropsWithChildren<DividerElement>;
         }
     }
 }

package/src/surfaces/checkout/components/DropZone/examples/basic-drop-zone.example.html

@@ -0,0 +1 @@
+<s-drop-zone accept="image/*"></s-drop-zone>

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

@@ -26,9 +26,9 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | null;
 
 declare const tagName = "s-drop-zone";
-export interface DropZoneElementProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'required'> {
+export interface DropZoneElementProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'required' | 'value'> {
 }
-export interface DropZoneEvents extends Pick<DropZoneProps$1, 'onDropRejected' | 'onInput'> {
+export interface DropZoneEvents extends Pick<DropZoneProps$1, 'onDropRejected' | 'onInput' | 'onChange'> {
 }
 export interface DropZoneElementEvents {
     /**
@@ -39,10 +39,15 @@ export interface DropZoneElementEvents {
      * Callback when the user makes any changes in the field.
      */
     input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user has finished selecting a file or files.
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface DropZoneElement extends DropZoneElementProps, Omit<HTMLElement, 'id' | 'oninput'> {
+export interface DropZoneElement extends DropZoneElementProps, Omit<HTMLElement, 'id' | 'oninput' | 'onchange'> {
     ondroprejected: DropZoneEvents['onDropRejected'];
     oninput: DropZoneEvents['onInput'];
+    onchange: DropZoneEvents['onChange'];
 }
 export interface DropZoneProps extends DropZoneElementProps, DropZoneEvents {
 }

package/src/surfaces/checkout/components/EmailField/examples/basic-email-field.example.html

@@ -0,0 +1 @@
+<s-email-field label="Email" defaultValue="snowdevil@shopify.com"></s-email-field>

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

@@ -61,6 +61,13 @@ export interface EmailFieldElementEvents {
      */
     input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
+export interface EmailFieldElementSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: HTMLElement;
+}
 export interface EmailFieldElement extends EmailFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
     onblur: EmailFieldEvents['onBlur'];
     onchange: EmailFieldEvents['onChange'];
@@ -82,4 +89,4 @@ declare module 'preact' {
     }
 }
 
-export type { EmailFieldElement, EmailFieldElementEvents, EmailFieldElementProps, EmailFieldEvents, EmailFieldProps };
+export type { EmailFieldElement, EmailFieldElementEvents, EmailFieldElementProps, EmailFieldElementSlots, EmailFieldEvents, EmailFieldProps };

package/src/surfaces/checkout/components/Grid/examples/basic-grid.example.html

@@ -0,0 +1,11 @@
+<s-grid gridTemplateColumns="1fr auto" gap="base">
+  <s-grid-item gridColumn="span 2" border="base" borderStyle="dashed">
+    Plants for sale
+  </s-grid-item>
+  <s-grid-item border="base" borderStyle="dashed">
+    Pothos
+  </s-grid-item>
+  <s-grid-item border="base" borderStyle="dashed">
+    $25.00
+  </s-grid-item>
+</s-grid>

package/src/surfaces/checkout/components/Grid.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 {GridProps$1,BorderSizeKeyword, BorderStyleKeyword,AlignContentKeyword, AlignItemsKeyword, JustifyContentKeyword, JustifyItemsKeyword,ColorKeyword,MaybeAllValuesShorthandProperty} from './components-shared.d.ts';
+import type {GridProps$1,MaybeResponsive, MaybeAllValuesShorthandProperty,BorderSizeKeyword, BorderStyleKeyword,AlignContentKeyword, AlignItemsKeyword, JustifyContentKeyword, JustifyItemsKeyword,ColorKeyword} from './components-shared.d.ts';
 
 export type ReducedAlignContentKeyword = Extract<AlignContentKeyword, 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
 export type ReducedAlignItemsKeyword = Extract<AlignItemsKeyword, 'normal' | 'stretch' | 'baseline' | 'center' | 'start' | 'end'>;
@@ -34,17 +34,17 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 
 declare const tagName = "s-grid";
 export interface GridProps extends Pick<GridProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'alignContent' | 'alignItems' | 'background' | 'blockSize' | 'border' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'columnGap' | 'display' | 'gap' | 'gridTemplateColumns' | 'gridTemplateRows' | 'id' | 'inlineSize' | 'justifyContent' | 'justifyItems' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'placeContent' | 'placeItems' | 'rowGap'> {
-    alignContent?: ReducedAlignContentKeyword | '';
-    alignItems?: ReducedAlignItemsKeyword | '';
+    alignContent?: MaybeResponsive<ReducedAlignContentKeyword | ''>;
+    alignItems?: MaybeResponsive<ReducedAlignItemsKeyword | ''>;
     background?: Extract<GridProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderColor?: ReducedColorKeyword | '';
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
-    justifyContent?: ReducedJustifyContentKeyword | '';
-    justifyItems?: ReducedJustifyItemsKeyword | '';
-    placeContent?: `${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword;
-    placeItems?: `${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword;
+    justifyContent?: MaybeResponsive<ReducedJustifyContentKeyword | ''>;
+    justifyItems?: MaybeResponsive<ReducedJustifyItemsKeyword | ''>;
+    placeContent?: MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>;
+    placeItems?: MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>;
 }
 export interface GridElement extends GridProps, Omit<HTMLElement, 'id'> {
 }

package/src/surfaces/checkout/components/Icon.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 {IconProps$1,IconType} from './components-shared.d.ts';
+import type {IconProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -18,12 +18,7 @@ export interface BaseElementProps<TClass = HTMLElement> {
     ref?: preact.Ref<TClass>;
     slot?: Lowercase<string>;
 }
-/**
- * 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'>;
+export type ReducedIconTypes = '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-icon";
 export interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {

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

@@ -32,7 +32,7 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | null;
 
 declare const tagName = "s-link";
-export interface LinkElementProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'lang' | 'target' | 'tone'> {
+export interface LinkElementProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'interestFor' | 'lang' | 'target' | 'tone'> {
     target?: Extract<LinkProps$1['target'], 'auto' | '_blank'>;
     tone?: Extract<LinkProps$1['tone'], 'auto' | 'neutral'>;
 }