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

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

@@ -0,0 +1,77 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* eslint-disable import-x/namespace */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {DatePickerProps$1} from './components-shared.d.ts';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+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-date-picker";
+export interface DatePickerElementProps extends Pick<DatePickerProps$1, 'allow' | 'allowDays' | 'defaultValue' | 'defaultView' | 'disabled' | 'disallow' | 'disallowDays' | 'id' | 'name' | 'type' | 'value' | 'view'> {
+}
+export interface DatePickerEvents extends Pick<DatePickerProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onViewChange'> {
+}
+export interface DatePickerElementEvents {
+    /**
+     * Callback when the element loses focus.
+     */
+    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     */
+    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     */
+    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the view changes.
+     */
+    viewChange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface DatePickerElement extends DatePickerElementProps, Omit<DatePickerEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput'> {
+    onblur: DatePickerEvents['onBlur'];
+    onchange: DatePickerEvents['onChange'];
+    onfocus: DatePickerEvents['onFocus'];
+    oninput: DatePickerEvents['onInput'];
+    onviewchange: DatePickerEvents['onViewChange'];
+}
+export interface DatePickerProps extends DatePickerElementProps, DatePickerEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: DatePickerElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: DatePickerProps & BaseElementProps<DatePickerElement>;
+        }
+    }
+}
+
+export type { DatePickerElement, DatePickerElementEvents, DatePickerElementProps, DatePickerEvents, DatePickerProps };

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

@@ -1,4 +1,4 @@
-<s-form onSubmit="console.log('Form submitted'); return false;">
+<s-form>
   <s-text-field label="Email address" />
-  <s-button accessibilityRole="submit">Submit</s-button>
+  <s-button type="submit" variant="primary">Submit</s-button>
 </s-form>

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

@@ -41,6 +41,9 @@ export interface FormEvents extends Pick<FormProps$1, 'onSubmit'> {
     onSubmit?: () => void;
 }
 export interface FormElementEvents {
+    /**
+     * A callback that is run when the form is submitted.
+     */
     submit?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
 }
 export interface FormElement extends FormElementProps, Omit<HTMLElement, 'id' | 'onsubmit'> {

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

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

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

@@ -18,7 +18,13 @@ export interface BaseElementProps<TClass = HTMLElement> {
     ref?: preact.Ref<TClass>;
     slot?: Lowercase<string>;
 }
-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';
+/**
+ * Used as the single source of truth for checkout icon types.
+ *
+ * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ */
+declare const CHECKOUT_AVAILABLE_ICONS: readonly ["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 ReducedIconTypes = (typeof CHECKOUT_AVAILABLE_ICONS)[number];
 
 declare const tagName = "s-icon";
 export interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {

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

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

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

@@ -1,3 +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 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/checkout/components/MoneyField/examples/basic-money-field.example.html

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

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

@@ -0,0 +1,46 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* 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';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+declare const tagName = "s-option";
+export interface OptionProps extends Pick<OptionProps$1, 'accessibilityLabel' | 'defaultSelected' | 'disabled' | 'id' | 'selected' | 'value'> {
+}
+export interface OptionElement extends OptionProps, Omit<HTMLElement, 'id'> {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: OptionElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: OptionProps & BaseElementPropsWithChildren<OptionElement>;
+        }
+    }
+}
+
+export type { OptionElement, OptionProps };

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

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

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

@@ -0,0 +1,93 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* eslint-disable import-x/namespace */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {PasswordFieldProps$1} from './components-shared.d.ts';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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];
+};
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
+    (event: CallbackEvent<TTagName, TEvent>): void;
+}) | null;
+
+declare const tagName = "s-password-field";
+export interface PasswordFieldElementProps extends Pick<PasswordFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'name' | 'readOnly' | 'required' | 'value'> {
+}
+export interface PasswordFieldEvents extends Pick<PasswordFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+export interface PasswordFieldElementEvents {
+    /**
+     * Callback when the element loses focus.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+     */
+    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
+     */
+    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+     */
+    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface PasswordFieldElementSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: HTMLElement;
+}
+export interface PasswordFieldElement extends PasswordFieldProps, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+    onblur: PasswordFieldEvents['onBlur'];
+    onchange: PasswordFieldEvents['onChange'];
+    onfocus: PasswordFieldEvents['onFocus'];
+    oninput: PasswordFieldEvents['onInput'];
+}
+export interface PasswordFieldProps extends PasswordFieldElementProps, PasswordFieldEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: PasswordFieldElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: PasswordFieldProps & BaseElementPropsWithChildren<PasswordFieldElement>;
+        }
+    }
+}
+
+export type { PasswordFieldElement, PasswordFieldElementEvents, PasswordFieldElementProps, PasswordFieldElementSlots, PasswordFieldEvents, PasswordFieldProps };

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

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

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

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

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

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

