From 5f1668883bf621e0bf8154e4d9eb9a478db6570c Mon Sep 17 00:00:00 2001
From: Ajanth Uthayan <ajanth.uthayan@shopify.com>
Date: Fri, 14 Aug 2026 11:00:24 -0400
Subject: [PATCH 1/3] Document borderRadius for POS s-image

Assisted-By: devx/bd310388-3a75-41ab-8ca8-b7fa0e22c7e0
---
 .../document-pos-image-border-radius.md       |  5 ++
 .../surfaces/point-of-sale/components.d.ts    | 46 +++++++++++++++++++
 .../point-of-sale/components/Image.d.ts       | 31 ++++++++++++-
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/document-pos-image-border-radius.md

diff --git a/.changeset/document-pos-image-border-radius.md b/.changeset/document-pos-image-border-radius.md
new file mode 100644
index 0000000000..dacac9723f
--- /dev/null
+++ b/.changeset/document-pos-image-border-radius.md
@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Document the `borderRadius` prop on the POS `s-image` component.
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
index 3b0afd29bc..7204a08a39 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
@@ -4195,6 +4195,29 @@ interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit' | 'alt'> {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
    */
   src?: ImageProps['src'];
+  /**
+   * Border radius for the image corners.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `start-start inline-end end-end inline-start`
+   * - 3 values: `start-start inline end-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `base` means all corners have `base` radius
+   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
+   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   *
+   * Supports size keywords from the design system scale:
+   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
+   * - Special values: `max`, `none`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -7116,6 +7139,29 @@ interface Image {
    * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
    */
   alt?: string;
+  /**
+   * Border radius for the image corners.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `start-start inline-end end-end inline-start`
+   * - 3 values: `start-start inline end-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `base` means all corners have `base` radius
+   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
+   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   *
+   * Supports size keywords from the design system scale:
+   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
+   * - Special values: `max`, `none`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 
 /**
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
index 46289894c5..fc5f159eb9 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
@@ -8,7 +8,13 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {ImageProps, Key, Ref} from './components-shared.d.ts';
+import type {
+  BorderRadiusKeyword,
+  ImageProps,
+  Key,
+  MaybeAllValuesShorthandProperty,
+  Ref,
+} from './components-shared.d.ts';
 
 /** @publicDocs */
 export type ComponentChildren = any;
@@ -60,6 +66,29 @@ export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
    * The image source URL (remote URL or local file resource). When loading or no src is provided, a placeholder is rendered. Ensure URLs are properly formatted and properly formatted.
    */
   src?: ImageProps['src'];
+  /**
+   * Border radius for the image corners.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `start-start inline-end end-end inline-start`
+   * - 3 values: `start-start inline end-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `base` means all corners have `base` radius
+   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
+   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   *
+   * Supports size keywords from the design system scale:
+   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
+   * - Special values: `max`, `none`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 declare global {
   interface HTMLElementTagNameMap {

From 31a4710312bd549d0c9b97d0bfa9f6d37223bd04 Mon Sep 17 00:00:00 2001
From: Ajanth Uthayan <ajanth.uthayan@shopify.com>
Date: Fri, 14 Aug 2026 14:01:26 -0400
Subject: [PATCH 2/3] Correct image border radius corner terminology

Assisted-By: devx/bd310388-3a75-41ab-8ca8-b7fa0e22c7e0
---
 .../surfaces/point-of-sale/components.d.ts    | 24 +++++++++----------
 .../point-of-sale/components/Image.d.ts       | 12 +++++-----
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
index 7204a08a39..75f94b1425 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
@@ -4201,15 +4201,15 @@ interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit' | 'alt'> {
    * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
    * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
    *
-   * - 4 values: `start-start inline-end end-end inline-start`
-   * - 3 values: `start-start inline end-end`
-   * - 2 values: `block inline`
+   * - 4 values: `start-start start-end end-end end-start`
+   * - 3 values: `start-start (start-end & end-start) end-end`
+   * - 2 values: `(start-start & end-end) (start-end & end-start)`
    *
    * For example:
    * - `base` means all corners have `base` radius
-   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
-   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
-   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`
+   * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
    * Supports size keywords from the design system scale:
    * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
@@ -7145,15 +7145,15 @@ interface Image {
    * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
    * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
    *
-   * - 4 values: `start-start inline-end end-end inline-start`
-   * - 3 values: `start-start inline end-end`
-   * - 2 values: `block inline`
+   * - 4 values: `start-start start-end end-end end-start`
+   * - 3 values: `start-start (start-end & end-start) end-end`
+   * - 2 values: `(start-start & end-end) (start-end & end-start)`
    *
    * For example:
    * - `base` means all corners have `base` radius
-   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
-   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
-   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`
+   * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
    * Supports size keywords from the design system scale:
    * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
index fc5f159eb9..91d2ce7893 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
@@ -72,15 +72,15 @@ export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
    * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
    * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:
    *
-   * - 4 values: `start-start inline-end end-end inline-start`
-   * - 3 values: `start-start inline end-end`
-   * - 2 values: `block inline`
+   * - 4 values: `start-start start-end end-end end-start`
+   * - 3 values: `start-start (start-end & end-start) end-end`
+   * - 2 values: `(start-start & end-end) (start-end & end-start)`
    *
    * For example:
    * - `base` means all corners have `base` radius
-   * - `base none` means start-start and end-end corners are `base`, inline-end and inline-start corners are `none`
-   * - `base none large` means start-start is `base`, inline-end and inline-start are `none`, end-end is `large`
-   * - `base none large small` means start-start is `base`, inline-end is `none`, end-end is `large`, inline-start is `small`
+   * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`
+   * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
+   * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
    * Supports size keywords from the design system scale:
    * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`

From af48fb1fc41dcaf7cb8cc3f886405ba4f3cbaaf1 Mon Sep 17 00:00:00 2001
From: Ajanth Uthayan <ajanth.uthayan@shopify.com>
Date: Wed, 19 Aug 2026 11:20:04 -0400
Subject: [PATCH 3/3] Remove duplicated border radius values

Assisted-By: devx/3102b0ac-6bc9-4efd-9954-fd7a371ab6f2
---
 .../src/surfaces/point-of-sale/components.d.ts            | 8 --------
 .../src/surfaces/point-of-sale/components/Image.d.ts      | 4 ----
 2 files changed, 12 deletions(-)

diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
index 75f94b1425..915a32f478 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts
@@ -4211,10 +4211,6 @@ interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit' | 'alt'> {
    * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
    * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
-   * Supports size keywords from the design system scale:
-   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
-   * - Special values: `max`, `none`
-   *
    * @default 'none'
    */
   borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
@@ -7155,10 +7151,6 @@ interface Image {
    * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
    * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
-   * Supports size keywords from the design system scale:
-   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
-   * - Special values: `max`, `none`
-   *
    * @default 'none'
    */
   borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
index 91d2ce7893..5970f66cf5 100644
--- a/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
+++ b/packages/ui-extensions/src/surfaces/point-of-sale/components/Image.d.ts
@@ -82,10 +82,6 @@ export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
    * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`
    * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`
    *
-   * Supports size keywords from the design system scale:
-   * - Size scale: `small-500`, `small-400`, `small-300`, `small-200`, `small-100`, `small`, `base`, `large`, `large-100`, `large-200`, `large-300`, `large-400`, `large-500`
-   * - Special values: `max`, `none`
-   *
    * @default 'none'
    */
   borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;