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

package/build/ts/surfaces/point-of-sale/components/components-shared.d.ts

@@ -74,6 +74,20 @@ export interface BaseOverlayMethods {
    */
   toggleOverlay: () => void;
 }
+export interface FocusEventProps {
+  /**
+   * Callback when the element loses focus.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+   */
+  onBlur?: (event: FocusEvent) => void;
+  /**
+   * Callback when the element receives focus.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
+   */
+  onFocus?: (event: FocusEvent) => void;
+}
 export type SizeKeyword =
   | 'small-500'
   | 'small-400'
@@ -116,6 +130,7 @@ export type ToneKeyword =
   | 'caution'
   | 'warning'
   | 'critical'
+  | 'accent'
   | 'custom';
 declare const privateIconArray: readonly [
   'adjust',
@@ -125,23 +140,23 @@ declare const privateIconArray: readonly [
   'alert-circle',
   'alert-diamond',
   'alert-location',
-  'alert-octagon-filled',
   'alert-octagon',
-  'alert-triangle-filled',
+  'alert-octagon-filled',
   'alert-triangle',
+  'alert-triangle-filled',
   'app-extension',
   'apps',
   'archive',
+  'arrow-down',
   'arrow-down-circle',
   'arrow-down-right',
-  'arrow-down',
-  'arrow-left-circle',
   'arrow-left',
-  'arrow-right-circle',
+  'arrow-left-circle',
   'arrow-right',
+  'arrow-right-circle',
+  'arrow-up',
   'arrow-up-circle',
   'arrow-up-right',
-  'arrow-up',
   'arrows-in-horizontal',
   'arrows-out-horizontal',
   'attachment',
@@ -150,36 +165,39 @@ declare const privateIconArray: readonly [
   'bag',
   'bank',
   'barcode',
+  'battery-low',
   'bill',
   'blank',
   'blog',
-  'bolt-filled',
   'bolt',
-  'book-open',
+  'bolt-filled',
   'book',
+  'book-open',
   'bug',
   'bullet',
   'business-entity',
-  'button-press',
   'button',
+  'button-press',
   'calculator',
+  'calendar',
   'calendar-check',
   'calendar-compare',
   'calendar-list',
   'calendar-time',
-  'calendar',
-  'camera-flip',
   'camera',
+  'camera-flip',
   'caret-down',
   'caret-left',
   'caret-right',
   'caret-up',
+  'cart',
   'cart-abandoned',
   'cart-discount',
   'cart-down',
+  'cart-filled',
   'cart-sale',
+  'cart-send',
   'cart-up',
-  'cart',
   'cash-dollar',
   'cash-euro',
   'cash-pound',
@@ -191,8 +209,8 @@ declare const privateIconArray: readonly [
   'chart-cohort',
   'chart-donut',
   'chart-funnel',
-  'chart-histogram-first-last',
   'chart-histogram-first',
+  'chart-histogram-first-last',
   'chart-histogram-flat',
   'chart-histogram-full',
   'chart-histogram-growth',
@@ -203,36 +221,36 @@ declare const privateIconArray: readonly [
   'chart-popular',
   'chart-stacked',
   'chart-vertical',
+  'chat',
   'chat-new',
   'chat-referral',
-  'chat',
-  'check-circle-filled',
-  'check-circle',
   'check',
+  'check-circle',
+  'check-circle-filled',
   'checkbox',
-  'chevron-down-circle',
   'chevron-down',
-  'chevron-left-circle',
+  'chevron-down-circle',
   'chevron-left',
-  'chevron-right-circle',
+  'chevron-left-circle',
   'chevron-right',
-  'chevron-up-circle',
+  'chevron-right-circle',
   'chevron-up',
-  'circle-dashed',
+  'chevron-up-circle',
   'circle',
+  'circle-dashed',
+  'clipboard',
   'clipboard-check',
   'clipboard-checklist',
-  'clipboard',
-  'clock-revert',
   'clock',
-  'code-add',
+  'clock-revert',
   'code',
+  'code-add',
+  'collection',
   'collection-featured',
   'collection-list',
   'collection-reference',
-  'collection',
-  'color-none',
   'color',
+  'color-none',
   'compass',
   'complete',
   'compose',
@@ -243,77 +261,81 @@ declare const privateIconArray: readonly [
   'corner-pill',
   'corner-round',
   'corner-square',
+  'credit-card',
   'credit-card-cancel',
   'credit-card-percent',
+  'credit-card-reader',
   'credit-card-reader-chip',
   'credit-card-reader-tap',
-  'credit-card-reader',
   'credit-card-secure',
   'credit-card-tap-chip',
-  'credit-card',
   'crop',
   'currency-convert',
+  'cursor',
   'cursor-banner',
   'cursor-option',
-  'cursor',
   'data-presentation',
   'data-table',
+  'database',
   'database-add',
   'database-connect',
-  'database',
   'delete',
   'delivered',
   'delivery',
   'desktop',
   'disabled',
+  'disabled-filled',
+  'discount',
   'discount-add',
+  'discount-automatic',
   'discount-code',
-  'discount',
+  'discount-remove',
   'dns-settings',
   'dock-floating',
   'dock-side',
+  'domain',
   'domain-landing-page',
   'domain-new',
   'domain-redirect',
-  'domain',
   'download',
   'drag-drop',
   'drag-handle',
+  'drawer',
   'duplicate',
   'edit',
+  'email',
   'email-follow-up',
   'email-newsletter',
-  'email',
   'empty',
   'enabled',
   'enter',
-  'envelope-soft-pack',
   'envelope',
+  'envelope-soft-pack',
   'eraser',
   'exchange',
   'exit',
   'export',
   'external',
   'eye-check-mark',
-  'eye-dropper-list',
   'eye-dropper',
+  'eye-dropper-list',
   'eye-first',
   'eyeglasses',
   'fav',
   'favicon',
-  'file-list',
   'file',
-  'filter-active',
+  'file-list',
   'filter',
+  'filter-active',
   'flag',
   'flip-horizontal',
   'flip-vertical',
   'flower',
+  'folder',
   'folder-add',
   'folder-down',
   'folder-remove',
   'folder-up',
-  'folder',
   'food',
   'foreground',
   'forklift',
@@ -321,56 +343,62 @@ declare const privateIconArray: readonly [
   'games',
   'gauge',
   'geolocation',
-  'gift-card',
   'gift',
+  'gift-card',
   'git-branch',
   'git-commit',
   'git-repository',
+  'globe',
   'globe-asia',
   'globe-europe',
   'globe-lines',
   'globe-list',
-  'globe',
+  'graduation-hat',
   'grid',
+  'hashtag',
   'hashtag-decimal',
   'hashtag-list',
-  'hashtag',
   'heart',
-  'hide-filled',
   'hide',
+  'hide-filled',
   'home',
+  'home-filled',
   'icons',
   'identity-card',
+  'image',
   'image-add',
   'image-alt',
   'image-explore',
   'image-magic',
   'image-none',
   'image-with-text-overlay',
-  'image',
   'images',
   'import',
   'in-progress',
   'incentive',
   'incoming',
   'incomplete',
-  'info-filled',
   'info',
+  'info-filled',
   'inheritance',
-  'inventory-updated',
   'inventory',
+  'inventory-edit',
+  'inventory-list',
+  'inventory-transfer',
+  'inventory-updated',
   'iq',
   'key',
+  'keyboard',
   'keyboard-filled',
   'keyboard-hide',
-  'keyboard',
+  'keypad',
   'label-printer',
-  'language-translate',
   'language',
+  'language-translate',
   'layout-block',
+  'layout-buy-button',
   'layout-buy-button-horizontal',
   'layout-buy-button-vertical',
-  'layout-buy-button',
   'layout-column-1',
   'layout-columns-2',
   'layout-columns-3',
@@ -383,64 +411,73 @@ declare const privateIconArray: readonly [
   'layout-sidebar-left',
   'layout-sidebar-right',
   'lightbulb',
-  'link-list',
   'link',
+  'link-list',
   'list-bulleted',
+  'list-bulleted-filled',
   'list-numbered',
   'live',
-  'location-none',
+  'live-critical',
+  'live-none',
   'location',
+  'location-none',
   'lock',
   'map',
+  'markets',
   'markets-euro',
   'markets-rupee',
   'markets-yen',
-  'markets',
   'maximize',
-  'measurement-size-list',
   'measurement-size',
-  'measurement-volume-list',
+  'measurement-size-list',
   'measurement-volume',
-  'measurement-weight-list',
+  'measurement-volume-list',
   'measurement-weight',
+  'measurement-weight-list',
   'media-receiver',
   'megaphone',
   'mention',
+  'menu',
+  'menu-filled',
   'menu-horizontal',
   'menu-vertical',
-  'menu',
   'merge',
   'metafields',
+  'metaobject',
   'metaobject-list',
   'metaobject-reference',
-  'metaobject',
   'microphone',
   'minimize',
-  'minus-circle',
   'minus',
+  'minus-circle',
   'mobile',
-  'money-none',
   'money',
+  'money-none',
+  'money-split',
   'moon',
   'nature',
-  'note-add',
   'note',
+  'note-add',
   'notification',
+  'order',
   'order-batches',
   'order-draft',
+  'order-filled',
   'order-first',
   'order-fulfilled',
   'order-repeat',
   'order-unfulfilled',
-  'order',
   'orders-status',
   'organization',
   'outdent',
   'outgoing',
+  'package',
+  'package-cancel',
   'package-fulfilled',
   'package-on-hold',
+  'package-reassign',
   'package-returned',
-  'package',
+  'page',
   'page-add',
   'page-attachment',
   'page-clock',
@@ -451,7 +488,6 @@ declare const privateIconArray: readonly [
   'page-remove',
   'page-report',
   'page-up',
-  'page',
   'pagination-end',
   'pagination-start',
   'paint-brush-flat',
@@ -461,50 +497,55 @@ declare const privateIconArray: readonly [
   'passkey',
   'paste',
   'pause-circle',
-  'payment-capture',
   'payment',
+  'payment-capture',
+  'payout',
   'payout-dollar',
   'payout-euro',
   'payout-pound',
   'payout-rupee',
   'payout-yen',
-  'payout',
+  'person',
   'person-add',
   'person-exit',
+  'person-filled',
   'person-list',
   'person-lock',
   'person-remove',
   'person-segment',
-  'person',
   'personalized-text',
+  'phablet',
+  'phone',
   'phone-in',
   'phone-out',
-  'phone',
-  'pin-remove',
   'pin',
+  'pin-remove',
   'plan',
-  'play-circle',
   'play',
+  'play-circle',
+  'plus',
+  'plus-circle',
   'plus-circle-down',
   'plus-circle-filled',
   'plus-circle-up',
-  'plus-circle',
-  'plus',
   'point-of-sale',
+  'point-of-sale-register',
   'price-list',
   'print',
+  'product',
   'product-add',
   'product-cost',
+  'product-filled',
   'product-list',
   'product-reference',
   'product-remove',
   'product-return',
   'product-unavailable',
-  'product',
-  'profile-filled',
   'profile',
-  'question-circle-filled',
+  'profile-filled',
   'question-circle',
+  'question-circle-filled',
+  'receipt',
   'receipt-dollar',
   'receipt-euro',
   'receipt-folded',
@@ -513,7 +554,6 @@ declare const privateIconArray: readonly [
   'receipt-refund',
   'receipt-rupee',
   'receipt-yen',
-  'receipt',
   'receivables',
   'redo',
   'referral-code',
@@ -531,11 +571,12 @@ declare const privateIconArray: readonly [
   'sandbox',
   'save',
   'savings',
+  'scan-qr-code',
+  'search',
   'search-add',
   'search-list',
   'search-recent',
   'search-resource',
-  'search',
   'select',
   'send',
   'settings',
@@ -545,6 +586,7 @@ declare const privateIconArray: readonly [
   'shield-pending',
   'shield-person',
   'shipping-label',
+  'shipping-label-cancel',
   'shopcodes',
   'slideshow',
   'smiley-happy',
@@ -553,68 +595,70 @@ declare const privateIconArray: readonly [
   'smiley-sad',
   'social-ad',
   'social-post',
+  'sort',
   'sort-ascending',
   'sort-descending',
-  'sort',
   'sound',
   'sports',
+  'star',
+  'star-circle',
   'star-filled',
   'star-half',
   'star-list',
-  'star',
-  'status-active',
   'status',
+  'status-active',
   'stop-circle',
+  'store',
   'store-import',
   'store-managed',
   'store-online',
-  'store',
   'sun',
-  'table-masonry',
   'table',
+  'table-masonry',
   'tablet',
   'target',
   'tax',
   'team',
+  'text',
   'text-align-center',
   'text-align-left',
   'text-align-right',
   'text-block',
   'text-bold',
   'text-color',
-  'text-font-list',
   'text-font',
+  'text-font-list',
   'text-grammar',
   'text-in-columns',
   'text-in-rows',
-  'text-indent-remove',
   'text-indent',
+  'text-indent-remove',
   'text-italic',
   'text-quote',
   'text-title',
   'text-underline',
   'text-with-image',
-  'text',
+  'theme',
   'theme-edit',
   'theme-store',
   'theme-template',
-  'theme',
   'three-d-environment',
   'thumbs-down',
   'thumbs-up',
   'tip-jar',
   'toggle-off',
   'toggle-on',
+  'transaction',
+  'transaction-fee-add',
   'transaction-fee-dollar',
   'transaction-fee-euro',
   'transaction-fee-pound',
   'transaction-fee-rupee',
   'transaction-fee-yen',
-  'transaction',
+  'transfer',
   'transfer-in',
   'transfer-internal',
   'transfer-out',
-  'transfer',
   'truck',
   'undo',
   'unknown-device',
@@ -630,12 +674,12 @@ declare const privateIconArray: readonly [
   'wand',
   'watch',
   'wifi',
-  'work-list',
   'work',
+  'work-list',
   'wrench',
-  'x-circle-filled',
-  'x-circle',
   'x',
+  'x-circle',
+  'x-circle-filled',
 ];
 export type IconType = (typeof privateIconArray)[number];
 /**
@@ -648,6 +692,7 @@ export type MaybeAllValuesShorthandProperty<T extends string> =
   | `${T} ${T} ${T}`
   | `${T} ${T} ${T} ${T}`;
 export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+export type MaybeResponsive<T> = T | `@container${string}`;
 /**
  * Prevents widening string literal types in a union to `string`.
  * @example
@@ -783,7 +828,7 @@ export interface DisplayProps {
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
    * @default 'auto'
    */
-  display?: 'auto' | 'none';
+  display?: MaybeResponsive<'auto' | 'none'>;
 }
 export interface AccessibilityRoleProps {
   /**
@@ -961,7 +1006,7 @@ export interface PaddingProps {
    *
    * @default 'none'
    */
-  padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+  padding?: MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>;
   /**
    * Adjust the block-padding.
    *
@@ -971,7 +1016,9 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  paddingBlock?: MaybeResponsive<
+    MaybeTwoValuesShorthandProperty<PaddingKeyword> | ''
+  >;
   /**
    * Adjust the block-start padding.
    *
@@ -979,7 +1026,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlockStart?: PaddingKeyword | '';
+  paddingBlockStart?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the block-end padding.
    *
@@ -987,7 +1034,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingBlockEnd?: PaddingKeyword | '';
+  paddingBlockEnd?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the inline padding.
    *
@@ -997,7 +1044,9 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
+  paddingInline?: MaybeResponsive<
+    MaybeTwoValuesShorthandProperty<PaddingKeyword> | ''
+  >;
   /**
    * Adjust the inline-start padding.
    *
@@ -1005,7 +1054,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInlineStart?: PaddingKeyword | '';
+  paddingInlineStart?: MaybeResponsive<PaddingKeyword | ''>;
   /**
    * Adjust the inline-end padding.
    *
@@ -1013,7 +1062,7 @@ export interface PaddingProps {
    *
    * @default '' - meaning no override
    */
-  paddingInlineEnd?: PaddingKeyword | '';
+  paddingInlineEnd?: MaybeResponsive<PaddingKeyword | ''>;
 }
 export type SizeUnits = `${number}px` | `${number}%` | `0`;
 export type SizeUnitsOrAuto = SizeUnits | 'auto';
@@ -1026,7 +1075,7 @@ export interface SizingProps {
    *
    * @default 'auto'
    */
-  blockSize?: SizeUnitsOrAuto;
+  blockSize?: MaybeResponsive<SizeUnitsOrAuto>;
   /**
    * Adjust the minimum block size.
    *
@@ -1034,7 +1083,7 @@ export interface SizingProps {
    *
    * @default '0'
    */
-  minBlockSize?: SizeUnits;
+  minBlockSize?: MaybeResponsive<SizeUnits>;
   /**
    * Adjust the maximum block size.
    *
@@ -1042,7 +1091,7 @@ export interface SizingProps {
    *
    * @default 'none'
    */
-  maxBlockSize?: SizeUnitsOrNone;
+  maxBlockSize?: MaybeResponsive<SizeUnitsOrNone>;
   /**
    * Adjust the inline size.
    *
@@ -1050,7 +1099,7 @@ export interface SizingProps {
    *
    * @default 'auto'
    */
-  inlineSize?: SizeUnitsOrAuto;
+  inlineSize?: MaybeResponsive<SizeUnitsOrAuto>;
   /**
    * Adjust the minimum inline size.
    *
@@ -1058,7 +1107,7 @@ export interface SizingProps {
    *
    * @default '0'
    */
-  minInlineSize?: SizeUnits;
+  minInlineSize?: MaybeResponsive<SizeUnits>;
   /**
    * Adjust the maximum inline size.
    *
@@ -1066,7 +1115,7 @@ export interface SizingProps {
    *
    * @default 'none'
    */
-  maxInlineSize?: SizeUnitsOrNone;
+  maxInlineSize?: MaybeResponsive<SizeUnitsOrNone>;
 }
 export type BorderStyleKeyword =
   | 'none'
@@ -1204,23 +1253,9 @@ export interface BaseBoxPropsWithRole
   extends BaseBoxProps,
     AccessibilityRoleProps {}
 export interface BoxProps extends BaseBoxPropsWithRole, GlobalProps {}
-export interface FocusEventProps {
-  /**
-   * Callback when the element loses focus.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
-   */
-  onBlur?: (event: FocusEvent) => void;
-  /**
-   * Callback when the element receives focus.
-   *
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
-   */
-  onFocus?: (event: FocusEvent) => void;
-}
 export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
   /**
-   * The behavior of the button.
+   * The behavior of the Button.
    *
    * - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.
    * - `button`: Used to indicate the component acts as a button, meaning it has no default action.
@@ -1232,14 +1267,14 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
    */
   type?: 'submit' | 'button' | 'reset';
   /**
-   * Callback when the button is activated.
+   * Callback when the Button is activated.
    * This will be called before the action indicated by `type`.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
    */
   onClick?: (event: Event) => void;
   /**
-   * Disables the button, meaning it cannot be clicked or receive focus.
+   * Disables the Button meaning it cannot be clicked or receive focus.
    *
    * @default false
    */
@@ -1247,7 +1282,7 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
   /**
    * Replaces content with a loading indicator while a background action is being performed.
    *
-   * This also disables the button.
+   * This also disables the Button.
    *
    * @default false
    */
@@ -1277,7 +1312,7 @@ export interface LinkBehaviorProps extends InteractionProps, FocusEventProps {
   target?: 'auto' | '_blank' | '_self' | '_parent' | '_top' | AnyString;
   /**
    * Causes the browser to treat the linked URL as a download with the string being the file name.
-   * Download only works for same-origin URLs, or the blob: and data: schemes.
+   * Download only works for same-origin URLs or the `blob:` and `data:` schemes.
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
    */
   download?: string;
@@ -1326,7 +1361,7 @@ export interface ButtonProps extends GlobalProps, BaseClickableProps {
   /**
    * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
    *
-   * Use this when using only an icon or the button text is not enough context
+   * Use this when using only an icon or the Button text is not enough context
    * for users using assistive technologies.
    */
   accessibilityLabel?: string;
@@ -1335,13 +1370,13 @@ export interface ButtonProps extends GlobalProps, BaseClickableProps {
    */
   children?: ComponentChildren;
   /**
-   * The type of icon to be displayed in the button.
+   * The type of icon to be displayed in the Button.
    *
    * @default ''
    */
   icon?: IconType | AnyString;
   /**
-   * The displayed inline width of the button.
+   * The displayed inline width of the Button.
    *
    * - `auto`: the size of the button depends on the surface and context.
    * - `fill`: the button will takes up 100% of the available inline size.
@@ -1357,7 +1392,7 @@ export interface ButtonProps extends GlobalProps, BaseClickableProps {
    */
   variant?: 'auto' | 'primary' | 'secondary' | 'tertiary';
   /**
-   * Sets the tone of the Button, based on the intention of the information being conveyed.
+   * Sets the tone of the Button based on the intention of the information being conveyed.
    *
    * @default 'auto'
    */
@@ -2011,12 +2046,19 @@ export interface DatePickerProps
    */
   value?: string;
   /**
-   * Callback when any date is selected. Will fire before `onChange`.
+   * Callback when any date is selected.
+   *
+   * - If `type="single"`, fires when a date is selected and happens before `onChange`.
+   * - If `type="multiple"`, fires when a date is selected before `onChange`.
+   * - If `type="range"`, fires when a first date is selected (with the partial value formatted as `YYYY-MM-DD--`), and when the last date is selected before `onChange`.
    */
   onInput?: (event: Event) => void;
   /**
-   * Callback when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`.
-   *      For `type="range"`, this is only called when the range is completed by selecting the end date of the range.
+   * Callback when the value is committed.
+   *
+   * - If `type="single"`, fires when a date is selected after `onInput`.
+   * - If `type="multiple"`, fires when a date is selected after `onInput`.
+   * - If `type="range"`, fires when a range is completed by selecting the end date after `onInput`.
    */
   onChange?: (event: Event) => void;
 }
@@ -2120,7 +2162,7 @@ export interface GapProps {
    *
    * @default 'none'
    */
-  gap?: MaybeTwoValuesShorthandProperty<SpacingKeyword>;
+  gap?: MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>;
   /**
    * Adjust spacing between elements in the block axis.
    *
@@ -2128,7 +2170,7 @@ export interface GapProps {
    *
    * @default '' - meaning no override
    */
-  rowGap?: SpacingKeyword | '';
+  rowGap?: MaybeResponsive<SpacingKeyword | ''>;
   /**
    * Adjust spacing between elements in the inline axis.
    *
@@ -2136,7 +2178,7 @@ export interface GapProps {
    *
    * @default '' - meaning no override
    */
-  columnGap?: SpacingKeyword | '';
+  columnGap?: MaybeResponsive<SpacingKeyword | ''>;
 }
 export type BaselinePosition = 'baseline' | 'first baseline' | 'last baseline';
 export type ContentDistribution =
@@ -2429,7 +2471,7 @@ export type NumberAutocompleteField = ExtractStrict<
   AnyAutocompleteField,
   'one-time-code' | 'cc-number' | 'cc-csc'
 >;
-export interface PageProps extends GlobalProps {
+export interface PageProps extends GlobalProps, ActionSlots {
   /**
    * The content of the Page.
    */
@@ -2446,19 +2488,10 @@ export interface PageProps extends GlobalProps {
    * Additional contextual information about the page.
    */
   accessory?: ComponentChildren;
-  /**
-   * The primary action to perform, provided as a button or link type element.
-   * When a `Button` is added to the `primaryAction` it's variant is set to `primary`
-   */
-  primaryAction?: ComponentChildren;
   /**
    * The breadcrumb actions to perform, provided as link elements.
    */
   breadcrumbActions?: ComponentChildren;
-  /**
-   * Secondary actions. These are `Button`s that will be contextually the 'secondary' variant.
-   */
-  secondaryActions?: ComponentChildren;
   /**
    * The aside element is section of a page that contains content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
    * Such sections are often represented as sidebars in printed typography.
@@ -2474,9 +2507,50 @@ export interface PageProps extends GlobalProps {
    */
   inlineSize?: SizeKeyword;
 }
+export interface ScrollEventProps {
+  /**
+   * Callback when the scroll position reaches any edge.
+   *
+   * Provides information about which edges have been reached:
+   * - `inline: 'start'` - reached the inline-start edge
+   * - `inline: 'end'` - reached the inline-end edge
+   * - `block: 'start'` - reached the block-start edge
+   * - `block: 'end'` - reached the block-end edge
+   * - `null` - not at that edge
+   *
+   * Uses the flow‑relative axes.
+   */
+  onScrollToEdge?: (
+    inline: 'start' | 'end' | null,
+    block: 'start' | 'end' | null,
+  ) => void;
+  /**
+   * Distance from the edge at which `onScrollToEdge` fires.
+   * Percentage values are relative to the scrollable content's size in that axis.
+   *
+   * [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
+   * supported.
+   *
+   * 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:
+   * - `48px` means the distance from the edge at which `onScrollToEdge` fires from block-start, inline-end, block-end and inline-start is `48px`.
+   * - `48px 0` means the distance from the edge at which `onScrollToEdge` fires from block-start and block-end is `48px`, and for inline-start and inline-end is `0`.
+   * - `48 0 48` means the distance from the edge at which `onScrollToEdge` fires from block-start is `48px`, for inline-end is `0`, for block-end is `48px` and for inline-start is `0`.
+   * - `48px 0 48px 10%` means the distance from the edge at which `onScrollToEdge` fires from block-start is `48px`, for inline-end is `0`, for block-end is `48px` and for inline-start is `10%`.
+   *
+   * @default '0'
+   * Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/scrollMargin) for more details.
+   */
+  scrollMargin?: MaybeAllValuesShorthandProperty<SizeUnits>;
+}
 export type OverflowKeyword = 'auto' | 'hidden';
 export interface ScrollBoxProps
   extends GlobalProps,
+    ScrollEventProps,
     Omit<BaseBoxPropsWithRole, 'overflow'> {
   /**
    * Sets the overflow behavior of the element.
@@ -2539,34 +2613,34 @@ export interface StackProps
    */
   children?: ComponentChildren;
   /**
-   * Sets how the children are placed within the Stack.
+   * Sets how the children are placed within the Stack. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
    *
    * @default 'block'
    *
    * @implementation the content will wrap if the direction is 'inline', and not wrap if the direction is 'block'
    */
-  direction?: 'block' | 'inline';
+  direction?: MaybeResponsive<'block' | 'inline'>;
   /**
    * Aligns the Stack along the main axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
    * @default 'normal'
    */
-  justifyContent?: JustifyContentKeyword;
+  justifyContent?: MaybeResponsive<JustifyContentKeyword>;
   /**
    * Aligns the Stack's children along the cross axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
    * @default 'normal'
    */
-  alignItems?: AlignItemsKeyword;
+  alignItems?: MaybeResponsive<AlignItemsKeyword>;
   /**
    * Aligns the Stack along the cross axis.
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
    * @default 'normal'
    */
-  alignContent?: AlignContentKeyword;
+  alignContent?: MaybeResponsive<AlignContentKeyword>;
 }
 export interface TextProps
   extends GlobalProps,
@@ -2581,7 +2655,7 @@ export interface TextProps
   /**
    * Provide semantic meaning and default styling to the text.
    *
-   * Other presentation properties on `<s-text>` override the default styling.
+   * Other presentation properties on Text override the default styling.
    *
    * @default 'generic'
    */
@@ -2687,6 +2761,35 @@ export interface TextFieldProps
     MinMaxLengthProps,
     AutocompleteProps<TextAutocompleteField>,
     FieldDecorationProps {}
+export interface TileProps
+  extends GlobalProps,
+    Pick<BaseClickableProps, 'onClick' | 'disabled'> {
+  /**
+   * A title that describes the content of the Tile.
+   *
+   * @default ''
+   */
+  heading?: string;
+  /**
+   * 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. It may clamp, truncate, or abbreviate larger values.
+   *
+   */
+  itemCount?: number;
+  /**
+   * Sets the tone of the Tile, based on the intention of the information being conveyed.
+   * @default 'auto'
+   */
+  tone?: ExtractStrict<ToneKeyword, 'auto' | 'neutral' | 'accent'>;
+}
 export interface TimePickerProps
   extends GlobalProps,
     InputProps,
@@ -2739,7 +2842,14 @@ export interface TimePickerProps
    *
    * The default, `''`, means no time is selected.
    *
-   * The value must be in `HH:MM` format.
+   * The value must be a 24-hour time in `HH:mm:ss` format, with leading zeros.
+   *
+   * Examples: `"00:00:00"`, `"09:05:00"`, `"23:59:00"`, `"14:03:30"`.
+   *
+   * This follows the HTML time input value format, which is always 24-hour with
+   * leading zeros regardless of UI presentation.
+   *
+   * See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time
    *
    * If the provided value is invalid, '' is used as the value.
    *
@@ -2751,7 +2861,14 @@ export interface TimePickerProps
    *
    * The default, `''`, means no time is selected.
    *
-   * The value must be in `HH:MM` format.
+   * The value must be a 24-hour time in `HH:mm:ss` format, with leading zeros.
+   *
+   * Examples: `"00:00:00"`, `"09:05:00"`, `"23:59:00"`, `"14:03:30"`.
+   *
+   * This follows the HTML time input value format, which is always 24-hour with
+   * leading zeros regardless of UI presentation.
+   *
+   * See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time
    *
    * If the provided value is invalid, '' is used as the value.
    *
@@ -2765,6 +2882,60 @@ export interface TimePickerProps
    */
   step?: number;
 }
+export interface TimeFieldProps
+  extends GlobalProps,
+    BaseTextFieldProps,
+    Pick<
+      TimePickerProps,
+      'value' | 'defaultValue' | 'allow' | 'disallow' | 'step'
+    > {
+  /**
+   * Callback when the field has an invalid time.
+   * This callback will be called, if the time typed is invalid or disabled.
+   *
+   * Times that don’t exist or have formatting errors are considered invalid. Some examples of invalid times are:
+   * - 24:00
+   * - 12:60
+   *
+   * Disallowed times are considered invalid.
+   *
+   * It’s important to note that this callback will be called only when the user **finishes editing** the time,
+   * and it’s called right after the `onChange` callback.
+   * The field is **not** validated on every change to the input. Once the buyer has signalled that
+   * they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.
+   */
+  onInvalid?: (event: Event) => void;
+  /**
+   * Current selected value.
+   *
+   * The default, `''`, means no time is selected.
+   *
+   * The value must be a 24-hour time in `HH:mm:ss` format, with leading zeros.
+   *
+   * Examples: `"00:00:00"`, `"09:05:00"`, `"23:59:00"`, `"14:03:30"`.
+   *
+   * This follows the HTML time input value format, which is always 24-hour with
+   * leading zeros regardless of UI presentation.
+   *
+   * See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time
+   */
+  value?: string;
+  /**
+   * Default selected value.
+   *
+   * The default, `''`, means no time is selected.
+   *
+   * The value must be a 24-hour time in `HH:mm:ss` format, with leading zeros.
+   *
+   * Examples: `"00:00:00"`, `"09:05:00"`, `"23:59:00"`, `"14:03:30"`.
+   *
+   * This follows the HTML time input value format, which is always 24-hour with
+   * leading zeros regardless of UI presentation.
+   *
+   * See: https://developer.mozilla.org/docs/Web/HTML/Element/input/time
+   */
+  defaultValue?: string;
+}
 //
 // Preact Virtual DOM
 // -----------------------------------