@shopify/ui-extensions 2025.10.0-rc.37 → 2025.10.0-rc.39

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

@@ -22,50 +22,131 @@ export interface BaseElementProps<TClass = HTMLElement> {
 declare const tagName = 's-icon';
 export type SupportedIconNames = Extract<
   IconProps['type'],
+  | 'alert-circle'
+  | 'apps'
   | 'arrow-down'
   | 'arrow-left'
   | 'arrow-right'
   | 'arrow-up'
-  | 'apps'
-  | 'analytics'
   | 'backspace'
-  | 'call'
-  | 'cancel'
-  | 'cash'
-  | 'checkmark'
+  | 'barcode'
+  | 'battery-low'
+  | 'bolt-filled'
+  | 'bullet'
+  | 'camera-flip'
+  | 'caret-down'
+  | 'caret-up'
   | 'cart'
+  | 'cart-down'
   | 'cart-filled'
+  | 'cart-send'
+  | 'cart-up'
+  | 'chart-line'
+  | 'chart-vertical'
   | 'check'
-  | 'check-circle'
-  | 'alert-circle'
-  | 'info'
-  | 'phone'
-  | 'edit'
-  | 'delete'
-  | 'settings'
-  | 'search'
-  | 'print'
-  | 'refresh'
-  | 'help'
-  | 'plus'
-  | 'minus'
-  | 'email'
-  | 'gift-card'
-  | 'discount'
-  | 'receipt'
+  | 'check-circle-filled'
   | 'chevron-down'
   | 'chevron-left'
   | 'chevron-right'
   | 'chevron-up'
-  | 'menu'
+  | 'circle'
+  | 'clipboard-checklist'
+  | 'clock'
+  | 'collection'
+  | 'credit-card'
+  | 'credit-card-reader'
+  | 'delete'
+  | 'delivery'
+  | 'desktop'
+  | 'disabled'
+  | 'disabled-filled'
+  | 'discount'
+  | 'discount-add'
+  | 'discount-automatic'
+  | 'discount-code'
+  | 'discount-remove'
+  | 'drag-handle'
+  | 'drawer'
+  | 'duplicate'
+  | 'edit'
+  | 'email'
+  | 'exchange'
+  | 'external'
+  | 'flag'
+  | 'gift-card'
+  | 'graduation-hat'
+  | 'grid'
+  | 'hide-filled'
   | 'home'
+  | 'home-filled'
+  | 'image'
+  | 'images'
+  | 'info'
+  | 'inventory'
+  | 'inventory-edit'
+  | 'inventory-list'
+  | 'inventory-transfer'
+  | 'keyboard-hide'
+  | 'keypad'
+  | 'link'
+  | 'list-bulleted'
+  | 'list-bulleted-filled'
+  | 'live'
+  | 'live-critical'
+  | 'live-none'
   | 'location'
-  | 'time'
-  | 'calendar'
-  | 'products'
-  | 'orders'
-  | 'customers'
-  | 'collection'
+  | 'lock'
+  | 'maximize'
+  | 'menu'
+  | 'menu-filled'
+  | 'menu-horizontal'
+  | 'minimize'
+  | 'minus'
+  | 'mobile'
+  | 'money'
+  | 'money-split'
+  | 'note'
+  | 'order'
+  | 'order-draft'
+  | 'order-filled'
+  | 'package'
+  | 'package-cancel'
+  | 'package-reassign'
+  | 'payment'
+  | 'person'
+  | 'person-add'
+  | 'person-filled'
+  | 'phablet'
+  | 'phone-out'
+  | 'play-circle'
+  | 'plus'
+  | 'point-of-sale'
+  | 'point-of-sale-register'
+  | 'print'
+  | 'product'
+  | 'product-filled'
+  | 'profile'
+  | 'question-circle-filled'
+  | 'receipt'
+  | 'refresh'
+  | 'return'
+  | 'scan-qr-code'
+  | 'search'
+  | 'send'
+  | 'settings'
+  | 'shipping-label-cancel'
+  | 'sort'
+  | 'star-circle'
+  | 'star-filled'
+  | 'store'
+  | 'tablet'
+  | 'transaction-fee-add'
+  | 'unlock'
+  | 'variant'
+  | 'view'
+  | 'wallet'
+  | 'x'
+  | 'x-circle'
 >;
 export interface IconJSXProps
   extends Pick<IconProps, 'tone' | 'color' | 'size'> {

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

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

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

@@ -0,0 +1,64 @@
+/** VERSION: undefined **/
+/* 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 {
+  SectionProps,
+  Key,
+  Ref,
+  ComponentChild,
+} from './components-shared.d.ts';
+
+export type ComponentChildren = any;
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+  key?: Key;
+  ref?: Ref<TClass>;
+  slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement>
+  extends BaseElementProps<TClass> {
+  children?: ComponentChildren;
+}
+
+declare const tagName = 's-pos-block';
+export interface PosBlockJSXProps extends Pick<SectionProps, 'children'> {
+  secondaryActions?: ComponentChild;
+  /**
+   * Adds title text displayed at the top left of the section
+   *
+   * **Mobile surfaces:** Uses the standard POS Design System heading style for a section (not h2).
+   *
+   * @default undefined
+   */
+  heading?: string;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: PosBlockJSXProps;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: Omit<PosBlockJSXProps, 'secondaryActions'> &
+        BaseElementPropsWithChildren<
+          Omit<PosBlockJSXProps, 'secondaryActions'>
+        >;
+    }
+  }
+}
+
+export {tagName};
+export type {PosBlockJSXProps};

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

