@shopify/ui-extensions 2025.10.0-rc.40 → 2025.10.0-rc.41

package/src/surfaces/checkout/components/MapMarker.d.ts

@@ -9,7 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {MapMarkerProps$1} from './components-shared.d.ts';
-import { ReactNode } from 'react';
 
 /**
  * Used when an element does not have children.
@@ -19,6 +18,12 @@ export interface BaseElementProps<TClass = HTMLElement> {
     ref?: preact.Ref<TClass>;
     slot?: Lowercase<string>;
 }
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
@@ -40,14 +45,6 @@ export interface MapMarkerElementEvents {
      */
     click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface MapMarkerSlots {
-    /**
-     * The graphic to use as the marker.
-     *
-     * If unset, it will default to the provider’s default marker.
-     */
-    graphic?: ReactNode;
-}
 export interface MapMarkerElementSlots {
     /**
      * The graphic to use as the marker.
@@ -56,7 +53,7 @@ export interface MapMarkerElementSlots {
      */
     graphic?: HTMLElement;
 }
-export interface MapMarkerElement extends MapMarkerElementProps, MapMarkerSlots, Omit<HTMLElement, 'id' | 'onclick'> {
+export interface MapMarkerElement extends MapMarkerElementProps, Omit<HTMLElement, 'id' | 'onclick'> {
     onclick: MapMarkerEvents['onClick'];
 }
 export interface MapMarkerProps extends MapMarkerElementProps, MapMarkerEvents {
@@ -69,9 +66,9 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: MapMarkerProps & BaseElementProps<MapMarkerElement>;
+            [tagName]: MapMarkerProps & BaseElementPropsWithChildren<MapMarkerElement>;
         }
     }
 }
 
-export type { MapMarkerElement, MapMarkerElementEvents, MapMarkerElementProps, MapMarkerElementSlots, MapMarkerEvents, MapMarkerProps, MapMarkerSlots };
+export type { MapMarkerElement, MapMarkerElementEvents, MapMarkerElementProps, MapMarkerElementSlots, MapMarkerEvents, MapMarkerProps };

package/src/surfaces/checkout/components/Modal.d.ts

@@ -9,7 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {ModalProps$1} from './components-shared.d.ts';
-import { ReactNode } from 'react';
 
 /**
  * Used when an element does not have children.
@@ -36,16 +35,6 @@ declare const tagName = "s-modal";
 export interface ModalElementProps extends Pick<ModalProps$1, 'accessibilityLabel' | 'heading' | 'id' | 'padding' | 'size'> {
     size?: Extract<ModalProps$1['size'], 'small-100' | 'small' | 'base' | 'large-100' | 'large' | 'max'>;
 }
-export interface ModalSlots extends Pick<ModalProps$1, 'primaryAction' | 'secondaryActions'> {
-    /**
-     * The primary action to perform, provided as a button type element.
-     */
-    primaryAction?: ReactNode;
-    /**
-     * The secondary actions to perform, provided as button type elements.
-     */
-    secondaryActions?: ReactNode;
-}
 export interface ModalElementSlots {
     /**
      * The primary action to perform, provided as a button type element.
@@ -56,9 +45,19 @@ export interface ModalElementSlots {
      */
     'secondary-actions'?: HTMLElement;
 }
