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

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

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

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

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

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

@@ -1,7 +1,7 @@
 <s-button commandFor="product-options-popover">Product options</s-button>
 
-<s-popover id="product-options-popover" accessibilityLabel="Product options">
-  <s-stack direction="column" gap="small-500" padding="small-200 small-300">
+<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>

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.12.0 **/
+/** VERSION: 1.18.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -8,8 +8,10 @@
 /// <reference lib="DOM" />
 import type {
   TextFieldProps,
+  IconProps$1,
   SelectProps$1,
   ComponentChild,
+  IconType,
 } from './shared.d.ts';
 
 export type Styles = string;
@@ -116,6 +118,23 @@ declare class PreactInputElement
   constructor(renderImpl: RenderImpl);
 }
 
+export interface IconProps
+  extends Pick<
+    IconProps$1,
+    'type' | 'tone' | 'color' | 'size' | 'interestFor'
+  > {
+  /**
+   * Specifies the type of icon that will be displayed.
+   */
+  type: '' | IconType | 'empty';
+  tone: Extract<
+    IconProps$1['tone'],
+    'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
+  >;
+  color: Extract<IconProps$1['color'], 'base' | 'subdued'>;
+  size: Extract<IconProps$1['size'], 'small' | 'base'>;
+}
+
 export interface SelectProps
   extends Omit<PreactInputProps, 'value'>,
     Required<
@@ -133,6 +152,7 @@ export interface SelectProps
       >
     > {
   value: Required<SelectProps$1>['value'];
+  icon: IconProps['type'];
 }
 
 declare const usedFirstOptionSymbol: unique symbol;

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

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

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

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

package/src/surfaces/admin/components/StandardComponents.ts

@@ -6,11 +6,13 @@ export type StandardComponents =
   | 'Button'
   | 'ButtonGroup'
   | 'Checkbox'
+  | 'Chip'
   | 'Choice'
   | 'ChoiceList'
-  | 'Chip'
-  | 'ClickableChip'
   | 'Clickable'
+  | 'ClickableChip'
+  | 'ColorField'
+  | 'ColorPicker'
   | 'DateField'
   | 'DatePicker'
   | 'Divider'

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.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.12.0 **/
+/** VERSION: 1.18.0 **/
 /* eslint-disable import/extensions */
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -7,20 +7,12 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {
+  ComponentChild,
   TooltipProps$1,
-  ComponentChildren,
   InteractionProps,
-  ComponentChild,
 } from './shared.d.ts';
 
-export interface TooltipProps extends Required<Pick<TooltipProps$1, 'id'>> {
-  /**
-   * The content of the Tooltip.
-   *
-   * @implementation Accepts s-text, s-paragraph, and raw text content
-   */
-  children: ComponentChildren;
-}
+export interface TooltipProps extends Required<Pick<TooltipProps$1, 'id'>> {}
 
 /** Used when an element does not have children. */
 export interface PreactBaseElementProps<TClass extends HTMLElement> {
@@ -100,11 +92,21 @@ declare abstract class PreactCustomElement extends BaseClass {
 /**
  * Shared symbols for overlay control functionality.
  * These symbols are used by components that implement overlay behavior
- * (like Popover, Tooltip, etc.) to communicate with the overlay control system.
+ * (like Popover, Tooltip, Modal, etc.) to communicate with the overlay control system.
+ */
+/**
+ * Symbol used to invoke the method for overlay commands, e.g. `--show`, `--hide`, etc.
  */
 declare const overlayCommand: unique symbol;
+/**
+ * Symbol used to track the open or closed state of the overlay.
+ */
 declare const overlayHidden: unique symbol;
+/**
+ * Symbol used to track the element that opened the overlay. In some cases, like tooltips and popovers, the overlay is positioned against this element. In all cases, focus should be restored to this element when the overlay is closed.
+ */
 declare const overlayActivator: unique symbol;
+declare const overlayHideFrameId: unique symbol;
 
 declare class PreactOverlayElement extends PreactCustomElement {
   constructor(renderImpl: RenderImpl);
@@ -113,7 +115,12 @@ declare class PreactOverlayElement extends PreactCustomElement {
   /** @private */
   [overlayActivator]: HTMLElement | null | undefined;
   /** @private */
-  [overlayCommand](command: InteractionProps['command']): void;
+  [overlayHideFrameId]?: number;
+  /** @private */
+  [overlayCommand](
+    command: InteractionProps['command'],
+    overlayActivatorEl: HTMLElement | null | undefined,
+  ): void;
 }
 
 declare class Tooltip extends PreactOverlayElement implements TooltipProps {

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

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

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

@@ -0,0 +1,30 @@
+<s-clickable
+  href="https://apps.shopify.com/planet"
+  border="base"
+  borderRadius="base"
+  padding="base"
+  inlineSize="100%"
+  accessibilityLabel="Download Shopify Planet"
+>
+  <s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
+      <s-thumbnail
+        size="small"
+        src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
+        alt="Shopify Planet icon"
+      ></s-thumbnail>
+    <s-box>
+      <s-heading>Shopify Planet</s-heading>
+      <s-paragraph>Free</s-paragraph>
+      <s-paragraph>
+        Offer carbon-neutral shipping and showcase your commitment.
+      </s-paragraph>
+    </s-box>
+    <s-stack justifyContent="start">
+      <s-button
+        href="https://apps.shopify.com/planet"
+        icon="download"
+        accessibilityLabel="Download Shopify Planet"
+      ></s-button>
+    </s-stack>
+  </s-grid>
+</s-clickable>

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

@@ -0,0 +1,35 @@
+<s-section>
+  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
+    <s-grid
+      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
+      gap="base"
+      alignItems="center"
+    >
+      <s-grid gap="small-200">
+        <s-heading>Ready to create your custom puzzle?</s-heading>
+        <s-paragraph>
+          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-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"
+            alt="Customize checkout illustration"
+            aspectRatio="1/0.5"
+          ></s-image>
+        </s-box>
+      </s-stack>
+    </s-grid>
+    <s-button
+      icon="x"
+      tone="neutral"
+      variant="tertiary"
+      accessibilityLabel="Dismiss card"
+    ></s-button>
+  </s-grid>
+</s-section>

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

@@ -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

@@ -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

@@ -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>