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

package/src/surfaces/admin/extension-targets.ts

@@ -17,10 +17,10 @@ import {
   ShouldRenderApi,
   ShouldRenderOutput,
 } from './api/should-render/should-render';
-import type {StandardComponents} from './components/StandardComponents';
 import type {BlockExtensionComponents} from './components/BlockExtensionComponents';
 import type {ActionExtensionComponents} from './components/ActionExtensionComponents';
 import type {PrintActionExtensionComponents} from './components/PrintActionExtensionComponents';
+import type {FunctionSettingsComponents} from './components/FunctionSettingsComponents';
 
 export interface ExtensionTargets {
   /**
@@ -59,7 +59,7 @@ export interface ExtensionTargets {
    */
   'admin.discount-details.function-settings.render': RenderExtension<
     DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,
-    BlockExtensionComponents
+    FunctionSettingsComponents
   >;
 
   /**
@@ -487,11 +487,11 @@ export interface ExtensionTargets {
    */
   'admin.settings.internal-order-routing-rule.render': RenderExtension<
     OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
-    StandardComponents
+    FunctionSettingsComponents
   >;
   'admin.settings.order-routing-rule.render': RenderExtension<
     OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
-    StandardComponents
+    FunctionSettingsComponents
   >;
 
   /**
@@ -501,7 +501,7 @@ export interface ExtensionTargets {
    */
   'admin.settings.validation.render': RenderExtension<
     ValidationSettingsApi<'admin.settings.validation.render'>,
-    StandardComponents
+    FunctionSettingsComponents
   >;
 
   // Admin action shouldRender targets

package/src/surfaces/checkout/api/announcement/announcement.ts

@@ -0,0 +1,7 @@
+export interface Announcement {
+  announcement: {
+    close(): void;
+    addEventListener(type: 'close', cb: () => void): void;
+    removeEventListener(type: 'close', cb: () => void): void;
+  };
+}

package/src/surfaces/checkout/components/Announcement/examples/basic-announcement.example.html

@@ -0,0 +1,16 @@
+<s-announcement>
+  <s-stack direction="inline" gap="base">
+    <s-text>Check our latest offers</s-text>
+    <s-link commandFor="modal" command="--show"> Fill out the survey </s-link>
+  </s-stack>
+  <s-modal id="modal" heading="Tell us about your shopping experience">
+    <s-stack gap="base">
+      <s-text>We'd love to hear about your shopping experience</s-text>
+      <s-text-area
+        rows="4"
+        label="How can we make your shopping experience better?"
+      ></s-text-area>
+      <s-button>Submit</s-button>
+    </s-stack>
+  </s-modal>
+</s-announcement>

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

@@ -0,0 +1,95 @@
+/** 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 {AnnouncementProps$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-announcement";
+export interface AnnouncementEvents extends Pick<AnnouncementProps$1, 'onAfterToggle' | 'onDismiss' | 'onToggle'> {
+}
+export interface AnnouncementElementEvents {
+    /**
+     * Callback fired when the element state changes **after** any animations have finished.
+     *
+     * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the
+     *   `newState` property will be set to `open`.
+     * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the
+     *   `newState` will be `closed`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+     */
+    aftertoggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback fired when the announcement is dismissed by the user
+     * (either via the built-in dismiss button or programmatically).
+     */
+    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback straight after the element state changes.
+     *
+     * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the
+     *   `newState` property will be set to `open`.
+     * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the
+     *   `newState` will be `closed`.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+     */
+    toggle?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface AnnouncementElement extends AnnouncementMethods, Omit<HTMLElement, 'id' | 'ontoggle'> {
+    onaftertoggle?: AnnouncementEvents['onAfterToggle'];
+    ondismiss?: AnnouncementEvents['onDismiss'];
+    ontoggle?: AnnouncementEvents['onToggle'];
+}
+export interface AnnouncementProps extends AnnouncementEvents {
+}
+export interface AnnouncementMethods {
+    dismiss: () => void;
+}
+export interface AnnouncementElementMethods {
+    dismiss: AnnouncementMethods['dismiss'];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: AnnouncementElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: AnnouncementProps & BaseElementPropsWithChildren<AnnouncementElement>;
+        }
+    }
+}
+
+export type { AnnouncementElement, AnnouncementElementEvents, AnnouncementElementMethods, AnnouncementEvents, AnnouncementMethods, AnnouncementProps };

