@shopify/ui-extensions 2025.10.3 → 2025.10.4

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

@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>

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

@@ -0,0 +1,58 @@
+<s-section padding="none">
+  <s-stack gap="small-200">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base" paddingBlockStart="base">
+      <s-grid gridTemplateColumns="1fr auto" gap="small-200" alignItems="center">
+        <s-text-field icon="search" placeholder="Filter customers"></s-text-field>
+        <s-button commandFor="tagged-with">Tagged with</s-button>
+        <s-popover id="tagged-with">
+          <s-stack gap="small-200" padding="small-200">
+            <s-text-field value="VIP" placeholder="Add tag"></s-text-field>
+            <s-link href="">Clear</s-link>
+          </s-stack>
+        </s-popover>
+      </s-grid>
+      <s-button variant="secondary">Save</s-button>
+    </s-grid>
+
+    <s-stack direction="inline"  gap="small-400" paddingInline="base">
+      <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>
+    </s-stack>
+    
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center" paddingInline="base">
+      <s-checkbox label="Showing 2 customers"></s-checkbox>
+      <s-select>
+        <s-option value="newest">Newest update</s-option>
+        <s-option value="oldest">Oldest update</s-option>
+      </s-select>
+    </s-grid>
+    
+    <s-stack>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Mae Jemison</s-heading>
+              <s-text>Decatur, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Mae Jemison"></s-button>
+        </s-grid>
+      </s-clickable>
+      <s-clickable borderStyle="solid none none none" border="base" paddingInline="base" paddingBlock="small">
+        <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+          <s-stack direction="inline" gap="small" alignItems="center">
+            <s-checkbox></s-checkbox>
+            <s-avatar></s-avatar>
+            <s-stack>
+              <s-heading>Ellen Ochoa</s-heading>
+              <s-text>Los Angeles, USA</s-text>
+            </s-stack>
+          </s-stack>
+          <s-button icon="menu-horizontal" variant="tertiary" accessibilityLabel="Actions for Ellen Ochoa"></s-button>
+        </s-grid>
+      </s-clickable>
+    </s-stack>
+  </s-stack>
+</s-section>

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

@@ -1,21 +1,15 @@
-// ===
-// Settings page pattern
-// ===
-
-export default function SettingsPage() {
-  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}>
+  }}
+  onReset={(event) => {
+    console.log("Handle discarded changes if necessary");
+  }}
+>
       <s-page heading="Settings" inlineSize="small">
         {/* === */}
         {/* Store Information */}
@@ -199,8 +193,6 @@ export default function SettingsPage() {
               </s-grid>
             </s-box>
           </s-stack>
-        </s-section>
-      </s-page>
-    </form>
-  );
-}
+      </s-section>
+  </s-page>
+</form>

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

@@ -23,7 +23,7 @@
       <s-paragraph>
         Use this personalized guide to get your store ready for sales.
       </s-paragraph>
-      <s-paragraph tone="subdued">0 out of 3 steps completed</s-paragraph>
+      <s-paragraph color="subdued">0 out of 3 steps completed</s-paragraph>
     </s-grid>
     <s-box borderRadius="base" border="base" background="base">
       <s-box>
@@ -79,7 +79,6 @@
         <s-box
           padding="small"
           paddingBlockStart="none"
-          style="display: none;"
          />
       </s-box>
       <s-divider />
@@ -95,7 +94,6 @@
         <s-box
           padding="small"
           paddingBlockStart="none"
-          style="display: none;"
          />
       </s-box>
     </s-box>

package/src/surfaces/admin/components/patterns/index.ab.doc.ts

@@ -54,15 +54,15 @@ const data: ReferenceEntityTemplateSchema = {
       title: 'Index',
       tabs: [
         {
-          title: 'JSX',
-          code: './examples/index.jsx',
-          language: 'jsx',
-        },
-        {
-          title: 'HTML',
+          title: 'html',
           code: './examples/index.html',
           language: 'html',
         },
+        {
+          title: 'jsx',
+          code: './examples/index.jsx',
+          language: 'preview-jsx',
+        },
       ],
     },
   },

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 
@@ -164,11 +164,11 @@ export interface ExtendableEvent extends Event {
    */
   waitUntil?: (promise: Promise<void>) => void;
 }