@@ -38,10 +38,7 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
 
 declare const tagName = 's-search-field';
 export interface SearchFieldJSXProps
-  extends Pick<
-    SearchFieldProps,
-    'disabled' | 'defaultValue' | 'placeholder' | 'value'
-  > {
+  extends Pick<SearchFieldProps, 'disabled' | 'placeholder' | 'value'> {
   onFocus?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onBlur?: ((event: CallbackEvent<typeof tagName>) => void) | null;
   onInput?: ((event: CallbackEvent<typeof tagName>) => void) | null;

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

@@ -8,7 +8,14 @@
 /* eslint-disable import-x/namespace */
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment
 /// <reference lib="DOM" />
-import type {StackProps, Key, Ref} from './components-shared.d.ts';
+import type {
+  StackProps,
+  SizeKeyword,
+  MaybeAllValuesShorthandProperty,
+  MaybeTwoValuesShorthandProperty,
+  Key,
+  Ref,
+} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -28,6 +35,7 @@ export interface BaseElementPropsWithChildren<TClass = HTMLElement>
 }
 
 declare const tagName = 's-stack';
+export type PaddingKeyword = SizeKeyword | 'none';
 export type PickedProps = Pick<
   StackProps,
   | 'alignItems'
@@ -42,16 +50,82 @@ export type PickedProps = Pick<
   | 'minInlineSize'
   | 'inlineSize'
   | 'justifyContent'
-  | 'padding'
-  | 'paddingBlock'
-  | 'paddingBlockStart'
-  | 'paddingBlockEnd'
-  | 'paddingInline'
-  | 'paddingInlineStart'
-  | 'paddingInlineEnd'
   | 'rowGap'
 >;
 export interface StackJSXProps extends PickedProps {
+  /**
+   * Adjust the padding of all edges.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
+   *
+   * - 4 values: `block-start inline-end block-end inline-start`
+   * - 3 values: `block-start inline block-end`
+   * - 2 values: `block inline`
+   *
+   * For example:
+   * - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
+   * - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
+   * - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
+   * - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
+   *
+   * A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
+   *
+   * @default 'none'
+   */
+  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+  /**
+   * Adjust the block-padding.
+   *
+   * - `large none` means block-start padding is `large`, block-end padding is `none`.
+   *
+   * This overrides the block value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  /**
+   * Adjust the block-start padding.
+   *
+   * This overrides the block-start value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockStart?: PaddingKeyword | '';
+  /**
+   * Adjust the block-end padding.
+   *
+   * This overrides the block-end value of `paddingBlock`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingBlockEnd?: PaddingKeyword | '';
+  /**
+   * Adjust the inline padding.
+   *
+   * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
+   *
+   * This overrides the inline value of `padding`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword | ''>;
+  /**
+   * Adjust the inline-start padding.
+   *
+   * This overrides the inline-start value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineStart?: PaddingKeyword | '';
+  /**
+   * Adjust the inline-end padding.
+   *
+   * This overrides the inline-end value of `paddingInline`.
+   *
+   * @default '' - meaning no override
+   */
+  paddingInlineEnd?: PaddingKeyword | '';
   children?: ComponentChildren;
   /**
    * Adjust the block size.

package/src/surfaces/point-of-sale/components/Tile.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 {
-  Key,
-  Ref,
-  BaseClickableProps,
-  GlobalProps,
-} from './components-shared.d.ts';
+import type {TileProps, Key, Ref} from './components-shared.d.ts';
 
 export type ComponentChildren = any;
 /**
@@ -41,38 +36,6 @@ export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
   target: HTMLElementTagNameMap[T] | null;
 }
 
-export interface TileProps
-  extends GlobalProps,
-    Pick<BaseClickableProps, 'onClick' | 'disabled'> {
-  /**
-   * The primary text displayed on the Tile.
-   *
-   * @default ''
-   */
-  heading?: string;
-  /**
-   * Secondary supporting text displayed below the heading.
-   *
-   * @default ''
-   */
-  subheading?: string;
-  /**
-   * A numeric indicator rendered within the Tile (for example, a count or a step number).
-   *
-   * - When provided, the indicator is displayed inside the tile.
-   * - Intended for small integers. Implementations may clamp, truncate, or abbreviate larger values.
-   * - Omit to render the tile without a numeric indicator.
-   *
-   */
-  itemCount?: number;
-  /**
-   * Changes the visual appearance of the Tile.
-   *
-   * @default 'auto'
-   */
-  tone?: 'accent' | 'auto' | 'neutral';
-}
-
 declare const tagName = 's-tile';
 export interface TileJSXProps
   extends Pick<

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

@@ -0,0 +1,12 @@
+<s-time-field
+  label="Time"
+  value="11:42"
+  details="Select a time">
+</s-time-field>
+
+<s-time-field
+  label="Time"
+  value="11:42"
+  details="Select a time"
+  error="Time out of range">
+</s-time-field>

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

@@ -0,0 +1,65 @@
+/** VERSION: undefined **/
+/* 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 {TimeFieldProps, Key, Ref} from './components-shared.d.ts';
+
+export type ComponentChildren = any;
+/**
+ * Used when an element does not have children.
+ */
+export interface BaseElementProps<TClass = HTMLElement> {
+  key?: Key;
+  ref?: Ref<TClass>;
+  slot?: Lowercase<string>;
+}
+/**
+ * Used when an element has children.
+ */
+export interface BaseElementPropsWithChildren<TClass = HTMLElement>
+  extends BaseElementProps<TClass> {
+  children?: ComponentChildren;
+}
+export interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
+  currentTarget: HTMLElementTagNameMap[T];
+  bubbles?: boolean;
+  cancelable?: boolean;
+  composed?: boolean;
+  detail?: any;
+  eventPhase: number;
+  target: HTMLElementTagNameMap[T] | null;
+}
+
+declare const tagName = 's-time-field';
+export interface TimeFieldJSXProps
+  extends Pick<
+    TimeFieldProps,
+    'id' | 'label' | 'disabled' | 'value' | 'error' | 'details'
+  > {
+  onBlur?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onFocus?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onInput?: (event: CallbackEvent<typeof tagName>) => void | null;
+  onChange?: (event: CallbackEvent<typeof tagName>) => void | null;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [tagName]: TimeFieldJSXProps;
+  }
+}
+declare module 'preact' {
+  namespace createElement.JSX {
+    interface IntrinsicElements {
+      [tagName]: TimeFieldJSXProps &
+        BaseElementPropsWithChildren<TimeFieldJSXProps>;
+    }
+  }
+}
+
+export {tagName};
+export type {TimeFieldJSXProps};