@shopify/ui-extensions 2025.10.1 → 2025.10.3

package/src/surfaces/admin/components/OrderedList/examples/product-setup-instructions.html

@@ -0,0 +1,13 @@
+<s-ordered-list>
+  <s-list-item>
+    Create product listing with title and description
+    <s-ordered-list>
+      <s-list-item>Add high-quality product images</s-list-item>
+      <s-list-item>Set SEO title and meta description</s-list-item>
+    </s-ordered-list>
+  </s-list-item>
+  <s-list-item>Configure pricing and inventory tracking</s-list-item>
+  <s-list-item>Set up product variants (size, color, material)</s-list-item>
+  <s-list-item>Enable inventory tracking and set stock levels</s-list-item>
+  <s-list-item>Review and publish product to storefront</s-list-item>
+</s-ordered-list>

package/src/surfaces/admin/components/OrderedList/examples/product-setup-instructions.jsx

@@ -0,0 +1,13 @@
+<s-ordered-list>
+  <s-list-item>
+    Create product listing with title and description
+    <s-ordered-list>
+      <s-list-item>Add high-quality product images</s-list-item>
+      <s-list-item>Set SEO title and meta description</s-list-item>
+    </s-ordered-list>
+  </s-list-item>
+  <s-list-item>Configure pricing and inventory tracking</s-list-item>
+  <s-list-item>Set up product variants (size, color, material)</s-list-item>
+  <s-list-item>Enable inventory tracking and set stock levels</s-list-item>
+  <s-list-item>Review and publish product to storefront</s-list-item>
+</s-ordered-list>

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

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

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

@@ -0,0 +1,5 @@
+<s-page heading="Products">
+  <s-section>
+    <s-text>Hello World</s-text>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.html

@@ -0,0 +1,33 @@
+<s-page heading="Store analytics" inline-size="large">
+  <s-section>
+    <s-stack gap="base">
+      <s-text>Monitor your store performance across all channels.</s-text>
+      <s-grid>
+        <s-grid-item>
+          <s-box
+            padding="base"
+            background="base"
+            borderWidth="base"
+            borderColor="base"
+            borderRadius="base"
+          >
+            <s-heading>Sales</s-heading>
+            <s-text type="strong">$12,456</s-text>
+          </s-box>
+        </s-grid-item>
+        <s-grid-item>
+          <s-box
+            padding="base"
+            background="base"
+            borderWidth="base"
+            borderColor="base"
+            borderRadius="base"
+          >
+            <s-heading>Orders</s-heading>
+            <s-text type="strong">145</s-text>
+          </s-box>
+        </s-grid-item>
+      </s-grid>
+    </s-stack>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/large-inline-size-for-wide-content.jsx

@@ -0,0 +1,33 @@
+<s-page heading="Store analytics" inline-size="large">
+  <s-section>
+    <s-stack gap="base">
+      <s-text>Monitor your store performance across all channels.</s-text>
+      <s-grid>
+        <s-grid-item>
+          <s-box
+            padding="base"
+            background="base"
+            borderWidth="base"
+            borderColor="base"
+            borderRadius="base"
+          >
+            <s-heading>Sales</s-heading>
+            <s-text type="strong">$12,456</s-text>
+          </s-box>
+        </s-grid-item>
+        <s-grid-item>
+          <s-box
+            padding="base"
+            background="base"
+            borderWidth="base"
+            borderColor="base"
+            borderRadius="base"
+          >
+            <s-heading>Orders</s-heading>
+            <s-text type="strong">145</s-text>
+          </s-box>
+        </s-grid-item>
+      </s-grid>
+    </s-stack>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/page-with-heading.html

@@ -0,0 +1,5 @@
+<s-page heading="Product catalog" inline-size="base">
+  <s-section>
+    <s-text>Manage your product catalog and inventory.</s-text>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/page-with-heading.jsx

@@ -0,0 +1,5 @@
+<s-page heading="Product catalog" inline-size="base">
+  <s-section>
+    <s-text>Manage your product catalog and inventory.</s-text>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.html

