@shopify/ui-extensions 2026.1.2 → 2026.1.3

package/src/surfaces/customer-account/components/ChoiceList/examples/block-choice-variant.example.html

@@ -0,0 +1,47 @@
+<s-choice-list variant="block">
+  <s-choice defaultSelected value="yonge-dundas">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yonge-Dundas Square</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >1 Dundas St E, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">1.2 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="distillery">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Distillery District</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Mill St, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">4 km</s-text>
+    </s-stack>
+  </s-choice>
+  <s-choice value="yorkville">
+    <s-stack
+      direction="inline"
+      justifyContent="space-between"
+      alignItems="start"
+    >
+      <s-stack gap="none">
+        <s-text>Yorkville</s-text>
+        <s-text slot="secondary-content" type="small" color="subdued"
+          >55 Avenue Rd, Toronto ON</s-text
+        >
+      </s-stack>
+      <s-text color="subdued">6 km</s-text>
+    </s-stack>
+  </s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/grid-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list variant="grid">
+  <s-choice defaultSelected value="standard">Standard</s-choice>
+  <s-choice value="deluxe">Deluxe</s-choice>
+  <s-choice value="personalized">Personalized</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/inline-choice-variant.example.html

@@ -0,0 +1,6 @@
+<s-choice-list variant="inline">
+  <s-choice defaultSelected value="3.50">$3.50</s-choice>
+  <s-choice value="4.50">$4.50</s-choice>
+  <s-choice value="5.50">$5.50</s-choice>
+  <s-choice value="other">Other</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/ChoiceList/examples/list-choice-variant.example.html

@@ -0,0 +1,5 @@
+<s-choice-list>
+  <s-choice defaultSelected value="location-1">Yonge-Dundas Square</s-choice>
+  <s-choice value="location-2">Distillery District</s-choice>
+  <s-choice value="location-3">Yorkville</s-choice>
+</s-choice-list>

package/src/surfaces/customer-account/components/Clickable/examples/basic-clickable.example.html

@@ -0,0 +1,3 @@
+<s-clickable>
+  <s-product-thumbnail src="https://cdn.shopify.com/YOUR_IMAGE_HERE"></s-product-thumbnail>
+</s-clickable>

package/src/surfaces/customer-account/components/ClickableChip/examples/basic-clickable-chip.example.html

@@ -0,0 +1 @@
+<s-clickable-chip removable>Shipping insurance</s-clickable-chip>

package/src/surfaces/customer-account/components/ClipboardItem/examples/basic-clipboard-item.example.html

@@ -0,0 +1,2 @@
+<s-button commandFor="discount-code">Copy discount code</s-button>
+<s-clipboard-item id="discount-code" text="SAVE 25"></s-clipboard-item>

package/src/surfaces/customer-account/components/ConsentCheckbox/examples/basic-consent-checkbox.example.html

@@ -0,0 +1,5 @@
+<s-consent-checkbox
+  defaultChecked
+  label="Text me with news and offers"
+  policy="sms-marketing"
+></s-consent-checkbox>

package/src/surfaces/customer-account/components/ConsentPhoneField/examples/basic-consent-phone-field.example.html

@@ -0,0 +1,5 @@
+<s-consent-phone-field
+  label="Phone"
+  policy="sms-marketing"
+  defaultValue="587-746-7439"
+></s-consent-phone-field>

package/src/surfaces/customer-account/components/DateField/examples/basic-date-field.example.html

@@ -0,0 +1 @@
+<s-date-field label="Pickup date" defaultValue="2025-10-01"></s-date-field>

package/src/surfaces/customer-account/components/DatePicker/examples/basic-date-picker.example.html

@@ -0,0 +1 @@
+<s-date-picker defaultView="2025-10" defaultValue="2025-10-03"></s-date-picker>

package/src/surfaces/customer-account/components/Details/examples/basic-details.example.html

@@ -0,0 +1,6 @@
+<s-details defaultOpen>
+  <s-summary>Pickup instructions</s-summary>
+  <s-text>
+    Curbside pickup is at the back of the warehouse. Park in a stall and follow the signs.
+  </s-text>
+</s-details>

package/src/surfaces/customer-account/components/DropZone/examples/basic-drop-zone.example.html

