npm - @shopify/ui-extensions - Versions diffs - 2025.10.0-rc.35 → 2025.10.0-rc.36 - Mend

@shopify/ui-extensions 2025.10.0-rc.35 → 2025.10.0-rc.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

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

@@ -3,14 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
   </head>
   <body>
     <!-- === -->
     <!-- Details page pattern -->
     <!-- === -->
-    <form data-save-bar onSubmit="" onReset="">
+    <form data-save-bar>
       <s-page>
         <!-- === -->
         <!-- Title Bar -->
@@ -105,6 +105,7 @@
                           maxBlockSize="40px"
                         >
                           <s-image
+                            alt="16-pieces puzzle template"
                             src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
                           ></s-image>
                         </s-box>
@@ -138,6 +139,7 @@
                           maxBlockSize="40px"
                         >
                           <s-image
+                            alt="9-pieces puzzle template"
                             src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
                           ></s-image>
                         </s-box>
@@ -216,8 +218,12 @@
               <s-list-item>Pieces can be rotated</s-list-item>
               <s-list-item>No time limit</s-list-item>
               <s-list-item>
-                Current status:
-                <s-badge color="base" tone="success"> Active </s-badge>
+                <s-stack direction="inline" gap="small">
+                  <s-text>Current status:</s-text>
+                  <s-badge color="base" tone="success">
+                    Active
+                  </s-badge>
+                </s-stack>
               </s-list-item>
             </s-unordered-list>
           </s-section>
@@ -225,4 +231,4 @@
       </s-page>
     </form>
   </body>
-</html>
+</html>

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

