Document borderRadius for POS s-image

.changeset/quiet-images-curve.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Document the `borderRadius` prop on the POS `s-image` component.

packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-07/generated_docs_data_v2.json

@@ -7468,6 +7468,15 @@
           "isOptional": true,
           "defaultValue": "`''`"
         },
+        {
+          "filePath": "src/surfaces/point-of-sale/components.ts",
+          "syntaxKind": "PropertySignature",
+          "name": "borderRadius",
+          "value": "MaybeAllValuesShorthandProperty<BorderRadiusKeyword>",
+          "description": "The border radius for the image corners.\n\nSupports one to four flow-relative values in this order:\n\n- One value applies to all corners.\n- Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.\n- Three values apply to `start-start`, both inline corners, and `end-end`.\n- Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.\n\nUse values from `small-500` through `large-500`, `base`, `max`, or `none`.",
+          "isOptional": true,
+          "defaultValue": "'none'"
+        },
         {
           "filePath": "src/surfaces/point-of-sale/components.ts",
           "syntaxKind": "PropertySignature",
@@ -7503,7 +7512,16 @@
           "isOptional": true
         }
       ],
-      "value": "interface Image {\n  /**\n   * The displayed inline width of the image.\n   *\n   * - `fill`: the image will takes up 100% of the available inline size.\n   * - `auto`: the image will be displayed at its natural size.\n   *\n   * **Mobile surfaces:** Always wrap your image in a box with a set width and height.\n   * ScrollViews on mobile have a dynamic height, which can cause images to appear\n   * inconsistently without defined dimensions.\n   * @default 'fill'\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width\n   */\n  inlineSize?: 'fill' | 'auto';\n  /**\n   * The image source, which should be a remote URL.\n   *\n   * When the image is loading or no `src` is provided, a placeholder will be rendered.\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src\n   */\n  src?: string;\n  /** A unique identifier for the element. */\n  id?: string;\n  /**\n   * Determines how the content of the image is resized to fit its container.\n   * The image is positioned in the center of the container.\n   * @default 'contain'\n   * @see ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n   */\n  objectFit?: 'contain' | 'cover';\n  /**\n   * An alternative text description that describe the image for the reader to\n   * understand what it is about. It is extremely useful for both users using\n   * assistive technology and sighted users. A well written description\n   * provides people with visual impairments the ability to participate in\n   * consuming non-text content. When a screen readers encounters an `s-image`,\n   * the description is read and announced aloud. If an image fails to load,\n   * potentially due to a poor connection, the `alt` is displayed on\n   * screen instead. This has the benefit of letting a sighted buyer know an\n   * image was meant to load here, but as an alternative, they’re still able to\n   * consume the text content. Read\n   * [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4)\n   * to learn more.\n   * @default `''`\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt\n   */\n  alt?: string;\n}"
+      "value": "interface Image {\n  /**\n   * The border radius for the image corners.\n   *\n   * Supports one to four flow-relative values in this order:\n   *\n   * - One value applies to all corners.\n   * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.\n   * - Three values apply to `start-start`, both inline corners, and `end-end`.\n   * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.\n   *\n   * Use values from `small-500` through `large-500`, `base`, `max`, or `none`.\n   *\n   * @default 'none'\n   */\n  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;\n  /**\n   * The displayed inline width of the image.\n   *\n   * - `fill`: the image will takes up 100% of the available inline size.\n   * - `auto`: the image will be displayed at its natural size.\n   *\n   * **Mobile surfaces:** Always wrap your image in a box with a set width and height.\n   * ScrollViews on mobile have a dynamic height, which can cause images to appear\n   * inconsistently without defined dimensions.\n   * @default 'fill'\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width\n   */\n  inlineSize?: 'fill' | 'auto';\n  /**\n   * The image source, which should be a remote URL.\n   *\n   * When the image is loading or no `src` is provided, a placeholder will be rendered.\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src\n   */\n  src?: string;\n  /** A unique identifier for the element. */\n  id?: string;\n  /**\n   * Determines how the content of the image is resized to fit its container.\n   * The image is positioned in the center of the container.\n   * @default 'contain'\n   * @see ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\n   */\n  objectFit?: 'contain' | 'cover';\n  /**\n   * An alternative text description that describe the image for the reader to\n   * understand what it is about. It is extremely useful for both users using\n   * assistive technology and sighted users. A well written description\n   * provides people with visual impairments the ability to participate in\n   * consuming non-text content. When a screen readers encounters an `s-image`,\n   * the description is read and announced aloud. If an image fails to load,\n   * potentially due to a poor connection, the `alt` is displayed on\n   * screen instead. This has the benefit of letting a sighted buyer know an\n   * image was meant to load here, but as an alternative, they’re still able to\n   * consume the text content. Read\n   * [considerations when writing alternative text](https://www.shopify.com/ca/blog/image-alt-text#4)\n   * to learn more.\n   * @default `''`\n   * @see ://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt\n   */\n  alt?: string;\n}"
+    }
+  },
+  "BorderRadiusKeyword": {
+    "src/surfaces/point-of-sale/components.ts": {
+      "filePath": "src/surfaces/point-of-sale/components.ts",
+      "syntaxKind": "TypeAliasDeclaration",
+      "name": "BorderRadiusKeyword",
+      "value": "SizeKeyword | 'max' | 'none'",
+      "description": ""
     }
   },
   "PageSlots": {

packages/ui-extensions/src/surfaces/point-of-sale/components.d.ts

@@ -4172,6 +4172,21 @@ declare module 'preact' {
 
 declare const tagName$q = 's-image';
 interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit' | 'alt'> {
+  /**
+   * The border radius for the image corners.
+   *
+   * Supports one to four flow-relative values in this order:
+   *
+   * - One value applies to all corners.
+   * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.
+   * - Three values apply to `start-start`, both inline corners, and `end-end`.
+   * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.
+   *
+   * Use values from `small-500` through `large-500`, `base`, `max`, or `none`.
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
   /**
    * The displayed inline width of the image.
    *
@@ -7070,6 +7085,21 @@ interface TimePicker {
  * @publicDocs
  */
 interface Image {
+  /**
+   * The border radius for the image corners.
+   *
+   * Supports one to four flow-relative values in this order:
+   *
+   * - One value applies to all corners.
+   * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.
+   * - Three values apply to `start-start`, both inline corners, and `end-end`.
+   * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.
+   *
+   * Use values from `small-500` through `large-500`, `base`, `max`, or `none`.
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
   /**
    * The displayed inline width of the image.
    *

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;
@@ -47,6 +53,21 @@ export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T & HTML
 declare const tagName = 's-image';
 /** @publicDocs */
 export interface ImageJSXProps extends Pick<ImageProps, 'id' | 'objectFit'> {
+  /**
+   * The border radius for the image corners.
+   *
+   * Supports one to four flow-relative values in this order:
+   *
+   * - One value applies to all corners.
+   * - Two values apply to `start-start` and `end-end`, then `inline-end` and `inline-start`.
+   * - Three values apply to `start-start`, both inline corners, and `end-end`.
+   * - Four values apply to `start-start`, `inline-end`, `end-end`, and `inline-start`.
+   *
+   * Use values from `small-500` through `large-500`, `base`, `max`, or `none`.
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
   /**
    * Controls the displayed width of the image. Choose based on your layout requirements. For mobile interfaces, consider using `'fill'` with defined container dimensions to ensure consistent image display, as dynamic container heights can cause layout inconsistencies in scrollable views.
    *