@@ -0,0 +1 @@
+<s-drop-zone accept="image/*"></s-drop-zone>

package/src/surfaces/customer-account/components/EmailField/examples/basic-email-field.example.html

@@ -0,0 +1 @@
+<s-email-field label="Email" defaultValue="snowdevil@shopify.com"></s-email-field>

package/src/surfaces/customer-account/components/Form/examples/basic-form.example.html

@@ -0,0 +1,4 @@
+<s-form>
+  <s-text-field label="Email address" />
+  <s-button type="submit" variant="primary">Submit</s-button>
+</s-form>

package/src/surfaces/customer-account/components/Grid/examples/basic-grid.example.html

@@ -0,0 +1,11 @@
+<s-grid gridTemplateColumns="1fr auto" gap="base">
+  <s-grid-item gridColumn="span 2" border="base" borderStyle="dashed">
+    Plants for sale
+  </s-grid-item>
+  <s-grid-item border="base" borderStyle="dashed">
+    Pothos
+  </s-grid-item>
+  <s-grid-item border="base" borderStyle="dashed">
+    $25.00
+  </s-grid-item>
+</s-grid>

package/src/surfaces/customer-account/components/Heading/examples/basic-heading.example.html

@@ -0,0 +1 @@
+<s-heading>Contact</s-heading>

package/src/surfaces/customer-account/components/Icon/examples/basic-icon.example.html

@@ -0,0 +1,4 @@
+<s-icon type="store" />
+<s-icon type="star" />
+<s-icon type="settings" />
+<s-icon type="image" />

package/src/surfaces/customer-account/components/Image/examples/basic-image.example.html

@@ -0,0 +1 @@
+<s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" alt="Product image"></s-image>

package/src/surfaces/customer-account/components/Link/examples/basic-link.example.html

@@ -0,0 +1 @@
+<s-link href="https://www.shopify.com/ca/legal/privacy">Privacy policy</s-link>

package/src/surfaces/customer-account/components/Map/examples/basic-map.example.html

@@ -0,0 +1,3 @@
+<s-map apiKey="YOUR_API_KEY" latitude={51.5074} longitude={-0.1278}>
+  <s-map-marker latitude={51.5074} longitude={-0.1278}></s-map-marker>
+</s-map>

package/src/surfaces/customer-account/components/Map/examples/map-marker-graphic.example.html

@@ -0,0 +1,14 @@
+<s-map
+  apiKey="YOUR_API_KEY"
+  blockSize="400px"
+  inlineSize="400px"
+  latitude={37.7749}
+  longitude={-122.4194}
+>
+  <s-map-marker
+    latitude={37.7749}
+    longitude={-122.4194}
+  >
+    <s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" slot="graphic"></s-image>
+  </s-map-marker>
+</s-map>

package/src/surfaces/customer-account/components/Map/examples/map-marker-popover.example.html

@@ -0,0 +1,14 @@
+<s-map
+  apiKey="YOUR_API_KEY"
+  blockSize="400px"
+  inlineSize="400px"
+  latitude={37.7749}
+  longitude={-122.4194}
+>
+  <s-map-marker
+    latitude={37.7749}
+    longitude={-122.4194}
+    commandFor="popover-san-francisco"
+  ></s-map-marker>
+  <s-popover id="popover-san-francisco">San Francisco</s-popover>
+</s-map>

package/src/surfaces/customer-account/components/Modal/examples/basic-modal.example.html

@@ -0,0 +1,20 @@
+<s-button command="--show" commandfor="modal-1">Add Product</s-button>
+<s-modal id="modal-1" heading="Return Policy">
+  <s-paragraph>
+    We have a 30-day return policy, which means you have 30 days after receiving
+    your item to request a return.
+  </s-paragraph>
+  <s-paragraph>
+    To be eligible for a return, your item must be in the same condition that
+    you received it, unworn or unused, with tags, and in its original packaging.
+    You’ll also need the receipt or proof of purchase.
+  </s-paragraph>
+  <s-button
+    variant="primary"
+    command="--hide"
+    commandfor="modal-1"
+    slot="primary-action"
+  >
+    Close
+  </s-button>
+</s-modal>

package/src/surfaces/customer-account/components/MoneyField/examples/basic-money-field.example.html

