Document borderRadius for POS s-image

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

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": "Border radius for the image corners.\n\n[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:\n\n- 4 values: `start-start start-end end-end end-start`\n- 3 values: `start-start (start-end & end-start) end-end`\n- 2 values: `(start-start & end-end) (start-end & end-start)`\n\nFor example:\n- `base` means all corners have `base` radius\n- `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`\n- `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`\n- `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`\n\nSupports size keywords from the design system scale:\n- 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`\n- Special values: `max`, `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 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  /**\n   * Border radius for the image corners.\n   *\n   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is\n   * supported. Note that, contrary to CSS, it uses flow-relative values and the order is:\n   *\n   * - 4 values: `start-start start-end end-end end-start`\n   * - 3 values: `start-start (start-end & end-start) end-end`\n   * - 2 values: `(start-start & end-end) (start-end & end-start)`\n   *\n   * For example:\n   * - `base` means all corners have `base` radius\n   * - `base none` means start-start and end-end corners are `base`, start-end and end-start corners are `none`\n   * - `base none large` means start-start is `base`, start-end and end-start are `none`, end-end is `large`\n   * - `base none large small` means start-start is `base`, start-end is `none`, end-end is `large`, end-start is `small`\n   *\n   * Supports size keywords from the design system scale:\n   * - 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`\n   * - Special values: `max`, `none`\n   *\n   * @default 'none'\n   */\n  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;\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

@@ -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 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`, 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`
+   * - 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 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`, 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`
+   * - Special values: `max`, `none`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 
 /**

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 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`, 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`
+   * - Special values: `max`, `none`
+   *
+   * @default 'none'
+   */
+  borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
 }
 declare global {
   interface HTMLElementTagNameMap {