@shopify/ui-extensions 2025.10.0-rc.37 → 2025.10.0-rc.39

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -26,7 +26,8 @@ export type HeaderFormat = Extract<
   TableHeaderProps$1['format'],
   'base' | 'currency' | 'numeric'
 >;
-export interface TableHeaderProps extends Pick<TableHeaderProps$1, 'listSlot'> {
+export interface TableHeaderProps
+  extends Pick<TableHeaderProps$1, 'listSlot' | 'format'> {
   listSlot: Extract<
     TableHeaderProps$1['listSlot'],
     'primary' | 'secondary' | 'labeled' | 'kicker' | 'inline'

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -12,7 +12,8 @@ export type HeaderFormat = Extract<
   TableHeaderProps$1['format'],
   'base' | 'currency' | 'numeric'
 >;
-export interface TableHeaderProps extends Pick<TableHeaderProps$1, 'listSlot'> {
+export interface TableHeaderProps
+  extends Pick<TableHeaderProps$1, 'listSlot' | 'format'> {
   listSlot: Extract<
     TableHeaderProps$1['listSlot'],
     'primary' | 'secondary' | 'labeled' | 'kicker' | 'inline'

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.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.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.18.0 **/
+/** VERSION: 1.19.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.18.0 **/
+/** VERSION: 1.19.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */

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

@@ -10,10 +10,10 @@
         <s-paragraph>
           Start by uploading an image to your gallery or choose from one of our templates.
         </s-paragraph>
-        <s-button-group>
+        <s-stack direction="inline" gap="small-200">
           <s-button> Upload image </s-button>
           <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
-        </s-button-group>
+        </s-stack>
       </s-grid>
       <s-stack alignItems="center">
         <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

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

@@ -11,16 +11,10 @@
     <!-- Details page pattern -->
     <!-- === -->
     <form data-save-bar>
-      <s-page>
-        <!-- === -->
-        <!-- Title Bar -->
-        <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-        <!-- === -->
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">Puzzles</button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+      <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>
         <!-- === -->
         <!-- Puzzle information -->
         <!-- === -->
@@ -83,7 +77,7 @@
               borderStyle="solid"
               overflow="hidden"
             >
-              <s-table fullwidth border="base" borderRadius="base" borderStyle="solid">
+              <s-table border="base" borderRadius="base" borderStyle="solid">
                 <s-table-header-row>
                   <s-table-header listSlot="primary">Template</s-table-header>
                   <s-table-header>

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

@@ -16,18 +16,10 @@ export default function DetailsPage() {
 
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page>
-        {/* === */}
-        {/* Title Bar */}
-        {/* Note: ui-title-bar requires AppBridge to render correctly */}
-        {/* === */}
-        <ui-title-bar title="Mountain view">
-          <button variant="breadcrumb" href="/app/puzzles">
-            Puzzles
-          </button>
-          <button>Duplicate</button>
-          <button tone="critical">Delete</button>
-        </ui-title-bar>
+      <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>
         {/* === */}
         {/* Puzzle information */}
         {/* === */}
@@ -96,7 +88,6 @@ export default function DetailsPage() {
               overflow="hidden"
             >
               <s-table
-                fullwidth
                 border="base"
                 borderRadius="base"
                 borderStyle="solid"

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

@@ -19,8 +19,8 @@
       </s-paragraph>
     </s-stack>
     <s-button-group>
-      <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
-      <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
+      <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+      <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
     </s-button-group>
     </s-grid>
   </s-grid>

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

@@ -63,18 +63,9 @@
     <!-- Home page pattern -->
     <!-- === -->
     <s-page>
-      <!-- === -->
-      <!-- Title Bar -->
-      <!-- The ui-title-bar on the homepage should not have a title attribute -->
-      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-      <!-- === -->
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+      <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>
       <!-- === -->
       <!-- Banner -->
       <!-- Use banners sparingly. Only one banner should be visible at a time. -->
@@ -317,10 +308,10 @@
               <s-paragraph>
                 Start by uploading an image to your gallery or choose from one of our templates.
               </s-paragraph>
-              <s-button-group>
+              <s-stack direction="inline" gap="small-200">
                 <s-button> Upload image </s-button>
                 <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
-              </s-button-group>
+              </s-stack>
             </s-grid>
               <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
                 <s-image

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

@@ -20,18 +20,9 @@ export default function HomePage() {
   const [progress, setProgress] = useState(0);
   return (
     <s-page>
-      {/* === */}
-      {/* Title Bar */}
-      {/* The ui-title-bar on the homepage should not have a title attribute */}
-      {/* Note: ui-title-bar requires AppBridge to render correctly */}
-      {/* === */}
-      <ui-title-bar>
-        <button variant="primary">Create puzzle</button>
-        <section>
-          <button>Browse templates</button>
-          <button>Import image</button>
-        </section>
-      </ui-title-bar>
+      <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>
 
       {/* === */}
       {/* Banner */}
@@ -355,10 +346,10 @@ export default function HomePage() {
                   Start by uploading an image to your gallery or choose from one
                   of our templates.
                 </s-paragraph>
-                <s-button-group>
-                <s-button> Upload image </s-button>
-                <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
-              </s-button-group>
+                <s-stack direction="inline" gap="small-200">
+                  <s-button> Upload image </s-button>
+                  <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
+                </s-stack>
               </s-grid>
               <s-stack alignItems="center">
                 <s-box

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

@@ -10,16 +10,10 @@
     <!-- === -->
     <!-- Index page pattern -->
     <!-- === -->
-    <s-page>
-      <!-- === -->
-      <!-- Title Bar -->
-      <!-- Note: ui-title-bar requires AppBridge to render correctly -->
-      <!-- === -->
-      <ui-title-bar title="Puzzles">
-        <button variant="primary">Create puzzle</button>
-        <button>Export puzzles</button>
-        <button>Import puzzles</button>
-      </ui-title-bar>
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
       <!-- === -->
       <!-- Empty state -->
       <!-- This should only be visible if the merchant has not created any puzzles yet. -->
@@ -43,8 +37,8 @@
               </s-paragraph>
             </s-stack>
             <s-button-group>
-              <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
-              <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
+              <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
             </s-button-group>
           </s-grid>
         </s-grid>

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

@@ -4,17 +4,10 @@
 
 export default function IndexPage() {
   return (
-    <s-page>
-      {/* === */}
-      {/* Title Bar */}
-      {/* Note: ui-title-bar requires AppBridge to render correctly */}
-      {/* === */}
-      <ui-title-bar title="Puzzles">
-        <button variant="primary">Create puzzle</button>
-        <button>Export puzzles</button>
-        <button>Import puzzles</button>
-      </ui-title-bar>
-
+    <s-page heading="Puzzles">
+      <s-button slot="primary-action" variant="primary">Create puzzle</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Export puzzles</s-button>
+      <s-button slot="secondary-actions" variant="secondary">Import puzzles</s-button>
       {/* === */}
       {/* Empty state */}
       {/* This should only be visible if the merchant has not created any puzzles yet. */}
@@ -40,8 +33,8 @@ export default function IndexPage() {
               </s-paragraph>
             </s-stack>
             <s-button-group>
-              <s-button aria-label="Learn more about creating puzzles"> Learn more </s-button>
-              <s-button variant="primary" aria-label="Add a new puzzle"> Create puzzle </s-button>
+              <s-button slot="secondary-actions" aria-label="Learn more about creating puzzles"> Learn more </s-button>
+              <s-button slot="primary-action" aria-label="Add a new puzzle"> Create puzzle </s-button>
             </s-button-group>
           </s-grid>
         </s-grid>

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

@@ -35,18 +35,13 @@
       </s-popover>
     </s-grid>
     <s-table-header-row>
-      <s-table-header listSlot="primary">
-        <s-stack direction="inline" gap="small-200" alignItems="center">
-          <s-checkbox accessibilityLabel="Select all puzzles"></s-checkbox>
-          <s-text>Puzzle</s-text>
-        </s-stack>
-      </s-table-header>
+      <s-table-header listSlot="primary">Puzzle</s-table-header>
       <s-table-header format="numeric">Pieces</s-table-header>
       <s-table-header>Created</s-table-header>
       <s-table-header listSlot="secondary">Status</s-table-header>
     </s-table-header-row>
     <s-table-body>
-      <s-table-row clickdelegate="mountain-view-checkbox">
+      <s-table-row clickDelegate="mountain-view-checkbox">
         <s-table-cell>
           <s-stack direction="inline" gap="small" alignItems="center">
             <s-checkbox id="mountain-view-checkbox"></s-checkbox>
@@ -73,7 +68,7 @@
           <s-badge color="base" tone="success">Active</s-badge>
         </s-table-cell>
       </s-table-row>
-      <s-table-row clickdelegate="ocean-sunset-checkbox">
+      <s-table-row clickDelegate="ocean-sunset-checkbox">
         <s-table-cell>
           <s-stack direction="inline" gap="small" alignItems="center">
             <s-checkbox id="ocean-sunset-checkbox"></s-checkbox>
@@ -100,7 +95,7 @@
           <s-badge color="base" tone="success">Active</s-badge>
         </s-table-cell>
       </s-table-row>
-      <s-table-row clickdelegate="forest-animals-checkbox">
+      <s-table-row clickDelegate="forest-animals-checkbox">
         <s-table-cell>
           <s-stack direction="inline" gap="small" alignItems="center">
             <s-checkbox id="forest-animals-checkbox"></s-checkbox>

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

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

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

@@ -11,8 +11,7 @@
     <!-- Settings page pattern -->
     <!-- === -->
     <form data-save-bar onSubmit="" onReset="">
-      <s-page inlineSize="small">
-        <ui-title-bar title="Settings"></ui-title-bar>
+      <s-page heading="Settings" inlineSize="small">
         <!-- === -->
         <!-- Store Information -->
         <!-- === -->

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

@@ -16,9 +16,7 @@ export default function SettingsPage() {
 
   return (
     <form data-save-bar onSubmit={handleFormSubmit} onReset={handleFormReset}>
-      <s-page inlineSize="small">
-        <ui-title-bar title="Settings"></ui-title-bar>
-
+      <s-page heading="Settings" inlineSize="small">
         {/* === */}
         {/* Store Information */}
         {/* === */}
@@ -42,9 +40,7 @@ export default function SettingsPage() {
             placeholder="Enter phone number"
           />
           <s-choice-list label="Primary currency" name="currency">
-            <s-choice value="usd" selected>
-              US Dollar ($)
-            </s-choice>
+            <s-choice value="usd" selected>US Dollar ($)</s-choice>
             <s-choice value="cad">Canadian Dollar (CAD)</s-choice>
             <s-choice value="eur">Euro (€)</s-choice>
           </s-choice-list>