-export interface ModalEvents extends Pick<ModalProps$1, 'onHide' | 'onShow'> {
+export interface ModalEvents extends Pick<ModalProps$1, 'onAfterHide' | 'onAfterShow' | 'onHide' | 'onShow'> {
+}
+export interface ModalElementMethods extends Pick<ModalProps$1, 'hideOverlay'> {
 }
 export interface ModalElementEvents {
+    /**
+     * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
+     */
+    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
+     */
+    aftershow?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
      * Callback fired after the overlay is hidden.
      */
@@ -68,11 +67,13 @@ export interface ModalElementEvents {
      */
     show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface ModalElement extends ModalElementProps, ModalSlots, Omit<HTMLElement, 'id'> {
+export interface ModalElement extends ModalElementProps, ModalElementMethods, Omit<HTMLElement, 'id'> {
+    onafterhide: ModalEvents['onAfterHide'];
+    onaftershow: ModalEvents['onAfterShow'];
     onhide: ModalEvents['onHide'];
     onshow: ModalEvents['onShow'];
 }
-export interface ModalProps extends ModalElementProps, ModalSlots, ModalEvents {
+export interface ModalProps extends ModalElementProps, ModalEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -87,4 +88,4 @@ declare module 'preact' {
     }
 }
 
-export type { ModalElement, ModalElementEvents, ModalElementProps, ModalElementSlots, ModalProps, ModalSlots };
+export type { ModalElement, ModalElementEvents, ModalElementProps, ModalElementSlots, ModalProps };

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

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

package/{build/ts/surfaces/customer-account/components/UrlField.d.ts → src/surfaces/checkout/components/MoneyField.d.ts}

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {URLFieldProps} from './components-shared.d.ts';
+import type {MoneyFieldProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -25,16 +25,12 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
     (event: CallbackEvent<TTagName, TEvent>): void;
 }) | null;
 
-declare const tagName = "s-url-field";
-export interface UrlFieldElementProps extends Pick<URLFieldProps, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength'
-/** @todo: implement `minLength` */
- | 'name'
-/** @todo: implement `placeholder` */
- | 'readOnly' | 'required' | 'value'> {
+declare const tagName = "s-money-field";
+export interface MoneyFieldElementProps extends Pick<MoneyFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'readOnly' | 'required' | 'step' | 'value'> {
 }
-export interface UrlFieldEvents extends Pick<URLFieldProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+export interface MoneyFieldEvents extends Pick<MoneyFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
 }
-export interface UrlFieldElementEvents {
+export interface MoneyFieldElementEvents {
     /**
      * Callback when the element loses focus.
      *
@@ -60,25 +56,25 @@ export interface UrlFieldElementEvents {
      */
     input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface UrlFieldElement extends UrlFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
-    onblur: UrlFieldEvents['onBlur'];
-    onchange: UrlFieldEvents['onChange'];
-    onfocus: UrlFieldEvents['onFocus'];
-    oninput: UrlFieldEvents['onInput'];
+export interface MoneyFieldElement extends MoneyFieldElementProps {
+    onblur: MoneyFieldEvents['onBlur'];
+    onchange: MoneyFieldEvents['onChange'];
+    onfocus: MoneyFieldEvents['onFocus'];
+    oninput: MoneyFieldEvents['onInput'];
 }
-export interface UrlFieldProps extends UrlFieldElementProps, UrlFieldEvents {
+export interface MoneyFieldProps extends MoneyFieldElementProps, MoneyFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: UrlFieldElement;
+        [tagName]: MoneyFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: UrlFieldProps & BaseElementProps<UrlFieldElement>;
+            [tagName]: MoneyFieldProps & BaseElementProps<MoneyFieldElement>;
         }
     }
 }
 
-export type { UrlFieldElement, UrlFieldElementEvents, UrlFieldElementProps, UrlFieldEvents, UrlFieldProps };
+export type { MoneyFieldElement, MoneyFieldElementEvents, MoneyFieldElementProps, MoneyFieldEvents, MoneyFieldProps };

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

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

package/src/surfaces/checkout/components/PhoneField.d.ts

@@ -9,7 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {PhoneFieldProps$1} from './components-shared.d.ts';
-import { ReactNode } from 'react';
 
 /**
  * Used when an element does not have children.
@@ -19,6 +18,12 @@ export interface BaseElementProps<TClass = HTMLElement> {
     ref?: preact.Ref<TClass>;
     slot?: Lowercase<string>;
 }
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
@@ -62,13 +67,6 @@ export interface PhoneFieldElementEvents {
      */
     input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface PhoneFieldSlots extends Pick<PhoneFieldProps$1, 'accessory'> {
-    /**
-     * Additional content to be displayed in the field.
-     * Commonly used to display an icon that activates a tooltip providing more information.
-     */
-    accessory?: ReactNode;
-}
 export interface PhoneFieldElementSlots {
     /**
      * Additional content to be displayed in the field.
@@ -76,13 +74,13 @@ export interface PhoneFieldElementSlots {
      */
     accessory?: HTMLElement;
 }
-export interface PhoneFieldElement extends PhoneFieldElementProps, PhoneFieldSlots, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+export interface PhoneFieldElement extends PhoneFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
     onblur: PhoneFieldEvents['onBlur'];
     onchange: PhoneFieldEvents['onChange'];
     onfocus: PhoneFieldEvents['onFocus'];
     oninput: PhoneFieldEvents['onInput'];
 }
-export interface PhoneFieldProps extends PhoneFieldElementProps, PhoneFieldSlots, PhoneFieldEvents {
+export interface PhoneFieldProps extends PhoneFieldElementProps, PhoneFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -92,9 +90,9 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: PhoneFieldProps & BaseElementProps<PhoneFieldElement>;
+            [tagName]: PhoneFieldProps & BaseElementPropsWithChildren<PhoneFieldElement>;
         }
     }
 }
 
