npm - @shopify/ui-extensions - Versions diffs - 2025.10.2 → 2025.10.4 - Mend

@shopify/ui-extensions 2025.10.2 → 2025.10.4

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 (854) hide show

package/src/surfaces/admin/components/TextArea/examples/product-care-instructions.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-text-area
+  label="Care instructions"
+  rows="6"
+  details="Detailed care instructions help customers maintain their purchases and reduce returns."
+  placeholder="Provide washing, storage, and maintenance instructions..."
+  autocomplete="off"
+></s-text-area>

package/src/surfaces/admin/components/TextArea/examples/product-care-instructions.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-text-area
+  label="Care instructions"
+  rows={6}
+  details="Detailed care instructions help customers maintain their purchases and reduce returns."
+  placeholder="Provide washing, storage, and maintenance instructions..."
+  autocomplete="off"
+ />

package/src/surfaces/admin/components/TextArea/examples/seo-meta-description-with-character-limit.html ADDED Viewed

@@ -0,0 +1,8 @@
+<s-text-area
+  label="Meta description"
+  max-length="160"
+  details="Appears in search results. Keep under 160 characters for best visibility."
+  placeholder="Write a compelling description that will appear in Google search results..."
+  rows="3"
+  autocomplete="off"
+></s-text-area>

package/src/surfaces/admin/components/TextArea/examples/seo-meta-description-with-character-limit.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+<s-text-area
+  label="Meta description"
+  max-length={160}
+  details="Appears in search results. Keep under 160 characters for best visibility."
+  placeholder="Write a compelling description that will appear in Google search results..."
+  rows={3}
+  autocomplete="off"
+ />

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

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

package/src/surfaces/admin/components/TextField/examples/basic-usage.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-text-field label="Store name" autocomplete="off"></s-text-field>

package/src/surfaces/admin/components/TextField/examples/basic-usage.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-text-field label="Store name" autocomplete="off" />

package/src/surfaces/admin/components/TextField/examples/default.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-text-field
+  label="Store name"
+  value="Jaded Pixel"
+  placeholder="Become a merchant"
+ />

package/src/surfaces/admin/components/TextField/examples/required-field-with-validation.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-text-field label="Store name" required></s-text-field>

package/src/surfaces/admin/components/TextField/examples/required-field-with-validation.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-text-field label="Store name" required />

package/src/surfaces/admin/components/TextField/examples/specific-error-messages-for-merchant-context.html ADDED Viewed

@@ -0,0 +1,16 @@
+<s-stack gap="base">
+  <!-- Generic error (avoid) -->
+  <s-text-field label="Product weight" error="Invalid value"></s-text-field>
+  <!-- Specific error (preferred) -->
+  <s-text-field
+    label="Product weight"
+    error="Weight must be greater than 0 and less than 500 pounds for shipping calculations"
+  ></s-text-field>
+  <!-- Business rule error -->
+  <s-text-field
+    label="SKU"
+    error="SKU 'TSHIRT-001' already exists. SKUs must be unique across all products."
+  ></s-text-field>
+</s-stack>

package/src/surfaces/admin/components/TextField/examples/specific-error-messages-for-merchant-context.jsx ADDED Viewed

@@ -0,0 +1,16 @@
+<s-stack gap="base">
+  {/* Generic error (avoid) */}
+  <s-text-field label="Product weight" error="Invalid value" />
+  {/* Specific error (preferred) */}
+  <s-text-field
+    label="Product weight"
+    error="Weight must be greater than 0 and less than 500 pounds for shipping calculations"
+   />
+  {/* Business rule error */}
+  <s-text-field
+    label="SKU"
+    error="SKU 'TSHIRT-001' already exists. SKUs must be unique across all products."
+   />
+</s-stack>

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

@@ -0,0 +1,4 @@
+<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/examples/with-accessory.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<>
+  <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/examples/with-icon.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-text-field
+  label="Search"
+  icon="search"
+  placeholder="Search products..."
+></s-text-field>

package/src/surfaces/admin/components/TextField/examples/with-icon.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-text-field
+  label="Search"
+  icon="search"
+  placeholder="Search products..."
+ />

package/src/surfaces/admin/components/TextField/examples/with-prefix-and-suffix.html ADDED Viewed

@@ -0,0 +1,8 @@
+<s-stack gap="small">
+  <s-text-field label="Phone number" prefix="+03" />
+  <s-text-field
+    label="Credit Card Number"
+    value="1234 5678 9012 3456"
+    suffix="VISA"
+  />
+</s-stack>

