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

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/Spinner/examples/basic-spinner.example.html

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

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/TextArea/examples/basic-text-area.example.html

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

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 };

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

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

package/src/surfaces/checkout/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/{build/ts/surfaces/checkout/components/Option.d.ts → src/surfaces/checkout/components/Tooltip.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 {OptionProps$1} from './components-shared.d.ts';
+import type {TooltipProps$1} from './components-shared.d.ts';
 
 /**
  * Used when an element does not have children.
@@ -25,22 +25,24 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends Base
     children?: preact.ComponentChildren;
 }
 
-declare const tagName = "s-option";
-export interface OptionProps extends Pick<OptionProps$1, 'accessibilityLabel' | 'defaultSelected' | 'disabled' | 'id' | 'selected' | 'value'> {
+declare const tagName = "s-tooltip";
+export interface TooltipElementProps extends Pick<TooltipProps$1, 'id'> {
 }
-export interface OptionElement extends OptionProps, Omit<HTMLElement, 'id'> {
+export interface TooltipElement extends TooltipElementProps {
+}
+export interface TooltipProps extends TooltipElementProps {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName]: OptionElement;
+        [tagName]: TooltipElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: OptionProps & BaseElementPropsWithChildren<OptionElement>;
+            [tagName]: TooltipProps & BaseElementPropsWithChildren<TooltipElement>;
         }
     }
 }
 
-export type { OptionElement, OptionProps };
+export type { TooltipElement, TooltipElementProps, TooltipProps };