@shopify/ui-extensions 2026.1.2 → 2026.1.4

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

@@ -30,104 +30,78 @@ export interface ExtensionSettings {
 export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   /**
    * The identifier that specifies where in Shopify’s UI your code is being
-   * injected. This will be one of the targets you have included in your
-   * extension’s configuration file.
+   * injected. This will be one of the [targets](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#targets) you have included in your
+   * extension’s configuration file. For more information, refer to the [extension targets overview](/docs/api/customer-account-ui-extensions/{API_VERSION}/extension-targets-overview).
    *
    * @example 'customer-account.order-status.block.render'
-   * @see https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview
-   * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets
    *
-   * @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
+   * @deprecated Use `extension.target` instead.
    */
   extensionPoint: Target;
 
   /**
-   * Meta information about the extension.
+   * Metadata about the extension, including its target, version, and editor context. Use this to conditionally render content based on where the extension is running.
    */
   extension: Extension;
 
   /**
-   * Information about the authenticated account.
+   * The logged-in customer's account information, including their customer ID and B2B company details. Use this to personalize your extension based on who is viewing the page.
    */
   authenticatedAccount: AuthenticatedAccount;
 
   /**
-   * The renderer version being used for the extension.
+   * The API version your extension is running against. Use this to conditionally enable features or handle breaking changes when your extension supports multiple API versions.
    *
    * @example 'unstable'
    */
   version: Version;
 
   /**
-   * Details about the language of the buyer.
+   * The buyer's language, country, and locale context. Use this to adapt your extension to the buyer's region and display localized content.
    */
   localization: Localization;
 
   /**
-   * Utilities for translating content and formatting values according to the current `localization`
-   * of the user.
+   * Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use this alongside `localization` to build fully localized extensions.
    */
   i18n: I18n;
 
   /**
-   * Key-value storage for the extension target.
+   * Key-value storage that persists across customer sessions for this extension target. Use this to store preferences, dismiss states, or cached data without requiring a backend call.
    */
   storage: Storage;
 
   /**
-   * Provides access to session tokens, which can be used to verify token claims on your app's server.
-   *
-   * See [session token examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/session-token#examples) for more information.
+   * Authenticates requests between your extension and your app backend. Call `get()` to retrieve a signed JWT containing the customer ID, shop domain, and expiration time, then verify it server-side. For more information, refer to the [Session Token API](/docs/api/customer-account-ui-extensions/{API_VERSION}/target-apis/platform-apis/session-token-api).
    */
   sessionToken: SessionToken;
 
   /**
-   * Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
+   * Tracks custom events and sends visitor information to [web pixels](/docs/apps/build/marketing-analytics/pixels). Use `publish()` to emit events and `visitor()` to submit visitor data.
    *
-   * > Note: Requires to [connect a third-party domain](https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains/connect-domain-customer-account) to Shopify for your customer account pages.
+   * > Note: Requires [connecting a third-party domain](https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains/connect-domain-customer-account) to Shopify for your customer account pages.
    */
   analytics: Analytics;
 
   /**
-   * Entry point for Shopify intents.
-   *
-   * Intents pair an `action` (verb) with a resource `type` and optional `value`
-   * and `data` to request a workflow.
+   * Invokes built-in Shopify workflows for managing customer account resources. Use intents to trigger native modals and flows, such as replacing a payment method on a subscription contract, without building the UI yourself.
    */
   intents: Intents;
 
   /**
-   * The settings matching the settings definition written in the
-   * [`shopify.ui.extension.toml`](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration) file.
-   *
-   *  See [settings examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/order-status-api/settings#examples) for more information.
-   *
-   * > 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.
+   * Merchant-defined configuration values for your extension, as specified in the [settings definition](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#settings-definition) of your `shopify.extension.toml` file. Settings update in real time as merchants edit them in the extension editor. The value is empty until a merchant sets it.
    */
   settings: SubscribableSignalLike<ExtensionSettings>;
 
   /**
-   * The Toast API displays a non-disruptive message that displays at the bottom
-   * of the interface to provide quick, at-a-glance feedback on the outcome
-   * of an action.
-   *
-   * How to use:
-   *
-   * - Use toasts to confirm successful actions.
-   *
-   * - Aim for two words.
-   *
-   * - Use noun + past tense verb format. For example, \`Changes saved\`.
-   *
-   * For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/polaris-web-components/feedback/banner) component.
+   * Displays brief, non-blocking messages at the bottom of the page to confirm actions or report errors. Use noun + past tense verb format (for example, `Changes saved`). For persistent messages, use a [Banner](/docs/api/customer-account-ui-extensions/{API_VERSION}/ui-components/feedback-and-status-indicators/banner) component instead.
    */
   toast: ToastApi;
 
   /**
-   * Used to query the Storefront GraphQL API with a prefetched token.
+   * Queries the [Storefront GraphQL API](/docs/api/storefront) directly from your extension using a prefetched token. Use this to fetch product data, collection details, or other storefront information without routing requests through your app backend.
    *
-   * See [storefront api access examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/storefront-api#examples) for more information.
+   * Requires the [`api_access` capability](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#api-access).
    */
   query: <Data = unknown, Variables = {[key: string]: unknown}>(
     query: string,
@@ -135,16 +109,14 @@ export interface StandardApi<Target extends ExtensionTarget = ExtensionTarget> {
   ) => Promise<{data?: Data; errors?: GraphQLError[]}>;
 
   /**
-   * Customer privacy consent settings and a flag denoting if consent has previously been collected.
+   * The buyer's current privacy consent settings, including their consent decisions for analytics, marketing, and data sale, whether a consent banner should be displayed, and whether the buyer is in a region that requires specific opt-out controls. Use this to read the buyer's consent state and determine how to display privacy-related UI.
    */
   customerPrivacy: SubscribableSignalLike<CustomerPrivacy>;
 
   /**
-   * Allows setting and updating customer privacy consent settings and tracking consent metafields.
-   *
-   * > Note: Requires the [`customer_privacy` capability](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration#collect-buyer-consent) to be set to `true`.
+   * Applies updated tracking consent preferences for the buyer, including their decisions for analytics, marketing, and data sale, along with any custom tracking consent [metafields](/docs/apps/build/custom-data/metafields). Returns a promise that resolves with the result of the consent update.
    *
-   * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
+   * {% include /apps/checkout/privacy-icon.md %} Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) and access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
    */
   applyTrackingConsentChange: ApplyTrackingConsentChangeType;
 }
@@ -171,6 +143,9 @@ export interface OrderApi {
   orderId: string;
 }
 
+/**
+ * The buyer's language, country, and locale context in customer accounts. Properties on this interface are subscribable and update automatically when the buyer changes their country.
+ */
 export interface Localization {
   /**
    * The language the buyer sees in the customer account hub.
@@ -178,22 +153,14 @@ export interface Localization {
   language: SubscribableSignalLike<Language>;
 
   /**
-   * This is the buyer's language, as supported by the extension.
-   * If the buyer's actual language is not supported by the extension,
-   * this is the fallback locale used for translations.
+   * The buyer's language, as supported by the extension. If the buyer's actual language isn't supported, this falls back to the closest match or the extension's default locale (the one matching your `.default.json` file).
    *
-   * For example, if the buyer's language is 'fr-CA' but your extension
-   * only supports translations for 'fr', then the `isoCode` for this
-   * language is 'fr'. If your extension does not provide french
-   * translations at all, this value is the default locale for your
-   * extension (that is, the one matching your .default.json file).
+   * For example, if the buyer's language is `'fr-CA'` but your extension only supports `'fr'`, then `isoCode` is `'fr'`. If your extension doesn't provide French translations at all, this returns the default locale.
    */
   extensionLanguage: SubscribableSignalLike<Language>;
 
   /**
-   * The country context of the buyer sees in the customer account.
-   * It will update if the buyer changes the country in the customer account
-   * If the country is unknown, then the value is undefined.
+   * The buyer's country in customer accounts. Updates automatically if the buyer changes their country. The value is `undefined` if the country is unknown.
    */
   country: SubscribableSignalLike<Country | undefined>;
 }
@@ -203,6 +170,9 @@ export interface Localization {
  */
 export type NavigationTypeString = 'push' | 'replace' | 'traverse';
 
+/**
+ * Options passed to `Navigation.navigate()` to control history behavior and attach state to the navigation entry.
+ */
 export interface NavigationNavigateOptions {
   /**
    * Developer-defined information to be stored in the associated NavigationHistoryEntry once the navigation is complete, retrievable via getState().
@@ -215,62 +185,83 @@ export interface NavigationNavigateOptions {
 }
 
 /**
- * The NavigationHistoryEntry interface of the Navigation API represents a single navigation history entry.
+ * A single entry in the navigation history stack. Each entry has a unique key, a URL, and optional developer-defined state.
  */
 export interface NavigationHistoryEntry {
-  /** Returns the key of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list rather than the entry itself. */
+  /**
+   * A unique, platform-generated identifier for this entry's position in the history stack. This value identifies the slot, not the content.
+   */
   key: string;
   /**
-   * Returns the URL of this history entry.
+   * The URL associated with this history entry, or `null` if unavailable.
    */
   url: string | null;
   /**
-   * Returns a clone of the available state associated with this history entry.
+   * Returns a clone of the developer-defined state associated with this history entry.
    */
   getState(): unknown;
 }
 
+/**
+ * Options for `Navigation.updateCurrentEntry()`. Use this to update the state of the current history entry without triggering a navigation.
+ */
 export interface NavigationUpdateCurrentEntryOptions {
+  /**
+   * Developer-defined state to associate with the current navigation history entry.
+   */
   state: unknown;
 }
 
 /**
- * The NavigationCurrentEntryChangeEvent interface of the Navigation API is the event object for the currententrychange event, which fires when the Navigation.currentEntry has changed.
+ * The event object passed to `currententrychange` listeners when the current navigation entry changes.
  */
 export interface NavigationCurrentEntryChangeEvent {
   /**
-   * Returns the type of the navigation that resulted in the change.
+   * The type of navigation that caused the change: `'push'`, `'replace'`, or `'traverse'`.
    */
   navigationType?: NavigationTypeString;
   /**
-   * Returns the NavigationHistoryEntry that was navigated from.
+   * The history entry the buyer navigated away from.
    */
   from: NavigationHistoryEntry;
 }
 
+/**
+ * Navigates between pages in customer accounts, including other extensions and host pages. Full-page extensions also get access to the current navigation entry and history state.
+ * @publicDocs
+ */
 export interface Navigation {
   /**
-   * The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
+   * Navigates to a URL, updating any provided state in the history entries list. Supports [custom protocols](/docs/api/customer-account-ui-extensions/{API_VERSION}#custom-protocols) for navigating within customer accounts.
    */
   navigate: NavigateFunction;
   /**
-   * The currentEntry read-only property of the Navigation interface returns a NavigationHistoryEntry object representing the location the user is currently navigated to right now.
+   * The current navigation history entry, representing the page the buyer is viewing. Only available in full-page extensions.
    */
   currentEntry: NavigationHistoryEntry;
   /**
-   * The updateCurrentEntry() method of the Navigation interface updates the state of the currentEntry; used in cases where the state change will be independent of a navigation or reload.
+   * Updates the state of the current history entry without triggering a navigation. Use this when the state change is independent of a page transition, such as saving form progress.
    */
   updateCurrentEntry(options: NavigationUpdateCurrentEntryOptions): void;
+  /**
+   * Registers a listener that fires whenever the current navigation entry changes, such as when the buyer navigates to a different page.
+   */
   addEventListener(
     type: 'currententrychange',
     cb: (event: NavigationCurrentEntryChangeEvent) => void,
   ): void;
+  /**
+   * Removes a previously registered `currententrychange` listener.
+   */
   removeEventListener(
     type: 'currententrychange',
     cb: (event: NavigationCurrentEntryChangeEvent) => void,
   ): void;
 }
 
+/**
+ * A callable function that navigates to a URL within customer accounts. Accepts a destination URL and optional navigation options.
+ */
 export interface NavigateFunction {
   /**
    * Navigates to a specific URL, updating any provided state in the history entries list.
@@ -279,4 +270,7 @@ export interface NavigateFunction {
   (url: string, options?: NavigationNavigateOptions): void;
 }
 
+/**
+ * The API version string your extension is running against, such as `'2026-04-rc'` or `'unstable'`.
+ */
 export type Version = string;

package/src/surfaces/customer-account/components/Abbreviation/examples/basic-abbreviation.example.html

@@ -0,0 +1 @@
+<s-abbreviation title="United States Dollar">USD</s-abbreviation>

package/src/surfaces/customer-account/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/customer-account/components/Avatar.d.ts

@@ -1,5 +1,8 @@
 import {BaseElementPropsWithChildren, IdProps, SizeKeyword} from './shared';
 
+/**
+ * An event listener typed to a specific HTML element, with a strongly typed `currentTarget`.
+ */
 export type CallbackEventListener<
   TTagName extends keyof HTMLElementTagNameMap,
   TEvent extends Event = Event,
@@ -9,21 +12,30 @@ export type CallbackEventListener<
     })
   | null;
 
+/**
+ * The properties for the avatar component. An avatar displays a user or entity image with fallback initials when the image isn't available. Properties include `src` for the image URL, `initials` for the fallback text, `alt` for accessibility text, and `size` for controlling the avatar dimensions.
+ */
 export interface AvatarElementProps extends IdProps {
   /**
-   * Initials to display in the avatar.
+   * The initials to display in the avatar when no image is provided or fails to load. Typically one or two characters representing a person's first and last name initials, such as "JD" for John Doe.
    *
-   * Initials will be rendered as a fallback if `src` is not provided, fails to load or does not load quickly.
+   * Characters beyond the first two might be truncated. Special characters, emojis, and non-Latin scripts might not render as expected.
    */
   initials?: string;
 
   /**
-   * The URL or path to the image.
+   * The URL or path to the avatar image. When provided, the image takes priority over `initials`. If the image fails to load or loads slowly, `initials` will be rendered as a fallback.
    */
   src?: string;
 
   /**
-   * Size of the avatar.
+   * The size of the avatar image.
+   *
+   * - `'small'`: Small avatar, good for secondary contexts or tight layouts.
+   * - `'large'`: Large avatar for emphasis or when the avatar is a focal point.
+   * - `'base'`: Default size that works well in most contexts.
+   * - `'small-200'`: Extra small avatar, suitable for compact displays or lists with many items.
+   * - `'large-200'`: Extra large avatar for prominent display.
    *
    * @default 'base'
    */
@@ -33,28 +45,40 @@ export interface AvatarElementProps extends IdProps {
   >;
 
   /**
-   * An alternative text description that describe the image for the reader
-   * to understand what it is about or identify the user the avatar belongs to.
+   * Alternative text that describes the avatar for accessibility.
+   *
+   * Provides a text description of the avatar for users with assistive technology
+   * and serves as a fallback when the avatar fails to load. A well-written description
+   * enables people with visual impairments to understand non-text content.
+   *
+   * When a screen reader encounters an avatar, it reads this description aloud.
+   * When an avatar fails to load, this text displays on screen, helping all users
+   * understand what content was intended.
+   *
+   * Learn more about [writing effective alt text](https://www.shopify.com/ca/blog/image-alt-text#4)
+   * and the [alt attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt).
    */
   alt?: string;
 }
 
+/**
+ * The event handlers for the avatar component.
+ */
 export interface AvatarElementEvents {
   /**
-   * Invoked when load of provided image completes successfully.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+   * A callback that's fired when the avatar image has loaded successfully.
    */
   onLoad?(event: Event): void;
 
   /**
-   * Invoked on load error of provided image.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
+   * A callback that's fired when the avatar image fails to load.
    */
   onError?(event: Event): void;
 }
 
+/**
+ * The HTML element interface for the `s-avatar` custom element.
+ */
 export interface AvatarElement
   extends AvatarElementProps,
     Omit<HTMLElement, 'id'> {
@@ -62,18 +86,24 @@ export interface AvatarElement
   onerror: AvatarElementEvents['onError'];
 }
 
+/**
+ * The event listeners for the `s-avatar` custom element.
+ */
 export interface AvatarEvents {
   /**
-   * Callback when the image loads successfully.
+   * A callback that's fired when the avatar image has loaded successfully.
    */
   load?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 
   /**
-   * Callback when the image fails to load.
+   * A callback that's fired when the avatar image fails to load.
    */
   error?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
 
+/**
+ * The properties for the avatar component when it's used in JSX.
+ */
 export type AvatarProps = AvatarElementProps & AvatarElementEvents;
 
 declare global {

package/src/surfaces/customer-account/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/customer-account/components/Banner/examples/basic-banner.example.html

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

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

@@ -0,0 +1,11 @@
+<s-box
+  background="subdued"
+  borderRadius="base"
+  borderWidth="base"
+  padding="base"
+>
+  <s-paragraph>
+    Baked fresh to order. Please order 1-2 days before needed due to potential
+    shipping variations.
+  </s-paragraph>
+</s-box>

package/src/surfaces/customer-account/components/Button/examples/basic-button.example.html

@@ -0,0 +1,2 @@
+<s-button variant="secondary">Cancel</s-button>
+<s-button variant="primary">Save</s-button>

package/src/surfaces/customer-account/components/ButtonGroup.d.ts

@@ -1,23 +1,31 @@
 import {BaseElementPropsWithChildren, IdProps} from './shared';
-
+/**
+ * @publicDocs
+ */
 export interface ButtonGroupProps extends IdProps {
   /**
-   * Label for the button group that describes the content of the group for screen reader users to understand what's included.
+   * A label that describes the purpose of the button group for users of assistive technologies such as screen readers. Use this to provide context about the grouped actions, such as "Order actions" or "Profile settings."
    */
   accessibilityLabel?: string;
 }
 
+/**
+ * @publicDocs
+ */
 export interface ButtonGroupElementSlots {
   /**
-   * The primary action for the group. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.
+   * The primary action for the group. Accepts a single [button](/docs/api/customer-account-ui-extensions/{API_VERSION}/web-components/actions/button) element. Use this for the most important action in the group, such as "Save" or "Submit."
    */
   'primary-action'?: HTMLElement;
   /**
-   * The secondary actions for the group. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.
+   * The secondary actions for the group. Accepts multiple [button](/docs/api/customer-account-ui-extensions/{API_VERSION}/web-components/actions/button) elements. Use this for supplementary actions like "Cancel", "Delete", or other alternatives.
    */
   'secondary-actions'?: HTMLElement;
 }
 
+/**
+ * @publicDocs
+ */
 export interface ButtonGroupElement
   extends ButtonGroupProps,
     Omit<HTMLElement, 'id'> {}

package/src/surfaces/customer-account/components/Checkbox/examples/basic-checkbox.example.html

@@ -0,0 +1 @@
+<s-checkbox defaultChecked label="Email me with news and offers"></s-checkbox>

package/src/surfaces/customer-account/components/Chip/examples/basic-chip.example.html

@@ -0,0 +1 @@
+<s-chip>50% OFF</s-chip>

package/src/surfaces/customer-account/components/ChoiceList/examples/basic-choice-list.example.html

@@ -0,0 +1,7 @@
+<s-choice-list>
+  <s-choice defaultSelected value="location-1"
+    >Yonge-Dundas Square locations</s-choice
+  >
+  <s-choice value="location-2">Distillery District location</s-choice>
+  <s-choice value="location-3">Yorkville location</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html

@@ -0,0 +1,47 @@
+<s-choice-list variant="block">
+  <s-choice defaultSelected value="yonge-dundas">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yonge-Dundas Square</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >1 Dundas St E, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">1.2 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="distillery">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Distillery District</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Mill St, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">4 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="yorkville">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yorkville</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Avenue Rd, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">6 km</s-text>
+    </s-stack>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list variant="grid">
+  <s-choice defaultSelected value="standard">Standard</s-choice>
+  <s-choice value="deluxe">Deluxe</s-choice>
+  <s-choice value="personalized">Personalized</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html

@@ -0,0 +1,6 @@
+<s-choice-list variant="inline">
+  <s-choice defaultSelected value="3.50">$3.50</s-choice>
+  <s-choice value="4.50">$4.50</s-choice>
+  <s-choice value="5.50">$5.50</s-choice>
+  <s-choice value="other">Other</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list>
+  <s-choice defaultSelected value="location-1">Yonge-Dundas Square</s-choice>
+  <s-choice value="location-2">Distillery District</s-choice>
+  <s-choice value="location-3">Yorkville</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/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/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html

@@ -0,0 +1 @@
+<s-clickable-chip removable>Shipping insurance</s-clickable-chip>

package/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html

@@ -0,0 +1,2 @@
+<s-button commandFor="discount-code">Copy discount code</s-button>
+<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>

package/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html

@@ -0,0 +1,5 @@
+<s-consent-checkbox
+  defaultChecked
+  label="Text me with news and offers"
+  policy="sms-marketing"
+></s-consent-checkbox>

package/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html

@@ -0,0 +1,5 @@
+<s-consent-phone-field
+  label="Phone"
+  policy="sms-marketing"
+  defaultValue="587-746-7439"
+></s-consent-phone-field>