@@ -0,0 +1 @@
+<s-money-field label="Price" defaultValue="9.99"></s-money-field>

package/src/surfaces/customer-account/components/NumberField/examples/basic-number-field.example.html

@@ -0,0 +1,8 @@
+<s-number-field
+  label="Quantity"
+  controls="stepper"
+  defaultValue="1"
+  step={1}
+  min={0}
+  max={100}
+></s-number-field>

package/src/surfaces/customer-account/components/OrderedList/examples/basic-ordered-list.example.html

@@ -0,0 +1,5 @@
+<s-ordered-list>
+  <s-list-item>Add items to your cart</s-list-item>
+  <s-list-item>Review your order details</s-list-item>
+  <s-list-item>Complete your purchase</s-list-item>
+</s-ordered-list>

package/src/surfaces/customer-account/components/Paragraph/examples/basic-paragraph.example.html

@@ -0,0 +1 @@
+<s-paragraph>Ship in 1-2 business days.</s-paragraph>

package/src/surfaces/customer-account/components/PasswordField/examples/basic-password-field.example.html

@@ -0,0 +1 @@
+<s-password-field label="Password" defaultValue="12345678"></s-password-field>

package/src/surfaces/customer-account/components/PaymentIcon/examples/basic-payment-icon.example.html

@@ -0,0 +1,7 @@
+<s-payment-icon type="paypal" />
+<s-payment-icon type="apple-pay" />
+<s-payment-icon type="mastercard" />
+<s-payment-icon type="shop-pay" />
+<s-payment-icon type="visa" />
+<s-payment-icon type="amex" />
+<s-payment-icon type="klarna" />

package/src/surfaces/customer-account/components/PhoneField/examples/basic-phone-field.example.html

@@ -0,0 +1,2 @@
+<s-phone-field label="Phone number" defaultValue="888-746-7439">
+</s-phone-field>

package/src/surfaces/customer-account/components/Popover/examples/basic-popover.example.html

@@ -0,0 +1,7 @@
+<s-button commandFor="popover-veteran-id">Open Popover</s-button>
+<s-popover id="popover-veteran-id">
+  <s-stack gap="base" padding="base" direction="inline">
+    <s-text-field label="Veteran ID"></s-text-field>
+    <s-button variant="primary">Validate</s-button>
+  </s-stack>
+</s-popover>

package/src/surfaces/customer-account/components/PressButton/examples/basic-press-button.example.html

@@ -0,0 +1 @@
+<s-press-button>Add gift wrapping</s-press-button>

package/src/surfaces/customer-account/components/ProductThumbnail/examples/basic-product-thumbnail.example.html

@@ -0,0 +1,4 @@
+<s-product-thumbnail
+  src="https://cdn.shopify.com/YOUR_IMAGE_HERE"
+  totalItems={2}
+></s-product-thumbnail>

package/src/surfaces/customer-account/components/Progress/examples/basic-progress.example.html

@@ -0,0 +1 @@
+<s-progress value={0.5}></s-progress>

package/src/surfaces/customer-account/components/QRCode/examples/basic-qr-code.example.html

@@ -0,0 +1,4 @@
+<s-qr-code content="https://shopify.com"></s-qr-code>
+<s-paragraph>
+  Scan to visit <s-link href="https://shopify.com">Shopify.com</s-link>
+</s-paragraph>

package/src/surfaces/{admin/components/QueryContainer/examples/default.jsx → customer-account/components/QueryContainer/examples/basic-query-container.example.html}

@@ -1,8 +1,8 @@
 <s-query-container>
   <s-box
     padding="@container (inline-size > 500px) large-500, none"
-    background="strong"
+    background="subdued"
   >
-    Padding is applied when the inline-size &gt; 500px
+    Padding is applied when the inline-size '>' 500px
   </s-box>
-</s-query-container>
+</s-query-container>

package/src/surfaces/customer-account/components/ScrollBox/examples/basic-scroll-box.example.html

@@ -0,0 +1,5 @@
+<s-scroll-box maxBlockSize="100px">
+  <s-box background="subdued" border="base" minBlockSize="50px"></s-box>
+  <s-box background="subdued" border="base" minBlockSize="50px"></s-box>
+  <s-box background="subdued" border="base" minBlockSize="50px"></s-box>
+</s-scroll-box>

