@shopify/ui-extensions 2025.10.0-rc.9 → 2025.10.1

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

@@ -1,5 +1,3 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
 import type {
   ValidationError,
   SellingPlan,
@@ -19,6 +17,7 @@ import type {
   StorefrontApiVersion,
   LocalizedFieldKey,
 } from '../../../../shared';
+import type {SubscribableSignalLike} from '../../shared';
 
 export type {ApiVersion, Capability} from '../../../../shared';
 
@@ -83,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.
@@ -103,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.
@@ -351,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.
@@ -374,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
@@ -382,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
@@ -390,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 {
@@ -423,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>;
 }
 
 /**
@@ -497,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.
@@ -511,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
@@ -523,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[] | undefined>;
+  attributes: SubscribableSignalLike<Attribute[]>;
 
   /**
    * All available payment options.
    */
-  availablePaymentOptions: StatefulRemoteSubscribable<PaymentOption[]>;
+  availablePaymentOptions: SubscribableSignalLike<PaymentOption[]>;
 
   /**
    * Information about the buyer that is interacting with the checkout.
@@ -553,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.
@@ -571,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.
@@ -614,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
@@ -638,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.
@@ -658,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).
@@ -680,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
@@ -690,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
@@ -698,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;
@@ -730,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.
@@ -745,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 {
@@ -781,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.
@@ -789,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.
@@ -797,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.
@@ -806,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>;
 }
 
 /**
@@ -914,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 {
@@ -977,6 +980,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

@@ -26,7 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 }
 
 declare const tagName = "s-abbreviation";
-export interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title'> {
+export interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title' | 'id'> {
 }
 export interface AbbreviationElement extends AbbreviationProps, Omit<HTMLElement, 'id' | 'title'> {
 }

package/src/surfaces/checkout/components/Announcement/examples/basic-announcement.example.html

@@ -0,0 +1,16 @@
+<s-announcement>
+  <s-stack direction="inline" gap="base">
+    <s-text>Check our latest offers</s-text>
+    <s-link commandFor="modal" command="--show"> Fill out the survey </s-link>
+  </s-stack>
+  <s-modal id="modal" heading="Tell us about your shopping experience">
+    <s-stack gap="base">
+      <s-text>We'd love to hear about your shopping experience</s-text>
+      <s-text-area
+        rows="4"
+        label="How can we make your shopping experience better?"
+      ></s-text-area>
+      <s-button>Submit</s-button>
+    </s-stack>
+  </s-modal>
+</s-announcement>

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

@@ -0,0 +1,95 @@
+/** 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 {AnnouncementProps$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;
+}
+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-announcement";
+export interface AnnouncementEvents extends Pick<AnnouncementProps$1, 'onAfterToggle' | 'onDismiss' | 'onToggle'> {
+}
+export interface AnnouncementElementEvents {
+    /**
+     * 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;
+    /**
+     * Callback fired when the announcement is dismissed by the user
+     * (either via the built-in dismiss button or programmatically).
+     */
+    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback straight after the element state changes.
+     *
+     * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the
+     *   `newState` property will be set to `open`.
+     * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the
+     *   `newState` will be `closed`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+     */
+    toggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface AnnouncementElement extends AnnouncementMethods, Omit<HTMLElement, 'id' | 'ontoggle'> {
+    onaftertoggle?: AnnouncementEvents['onAfterToggle'];
+    ondismiss?: AnnouncementEvents['onDismiss'];
+    ontoggle?: AnnouncementEvents['onToggle'];
+}
+export interface AnnouncementProps extends AnnouncementEvents {
+}
+export interface AnnouncementMethods {
+    dismiss: () => void;
+}
+export interface AnnouncementElementMethods {
+    dismiss: AnnouncementMethods['dismiss'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: AnnouncementElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: AnnouncementProps & BaseElementPropsWithChildren<AnnouncementElement>;
+        }
+    }
+}
+
+export type { AnnouncementElement, AnnouncementElementEvents, AnnouncementElementMethods, AnnouncementEvents, AnnouncementMethods, AnnouncementProps };

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

@@ -0,0 +1,57 @@
+/** 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} 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;
+}
+/**
+ * Used as the single source of truth for checkout icon types.
+ *
+ * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ */
+declare const CHECKOUT_AVAILABLE_ICONS: readonly ["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 = (typeof CHECKOUT_AVAILABLE_ICONS)[number];
+
+declare const tagName = "s-badge";
+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'>;
+    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/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/Banner.d.ts

@@ -27,9 +27,12 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 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 BannerBaseProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'tone'> {
+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 BannerEvents extends Pick<BannerProps$1, 'onAfterHide' | 'onDismiss'> {
@@ -44,7 +47,7 @@ export interface BannerElementEvents {
      * 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: CallbackEvent<typeof tagName>) => void) | null;
+    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
      * Event handler when the banner is dismissed by the user.
      *
@@ -52,13 +55,13 @@ export interface BannerElementEvents {
      *
      * The `hidden` property will be `false` when this event fires.
      */
-    dismiss?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface BannerElement extends BannerBaseProps, Omit<BannerEvents, 'onAfterHide' | 'onDismiss'>, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
+export interface BannerElement extends BannerElementProps, Omit<HTMLElement, 'id' | 'title' | 'hidden'> {
     onafterhide: BannerEvents['onAfterHide'];
     ondismiss: BannerEvents['onDismiss'];
 }
-export interface BannerProps extends BannerBaseProps, BannerEvents {
+export interface BannerProps extends BannerElementProps, BannerEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -73,4 +76,4 @@ declare module 'preact' {
     }
 }
 
-export type { BannerBaseProps, BannerElement, BannerElementEvents, BannerEvents, BannerProps };
+export type { BannerElement, BannerElementEvents, BannerElementProps, BannerEvents, BannerProps };

package/src/surfaces/checkout/components/Box/examples/basic-box.example.html

@@ -6,6 +6,6 @@
 >
   <s-paragraph>
     Baked fresh to order. Please order 1-2 days before needed due to potential
-    shipping variatons
+    shipping variations.
   </s-paragraph>
 </s-box>

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

@@ -27,9 +27,12 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 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 ButtonBaseProps 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'>;
@@ -41,13 +44,15 @@ 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: CallbackEvent<typeof tagName>) => void) | null;
+    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface ButtonElement extends ButtonBaseProps, Omit<ButtonEvents, 'onClick'>, Omit<HTMLElement, 'id' | 'onclick'> {
+export interface ButtonElement extends ButtonElementProps, Omit<HTMLElement, 'id' | 'onclick'> {
     onclick: ButtonEvents['onClick'];
 }
-export interface ButtonProps extends ButtonBaseProps, ButtonEvents {
+export interface ButtonProps extends ButtonElementProps, ButtonEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -62,4 +67,4 @@ declare module 'preact' {
     }
 }
 
-export type { ButtonBaseProps, ButtonElement, ButtonElementEvents, ButtonEvents, ButtonProps };
+export type { ButtonElement, ButtonElementEvents, ButtonElementProps, ButtonEvents, ButtonProps };