package/src/surfaces/admin/components/TextField/examples/with-prefix-and-suffix.jsx ADDED Viewed

@@ -0,0 +1,11 @@
+<s-stack gap="small">
+    <s-text-field
+    label="Phone number"
+    prefix="+03"
+    />
+    <s-text-field
+    label="Credit Card Number"
+    value="1234 5678 9012 3456"
+    suffix="VISA"
+    />
+</s-stack>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** 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/examples/basic-usage.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <s-thumbnail
-  src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
   alt="Product preview"
   size="base"
 ></s-thumbnail>

package/src/surfaces/admin/components/Thumbnail/examples/basic-usage.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-thumbnail
+  src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+  alt="Product preview"
+  size="base"
+ />

package/src/surfaces/admin/components/Thumbnail/examples/default.jsx ADDED Viewed

@@ -0,0 +1,4 @@
+<s-thumbnail
+  alt="White sneakers"
+  src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
+ />

package/src/surfaces/admin/components/Thumbnail/examples/different-sizes.html CHANGED Viewed

@@ -1,16 +1,16 @@
 <s-stack gap="large-100">
   <s-thumbnail
-    src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
     alt="Small thumbnail"
     size="small-200"
   ></s-thumbnail>
   <s-thumbnail
-    src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
     alt="Base thumbnail"
     size="base"
   ></s-thumbnail>
   <s-thumbnail
-    src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
     alt="Large thumbnail"
     size="large"
   ></s-thumbnail>

package/src/surfaces/admin/components/Thumbnail/examples/different-sizes.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+<s-stack gap="large-100">
+  <s-thumbnail
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Small thumbnail"
+    size="small-200"
+   />
+  <s-thumbnail
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Base thumbnail"
+    size="base"
+   />
+  <s-thumbnail
+    src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+    alt="Large thumbnail"
+    size="large"
+   />
+</s-stack>

package/src/surfaces/admin/components/Thumbnail/examples/empty-state.jsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ <s-thumbnail alt="No image available" size="base" />

package/src/surfaces/admin/components/Thumbnail/examples/with-event-handling.html CHANGED Viewed

@@ -1,6 +1,9 @@
-<!-- Event handlers can be attached via JavaScript -->
-<s-thumbnail
-  src="https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_t.png"
-  alt="Product"
-  size="base"
-></s-thumbnail>
+  <s-stack direction="inline" gap="base">
+    <s-thumbnail
+      src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+      alt="Product"
+      size="small-200"
+      onLoad="setLoading(false)"
+    />
+    <s-paragraph>Image loaded</s-paragraph>
+ </s-stack>

package/src/surfaces/admin/components/Thumbnail/examples/with-event-handling.jsx ADDED Viewed

@@ -0,0 +1,13 @@
+const [loading, setLoading] = useState(true)
+return (
+  <s-stack direction="inline" gap="base" alignItems="center">
+    <s-thumbnail
+      src="https://cdn.shopify.com/static/sample-product/House-Plant1.png"
+      alt="Product"
+      size="small-200"
+      onLoad={() => setLoading(false)}
+    />
+    <s-paragraph>{loading ? 'Loading...' : 'Image loaded'}</s-paragraph>
+ </s-stack>
+)

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

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

package/src/surfaces/admin/components/Tooltip/examples/basic-usage.html ADDED Viewed

@@ -0,0 +1,4 @@
+<s-tooltip id="shipping-status-tooltip">
+  <s-text>This order has shipping labels.</s-text>
+</s-tooltip>
+<s-text interestFor="shipping-status-tooltip">Shipping status</s-text>

package/src/surfaces/admin/components/Tooltip/examples/basic-usage.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<>
+  <s-tooltip id="shipping-status-tooltip">
+    <s-text>This order has shipping labels.</s-text>
+  </s-tooltip>
+  <s-text interestFor="shipping-status-tooltip">Shipping status</s-text>
+</>

package/src/surfaces/admin/components/Tooltip/examples/default.html CHANGED Viewed

@@ -1,2 +1,2 @@
-  <s-tooltip id="bold-tooltip">Bold</s-tooltip>
-  <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button>
+<s-tooltip id="bold-tooltip">Bold</s-tooltip>
+<s-button interestFor="bold-tooltip" accessibilityLabel="Bold">B</s-button>

package/src/surfaces/admin/components/Tooltip/examples/default.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+<>
+  <s-tooltip id="bold-tooltip">Bold</s-tooltip>
+  <s-button interestFor="bold-tooltip" accessibilityLabel="Bold">
+    B
+  </s-button>
+</>