-interface AggregateError$1<T extends Error> extends Error {
+export interface AggregateError<T extends Error> extends Error {
   errors: T[];
 }
 export interface AggregateErrorEvent<T extends Error> extends ErrorEvent {
-  error: AggregateError$1<T>;
+  error: AggregateError<T>;
 }
 export type SizeKeyword =
   | 'small-500'
@@ -276,6 +276,7 @@ declare const privateIconArray: readonly [
   'arrow-up-right',
   'arrows-in-horizontal',
   'arrows-out-horizontal',
+  'asterisk',
   'attachment',
   'automation',
   'backspace',
@@ -2024,7 +2025,10 @@ interface ClickableProps$1
    */
   lang?: string;
 }
-interface ClickableChipProps$1 extends ChipProps$1, GlobalProps {
+interface ClickableChipProps$1
+  extends ChipProps$1,
+    GlobalProps,
+    InteractionProps {
   /**
    * Callback when the chip is clicked.
    */
@@ -2033,6 +2037,7 @@ interface ClickableChipProps$1 extends ChipProps$1, GlobalProps {
    * The URL to link to.
    *
    * - If set, it will navigate to the location specified by `href` after executing the `click` event.
+   * - If a `commandFor` is set, the `command` will be executed instead of the navigation.
    */
   href?: string;
   /**
@@ -3103,6 +3108,21 @@ interface NumberFieldProps$1
    * @default 'decimal'
    */
   inputMode?: 'decimal' | 'numeric';
+  /**
+   * Callback when the user has **finished editing** a field, e.g. once they have blurred
+   * the field after changing the value.
+   * Also fired after `onInput` on every step when interacting with the controls or the keyboard up and down arrows.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+   */
+  onChange?: (event: Event) => void;
+  /**
+   * Callback when the user makes any changes in the field.
+   * Also fired before `onChange` on every step when interacting with the controls or the keyboard up and down arrows.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+   */
+  onInput?: (event: Event) => void;
 }
 export type NumberAutocompleteField = ExtractStrict<
   AnyAutocompleteField,
@@ -3808,6 +3828,7 @@ type IconType$1 =
   | 'arrow-up-right'
   | 'arrows-in-horizontal'
   | 'arrows-out-horizontal'
+  | 'asterisk'
   | 'attachment'
   | 'automation'
   | 'backspace'
@@ -3888,6 +3909,7 @@ type IconType$1 =
   | 'clipboard-check'
   | 'clipboard-checklist'
   | 'clock'
+  | 'clock-list'
   | 'clock-revert'
   | 'code'
   | 'code-add'
@@ -4084,6 +4106,7 @@ type IconType$1 =
   | 'note'
   | 'note-add'
   | 'notification'
+  | 'number-one'
   | 'order'
   | 'order-batches'
   | 'order-draft'
@@ -4164,6 +4187,7 @@ type IconType$1 =
   | 'profile-filled'
   | 'question-circle'
   | 'question-circle-filled'
+  | 'radio-control'
   | 'receipt'
   | 'receipt-dollar'
   | 'receipt-euro'
@@ -4274,6 +4298,9 @@ type IconType$1 =
   | 'unlock'
   | 'upload'
   | 'variant'
+  | 'variant-list'
+  | 'video'
+  | 'video-list'
   | 'view'
   | 'viewport-narrow'
   | 'viewport-short'

package/src/surfaces/admin/components/using-polaris-web-components/examples/html-forms.html

@@ -1,6 +1,6 @@
 <form onSubmit="{handleSubmit}">
   <s-stack gap="base">
-    <s-text-field name="email" label="Email" type="email" required />
+    <s-email-field name="email" label="Email" required />
     <s-password-field name="password" label="Password" required />
     <s-button type="submit" variant="primary">Sign in</s-button>
   </s-stack>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.22.1 **/
+/** VERSION: 1.25.0 **/
 
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -166,11 +166,11 @@ export interface ExtendableEvent extends Event {
    */
   waitUntil?: (promise: Promise<void>) => void;
 }
-interface AggregateError$1<T extends Error> extends Error {
+export interface AggregateError<T extends Error> extends Error {
   errors: T[];
 }
 export interface AggregateErrorEvent<T extends Error> extends ErrorEvent {
-  error: AggregateError$1<T>;
+  error: AggregateError<T>;
 }
 export type SizeKeyword =
   | 'small-500'
@@ -278,6 +278,7 @@ declare const privateIconArray: readonly [
   'arrow-up-right',
   'arrows-in-horizontal',
   'arrows-out-horizontal',
+  'asterisk',
   'attachment',
   'automation',
   'backspace',
@@ -2026,7 +2027,10 @@ interface ClickableProps$1
    */
   lang?: string;
 }
-interface ClickableChipProps$1 extends ChipProps$1, GlobalProps {
+interface ClickableChipProps$1
+  extends ChipProps$1,
+    GlobalProps,
+    InteractionProps {
   /**
    * Callback when the chip is clicked.
    */
@@ -2035,6 +2039,7 @@ interface ClickableChipProps$1 extends ChipProps$1, GlobalProps {
    * The URL to link to.
    *
    * - If set, it will navigate to the location specified by `href` after executing the `click` event.
+   * - If a `commandFor` is set, the `command` will be executed instead of the navigation.
    */
   href?: string;
   /**
@@ -3105,6 +3110,21 @@ interface NumberFieldProps$1
    * @default 'decimal'
    */
   inputMode?: 'decimal' | 'numeric';
+  /**
+   * Callback when the user has **finished editing** a field, e.g. once they have blurred
+   * the field after changing the value.
+   * Also fired after `onInput` on every step when interacting with the controls or the keyboard up and down arrows.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+   */
+  onChange?: (event: Event) => void;
+  /**
+   * Callback when the user makes any changes in the field.
+   * Also fired before `onChange` on every step when interacting with the controls or the keyboard up and down arrows.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+   */
+  onInput?: (event: Event) => void;
 }
 export type NumberAutocompleteField = ExtractStrict<
   AnyAutocompleteField,
@@ -3810,6 +3830,7 @@ type IconType$1 =
   | 'arrow-up-right'
   | 'arrows-in-horizontal'
   | 'arrows-out-horizontal'
+  | 'asterisk'
   | 'attachment'
   | 'automation'
   | 'backspace'
@@ -3890,6 +3911,7 @@ type IconType$1 =
   | 'clipboard-check'
   | 'clipboard-checklist'
   | 'clock'
+  | 'clock-list'
   | 'clock-revert'
   | 'code'
   | 'code-add'
@@ -4086,6 +4108,7 @@ type IconType$1 =
   | 'note'
   | 'note-add'
   | 'notification'
+  | 'number-one'
   | 'order'
   | 'order-batches'
   | 'order-draft'
@@ -4166,6 +4189,7 @@ type IconType$1 =
   | 'profile-filled'
   | 'question-circle'
   | 'question-circle-filled'
+  | 'radio-control'
   | 'receipt'
   | 'receipt-dollar'
   | 'receipt-euro'
@@ -4276,6 +4300,9 @@ type IconType$1 =
   | 'unlock'
   | 'upload'
   | 'variant'
+  | 'variant-list'
+  | 'video'
+  | 'video-list'
   | 'view'
   | 'viewport-narrow'
   | 'viewport-short'
@@ -5333,11 +5360,18 @@ export interface ClickableChipProps
       | 'hidden'
       | 'href'
       | 'disabled'
+      | 'command'
+      | 'commandFor'
+      | 'interestFor'
     >
   > {}
 
+declare const ClickableChip_base: (abstract new (
+  args_0: RenderImpl,
+) => PreactCustomElement & PreactOverlayControlProps) &
+  Pick<typeof PreactCustomElement, 'prototype' | 'observedAttributes'>;
 declare class ClickableChip
-  extends PreactCustomElement
+  extends ClickableChip_base
   implements ClickableChipProps
 {
   accessor color: ClickableChipProps['color'];
@@ -5761,7 +5795,8 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName$I]: DropZoneJSXProps & PreactBaseElementProps<DropZone>;
+      [tagName$I]: DropZoneJSXProps &
+        PreactBaseElementPropsWithChildren<DropZone>;
     }
   }
 }
@@ -7604,7 +7639,7 @@ declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
       [tagName$9]: Omit<TextFieldJSXProps, 'accessory'> &
-        PreactBaseElementProps<TextField>;
+        PreactBaseElementPropsWithChildren<TextField>;
     }
   }
 }
@@ -8917,14 +8952,16 @@ declare global {
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
-      [tagName$I]: DropZoneJSXProps & ReactBaseElementProps<DropZone>;
+      [tagName$I]: DropZoneJSXProps &
+        ReactBaseElementPropsWithChildren<DropZone>;
     }
   }
 }
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      [tagName$I]: DropZoneJSXProps & ReactBaseElementProps<DropZone>;
+      [tagName$I]: DropZoneJSXProps &
+        ReactBaseElementPropsWithChildren<DropZone>;
     }
   }
 }
@@ -9442,7 +9479,7 @@ declare module 'react' {
   namespace JSX {
     interface IntrinsicElements {
       [tagName$9]: Omit<TextFieldJSXProps, 'accessory'> &
-        ReactBaseElementProps<TextField>;
+        ReactBaseElementPropsWithChildren<TextField>;
     }
   }
 }
@@ -9450,7 +9487,7 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       [tagName$9]: Omit<TextFieldJSXProps, 'accessory'> &
-        ReactBaseElementProps<TextField>;
+        ReactBaseElementPropsWithChildren<TextField>;
     }
   }
 }