-export type { PhoneFieldElement, PhoneFieldElementEvents, PhoneFieldElementProps, PhoneFieldElementSlots, PhoneFieldEvents, PhoneFieldProps, PhoneFieldSlots };
+export type { PhoneFieldElement, PhoneFieldElementEvents, PhoneFieldElementProps, PhoneFieldElementSlots, PhoneFieldEvents, PhoneFieldProps };

package/src/surfaces/checkout/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/checkout/components/Popover.d.ts

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {PopoverProps$1} from './components-shared.d.ts';
+import type {PopoverProps$1,SizeUnitsOrAuto, SizeUnitsOrNone, SizeUnits} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -32,7 +32,55 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
 }) | null;
 
 declare const tagName = "s-popover";
-export interface PopoverElementProps extends Pick<PopoverProps$1, 'blockSize' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize'> {
+export interface PopoverElementProps extends Pick<PopoverProps$1, 'id'> {
+    /**
+     * Adjust the block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+     *
+     * @default 'auto'
+     */
+    blockSize?: SizeUnitsOrAuto;
+    /**
+     * Adjust the inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+     *
+     * @default 'auto'
+     */
+    inlineSize?: SizeUnitsOrAuto;
+    /**
+     * Adjust the maximum block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+     *
+     * @default 'none'
+     */
+    maxBlockSize?: SizeUnitsOrNone;
+    /**
+     * Adjust the maximum inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+     *
+     * @default 'none'
+     */
+    maxInlineSize?: SizeUnitsOrNone;
+    /**
+     * Adjust the minimum block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+     *
+     * @default '0'
+     */
+    minBlockSize?: SizeUnits;
+    /**
+     * Adjust the minimum inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+     *
+     * @default '0'
+     */
+    minInlineSize?: SizeUnits;
 }
 export interface PopoverEvents extends Pick<PopoverProps$1, 'onHide' | 'onShow'> {
 }

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

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

package/{build/ts/surfaces/checkout/components/Select.d.ts → src/surfaces/checkout/components/PressButton.d.ts}

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {SelectProps$1} from './components-shared.d.ts';
+import type {PressButtonProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -31,49 +31,49 @@ export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap,
     (event: CallbackEvent<TTagName, TEvent>): void;
 }) | null;
 