package/src/surfaces/admin/components/Tooltip/examples/with-icon-button.html ADDED Viewed

@@ -0,0 +1,6 @@
+<s-tooltip id="delete-button-tooltip">
+  <s-text>Delete item permanently</s-text>
+</s-tooltip>
+<s-button interestFor="delete-button-tooltip">
+  <s-icon tone="neutral" type="info"></s-icon>
+</s-button>

package/src/surfaces/admin/components/Tooltip/examples/with-icon-button.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+<>
+  <s-tooltip id="delete-button-tooltip">
+    <s-text>Delete item permanently</s-text>
+  </s-tooltip>
+  <s-button interestFor="delete-button-tooltip">
+    <s-icon tone="neutral" type="info" />
+  </s-button>
+</>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** VERSION: 1.25.0 **/
 /* eslint-disable import/extensions */
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -89,15 +89,39 @@ declare abstract class PreactCustomElement extends BaseClass {
   click({sourceEvent}?: ClickOptions): void;
 }
+export interface PreactOverlayControlProps
+  extends Pick<InteractionProps, 'commandFor' | 'interestFor'> {
+  /**
+   * Sets the action the [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this clickable is activated.
+   *
+   * See the documentation of particular components for the actions they support.
+   *
+   * - `--auto`: a default action for the target component.
+   * - `--show`: shows the target component.
+   * - `--hide`: hides the target component.
+   * - `--toggle`: toggles the target component.
+   *
+   * @default '--auto'
+   */
+  command: Extract<
+    InteractionProps['command'],
+    '--show' | '--hide' | '--toggle' | '--auto'
+  >;
+  /**
+   * Sets the element the [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this clickable is activated.
+   */
+  commandFor: Extract<InteractionProps['commandFor'], string>;
+  /**
+   * Sets the element the [interestFor](https://open-ui.org/components/interest-invokers.explainer/#the-pitch-in-code) should act on when this clickable is activated.
+   */
+  interestFor: Extract<InteractionProps['interestFor'], string>;
+}
 /**
  * Shared symbols for overlay control functionality.
  * These symbols are used by components that implement overlay behavior
  * (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.
  */
@@ -107,6 +131,21 @@ declare const overlayHidden: unique symbol;
  */
 declare const overlayActivator: unique symbol;
 declare const overlayHideFrameId: unique symbol;