package/src/surfaces/checkout/components/Badge.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];
 
 declare const tagName = "s-badge";
 export interface BadgeProps extends Pick<BadgeProps$1, 'color' | 'icon' | 'iconPosition' | 'id' | 'size' | 'tone'> {

package/src/surfaces/checkout/components/Box/examples/basic-box.example.html

@@ -6,6 +6,6 @@
 >
   <s-paragraph>
     Baked fresh to order. Please order 1-2 days before needed due to potential
-    shipping variatons
+    shipping variations.
   </s-paragraph>
 </s-box>

package/src/surfaces/checkout/components/Checkbox/examples/basic-checkbox.example.html

@@ -1 +1 @@
-<s-checkbox label="Require a confirmation step"></s-checkbox>
+<s-checkbox defaultChecked label="Email me with news and offers"></s-checkbox>

package/src/surfaces/checkout/components/Chip/examples/basic-chip.example.html

@@ -0,0 +1 @@
+<s-chip>50% OFF</s-chip>

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

@@ -0,0 +1,56 @@
+/** 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 {ChipProps$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-chip";
+export interface ChipElementProps extends Pick<ChipProps$1, 'accessibilityLabel' | 'id'> {
+}
+export interface ChipElementSlots {
+    /**
+     * The graphic to display inside of the chip.
+     *
+     * Only `s-icon` element and its `type` attribute are supported.
+     */
+    graphic?: HTMLElement;
+}
+export interface ChipProps extends ChipElementProps {
+}
+export interface ChipElement extends ChipProps, Omit<HTMLElement, 'id'> {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ChipElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: ChipProps & BaseElementPropsWithChildren<ChipElement>;
+        }
+    }
+}
+
+export type { ChipElement, ChipElementProps, ChipElementSlots, ChipProps };

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

@@ -0,0 +1,67 @@
+/** 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 {ChoiceProps$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-choice";
+export interface ChoiceProps extends Pick<ChoiceProps$1, 'accessibilityLabel' | 'defaultSelected' | 'disabled' | 'id' | 'selected' | 'error' | 'value'> {
+}
+export interface ChoiceElementSlots {
+    /**
+     * Additional text to provide context or guidance for the input.
+     *
+     * This text is displayed along with the input and its label
+     * to offer more information or instructions to the user.
+     *
+     * @implementation this content should be linked to the input with an `aria-describedby` attribute.
+     */
+    details?: HTMLElement;
+    /**
+     * Secondary content for a choice.
+     */
+    secondaryContent?: HTMLElement;
+    /**
+     * Content to display when the option is selected.
+     *
+     * This can be used to provide additional information or options related to the choice.
+     */
+    selectedContent?: HTMLElement;
+}
+export interface ChoiceElement extends ChoiceProps, Omit<HTMLElement, 'id'> {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ChoiceElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: ChoiceProps & BaseElementPropsWithChildren<ChoiceElement>;
+        }
+    }
+}
+
+export type { ChoiceElement, ChoiceElementSlots, ChoiceProps };

package/src/surfaces/checkout/components/ChoiceList/examples/basic-choice-list.example.html

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

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

