@shopify/ui-extensions 2025.10.0-rc.45 → 2025.10.0-rc.47

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

@@ -26,13 +26,22 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-badge';
 export interface BadgeJSXProps extends Pick<BadgeProps, 'id'> {
+  /**
+   * Sets the tone of the Badge, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
+   */
   tone?: Extract<
     BadgeProps['tone'],
     'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'caution'
   >;
+  /**
+   * The content of the Badge.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -43,7 +52,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: BadgeJSXProps & BaseElementPropsWithChildren<BadgeJSXProps>;
+      [tagName]: IntrinsicElementProps<BadgeJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Banner/examples/default.html

@@ -1,15 +1,15 @@
-<s-banner heading="Label" tone="success">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Marked as delivered" tone="success">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="info">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Ready for shipping" tone="info">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="warning">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Couldn't restock items" tone="warning">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>
 
-<s-banner heading="Label" tone="critical">
-  <s-button slot="primary-action">Action</s-button>
+<s-banner heading="Action failed. Contact developer" tone="critical">
+  <s-button slot="primary-action">Dismiss</s-button>
 </s-banner>

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

@@ -31,36 +31,44 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-banner';
 export interface BannerJSXProps extends Pick<BannerProps, 'heading' | 'id'> {
   /**
    * Determines whether the banner is hidden.
+   *
+   * @default false
    */
   hidden?: BannerProps['hidden'];
   /**
    * Sets the tone of the Banner, based on the intention of the information being conveyed.
+   *
+   * @default 'auto'
    */
   tone?: Extract<
     BannerProps['tone'],
-    'success' | 'info' | 'warning' | 'critical'
+    'auto' | 'success' | 'info' | 'warning' | 'critical'
   >;
   /**
    * The action taken when the Banner is pressed.
    */
   primaryAction?: ComponentChild;
+  /**
+   * The content of the Banner.
+   */
   children?: ComponentChildren;
 }
+export type ElementProps = Omit<BannerJSXProps, 'primaryAction'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: BannerJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<BannerJSXProps, 'primaryAction'> &
-        BaseElementPropsWithChildren<Omit<BannerJSXProps, 'primaryAction'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Box/examples/default.html

@@ -1,3 +1,3 @@
-<s-box>
-  <s-text>Content inside a box container</s-text>
+<s-box padding="base">
+  <s-text>View shipping settings</s-text>
 </s-box>

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

