@shopify/ui-extensions 2025.10.2 → 2025.10.4

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@shopify/ui-extensions",
-  "version": "2025.10.2",
+  "version": "2025.10.4",
   "scripts": {
     "docs:admin": "node ./docs/surfaces/admin/build-docs.mjs",
     "docs:checkout": "bash ./docs/surfaces/checkout/build-docs.sh",
+    "docs:checkout:fast": "bash ./docs/surfaces/checkout/build-docs-fast.sh",
+    "docs:checkout:dev": "bash ./docs/surfaces/checkout/build-docs-watch.sh",
     "docs:point-of-sale": "node ./docs/surfaces/point-of-sale/build-docs.mjs",
     "docs:customer-account": "node ./docs/surfaces/customer-account/build-docs.mjs"
   },
@@ -127,7 +129,7 @@
   ],
   "devDependencies": {
     "@remote-ui/async-subscription": "^2.1.16",
-    "@shopify/generate-docs": "0.19.6",
+    "@shopify/generate-docs": "https://registry.npmjs.org/@shopify/generate-docs/-/generate-docs-0.19.8.tgz",
     "@quilted/react-testing": "^0.6.11",
     "typescript": "^4.9.0",
     "@faker-js/faker": "^8.4.1",

package/src/surfaces/admin/api/intents/examples/edit-metaobject.js

@@ -2,6 +2,7 @@ const {intents} = useApi(TARGET);
 
 const activity = await intents.invoke('edit:shopify/Metaobject', {
   value: 'gid://shopify/Metaobject/123456789',
+  data: {type: 'shopify--color-pattern'},
 });
 
 const response = await activity.complete;

package/src/surfaces/admin/api/intents/examples/edit-variant.js

@@ -2,6 +2,7 @@ const {intents} = useApi(TARGET);
 
 const activity = await intents.invoke('edit:shopify/ProductVariant', {
   value: 'gid://shopify/ProductVariant/123456789',
+  data: {productId: 'gid://shopify/Product/123456789'},
 });
 
 const response = await activity.complete;

package/src/surfaces/admin/components/AdminAction.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/AdminBlock.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/AdminPrintAction.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Avatar/examples/basic-usage.jsx

@@ -0,0 +1 @@
+<s-avatar initials="SC" alt="Sarah Chen" />

package/src/surfaces/admin/components/Avatar/examples/color-consistency-demo.jsx

@@ -0,0 +1,7 @@
+<s-stack direction="inline" gap="base">
+  <s-avatar initials="AB" alt="Apparel boutique" size="base" />
+  <s-avatar initials="CD" alt="Coffee direct" size="base" />
+  <s-avatar initials="EF" alt="Electronics franchise" size="base" />
+  <s-avatar initials="AB" alt="Art books store" size="base" />
+  {/* Note: Both AB avatars will have the same color */}
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/default-avatar-no-props.jsx

@@ -0,0 +1 @@
+<s-avatar alt="Customer" />

package/src/surfaces/admin/components/Avatar/examples/default.jsx

@@ -0,0 +1 @@
+<s-avatar alt="John Doe" initials="JD" />

package/src/surfaces/admin/components/Avatar/examples/error-handling-example.jsx

@@ -0,0 +1,5 @@
+<s-avatar
+  src="/invalid-customer-photo.jpg"
+  initials="CS"
+  alt="Customer support"
+ />

package/src/surfaces/admin/components/Avatar/examples/fulfillment-partner-avatars.jsx

@@ -0,0 +1,14 @@
+<s-stack gap="small">
+  <s-stack direction="inline" gap="small">
+    <s-avatar initials="3P" alt="3PL partner" size="small" />
+    <s-text>Third-party logistics</s-text>
+  </s-stack>
+  <s-stack direction="inline" gap="small">
+    <s-avatar initials="DS" alt="Dropship supplier" size="small" />
+    <s-text>Dropship supplier</s-text>
+  </s-stack>
+  <s-stack direction="inline" gap="small">
+    <s-avatar initials="WH" alt="Warehouse hub" size="small" />
+    <s-text>Warehouse hub</s-text>
+  </s-stack>
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/in-customer-list-context.jsx

@@ -0,0 +1,24 @@
+<s-stack gap="base">
+  <s-stack direction="inline" gap="small">
+    <s-avatar
+      src="/customers/merchant-alice.jpg"
+      initials="AJ"
+      alt="Alice's jewelry store"
+      size="small"
+     />
+    <s-text>Alice's jewelry store</s-text>
+  </s-stack>
+  <s-stack direction="inline" gap="small">
+    <s-avatar initials="BP" alt="Bob's pet supplies" size="small" />
+    <s-text>Bob's pet supplies</s-text>
+  </s-stack>
+  <s-stack direction="inline" gap="small">
+    <s-avatar
+      src="/customers/charlie-cafe.jpg"
+      initials="CC"
+      alt="Charlie's coffee corner"
+      size="small"
+     />
+    <s-text>Charlie's coffee corner</s-text>
+  </s-stack>
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/long-initials-handling.jsx

@@ -0,0 +1,5 @@
+<s-stack direction="inline" gap="base">
+  <s-avatar initials="TC" alt="Tech customer" size="base" />
+  <s-avatar initials="VIP" alt="VIP customer store" size="base" />
+  <s-avatar initials="SHOP" alt="Shopify partner store" size="base" />
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/size-variations.jsx

@@ -0,0 +1,7 @@
+<s-stack direction="inline" gap="base">
+  <s-avatar initials="SC" alt="Store customer" size="small-200" />
+  <s-avatar initials="MR" alt="Merchant representative" size="small" />
+  <s-avatar initials="SM" alt="Store manager" size="base" />
+  <s-avatar initials="SF" alt="Staff member" size="large" />
+  <s-avatar initials="SO" alt="Store owner" size="large-200" />
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/staff-member-profiles.jsx

@@ -0,0 +1,10 @@
+<s-stack direction="inline" gap="large">
+  <s-avatar
+    src="/staff/manager-profile.jpg"
+    initials="SM"
+    alt="Store manager"
+    size="large"
+   />
+  <s-avatar initials="CS" alt="Customer service rep" size="base" />
+  <s-avatar initials="FT" alt="Fulfillment team lead" size="small" />
+</s-stack>

package/src/surfaces/admin/components/Avatar/examples/with-image-source-and-fallback.jsx

@@ -0,0 +1,6 @@
+<s-avatar
+  src="/customers/profile-123.jpg"
+  initials="MR"
+  alt="Maria Rodriguez"
+  size="base"
+ />

package/src/surfaces/admin/components/Avatar/examples/with-section-component.jsx

@@ -0,0 +1,17 @@
+<s-section>
+  <s-stack gap="base">
+    <s-stack direction="inline" gap="small">
+      <s-avatar
+        src="/merchants/premium-store.jpg"
+        initials="PS"
+        alt="Premium store"
+        size="base"
+       />
+      <s-stack gap="small-400">
+        <s-heading>Premium store</s-heading>
+        <s-text color="subdued">Shopify Plus merchant</s-text>
+      </s-stack>
+    </s-stack>
+    <s-text>Monthly revenue: $45,000</s-text>
+  </s-stack>
+</s-section>

package/src/surfaces/admin/components/Avatar.d.ts

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

package/src/surfaces/admin/components/Badge/examples/default.jsx

@@ -0,0 +1,8 @@
+<>
+  <s-badge>Fulfilled</s-badge>
+  <s-badge tone="info">Draft</s-badge>
+  <s-badge tone="success">Active</s-badge>
+  <s-badge tone="caution">Open</s-badge>
+  <s-badge tone="warning">On hold</s-badge>
+  <s-badge tone="critical">Action required</s-badge>
+</>

package/src/surfaces/admin/components/Badge/examples/different-sizes-for-emphasis.jsx

@@ -0,0 +1,4 @@
+<s-stack direction="inline" gap="base">
+  <s-badge size="base">New</s-badge>
+  <s-badge size="large">Attention needed</s-badge>
+</s-stack>

package/src/surfaces/admin/components/Badge/examples/order-status-badges.jsx

@@ -0,0 +1,6 @@
+<s-stack direction="inline" gap="base">
+  <s-badge tone="success">Fulfilled</s-badge>
+  <s-badge tone="warning">Partially fulfilled</s-badge>
+  <s-badge tone="neutral">Unfulfilled</s-badge>
+  <s-badge tone="critical">Cancelled</s-badge>
+</s-stack>

package/src/surfaces/admin/components/Badge/examples/status-indicators-with-icons.jsx

@@ -0,0 +1,21 @@
+<s-stack gap="base">
+  {/* Product status */}
+  <s-stack direction="inline" gap="base">
+    <s-badge tone="success" icon="view">
+      Active
+    </s-badge>
+    <s-badge tone="warning" icon="clock">
+      Scheduled
+    </s-badge>
+    <s-badge tone="critical">Archived</s-badge>
+  </s-stack>
+
+  {/* Inventory status */}
+  <s-stack direction="inline" gap="base">
+    <s-badge tone="success">In stock</s-badge>
+    <s-badge tone="warning" icon="alert-triangle">
+      Low stock
+    </s-badge>
+    <s-badge tone="critical">Out of stock</s-badge>
+  </s-stack>
+</s-stack>

package/src/surfaces/admin/components/Badge/examples/within-table-context.jsx

@@ -0,0 +1,18 @@
+<s-table>
+  <s-table-header-row>
+    <s-table-header>Order</s-table-header>
+    <s-table-header>Fulfillment</s-table-header>
+    <s-table-header>Payment</s-table-header>
+  </s-table-header-row>
+  <s-table-body>
+    <s-table-row>
+      <s-table-cell>#1001</s-table-cell>
+      <s-table-cell>
+        <s-badge tone="success">Fulfilled</s-badge>
+      </s-table-cell>
+      <s-table-cell>
+        <s-badge tone="success">Paid</s-badge>
+      </s-table-cell>
+    </s-table-row>
+  </s-table-body>
+</s-table>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -139,7 +139,12 @@ declare module 'preact' {
 declare const tagName = 's-badge';
 export interface BadgeJSXProps
   extends Partial<BadgeProps>,
-    Pick<BadgeProps$1, 'id'> {}
+    Pick<BadgeProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Badge.
+   */
+  children?: ComponentChildren;
+}
 
 export {Badge};
 export type {BadgeJSXProps};

package/src/surfaces/admin/components/Banner/examples/basic-information-banner.html

@@ -0,0 +1,3 @@
+<s-banner heading="Order archived">
+  This order was archived on March 7, 2017 at 3:12pm EDT.
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/basic-information-banner.jsx

@@ -0,0 +1,3 @@
+<s-banner heading="Order archived">
+  This order was archived on March 7, 2017 at 3:12pm EDT.
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/critical-banner-with-clear-next-steps.html

@@ -0,0 +1,18 @@
+<s-banner heading="Order #1024 flagged for fraud review" tone="critical">
+  This order shows multiple risk indicators and cannot be auto-fulfilled. Review
+  required within 24 hours to prevent automatic cancellation.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/orders/1024/risk"
+  >
+    Review order details
+  </s-button>
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/settings/payments/fraud"
+  >
+    Adjust fraud settings
+  </s-button>
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/critical-banner-with-clear-next-steps.jsx

@@ -0,0 +1,18 @@
+<s-banner heading="Order #1024 flagged for fraud review" tone="critical">
+  This order shows multiple risk indicators and cannot be auto-fulfilled. Review
+  required within 24 hours to prevent automatic cancellation.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/orders/1024/risk"
+  >
+    Review order details
+  </s-button>
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/settings/payments/fraud"
+  >
+    Adjust fraud settings
+  </s-button>
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/default.jsx

@@ -0,0 +1,3 @@
+<s-banner heading="Order archived" tone="info" dismissible>
+  This order was archived on March 7, 2017 at 3:12pm EDT.
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/dismissible-success-banner.html

@@ -0,0 +1,3 @@
+<s-banner heading="Products imported" tone="success" dismissible="true">
+  Successfully imported 50 products to your store.
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/dismissible-success-banner.jsx

@@ -0,0 +1,3 @@
+<s-banner heading="Products imported" tone="success" dismissible={true}>
+  Successfully imported 50 products to your store.
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/info-banner-with-clear-value-proposition.html

@@ -0,0 +1,14 @@
+<s-banner heading="Point of Sale v2.4 available" tone="info" dismissible>
+  New version includes faster checkout processing and inventory sync
+  improvements.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/apps/pos/changelog"
+  >
+    View changes
+  </s-button>
+  <s-button slot="secondary-actions" variant="secondary">
+    Install update
+  </s-button>
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/info-banner-with-clear-value-proposition.jsx

@@ -0,0 +1,14 @@
+<s-banner heading="Point of Sale v2.4 available" tone="info" dismissible>
+  New version includes faster checkout processing and inventory sync
+  improvements.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/apps/pos/changelog"
+  >
+    View changes
+  </s-button>
+  <s-button slot="secondary-actions" variant="secondary">
+    Install update
+  </s-button>
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/warning-banner-with-specific-actions.html

@@ -0,0 +1,18 @@
+<s-banner heading="127 products missing shipping weights" tone="warning">
+  Products without weights may show inaccurate shipping rates, leading to
+  checkout abandonment.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/products?filter=missing-weights"
+  >
+    Review products
+  </s-button>
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="javascript:void(0)"
+  >
+    Setup guide
+  </s-button>
+</s-banner>

package/src/surfaces/admin/components/Banner/examples/warning-banner-with-specific-actions.jsx

@@ -0,0 +1,18 @@
+<s-banner heading="127 products missing shipping weights" tone="warning">
+  Products without weights may show inaccurate shipping rates, leading to
+  checkout abandonment.
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="/admin/products?filter=missing-weights"
+  >
+    Review products
+  </s-button>
+  <s-button
+    slot="secondary-actions"
+    variant="secondary"
+    href="javascript:void(0)"
+  >
+    Setup guide
+  </s-button>
+</s-banner>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -129,7 +129,11 @@ declare module 'preact' {
 declare const tagName = 's-banner';
 export interface BannerJSXProps
   extends Partial<BannerProps>,
-    Pick<BannerProps$1, 'id'> {
+    Pick<BannerProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Banner.
+   */
+  children?: ComponentChildren;
   /**
    * The secondary actions to display at the bottom of the Banner.
    *

package/src/surfaces/admin/components/Box/examples/accessible-status-messages.html

@@ -0,0 +1,14 @@
+<s-stack gap="base">
+  <s-box
+    accessibilityRole="status"
+    padding="base"
+    background="strong"
+    borderRadius="base"
+  >
+    <s-paragraph>Payment failed</s-paragraph>
+  </s-box>
+
+  <s-box accessibilityVisibility="exclusive">
+    <s-paragraph>Price includes tax and shipping</s-paragraph>
+  </s-box>
+</s-stack>

package/src/surfaces/admin/components/Box/examples/accessible-status-messages.jsx

@@ -0,0 +1,14 @@
+<s-stack gap="base">
+  <s-box
+    accessibilityRole="status"
+    padding="base"
+    background="strong"
+    borderRadius="base"
+  >
+    <s-paragraph>Payment failed</s-paragraph>
+  </s-box>
+
+  <s-box accessibilityVisibility="exclusive">
+    <s-paragraph>Price includes tax and shipping</s-paragraph>
+  </s-box>
+</s-stack>

package/src/surfaces/admin/components/Box/examples/basic-container.html

@@ -0,0 +1,9 @@
+<s-box
+  padding="base"
+  background="base"
+  borderWidth="base"
+  borderColor="base"
+  borderRadius="base"
+>
+  <s-paragraph>Product information</s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Box/examples/basic-container.jsx

@@ -0,0 +1,9 @@
+<s-box
+  padding="base"
+  background="base"
+  borderWidth="base"
+  borderColor="base"
+  borderRadius="base"
+>
+  <s-paragraph>Product information</s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Box/examples/complex-merchant-dashboard-layout.html

@@ -0,0 +1,34 @@
+<s-stack gap="base">
+  <!-- Inventory status section -->
+  <s-box
+    padding="base"
+    background="base"
+    borderRadius="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-stack gap="base">
+      <s-box padding="small-100" background="subdued" borderRadius="small">
+        <s-paragraph>In stock: 45 units</s-paragraph>
+      </s-box>
+      <s-box padding="small-100" background="subdued" borderRadius="small">
+        <s-paragraph>Low stock alert: 5 units</s-paragraph>
+      </s-box>
+    </s-stack>
+  </s-box>
+
+  <!-- Product information section -->
+  <s-box
+    padding="base"
+    background="base"
+    borderRadius="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-stack gap="base">
+      <s-heading>Product sales</s-heading>
+      <s-paragraph color="subdued">No recent sales of this product</s-paragraph>
+      <s-link>View details</s-link>
+    </s-stack>
+  </s-box>
+</s-stack>

package/src/surfaces/admin/components/Box/examples/complex-merchant-dashboard-layout.jsx

@@ -0,0 +1,34 @@
+<s-stack gap="base">
+  {/* Inventory status section */}
+  <s-box
+    padding="base"
+    background="base"
+    borderRadius="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-stack gap="base">
+      <s-box padding="small-100" background="subdued" borderRadius="small">
+        <s-paragraph>In stock: 45 units</s-paragraph>
+      </s-box>
+      <s-box padding="small-100" background="subdued" borderRadius="small">
+        <s-paragraph>Low stock alert: 5 units</s-paragraph>
+      </s-box>
+    </s-stack>
+  </s-box>
+
+  {/* Product information section */}
+  <s-box
+    padding="base"
+    background="base"
+    borderRadius="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-stack gap="base">
+      <s-heading>Product sales</s-heading>
+      <s-paragraph color="subdued">No recent sales of this product</s-paragraph>
+      <s-link>View details</s-link>
+    </s-stack>
+  </s-box>
+</s-stack>

package/src/surfaces/admin/components/Box/examples/default.jsx

@@ -1,7 +1,7 @@
-<Fragment>
+<>
   <s-box padding="base">Available for iPad, iPhone, and Android.</s-box>
 
   <s-box padding="base" background="subdued" border="base" borderRadius="base">
     Available for iPad, iPhone, and Android.
   </s-box>
-</Fragment>
+</>

package/src/surfaces/admin/components/Box/examples/responsive-shipping-notice.html

@@ -0,0 +1,10 @@
+<s-query-container>
+  <s-box
+    padding="@container (inline-size > 400px) base, large-200"
+    background="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-paragraph>Your order will be processed within 2-3 business days</s-paragraph>
+  </s-box>
+</s-query-container>

package/src/surfaces/admin/components/Box/examples/responsive-shipping-notice.jsx

@@ -0,0 +1,10 @@
+<s-query-container>
+  <s-box
+    padding="@container (inline-size > 400px) base, large-200"
+    background="base"
+    borderWidth="base"
+    borderColor="base"
+  >
+    <s-text>Your order will be processed within 2-3 business days</s-text>
+  </s-box>
+</s-query-container>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -382,7 +382,12 @@ declare module 'preact' {
 declare const tagName = 's-box';
 export interface BoxJSXProps
   extends Partial<BoxProps>,
-    Pick<BoxProps$1, 'id'> {}
+    Pick<BoxProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Box.
+   */
+  children?: ComponentChildren;
+}
 
 export {Box};
 export type {BoxJSXProps};

package/src/surfaces/admin/components/Button/examples/basic-usage.html

@@ -0,0 +1 @@
+<s-button>Save</s-button>

package/src/surfaces/admin/components/Button/examples/basic-usage.jsx

@@ -0,0 +1 @@
+<s-button>Save</s-button>

package/src/surfaces/admin/components/Button/examples/bulk-actions.html

@@ -0,0 +1,4 @@
+<s-stack direction="inline" gap="base">
+  <s-button variant="secondary">Export selected</s-button>
+  <s-button variant="primary" tone="critical">Delete selected</s-button>
+</s-stack>

package/src/surfaces/admin/components/Button/examples/bulk-actions.jsx

@@ -0,0 +1,6 @@
+<s-stack direction="inline" gap="base">
+  <s-button variant="secondary">Export selected</s-button>
+  <s-button variant="primary" tone="critical">
+    Delete selected
+  </s-button>
+</s-stack>