package/src/surfaces/customer-account/components/Section.d.ts

@@ -18,11 +18,11 @@ export interface SectionProps extends IdProps {
 
 export interface SectionElementSlots {
   /**
-   * The primary action for the section. Accepts a single [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.
+   * The primary action for the section. Accepts a single [Button](/docs/api/checkout-ui-extensions/web-components/actions/button) element.
    */
   'primary-action'?: HTMLElement;
   /**
-   * The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.
+   * The secondary actions for the section. Accepts multiple [Button](/docs/api/checkout-ui-extensions/web-components/actions/button) elements.
    */
   'secondary-actions'?: HTMLElement;
 }

package/src/surfaces/customer-account/components/Select/examples/basic-select.example.html

@@ -0,0 +1,5 @@
+<s-select label="Country/region">
+  <s-option defaultSelected value="CA">Canada</s-option>
+  <s-option value="US">United States</s-option>
+  <s-option value="UK">United Kingdom</s-option>
+</s-select>

package/src/surfaces/customer-account/components/Sheet/examples/basic-sheet.example.html

@@ -0,0 +1,5 @@
+<!-- This component requires access to Customer Privacy API to be rendered. -->
+<s-button commandFor="consent-sheet">Open Sheet</s-button>
+<s-sheet id="consent-sheet" heading="Sheet" accessibilityLabel="A sheet with text content">
+  <s-text>Sheet Content</s-text>
+</s-sheet>

package/src/surfaces/customer-account/components/SkeletonParagraph/examples/basic-skeleton-paragraph.example.html

@@ -0,0 +1,2 @@
+<s-skeleton-paragraph></s-skeleton-paragraph>
+

package/src/surfaces/customer-account/components/Spinner/examples/basic-spinner.example.html

@@ -0,0 +1 @@
+<s-spinner></s-spinner>

package/src/surfaces/customer-account/components/Stack/examples/basic-stack.example.html

@@ -0,0 +1,22 @@
+<s-stack direction="inline" gap="base">
+  <s-image
+    src="https://cdn.shopify.com/plant-1"
+    alt="Areca palm in a gray pot"
+    inlineSize="auto"
+  />
+  <s-image
+    src="https://cdn.shopify.com/plant-2"
+    alt="Fiddle leaf fig in a gray pot"
+    inlineSize="auto"
+  />
+  <s-image
+    src="https://cdn.shopify.com/plant-3"
+    alt="Snake plant in a gray pot"
+    inlineSize="auto"
+  />
+  <s-image
+    src="https://cdn.shopify.com/plant-4"
+    alt="Monstera deliciosa in a gray pot"
+    inlineSize="auto"
+  />
+</s-stack>

package/src/surfaces/customer-account/components/Switch/examples/basic-switch.example.html

@@ -0,0 +1 @@
+<s-switch label="Shipping insurance"></s-switch>

package/src/surfaces/customer-account/components/Text/examples/basic-text.example.html

@@ -0,0 +1,3 @@
+<s-text type="small" color="subdued">
+  All transactions are secure and encrypted.
+</s-text>

package/src/surfaces/customer-account/components/TextArea/examples/basic-text-area.example.html

@@ -0,0 +1,5 @@
+<s-text-area
+  label="Gift message"
+  value="Hope you enjoy this gift!"
+  rows={3}
+></s-text-area>

package/src/surfaces/customer-account/components/TextField/examples/basic-text-field.example.html

@@ -0,0 +1,4 @@
+<s-text-field
+  label="First name (optional)"
+  defaultValue="Taylor"
+></s-text-field>

package/src/surfaces/customer-account/components/Time/examples/basic-time.example.html

@@ -0,0 +1 @@
+<s-time dateTime="2023-10-15">October 15, 2023</s-time>

package/src/surfaces/customer-account/components/Tooltip/examples/basic-tooltip.example.html

@@ -0,0 +1,9 @@
+<s-stack direction="inline" gap="small-400" alignItems="center">
+  <s-text color="subdued">2600 Portland Street SE</s-text>
+  <s-clickable interestFor="curbside-pickup-1">
+    <s-icon type="info-filled" />
+  </s-clickable>
+  <s-tooltip id="curbside-pickup-1">
+    Curbside pickup is at the back of the warehouse.
+  </s-tooltip>
+</s-stack>

package/src/surfaces/customer-account/components/URLField/examples/basic-url-field.example.html

@@ -0,0 +1 @@
+<s-url-field label="Website" defaultValue="https://shopify.com"></s-url-field>

package/src/surfaces/customer-account/components/UnorderedList/examples/basic-unordered-list.example.html

@@ -0,0 +1,5 @@
+<s-unordered-list>
+  <s-list-item>Free shipping on orders over $50</s-list-item>
+  <s-list-item>30-day money-back guarantee</s-list-item>
+  <s-list-item>Secure payment processing</s-list-item>
+</s-unordered-list>

package/src/surfaces/customer-account/preact/metafield.ts

@@ -12,6 +12,7 @@ interface MetafieldFilter {
 /**
  * Returns a single filtered `Metafield` or `undefined`.
  * @arg {MetafieldFilter} - filter the list of returned metafields to a single metafield
+ * @deprecated `useMetafield` is deprecated. Use `useAppMetafields` instead.
  */
 export function useMetafield(filters: MetafieldFilter): Metafield | undefined {
   const {namespace, key} = filters;

package/src/surfaces/customer-account/preact/metafields.ts

@@ -20,6 +20,7 @@ interface MetafieldsFilters {
  * Returns the current array of `metafields` applied to the checkout.
  * You can optionally filter the list.
  * @arg {MetafieldsFilters} - filter the list of returned metafields
+ * @deprecated `useMetafields` is deprecated. Use `useAppMetafields` instead.
  */
 export function useMetafields<
   Target extends RenderOrderStatusExtensionTarget = RenderOrderStatusExtensionTarget,

package/src/surfaces/point-of-sale/api/pin-pad-api.ts

@@ -4,7 +4,7 @@ export interface PinPadApiContent {
   /**
    * Shows a PIN pad to the user in a modal dialog. The `onSubmit` function is called when the PIN is submitted and should validate the PIN, returning `'accept'` or `'reject'`.
    *
-   * • **When accepted**: Modal dismisses and triggers the `onDismissed` callback—perform any post-validation navigation in this callback rather than in `onSubmit`.
+   * • **When accepted**: The modal dismisses and triggers the `onDismissed` callback—perform any post-validation navigation in this callback rather than in `onSubmit`.
    *
    * • **When rejected**: Displays the optional `errorMessage` and keeps the modal open.
    *

package/src/surfaces/point-of-sale/components/Button.d.ts

@@ -113,7 +113,7 @@ export interface ButtonJSXProps
    * - `primary`: Creates a prominent call-to-action button with high visual emphasis for the most important action on a screen.
    * - `secondary`: Provides a less prominent button appearance for supporting actions and secondary interactions.
    *
-   * @default 'auto' - the variant is automatically determined by the Button's context
+   * @default 'auto' - the variant is automatically determined by the button's context
    */
   variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary'>;
   /**

package/src/surfaces/point-of-sale/components/ChoiceList.d.ts

@@ -85,7 +85,7 @@ export interface ChoiceListJSXProps
    */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   /**
-   * The child elements to render within this component. Should be one or more Choice elements.
+   * The child elements to render within this component. Should be one or more choice elements.
    */
   children?: ComponentChildren;
 }

package/src/surfaces/point-of-sale/components/EmptyState.d.ts

@@ -38,7 +38,7 @@ export type HtmlElementTagNameProps<T> = T & HTMLElement;
 declare const tagName = 's-empty-state';
 export interface EmptyStateJSXProps extends Pick<EmptyStateProps, 'heading'> {
   /**
-   * The subheading of the EmptyState.
+   * The subheading of the empty state.
    */
   subheading?: string;
   /**
@@ -50,7 +50,7 @@ export interface EmptyStateJSXProps extends Pick<EmptyStateProps, 'heading'> {
    */
   secondaryActions?: ComponentChild;
   /**
-   * The graphic to display in the EmptyState. The only supported components is Icon, with a type of `alert-circle`, `search`, `info`, or `circle-info`.
+   * The graphic to display in the empty state. The only supported components is icon, with a type of `alert-circle`, `search`, `info`, or `circle-info`.
    */
   graphic?: ComponentChild;
 }

package/src/surfaces/point-of-sale/components/Link.d.ts

@@ -44,7 +44,7 @@ export interface LinkJSXProps extends Pick<LinkProps, 'id' | 'commandFor' | 'com
      */
     onClick?: (event: CallbackEvent<typeof tagName>) => void;
     /**
-     * The Link content.
+     * The link content.
      */
     children?: ComponentChildren;
 }

package/src/surfaces/point-of-sale/components/Stack.d.ts

@@ -134,46 +134,46 @@ export interface StackJSXProps extends PickedProps {
    */
   paddingInlineEnd?: PaddingKeyword | '';
   /**
-   * The block size of the Stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
+   * The block size of the stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
    *
    * Learn more about [block-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).
    * @default 'auto'
    */
   blockSize?: SizeUnitsOrAuto;
   /**
-   * The maximum block size constraint for the Stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
+   * The maximum block size constraint for the stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
    *
    * Learn more about [max-block-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).
    * @default 'none'
    */
   maxBlockSize?: SizeUnitsOrNone;
   /**
-   * The maximum inline size constraint for the Stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
+   * The maximum inline size constraint for the stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
    *
    * Learn more about [max-inline-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).
    * @default 'none'
    */
   maxInlineSize?: SizeUnitsOrNone;
   /**
-   * The minimum block size constraint for the Stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
+   * The minimum block size constraint for the stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
    *
    * Learn more about [min-block-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).
    * @default '0'
    */
   minBlockSize?: SizeUnits;
   /**
-   * The minimum inline size constraint for the Stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
+   * The minimum inline size constraint for the stack component. On mobile surfaces, avoid using percentage-based sizes as they don't behave as expected when placed within a scrollable container.
    *
    * Learn more about [min-inline-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).
    * @default '0'
    */
   minInlineSize?: SizeUnits;
   /**
-   * The alignment of the Stack component's children along the cross axis.
+   * The alignment of the stack component's children along the cross axis.
    */
   alignItems?: AlignItemsKeyword;
   /**
-   * The alignment of the Stack component along the cross axis.
+   * The alignment of the stack component along the cross axis.
    */
   alignContent?: AlignContentKeyword;
   /**
@@ -189,20 +189,20 @@ export interface StackJSXProps extends PickedProps {
    */
   columnGap?: SpacingKeyword | '';
   /**
-   * The direction in which children are placed within the Stack component using logical properties. Use `'block'` for vertical arrangement where children are placed along the block axis (typically top to bottom) without wrapping. Use `'inline'` for horizontal arrangement where children are placed along the inline axis (typically left to right) with automatic wrapping when space is insufficient.
+   * The direction in which children are placed within the stack component using logical properties. Use `'block'` for vertical arrangement where children are placed along the block axis (typically top to bottom) without wrapping. Use `'inline'` for horizontal arrangement where children are placed along the inline axis (typically left to right) with automatic wrapping when space is insufficient.
    *
    * @default 'block'
    */
   direction?: 'block' | 'inline';
   /**
-   * The inline size of the Stack component.
+   * The inline size of the stack component.
    *
    * Learn more about [inline-size on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size).
    * @default 'auto'
    */
   inlineSize?: SizeUnitsOrAuto;
   /**
-   * The alignment of the Stack component along the main axis.
+   * The alignment of the stack component along the main axis.
    *
    * Learn more about [justify-content on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
    * @default 'normal'

package/src/surfaces/point-of-sale/components/Text.d.ts

@@ -76,7 +76,7 @@ export interface TextJSXProps extends Pick<TextProps, 'id'> {
     'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'
   >;
   /**
-   * The Text content. Supports nested text elements.
+   * The text content. Supports nested text elements.
    */
   children?: ComponentChildren;
 }

package/src/surfaces/point-of-sale/components/TextField.d.ts

@@ -109,7 +109,7 @@ export interface TextFieldJSXProps
    */
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   /**
-   * The additional content to be displayed in the field. Commonly used to display clickable text or action elements. Only Button and Clickable components with text content only are supported in this slot. Use the `slot="accessory"` attribute to place elements in this area.
+   * The additional content to be displayed in the field. Commonly used to display clickable text or action elements. Only button and clickable components with text content only are supported in this slot. Use the `slot="accessory"` attribute to place elements in this area.
    */
   accessory?: ComponentChild;
 }