@@ -9,7 +9,9 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
 import type {
-  BoxProps,
+  SizeUnitsOrAuto,
+  SizeUnitsOrNone,
+  SizeUnits,
   SizeKeyword,
   MaybeAllValuesShorthandProperty,
   MaybeTwoValuesShorthandProperty,
@@ -33,19 +35,51 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-box';
 export type PaddingKeyword = SizeKeyword | 'none';
-export interface BoxJSXProps
-  extends Pick<
-    BoxProps,
-    | 'blockSize'
-    | 'minBlockSize'
-    | 'maxBlockSize'
-    | 'inlineSize'
-    | 'minInlineSize'
-    | 'maxInlineSize'
-  > {
+export interface BoxJSXProps {
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
+  /**
+   * Adjust the block size.
+   *
+   * @default 'auto'
+   */
+  blockSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the inline size.
+   *
+   * @default 'auto'
+   */
+  inlineSize?: SizeUnitsOrAuto;
+  /**
+   * Adjust the maximum block size.
+   *
+   * @default 'none'
+   */
+  maxBlockSize?: SizeUnitsOrNone;
+  /**
+   * Adjust the maximum inline size.
+   *
+   * @default 'none'
+   */
+  maxInlineSize?: SizeUnitsOrNone;
+  /**
+   * Adjust the minimum block size.
+   *
+   * @default '0'
+   */
+  minBlockSize?: SizeUnits;
+  /**
+   * Adjust the minimum inline size.
+   *
+   * @default '0'
+   */
+  minInlineSize?: SizeUnits;
   /**
    * Adjust the padding of all edges.
    *
@@ -76,7 +110,7 @@ export interface BoxJSXProps
    *
    * @default '' - meaning no override
    */
-  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
   /**
    * Adjust the block-start padding.
    *
@@ -102,7 +136,7 @@ export interface BoxJSXProps
    *
    * @default '' - meaning no override
    */
-  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
   /**
    * Adjust the inline-start padding.
    *
@@ -119,6 +153,9 @@ export interface BoxJSXProps
    * @default '' - meaning no override
    */
   paddingInlineEnd?: PaddingKeyword | '';
+  /**
+   * The content of the Box.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -129,7 +166,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: BoxJSXProps & BaseElementPropsWithChildren<BoxJSXProps>;
+      [tagName]: IntrinsicElementProps<BoxJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Button/examples/default.html

@@ -1,4 +1,2 @@
-<s-button variant="primary">Label</s-button>
-<s-button variant="secondary">Label</s-button>
-<s-button tone="critical">Label</s-button>
-<s-button disabled>Label</s-button>
+<s-button variant="primary">Add customer</s-button>
+<s-button variant="secondary">Select more items</s-button>

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

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -38,7 +39,10 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-button';
 export interface ButtonJSXProps
-  extends Pick<ButtonProps, 'disabled' | 'command' | 'commandFor' | 'loading'> {
+  extends Pick<
+    ButtonProps,
+    'id' | 'disabled' | 'command' | 'commandFor' | 'loading'
+  > {
   /**
    * Sets the action the `commandFor` should take when this clickable is activated.
    *
@@ -72,7 +76,13 @@ export interface ButtonJSXProps
    * @default 'auto' - the variant is automatically determined by the Button's context
    */
   variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary'>;
+  /**
+   * Called when the button is activated.
+   */
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
+  /**
+   * The content of the Button.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -83,7 +93,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ButtonJSXProps & BaseElementPropsWithChildren<ButtonJSXProps>;
+      [tagName]: IntrinsicElementProps<ButtonJSXProps>;
     }
   }
 }

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

@@ -26,10 +26,11 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 
 declare const tagName = 's-choice';
 export interface ChoiceJSXProps
-  extends Pick<ChoiceProps, 'value' | 'disabled' | 'selected'> {
+  extends Pick<ChoiceProps, 'id' | 'value' | 'disabled' | 'selected'> {
   children?: ComponentChildren;
 }
 declare global {
@@ -40,7 +41,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ChoiceJSXProps & BaseElementPropsWithChildren<ChoiceJSXProps>;
+      [tagName]: IntrinsicElementProps<ChoiceJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/ChoiceList/examples/default.html

@@ -1,5 +1,6 @@
 <s-choice-list>
-  <s-choice value="small">Small</s-choice>
-  <s-choice value="medium">Medium</s-choice>
-  <s-choice value="large">Large</s-choice>
-</s-choice-list>
+  <s-choice value="s" selected>Small</s-choice>
+  <s-choice value="m">Medium</s-choice>
+  <s-choice value="l">Large</s-choice>
+  <s-choice value="xl">Extra large</s-choice>
+</s-choice-list>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-choice-list
+  onChange={(event) => console.log('onChange:', event.target.values)}
+  onInput={(event) => console.log('onInput:', event.target.values)}
+>
+  <s-choice value="option1">Option 1</s-choice>
+  <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>
+  <s-choice value="option3">Option 3</s-choice>
+</s-choice-list>

package/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx

@@ -0,0 +1,9 @@
+<s-choice-list 
+  multiple
+  values={['small', 'medium']}
+  onChange={(event) => console.log('Selected:', event.target.values)}
+>
+  <s-choice value="small">Small</s-choice>
+  <s-choice value="medium">Medium</s-choice>
+  <s-choice value="large">Large</s-choice>
+</s-choice-list>

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

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -38,9 +39,18 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-choice-list';
 export interface ChoiceListJSXProps
-  extends Pick<ChoiceListProps, 'values' | 'multiple'> {
-  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  extends Pick<ChoiceListProps, 'id' | 'values' | 'multiple'> {
+  /**
+   * Callback when the user changes a choice. Fires simultaneously with onChange.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the user changes a choice. Fires simultaneously with onInput.
+   */
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * The content of the ChoiceList. Should be one or more Choice elements.
+   */
   children?: ComponentChildren;
 }
 declare global {
@@ -51,8 +61,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ChoiceListJSXProps &
-        BaseElementPropsWithChildren<ChoiceListJSXProps>;
+      [tagName]: IntrinsicElementProps<ChoiceListJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Clickable/examples/default.html

@@ -1,3 +1,6 @@
-<s-clickable>
-  <s-text>Click me</s-text>
+<s-clickable onClick={handleShippingSettings}>
+  <s-box padding="base">
+    <s-text>View shipping settings</s-text>
+  </s-box>
 </s-clickable>
+

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

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -37,9 +38,16 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 }
 
 declare const tagName = 's-clickable';
-export interface ClickableJSXProps extends Pick<ClickableProps, 'disabled'> {
-  children?: ComponentChildren;
+export interface ClickableJSXProps
+  extends Pick<ClickableProps, 'id' | 'disabled'> {
+  /**
+   * Callback when the element is activated.
+   */
   onClick?: (event: CallbackEvent<typeof tagName>) => void;
+  /**
+   * The content of the Clickable.
+   */
+  children?: ComponentChildren;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -49,8 +57,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: ClickableJSXProps &
-        BaseElementPropsWithChildren<ClickableJSXProps>;
+      [tagName]: IntrinsicElementProps<ClickableJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DateField/examples/default.html

@@ -1,12 +1,4 @@
-<s-date-field 
-  label="Date"
-  value="2024-10-26"
-  details="Select a date">
-</s-date-field>
-
 <s-date-field 
   label="Date" 
-  value="1890-10-26" 
-  error="Date out of range"
-  details="Select a date">
-</s-date-field>
+  value="2025-10-08"
+/>

package/src/surfaces/point-of-sale/components/DateField/examples/event-handling.jsx

@@ -0,0 +1,8 @@
+<s-date-field 
+  label="Order date"
+  value="2024-10-26"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused with:', event.target.value)}
+  onBlur={(event) => console.log('Blurred with:', event.target.value)}
+/>

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

@@ -8,12 +8,7 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {
-  DateFieldProps,
-  Key,
-  Ref,
-  ComponentChild,
-} from './components-shared.d.ts';
+import type {DateFieldProps, Key, Ref} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -31,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -45,24 +41,35 @@ declare const tagName = 's-date-field';
 export interface DateFieldJSXProps
   extends Pick<
     DateFieldProps,
-    'label' | 'details' | 'value' | 'disabled' | 'error'
+    'id' | 'label' | 'details' | 'value' | 'disabled' | 'error'
   > {
+  /**
+   * Callback when the user makes any changes in the field.
+   */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  accessory?: ComponentChild;
+  /**
+   * Callback when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Callback when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
+export type ElementProps = Omit<DateFieldJSXProps, 'accessory'>;
 declare global {
   interface HTMLElementTagNameMap {
-    [tagName]: DateFieldJSXProps;
+    [tagName]: ElementProps;
   }
 }
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: Omit<DateFieldJSXProps, 'accessory'> &
-        BaseElementPropsWithChildren<Omit<DateFieldJSXProps, 'accessory'>>;
+      [tagName]: IntrinsicElementProps<ElementProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DatePicker/examples/command-system.jsx

@@ -0,0 +1,10 @@
+<>
+  <s-button command="--show" commandFor="date-picker">
+    Select Date
+  </s-button>
+  <s-date-picker
+    id="date-picker"
+    value="2024-10-26"
+    onChange={(event) => console.log('Date selected:', event.target.value)}
+  />
+</>;

package/src/surfaces/point-of-sale/components/DatePicker/examples/default.html

@@ -1,8 +1,7 @@
 <s-button command="--show" commandFor="date-picker">
   Show
 </s-button>
-<s-date-picker
-  id="date-picker"
-  value="2024-05-08"
-  onChange={onDateChange}
-/>
+<s-date-picker 
+  id="date-picker" 
+  value="2025-10-08"
+/>

package/src/surfaces/point-of-sale/components/DatePicker/examples/event-handling.jsx

@@ -0,0 +1,7 @@
+<s-date-picker 
+  value="2024-10-26"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focus')}
+  onBlur={(event) => console.log('Blur')}
+/>

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

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -39,10 +40,22 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-date-picker';
 export interface DatePickerJSXProps
   extends Pick<DatePickerProps, 'id' | 'value'> {
+  /**
+   * Callback when the user selects a date from the picker.
+   */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the user selects a date from the picker that is different to the current value.
+   */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the date picker is dismissed.
+   */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the date picker is revealed.
+   */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,8 +65,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DatePickerJSXProps &
-        BaseElementPropsWithChildren<DatePickerJSXProps>;
+      [tagName]: IntrinsicElementProps<DatePickerJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/DateSpinner/examples/command-system.jsx

@@ -0,0 +1,10 @@
+<>
+  <s-button command="--show" commandFor="date-spinner">
+    Select Date
+  </s-button>
+  <s-date-spinner
+    id="date-spinner"
+    value="2024-10-26"
+    onChange={(event) => console.log('Date selected:', event.target.value)}
+  />
+</>;

package/src/surfaces/point-of-sale/components/DateSpinner/examples/default.html

@@ -3,6 +3,5 @@
 </s-button>
 <s-date-spinner
   id="date-spinner"
-  value="2021-09-17"
-  onChange={onDateChange}
+  value="2021-09-17" 
 />

package/src/surfaces/point-of-sale/components/DateSpinner/examples/event-handling.jsx

@@ -0,0 +1,7 @@
+<s-date-spinner 
+  value="2024-10-26"
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focus')}
+  onBlur={(event) => console.log('Blur')}
+/>

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

@@ -26,6 +26,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
   extends BaseElementProps<TClass> {
   children?: ComponentChildren;
 }
+export type IntrinsicElementProps<T> = T & BaseElementPropsWithChildren<T>;
 export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   currentTarget: HTMLElementTagNameMap[T];
   bubbles?: boolean;
@@ -39,10 +40,22 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-date-spinner';
 export interface DateSpinnerJSXProps
   extends Pick<DateSpinnerProps, 'id' | 'value'> {
+  /**
+   * Callback when the user makes a selection.
+   */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the value changes. Only called when a different value is selected.
+   */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the date spinner is dismissed.
+   */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Callback when the date spinner is revealed.
+   */
   onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
-  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,8 +65,7 @@ declare global {
 declare module 'preact' {
   namespace createElement.JSX {
     interface IntrinsicElements {
-      [tagName]: DateSpinnerJSXProps &
-        BaseElementPropsWithChildren<DateSpinnerJSXProps>;
+      [tagName]: IntrinsicElementProps<DateSpinnerJSXProps>;
     }
   }
 }

package/src/surfaces/point-of-sale/components/Divider/examples/default.html

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