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

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/address-autocomplete/standard.ts

@@ -65,7 +65,7 @@ export interface AddressAutocompleteStandardApi<
   /**
    * 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: CheckoutToken | undefined;

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

@@ -1,10 +1,9 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {SubscribableSignalLike} from '../../shared';
 import type {CartLine} from '../standard/standard';
 
 export interface CartLineItemApi {
   /**
-   * The cart line the extension is attached to. Until version `2023-04`, this property was a `StatefulRemoteSubscribable<PresentmentCartLine>`.
+   * The cart line the extension is attached to. Until version `2023-04`, this property was a `ReadonlySignalLike<PresentmentCartLine>`.
    */
-  target: StatefulRemoteSubscribable<CartLine>;
+  target: SubscribableSignalLike<CartLine>;
 }

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 {SubscribableSignalLike} from '../../shared';
 
 export interface OrderConfirmation {
   order: {
@@ -23,5 +23,5 @@ export interface OrderConfirmationApi {
   /**
    * Order information that's available post-checkout.
    */
-  orderConfirmation: StatefulRemoteSubscribable<OrderConfirmation>;
+  orderConfirmation: SubscribableSignalLike<OrderConfirmation>;
 }

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

@@ -1,4 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {SubscribableSignalLike} from '../../shared';
 
 export type PaymentMethodAttributesResult =
   | PaymentMethodAttributesResultSuccess
@@ -54,8 +54,8 @@ export interface PaymentOptionItemApi {
   applyPaymentMethodAttributesChange(
     change: PaymentMethodAttributesChange,
   ): Promise<PaymentMethodAttributesResult>;
-  paymentMethodAttributes?: StatefulRemoteSubscribable<
+  paymentMethodAttributes?: SubscribableSignalLike<
     PaymentMethodAttribute[] | undefined
   >;
-  bankIdNumber?: StatefulRemoteSubscribable<string | undefined>;
+  bankIdNumber?: SubscribableSignalLike<string | undefined>;
 }

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

@@ -1,15 +1,14 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {SubscribableSignalLike} from '../../shared';
 import type {PickupLocationOption} from '../standard/standard';
 
 export interface PickupLocationItemApi {
   /**
    * The pickup location the extension is attached to.
    */
-  target: StatefulRemoteSubscribable<PickupLocationOption>;
+  target: SubscribableSignalLike<PickupLocationOption>;
 
   /**
    * Whether the pickup location is currently selected.
    */
-  isTargetSelected: StatefulRemoteSubscribable<boolean>;
+  isTargetSelected: SubscribableSignalLike<boolean>;
 }

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

@@ -1,8 +1,8 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {SubscribableSignalLike} from '../../shared';
 
 export interface PickupLocationListApi {
   /**
    * Whether the customer location input form is shown to the buyer.
    */
-  isLocationFormVisible: StatefulRemoteSubscribable<boolean>;
+  isLocationFormVisible: SubscribableSignalLike<boolean>;
 }

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

@@ -1,8 +1,8 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
+import type {SubscribableSignalLike} from '../../shared';
 
 export interface PickupPointListApi {
   /**
    * Whether the customer location input form is shown to the buyer.
    */
-  isLocationFormVisible: StatefulRemoteSubscribable<boolean>;
+  isLocationFormVisible: SubscribableSignalLike<boolean>;
 }

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,17 +1,16 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {SubscribableSignalLike} from '../../shared';
 import type {ShippingOption} from '../standard/standard';
 
 export interface ShippingOptionItemApi {
   /**
    * The shipping option the extension is attached to.
    */
-  target: StatefulRemoteSubscribable<ShippingOption>;
+  target: SubscribableSignalLike<ShippingOption>;
 
   /**
    * Whether the shipping option the extension is attached to is currently selected in the UI.
    */
-  isTargetSelected: StatefulRemoteSubscribable<boolean>;
+  isTargetSelected: SubscribableSignalLike<boolean>;
 
   /**
    * The render mode of the shipping option.

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

@@ -1,5 +1,4 @@
-import type {StatefulRemoteSubscribable} from '@remote-ui/async-subscription';
-
+import type {SubscribableSignalLike} from '../../shared';
 import type {
   DeliveryGroup,
   DeliveryGroupType,
@@ -11,11 +10,11 @@ export interface ShippingOptionListApi {
   /**
    * The delivery group list the extension is attached to. The target will be undefined when there are no groups for a given type.
    */
-  target: StatefulRemoteSubscribable<DeliveryGroupList | undefined>;
+  target: SubscribableSignalLike<DeliveryGroupList | undefined>;
   /**
    * The list of selection groups available to the buyers. The property will be undefined when no such groups are available.
    */
-  deliverySelectionGroups: StatefulRemoteSubscribable<
+  deliverySelectionGroups: SubscribableSignalLike<
     DeliverySelectionGroup[] | undefined
   >;
 }

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

@@ -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/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>