@@ -125,7 +125,7 @@ export default function DetailsPage() {
                           maxInlineSize="40px"
                           maxBlockSize="40px"
                         >
-                          <s-image src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"></s-image>
+                          <s-image alt="16-pieces puzzle template" src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"></s-image>
                         </s-box>
                         16-pieces puzzle
                       </s-stack>
@@ -160,7 +160,7 @@ export default function DetailsPage() {
                           maxInlineSize="40px"
                           maxBlockSize="40px"
                         >
-                          <s-image src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"></s-image>
+                          <s-image alt="9-pieces puzzle template" src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"></s-image>
                         </s-box>
                         9-pieces puzzle
                       </s-stack>
@@ -248,10 +248,12 @@ export default function DetailsPage() {
               <s-list-item>Pieces can be rotated</s-list-item>
               <s-list-item>No time limit</s-list-item>
               <s-list-item>
-                Current status:{" "}
-                <s-badge color="base" tone="success">
-                  Active
-                </s-badge>
+                <s-stack direction="inline" gap="small">
+                  <s-text>Current status:</s-text>
+                  <s-badge color="base" tone="success">
+                    Active
+                  </s-badge>
+                </s-stack>
               </s-list-item>
             </s-unordered-list>
           </s-section>
@@ -259,4 +261,4 @@ export default function DetailsPage() {
       </s-page>
     </form>
   );
-}
+}

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

@@ -0,0 +1,27 @@
+<s-section accessibilityLabel="Empty state section">
+  <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
+    <s-box maxInlineSize="200px" maxBlockSize="200px">
+      <s-image
+        aspectRatio="1/0.5"
+        src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
+        alt="A stylized graphic of four characters, each holding a puzzle piece"
+      />
+    </s-box>
+    <s-grid
+      justifyItems="center"
+      maxInlineSize="450px"
+      gap="base"
+    >
+    <s-stack alignItems="center">
+      <s-heading>Start creating puzzles</s-heading>
+      <s-paragraph>
+        Create and manage your collection of puzzles for players to enjoy.
+      </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-group>
+    </s-grid>
+  </s-grid>
+</s-section>

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

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
     <script>
       // Simple global object to store handlers
@@ -62,7 +62,7 @@
     <!-- === -->
     <!-- Home page pattern -->
     <!-- === -->
-    <s-page inlineSize="small">
+    <s-page>
       <!-- === -->
       <!-- Title Bar -->
       <!-- The ui-title-bar on the homepage should not have a title attribute -->
@@ -118,16 +118,13 @@
             <s-paragraph>
               Use this personalized guide to get your store ready for sales.
             </s-paragraph>
-            <s-stack direction="inline" gap="small-200" alignItems="center">
-              <s-paragraph id="progress-text" tone="subdued">0 out of 3 steps completed</s-paragraph>
-            </s-stack>
+              <s-paragraph id="progress-text" color="subdued">0 out of 3 steps completed</s-paragraph>
           </s-grid>
           <!-- Steps Container -->
           <s-box id="steps-container" borderRadius="base" border="base" background="base">
             <!-- Step 1 -->
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Upload an image for your puzzle"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -140,17 +137,16 @@
                     icon="chevron-down"
                   ></s-button>
                 </s-grid>
-              </s-box>
               <s-box id="step1-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Start by uploading a high-quality image that will be used to create your
                         puzzle. For best results, use images that are at least 1200x1200 pixels.
                       </s-paragraph>
                       <s-stack direction="inline" gap="small-200">
-                        <s-button variant="primary" onClick="console.log('clicked')">
+                        <s-button variant="primary">
                           Upload image
                         </s-button>
                         <s-button variant="tertiary" tone="neutral"> Image requirements </s-button>
@@ -169,8 +165,7 @@
             <!-- Step 2 -->
             <s-divider></s-divider>
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Choose a puzzle template"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -183,10 +178,9 @@
                     icon="chevron-down"
                   ></s-button>
                 </s-grid>
-              </s-box>
               <s-box id="step2-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Select a template for your puzzle - choose between 9-piece (beginner),
@@ -210,8 +204,7 @@
             <!-- Step 3 -->
             <s-divider></s-divider>
             <s-box>
-              <s-box padding="small">
-                <s-grid gridTemplateColumns="1fr auto" gap="base">
+                <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                   <s-checkbox
                     label="Customize puzzle piece shapes"
                     onInput="window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))"
@@ -227,7 +220,7 @@
               </s-box>
               <s-box id="step3-details" padding="small" paddingBlockStart="none" style="display: none;">
                 <s-box padding="base" background="subdued" borderRadius="base">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base">
                     <s-grid gap="small-200">
                       <s-paragraph>
                         Make your puzzle unique by customizing the shapes of individual pieces.
@@ -247,7 +240,6 @@
                       ></s-image>
                     </s-box>
                   </s-grid>
-                </s-box>
               </s-box>
             </s-box>
             <!-- Add additional steps here... -->
@@ -258,8 +250,7 @@
       <!-- 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="none">
-        <s-box padding="small">
+      <s-section padding="small">
           <s-grid
             gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
             gap="small"
@@ -309,7 +300,6 @@
               </s-grid>
             </s-clickable>
           </s-grid>
-        </s-box>
       </s-section>
       <!-- === -->
       <!-- Callout Card -->
@@ -327,12 +317,11 @@
               <s-paragraph>
                 Start by uploading an image to your gallery or choose from one of our templates.
               </s-paragraph>
-              <s-stack direction="inline" gap="small-200" wrap="nowrap">
-                <s-button onClick="console.log('clicked')"> Upload image </s-button>
+              <s-button-group>
+                <s-button> Upload image </s-button>
                 <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
-              </s-stack>
+              </s-button-group>
             </s-grid>
-            <s-stack alignItems="center">
               <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
                 <s-image
                   src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
@@ -340,7 +329,6 @@
                   aspectRatio="1/0.5"
                 ></s-image>
               </s-box>
-            </s-stack>
           </s-grid>
           <s-button
             onClick="window.puzzleApp.dismissSection(document.getElementById('callout-section'))"
@@ -363,7 +351,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
-                alt="Illustration of characters with a 4-piece puzzle"
+                alt="4-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
               ></s-image>
             </s-clickable>
@@ -387,6 +375,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="9-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
               ></s-image>
             </s-clickable>
@@ -410,6 +399,7 @@
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="16-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
               ></s-image>
             </s-clickable>
@@ -516,18 +506,11 @@
             accessibilityLabel="Download Shopify Flow"
           >
             <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
-              <s-box
-                border="base"
-                borderRadius="base"
-                overflow="hidden"
-                maxInlineSize="40px"
-                maxBlockSize="40px"
-              >
-                <s-image
+                <s-thumbnail
+                  size="small"
                   src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
                   alt="Shopify Flow icon"
-                ></s-image>
-              </s-box>
+                ></s-thumbnail>
               <s-box>
                 <s-heading>Shopify Flow</s-heading>
                 <s-paragraph>Free</s-paragraph>
@@ -552,18 +535,11 @@
             accessibilityLabel="Download Shopify Planet"
           >
             <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
-              <s-box
-                border="base"
-                borderRadius="base"
-                overflow="hidden"
-                maxInlineSize="40px"
-                maxBlockSize="40px"
-              >
-                <s-image
+                <s-thumbnail
+                  size="small"
                   src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
                   alt="Shopify Planet icon"
-                ></s-image>
-              </s-box>
+                ></s-thumbnail>
               <s-box>
                 <s-heading>Shopify Planet</s-heading>
                 <s-paragraph>Free</s-paragraph>
@@ -584,4 +560,4 @@
       </s-section>
     </s-page>
   </body>
-</html>
+</html>

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

@@ -19,7 +19,7 @@ export default function HomePage() {
   });
   const [progress, setProgress] = useState(0);
   return (
-    <s-page inlineSize="small">
+    <s-page>
       {/* === */}
       {/* Title Bar */}
       {/* The ui-title-bar on the homepage should not have a title attribute */}
@@ -88,11 +88,9 @@ export default function HomePage() {
               <s-paragraph>
                 Use this personalized guide to get your store ready for sales.
               </s-paragraph>
-              <s-stack direction="inline" gap="small-200" alignItems="center">
-                <s-paragraph tone="subdued">
+                <s-paragraph color="subdued">
                   {progress} out of 3 steps completed
                 </s-paragraph>
-              </s-stack>
             </s-grid>
             {/* Steps Container */}
             <s-box
@@ -103,8 +101,7 @@ export default function HomePage() {
             >
               {/* Step 1 */}
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Upload an image for your puzzle"
                       onInput={(e) =>
@@ -115,16 +112,13 @@ export default function HomePage() {
                     ></s-checkbox>
                     <s-button
                       onClick={(e) => {
-                        console.log("Toggle step 1 details");
                         setExpanded({ ...expanded, step1: !expanded.step1 });
-                      }
-                      }
+                      }}
                       accessibilityLabel="Toggle step 1 details"
                       variant="tertiary"
                       icon={expanded.step1 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -164,8 +158,7 @@ export default function HomePage() {
               {/* Step 2 */}
               <s-divider></s-divider>
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Choose a puzzle template"
                       onInput={(e) =>
@@ -183,7 +176,6 @@ export default function HomePage() {
                       icon={expanded.step2 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -221,8 +213,7 @@ export default function HomePage() {
               {/* Step 3 */}
               <s-divider></s-divider>
               <s-box>
-                <s-box padding="small">
-                  <s-grid gridTemplateColumns="1fr auto" gap="base">
+                  <s-grid gridTemplateColumns="1fr auto" gap="base" padding="small">
                     <s-checkbox
                       label="Customize puzzle piece shapes"
                       onInput={(e) =>
@@ -240,7 +231,6 @@ export default function HomePage() {
                       icon={expanded.step3 ? "chevron-up" : "chevron-down"}
                     ></s-button>
                   </s-grid>
-                </s-box>
                 <s-box
                   padding="small"
                   paddingBlockStart="none"
@@ -287,8 +277,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="none">
-        <s-box padding="small">
+      <s-section padding="small">
           <s-grid
             gridTemplateColumns="@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr"
             gap="small"
@@ -342,7 +331,6 @@ export default function HomePage() {
               </s-grid>
             </s-clickable>
           </s-grid>
-        </s-box>
       </s-section>
       {/* === */}
@@ -367,14 +355,10 @@ export default function HomePage() {
                   Start by uploading an image to your gallery or choose from one
                   of our templates.
                 </s-paragraph>
-                <s-stack direction="inline" gap="small-200" wrap="nowrap">
-                  <s-button onClick={() => console.log("Handle upload here")}>
-                    Upload image
-                  </s-button>
-                  <s-button tone="neutral" variant="tertiary">
-                    Browse templates
-                  </s-button>
-                </s-stack>
+                <s-button-group>
+                <s-button> Upload image </s-button>
+                <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
+              </s-button-group>
               </s-grid>
               <s-stack alignItems="center">
                 <s-box
@@ -419,7 +403,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
-                alt="Illustration of characters with a 4-piece puzzle"
+                alt="4-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png"
               ></s-image>
             </s-clickable>
@@ -454,6 +438,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="9-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png"
               ></s-image>
             </s-clickable>
@@ -488,6 +473,7 @@ export default function HomePage() {
               <s-image
                 aspectRatio="1/1"
                 objectFit="cover"
+                alt="16-pieces puzzle template"
                 src="https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png"
               ></s-image>
             </s-clickable>
@@ -613,18 +599,11 @@ export default function HomePage() {
                 alignItems="stretch"
                 gap="base"
               >
-                <s-box
-                  border="base"
-                  borderRadius="base"
-                  overflow="hidden"
-                  maxInlineSize="40px"
-                  maxBlockSize="40px"
-                >
-                  <s-image
+                  <s-thumbnail
+                    size="small"
                     src="https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png"
                     alt="Shopify Flow icon"
-                  ></s-image>
-                </s-box>
+                  ></s-thumbnail>
                 <s-box>
                   <s-heading>Shopify Flow</s-heading>
                   <s-paragraph>Free</s-paragraph>
@@ -655,18 +634,11 @@ export default function HomePage() {
                 alignItems="stretch"
                 gap="base"
               >
-                <s-box
-                  border="base"
-                  borderRadius="base"
-                  overflow="hidden"
-                  maxInlineSize="40px"
-                  maxBlockSize="40px"
-                >
-                  <s-image
+                  <s-thumbnail
+                    size="small"
                     src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
                     alt="Shopify Planet icon"
-                  ></s-image>
-                </s-box>
+                  ></s-thumbnail>
                 <s-box>
                   <s-heading>Shopify Planet</s-heading>
                   <s-paragraph>Free</s-paragraph>
@@ -688,4 +660,4 @@ export default function HomePage() {
       )}
     </s-page>
   );
-}
+}

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

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script>
+    <script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
     <title>Pattern</title>
   </head>
   <body>
@@ -28,26 +28,24 @@
         <s-grid gap="base" justifyItems="center" paddingBlock="large-400">
           <s-box maxInlineSize="200px" maxBlockSize="200px">
             <s-image
+              maxInlineSize="200px"
+              maxBlockSize="200px"
               aspectRatio="1/0.5"
               src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
               alt="A stylized graphic of four characters, each holding a puzzle piece"
             />
           </s-box>
-          <s-grid justifyItems="center" maxBlockSize="450px" maxInlineSize="450px">
-            <s-heading>Start creating puzzles</s-heading>
-            <s-paragraph>
-              Create and manage your collection of puzzles for players to enjoy.
-            </s-paragraph>
-            <s-stack
-              gap="small-200"
-              justifyContent="center"
-              padding="base"
-              paddingBlockEnd="none"
-              direction="inline"
-            >
+          <s-grid justifyItems="center" maxInlineSize="450px" gap="base">
+            <s-stack alignItems="center">
+              <s-heading>Start creating puzzles</s-heading>
+              <s-paragraph>
+                Create and manage your collection of puzzles for players to enjoy.
+              </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-stack>
+            </s-button-group>
           </s-grid>
         </s-grid>
       </s-section>
@@ -56,10 +54,10 @@
       <!-- This should only be visible if the merchant has created one or more puzzles. -->
       <!-- === -->
       <s-section padding="none" accessibilityLabel="Puzzles table section">
-        <s-table fullwidth>
+        <s-table>
           <s-table-header-row>
             <s-table-header listSlot="primary">Puzzle</s-table-header>
-            <s-table-header>Type</s-table-header>
+            <s-table-header format="numeric">Pieces</s-table-header>
             <s-table-header>Created</s-table-header>
             <s-table-header>Status</s-table-header>
           </s-table-header-row>
@@ -76,12 +74,12 @@
                     inlineSize="40px"
                     blockSize="40px"
                   >
-                    <s-image objectFit="cover" src="https://picsum.photos/id/29/80/80"></s-image>
+                    <s-image objectFit="cover" alt="Mountain View puzzle thumbnail" src="https://picsum.photos/id/29/80/80"></s-image>
                   </s-clickable>
                   <s-link href="/app/details">Mountain View</s-link>
                 </s-stack>
               </s-table-cell>
-              <s-table-cell>16-piece</s-table-cell>
+              <s-table-cell>16</s-table-cell>
               <s-table-cell>Today</s-table-cell>
               <s-table-cell>
                 <s-badge color="base" tone="success"> Active </s-badge>
@@ -99,12 +97,12 @@
                     inlineSize="40px"
                     blockSize="40px"
                   >
-                    <s-image objectFit="cover" src="https://picsum.photos/id/12/80/80"></s-image>
+                    <s-image objectFit="cover" alt="Ocean Sunset puzzle thumbnail" src="https://picsum.photos/id/12/80/80"></s-image>
                   </s-clickable>
                   <s-link href="/app/details">Ocean Sunset</s-link>
                 </s-stack>
               </s-table-cell>
-              <s-table-cell>9-piece</s-table-cell>
+              <s-table-cell>9</s-table-cell>
               <s-table-cell>Yesterday</s-table-cell>
               <s-table-cell>
                 <s-badge color="base" tone="success"> Active </s-badge>
@@ -122,12 +120,12 @@
                     inlineSize="40px"
                     blockSize="40px"
                   >
-                    <s-image objectFit="cover" src="https://picsum.photos/id/324/80/80"></s-image>
+                    <s-image objectFit="cover" alt="Forest Animals puzzle thumbnail" src="https://picsum.photos/id/324/80/80"></s-image>
                   </s-clickable>
                   <s-link href="/app/details">Forest Animals</s-link>
                 </s-stack>
               </s-table-cell>
-              <s-table-cell>25-piece</s-table-cell>
+              <s-table-cell>25</s-table-cell>
               <s-table-cell>Last week</s-table-cell>
               <s-table-cell>
                 <s-badge color="base" tone="neutral"> Draft </s-badge>
@@ -140,4 +138,4 @@
       </s-section>
     </s-page>
   </body>
-</html>
+</html>