@@ -0,0 +1,9 @@
+<s-page heading="Store settings" inline-size="small">
+  <s-section>
+    <s-stack gap="base">
+      <s-text>Configure your basic store preferences.</s-text>
+      <s-text-field label="Store name"></s-text-field>
+      <s-button variant="primary">Save</s-button>
+    </s-stack>
+  </s-section>
+</s-page>

package/src/surfaces/admin/components/Page/examples/small-inline-size-for-focused-content.jsx

@@ -0,0 +1,9 @@
+<s-page heading="Store settings" inline-size="small">
+  <s-section>
+    <s-stack gap="base">
+      <s-text>Configure your basic store preferences.</s-text>
+      <s-text-field label="Store name" />
+      <s-button variant="primary">Save</s-button>
+    </s-stack>
+  </s-section>
+</s-page>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -92,7 +92,9 @@ declare class Page extends PreactCustomElement implements PageProps {
   accessor inlineSize: PageProps['inlineSize'];
   accessor heading: PageProps['heading'];
   constructor();
+  /** @private */
   connectedCallback(): void;
+  /** @private */
   disconnectedCallback(): void;
 }
 declare global {

package/src/surfaces/admin/components/Paragraph/examples/admin-ui-patterns.html

@@ -0,0 +1,21 @@
+<s-section>
+  <s-paragraph tone="success" color="base">
+    Payment successfully processed and order confirmed.
+  </s-paragraph>
+
+  <s-paragraph tone="warning" color="base">
+    Inventory levels are running low for this product.
+  </s-paragraph>
+
+  <s-paragraph tone="critical" color="base">
+    This order requires immediate attention due to shipping delays.
+  </s-paragraph>
+
+  <s-paragraph tone="info" color="base">
+    Customer requested gift wrapping for this order.
+  </s-paragraph>
+
+  <s-paragraph tone="caution" color="base">
+    Review shipping address before processing.
+  </s-paragraph>
+</s-section>

package/src/surfaces/admin/components/Paragraph/examples/admin-ui-patterns.jsx

@@ -0,0 +1,21 @@
+<s-section>
+  <s-paragraph tone="success" color="base">
+    Payment successfully processed and order confirmed.
+  </s-paragraph>
+
+  <s-paragraph tone="warning" color="base">
+    Inventory levels are running low for this product.
+  </s-paragraph>
+
+  <s-paragraph tone="critical" color="base">
+    This order requires immediate attention due to shipping delays.
+  </s-paragraph>
+
+  <s-paragraph tone="info" color="base">
+    Customer requested gift wrapping for this order.
+  </s-paragraph>
+
+  <s-paragraph tone="caution" color="base">
+    Review shipping address before processing.
+  </s-paragraph>
+</s-section>

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

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Track inventory across all your retail locations in real-time.
+</s-paragraph>

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

@@ -0,0 +1,3 @@
+<s-paragraph>
+  Track inventory across all your retail locations in real-time.
+</s-paragraph>

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

@@ -0,0 +1,4 @@
+<s-paragraph>
+  Shopify POS is the easiest way to sell your products in person. Available for
+  iPad, iPhone, and Android.
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/line-clamping.html

@@ -0,0 +1,8 @@
+<s-box inlineSize="300px">
+  <s-paragraph lineClamp="1">
+    Premium organic cotton t-shirt featuring sustainable manufacturing
+    processes, ethically sourced materials, and carbon-neutral shipping.
+    Available in multiple colors and sizes with customization options for your
+    brand.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Paragraph/examples/line-clamping.jsx

@@ -0,0 +1,8 @@
+<s-box inlineSize="300px">
+  <s-paragraph lineClamp={1}>
+    Premium organic cotton t-shirt featuring sustainable manufacturing
+    processes, ethically sourced materials, and carbon-neutral shipping.
+    Available in multiple colors and sizes with customization options for your
+    brand.
+  </s-paragraph>
+</s-box>

package/src/surfaces/admin/components/Paragraph/examples/rtl-support.html

@@ -0,0 +1,3 @@
+<s-paragraph dir="rtl">
+  محتوى النص باللغة العربية
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/rtl-support.jsx

@@ -0,0 +1,3 @@
+<s-paragraph dir="rtl">
+  محتوى النص باللغة العربية
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/screen-reader-text.html

@@ -0,0 +1,3 @@
+<s-paragraph accessibilityVisibility="exclusive">
+  Table sorted by date, newest first.
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/screen-reader-text.jsx

@@ -0,0 +1,3 @@
+<s-paragraph accessibilityVisibility="exclusive">
+  Table sorted by date, newest first.
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/tabular-numbers.html

@@ -0,0 +1,3 @@
+<s-paragraph fontVariantNumeric="tabular-nums">
+  Orders: 1,234 Revenue: $45,678.90 Customers: 890
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/tabular-numbers.jsx

@@ -0,0 +1,3 @@
+<s-paragraph fontVariantNumeric="tabular-nums">
+  Orders: 1,234 Revenue: $45,678.90 Customers: 890
+</s-paragraph>

package/src/surfaces/admin/components/Paragraph/examples/with-tone-and-color.html

@@ -0,0 +1,9 @@
+<s-section>
+  <s-paragraph tone="info" color="base">
+    Your order will be processed within 2-3 business days.
+  </s-paragraph>
+
+  <s-paragraph tone="success" color="subdued">
+    Payment successfully processed.
+  </s-paragraph>
+</s-section>

package/src/surfaces/admin/components/Paragraph/examples/with-tone-and-color.jsx

@@ -0,0 +1,9 @@
+<s-section>
+  <s-paragraph tone="info" color="base">
+    Your order will be processed within 2-3 business days.
+  </s-paragraph>
+
+  <s-paragraph tone="success" color="subdued">
+    Payment successfully processed.
+  </s-paragraph>
+</s-section>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.22.1 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -21,7 +21,6 @@ export interface ParagraphProps
     >
   > {
   color: Extract<ParagraphProps$1['color'], 'base' | 'subdued'>;
-  lineClamp: Extract<ParagraphProps$1['lineClamp'], number>;
 }
 
 export type Styles = string;

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

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Password"
+  name="password"
+  required
+  minLength="8"
+  autocomplete="new-password"
+></s-password-field>

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

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Password"
+  name="password"
+  required
+  minLength={8}
+  autocomplete="new-password"
+/>

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

@@ -0,0 +1,6 @@
+<s-password-field
+  label="Password"
+  placeholder="Enter your password"
+  details="Must be at least 8 characters long"
+  minLength={8}
+ />

package/src/surfaces/admin/components/PasswordField/examples/in-form-layout.html

@@ -0,0 +1,15 @@
+<s-stack gap="base">
+  <s-text-field
+    label="Email"
+    name="email"
+    type="email"
+    autocomplete="username"
+    required
+  ></s-text-field>
+  <s-password-field
+    label="Password"
+    name="password"
+    autocomplete="current-password"
+    required
+  ></s-password-field>
+</s-stack>

package/src/surfaces/admin/components/PasswordField/examples/in-form-layout.jsx

@@ -0,0 +1,15 @@
+<s-stack gap="base">
+  <s-text-field
+    label="Email"
+    name="email"
+    type="email"
+    autocomplete="username"
+    required
+   />
+  <s-password-field
+    label="Password"
+    name="password"
+    autocomplete="current-password"
+    required
+   />
+</s-stack>

package/src/surfaces/admin/components/PasswordField/examples/with-error-state.html

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Password"
+  name="password"
+  error="Password must be at least 8 characters"
+  minLength="8"
+  autocomplete="new-password"
+></s-password-field>

package/src/surfaces/admin/components/PasswordField/examples/with-error-state.jsx

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Password"
+  name="password"
+  error="Password must be at least 8 characters"
+  minLength={8}
+  autocomplete="new-password"
+ />

package/src/surfaces/admin/components/PasswordField/examples/with-helper-text.html

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Create password"
+  name="new-password"
+  details="Password must be at least 8 characters and include uppercase, lowercase, and numbers"
+  minLength="8"
+  autocomplete="new-password"
+></s-password-field>

package/src/surfaces/admin/components/PasswordField/examples/with-helper-text.jsx

@@ -0,0 +1,7 @@
+<s-password-field
+  label="Create password"
+  name="new-password"
+  details="Password must be at least 8 characters and include uppercase, lowercase, and numbers"
+  minLength={8}
+  autocomplete="new-password"
+ />

package/src/surfaces/admin/components/PasswordField/examples/with-password-strength-requirements.html

@@ -0,0 +1,15 @@
+<s-stack gap="large-100">
+  <s-password-field
+    label="Create password"
+    name="password"
+    value="example-password"
+    autocomplete="new-password"
+    required
+  ></s-password-field>
+  <s-stack gap="small-200">
+    <s-text tone="success">✓ At least 8 characters</s-text>
+    <s-text color="subdued">○ Contains uppercase letter</s-text>
+    <s-text color="subdued">○ Contains lowercase letter</s-text>
+    <s-text color="subdued">○ Contains number</s-text>
+  </s-stack>
+</s-stack>

package/src/surfaces/admin/components/PasswordField/examples/with-password-strength-requirements.jsx

@@ -0,0 +1,15 @@
+<s-stack gap="large-100">
+  <s-password-field
+    label="Create password"
+    name="password"
+    value="example-password"
+    autocomplete="new-password"
+    required
+   />
+  <s-stack gap="small-200">
+    <s-text tone="success">✓ At least 8 characters</s-text>
+    <s-text color="subdued">○ Contains uppercase letter</s-text>
+    <s-text color="subdued">○ Contains lowercase letter</s-text>
+    <s-text color="subdued">○ Contains number</s-text>
+  </s-stack>
+</s-stack>

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

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

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

@@ -0,0 +1,10 @@
+<>
+  <s-button commandFor="product-options-popover">Product options</s-button>
+
+  <s-popover id="product-options-popover">
+    <s-stack direction="block">
+      <s-button variant="tertiary">Import</s-button>
+      <s-button variant="tertiary">Export</s-button>
+    </s-stack>
+  </s-popover>
+</>

package/src/surfaces/admin/components/Popover/examples/inventory-stock-details.html

@@ -0,0 +1,35 @@
+<s-button commandFor="stock-popover" icon="info">
+  Stock details
+</s-button>
+
+<s-popover id="stock-popover">
+  <s-box padding="base">
+    <s-stack gap="small">
+      <s-stack gap="small-200">
+        <s-stack direction="inline" justifyContent="space-between">
+          <s-text color="subdued">Available</s-text>
+          <s-text>127 units</s-text>
+        </s-stack>
+
+        <s-stack direction="inline" justifyContent="space-between">
+          <s-text color="subdued">Reserved</s-text>
+          <s-text>15 units</s-text>
+        </s-stack>
+
+        <s-stack direction="inline" justifyContent="space-between">
+          <s-text color="subdued">In transit</s-text>
+          <s-text>50 units</s-text>
+        </s-stack>
+      </s-stack>
+
+      <s-divider />
+
+      <s-stack direction="inline" justifyContent="space-between">
+        <s-text>Total stock</s-text>
+        <s-text>192 units</s-text>
+      </s-stack>
+
+      <s-button variant="secondary">View full inventory report</s-button>
+    </s-stack>
+  </s-box>
+</s-popover>

package/src/surfaces/admin/components/Popover/examples/inventory-stock-details.jsx

@@ -0,0 +1,37 @@
+<>
+  <s-button commandFor="stock-popover" icon="info">
+    Stock details
+  </s-button>
+
+  <s-popover id="stock-popover">
+    <s-box padding="base">
+      <s-stack gap="small">
+        <s-stack gap="small-200">
+          <s-stack direction="inline" justifyContent="space-between">
+            <s-text color="subdued">Available</s-text>
+            <s-text>127 units</s-text>
+          </s-stack>
+
+          <s-stack direction="inline" justifyContent="space-between">
+            <s-text color="subdued">Reserved</s-text>
+            <s-text>15 units</s-text>
+          </s-stack>
+
+          <s-stack direction="inline" justifyContent="space-between">
+            <s-text color="subdued">In transit</s-text>
+            <s-text>50 units</s-text>
+          </s-stack>
+        </s-stack>
+
+        <s-divider />
+
+        <s-stack direction="inline" justifyContent="space-between">
+          <s-text>Total stock</s-text>
+          <s-text>192 units</s-text>
+        </s-stack>
+
+        <s-button variant="secondary">View full inventory report</s-button>
+      </s-stack>
+    </s-box>
+  </s-popover>
+</>

package/src/surfaces/admin/components/Popover/examples/notifications.html

@@ -0,0 +1,34 @@
+<s-button commandFor="notifications-popover" icon="notification">
+  Notifications
+</s-button>
+
+<s-popover id="notifications-popover">
+  <s-box padding="base">
+    <s-stack gap="small-200">
+      <s-stack gap="small-800">
+        <s-heading>New order received</s-heading>
+        <s-paragraph color="subdued">
+          Order #1234 was placed 5 minutes ago
+        </s-paragraph>
+      </s-stack>
+
+      <s-divider />
+
+      <s-stack gap="small-800">
+        <s-heading>Low inventory alert</s-heading>
+        <s-paragraph color="subdued">
+          3 products are running low on stock
+        </s-paragraph>
+      </s-stack>
+
+      <s-divider />
+
+      <s-stack gap="small-800">
+        <s-heading>Payment processed</s-heading>
+        <s-paragraph color="subdued">
+          $250.00 payment confirmed for order #1230
+        </s-paragraph>
+      </s-stack>
+    </s-stack>
+  </s-box>
+</s-popover>

package/src/surfaces/admin/components/Popover/examples/notifications.jsx

@@ -0,0 +1,30 @@
+<>
+  <s-button commandFor="notifications-popover" icon="notification">
+    Notifications
+  </s-button>
+
+  <s-popover id="notifications-popover">
+    <s-box padding="base">
+      <s-stack gap="small-200">
+        <s-stack gap="small-800">
+          <s-heading>New order received</s-heading>
+          <s-paragraph color="subdued">Order #1234 was placed 5 minutes ago</s-paragraph>
+        </s-stack>
+
+        <s-divider />
+
+        <s-stack gap="small-800">
+          <s-heading>Low inventory alert</s-heading>
+          <s-paragraph color="subdued">3 products are running low on stock</s-paragraph>
+        </s-stack>
+
+        <s-divider />
+
+        <s-stack gap="small-800">
+          <s-heading>Payment processed</s-heading>
+          <s-paragraph color="subdued">$250.00 payment confirmed for order #1230</s-paragraph>
+        </s-stack>
+      </s-stack>
+    </s-box>
+  </s-popover>
+</>

package/src/surfaces/admin/components/Popover/examples/table-display-options.html

@@ -0,0 +1,21 @@
+<s-button commandFor="table-settings-popover" disclosure="true" icon="settings">
+  Columns
+</s-button>
+
+<s-popover id="table-settings-popover">
+  <s-box padding="base">
+    <s-stack gap="small-200">
+      <s-stack gap="small-800">
+        <s-heading>Choose columns to display</s-heading>
+        <s-choice-list>
+          <s-choice value="sku" selected>Sku</s-choice>
+          <s-choice value="inventory" selected>Inventory</s-choice>
+          <s-choice value="price" selected>Price</s-choice>
+          <s-choice value="vendor">Vendor</s-choice>
+          <s-choice value="type">Product type</s-choice>
+        </s-choice-list>
+      </s-stack>
+      <s-button variant="primary">Apply changes</s-button>
+    </s-stack>
+  </s-box>
+</s-popover>