@shopify/ui-extensions 2025.10.3 → 2025.10.5

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -104,7 +104,12 @@ declare module 'preact' {
 declare const tagName = 's-table-body';
 export interface TableBodyJSXProps
   extends Partial<TableBodyProps>,
-    Pick<TableBodyProps$1, 'id'> {}
+    Pick<TableBodyProps$1, 'id' | 'children'> {
+  /**
+   * The body of the table. May not have any semantic meaning in the Table's `list` variant.
+   */
+  children?: ComponentChildren;
+}
 
 export {TableBody};
 export type {TableBodyJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -119,7 +119,12 @@ declare module 'preact' {
 declare const tagName = 's-table-cell';
 export interface TableCellJSXProps
   extends Partial<TableCellProps>,
-    Pick<TableCellProps$1, 'id'> {}
+    Pick<TableCellProps$1, 'id' | 'children'> {
+  /**
+   * The content of the table cell.
+   */
+  children?: ComponentChildren;
+}
 
 export {TableCell};
 export type {TableCellJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -121,7 +121,12 @@ declare module 'preact' {
 declare const tagName = 's-table-header';
 export interface TableHeaderJSXProps
   extends Partial<TableHeaderProps>,
-    Pick<TableHeaderProps$1, 'id'> {}
+    Pick<TableHeaderProps$1, 'id' | 'children'> {
+  /**
+   * The heading of the column in the `table` variant, and the label of its data in `list` variant.
+   */
+  children?: ComponentChildren;
+}
 
 export {TableHeader};
 export type {TableHeaderJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -111,7 +111,12 @@ declare module 'preact' {
 declare const tagName = 's-table-header-row';
 export interface TableHeaderRowJSXProps
   extends Partial<TableHeaderRowProps>,
-    Pick<TableHeaderRowProps$1, 'id'> {}
+    Pick<TableHeaderRowProps$1, 'id' | 'children'> {
+  /**
+   * Contents of the table heading row; children should be `TableHeading` components.
+   */
+  children?: ComponentChildren;
+}
 
 export {TableHeaderRow};
 export type {TableHeaderRowJSXProps};

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -106,7 +106,12 @@ declare module 'preact' {
 declare const tagName = 's-table-row';
 export interface TableRowJSXProps
   extends Partial<TableRowProps>,
-    Pick<TableRowProps$1, 'id'> {}
+    Pick<TableRowProps$1, 'id' | 'children'> {
+  /**
+   * The content of a TableRow, which should be `TableCell` components.
+   */
+  children?: ComponentChildren;
+}
 
 export {TableRow};
 export type {TableRowJSXProps};

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

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

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

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

package/src/surfaces/admin/components/TextField/examples/with-accessory.html

@@ -1,6 +1,4 @@
+<s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
 <s-text-field label="Discount code">
-  <div slot="accessory">
-    <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
-    <s-icon interestFor="info-tooltip" type="info"></s-icon>
-  </div>
+  <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
 </s-text-field>

package/src/surfaces/admin/components/TextField/examples/with-accessory.jsx

@@ -1,6 +1,6 @@
-<s-text-field label="Discount code">
-  <div slot="accessory">
-    <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
-    <s-icon interestFor="info-tooltip" type="info" />
-  </div>
-</s-text-field>
+<>
+  <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
+  <s-text-field label="Discount code">
+    <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
+  </s-text-field>
+</>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -31,6 +31,11 @@ export interface PreactBaseElementProps<TClass extends HTMLElement> {
   /** Assigns this element to a parent's slot. */
   slot?: Lowercase<string>;
 }
+/** Used when an element has children. */
+export interface PreactBaseElementPropsWithChildren<TClass extends HTMLElement>
+  extends PreactBaseElementProps<TClass> {
+  children?: preact.ComponentChildren;
+}
 
 export type Styles = string;
 export type RenderImpl = Omit<ShadowRootInit, 'mode'> & {
@@ -223,7 +228,7 @@ declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
       [tagName]: Omit<TextFieldJSXProps, 'accessory'> &
-        PreactBaseElementProps<TextField>;
+        PreactBaseElementPropsWithChildren<TextField>;
     }
   }
 }

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -176,7 +176,14 @@ declare module 'preact' {
 declare const tagName = 's-tooltip';
 export interface TooltipJSXProps
   extends Partial<TooltipProps>,
-    Pick<TooltipProps$1, 'id'> {}
+    Pick<TooltipProps$1, 'id' | 'children'> {
+  /**
+   * The content of the Tooltip.
+   *
+   * Only accepts `Text`, `Paragraph` components, and raw `textContent`.
+   */
+  children?: ComponentChildren;
+}
 
 export {Tooltip};
 export type {TooltipJSXProps};

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -107,7 +107,14 @@ declare module 'preact' {
 declare const tagName = 's-unordered-list';
 export interface UnorderedListJSXProps
   extends Partial<UnorderedListProps>,
-    Pick<UnorderedListProps$1, 'id'> {}
+    Pick<UnorderedListProps$1, 'id'> {
+  /**
+   * The items of the UnorderedList.
+   *
+   * Only ListItems are accepted.
+   */
+  children?: ComponentChildren;
+}
 
 export {UnorderedList};
 export type {UnorderedListJSXProps};

package/src/surfaces/admin/components/patterns/examples/appCard.html

@@ -4,7 +4,6 @@
   borderRadius="base"
   padding="base"
   inlineSize="100%"
-  accessibilityLabel="Download Shopify Planet"
 >
   <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
       <s-thumbnail

package/src/surfaces/admin/components/patterns/examples/appCard.jsx

@@ -4,7 +4,6 @@
   borderRadius="base"
   padding="base"
   inlineSize="100%"
-  accessibilityLabel="Download Shopify Planet"
 >
   <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
     <s-thumbnail

package/src/surfaces/admin/components/patterns/examples/details.jsx

@@ -1,25 +1,19 @@
-// ===
-// Details page pattern
-// ===
-
-export default function DetailsPage() {
-  const handleFormReset = (event) => {
-    console.log("Handle discarded changes if necessary");
-  };
-
-  const handleFormSubmit = (event) => {
+<form
+  data-save-bar
+  onSubmit={(event) => {
     event.preventDefault();
     const formData = new FormData(event.target);
     const formEntries = Object.fromEntries(formData);
     console.log("Form data", formEntries);
-  };
-
-  return (
-    <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page heading="Mountain view">
-        <s-link slot="breadcrumb-actions" href="/app/puzzles">
-          Puzzles
-        </s-link>
+  }}
+  onReset={(event) => {
+    console.log("Handle discarded changes if necessary");
+  }}
+>
+  <s-page heading="Mountain view">
+    <s-link slot="breadcrumb-actions" href="/app/puzzles">
+      Puzzles
+    </s-link>
         <s-button slot="secondary-actions">Duplicate</s-button>
         <s-button slot="secondary-actions">Delete</s-button>
         {/* === */}
@@ -89,7 +83,7 @@ export default function DetailsPage() {
               borderStyle="solid"
               overflow="hidden"
             >
-              <s-table border="base" borderRadius="base" borderStyle="solid">
+              <s-table>
                 <s-table-header-row>
                   <s-table-header listSlot="primary">Template</s-table-header>
                   <s-table-header>
@@ -101,7 +95,7 @@ export default function DetailsPage() {
                 </s-table-header-row>
                 <s-table-body>
                   <s-table-row>
-                    <s-table-cell listSlot="primary">
+                    <s-table-cell>
                       <s-stack
                         direction="inline"
                         gap="base"
@@ -139,7 +133,7 @@ export default function DetailsPage() {
                     </s-table-cell>
                   </s-table-row>
                   <s-table-row>
-                    <s-table-cell listSlot="primary">
+                    <s-table-cell>
                       <s-stack
                         direction="inline"
                         gap="base"
@@ -169,7 +163,7 @@ export default function DetailsPage() {
                         <s-link>Preview</s-link>
                       </s-stack>
                     </s-table-cell>
-                    <s-table-cell listSlot="secondary">
+                    <s-table-cell>
                       <s-stack alignItems="end">
                         <s-button
                           icon="x"
@@ -220,7 +214,7 @@ export default function DetailsPage() {
               name="quantity-in-stock"
               labelAccessibilityVisibility="visible"
               value="50"
-              min="0"
+              min={0}
               placeholder="0"
               details="Current inventory quantity"
              />
@@ -252,8 +246,6 @@ export default function DetailsPage() {
               </s-list-item>
             </s-unordered-list>
           </s-section>
-        </s-box>
-      </s-page>
-    </form>
-  );
-}
+    </s-box>
+  </s-page>
+</form>

package/src/surfaces/admin/components/patterns/examples/emptyState.html

@@ -1,6 +1,7 @@
 <s-section accessibilityLabel="Empty state section">
   <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
     <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <!-- aspectRatio should match the actual image dimensions (width/height) -->
       <s-image
         aspectRatio="1/0.5"
         src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

package/src/surfaces/admin/components/patterns/examples/emptyState.jsx

@@ -1,6 +1,7 @@
 <s-section accessibilityLabel="Empty state section">
   <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
     <s-box maxInlineSize="200px" maxBlockSize="200px">
+      {/* aspectRatio should match the actual image dimensions (width/height) */}
       <s-image
         aspectRatio="1/0.5"
         src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

package/src/surfaces/admin/components/patterns/examples/footerHelp.html

@@ -0,0 +1,3 @@
+<s-stack alignItems="center">
+  <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>
+</s-stack>

package/src/surfaces/admin/components/patterns/examples/footerHelp.jsx

@@ -0,0 +1,3 @@
+<s-stack alignItems="center">
+  <s-text>Learn more about <s-link href="">creating puzzles</s-link>.</s-text>
+</s-stack>

package/src/surfaces/admin/components/patterns/examples/homepage.jsx

@@ -1,25 +1,19 @@
-// ===
-// Home page pattern
-// ===
+const [visible, setVisible] = useState({
+  banner: true,
+  setupGuide: true,
+  calloutCard: true,
+  featuredApps: true,
+});
+const [expanded, setExpanded] = useState({
+  setupGuide: true,
+  step1: false,
+  step2: false,
+  step3: false,
+});
+const [progress, setProgress] = useState(0);
 
-import React, { useState } from "react";
-
-export default function HomePage() {
-  const [visible, setVisible] = useState({
-    banner: true,
-    setupGuide: true,
-    calloutCard: true,
-    featuredApps: true,
-  });
-  const [expanded, setExpanded] = useState({
-    setupGuide: true,
-    step1: false,
-    step2: false,
-    step3: false,
-  });
-  const [progress, setProgress] = useState(0);
-  return (
-    <s-page>
+return (
+  <s-page>
       <s-button slot="primary-action">Create puzzle</s-button>
       <s-button slot="secondary-actions">Browse templates</s-button>
       <s-button slot="secondary-actions">Import image</s-button>
@@ -47,7 +41,7 @@ export default function HomePage() {
       {/* === */}
       {visible.setupGuide && (
         <s-section>
-          <s-grid gap="base">
+          <s-grid gap="small">
             {/* Header */}
             <s-grid gap="small-200">
               <s-grid
@@ -100,9 +94,7 @@ export default function HomePage() {
                   <s-checkbox
                     label="Upload an image for your puzzle"
                     onInput={(e) =>
-                      setProgress((prev) =>
-                        e.currentTarget.checked ? prev + 1 : prev - 1
-                      )
+                      setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)
                     }
                   ></s-checkbox>
                   <s-button
@@ -163,9 +155,7 @@ export default function HomePage() {
                   <s-checkbox
                     label="Choose a puzzle template"
                     onInput={(e) =>
-                      setProgress((prev) =>
-                        e.currentTarget.checked ? prev + 1 : prev - 1
-                      )
+                      setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)
                     }
                   ></s-checkbox>
                   <s-button
@@ -226,9 +216,7 @@ export default function HomePage() {
                   <s-checkbox
                     label="Customize puzzle piece shapes"
                     onInput={(e) =>
-                      setProgress((prev) =>
-                        e.currentTarget.checked ? prev + 1 : prev - 1
-                      )
+                      setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)
                     }
                   ></s-checkbox>
                   <s-button
@@ -290,7 +278,7 @@ export default function HomePage() {
       {/* Metrics cards */}
       {/* Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. */}
       {/* === */}
-      <s-section padding="small">
+      <s-section padding="base">
         <s-grid
           gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
           gap="small"
@@ -674,6 +662,5 @@ export default function HomePage() {
           </s-grid>
         </s-section>
       )}
-    </s-page>
-  );
-}
+</s-page>
+)

package/src/surfaces/admin/components/patterns/examples/index.html

@@ -21,6 +21,7 @@
       <s-section accessibilityLabel="Empty state section">
         <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
           <s-box maxInlineSize="200px" maxBlockSize="200px">
+            <!-- aspectRatio should match the actual image dimensions (width/height) -->
             <s-image
               maxInlineSize="200px"
               maxBlockSize="200px"

package/src/surfaces/admin/components/patterns/examples/index.jsx

@@ -1,10 +1,4 @@
-// ===
-// Index page pattern
-// ===
-
-export default function IndexPage() {
-  return (
-    <s-page heading="Puzzles">
+<s-page heading="Puzzles">
       <s-button slot="primary-action" variant="primary">
         Create puzzle
       </s-button>
@@ -21,6 +15,7 @@ export default function IndexPage() {
       <s-section accessibilityLabel="Empty state section">
         <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
           <s-box maxInlineSize="200px" maxBlockSize="200px">
+            {/* aspectRatio should match the actual image dimensions (width/height) */}
             <s-image
               aspectRatio="1/0.5"
               src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
@@ -38,12 +33,12 @@ export default function IndexPage() {
             <s-button-group>
               <s-button
                 slot="secondary-actions"
-                aria-label="Learn more about creating puzzles"
+                accessibilityLabel="Learn more about creating puzzles"
               >
                 {" "}
                 Learn more{" "}
               </s-button>
-              <s-button slot="primary-action" aria-label="Add a new puzzle">
+              <s-button slot="primary-action" accessibilityLabel="Add a new puzzle">
                 {" "}
                 Create puzzle{" "}
               </s-button>
@@ -155,8 +150,6 @@ export default function IndexPage() {
             {/* Add more rows as needed here */}
             {/* If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}
           </s-table-body>
-        </s-table>
-      </s-section>
-    </s-page>
-  );
-}
+      </s-table>
+    </s-section>
+</s-page>

package/src/surfaces/admin/components/patterns/examples/indexTable.html

@@ -2,12 +2,15 @@
   <s-table>
     <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
       <s-text-field
+        label="Search puzzles"
+        labelAccessibilityVisibility="exclusive"
         icon="search"
         placeholder="Searching all puzzles"
       ></s-text-field>
       <s-button
         icon="sort"
         variant="secondary"
+        accessibilityLabel="Sort"
         interestFor="sort-tooltip"
         commandFor="sort-actions"
       ></s-button>

package/src/surfaces/admin/components/patterns/examples/indexTable.jsx

@@ -2,12 +2,15 @@
   <s-table>
     <s-grid slot="filters" gap="small-200" gridTemplateColumns="1fr auto">
       <s-text-field
+        label="Search puzzles"
+        labelAccessibilityVisibility="exclusive"
         icon="search"
         placeholder="Searching all puzzles"
        />
       <s-button
         icon="sort"
         variant="secondary"
+        accessibilityLabel="Sort"
         interestFor="sort-tooltip"
         commandFor="sort-actions"
        />

package/src/surfaces/admin/components/patterns/examples/mediaCard.html

@@ -1,5 +1,5 @@
 <s-box border="base" borderRadius="base" overflow="hidden" maxInlineSize="216px">
-  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+  <s-clickable href="">
     <s-image
       aspectRatio="1/1"
       objectFit="cover"

package/src/surfaces/admin/components/patterns/examples/mediaCard.jsx

@@ -4,7 +4,7 @@
   overflow="hidden"
   maxInlineSize="216px"
 >
-  <s-clickable href="" accessibilityLabel="4-pieces puzzle template">
+  <s-clickable href="">
     <s-image
       aspectRatio="1/1"
       objectFit="cover"

package/src/surfaces/admin/components/patterns/examples/metricsCard.jsx

@@ -1,4 +1,4 @@
-<s-section padding="small">
+<s-section padding="base">
   <s-grid
     gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
     gap="small"