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

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;
 /**
@@ -47,11 +42,14 @@ export interface DateFieldJSXProps
     DateFieldProps,
     'label' | 'details' | 'value' | 'disabled' | 'error'
   > {
+  /** Function called 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;
+  /** Function called after editing completes (typically on blur). */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  accessory?: ComponentChild;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -39,10 +39,14 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-date-picker';
 export interface DatePickerJSXProps
   extends Pick<DatePickerProps, 'id' | 'value'> {
+  /** Function called when the user selects a date from the picker. */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the user selects a date from the picker that is different to the current value. */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the date picker is dismissed. */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called 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 {

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

@@ -39,10 +39,18 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-date-spinner';
 export interface DateSpinnerJSXProps
   extends Pick<DateSpinnerProps, 'id' | 'value'> {
+  /**
+   * Function called when the user makes a selection.
+   */
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /**
+   * Function called when the value changes. Only called when a different value is selected.
+   */
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called when the date picker is dismissed. */
   onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  /** Function called 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 {

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

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

package/src/surfaces/point-of-sale/components/EmailField/examples/accessory-slot.jsx

@@ -0,0 +1,9 @@
+<s-email-field
+  label="Newsletter signup"
+  placeholder="Enter email address"
+  value="customer@example.com"
+>
+  <s-button slot="accessory" onClick={() => console.log('Subscribe')}>
+    Subscribe
+  </s-button>
+</s-email-field>;

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

@@ -1,12 +1,5 @@
 <s-email-field 
-  label="Email" 
-  placeholder="Enter your email"
+  label="Email"
+  value="snowdevil@shopify.com"
   required
-  value="example@shopify.com"></s-email-field>
-
-<s-email-field 
-  label="Email" 
-  placeholder="Enter your email"
-  required
-  error="Enter a valid email address"
-  value="example.com"></s-email-field>
+/>

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

@@ -0,0 +1,8 @@
+<s-email-field
+  label="Customer email"
+  placeholder="customer@example.com"
+  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/EmailField.d.ts

@@ -54,10 +54,17 @@ export interface EmailFieldJSXProps
     | 'maxLength'
     | 'details'
   > {
+  /** Function called 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;
+  /** Function called after editing completes (typically on blur). */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
 declare global {

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

@@ -1,8 +1,7 @@
-<s-heading>Heading (h2)</s-heading>
-
+<s-heading>Heading (H2)</s-heading>
 <s-section>
-  <s-heading>Heading (h3)</s-heading>
+  <s-heading>Heading (H3)</s-heading>
   <s-section>
-    <s-heading>Heading (h4)</s-heading>
+    <s-heading>Heading (H4)</s-heading>
   </s-section>
-</s-section>
+</s-section>

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

@@ -1 +1,4 @@
-<s-icon type="alert-circle"></s-icon>
+<s-icon type="arrow-up" />
+<s-icon type="arrow-down" />
+<s-icon type="arrow-left" />
+<s-icon type="arrow-right" />

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

@@ -1 +1 @@
-<s-image src="example.png" inlineSize="auto"></s-image>
+<s-image src="example.png" inlineSize="auto" />

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

@@ -1,9 +1,7 @@
-<s-button command="--show" commandFor="modal">Open modal</s-button>
-<s-modal id="modal" heading="Header">
-  <s-stack alignItems="center" justifyContent="center" gap="base">
-    <s-text color="subdued">Subheader</s-text>
-  </s-stack>
-  <s-button slot="primary-action" onClick={handlePrimaryAction}>
-    Label
-  </s-button>
+<s-button command="--show" commandFor="modal">
+  Open modal
+</s-button>
+<s-modal id="modal" heading="Changes could not be saved">
+  Please check your internet connection and try again.
+  <s-button slot="primary-action">OK</s-button>
 </s-modal>

package/src/surfaces/point-of-sale/components/NumberField/examples/controls-constraints.jsx

@@ -0,0 +1,9 @@
+<s-number-field
+  label="Quantity"
+  value="5"
+  min={1}
+  max={100}
+  controls
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+/>;

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

@@ -1,2 +1,5 @@
-<s-number-field label="Phone number" required value="+1 (416) 555-5555"></s-number-field>
-<s-number-field label="Phone number" required value="+1 (416) 555-5555555" error="Enter a valid phone number"></s-number-field>
+<s-number-field 
+  label="Item count"
+  value="976"
+  required
+/>

package/src/surfaces/point-of-sale/components/NumberField/examples/input-mode.jsx

@@ -0,0 +1,15 @@
+<s-stack>
+  <s-number-field
+    label="Price"
+    placeholder="0.00"
+    inputMode="decimal"
+    onInput={(event) => console.log('Value:', event.target.value)}
+  />
+
+  <s-number-field
+    label="Stock count"
+    placeholder="0"
+    inputMode="numeric"
+    onInput={(event) => console.log('Value:', event.target.value)}
+  />
+</s-stack>;

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

@@ -42,7 +42,7 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 }
 
 declare const tagName = 's-number-field';
-export interface PickedJSXProps
+export interface NumberFieldJSXProps
   extends Pick<
     NumberFieldProps,
     | 'label'
@@ -56,20 +56,12 @@ export interface PickedJSXProps
     | 'min'
     | 'controls'
   > {
-  inputMode?: Extract<NumberFieldProps['inputMode'], 'decimal' | 'numeric'>;
-  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  accessory?: ComponentChild;
-}
-export interface NumberFieldJSXProps extends PickedJSXProps {
   /**
    * Content to use as the field label.
    *
    * Label is not supported when using Stepper controls
    */
-  label?: PickedJSXProps['label'];
+  label?: NumberFieldProps['label'];
   /**
    * Additional text to provide context or guidance for the field.
    * This text is displayed along with the field and its label
@@ -79,7 +71,7 @@ export interface NumberFieldJSXProps extends PickedJSXProps {
    *
    * Details are not supported when using Stepper controls
    */
-  details?: PickedJSXProps['details'];
+  details?: NumberFieldProps['details'];
   /**
    * Whether the field needs a value. This requirement adds semantic value
    * to the field, but it will not cause an error to appear automatically.
@@ -90,14 +82,14 @@ export interface NumberFieldJSXProps extends PickedJSXProps {
    *
    * Required is not supported when using Stepper controls
    */
-  required?: PickedJSXProps['required'];
+  required?: NumberFieldProps['required'];
   /**
    * Indicate an error to the user. The field will be given a specific stylistic treatment
    * to communicate problems that have to be resolved immediately.
    *
    * Error is not supported when using Stepper controls
    */
-  error?: PickedJSXProps['error'];
+  error?: NumberFieldProps['error'];
   /**
    * Sets the virtual keyboard.
    *
@@ -106,20 +98,19 @@ export interface NumberFieldJSXProps extends PickedJSXProps {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
    * @default 'decimal'
    */
-  inputMode?: PickedJSXProps['inputMode'];
+  inputMode?: NumberFieldProps['inputMode'];
   /**
    * A short hint that describes the expected value of the field.
    *
    * Placeholder text is not supported when using Stepper controls due to constrained space for the number field, especially on phones.
    */
-  placeholder?: PickedJSXProps['placeholder'];
+  placeholder?: NumberFieldProps['placeholder'];
   /**
-   * Additional content to be displayed in the field.
-   * Commonly used to display an icon that activates a tooltip providing more information.
+   *  Additional content to be displayed in the field. Commonly used to display clickable text.
    *
-   * Accessory is not supported when using Stepper controls
+   * > Note: Accessory is not supported when using Stepper controls
    */
-  accessory?: PickedJSXProps['accessory'];
+  accessory?: ComponentChild;
   /**
    * Sets the type of controls displayed for the field.
    *
@@ -130,7 +121,15 @@ export interface NumberFieldJSXProps extends PickedJSXProps {
    * - `none`: no controls are displayed and users must input the value manually.
    * - `auto`: the presence of the controls depends on the surface and context.
    */
-  controls?: PickedJSXProps['controls'];
+  controls?: NumberFieldProps['controls'];
+  /** Function called when the user makes any changes in the field. */
+  onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called after editing completes (typically on blur). */
+  onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,6 +1,5 @@
 <s-page heading="Title">
-  <s-button slot="secondary-actions" onClick={onActionClick}>
-    Label
+  <s-button slot="secondary-actions">
+    Action
   </s-button>
-  <s-heading>Title</s-heading>
-</s-page>
+</s-page>

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

@@ -1,11 +1,5 @@
 <s-pos-block>
-  <s-button
-    slot="secondary-actions"
-    onClick={onActionClick}
-  >
-    Action
-  </s-button>
-  <s-box padding="base">
-    <s-text>Label</s-text>
+  <s-box paddingBlock="base">
+    <s-text>Customer Loyalty</s-text>
   </s-box>
-</s-pos-block>
+</s-pos-block>

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

@@ -1,7 +1,8 @@
 <s-scroll-box>
-  <s-choice-list multiple>
-    {data.map((item) => (
-      <s-choice value={item.value}>{item.label}</s-choice>
-    ))}
+  <s-choice-list>
+    <s-choice value="true-twin">True Twin board</s-choice>
+    <s-choice value="directional">Directional board</s-choice>
+    <s-choice value="volume">Volume shifted board</s-choice>
+    <s-choice value="asymmetrical">Asymmetrical board</s-choice>
   </s-choice-list>
 </s-scroll-box>

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

@@ -1 +1 @@
-<s-search-field placeholder="Search"></s-search-field>
+<s-search-field placeholder="Search" />

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

@@ -0,0 +1,8 @@
+<s-search-field
+  placeholder="Search products..."
+  value=""
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Search focused')}
+  onBlur={(event) => console.log('Search blurred')}
+/>

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

@@ -39,10 +39,14 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 declare const tagName = 's-search-field';
 export interface SearchFieldJSXProps
   extends Pick<SearchFieldProps, 'disabled' | 'placeholder' | 'value'> {
-  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
-  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the user changes the value in the field. */
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the field loses focus after the user changes the value in the field. */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the field loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the field is focused. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1,10 +1,8 @@
-<s-section heading="Section header">
-  <s-button slot="secondary-actions" onClick={onActionClick}>
-    Action
-  </s-button>
+<s-section heading="Select product category">
+  <s-button slot="secondary-actions">Edit</s-button>
   <s-choice-list>
-    {data.map((item) => (
-      <s-choice value={item.value}>{item.label}</s-choice>
-    ))}
+    <s-choice value="snowboards">Snowboards</s-choice>
+    <s-choice value="jackets">Jackets</s-choice>
+    <s-choice value="label">Label</s-choice>
   </s-choice-list>
-</s-section>
+</s-section>

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

@@ -1,4 +1,4 @@
-<s-stack>
-  <s-text>First item</s-text>
-  <s-text>Second item</s-text>
+<s-stack gap="small" direction="inline" justifyContent="center">
+  <s-badge tone="neutral">Paid</s-badge>
+  <s-badge tone="success">Active</s-badge>
 </s-stack>

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

@@ -1,6 +1,3 @@
-<s-text>Text</s-text>
-<s-text color="subdued">Text</s-text>
-<s-text tone="info">Text</s-text>
-<s-text tone="success">Text</s-text>
-<s-text tone="warning">Text</s-text>
-<s-text tone="critical">Text</s-text>
+<s-text>
+  <s-text type="strong">Name:</s-text> Jane Doe
+</s-text>

package/src/surfaces/point-of-sale/components/TextArea/examples/accessory-slot.jsx

@@ -0,0 +1,9 @@
+<s-text-area
+  label="Product description"
+  placeholder="Enter product details..."
+  value="This is a sample product description"
+>
+  <s-button slot="accessory" onClick={() => console.log('Clear')}>
+    Clear
+  </s-button>
+</s-text-area>;

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

@@ -1 +1,4 @@
-<s-text-area label="Add note" placeholder="Enter a custom note" value="Custom note" ></s-text-area>
+<s-text-area 
+  label="Shipping address" 
+  value="1776 Barnes Street, Orlando, FL 32801"
+/>

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

@@ -0,0 +1,8 @@
+<s-text-area
+  label="Customer feedback"
+  placeholder="Enter feedback..."
+  onInput={(event) => console.log('Input:', event.target.value)}
+  onChange={(event) => console.log('Change:', event.target.value)}
+  onFocus={(event) => console.log('Focused')}
+  onBlur={(event) => console.log('Blurred')}
+/>

package/src/surfaces/point-of-sale/components/TextArea/examples/rows-configuration.jsx

@@ -0,0 +1,7 @@
+<s-text-area
+  label="Order notes"
+  placeholder="Add special instructions..."
+  rows={5}
+  maxLength={500}
+  onInput={(event) => console.log('Characters:', event.target.value.length)}
+/>

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

@@ -55,10 +55,17 @@ export interface TextAreaJSXProps
     | 'maxLength'
     | 'rows'
   > {
+  /** Function called 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;
+  /** Function called after editing completes (typically on blur). */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element loses focus. */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /** Function called when the element receives focus. */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
 declare global {

package/src/surfaces/point-of-sale/components/TextField/examples/accessory-slot.jsx

@@ -0,0 +1,5 @@
+<s-text-field label="Discount code" value="SUMMER2024">
+  <s-button slot="accessory" onClick={() => console.log('Apply discount')}>
+    Apply
+  </s-button>
+</s-text-field>;

package/src/surfaces/point-of-sale/components/TextField/examples/common-props.jsx

@@ -0,0 +1,11 @@
+<s-text-field
+  label="Product SKU"
+  value={sku}
+  placeholder="Enter SKU"
+  details="Use format: ABC-123"
+  error={hasError ? "SKU already exists" : undefined}
+  disabled={isProcessing}
+  required
+  maxLength={20}
+  onChange={(event) => setSku(event.target.value)}
+/>

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

@@ -1,3 +1,5 @@
-<s-text-field label="Label" required value=""></s-text-field>
-<s-text-field label="Label" required value="Content"></s-text-field>
-<s-text-field label="Label" required value="Content" error="Error message"></s-text-field>
+<s-text-field
+  label="Store name" 
+  value="Snowdevil" 
+  required
+/>

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

@@ -0,0 +1,17 @@
+<s-text-field
+  label="Product SKU"
+  placeholder="Enter SKU"
+  onInput={(event) => {
+    console.log('Input:', event.target.value);
+    console.log('Current error:', event.target.error);
+  }}
+  onFocus={(event) => {
+    console.log('Focused with value:', event.target.value);
+  }}
+  onBlur={(event) => {
+    console.log('Blurred with value:', event.target.value);
+  }}
+  onChange={(event) => {
+    console.log('Changed to:', event.target.value);
+  }}
+/>

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

@@ -54,10 +54,25 @@ export interface TextFieldJSXProps
     | 'required'
     | 'maxLength'
   > {
+  /**
+   * Function called 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;
+  /**
+   * Function called after editing completes (typically on blur).
+   */
   onChange?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Function called when the element loses focus.
+   */
+  onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Function called when the element receives focus.
+   */
+  onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
+  /**
+   * Additional content to be displayed in the field. Commonly used to display clickable text.
+   */
   accessory?: ComponentChild;
 }
 declare global {

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

@@ -1,5 +1,2 @@
-<s-tile heading="Title" subheading="Subtitle" itemCount={2} tone="accent"></s-tile>
-
-<s-tile heading="Title" subheading="Subtitle" tone="accent"></s-tile>
-
-<s-tile heading="Title" subheading="Subtitle" disabled></s-tile>
+<s-tile heading="Extension title" subheading="Subtitle" />
+<s-tile heading="Extension title" subheading="Subtitle" tone="accent" />