-declare const tagName = "s-select";
-export interface SelectElementProps extends Pick<SelectProps$1, 'autocomplete' | 'disabled' | 'error' | 'id' | 'label' | 'name' | 'placeholder' | 'required' | 'value'> {
+declare const tagName = "s-press-button";
+export interface PressButtonElementProps extends Pick<PressButtonProps$1, 'accessibilityLabel' | 'id' | 'inlineSize' | 'lang' | 'disabled' | 'loading' | 'pressed' | 'defaultPressed'> {
 }
-export interface SelectEvents extends Pick<SelectProps$1, 'onBlur' | 'onChange' | 'onFocus'> {
+export interface PressButtonEvents extends Pick<PressButtonProps$1, 'onClick' | 'onBlur' | 'onFocus'> {
 }
-export interface SelectElementEvents {
+export interface PressButtonElementEvents {
     /**
-     * Callback when the element loses focus.
+     * Callback when the button is activated.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
      */
-    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
-     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     * Callback when the button has lost focus.
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
      */
-    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
-     * Callback when the element receives focus.
+     * Callback when the button has received focus.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
      */
     focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface SelectElement extends SelectElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus'> {
-    onblur: SelectEvents['onBlur'];
-    onchange: SelectEvents['onChange'];
-    onfocus: SelectEvents['onFocus'];
+export interface PressButtonElement extends PressButtonElementProps, Omit<HTMLElement, 'children' | 'lang' | 'id' | 'onblur' | 'onclick' | 'onfocus'> {
+    onblur: PressButtonEvents['onBlur'];
+    onclick: PressButtonEvents['onClick'];
+    onfocus: PressButtonEvents['onFocus'];
 }
-export interface SelectProps extends SelectElementProps, SelectEvents {
+export interface PressButtonProps extends PressButtonElementProps, PressButtonEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: SelectElement;
+        [tagName]: PressButtonElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: SelectProps & BaseElementPropsWithChildren<SelectElement>;
+            [tagName]: PressButtonProps & BaseElementPropsWithChildren<PressButtonElement>;
         }
     }
 }
 
-export type { SelectElement, SelectElementEvents, SelectElementProps, SelectEvents, SelectProps };
+export type { PressButtonElement, PressButtonElementEvents, PressButtonElementProps, PressButtonEvents, PressButtonProps };

package/src/surfaces/checkout/components/ProductThumbnail/examples/{basic-productthumbnail.example.html → basic-product-thumbnail.example.html}

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

package/src/surfaces/checkout/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/checkout/components/Sheet.d.ts

@@ -9,7 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {SheetProps$1} from './components-shared.d.ts';
-import { ReactNode } from 'react';
 
 /**
  * Used when an element does not have children.
@@ -28,6 +27,9 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
+    (event: CallbackEvent<TTagName, TEvent>): void;
+}) | null;
 
 declare const tagName = "s-sheet";
 export interface SheetElementProps extends Pick<SheetProps$1, 'defaultOpen' | 'heading' | 'id'> {
@@ -40,27 +42,25 @@ export interface SheetElementProps extends Pick<SheetProps$1, 'defaultOpen' | 'h
      */
     accessibilityLabel?: string;
 }
-export interface SheetEvents extends Pick<SheetProps$1, 'onHide' | 'onShow' | 'onAfterHide' | 'onAfterShow'> {
+export interface SheetEvents extends Pick<SheetProps$1, 'onAfterHide' | 'onAfterShow' | 'onHide' | 'onShow'> {
 }
 export interface SheetElementEvents {
     /**
-     * Callback fired after the overlay is hidden.
+     * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
      */
-    hide?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
-     * Callback fired after the overlay is shown.
+     * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
      */
-    show?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-}
-export interface SheetSlots {
+    aftershow?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
-     * The primary action to perform, provided as a button type element.
+     * Callback fired after the overlay is hidden.
      */
-    primaryAction?: ReactNode;
+    hide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
     /**
-     * The secondary actions to perform, provided as a button type element.
+     * Callback fired after the overlay is shown.
      */
-    secondaryActions?: ReactNode;
+    show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
 export interface SheetElementSlots {
     /**
@@ -72,11 +72,17 @@ export interface SheetElementSlots {
      */
     'secondary-actions'?: HTMLElement;
 }
-export interface SheetElement extends SheetElementProps, SheetSlots, Omit<HTMLElement, 'id'> {
+export interface SheetElementMethods extends Pick<SheetProps$1, 'hideOverlay'> {
+}
+export interface SheetElement extends SheetElementProps, SheetElementMethods, Omit<HTMLElement, 'id'> {
+    afterhide: SheetEvents['onAfterHide'];
+    aftershow: SheetEvents['onAfterShow'];
     onhide: SheetEvents['onHide'];
     onshow: SheetEvents['onShow'];
+    onafterhide: SheetEvents['onAfterHide'];
+    onaftershow: SheetEvents['onAfterShow'];
 }
-export interface SheetProps extends SheetElementProps, SheetEvents, SheetSlots {
+export interface SheetProps extends SheetElementProps, SheetEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -91,4 +97,4 @@ declare module 'preact' {
     }
 }
 
-export type { SheetElement, SheetElementEvents, SheetElementProps, SheetElementSlots, SheetEvents, SheetProps, SheetSlots };
+export type { SheetElement, SheetElementEvents, SheetElementProps, SheetElementSlots, SheetEvents, SheetProps };

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

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

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

@@ -2,17 +2,21 @@
   <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/checkout/components/Stack.d.ts

@@ -8,7 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {StackProps$1,MaybeAllValuesShorthandProperty,BorderSizeKeyword, BorderStyleKeyword,ColorKeyword} from './components-shared.d.ts';
+import type {StackProps$1,MaybeAllValuesShorthandProperty, MaybeResponsive,BorderSizeKeyword, BorderStyleKeyword,ColorKeyword} from './components-shared.d.ts';
 
 export type ReducedBorderSizeKeyword = Extract<BorderSizeKeyword, 'none' | 'base' | 'large' | 'large-100' | 'large-200'>;
 export type ReducedColorKeyword = Extract<ColorKeyword, 'base'>;
@@ -35,9 +35,9 @@ export interface StackProps extends Pick<StackProps$1, 'accessibilityLabel' | 'a
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<StackProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
-    alignContent?: Extract<StackProps$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
-    alignItems?: Extract<StackProps$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>;
-    justifyContent?: Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
+    alignContent?: MaybeResponsive<Extract<StackProps$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>;
+    alignItems?: MaybeResponsive<Extract<StackProps$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>>;
+    justifyContent?: MaybeResponsive<Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>;
 }
 export interface StackElement extends StackProps, Omit<HTMLElement, 'id'> {
 }

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

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

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

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

package/src/surfaces/checkout/components/TextField.d.ts

@@ -8,8 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {IconProps$1, TextFieldProps$1,IconType} from './components-shared.d.ts';
-import { ReactNode } from 'react';
+import type {IconProps$1, TextFieldProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -20,11 +19,12 @@ export interface BaseElementProps<TClass = HTMLElement> {
     slot?: Lowercase<string>;
 }
 /**
- * The list of available icon types.
- *
- * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ * Used when an element has children.
  */
-export type ReducedIconTypes = Extract<IconType, 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'>;
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+export type ReducedIconTypes = 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x';
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };
@@ -90,13 +90,6 @@ export interface TextFieldElementEvents {
      */
     input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
-export interface TextFieldSlots {
-    /**
-     * Additional content to be displayed in the field.
-     * Commonly used to display an icon that activates a tooltip providing more information.
-     */
-    accessory?: ReactNode;
-}
 export interface TextFieldElementSlots {
     /**
      * Additional content to be displayed in the field.
@@ -104,13 +97,13 @@ export interface TextFieldElementSlots {
      */
     accessory?: HTMLElement;
 }
-export interface TextFieldElement extends TextFieldElementProps, TextFieldSlots, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+export interface TextFieldElement extends TextFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
     onblur: TextFieldEvents['onBlur'];
     onchange: TextFieldEvents['onChange'];
     onfocus: TextFieldEvents['onFocus'];
     oninput: TextFieldEvents['onInput'];
 }
-export interface TextFieldProps extends TextFieldElementProps, TextFieldSlots, TextFieldEvents {
+export interface TextFieldProps extends TextFieldElementProps, TextFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -120,9 +113,9 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: TextFieldProps & BaseElementProps<TextFieldElement>;
+            [tagName]: TextFieldProps & BaseElementPropsWithChildren<TextFieldElement>;
         }
     }
 }
 
-export type { TextFieldElement, TextFieldElementEvents, TextFieldElementProps, TextFieldElementSlots, TextFieldEvents, TextFieldProps, TextFieldSlots };
+export type { TextFieldElement, TextFieldElementEvents, TextFieldElementProps, TextFieldElementSlots, TextFieldEvents, TextFieldProps };