@@ -0,0 +1,65 @@
+/** 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 {ChoiceListProps$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-choice-list";
+export interface ChoiceListElementProps extends Pick<ChoiceListProps$1, 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'multiple' | 'name' | 'values' | 'variant'> {
+}
+export interface ChoiceListEvents extends Pick<ChoiceListProps$1, 'onChange'> {
+}
+export interface ChoiceListElementEvents {
+    /**
+     * A callback that is run whenever the control is changed.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+     */
+    change?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface ChoiceListElement extends ChoiceListElementProps, Omit<HTMLElement, 'id' | 'onchange'> {
+    onchange: ChoiceListEvents['onChange'];
+}
+export interface ChoiceListProps extends ChoiceListElementProps, ChoiceListEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ChoiceListElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: ChoiceListProps & BaseElementPropsWithChildren<ChoiceListElement>;
+        }
+    }
+}
+
+export type { ChoiceListElement, ChoiceListElementEvents, ChoiceListElementProps, ChoiceListEvents, ChoiceListProps };

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

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

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

@@ -0,0 +1,83 @@
+/** 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 {ClickableChipProps$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-clickable-chip";
+export interface ClickableChipElementProps extends Pick<ClickableChipProps$1, 'accessibilityLabel' | 'disabled' | 'hidden' | 'href' | 'id' | 'removable'> {
+}
+export interface ClickableChipEvents extends Pick<ClickableChipProps$1, 'onAfterHide' | 'onClick' | 'onRemove'> {
+}
+export interface ClickableChipElementEvents {
+    /**
+     * Event handler when the chip has fully hidden.
+     *
+     * The `hidden` property will be `true` when this event fires.
+     */
+    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Event handler when the chip is clicked.
+     */
+    click?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Event handler when the chip is removed.
+     */
+    remove?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface ClickableChipElementSlots {
+    /**
+     * The graphic to display inside of the chip.
+     *
+     * Only `s-icon` element and its `type` attribute are supported.
+     */
+    graphic?: HTMLElement;
+}
+export interface ClickableChipElement extends ClickableChipElementProps, Omit<HTMLElement, 'id' | 'hidden' | 'onclick'> {
+    onafterhide: ClickableChipEvents['onAfterHide'];
+    onclick: ClickableChipEvents['onClick'];
+    onremove: ClickableChipEvents['onRemove'];
+}
+export interface ClickableChipProps extends ClickableChipElementProps, ClickableChipEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: ClickableChipElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: ClickableChipProps & BaseElementPropsWithChildren<ClickableChipElement>;
+        }
+    }
+}
+
+export type { ClickableChipElement, ClickableChipElementEvents, ClickableChipElementProps, ClickableChipElementSlots, ClickableChipEvents, ClickableChipProps };

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

@@ -0,0 +1,87 @@
+/** 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 {DateFieldProps$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-field";
+export interface DateFieldElementProps extends Pick<DateFieldProps$1, 'allow' | 'allowDays' | 'autocomplete' | 'defaultValue' | 'defaultView' | 'disabled' | 'disallow' | 'disallowDays' | 'error' | 'id' | 'label' | 'name' | 'readOnly' | 'required' | 'value' | 'view'> {
+    /**
+     * @deprecated Use `label` instead.
+     * @private
+     */
+    placeholder?: string;
+}
+export interface DateFieldEvents extends Pick<DateFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onInvalid' | 'onViewChange'> {
+}
+export interface DateFieldElementEvents {
+    /**
+     * 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 user enters an invalid date.
+     */
+    invalid?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+    /**
+     * Callback when the view changes.
+     */
+    viewChange?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
+}
+export interface DateFieldElement extends DateFieldElementProps, Omit<DateFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onInvalid' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'oninvalid' | 'prefix'> {
+    onblur: DateFieldEvents['onBlur'];
+    onchange: DateFieldEvents['onChange'];
+    onfocus: DateFieldEvents['onFocus'];
+    oninput: DateFieldEvents['onInput'];
+    oninvalid: DateFieldEvents['onInvalid'];
+    onviewchange: DateFieldEvents['onViewChange'];
+}
+export interface DateFieldProps extends DateFieldElementProps, DateFieldEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName]: DateFieldElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName]: DateFieldProps & BaseElementProps<DateFieldElement>;
+        }
+    }
+}
+
+export type { DateFieldElement, DateFieldElementEvents, DateFieldElementProps, DateFieldEvents, DateFieldProps };

package/src/surfaces/checkout/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/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 };