+export type PolyfillCommandEventInit = EventInit & {
+  source: HTMLElement | null | undefined;
+  command: PreactOverlayControlProps['command'];
+};
+export type PolyfillCommandEvent = Event & {
+  source: PolyfillCommandEventInit['source'];
+  command: PolyfillCommandEventInit['command'];
+  /** Have to use `_s_shadowSource` because `source` is retargeted to the shadow host by browsers */
+  _s_shadowSource: PolyfillCommandEventInit['source'];
+};
+declare global {
+  interface GlobalEventHandlersEventMap {
+    command: PolyfillCommandEvent;
+  }
+}
 declare class PreactOverlayElement extends PreactCustomElement {
   constructor(renderImpl: RenderImpl);
@@ -116,11 +155,6 @@ declare class PreactOverlayElement extends PreactCustomElement {
   [overlayActivator]: HTMLElement | null | undefined;
   /** @private */
   [overlayHideFrameId]?: number;
-  /** @private */
-  [overlayCommand](
-    command: InteractionProps['command'],
-    overlayActivatorEl: HTMLElement | null | undefined,
-  ): void;
 }
 declare class Tooltip extends PreactOverlayElement implements TooltipProps {
@@ -142,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/examples/basic-usage.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack gap="base">
+  <!-- Simple URL input -->
+  <s-url-field
+    label="Website URL"
+    placeholder="https://example.com"
+  ></s-url-field>
+</s-stack>

package/src/surfaces/admin/components/URLField/examples/basic-usage.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack gap="base">
+  {/* Simple URL input */}
+  <s-url-field
+    label="Website URL"
+    placeholder="https://example.com"
+   />
+</s-stack>

package/src/surfaces/admin/components/URLField/examples/default.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-url-field
+  label="Your website"
+  details="Join the partner ecosystem"
+  placeholder="https://shopify.com/partner"
+ />

package/src/surfaces/admin/components/URLField/examples/disabled-state.html ADDED Viewed

@@ -0,0 +1,5 @@
+<s-url-field
+  label="Store URL"
+  value="https://your-store.myshopify.com"
+  disabled
+></s-url-field>

package/src/surfaces/admin/components/URLField/examples/disabled-state.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-url-field
+  label="Store URL"
+  value="https://your-store.myshopify.com"
+  disabled
+/>

package/src/surfaces/admin/components/URLField/examples/with-default-value.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack gap="base">
+  <s-url-field
+    label="Profile URL"
+    value="https://shop.myshopify.com"
+    readOnly
+  ></s-url-field>
+</s-stack>

package/src/surfaces/admin/components/URLField/examples/with-default-value.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-stack gap="base">
+  <s-url-field
+    label="Profile URL"
+    defaultValue="https://shop.myshopify.com"
+    readOnly
+  />
+</s-stack>

package/src/surfaces/admin/components/URLField/examples/with-validation.html ADDED Viewed

@@ -0,0 +1,7 @@
+<s-url-field
+  label="Company website"
+  required
+  minLength="10"
+  maxLength="200"
+  error="Please enter a valid website URL"
+></s-url-field>

package/src/surfaces/admin/components/URLField/examples/with-validation.jsx ADDED Viewed

@@ -0,0 +1,7 @@
+<s-url-field
+  label="Company website"
+  required
+  minLength={10}
+  maxLength={200}
+  error="Please enter a valid website URL"
+  />

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

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

package/src/surfaces/admin/components/UnorderedList/examples/default.jsx ADDED Viewed

@@ -0,0 +1,5 @@
+<s-unordered-list>
+  <s-list-item>Red shirt</s-list-item>
+  <s-list-item>Green shirt</s-list-item>
+  <s-list-item>Blue shirt</s-list-item>
+</s-unordered-list>

package/src/surfaces/admin/components/UnorderedList/examples/store-setup-checklist.html ADDED Viewed

@@ -0,0 +1,24 @@
+<s-stack gap="base">
+  <s-box borderWidth="small-100" borderRadius="base" padding="base">
+    <s-unordered-list>
+      <s-list-item>Configure payment settings</s-list-item>
+      <s-list-item>
+        Set up shipping options
+        <s-unordered-list>
+          <s-list-item>Domestic shipping rates</s-list-item>
+          <s-list-item>International shipping zones</s-list-item>
+        </s-unordered-list>
+      </s-list-item>
+      <s-list-item>Add product descriptions</s-list-item>
+    </s-unordered-list>
+  </s-box>
+  <s-box borderWidth="small-100" borderRadius="base" padding="base">
+    <s-unordered-list>
+      <s-list-item>Enable online payments</s-list-item>
+      <s-list-item>Set up shipping rates</s-list-item>
+      <s-list-item>Configure tax settings</s-list-item>
+      <s-list-item>Add product descriptions</s-list-item>
+    </s-unordered-list>
+  </s-box>
+</s-stack>

package/src/surfaces/admin/components/UnorderedList/examples/store-setup-checklist.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+<s-stack gap="base">
+  <s-box borderWidth="small-100" borderRadius="base" padding="base">
+    <s-unordered-list>
+      <s-list-item>Configure payment settings</s-list-item>
+      <s-list-item>
+        Set up shipping options
+        <s-unordered-list>
+          <s-list-item>Domestic shipping rates</s-list-item>
+          <s-list-item>International shipping zones</s-list-item>
+        </s-unordered-list>
+      </s-list-item>
+      <s-list-item>Add product descriptions</s-list-item>
+    </s-unordered-list>
+  </s-box>
+  <s-box borderWidth="small-100" borderRadius="base" padding="base">
+    <s-unordered-list>
+      <s-list-item>Enable online payments</s-list-item>
+      <s-list-item>Set up shipping rates</s-list-item>
+      <s-list-item>Configure tax settings</s-list-item>
+      <s-list-item>Add product descriptions</s-list-item>
+    </s-unordered-list>
+  </s-box>
+</s-stack>

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

@@ -1,4 +1,4 @@
-/** VERSION: 1.20.0 **/
+/** 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/accountConnection.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+<s-section>
+  <s-stack gap="base">
+    <s-grid gridTemplateColumns="1fr auto" gap="base" alignItems="center">
+      <s-grid-item>
+        <s-stack>
+          <s-heading>Puzzlify</s-heading>
+          <s-text color="subdued">No account connected</s-text>
+        </s-stack>
+      </s-grid-item>
+      <s-grid-item>
+        <s-button variant="primary">Connect</s-button>
+      </s-grid-item>
+    </s-grid>
+    <s-text>
+      By clicking Connect, you agree to accept Sample App's terms and
+      conditions. You'll pay a commission rate of 15% on sales made through
+      Sample App.
+    </s-text>
+  </s-stack>
+</s-section>

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

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