package/src/surfaces/checkout/components/QueryContainer/examples/basic-query-container.example.html

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

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

@@ -0,0 +1,48 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* eslint-disable import-x/namespace */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
+/// <reference lib="DOM" />
+import type {QueryContainerProps$1} from './components-shared.d.ts';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    ref?: preact.Ref<TClass>;
+    slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
+    children?: preact.ComponentChildren;
+}
+
+declare const tagName = "s-query-container";
+export interface QueryContainerElementProps extends Pick<QueryContainerProps$1, 'containerName' | 'id'> {
+}
+export interface QueryContainerElement extends QueryContainerElementProps, Omit<HTMLElement, 'id'> {
+}
+export interface QueryContainerProps extends QueryContainerElementProps {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: QueryContainerElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: QueryContainerProps & BaseElementPropsWithChildren<QueryContainerElement>;
+        }
+    }
+}
+
+export type { QueryContainerElement, QueryContainerElementProps, QueryContainerProps };

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

@@ -0,0 +1,79 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* 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';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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];
+};
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
+    (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'> {
+}
+export interface SelectEvents extends Pick<SelectProps$1, 'onBlur' | 'onChange' | 'onFocus'> {
+}
+export interface SelectElementEvents {
+    /**
+     * Callback when the element loses focus.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+     */
+    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives 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 SelectProps extends SelectElementProps, SelectEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: SelectElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: SelectProps & BaseElementPropsWithChildren<SelectElement>;
+        }
+    }
+}
+
+export type { SelectElement, SelectElementEvents, SelectElementProps, SelectEvents, SelectProps };

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

@@ -1,22 +1,6 @@
 <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-image src="https://cdn.shopify.com/plant-1" alt="Areca palm in a gray pot" inlineSize="auto"></s-image>
+  <s-image src="https://cdn.shopify.com/plant-2" alt="Fiddle leaf fig in a gray pot" inlineSize="auto"></s-image>
+  <s-image src="https://cdn.shopify.com/plant-3" alt="Snake plant in a gray pot" inlineSize="auto"></s-image>
+  <s-image src="https://cdn.shopify.com/plant-4" alt="Monstera deliciosa in a gray pot" inlineSize="auto"></s-image>
 </s-stack>

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

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

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

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

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

@@ -24,7 +24,13 @@ export interface BaseElementProps<TClass = HTMLElement> {
 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';
+/**
+ * Used as the single source of truth for checkout icon types.
+ *
+ * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
+ */
+declare const CHECKOUT_AVAILABLE_ICONS: readonly ["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 ReducedIconTypes = (typeof CHECKOUT_AVAILABLE_ICONS)[number];
 export type CallbackEvent<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = TEvent & {
     currentTarget: HTMLElementTagNameMap[TTagName];
 };

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

@@ -0,0 +1,93 @@
+/** VERSION: 0.0.0 **/
+/* eslint-disable import-x/extensions */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable line-comment-position */
+/* eslint-disable @typescript-eslint/unified-signatures */
+/* eslint-disable no-var */
+/* 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';
+
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+    key?: preact.Key;
+    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];
+};
+export type CallbackEventListener<TTagName extends keyof HTMLElementTagNameMap, TEvent extends Event = Event> = (EventListener & {
+    (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' | 'minLength' | 'name' | 'readOnly' | 'required' | 'value'> {
+}
+export interface UrlFieldEvents extends Pick<URLFieldProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+export interface UrlFieldElementEvents {
+    /**
+     * Callback when the element loses focus.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+     */
+    blur?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the element receives focus.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
+     */
+    focus?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the user makes any changes in the field.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+     */
+    input?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface UrlFieldElementSlots {
+    /**
+     * Additional content to be displayed in the field.
+     * Commonly used to display an icon that activates a tooltip providing more information.
+     */
+    accessory?: HTMLElement;
+}
+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 UrlFieldProps extends UrlFieldElementProps, UrlFieldEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: UrlFieldElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: UrlFieldProps & BaseElementPropsWithChildren<UrlFieldElement>;
+        }
+    }
+}
+
+export type { UrlFieldElement, UrlFieldElementEvents, UrlFieldElementProps, UrlFieldElementSlots, UrlFieldEvents, UrlFieldProps };